@medway-ui/native 1.9.2 → 1.10.1

package/lib/module/editor/NoteEditor.js

@@ -4,25 +4,28 @@ import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo,
 import { Platform, Pressable, ScrollView, StyleSheet, Text as RNText, TextInput, View } from "react-native";
 import UntypedWebView from "react-native-webview";
 import { useColorScheme } from "nativewind";
-import { EDITOR_HTML } from "./editorHtml.generated";
-import { EMPTY_DOCUMENT, EMPTY_SLASH_STATE, INITIAL_EDITOR_STATE, getSlashCommand, normalizeDocument } from "@medway-ui/notes-core";
+import { EMPTY_DOCUMENT, EMPTY_SLASH_STATE, INITIAL_EDITOR_STATE, getSlashCommand, normalizeDocument, normalizeLinkInput, sanitizeImageSrc } from "@medway-ui/notes-core";
 import { ArrowUndoUpLeft, Bold, Code, DoubleQuotesL, HeadingH2, HeadingH3, Image as ImageIcon, Italic, Link as LinkIcon, ListOrdered, ListUnordered, Redo, Strikethrough, Underline, WindowCodeBlock } from "@medway-ui/icons/native";
-import { Button } from "@/components/Button";
-import { Input } from "@/components/Input";
-import { Dialog, DialogContainer, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/Dialog";
-import { DEFAULT_COLOR, useThemeColor } from "@/hooks/useThemeColor";
+import { Button } from "../components/Button";
+import { Input } from "../components/Input";
+import { Text } from "../components/Text";
+import { Dialog, DialogContainer, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../components/Dialog";
+import { EDITOR_HTML } from "./editorHtml.generated";
+import { EDITOR_PROTOCOL_VERSION, EDITOR_RECEIVE_HANDLER, isEditorMessage } from "./protocol";
+import { DEFAULT_COLOR, useThemeColor } from "../hooks/useThemeColor";
+import { getMinTouchHitSlop } from "../lib/touch-target";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function useEditorThemeColor(token, fallback) {
   const value = useThemeColor(token);
   return value === DEFAULT_COLOR ? fallback : value;
 }
-import { EDITOR_PROTOCOL_VERSION, EDITOR_RECEIVE_HANDLER, isEditorMessage } from "./protocol";
 
 /**
  * The ref surface of `react-native-webview`, kept local so consumers need not
  * depend on internal WebView types. Internal only — `NoteEditorHandle` below is
  * the public ref shape.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
 /**
  * Retyped locally: the library's own `WebView` resolves to `Component<never>`
  * under `strict` and rejects every JSX prop.
@@ -43,7 +46,35 @@ const WebView = UntypedWebView;
 
 /** The title is single-line; newlines can still arrive via paste. */
 const sanitizeTitle = value => value.replace(/\r?\n/g, " ");
-const DEFAULT_IMAGE_DELETE_GRACE_MS = 4000;
+
+/**
+ * Enter in the multiline title still commits a "\n" (`onKeyPress` cannot
+ * cancel it): one newline added to the previous title is that key, dropped
+ * instead of becoming a trailing space. Pasted newlines still become spaces.
+ */
+const nextTitle = (previous, value) => value.replace(/\r?\n/, "") === previous ? previous : sanitizeTitle(value);
+const TOOLBAR_BUTTON_SIZE = 32;
+const SLASH_MENU_WIDTH = 256;
+const SLASH_MENU_GAP = 6;
+
+/** Starts at the caret, pulled left so the menu never crosses the editor's right edge. */
+const getSlashMenuLeft = (caretX, editorWidth) => editorWidth > 0 ? Math.max(SLASH_MENU_GAP, Math.min(caretX, editorWidth - SLASH_MENU_WIDTH - SLASH_MENU_GAP)) : caretX;
+const TOOLBAR_BUTTON_HIT_SLOP = getMinTouchHitSlop(TOOLBAR_BUTTON_SIZE);
+const MAX_WEBVIEW_REMOUNTS = 3;
+const WEBVIEW_REMOUNT_WINDOW_MS = 60_000;
+const collectImageSrcs = doc => {
+  const srcs = new Set();
+  const walk = nodes => {
+    nodes.forEach(node => {
+      if (node.type === "image" && typeof node.attrs?.src === "string") {
+        srcs.add(node.attrs.src);
+      }
+      if (node.content) walk(node.content);
+    });
+  };
+  walk(doc.content);
+  return srcs;
+};
 let requestCounter = 0;
 /** Correlates a `getDocument` request with the `document` response that answers it. */
 const nextRequestId = () => {
@@ -62,10 +93,11 @@ const useNoteEditorTheme = () => {
   } = useColorScheme();
   const background = useThemeColor("surface-card");
   const text = useThemeColor("content-paragraph");
-  const heading = useThemeColor("content-title");
+  const heading = useThemeColor("gray-foreground");
   const muted = useThemeColor("gray-foreground-muted");
   const border = useThemeColor("gray-stroke-muted");
   const accent = useThemeColor("primary-foreground");
+  const link = useThemeColor("content-link");
   const codeBackground = useEditorThemeColor("gray-background-soft", "#F0F1F5");
   return useMemo(() => ({
     colorScheme: colorScheme === "dark" ? "dark" : "light",
@@ -76,6 +108,7 @@ const useNoteEditorTheme = () => {
     placeholder: muted,
     border,
     accent,
+    link,
     caret: accent,
     selection: border,
     codeBackground,
@@ -86,7 +119,7 @@ const useNoteEditorTheme = () => {
     paddingHorizontal: 16,
     paddingTop: 12,
     paddingBottom: 32
-  }), [colorScheme, background, text, heading, muted, border, accent, codeBackground]);
+  }), [colorScheme, background, text, heading, muted, border, accent, link, codeBackground]);
 };
 
 /** Every icon exported from `@medway-ui/icons/native` shares this component shape. */
@@ -219,14 +252,13 @@ const visibleSlashCommandIds = (commandIds, canUploadImage) => canUploadImage ?
 const NoteEditor = /*#__PURE__*/forwardRef(({
   document: initialDocument,
   initialTitle,
-  titlePlaceholder = "Title",
+  titlePlaceholder = "Título",
   onChange,
   editable = true,
   autofocus = false,
   toolbar = false,
   onImageUpload,
   onImageRemoved,
-  imageDeleteGraceMs = DEFAULT_IMAGE_DELETE_GRACE_MS,
   onLinkPress,
   height,
   backgroundColor,
@@ -243,11 +275,9 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
   const [title, setTitle] = useState(() => sanitizeTitle(initialTitle ?? ""));
   const titleInputRef = useRef(null);
   const [titleSelection, setTitleSelection] = useState(undefined);
-  const autofocusTitleRef = useRef(autofocus === true && title.length === 0);
+  const autofocusTitleRef = useRef(Boolean(autofocus) && title.length === 0);
   useEffect(() => {
     if (autofocusTitleRef.current) titleInputRef.current?.focus();
-    // Mount-only: the one-time "new note" autofocus decision.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const focusTitleAtEnd = useCallback(() => {
     titleInputRef.current?.focus();
@@ -273,11 +303,41 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
     setIsReady(false);
     setSlashState(EMPTY_SLASH_STATE);
   }, []);
+  const [webViewKey, setWebViewKey] = useState(0);
+  const recentCrashesRef = useRef([]);
+
+  // A WebView whose content/render process died can't be reused (Android
+  // tears it down after `onRenderProcessGone`), so a fresh one is mounted.
+  // Capped, so a document that crashes it on every load doesn't loop.
+  const handleWebViewCrash = useCallback(() => {
+    handleWebViewReset();
+    const now = Date.now();
+    const recent = recentCrashesRef.current.filter(crashedAt => now - crashedAt < WEBVIEW_REMOUNT_WINDOW_MS);
+    if (recent.length >= MAX_WEBVIEW_REMOUNTS) {
+      recentCrashesRef.current = recent;
+      console.error(`@medway-ui/native NoteEditor: the editor WebView crashed ${MAX_WEBVIEW_REMOUNTS + 1} times within ${WEBVIEW_REMOUNT_WINDOW_MS / 1000}s; not remounting it again.`);
+      return;
+    }
+    recentCrashesRef.current = [...recent, now];
+    setWebViewKey(key => key + 1);
+  }, [handleWebViewReset]);
+
+  // What `setContent` sends on every `ready`, so a remount after a crash comes
+  // back with the latest content the host has seen rather than `initialDocument`.
+  const lastKnownContentRef = useRef(initialDocument ?? EMPTY_DOCUMENT);
+  const uploadedThisSessionRef = useRef(new Set());
+  const isMountedRef = useRef(true);
+  const hasLoadedContentRef = useRef(false);
+  // Bumped by `setDocument`: a `document` answering a request made before it
+  // describes the replaced note.
+  const documentGenerationRef = useRef(0);
   const pendingDocumentRequests = useRef(new Map());
   const requestDocument = useCallback(() => {
     const requestId = nextRequestId();
+    const generation = documentGenerationRef.current;
     return new Promise((resolve, reject) => {
       pendingDocumentRequests.current.set(requestId, {
+        generation,
         resolve,
         reject
       });
@@ -308,23 +368,35 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     onLinkPressRef.current = onLinkPress;
   }, [onLinkPress]);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
   const insertImage = useCallback(async () => {
     const upload = onImageUploadRef.current;
     if (!upload || !editableRef.current) return;
     try {
       const result = await upload();
       if (!result) return;
-      if (!editableRef.current) {
+      if (!isMountedRef.current || !editableRef.current) {
+        onImageRemovedRef.current?.(result.src);
+        return;
+      }
+      const src = sanitizeImageSrc(result.src);
+      if (!src) {
+        console.error("@medway-ui/native NoteEditor: onImageUpload resolved with an unsupported URL (only absolute http(s): or data:)", result.src);
         onImageRemovedRef.current?.(result.src);
         return;
       }
+      uploadedThisSessionRef.current.add(src);
       sendMutation({
         type: "insertImage",
-        src: result.src,
+        src,
         alt: result.alt ?? null
       });
     } catch (error) {
-      // eslint-disable-next-line no-console
       console.error("@medway-ui/native NoteEditor: onImageUpload failed", error);
     }
   }, [sendMutation]);
@@ -343,7 +415,6 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
         // Refused loudly rather than letting commands quietly not match
         // what the bundle understands.
         if (editorMessage.protocol !== EDITOR_PROTOCOL_VERSION) {
-          // eslint-disable-next-line no-console
           console.error(`@medway-ui/native NoteEditor: editor bundle reports protocol ${editorMessage.protocol}, expected ${EDITOR_PROTOCOL_VERSION}. Rebuild editor-bundle (its generated HTML is stale).`);
           return;
         }
@@ -360,7 +431,11 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
         // round trip happens only when a host asked for `onChange`, which
         // keeps serialization per-settled-keystroke, not per-keystroke.
         if (onChangeRef.current) {
-          requestDocument().then(doc => onChangeRef.current?.(doc)).catch(() => {});
+          const generation = documentGenerationRef.current;
+          requestDocument().then(doc => {
+            if (generation !== documentGenerationRef.current) return;
+            onChangeRef.current?.(doc);
+          }).catch(() => {});
         }
         return;
       case "document":
@@ -372,7 +447,13 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
           // whitelist/depth pass is what makes it an `EditorDocument`, and it
           // runs on the way out too, not just on `setContent` — the WebView
           // renders student content, so what it hands back is untrusted.
-          pending.resolve(normalizeDocument(editorMessage.doc));
+          const doc = normalizeDocument(editorMessage.doc);
+          // Still the answer to what was asked, but no longer the content
+          // to restore after a crash.
+          if (pending.generation === documentGenerationRef.current) {
+            lastKnownContentRef.current = doc;
+          }
+          pending.resolve(doc);
           return;
         }
       case "resize":
@@ -384,11 +465,7 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
       case "backspaceAtDocStart":
         focusTitleAtEnd();
         return;
-      case "imageRemoved":
-        onImageRemovedRef.current?.(editorMessage.src);
-        return;
       case "error":
-        // eslint-disable-next-line no-console
         console.error("@medway-ui/native NoteEditor:", editorMessage.message);
         return;
       default:
@@ -396,25 +473,24 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
     }
   }, [focusTitleAtEnd, isEmbedded, requestDocument]);
 
-  // Fires once, when the bundle reports `ready`: the initial document, layout
-  // mode and image-delete grace period are all read-once.
+  // Fires on every `ready`: the first load, and the remount after a crash.
+  // `editable`/`autofocus` stay out of deps on purpose: they seed the editor
+  // the bundle builds on load; `editable` is kept in sync by the next effect.
   useEffect(() => {
     if (!isReady) return;
+    const isFirstLoad = !hasLoadedContentRef.current;
+    hasLoadedContentRef.current = true;
     send({
       type: "setContent",
-      doc: initialDocument ?? EMPTY_DOCUMENT,
+      doc: lastKnownContentRef.current,
       editable,
-      focus: autofocusTitleRef.current ? false : Boolean(autofocus),
-      focusPosition: typeof autofocus === "string" ? autofocus : undefined,
-      imageDeleteGraceMs
+      focus: isFirstLoad && !autofocusTitleRef.current && Boolean(autofocus),
+      focusPosition: typeof autofocus === "string" ? autofocus : undefined
     });
     if (isEmbedded) send({
       type: "setLayout",
       embedded: true
     });
-    // `editable`/`autofocus`/`imageDeleteGraceMs` are excluded from deps on
-    // purpose: they seed the *initial* editor, like `document`.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isReady, send]);
 
   // `editable` is the one prop that stays reactive after mount.
@@ -442,37 +518,72 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
       type: "blur"
     }),
     getDocument: () => requestDocument(),
-    getSaveData: async () => ({
-      title,
-      json: await requestDocument()
-    }),
-    setDocument: (doc, options) => send({
-      type: "setContent",
-      doc,
-      editable,
-      focus: Boolean(options?.focus),
-      reset: false
-    })
+    getSaveData: async () => {
+      const generation = documentGenerationRef.current;
+      const json = await requestDocument();
+      // After a `setDocument` the session uploads belong to the new note.
+      if (generation !== documentGenerationRef.current) {
+        return {
+          title,
+          json,
+          removedImages: []
+        };
+      }
+      const kept = collectImageSrcs(json);
+      const removedImages = [...uploadedThisSessionRef.current].filter(src => !kept.has(src));
+      return {
+        title,
+        json,
+        removedImages
+      };
+    },
+    setDocument: (doc, options) => {
+      documentGenerationRef.current += 1;
+      lastKnownContentRef.current = doc;
+      uploadedThisSessionRef.current.clear();
+      send({
+        type: "setContent",
+        doc,
+        editable,
+        focus: Boolean(options?.focus),
+        reset: false
+      });
+    }
   }), [title, editable, requestDocument, send]);
   const [linkDialogOpen, setLinkDialogOpen] = useState(false);
   const [linkValue, setLinkValue] = useState("");
+  const [linkInvalid, setLinkInvalid] = useState(false);
   const openLinkDialog = useCallback(() => {
     setLinkValue(selectionState.linkHref ?? "");
+    setLinkInvalid(false);
     setLinkDialogOpen(true);
   }, [selectionState.linkHref]);
+  const handleLinkValueChange = useCallback(value => {
+    setLinkValue(value);
+    setLinkInvalid(false);
+  }, []);
   const confirmLink = useCallback(() => {
-    const href = linkValue.trim();
-    sendMutation(href ? {
+    if (!linkValue.trim()) {
+      sendMutation({
+        type: "command",
+        command: {
+          name: "unsetLink"
+        }
+      });
+      setLinkDialogOpen(false);
+      return;
+    }
+    const href = normalizeLinkInput(linkValue);
+    if (!href) {
+      setLinkInvalid(true);
+      return;
+    }
+    sendMutation({
       type: "command",
       command: {
         name: "setLink",
         href
       }
-    } : {
-      type: "command",
-      command: {
-        name: "unsetLink"
-      }
     });
     setLinkDialogOpen(false);
   }, [linkValue, sendMutation]);
@@ -490,6 +601,10 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
     if (id === "image") insertImage();
   }, [editable, send, insertImage]);
   const containerHeight = isEmbedded ? contentHeight : undefined;
+  const [editorWidth, setEditorWidth] = useState(0);
+  const handleEditorLayout = useCallback(event => {
+    setEditorWidth(event.nativeEvent.layout.width);
+  }, []);
   const resolvedBackground = backgroundColor ?? theme.background;
   return /*#__PURE__*/_jsxs(View, {
     style: [isEmbedded ? styles.containerEmbedded : styles.container, {
@@ -505,11 +620,10 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
       ref: titleInputRef,
       multiline: true,
       value: title,
-      onChangeText: value => setTitle(sanitizeTitle(value)),
+      onChangeText: value => setTitle(previous => nextTitle(previous, value)),
       onKeyPress: event => {
-        // Enter moves focus into the content's first block, never inserts
-        // a line break; `sanitizeTitle` is the backstop if the platform
-        // commits the `\n` before this handler runs.
+        // Enter moves focus into the content's first block; the `\n` it
+        // still commits is dropped by `nextTitle`.
         if (event.nativeEvent.key !== "Enter") return;
         send({
           type: "focus",
@@ -532,6 +646,7 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
       style: {
         flex: isEmbedded ? undefined : 1
       },
+      onLayout: handleEditorLayout,
       children: [/*#__PURE__*/_jsx(WebView, {
         ref: webViewRef,
         testID: testID,
@@ -549,8 +664,8 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
         originWhitelist: ["^about:blank$"],
         onMessage: handleMessage,
         onLoadStart: handleWebViewReset,
-        onContentProcessDidTerminate: handleWebViewReset,
-        onRenderProcessGone: handleWebViewReset
+        onContentProcessDidTerminate: handleWebViewCrash,
+        onRenderProcessGone: handleWebViewCrash
         // Links already leave the editor via the `linkPress` message, so
         // nothing rendered here needs to navigate. Allowing only the
         // initial `about:blank` load closes off `data:`/script-driven
@@ -586,8 +701,9 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
         } : null, {
           backgroundColor: resolvedBackground
         }]
-      }), slashState.active && slashState.caret ? /*#__PURE__*/_jsx(NoteEditorSlashMenu, {
+      }, webViewKey), slashState.active && slashState.caret ? /*#__PURE__*/_jsx(NoteEditorSlashMenu, {
         slash: slashState,
+        editorWidth: editorWidth,
         canUploadImage: Boolean(onImageUpload),
         onSelect: handleSlashSelect
       }) : null]
@@ -599,16 +715,21 @@ const NoteEditor = /*#__PURE__*/forwardRef(({
           children: /*#__PURE__*/_jsx(DialogTitle, {
             children: "Inserir link"
           })
-        }), /*#__PURE__*/_jsx(DialogContent, {
-          children: /*#__PURE__*/_jsx(Input, {
+        }), /*#__PURE__*/_jsxs(DialogContent, {
+          children: [/*#__PURE__*/_jsx(Input, {
             value: linkValue,
-            onChangeText: setLinkValue,
+            onChangeText: handleLinkValueChange,
+            invalid: linkInvalid,
             placeholder: "https://",
             label: "URL",
             autoCapitalize: "none",
             autoCorrect: false,
             keyboardType: "url"
-          })
+          }), linkInvalid ? /*#__PURE__*/_jsx(Text, {
+            accessibilityRole: "alert",
+            className: "mt-1 text-xs text-feedback-error-foreground",
+            children: "Link inv\xE1lido. Use um endere\xE7o como medway.com.br"
+          }) : null]
         }), /*#__PURE__*/_jsx(DialogFooter, {
           children: /*#__PURE__*/_jsx(Button, {
             onPress: confirmLink,
@@ -656,6 +777,7 @@ function NoteEditorToolbar({
             selected: active
           },
           disabled: disabled,
+          hitSlop: TOOLBAR_BUTTON_HIT_SLOP,
           onPress: item.onPress ?? (() => item.command && onCommand(item.command)),
           style: buttonStyle,
           children: /*#__PURE__*/_jsx(Icon, {
@@ -678,6 +800,7 @@ function NoteEditorToolbar({
           disabled: allDisabled
         },
         disabled: allDisabled,
+        hitSlop: TOOLBAR_BUTTON_HIT_SLOP,
         onPress: onImagePress,
         style: [styles.toolbarButton, allDisabled ? styles.toolbarButtonDisabled : null],
         children: /*#__PURE__*/_jsx(ImageIcon, {
@@ -699,6 +822,7 @@ function NoteEditorToolbar({
  */
 function NoteEditorSlashMenu({
   slash,
+  editorWidth,
   canUploadImage,
   onSelect
 }) {
@@ -711,8 +835,8 @@ function NoteEditorSlashMenu({
   const commandIds = visibleSlashCommandIds(slash.commandIds, canUploadImage);
   return /*#__PURE__*/_jsx(View, {
     style: [styles.slashMenuShadow, {
-      left: slash.caret.x,
-      top: slash.caret.y + slash.caret.height + 6
+      left: getSlashMenuLeft(slash.caret.x, editorWidth),
+      top: slash.caret.y + slash.caret.height + SLASH_MENU_GAP
     }],
     children: /*#__PURE__*/_jsx(View, {
       style: [styles.slashMenu, {
@@ -798,8 +922,8 @@ const styles = StyleSheet.create({
     marginHorizontal: 4
   },
   toolbarButton: {
-    width: 32,
-    height: 32,
+    width: TOOLBAR_BUTTON_SIZE,
+    height: TOOLBAR_BUTTON_SIZE,
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 6
@@ -810,7 +934,7 @@ const styles = StyleSheet.create({
   slashMenuShadow: {
     position: "absolute",
     zIndex: 50,
-    width: 256,
+    width: SLASH_MENU_WIDTH,
     shadowColor: "#000",
     shadowOffset: {
       width: 0,