@medway-ui/native 1.9.1 → 1.10.0

package/lib/commonjs/editor/NoteEditor.js

@@ -8,14 +8,16 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _reactNativeWebview = _interopRequireDefault(require("react-native-webview"));
 var _nativewind = require("nativewind");
-var _editorHtmlGenerated = require("./editorHtml.generated.js");
 var _notesCore = require("@medway-ui/notes-core");
 var _native = require("@medway-ui/icons/native");
-var _Button = require("@/components/Button");
-var _Input = require("@/components/Input");
-var _Dialog = require("@/components/Dialog");
-var _useThemeColor = require("@/hooks/useThemeColor");
+var _Button = require("../components/Button.js");
+var _Input = require("../components/Input.js");
+var _Text = require("../components/Text.js");
+var _Dialog = require("../components/Dialog.js");
+var _editorHtml = require("./editorHtml.generated.js");
 var _protocol = require("./protocol.js");
+var _useThemeColor = require("../hooks/useThemeColor.js");
+var _touchTarget = require("../lib/touch-target.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function useEditorThemeColor(token, fallback) {
@@ -49,7 +51,35 @@ const WebView = _reactNativeWebview.default;
 
 /** 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 = (0, _touchTarget.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 = () => {
@@ -68,10 +98,11 @@ const useNoteEditorTheme = () => {
   } = (0, _nativewind.useColorScheme)();
   const background = (0, _useThemeColor.useThemeColor)("surface-card");
   const text = (0, _useThemeColor.useThemeColor)("content-paragraph");
-  const heading = (0, _useThemeColor.useThemeColor)("content-title");
+  const heading = (0, _useThemeColor.useThemeColor)("gray-foreground");
   const muted = (0, _useThemeColor.useThemeColor)("gray-foreground-muted");
   const border = (0, _useThemeColor.useThemeColor)("gray-stroke-muted");
   const accent = (0, _useThemeColor.useThemeColor)("primary-foreground");
+  const link = (0, _useThemeColor.useThemeColor)("content-link");
   const codeBackground = useEditorThemeColor("gray-background-soft", "#F0F1F5");
   return (0, _react.useMemo)(() => ({
     colorScheme: colorScheme === "dark" ? "dark" : "light",
@@ -82,6 +113,7 @@ const useNoteEditorTheme = () => {
     placeholder: muted,
     border,
     accent,
+    link,
     caret: accent,
     selection: border,
     codeBackground,
@@ -92,7 +124,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. */
@@ -225,14 +257,13 @@ const visibleSlashCommandIds = (commandIds, canUploadImage) => canUploadImage ?
 const NoteEditor = /*#__PURE__*/(0, _react.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,
@@ -249,11 +280,9 @@ const NoteEditor = /*#__PURE__*/(0, _react.forwardRef)(({
   const [title, setTitle] = (0, _react.useState)(() => sanitizeTitle(initialTitle ?? ""));
   const titleInputRef = (0, _react.useRef)(null);
   const [titleSelection, setTitleSelection] = (0, _react.useState)(undefined);
-  const autofocusTitleRef = (0, _react.useRef)(autofocus === true && title.length === 0);
+  const autofocusTitleRef = (0, _react.useRef)(Boolean(autofocus) && title.length === 0);
   (0, _react.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 = (0, _react.useCallback)(() => {
     titleInputRef.current?.focus();
@@ -279,11 +308,41 @@ const NoteEditor = /*#__PURE__*/(0, _react.forwardRef)(({
     setIsReady(false);
     setSlashState(_notesCore.EMPTY_SLASH_STATE);
   }, []);
+  const [webViewKey, setWebViewKey] = (0, _react.useState)(0);
+  const recentCrashesRef = (0, _react.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 = (0, _react.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 = (0, _react.useRef)(initialDocument ?? _notesCore.EMPTY_DOCUMENT);
+  const uploadedThisSessionRef = (0, _react.useRef)(new Set());
+  const isMountedRef = (0, _react.useRef)(true);
+  const hasLoadedContentRef = (0, _react.useRef)(false);
+  // Bumped by `setDocument`: a `document` answering a request made before it
+  // describes the replaced note.
+  const documentGenerationRef = (0, _react.useRef)(0);
   const pendingDocumentRequests = (0, _react.useRef)(new Map());
   const requestDocument = (0, _react.useCallback)(() => {
     const requestId = nextRequestId();
+    const generation = documentGenerationRef.current;
     return new Promise((resolve, reject) => {
       pendingDocumentRequests.current.set(requestId, {
+        generation,
         resolve,
         reject
       });
@@ -314,23 +373,35 @@ const NoteEditor = /*#__PURE__*/(0, _react.forwardRef)(({
   (0, _react.useEffect)(() => {
     onLinkPressRef.current = onLinkPress;
   }, [onLinkPress]);
+  (0, _react.useEffect)(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
   const insertImage = (0, _react.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 = (0, _notesCore.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]);
@@ -349,7 +420,6 @@ const NoteEditor = /*#__PURE__*/(0, _react.forwardRef)(({
         // Refused loudly rather than letting commands quietly not match
         // what the bundle understands.
         if (editorMessage.protocol !== _protocol.EDITOR_PROTOCOL_VERSION) {
-          // eslint-disable-next-line no-console
           console.error(`@medway-ui/native NoteEditor: editor bundle reports protocol ${editorMessage.protocol}, expected ${_protocol.EDITOR_PROTOCOL_VERSION}. Rebuild editor-bundle (its generated HTML is stale).`);
           return;
         }
@@ -366,7 +436,11 @@ const NoteEditor = /*#__PURE__*/(0, _react.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":
@@ -378,7 +452,13 @@ const NoteEditor = /*#__PURE__*/(0, _react.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((0, _notesCore.normalizeDocument)(editorMessage.doc));
+          const doc = (0, _notesCore.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":
@@ -390,11 +470,7 @@ const NoteEditor = /*#__PURE__*/(0, _react.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:
@@ -402,25 +478,24 @@ const NoteEditor = /*#__PURE__*/(0, _react.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.
   (0, _react.useEffect)(() => {
     if (!isReady) return;
+    const isFirstLoad = !hasLoadedContentRef.current;
+    hasLoadedContentRef.current = true;
     send({
       type: "setContent",
-      doc: initialDocument ?? _notesCore.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.
@@ -448,37 +523,72 @@ const NoteEditor = /*#__PURE__*/(0, _react.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] = (0, _react.useState)(false);
   const [linkValue, setLinkValue] = (0, _react.useState)("");
+  const [linkInvalid, setLinkInvalid] = (0, _react.useState)(false);
   const openLinkDialog = (0, _react.useCallback)(() => {
     setLinkValue(selectionState.linkHref ?? "");
+    setLinkInvalid(false);
     setLinkDialogOpen(true);
   }, [selectionState.linkHref]);
+  const handleLinkValueChange = (0, _react.useCallback)(value => {
+    setLinkValue(value);
+    setLinkInvalid(false);
+  }, []);
   const confirmLink = (0, _react.useCallback)(() => {
-    const href = linkValue.trim();
-    sendMutation(href ? {
+    if (!linkValue.trim()) {
+      sendMutation({
+        type: "command",
+        command: {
+          name: "unsetLink"
+        }
+      });
+      setLinkDialogOpen(false);
+      return;
+    }
+    const href = (0, _notesCore.normalizeLinkInput)(linkValue);
+    if (!href) {
+      setLinkInvalid(true);
+      return;
+    }
+    sendMutation({
       type: "command",
       command: {
         name: "setLink",
         href
       }
-    } : {
-      type: "command",
-      command: {
-        name: "unsetLink"
-      }
     });
     setLinkDialogOpen(false);
   }, [linkValue, sendMutation]);
@@ -496,6 +606,10 @@ const NoteEditor = /*#__PURE__*/(0, _react.forwardRef)(({
     if (id === "image") insertImage();
   }, [editable, send, insertImage]);
   const containerHeight = isEmbedded ? contentHeight : undefined;
+  const [editorWidth, setEditorWidth] = (0, _react.useState)(0);
+  const handleEditorLayout = (0, _react.useCallback)(event => {
+    setEditorWidth(event.nativeEvent.layout.width);
+  }, []);
   const resolvedBackground = backgroundColor ?? theme.background;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [isEmbedded ? styles.containerEmbedded : styles.container, {
@@ -511,11 +625,10 @@ const NoteEditor = /*#__PURE__*/(0, _react.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",
@@ -538,6 +651,7 @@ const NoteEditor = /*#__PURE__*/(0, _react.forwardRef)(({
       style: {
         flex: isEmbedded ? undefined : 1
       },
+      onLayout: handleEditorLayout,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(WebView, {
         ref: webViewRef,
         testID: testID,
@@ -546,7 +660,7 @@ const NoteEditor = /*#__PURE__*/(0, _react.forwardRef)(({
           height: containerHeight
         } : undefined,
         source: {
-          html: _editorHtmlGenerated.EDITOR_HTML
+          html: _editorHtml.EDITOR_HTML
         }
         // Anchored: `react-native-webview` treats each entry as an
         // unanchored pattern, so a bare "about:blank" also admits
@@ -555,8 +669,8 @@ const NoteEditor = /*#__PURE__*/(0, _react.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
@@ -592,8 +706,9 @@ const NoteEditor = /*#__PURE__*/(0, _react.forwardRef)(({
         } : null, {
           backgroundColor: resolvedBackground
         }]
-      }), slashState.active && slashState.caret ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NoteEditorSlashMenu, {
+      }, webViewKey), slashState.active && slashState.caret ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NoteEditorSlashMenu, {
         slash: slashState,
+        editorWidth: editorWidth,
         canUploadImage: Boolean(onImageUpload),
         onSelect: handleSlashSelect
       }) : null]
@@ -605,16 +720,21 @@ const NoteEditor = /*#__PURE__*/(0, _react.forwardRef)(({
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.DialogTitle, {
             children: "Inserir link"
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.DialogContent, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.DialogContent, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
             value: linkValue,
-            onChangeText: setLinkValue,
+            onChangeText: handleLinkValueChange,
+            invalid: linkInvalid,
             placeholder: "https://",
             label: "URL",
             autoCapitalize: "none",
             autoCorrect: false,
             keyboardType: "url"
-          })
+          }), linkInvalid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.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__*/(0, _jsxRuntime.jsx)(_Dialog.DialogFooter, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
             onPress: confirmLink,
@@ -662,6 +782,7 @@ function NoteEditorToolbar({
             selected: active
           },
           disabled: disabled,
+          hitSlop: TOOLBAR_BUTTON_HIT_SLOP,
           onPress: item.onPress ?? (() => item.command && onCommand(item.command)),
           style: buttonStyle,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
@@ -684,6 +805,7 @@ function NoteEditorToolbar({
           disabled: allDisabled
         },
         disabled: allDisabled,
+        hitSlop: TOOLBAR_BUTTON_HIT_SLOP,
         onPress: onImagePress,
         style: [styles.toolbarButton, allDisabled ? styles.toolbarButtonDisabled : null],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_native.Image, {
@@ -705,6 +827,7 @@ function NoteEditorToolbar({
  */
 function NoteEditorSlashMenu({
   slash,
+  editorWidth,
   canUploadImage,
   onSelect
 }) {
@@ -717,8 +840,8 @@ function NoteEditorSlashMenu({
   const commandIds = visibleSlashCommandIds(slash.commandIds, canUploadImage);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.slashMenu, {
@@ -804,8 +927,8 @@ const styles = _reactNative.StyleSheet.create({
     marginHorizontal: 4
   },
   toolbarButton: {
-    width: 32,
-    height: 32,
+    width: TOOLBAR_BUTTON_SIZE,
+    height: TOOLBAR_BUTTON_SIZE,
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 6
@@ -816,7 +939,7 @@ const styles = _reactNative.StyleSheet.create({
   slashMenuShadow: {
     position: "absolute",
     zIndex: 50,
-    width: 256,
+    width: SLASH_MENU_WIDTH,
     shadowColor: "#000",
     shadowOffset: {
       width: 0,