Merge pull request #10 from 10play/move-core

Move core

.gitignore

@@ -79,3 +79,4 @@ android/keystores/debug.keystore
 
 # generated by bob
 lib/
+lib-web/

example/src/Examples/Advanced/AdvancedRichText.tsx

@@ -43,6 +43,7 @@ const Counter = ({ editor }: { editor: EditorInstance }) => {
 
 export const Advanced = ({}: NativeStackScreenProps<any, any, any>) => {
   const editor = useNativeEditor({
+    autofocus: true,
     initialContent: `<p>This is a basic example of implementing images.</p><img src="https://source.unsplash.com/8xznAGy4HcY/800x400" /><p>s sdfdsf fd dsfd ssdfd dsfdsfdsfdsfd</p>`,
     plugins: [
       TenTapStartKit,
@@ -65,7 +66,6 @@ export const Advanced = ({}: NativeStackScreenProps<any, any, any>) => {
           avoidIosKeyboard
           editor={editor}
           DEV
-          autofocus
           customSource={AdvancedEditor}
         />
       </View>

example/src/Examples/Advanced/Editor/AdvancedEditor.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EditorContent } from '@tiptap/react';
-import { useTenTap } from 'tentap';
+import { useTenTap } from 'tentap/web';
 import Document from '@tiptap/extension-document';
 import Paragraph from '@tiptap/extension-paragraph';
 import Text from '@tiptap/extension-text';

example/src/Examples/Advanced/Editor/vite.config.ts

@@ -16,6 +16,10 @@ export default defineConfig({
         find: 'tentap',
         replacement: resolve(__dirname, '../../../../../src/webEditorUtils'),
       },
+      {
+        find: 'tentap/web',
+        replacement: resolve(__dirname, '../../../../../src/webEditorUtils'),
+      },
     ],
   },
   plugins: [react(), viteSingleFile()],

example/src/Examples/Basic.tsx

@@ -27,7 +27,6 @@ import { CustomKeyboard } from '../../../src/RichText/Keyboard';
 const exampleStyles = StyleSheet.create({
   fullScreen: {
     flex: 1,
-    borderWidth: 1,
   },
   keyboardAvoidingView: {
     position: 'absolute',
@@ -38,6 +37,7 @@ const exampleStyles = StyleSheet.create({
 
 export const Basic = ({}: NativeStackScreenProps<any, any, any>) => {
   const editor = useNativeEditor({
+    autofocus: true,
     initialContent: `<p>This is a basic <a href="https://google.com">example</a> of implementing images.</p><img src="https://source.unsplash.com/8xznAGy4HcY/800x400" /><p>s</p>`,
     plugins: [
       CoreBridge,
@@ -57,7 +57,7 @@ export const Basic = ({}: NativeStackScreenProps<any, any, any>) => {
   return (
     <SafeAreaView style={exampleStyles.fullScreen} ref={TapRef}>
       <View style={exampleStyles.fullScreen}>
-        <RichText avoidIosKeyboard editor={editor} DEV autofocus />
+        <RichText avoidIosKeyboard editor={editor} DEV />
       </View>
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}

example/src/Examples/EditorStickToKeyboardExample.tsx

@@ -60,6 +60,7 @@ export const EditorStickToKeyboardExample = ({}: NativeStackScreenProps<
   any
 >) => {
   const editor = useNativeEditor({
+    autofocus: true,
     plugins: [TenTapStartKit, CoreBridge],
     initialContent: '<p>Initial lovely message...</p>',
   });
@@ -102,7 +103,7 @@ export const EditorStickToKeyboardExample = ({}: NativeStackScreenProps<
         style={exampleStyles.keyboardAvoidingView}
       >
         <View style={exampleStyles.editorWrapper}>
-          <RichText autofocus editor={editor} DEV />
+          <RichText editor={editor} DEV />
           <TouchableOpacity
             style={exampleStyles.sendButton}
             onPress={onSendMessage}

package.json

@@ -6,6 +6,16 @@
   "module": "lib/module/index",
   "types": "lib/typescript/src/index.d.ts",
   "react-native": "src/index",
+  "exports": {
+    ".": {
+      "import": "./lib/module/index",
+      "require": "./lib/commonjs/index"
+    },
+    "./web": {
+      "import": "./lib-web/index.mjs",
+      "require": "./lib-web/index.umd.cjs"
+    }
+  },
   "source": "src/index",
   "files": [
     "src",

src/RichText/RichText.tsx

@@ -9,14 +9,13 @@ import {
 // @ts-ignore
 import editorHTML from '../simpleWebEditor/build/index.html';
 
-import { type EditorMessage, EditorMessageType } from '../types/Messaging';
+import { type EditorMessage } from '../types/Messaging';
 import { useKeyboard } from '../utils';
 import type { EditorInstance } from '../types';
 
 interface RichTextProps extends WebViewProps {
   editor: EditorInstance;
   avoidIosKeyboard?: boolean;
-  autofocus?: boolean;
   customSource?: string;
   DEV?: boolean;
 }
@@ -43,7 +42,6 @@ export const RichText = ({
   editor,
   customSource,
   avoidIosKeyboard,
-  autofocus,
 }: RichTextProps) => {
   const { keyboardHeight: iosKeyboardHeight, isKeyboardUp } = useKeyboard();
   const source: WebViewProps['source'] = DEV
@@ -55,19 +53,8 @@ export const RichText = ({
     // Parse the message sent from the editor
     const { type, payload } = JSON.parse(data) as EditorMessage;
     editor.plugins?.forEach((e) => {
-      e.onEditorMessage && e.onEditorMessage({ type, payload });
+      e.onEditorMessage && e.onEditorMessage({ type, payload }, editor);
     });
-    switch (type) {
-      case EditorMessageType.EditorReady:
-        if (autofocus) {
-          console.log('focus');
-          editor.focus('end');
-        }
-        break;
-      case EditorMessageType.StateUpdate:
-        editor._updateEditorState(payload);
-        break;
-    }
   };
 
   useEffect(() => {
@@ -115,7 +102,7 @@ export const RichText = ({
 
   return (
     <>
-      {autofocus && Platform.OS === 'android' && (
+      {editor.autofocus && Platform.OS === 'android' && (
         <TextInput autoFocus style={styles.hiddenInput} />
       )}
       <WebView

src/RichText/useNativeEditor.tsx

@@ -4,7 +4,6 @@ import {
   type EditorActionMessage,
   EditorMessageType,
 } from '../types/Messaging';
-import { EditorUpdateSettings } from '../types/Actions';
 import { type EditorNativeState } from '../types/EditorNativeState';
 import { EditorHelper } from './EditorHelper';
 import type { EditorInstance } from '../types';
@@ -15,6 +14,7 @@ type Subscription<T> = (cb: (val: T) => void) => () => void;
 export const useNativeEditor = (options?: {
   plugins?: TenTapBridge<any, any, any>[];
   initialContent?: string;
+  autofocus?: boolean;
 }): EditorInstance => {
   const webviewRef = useRef<WebView>(null);
   // Till we will implement default per plugin
@@ -54,41 +54,31 @@ export const useNativeEditor = (options?: {
     });
   };
 
-  const updateScrollThresholdAndMargin = (bottom: number) =>
-    sendAction({
-      type: EditorUpdateSettings.UpdateScrollThresholdAndMargin,
-      payload: bottom,
-    });
-
-  const focus = (pos: 'start' | 'end' | 'all' | number | boolean | null) => {
-    webviewRef.current?.requestFocus();
-    if (editorStateRef.current) {
-      _updateEditorState({
-        ...(editorStateRef.current as EditorNativeState),
-        isFocused: true,
-      });
-    }
-    sendAction({
-      type: EditorUpdateSettings.Focus,
-      payload: pos,
-    });
-  };
-
   const editorInstance = {
     plugins: options?.plugins,
+    initialContent: options?.initialContent,
+    autofocus: options?.autofocus,
     webviewRef,
-    updateScrollThresholdAndMargin,
     getEditorState,
-    initialContent: options?.initialContent,
-    focus,
     _updateEditorState,
     _subscribeToEditorStateUpdate,
   };
 
   const editorInstanceExtendByPlugins = (options?.plugins || []).reduce(
     (acc, cur) => {
       if (!cur.extendEditorInstance) return acc;
-      return Object.assign(acc, cur.extendEditorInstance(sendAction));
+      return Object.assign(
+        acc,
+        cur.extendEditorInstance(
+          sendAction,
+          webviewRef,
+          editorStateRef,
+          _updateEditorState
+        ),
+        webviewRef,
+        editorStateRef.current,
+        _updateEditorState
+      );
     },
     editorInstance
   ) as EditorInstance;

src/bridges/base.ts

@@ -1,4 +1,7 @@
 import { Editor, type AnyExtension } from '@tiptap/core';
+import type { EditorInstance, EditorNativeState } from '../types';
+import type WebView from 'react-native-webview';
+import type { RefObject } from 'react';
 
 interface TenTapBridge<T = any, E = any, M = any> {
   name: string;
@@ -9,9 +12,14 @@ interface TenTapBridge<T = any, E = any, M = any> {
     message: M,
     sendMessageBack: (message: M) => void
   ) => boolean;
-  onEditorMessage?: (message: M) => boolean;
+  onEditorMessage?: (message: M, editorInstance: EditorInstance) => boolean;
   extendEditorState?: (editor: Editor) => T;
-  extendEditorInstance?: (sendBridgeMessage: (message: M) => void) => E;
+  extendEditorInstance?: (
+    sendBridgeMessage: (message: M) => void,
+    webviewRef?: RefObject<WebView>,
+    editorState?: RefObject<EditorNativeState | {}>,
+    _setEditorState?: (editorState: EditorNativeState) => void
+  ) => E;
   extendCSS?: string | undefined;
   config?: string;
 }