naming

example/src/Examples/Advanced/AdvancedRichText.tsx

@@ -17,13 +17,14 @@ import {
   TenTapStartKit,
   Toolbar,
   UnderlineBridge,
-  useEditor,
+  useNativeEditor,
 } from 'tentap';
 
 // @ts-ignore
 import AdvancedEditor from './Editor/build/index.html';
 import { CustomKeyboard } from '../../../../src/RichText/Keyboard';
 import { ColorKeyboard } from '../../../../src/RichText/Keyboard/ColorKeyboard';
+import { BubbleMenuBridge } from './BubbleMenuBridge';
 
 const exampleStyles = StyleSheet.create({
   fullScreen: {
@@ -37,8 +38,8 @@ const exampleStyles = StyleSheet.create({
 });
 
 export const Advanced = ({}: NativeStackScreenProps<any, any, any>) => {
-  const editor = useEditor({
-    initialContent: `<p>This is a basic example of implementing images.</p><img src="https://source.unsplash.com/8xznAGy4HcY/800x400" /><p>s</p>`,
+  const editor = useNativeEditor({
+    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,
       UnderlineBridge,
@@ -47,6 +48,7 @@ export const Advanced = ({}: NativeStackScreenProps<any, any, any>) => {
       LinkBridge,
       ColorBridge,
       HighlightBridge,
+      BubbleMenuBridge,
     ],
   });
   const TapRef = useRef(null);
@@ -58,6 +60,7 @@ export const Advanced = ({}: NativeStackScreenProps<any, any, any>) => {
         <RichText
           avoidIosKeyboard
           editor={editor}
+          DEV
           autofocus
           customSource={AdvancedEditor}
         />

example/src/Examples/Advanced/BubbleMenuBridge.ts

@@ -0,0 +1,33 @@
+import { TenTapBridge } from 'tentap';
+
+type BubbleEditorState = {};
+
+type BubbleEditorInstance = {};
+
+declare module 'tentap' {
+  interface EditorNativeState extends BubbleEditorState {}
+  interface EditorInstance extends BubbleEditorInstance {}
+}
+
+export enum BubbleEditorActionType {
+  OnComment = 'new-comment',
+}
+
+type BubbleMessage = {
+  type: BubbleEditorActionType.OnComment;
+};
+
+export const BubbleMenuBridge = new TenTapBridge<
+  BubbleEditorState,
+  BubbleEditorInstance,
+  BubbleMessage
+>({
+  forceName: 'sdfs',
+  onEditorMessage: (message: BubbleMessage) => {
+    if (message.type === BubbleEditorActionType.OnComment) {
+      console.log('ddddd333');
+      return true;
+    }
+    return true;
+  },
+});

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

@@ -1,9 +1,28 @@
 import React from 'react';
-import { EditorContent } from '@tiptap/react';
-import { useTenTap } from 'tentap';
+import { BubbleMenu, EditorContent } from '@tiptap/react';
+import { sendMessage, useTenTap } from 'tentap';
 
 export const AdvancedEditor = () => {
   const editor = useTenTap();
-
-  return <EditorContent editor={editor} />;
+  // alert('ssss')
+  return (
+    <>
+      {editor && (
+        <BubbleMenu editor={editor || undefined}>
+          <button
+            onClick={() =>
+              window.ReactNativeWebView?.postMessage(
+                JSON.stringify({
+                  type: 'new-comment',
+                })
+              )
+            }
+          >
+            Add comment
+          </button>
+        </BubbleMenu>
+      )}
+      <EditorContent editor={editor} />
+    </>
+  );
 };

example/src/Examples/Advanced/Editor/index.html

@@ -10,7 +10,7 @@
       margin: 0;
       padding: 0;
     }
-    #root > div {
+    #root > div:nth-of-type(1) {
       overflow: auto;
       height: 100%;
       position: absolute;

example/src/Examples/Advanced/Editor/tsconfig.json

@@ -19,7 +19,7 @@
       "skipLibCheck": true,
       "strict": true,
       "paths": {
-        "tentap": ["../../../../../src/Editor/useTenTap"]
+        "tentap": ["../../../../../src/webEditorUtils"]
       }
     },
   }

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

@@ -14,10 +14,7 @@ export default defineConfig({
     alias: [
       {
         find: 'tentap',
-        replacement: resolve(
-          __dirname,
-          '../../../../../src/Editor/useTenTap.tsx'
-        ),
+        replacement: resolve(__dirname, '../../../../../src/webEditorUtils'),
       },
     ],
   },

example/src/Examples/Basic.tsx

@@ -17,7 +17,7 @@ import {
   TenTapStartKit,
   Toolbar,
   UnderlineBridge,
-  useEditor,
+  useNativeEditor,
 } from 'tentap';
 import { ColorKeyboard } from '../../../src/RichText/Keyboard/ColorKeyboard';
 import { CustomKeyboard } from '../../../src/RichText/Keyboard';
@@ -34,7 +34,7 @@ const exampleStyles = StyleSheet.create({
 });
 
 export const Basic = ({}: NativeStackScreenProps<any, any, any>) => {
-  const editor = useEditor({
+  const editor = useNativeEditor({
     initialContent: `<p>This is a basic example of implementing images.</p><img src="https://source.unsplash.com/8xznAGy4HcY/800x400" /><p>s</p>`,
     plugins: [
       TenTapStartKit,

example/src/Examples/CustomKeyboardExample/index.tsx

@@ -11,7 +11,7 @@ import {
   RichText,
   TenTapStartKit,
   Toolbar,
-  useEditor,
+  useNativeEditor,
   type ToolbarItem,
 } from 'tentap';
 import { CustomKeyboard } from '../../../../src/RichText/Keyboard';
@@ -34,7 +34,7 @@ export const CustomKeyboardExample = ({}: NativeStackScreenProps<
   any,
   any
 >) => {
-  const editor = useEditor({
+  const editor = useNativeEditor({
     plugins: [TenTapStartKit],
   });
   const TapRef = useRef(null);

example/src/Examples/EditorStickToKeyboardExample.tsx

@@ -14,7 +14,7 @@ import {
   RichText,
   TenTapStartKit,
   Toolbar,
-  useEditor,
+  useNativeEditor,
   CoreBridge,
 } from 'tentap';
 import { CustomKeyboard } from '../../../src/RichText/Keyboard';
@@ -59,7 +59,7 @@ export const EditorStickToKeyboardExample = ({}: NativeStackScreenProps<
   any,
   any
 >) => {
-  const editor = useEditor({
+  const editor = useNativeEditor({
     plugins: [TenTapStartKit, CoreBridge],
     initialContent: '<p>Initial lovely message...</p>',
   });

src/RichText/Keyboard/index.tsx

@@ -4,7 +4,7 @@ import { CustomKeyboardAndroid } from './CustomKeyboard.android';
 import { CustomKeyboardIOS } from './CustomKeyboard.ios';
 import type { CustomKeyboardExtension } from './CustomKeyboardExtension';
 import type { EditorInstance } from '../../types';
-import { useEditorState } from '../useEditorState';
+import { useNativeEditorState } from '../useNativeEditorState';
 
 interface CustomKeyboardProps {
   rootRef: React.RefObject<any>;
@@ -20,7 +20,7 @@ export const CustomKeyboard = ({
   rootRef,
   editor,
 }: CustomKeyboardProps) => {
-  const editorState = useEditorState(editor);
+  const editorState = useNativeEditorState(editor);
 
   useEffect(() => {
     if (editorState.isFocused) {

src/RichText/RichText.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-native-webview';
 
 // @ts-ignore
-import editorHTML from '../Editor/build/index.html';
+import editorHTML from '../simpleWebEditor/build/index.html';
 
 import { type EditorMessage, EditorMessageType } from '../types/Messaging';
 import { useKeyboard } from '../utils';

src/RichText/Toolbar/Toolbar.tsx

@@ -1,5 +1,5 @@
 import { FlatList, Image, TouchableOpacity, StyleSheet } from 'react-native';
-import { useEditorState } from '../useEditorState';
+import { useNativeEditorState } from '../useNativeEditorState';
 import React from 'react';
 import { DEFAULT_TOOLBAR_ITEMS, type ToolbarItem } from './actions';
 import { EditLinkBar } from './EditLinkBar';
@@ -57,7 +57,7 @@ export function Toolbar({
   setActiveKeyboard,
   activeKeyboard,
 }: ToolbarProps) {
-  const editorState = useEditorState(editor);
+  const editorState = useNativeEditorState(editor);
   const { isKeyboardUp } = useKeyboard();
   const [toolbarContext, setToolbarContext] = React.useState<ToolbarContext>(
     ToolbarContext.Main

src/RichText/Toolbar/actions.ts

@@ -1,7 +1,7 @@
 import { Images } from '../../assets';
 import { EditorActionType } from '../../types/Actions';
 import type { EditorInstance } from '../../types';
-import { type EditorState } from '../../types/EditorState';
+import { type EditorNativeState } from '../../types/EditorNativeState';
 import { ToolbarContext } from './Toolbar';
 import { ColorKeyboard } from '../Keyboard/ColorKeyboard';
 
@@ -17,7 +17,7 @@ export const ToolbarItems = {
 
 type ArgsToolbarCB = {
   editor: EditorInstance;
-  editorState: EditorState;
+  editorState: EditorNativeState;
   setToolbarContext: (
     ToolbarContext: ToolbarContext | ((prev: ToolbarContext) => ToolbarContext)
   ) => void;

src/RichText/index.ts

@@ -1,5 +1,5 @@
 export * from './RichText';
-export * from './useEditor';
-export * from './useEditorState';
+export * from './useNativeEditor';
+export * from './useNativeEditorState';
 export * from './Toolbar';
 export * from './Keyboard/CustomKeyboard.ios';

src/RichText/useEditor.tsx → src/RichText/useNativeEditor.tsx

@@ -5,28 +5,28 @@ import {
   EditorMessageType,
 } from '../types/Messaging';
 import { EditorUpdateSettings } from '../types/Actions';
-import { type EditorState } from '../types/EditorState';
+import { type EditorNativeState } from '../types/EditorNativeState';
 import { EditorHelper } from './EditorHelper';
 import type { EditorInstance } from '../types';
-import type TenTapBridge from '../Editor/plugins/base';
+import type TenTapBridge from '../bridges/base';
 
 type Subscription<T> = (cb: (val: T) => void) => () => void;
 
-export const useEditor = (options?: {
+export const useNativeEditor = (options?: {
   plugins?: TenTapBridge<any, any, any>[];
   initialContent?: string;
 }): EditorInstance => {
   const webviewRef = useRef<WebView>(null);
   // Till we will implement default per plugin
-  const editorStateRef = useRef<EditorState | {}>({});
-  const editorStateSubsRef = useRef<((state: EditorState) => void)[]>([]);
+  const editorStateRef = useRef<EditorNativeState | {}>({});
+  const editorStateSubsRef = useRef<((state: EditorNativeState) => void)[]>([]);
 
-  const _updateEditorState = (editorState: EditorState) => {
+  const _updateEditorState = (editorState: EditorNativeState) => {
     editorStateRef.current = editorState;
     editorStateSubsRef.current.forEach((sub) => sub(editorState));
   };
 
-  const _subscribeToEditorStateUpdate: Subscription<EditorState> = (cb) => {
+  const _subscribeToEditorStateUpdate: Subscription<EditorNativeState> = (cb) => {
     editorStateSubsRef.current.push(cb);
     return () => {
       editorStateSubsRef.current = editorStateSubsRef.current.filter(
@@ -79,6 +79,7 @@ export const useEditor = (options?: {
 
   const editorInstanceExtendByPlugins = (options?.plugins || []).reduce(
     (acc, cur) => {
+      if (!cur.extendEditorInstance) return acc;
       return Object.assign(acc, cur.extendEditorInstance(sendAction));
     },
     editorInstance

src/RichText/useEditorState.tsx → src/RichText/useNativeEditorState.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import type { EditorInstance } from '../types';
 
-export const useEditorState = (editor: EditorInstance) => {
+export const useNativeEditorState = (editor: EditorInstance) => {
   const [editorState, setEditorState] = useState(editor.getEditorState());
 
   useEffect(() => {

src/Editor/plugins/StarterKit.ts → src/bridges/StarterKit.ts

@@ -39,8 +39,8 @@ type TenTapStartKitEditorInstance = {
   redo: () => void;
 };
 
-declare module '../../types/EditorState' {
-  interface EditorState extends TenTapStartKitEditorState {}
+declare module '../types/EditorNativeState' {
+  interface EditorNativeState extends TenTapStartKitEditorState {}
   interface EditorInstance extends TenTapStartKitEditorInstance {}
 }
 

src/Editor/plugins/base.ts → src/bridges/base.ts

@@ -3,20 +3,20 @@ import { Editor, type AnyExtension } from '@tiptap/core';
 interface TenTapBridge<T, E, M> {
   name: string;
   tiptapExtension?: AnyExtension | AnyExtension[];
-  onBridgeMessage: (
+  onBridgeMessage?: (
     editor: Editor,
     message: M,
     sendMessageBack: (message: M) => void
   ) => boolean;
   onEditorMessage?: (message: M) => boolean;
-  extendEditorState: (editor: Editor) => T;
-  extendEditorInstance: (sendBridgeMessage: (message: M) => void) => E;
+  extendEditorState?: (editor: Editor) => T;
+  extendEditorInstance?: (sendBridgeMessage: (message: M) => void) => E;
   extendCSS?: string | undefined;
 }
 
 type CreateTenTapBridgeArgs<T, E, M> = Omit<
   TenTapBridge<T, E, M> & { forceName?: string },
-  'name'
+  'name' | 'sendMessage'
 >;
 
 class TenTapBridge<T, E, M> {

src/Editor/plugins/color.ts → src/bridges/color.ts

@@ -10,8 +10,8 @@ type ColorEditorInstance = {
   setColor: (color: string) => void;
 };
 
-declare module '../../types/EditorState' {
-  interface EditorState extends ColorEditorState {}
+declare module '../types/EditorNativeState' {
+  interface EditorNativeState extends ColorEditorState {}
   interface EditorInstance extends ColorEditorInstance {}
 }
 

src/Editor/plugins/core.ts → src/bridges/core.ts

@@ -1,5 +1,5 @@
 import TenTapBridge from './base';
-import { asyncMessages } from '../../RichText/AsyncMessages';
+import { asyncMessages } from '../RichText/AsyncMessages';
 
 type CoreEditorState = {};
 
@@ -8,8 +8,8 @@ type CoreEditorInstance = {
   setContent: (content: string) => void;
 };
 
-declare module '../../types/EditorState' {
-  interface EditorState extends CoreEditorState {}
+declare module '../types/EditorNativeState' {
+  interface EditorNativeState extends CoreEditorState {}
   interface EditorInstance extends CoreEditorInstance {}
 }
 

src/Editor/plugins/highlight.ts → src/bridges/highlight.ts

@@ -10,8 +10,8 @@ type HighlightEditorInstance = {
   setHighlight: (color: string) => void;
 };
 
-declare module '../../types/EditorState' {
-  interface EditorState extends HighlightEditorState {}
+declare module '../types/EditorNativeState' {
+  interface EditorNativeState extends HighlightEditorState {}
   interface EditorInstance extends HighlightEditorInstance {}
 }