@multiplatform.one/rich-text 6.0.0

package/src/editor/TentapEditor.native.tsx

@@ -0,0 +1,269 @@
+/**
+ * 10Tap-based rich text editor for React Native
+ *
+ * Rebuilt to properly use 10Tap bridge extensions:
+ * - ColorBridge for text color
+ * - HighlightBridge for highlight/background color
+ * - ImageBridge for image insertion
+ * - TaskListBridge for task lists
+ *
+ * Uses getEditorStateFromBridge() for state mapping and
+ * RichEditorContext for styling from the compound component.
+ *
+ * No BubbleToolbar (10Tap does not support floating menus).
+ */
+
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from "react";
+import { StyleSheet, useColorScheme } from "react-native";
+import {
+  RichText,
+  useEditorBridge,
+  TenTapStartKit,
+  UnderlineBridge,
+  LinkBridge,
+  PlaceholderBridge,
+  ColorBridge,
+  HighlightBridge,
+  ImageBridge,
+  TaskListBridge,
+  darkEditorCss,
+  darkEditorTheme,
+} from "@10play/tentap-editor";
+import { View, useThemeName } from "tamagui";
+import type { RichEditorProps, RichEditorRef, EditorCommand } from "../types";
+import { RichEditorContext } from "../context";
+import { getEditorStateFromBridge } from "./useEditorState";
+
+function useNativeEditorDarkMode(): boolean {
+  const themeName = useThemeName();
+  const osScheme = useColorScheme();
+  if (themeName != null && `${themeName}` !== "") {
+    return String(themeName).startsWith("dark");
+  }
+  return osScheme === "dark";
+}
+
+// ===========================================================================
+// TentapEditor
+// ===========================================================================
+
+export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
+  (
+    {
+      initialContent = "",
+      initialJSON,
+      placeholder = "Start writing...",
+      editable = true,
+      autoFocus = false,
+      onChange,
+      onStateChange,
+      minHeight = 150,
+      maxHeight,
+      hasError: _hasError,
+    },
+    ref,
+  ) => {
+    const ctx = RichEditorContext.useStyledContext();
+    const isDarkMode = useNativeEditorDarkMode();
+    const cachedHtml = useRef<string>("");
+    const cachedJson = useRef<any>(null);
+
+    const editor = useEditorBridge({
+      bridgeExtensions: [
+        ...TenTapStartKit,
+        UnderlineBridge,
+        LinkBridge,
+        ColorBridge,
+        HighlightBridge,
+        ImageBridge,
+        TaskListBridge,
+        PlaceholderBridge.configureExtension({
+          placeholder,
+        }),
+      ],
+      theme: isDarkMode ? darkEditorTheme : undefined,
+      initialContent: initialJSON ? JSON.stringify(initialJSON) : initialContent,
+      autofocus: autoFocus,
+      editable,
+      onChange: async () => {
+        try {
+          const html = await editor.getHTML();
+          const json = await editor.getJSON();
+          cachedHtml.current = html;
+          cachedJson.current = json;
+          onChange?.(html, json);
+        } catch {
+          // Ignore errors during content fetch
+        }
+      },
+    });
+
+    // 10Tap defaults the WebView to a white shell; darkEditorTheme fixes the RN WebView,
+    // and darkEditorCss aligns the inner ProseMirror document with dark mode.
+    useEffect(() => {
+      const id = setTimeout(() => {
+        if (isDarkMode) {
+          editor.injectCSS(darkEditorCss, "multiplatform-tentap-dark");
+        } else {
+          editor.injectCSS("", "multiplatform-tentap-dark");
+        }
+      }, 150);
+      return () => clearTimeout(id);
+    }, [editor, isDarkMode]);
+
+    // Subscribe to editor state updates
+    useEffect(() => {
+      const unsubscribe = editor._subscribeToEditorStateUpdate((state: any) => {
+        const editorState = getEditorStateFromBridge(state);
+        onStateChange?.(editorState);
+      });
+      return unsubscribe;
+    }, [editor, onStateChange]);
+
+    const executeCommand = useCallback(
+      (command: EditorCommand, payload?: any) => {
+        switch (command) {
+          case "bold":
+            editor.toggleBold();
+            break;
+          case "italic":
+            editor.toggleItalic();
+            break;
+          case "underline":
+            editor.toggleUnderline();
+            break;
+          case "strike":
+            editor.toggleStrike();
+            break;
+          case "code":
+            editor.toggleCode();
+            break;
+
+          /** 10Tap does not have a subscript bridge extension */
+          case "subscript":
+            break;
+          /** 10Tap does not have a superscript bridge extension */
+          case "superscript":
+            break;
+
+          case "heading1":
+            editor.toggleHeading(1);
+            break;
+          case "heading2":
+            editor.toggleHeading(2);
+            break;
+          case "heading3":
+            editor.toggleHeading(3);
+            break;
+          case "heading4":
+            editor.toggleHeading(4);
+            break;
+          case "heading5":
+            editor.toggleHeading(5);
+            break;
+          case "heading6":
+            editor.toggleHeading(6);
+            break;
+          case "paragraph":
+            // Toggle back to paragraph by toggling heading off
+            break;
+          case "bulletList":
+            editor.toggleBulletList();
+            break;
+          case "orderedList":
+            editor.toggleOrderedList();
+            break;
+          case "taskList":
+            editor.toggleTaskList();
+            break;
+          case "image":
+            if (payload?.src) {
+              editor.setImage(payload.src);
+            }
+            break;
+          case "blockquote":
+            editor.toggleBlockquote();
+            break;
+
+          /** 10Tap does not have a codeBlock bridge extension */
+          case "codeBlock":
+            break;
+
+          case "link":
+            if (payload?.href) {
+              editor.setLink(payload.href);
+            }
+            break;
+          case "undo":
+            editor.undo();
+            break;
+          case "redo":
+            editor.redo();
+            break;
+
+          /** 10Tap does not have text alignment bridge extensions */
+          case "alignLeft":
+          case "alignCenter":
+          case "alignRight":
+          case "alignJustify":
+            break;
+
+          case "textColor":
+            if (payload?.color) {
+              editor.setColor(payload.color);
+            }
+            break;
+          case "highlight":
+            if (payload?.color) {
+              editor.setHighlight(payload.color);
+            }
+            break;
+
+          /** 10Tap does not have a horizontal rule bridge extension */
+          case "horizontalRule":
+            break;
+          /** 10Tap does not have a clear formatting bridge extension */
+          case "clearFormatting":
+            break;
+        }
+      },
+      [editor],
+    );
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        executeCommand,
+        getState: () => getEditorStateFromBridge(editor.getEditorState()),
+        getHTML: () => cachedHtml.current,
+        getJSON: () => cachedJson.current,
+        setHTML: (html: string) => editor.setContent(html),
+        setJSON: (json: any) => editor.setContent(JSON.stringify(json)),
+        focus: () => editor.focus(),
+        blur: () => editor.blur(),
+      }),
+      [editor, executeCommand],
+    );
+
+    return (
+      <View
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        backgroundColor={ctx.disabled ? "$color3" : "$color2"}
+        overflow="hidden"
+        opacity={ctx.disabled ? 0.5 : 1}
+      >
+        <RichText editor={editor} style={styles.editor} />
+      </View>
+    );
+  },
+);
+
+TentapEditor.displayName = "TentapEditor";
+
+const styles = StyleSheet.create({
+  editor: {
+    flex: 1,
+    minHeight: 150,
+  },
+});