@medway-ui/native 1.6.1 → 1.7.1

package/src/editor/NoteEditor.tsx

@@ -354,6 +354,23 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
       );
     }, []);
 
+    const editableRef = useRef(editable);
+    useEffect(() => {
+      editableRef.current = editable;
+    }, [editable]);
+
+    const sendMutation = useCallback(
+      (message: NativeToEditorMessage) => {
+        if (editableRef.current) send(message);
+      },
+      [send]
+    );
+
+    const handleWebViewReset = useCallback(() => {
+      setIsReady(false);
+      setSlashState(EMPTY_SLASH_STATE);
+    }, []);
+
     const pendingDocumentRequests = useRef(
       new Map<string, { resolve: (doc: EditorDocument) => void; reject: (error: Error) => void }>()
     );
@@ -392,17 +409,25 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
 
     const insertImage = useCallback(async () => {
       const upload = onImageUploadRef.current;
-      if (!upload) return;
+      if (!upload || !editableRef.current) return;
 
       try {
         const result = await upload();
         if (!result) return;
-        send({ type: "insertImage", src: result.src, alt: result.alt ?? null });
+        if (!editableRef.current) {
+          onImageRemovedRef.current?.(result.src);
+          return;
+        }
+        sendMutation({
+          type: "insertImage",
+          src: result.src,
+          alt: result.alt ?? null,
+        });
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error("@medway-ui/native NoteEditor: onImageUpload failed", error);
       }
-    }, [send]);
+    }, [sendMutation]);
 
     const handleMessage = useCallback(
       (event: WebViewMessageEvent) => {
@@ -540,17 +565,17 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
 
     const confirmLink = useCallback(() => {
       const href = linkValue.trim();
-      send(
+      sendMutation(
         href
           ? { type: "command", command: { name: "setLink", href } }
           : { type: "command", command: { name: "unsetLink" } }
       );
       setLinkDialogOpen(false);
-    }, [linkValue, send]);
+    }, [linkValue, sendMutation]);
 
     const runToolbarCommand = useCallback(
-      (command: EditorCommand) => send({ type: "command", command }),
-      [send]
+      (command: EditorCommand) => sendMutation({ type: "command", command }),
+      [sendMutation]
     );
     const toolbarGroups = useMemo(
       () => buildToolbarGroups(selectionState, openLinkDialog),
@@ -559,10 +584,11 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
 
     const handleSlashSelect = useCallback(
       (id: SlashCommandId) => {
+        if (!editable) return;
         send({ type: "runSlashCommand", commandId: id });
         if (id === "image") insertImage();
       },
-      [send, insertImage]
+      [editable, send, insertImage]
     );
 
     const containerHeight = isEmbedded ? contentHeight : undefined;
@@ -573,7 +599,6 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
       <View
         style={[
           isEmbedded ? styles.containerEmbedded : styles.container,
-          isEmbedded ? { height: containerHeight } : null,
           { backgroundColor: resolvedBackground },
         ]}
       >
@@ -581,6 +606,7 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
           <NoteEditorToolbar
             groups={toolbarGroups}
             state={selectionState}
+            disabled={!editable}
             onCommand={runToolbarCommand}
             onImagePress={onImageUpload ? insertImage : undefined}
           />
@@ -614,12 +640,18 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
           <WebView
             ref={webViewRef}
             testID={testID}
+            containerStyle={
+              isEmbedded ? { flex: 0, height: containerHeight } : undefined
+            }
             source={{ html: EDITOR_HTML }}
             // Anchored: `react-native-webview` treats each entry as an
             // unanchored pattern, so a bare "about:blank" also admits
             // "about:blankse.evil.com".
             originWhitelist={["^about:blank$"]}
             onMessage={handleMessage}
+            onLoadStart={handleWebViewReset}
+            onContentProcessDidTerminate={handleWebViewReset}
+            onRenderProcessGone={handleWebViewReset}
             // 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
@@ -694,11 +726,13 @@ NoteEditor.displayName = "NoteEditor";
 function NoteEditorToolbar({
   groups,
   state,
+  disabled: allDisabled,
   onCommand,
   onImagePress,
 }: {
   groups: ToolbarItem[][];
   state: EditorSelectionState;
+  disabled: boolean;
   onCommand: (command: EditorCommand) => void;
   onImagePress?: () => void;
 }) {
@@ -719,7 +753,7 @@ function NoteEditorToolbar({
           ) : null}
           {group.map((item) => {
             const active = item.activeKey ? state.active[item.activeKey] : false;
-            const disabled = item.disabled?.(state) ?? false;
+            const disabled = allDisabled || (item.disabled?.(state) ?? false);
             const Icon = item.Icon;
 
             const buttonStyle: StyleProp<ViewStyle> = [
@@ -751,8 +785,13 @@ function NoteEditorToolbar({
           <Pressable
             accessibilityRole="button"
             accessibilityLabel="Inserir imagem"
+            accessibilityState={{ disabled: allDisabled }}
+            disabled={allDisabled}
             onPress={onImagePress}
-            style={styles.toolbarButton}
+            style={[
+              styles.toolbarButton,
+              allDisabled ? styles.toolbarButtonDisabled : null,
+            ]}
           >
             <ImageIcon width={16} height={16} color={iconColor} />
           </Pressable>