@multiplatform.one/rich-text 6.1.0 → 6.4.0

package/src/editor/TentapEditor.native.tsx

@@ -13,7 +13,14 @@
  * No BubbleToolbar (10Tap does not support floating menus).
  */
 
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  type ForwardedRef,
+} from "react";
 import { StyleSheet, useColorScheme } from "react-native";
 import {
   RichText,
@@ -29,15 +36,18 @@ import {
   darkEditorCss,
   darkEditorTheme,
 } from "@10play/tentap-editor";
-import { View, useThemeName } from "tamagui";
+import { View, useTheme, useThemeName } from "tamagui";
 import type { RichEditorProps, RichEditorRef, EditorCommand } from "../types";
 import { RichEditorContext } from "../context";
+import { PALETTE_THEME_TOKENS } from "../constants";
+import { t } from "../shared/t";
 import { getEditorStateFromBridge } from "./useEditorState";
+import { htmlToMarkdown, markdownToHtml } from "./markdown";
 
 function useNativeEditorDarkMode(): boolean {
   const themeName = useThemeName();
   const osScheme = useColorScheme();
-  if (themeName != null && `${themeName}` !== "") {
+  if (themeName) {
     return String(themeName).startsWith("dark");
   }
   return osScheme === "dark";
@@ -47,23 +57,32 @@ function useNativeEditorDarkMode(): boolean {
 // TentapEditor
 // ===========================================================================
 
-export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
+export interface TentapEditorProps extends RichEditorProps {
+  /** Fill the available space (fullscreen modal) instead of using minHeight */
+  fill?: boolean;
+}
+
+// Avoid `forwardRef<A, B>(...)` — Metro/Babel TSX can parse the `>` as JSX and
+// throw "Missing initializer in const declaration". Cast instead.
+export const TentapEditor = forwardRef(
   (
     {
       initialContent = "",
       initialJSON,
-      placeholder = "Start writing...",
+      placeholder: placeholderProp,
       editable = true,
       autoFocus = false,
       onChange,
       onStateChange,
       minHeight = 150,
       maxHeight,
+      fill = false,
       hasError: _hasError,
-    },
-    ref,
+    }: TentapEditorProps,
+    ref: ForwardedRef<RichEditorRef>,
   ) => {
     const ctx = RichEditorContext.useStyledContext();
+    const placeholder = placeholderProp ?? t("Start writing...");
     const isDarkMode = useNativeEditorDarkMode();
     const cachedHtml = useRef<string>("");
     const cachedJson = useRef<any>(null);
@@ -82,7 +101,9 @@ export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
         }),
       ],
       theme: isDarkMode ? darkEditorTheme : undefined,
-      initialContent: initialJSON ? JSON.stringify(initialJSON) : initialContent,
+      // Tentap accepts HTML string OR a ProseMirror JSON object. Never
+      // JSON.stringify the object — that loads as broken HTML and wipes the doc.
+      initialContent: (initialJSON as any) ?? initialContent,
       autofocus: autoFocus,
       editable,
       onChange: async () => {
@@ -111,6 +132,22 @@ export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
       return () => clearTimeout(id);
     }, [editor, isDarkMode]);
 
+    // Web-authored color/highlight marks store theme custom properties
+    // (`var(--red11)`); the 10Tap webview has no tamagui stylesheet, so
+    // define the palette vars there from the active theme (Axiom 5: same
+    // tokens, resolved once per scheme).
+    const theme = useTheme();
+    useEffect(() => {
+      const id = setTimeout(() => {
+        const decls = PALETTE_THEME_TOKENS.map((token) => {
+          const value = (theme as any)[token]?.val;
+          return value ? `--${token}: ${value};` : "";
+        }).join(" ");
+        editor.injectCSS(`:root { ${decls} }`, "multiplatform-tentap-palette");
+      }, 150);
+      return () => clearTimeout(id);
+    }, [editor, theme]);
+
     // Subscribe to editor state updates
     useEffect(() => {
       const unsubscribe = editor._subscribeToEditorStateUpdate((state: any) => {
@@ -209,13 +246,24 @@ export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
             break;
 
           case "textColor":
-            if (payload?.color) {
-              editor.setColor(payload.color);
+            // null clears (Default swatch); undefined/missing is a no-op so a
+            // bare toolbar tap cannot call setColor(undefined) and wipe content
+            // (SB-N-ios-25).
+            if (payload && "color" in payload) {
+              if (typeof payload.color === "string" && payload.color.length > 0) {
+                editor.setColor(payload.color);
+              } else {
+                editor.unsetColor();
+              }
             }
             break;
           case "highlight":
-            if (payload?.color) {
-              editor.setHighlight(payload.color);
+            if (payload && "color" in payload) {
+              if (typeof payload.color === "string" && payload.color.length > 0) {
+                editor.setHighlight(payload.color);
+              } else {
+                editor.unsetHighlight();
+              }
             }
             break;
 
@@ -237,8 +285,20 @@ export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
         getState: () => getEditorStateFromBridge(editor.getEditorState()),
         getHTML: () => cachedHtml.current,
         getJSON: () => cachedJson.current,
+        // Best-effort on native: turndown needs a DOM, which Hermes lacks —
+        // hosts needing markdown values on native should keep markdown
+        // source editing instead (documented fallback).
+        getMarkdown: () => {
+          try {
+            return htmlToMarkdown(cachedHtml.current);
+          } catch (err) {
+            console.warn("[TentapEditor] getMarkdown unavailable on native:", err);
+            return "";
+          }
+        },
         setHTML: (html: string) => editor.setContent(html),
-        setJSON: (json: any) => editor.setContent(JSON.stringify(json)),
+        setJSON: (json: any) => editor.setContent(json),
+        setMarkdown: (markdown: string) => editor.setContent(markdownToHtml(markdown)),
         focus: () => editor.focus(),
         blur: () => editor.blur(),
       }),
@@ -247,13 +307,14 @@ export const TentapEditor = forwardRef<RichEditorRef, RichEditorProps>(
 
     return (
       <View
-        minHeight={minHeight}
-        maxHeight={maxHeight}
-        backgroundColor={ctx.disabled ? "$color3" : "$color2"}
+        flex={fill ? 1 : undefined}
+        minHeight={fill ? undefined : minHeight}
+        maxHeight={fill ? undefined : maxHeight}
+        backgroundColor={ctx.disabled ? "$color3" : fill ? "$background" : "$color2"}
         overflow="hidden"
         opacity={ctx.disabled ? 0.5 : 1}
       >
-        <RichText editor={editor} style={styles.editor} />
+        <RichText editor={editor} style={fill ? styles.editorFill : styles.editor} />
       </View>
     );
   },
@@ -266,4 +327,7 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: 150,
   },
+  editorFill: {
+    flex: 1,
+  },
 });