@medway-ui/native 1.9.1 → 1.10.0

package/src/editor/NoteEditor.tsx

@@ -18,6 +18,7 @@ import {
   Text as RNText,
   TextInput,
   View,
+  type LayoutChangeEvent,
   type NativeSyntheticEvent,
   type StyleProp,
   type TextInputKeyPressEventData,
@@ -29,8 +30,6 @@ import UntypedWebView, {
 } from "react-native-webview";
 import { useColorScheme } from "nativewind";
 
-import { EDITOR_HTML } from "./editorHtml.generated";
-
 import type {
   EditorCommand,
   EditorDocument,
@@ -45,6 +44,8 @@ import {
   INITIAL_EDITOR_STATE,
   getSlashCommand,
   normalizeDocument,
+  normalizeLinkInput,
+  sanitizeImageSrc,
 } from "@medway-ui/notes-core";
 import {
   ArrowUndoUpLeft,
@@ -66,6 +67,7 @@ import {
 
 import { Button } from "@/components/Button";
 import { Input } from "@/components/Input";
+import { Text } from "@/components/Text";
 import {
   Dialog,
   DialogContainer,
@@ -74,20 +76,21 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/Dialog";
-import { DEFAULT_COLOR, useThemeColor } from "@/hooks/useThemeColor";
-
-function useEditorThemeColor(token: string, fallback: string): string {
-  const value = useThemeColor(token);
-  return value === DEFAULT_COLOR ? fallback : value;
-}
-
+import { EDITOR_HTML } from "@/editor/editorHtml.generated";
 import {
   EDITOR_PROTOCOL_VERSION,
   EDITOR_RECEIVE_HANDLER,
   isEditorMessage,
   type EditorToNativeMessage,
   type NativeToEditorMessage,
-} from "./protocol";
+} from "@/editor/protocol";
+import { DEFAULT_COLOR, useThemeColor } from "@/hooks/useThemeColor";
+import { getMinTouchHitSlop } from "@/lib/touch-target";
+
+function useEditorThemeColor(token: string, fallback: string): string {
+  const value = useThemeColor(token);
+  return value === DEFAULT_COLOR ? fallback : value;
+}
 
 /**
  * The ref surface of `react-native-webview`, kept local so consumers need not
@@ -114,6 +117,15 @@ const WebView = UntypedWebView as unknown as ComponentType<
 export type NoteEditorValue = {
   title: string;
   json: EditorDocument;
+  /**
+   * Images `onImageUpload` produced this session that `json` no longer has.
+   * Keep the list from the last save that succeeded (replace it on every
+   * save, never merge) and delete those files only when the editor unmounts
+   * (closing it, or switching notes with a new `key`): until then an undo can
+   * bring an image back. `setDocument` keeps the undo history, so it is not
+   * the moment to delete them.
+   */
+  removedImages: string[];
 };
 
 /**
@@ -132,12 +144,12 @@ export type NoteEditorHandle = {
   ) => void;
 };
 
-type NoteEditorProps = {
+export type NoteEditorProps = {
   /**
    * Initial document: the note's JSON, or an HTML string (parsed bundle-side,
-   * the only side with a DOM). Changing it replaces the content but keeps the
-   * instance — pass a new React `key` for a fresh undo stack, as when
-   * switching notes.
+   * the only side with a DOM). Read once, on mount: changing it later does
+   * nothing. To replace the content use the ref's `setDocument`; to open
+   * another note with a fresh undo stack, pass a new React `key`.
    */
   document?: EditorDocument | string;
   /** Initial title, shown above the content in its own always-visible area. */
@@ -154,15 +166,26 @@ type NoteEditorProps = {
    * picker was cancelled. **Different shape from the web prop**: there is no
    * file input here and this package carries no image-picker dependency, so
    * picking the file is the host's job. Providing it is what enables the
-   * toolbar "Imagem" button and the `/Imagem` slash command.
+   * toolbar "Inserir imagem" button and the `/Imagem` slash command.
    */
   onImageUpload?: () => Promise<{ src: string; alt?: string | null } | null>;
   /**
-   * Fires when an image inserted this session leaves the document and stays out
-   * past the grace period. Tracked bundle-side (`editor-bundle/src/main.ts`).
+   * Fires right away for an uploaded file that never made it into the note:
+   * a `src` the editor refuses (anything but absolute `http(s):`/`data:`) or
+   * one that arrives after the editor stopped accepting it. Images removed
+   * while editing come from `getSaveData().removedImages` instead, so the
+   * host only deletes what a successful save left out.
+   *
+   * Neither covers images present when the document loaded, nor a file pasted
+   * into another note: this component cannot see other notes, so checking
+   * that no note still references a file before deleting it is the backend's
+   * job.
    */
   onImageRemoved?: (src: string) => void;
-  /** Default 4000ms. */
+  /**
+   * @deprecated Ignored. Removed images come from
+   * `getSaveData().removedImages`, deleted by the host when the editor closes.
+   */
   imageDeleteGraceMs?: number;
   /**
    * Native-only. The WebView never navigates, so the host decides what to open
@@ -188,7 +211,45 @@ type NoteEditorProps = {
 /** The title is single-line; newlines can still arrive via paste. */
 const sanitizeTitle = (value: string): string => 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: string, value: string): string =>
+  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: number, editorWidth: number): number =>
+  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: EditorDocument): Set<string> => {
+  const srcs = new Set<string>();
+  const walk = (nodes: EditorDocument["content"]) => {
+    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. */
@@ -206,10 +267,11 @@ const useNoteEditorTheme = (): EditorTheme => {
   const { colorScheme } = 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<EditorTheme>(
@@ -222,6 +284,7 @@ const useNoteEditorTheme = (): EditorTheme => {
       placeholder: muted,
       border,
       accent,
+      link,
       caret: accent,
       selection: border,
       codeBackground,
@@ -233,7 +296,7 @@ const useNoteEditorTheme = (): EditorTheme => {
       paddingTop: 12,
       paddingBottom: 32,
     }),
-    [colorScheme, background, text, heading, muted, border, accent, codeBackground]
+    [colorScheme, background, text, heading, muted, border, accent, link, codeBackground]
   );
 };
 
@@ -299,14 +362,13 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
     {
       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,
@@ -333,12 +395,10 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
       { start: number; end: number } | undefined
     >(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(() => {
@@ -371,15 +431,60 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
       setSlashState(EMPTY_SLASH_STATE);
     }, []);
 
+    const [webViewKey, setWebViewKey] = useState(0);
+    const recentCrashesRef = useRef<number[]>([]);
+
+    // 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<EditorDocument | string>(
+      initialDocument ?? EMPTY_DOCUMENT
+    );
+    const uploadedThisSessionRef = useRef(new Set<string>());
+    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<string, { resolve: (doc: EditorDocument) => void; reject: (error: Error) => void }>()
+      new Map<
+        string,
+        {
+          generation: number;
+          resolve: (doc: EditorDocument) => void;
+          reject: (error: Error) => void;
+        }
+      >()
     );
 
     const requestDocument = useCallback((): Promise<EditorDocument> => {
       const requestId = nextRequestId();
+      const generation = documentGenerationRef.current;
 
       return new Promise<EditorDocument>((resolve, reject) => {
-        pendingDocumentRequests.current.set(requestId, { resolve, reject });
+        pendingDocumentRequests.current.set(requestId, { generation, resolve, reject });
         send({ type: "getDocument", requestId });
 
         setTimeout(() => {
@@ -407,6 +512,13 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
       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;
@@ -414,17 +526,22 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
       try {
         const result = await upload();
         if (!result) return;
-        if (!editableRef.current) {
+        if (!isMountedRef.current || !editableRef.current) {
           onImageRemovedRef.current?.(result.src);
           return;
         }
-        sendMutation({
-          type: "insertImage",
-          src: result.src,
-          alt: result.alt ?? null,
-        });
+        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, alt: result.alt ?? null });
       } catch (error) {
-        // eslint-disable-next-line no-console
         console.error("@medway-ui/native NoteEditor: onImageUpload failed", error);
       }
     }, [sendMutation]);
@@ -446,7 +563,6 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
             // 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).`
               );
@@ -465,8 +581,12 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
             // round trip happens only when a host asked for `onChange`, which
             // keeps serialization per-settled-keystroke, not per-keystroke.
             if (onChangeRef.current) {
+              const generation = documentGenerationRef.current;
               requestDocument()
-                .then((doc) => onChangeRef.current?.(doc))
+                .then((doc) => {
+                  if (generation !== documentGenerationRef.current) return;
+                  onChangeRef.current?.(doc);
+                })
                 .catch(() => {});
             }
             return;
@@ -478,7 +598,13 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
             // 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":
@@ -490,11 +616,7 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
           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:
@@ -504,24 +626,24 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
       [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),
+        focus: isFirstLoad && !autofocusTitleRef.current && Boolean(autofocus),
         focusPosition: typeof autofocus === "string" ? autofocus : undefined,
-        imageDeleteGraceMs,
       });
 
       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.
@@ -542,34 +664,64 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
         focus: (position) => send({ type: "focus", position: position ?? "end" }),
         blur: () => send({ type: "blur" }),
         getDocument: () => requestDocument(),
-        getSaveData: async () => ({ title, json: await requestDocument() }),
-        setDocument: (doc, options) =>
+        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: string) => {
+      setLinkValue(value);
+      setLinkInvalid(false);
+    }, []);
+
     const confirmLink = useCallback(() => {
-      const href = linkValue.trim();
-      sendMutation(
-        href
-          ? { type: "command", command: { name: "setLink", href } }
-          : { type: "command", command: { name: "unsetLink" } }
-      );
+      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 } });
       setLinkDialogOpen(false);
     }, [linkValue, sendMutation]);
 
@@ -593,6 +745,11 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
 
     const containerHeight = isEmbedded ? contentHeight : undefined;
 
+    const [editorWidth, setEditorWidth] = useState(0);
+    const handleEditorLayout = useCallback((event: LayoutChangeEvent) => {
+      setEditorWidth(event.nativeEvent.layout.width);
+    }, []);
+
     const resolvedBackground = backgroundColor ?? theme.background;
 
     return (
@@ -616,11 +773,10 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
           ref={titleInputRef}
           multiline
           value={title}
-          onChangeText={(value) => setTitle(sanitizeTitle(value))}
+          onChangeText={(value) => setTitle((previous) => nextTitle(previous, value))}
           onKeyPress={(event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-            // 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", position: "start" });
           }}
@@ -636,8 +792,12 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
           style={[styles.title, { color: titleColor }]}
         />
 
-        <View style={{ flex: isEmbedded ? undefined : 1 }}>
+        <View
+          style={{ flex: isEmbedded ? undefined : 1 }}
+          onLayout={handleEditorLayout}
+        >
           <WebView
+            key={webViewKey}
             ref={webViewRef}
             testID={testID}
             containerStyle={
@@ -650,8 +810,8 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
             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
@@ -689,6 +849,7 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
           {slashState.active && slashState.caret ? (
             <NoteEditorSlashMenu
               slash={slashState}
+              editorWidth={editorWidth}
               canUploadImage={Boolean(onImageUpload)}
               onSelect={handleSlashSelect}
             />
@@ -703,13 +864,22 @@ const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
             <DialogContent>
               <Input
                 value={linkValue}
-                onChangeText={setLinkValue}
+                onChangeText={handleLinkValueChange}
+                invalid={linkInvalid}
                 placeholder="https://"
                 label="URL"
                 autoCapitalize="none"
                 autoCorrect={false}
                 keyboardType="url"
               />
+              {linkInvalid ? (
+                <Text
+                  accessibilityRole="alert"
+                  className="mt-1 text-xs text-feedback-error-foreground"
+                >
+                  Link inválido. Use um endereço como medway.com.br
+                </Text>
+              ) : null}
             </DialogContent>
             <DialogFooter>
               <Button onPress={confirmLink}>Confirmar</Button>
@@ -769,6 +939,7 @@ function NoteEditorToolbar({
                 accessibilityLabel={item.label}
                 accessibilityState={{ disabled, selected: active }}
                 disabled={disabled}
+                hitSlop={TOOLBAR_BUTTON_HIT_SLOP}
                 onPress={item.onPress ?? (() => item.command && onCommand(item.command))}
                 style={buttonStyle}
               >
@@ -787,6 +958,7 @@ function NoteEditorToolbar({
             accessibilityLabel="Inserir imagem"
             accessibilityState={{ disabled: allDisabled }}
             disabled={allDisabled}
+            hitSlop={TOOLBAR_BUTTON_HIT_SLOP}
             onPress={onImagePress}
             style={[
               styles.toolbarButton,
@@ -810,10 +982,12 @@ function NoteEditorToolbar({
  */
 function NoteEditorSlashMenu({
   slash,
+  editorWidth,
   canUploadImage,
   onSelect,
 }: {
   slash: SlashMenuState;
+  editorWidth: number;
   canUploadImage: boolean;
   onSelect: (id: SlashCommandId) => void;
 }) {
@@ -835,8 +1009,8 @@ function NoteEditorSlashMenu({
       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,
         },
       ]}
     >
@@ -921,8 +1095,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,
@@ -933,7 +1107,7 @@ const styles = StyleSheet.create({
   slashMenuShadow: {
     position: "absolute",
     zIndex: 50,
-    width: 256,
+    width: SLASH_MENU_WIDTH,
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.14,