@medway-ui/native 1.1.2 → 1.3.0

package/src/editor/NoteEditor.tsx

@@ -0,0 +1,802 @@
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentType,
+  type Ref,
+} from "react";
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  TextInput,
+  View,
+  type NativeSyntheticEvent,
+  type TextInputKeyPressEventData,
+} from "react-native";
+import UntypedWebView, {
+  type WebViewMessageEvent,
+  type WebViewProps,
+} from "react-native-webview";
+import { useColorScheme } from "nativewind";
+
+import { EDITOR_HTML } from "./editorHtml.generated";
+
+import type {
+  EditorCommand,
+  EditorDocument,
+  EditorSelectionState,
+  EditorTheme,
+  SlashCommandId,
+  SlashMenuState,
+} from "@medway-ui/notes-core";
+import {
+  EMPTY_DOCUMENT,
+  EMPTY_SLASH_STATE,
+  INITIAL_EDITOR_STATE,
+  getSlashCommand,
+  normalizeDocument,
+} 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 { Text } from "@/components/Text";
+import { Button } from "@/components/Button";
+import { Input } from "@/components/Input";
+import {
+  Dialog,
+  DialogContainer,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/Dialog";
+import { useThemeColor } from "@/hooks/useThemeColor";
+import { cn } from "@/lib/utils";
+
+import {
+  EDITOR_PROTOCOL_VERSION,
+  EDITOR_RECEIVE_HANDLER,
+  isEditorMessage,
+  type EditorToNativeMessage,
+  type NativeToEditorMessage,
+} 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.
+ */
+type WebViewHandle = {
+  injectJavaScript: (script: string) => void;
+};
+
+/**
+ * Retyped locally: the library's own `WebView` resolves to `Component<never>`
+ * under `strict` and rejects every JSX prop.
+ */
+const WebView = UntypedWebView as unknown as ComponentType<
+  WebViewProps & { ref?: Ref<WebViewHandle> }
+>;
+
+/**
+ * What `getSaveData` returns. No `html` field, unlike web: generating HTML needs
+ * a DOM, which never exists outside the WebView here. Persist `json` and render
+ * HTML backend-side if needed.
+ */
+export type NoteEditorValue = {
+  title: string;
+  json: EditorDocument;
+};
+
+/**
+ * Same shape as the web `NoteEditor`'s handle, minus `editor` (no in-process
+ * Tiptap instance to hand out) and with the document getters async, since
+ * reading the document is a bridge round trip here.
+ */
+export type NoteEditorHandle = {
+  focus: (position?: "start" | "end") => void;
+  blur: () => void;
+  getDocument: () => Promise<EditorDocument>;
+  getSaveData: () => Promise<NoteEditorValue>;
+  setDocument: (
+    doc: EditorDocument | string,
+    options?: { focus?: boolean }
+  ) => void;
+};
+
+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.
+   */
+  document?: EditorDocument | string;
+  /** Initial title, shown above the content in its own always-visible area. */
+  initialTitle?: string;
+  titlePlaceholder?: string;
+  onChange?: (doc: EditorDocument) => void;
+  editable?: boolean;
+  /** Focuses the title if `initialTitle` is empty, otherwise the content. */
+  autofocus?: boolean | "start" | "end";
+  /** Shows the formatting bar above the editor. */
+  toolbar?: boolean;
+  /**
+   * Resolves with the URL to use as the image's `src`, or `null` if the host's
+   * 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.
+   */
+  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`).
+   */
+  onImageRemoved?: (src: string) => void;
+  /** Default 4000ms. */
+  imageDeleteGraceMs?: number;
+  /**
+   * Native-only. The WebView never navigates, so the host decides what to open
+   * (e.g. `Linking.openURL` after validating the URL).
+   */
+  onLinkPress?: (href: string) => void;
+  /**
+   * Native-only. Starting height in dp for embedded mode: the editor sits in a
+   * native scroll container, does not scroll itself, and is resized to the
+   * height it reports over the bridge. Omit to let the WebView fill and scroll
+   * its own parent.
+   */
+  height?: number;
+  /**
+   * Native-only. Applied to the container and the WebView; match the host theme
+   * to avoid a flash before the WebView paints its own document background
+   * (Android is particularly sensitive).
+   */
+  backgroundColor?: string;
+  testID?: string;
+};
+
+/** 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;
+
+let requestCounter = 0;
+/** Correlates a `getDocument` request with the `document` response that answers it. */
+const nextRequestId = (): string => {
+  requestCounter += 1;
+  return `req_${requestCounter}_${Date.now()}`;
+};
+
+/**
+ * Resolves semantic design-system colors into a raw `EditorTheme`. Sent to the
+ * WebView on mount and on every color-scheme change, so a host never has to
+ * manage editor theming itself.
+ */
+const useNoteEditorTheme = (): EditorTheme => {
+  const { colorScheme } = useColorScheme();
+  const background = useThemeColor("surface-card");
+  const text = useThemeColor("content-paragraph");
+  const heading = useThemeColor("content-title");
+  const muted = useThemeColor("gray-foreground-muted");
+  const border = useThemeColor("gray-stroke-muted");
+  const accent = useThemeColor("primary-foreground");
+  const codeBackground = useThemeColor("gray-background-soft");
+
+  return useMemo<EditorTheme>(
+    () => ({
+      colorScheme: colorScheme === "dark" ? "dark" : "light",
+      background,
+      text,
+      heading,
+      muted,
+      placeholder: muted,
+      border,
+      accent,
+      caret: accent,
+      selection: border,
+      codeBackground,
+      codeText: text,
+      // Approximates the web surface's `text-md`/`leading-md`; not pixel-exact.
+      fontSize: 15,
+      lineHeight: 22,
+      paddingHorizontal: 16,
+      paddingTop: 12,
+      paddingBottom: 32,
+    }),
+    [colorScheme, background, text, heading, muted, border, accent, codeBackground]
+  );
+};
+
+/** Every icon exported from `@medway-ui/icons/native` shares this component shape. */
+type IconComponent = typeof Bold;
+
+type ToolbarItem = {
+  id: string;
+  label: string;
+  Icon: IconComponent;
+  command?: EditorCommand;
+  activeKey?: keyof EditorSelectionState["active"];
+  disabled?: (state: EditorSelectionState) => boolean;
+  onPress?: () => void;
+};
+
+/**
+ * Same commands, grouping and order as the web `NoteEditor`'s `TOOLBAR_GROUPS`.
+ * `link` and `undo`/`redo` are filled in per-instance: they need the live
+ * `EditorSelectionState` and a dialog opener that only exist in the component.
+ */
+const buildToolbarGroups = (
+  state: EditorSelectionState,
+  openLinkDialog: () => void
+): ToolbarItem[][] => [
+  [
+    { id: "bold", label: "Negrito", Icon: Bold, command: { name: "toggleBold" }, activeKey: "bold" },
+    { id: "italic", label: "Itálico", Icon: Italic, command: { name: "toggleItalic" }, activeKey: "italic" },
+    { id: "underline", label: "Sublinhado", Icon: Underline, command: { name: "toggleUnderline" }, activeKey: "underline" },
+    { id: "strike", label: "Tachado", Icon: Strikethrough, command: { name: "toggleStrike" }, activeKey: "strike" },
+    { id: "code", label: "Código", Icon: Code, command: { name: "toggleCode" }, activeKey: "code" },
+  ],
+  [
+    { id: "heading2", label: "Título 2", Icon: HeadingH2, command: { name: "toggleHeading", level: 2 }, activeKey: "heading2" },
+    { id: "heading3", label: "Título 3", Icon: HeadingH3, command: { name: "toggleHeading", level: 3 }, activeKey: "heading3" },
+  ],
+  [
+    { id: "bulletList", label: "Lista com marcadores", Icon: ListUnordered, command: { name: "toggleBulletList" }, activeKey: "bulletList" },
+    { id: "orderedList", label: "Lista numerada", Icon: ListOrdered, command: { name: "toggleOrderedList" }, activeKey: "orderedList" },
+    { id: "blockquote", label: "Citação", Icon: DoubleQuotesL, command: { name: "toggleBlockquote" }, activeKey: "blockquote" },
+    { id: "codeBlock", label: "Bloco de código", Icon: WindowCodeBlock, command: { name: "toggleCodeBlock" }, activeKey: "codeBlock" },
+  ],
+  [{ id: "link", label: "Inserir link", Icon: LinkIcon, activeKey: "link", onPress: openLinkDialog }],
+  [
+    { id: "undo", label: "Desfazer", Icon: ArrowUndoUpLeft, command: { name: "undo" }, disabled: (s) => !s.canUndo },
+    { id: "redo", label: "Refazer", Icon: Redo, command: { name: "redo" }, disabled: (s) => !s.canRedo },
+  ],
+];
+
+/**
+ * Unlike every other command — a pure ProseMirror op — "Imagem" needs a file
+ * first, so it is only offered when the host gave us a way to resolve one.
+ * Kept local because `notes-core` cannot know what a given host can do.
+ */
+const visibleSlashCommandIds = (
+  commandIds: SlashCommandId[],
+  canUploadImage: boolean
+): SlashCommandId[] =>
+  canUploadImage ? commandIds : commandIds.filter((id) => id !== "image");
+
+const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
+  (
+    {
+      document: initialDocument,
+      initialTitle,
+      titlePlaceholder = "Title",
+      onChange,
+      editable = true,
+      autofocus = false,
+      toolbar = false,
+      onImageUpload,
+      onImageRemoved,
+      imageDeleteGraceMs = DEFAULT_IMAGE_DELETE_GRACE_MS,
+      onLinkPress,
+      height,
+      backgroundColor,
+      testID,
+    },
+    ref
+  ) => {
+    const webViewRef = useRef<WebViewHandle>(null);
+    const isEmbedded = height !== undefined;
+    const titlePlaceholderColor = useThemeColor("gray-foreground-muted");
+
+    const [isReady, setIsReady] = useState(false);
+    const [selectionState, setSelectionState] = useState<EditorSelectionState>(
+      INITIAL_EDITOR_STATE
+    );
+    const [slashState, setSlashState] = useState<SlashMenuState>(EMPTY_SLASH_STATE);
+    const [contentHeight, setContentHeight] = useState(height);
+
+    const [title, setTitle] = useState(() => sanitizeTitle(initialTitle ?? ""));
+    const titleInputRef = useRef<TextInput>(null);
+    const [titleSelection, setTitleSelection] = useState<
+      { start: number; end: number } | undefined
+    >(undefined);
+
+    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();
+      setTitleSelection({ start: title.length, end: title.length });
+    }, [title.length]);
+
+    // Internal from here on: a host never sends or reads a bridge message
+    // directly. See `./protocol.ts`.
+    const send = useCallback((message: NativeToEditorMessage) => {
+      webViewRef.current?.injectJavaScript(
+        `window.${EDITOR_RECEIVE_HANDLER}(${JSON.stringify(JSON.stringify(message))}); true;`
+      );
+    }, []);
+
+    const pendingDocumentRequests = useRef(
+      new Map<string, { resolve: (doc: EditorDocument) => void; reject: (error: Error) => void }>()
+    );
+
+    const requestDocument = useCallback((): Promise<EditorDocument> => {
+      const requestId = nextRequestId();
+
+      return new Promise<EditorDocument>((resolve, reject) => {
+        pendingDocumentRequests.current.set(requestId, { resolve, reject });
+        send({ type: "getDocument", requestId });
+
+        setTimeout(() => {
+          if (!pendingDocumentRequests.current.has(requestId)) return;
+          pendingDocumentRequests.current.delete(requestId);
+          reject(new Error("NoteEditor: timed out waiting for the WebView bundle to respond"));
+        }, 5000);
+      });
+    }, [send]);
+
+    const onImageUploadRef = useRef(onImageUpload);
+    const onImageRemovedRef = useRef(onImageRemoved);
+    const onChangeRef = useRef(onChange);
+    const onLinkPressRef = useRef(onLinkPress);
+    useEffect(() => {
+      onImageUploadRef.current = onImageUpload;
+    }, [onImageUpload]);
+    useEffect(() => {
+      onImageRemovedRef.current = onImageRemoved;
+    }, [onImageRemoved]);
+    useEffect(() => {
+      onChangeRef.current = onChange;
+    }, [onChange]);
+    useEffect(() => {
+      onLinkPressRef.current = onLinkPress;
+    }, [onLinkPress]);
+
+    const insertImage = useCallback(async () => {
+      const upload = onImageUploadRef.current;
+      if (!upload) return;
+
+      try {
+        const result = await upload();
+        if (!result) return;
+        send({ 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]);
+
+    const handleMessage = useCallback(
+      (event: WebViewMessageEvent) => {
+        let message: unknown;
+        try {
+          message = JSON.parse(event.nativeEvent.data);
+        } catch {
+          return;
+        }
+        if (!isEditorMessage(message)) return;
+
+        const editorMessage = message as EditorToNativeMessage;
+        switch (editorMessage.type) {
+          case "ready":
+            // A protocol mismatch means a stale `editorHtml.generated.ts`.
+            // 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;
+            }
+            setIsReady(true);
+            return;
+          case "state":
+            setSelectionState(editorMessage.state);
+            return;
+          case "slash":
+            setSlashState(editorMessage.slash);
+            return;
+          case "change":
+            // Already debounced by the bundle (`CHANGE_DEBOUNCE_MS`). The extra
+            // 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(() => {});
+            }
+            return;
+          case "document": {
+            const pending = pendingDocumentRequests.current.get(editorMessage.requestId);
+            if (!pending) return;
+            pendingDocumentRequests.current.delete(editorMessage.requestId);
+            // `isEditorMessage` only established that `doc` is an object. The
+            // 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));
+            return;
+          }
+          case "resize":
+            if (isEmbedded) setContentHeight(editorMessage.height);
+            return;
+          case "linkPress":
+            onLinkPressRef.current?.(editorMessage.href);
+            return;
+          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:
+            return;
+        }
+      },
+      [focusTitleAtEnd, isEmbedded, requestDocument]
+    );
+
+    // Fires once, when the bundle reports `ready`: the initial document, layout
+    // mode and image-delete grace period are all read-once.
+    useEffect(() => {
+      if (!isReady) return;
+
+      send({
+        type: "setContent",
+        doc: initialDocument ?? EMPTY_DOCUMENT,
+        editable,
+        focus: autofocusTitleRef.current ? false : 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.
+    useEffect(() => {
+      if (!isReady) return;
+      send({ type: "setEditable", editable });
+    }, [isReady, editable, send]);
+
+    const theme = useNoteEditorTheme();
+    useEffect(() => {
+      if (!isReady) return;
+      send({ type: "setTheme", theme });
+    }, [isReady, theme, send]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: (position) => send({ type: "focus", position: position ?? "end" }),
+        blur: () => send({ type: "blur" }),
+        getDocument: () => requestDocument(),
+        getSaveData: async () => ({ title, json: await requestDocument() }),
+        setDocument: (doc, options) =>
+          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 openLinkDialog = useCallback(() => {
+      setLinkValue(selectionState.linkHref ?? "");
+      setLinkDialogOpen(true);
+    }, [selectionState.linkHref]);
+
+    const confirmLink = useCallback(() => {
+      const href = linkValue.trim();
+      send(
+        href
+          ? { type: "command", command: { name: "setLink", href } }
+          : { type: "command", command: { name: "unsetLink" } }
+      );
+      setLinkDialogOpen(false);
+    }, [linkValue, send]);
+
+    const runToolbarCommand = useCallback(
+      (command: EditorCommand) => send({ type: "command", command }),
+      [send]
+    );
+    const toolbarGroups = useMemo(
+      () => buildToolbarGroups(selectionState, openLinkDialog),
+      [selectionState, openLinkDialog]
+    );
+
+    const handleSlashSelect = useCallback(
+      (id: SlashCommandId) => {
+        send({ type: "runSlashCommand", commandId: id });
+        if (id === "image") insertImage();
+      },
+      [send, insertImage]
+    );
+
+    const containerHeight = isEmbedded ? contentHeight : undefined;
+
+    return (
+      <View
+        style={[
+          isEmbedded ? styles.containerEmbedded : styles.container,
+          isEmbedded ? { height: containerHeight } : null,
+          backgroundColor ? { backgroundColor } : null,
+        ]}
+      >
+        {toolbar && (
+          <NoteEditorToolbar
+            groups={toolbarGroups}
+            state={selectionState}
+            onCommand={runToolbarCommand}
+            onImagePress={onImageUpload ? insertImage : undefined}
+          />
+        )}
+
+        <TextInput
+          ref={titleInputRef}
+          multiline
+          value={title}
+          onChangeText={(value) => setTitle(sanitizeTitle(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.
+            if (event.nativeEvent.key !== "Enter") return;
+            send({ type: "focus", position: "start" });
+          }}
+          selection={titleSelection}
+          onSelectionChange={() => {
+            if (titleSelection) setTitleSelection(undefined);
+          }}
+          placeholder={titlePlaceholder}
+          placeholderTextColor={titlePlaceholderColor}
+          editable={editable}
+          testID={testID ? `${testID}-title` : undefined}
+          accessibilityLabel="Título da anotação"
+          className="mb-1 p-0 text-title-lg font-bold leading-title-lg text-content-title"
+        />
+
+        <View style={{ flex: isEmbedded ? undefined : 1 }}>
+          <WebView
+            ref={webViewRef}
+            testID={testID}
+            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}
+            // 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
+            // navigation, which would otherwise bypass the `<a>` click handler
+            // in `editor-bundle/src/main.ts`.
+            onShouldStartLoadWithRequest={({ url }) =>
+              !url || url === "about:blank"
+            }
+            javaScriptEnabled
+            domStorageEnabled={false}
+            allowFileAccess={false}
+            allowFileAccessFromFileURLs={false}
+            allowUniversalAccessFromFileURLs={false}
+            allowsLinkPreview={false}
+            setSupportMultipleWindows={false}
+            mixedContentMode="never"
+            cacheEnabled={false}
+            hideKeyboardAccessoryView
+            keyboardDisplayRequiresUserAction={false}
+            automaticallyAdjustContentInsets={false}
+            contentInsetAdjustmentBehavior="never"
+            textInteractionEnabled
+            // Embedded, the native list owns the scroll: two nested scrollers
+            // put the caret in a scroll view ProseMirror was never told about.
+            scrollEnabled={!isEmbedded}
+            nestedScrollEnabled={false}
+            androidLayerType={Platform.OS === "android" ? "hardware" : undefined}
+            style={[
+              styles.webView,
+              isEmbedded ? { flex: undefined, height: containerHeight } : null,
+              backgroundColor ? { backgroundColor } : null,
+            ]}
+          />
+
+          {slashState.active && slashState.caret ? (
+            <NoteEditorSlashMenu
+              slash={slashState}
+              canUploadImage={Boolean(onImageUpload)}
+              onSelect={handleSlashSelect}
+            />
+          ) : null}
+        </View>
+
+        <Dialog open={linkDialogOpen} onOpenChange={setLinkDialogOpen}>
+          <DialogContainer>
+            <DialogHeader>
+              <DialogTitle>Inserir link</DialogTitle>
+            </DialogHeader>
+            <DialogContent>
+              <Input
+                value={linkValue}
+                onChangeText={setLinkValue}
+                placeholder="https://"
+                label="URL"
+                autoCapitalize="none"
+                autoCorrect={false}
+                keyboardType="url"
+              />
+            </DialogContent>
+            <DialogFooter>
+              <Button onPress={confirmLink}>Confirmar</Button>
+            </DialogFooter>
+          </DialogContainer>
+        </Dialog>
+      </View>
+    );
+  }
+);
+
+NoteEditor.displayName = "NoteEditor";
+
+function NoteEditorToolbar({
+  groups,
+  state,
+  onCommand,
+  onImagePress,
+}: {
+  groups: ToolbarItem[][];
+  state: EditorSelectionState;
+  onCommand: (command: EditorCommand) => void;
+  onImagePress?: () => void;
+}) {
+  const iconColor = useThemeColor("gray-foreground");
+  const activeIconColor = useThemeColor("primary-foreground");
+
+  return (
+    <View className="mb-2 flex-row flex-wrap items-center gap-0.5 border-b border-gray-stroke-muted pb-2">
+      {groups.map((group, groupIndex) => (
+        <View key={groupIndex} className="flex-row items-center gap-0.5">
+          {groupIndex > 0 ? <View className="mx-1 h-5 w-px bg-gray-stroke-muted" /> : null}
+          {group.map((item) => {
+            const active = item.activeKey ? state.active[item.activeKey] : false;
+            const disabled = item.disabled?.(state) ?? false;
+            const Icon = item.Icon;
+
+            return (
+              <Pressable
+                key={item.id}
+                accessibilityRole="button"
+                accessibilityLabel={item.label}
+                accessibilityState={{ disabled, selected: active }}
+                disabled={disabled}
+                onPress={item.onPress ?? (() => item.command && onCommand(item.command))}
+                className={cn(
+                  "h-8 w-8 items-center justify-center rounded-md",
+                  disabled && "opacity-40",
+                  active && "bg-primary-background-soft"
+                )}
+              >
+                <Icon width={16} height={16} color={active ? activeIconColor : iconColor} />
+              </Pressable>
+            );
+          })}
+        </View>
+      ))}
+
+      {onImagePress ? (
+        <View className="flex-row items-center gap-0.5">
+          <View className="mx-1 h-5 w-px bg-gray-stroke-muted" />
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Inserir imagem"
+            onPress={onImagePress}
+            className="h-8 w-8 items-center justify-center rounded-md"
+          >
+            <ImageIcon width={16} height={16} color={iconColor} />
+          </Pressable>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+/**
+ * Positioned from the `caret` rect the bundle reports. No arrow-key navigation:
+ * a touch UI has no keyboard focus to drive one, so every item is tappable.
+ *
+ * `caret` is in CSS pixels inside the WebView viewport, treated here as `dp` —
+ * valid as long as the WebView isn't scaled.
+ */
+function NoteEditorSlashMenu({
+  slash,
+  canUploadImage,
+  onSelect,
+}: {
+  slash: SlashMenuState;
+  canUploadImage: boolean;
+  onSelect: (id: SlashCommandId) => void;
+}) {
+  if (!slash.caret) return null;
+
+  const commandIds = visibleSlashCommandIds(slash.commandIds, canUploadImage);
+
+  return (
+    <View
+      className="absolute z-50 max-h-72 w-64 overflow-hidden rounded-md border border-gray-stroke-muted bg-surface-elevated p-1 shadow-lg"
+      style={{ left: slash.caret.x, top: slash.caret.y + slash.caret.height + 6 }}
+    >
+      {commandIds.length === 0 ? (
+        <Text className="px-3 py-2 text-gray-foreground-muted">Nenhum resultado</Text>
+      ) : (
+        commandIds.map((id) => {
+          const command = getSlashCommand(id);
+          if (!command) return null;
+
+          return (
+            <Pressable
+              key={id}
+              accessibilityRole="button"
+              onPress={() => onSelect(id)}
+              className="rounded-sm px-3 py-1.5 active:bg-secondary-background-soft-emphasis"
+            >
+              <Text className="font-medium text-gray-foreground">{command.label}</Text>
+              <Text className="text-xs text-gray-foreground-muted">{command.description}</Text>
+            </Pressable>
+          );
+        })
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  containerEmbedded: { flex: 0 },
+  // `opacity` below 1 forces the WebView onto its own layer, which stops the
+  // white flash Android paints before the theme reaches the document.
+  webView: { flex: 1, opacity: 0.99 },
+});
+
+export default memo(NoteEditor);