@medway-ui/native 1.2.0 → 1.3.0

package/lib/commonjs/editor/NoteEditor.js

@@ -0,0 +1,710 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 _Text = require("@/components/Text");
+var _Button = require("@/components/Button");
+var _Input = require("@/components/Input");
+var _Dialog = require("@/components/Dialog");
+var _useThemeColor = require("@/hooks/useThemeColor");
+var _utils = require("@/lib/utils");
+var _protocol = require("./protocol.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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.
+ */
+
+/**
+ * Retyped locally: the library's own `WebView` resolves to `Component<never>`
+ * under `strict` and rejects every JSX prop.
+ */
+const WebView = _reactNativeWebview.default;
+
+/**
+ * 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.
+ */
+
+/**
+ * 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.
+ */
+
+/** 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;
+let requestCounter = 0;
+/** Correlates a `getDocument` request with the `document` response that answers it. */
+const nextRequestId = () => {
+  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 = () => {
+  const {
+    colorScheme
+  } = (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 muted = (0, _useThemeColor.useThemeColor)("gray-foreground-muted");
+  const border = (0, _useThemeColor.useThemeColor)("gray-stroke-muted");
+  const accent = (0, _useThemeColor.useThemeColor)("primary-foreground");
+  const codeBackground = (0, _useThemeColor.useThemeColor)("gray-background-soft");
+  return (0, _react.useMemo)(() => ({
+    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. */
+
+/**
+ * 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, openLinkDialog) => [[{
+  id: "bold",
+  label: "Negrito",
+  Icon: _native.Bold,
+  command: {
+    name: "toggleBold"
+  },
+  activeKey: "bold"
+}, {
+  id: "italic",
+  label: "Itálico",
+  Icon: _native.Italic,
+  command: {
+    name: "toggleItalic"
+  },
+  activeKey: "italic"
+}, {
+  id: "underline",
+  label: "Sublinhado",
+  Icon: _native.Underline,
+  command: {
+    name: "toggleUnderline"
+  },
+  activeKey: "underline"
+}, {
+  id: "strike",
+  label: "Tachado",
+  Icon: _native.Strikethrough,
+  command: {
+    name: "toggleStrike"
+  },
+  activeKey: "strike"
+}, {
+  id: "code",
+  label: "Código",
+  Icon: _native.Code,
+  command: {
+    name: "toggleCode"
+  },
+  activeKey: "code"
+}], [{
+  id: "heading2",
+  label: "Título 2",
+  Icon: _native.HeadingH2,
+  command: {
+    name: "toggleHeading",
+    level: 2
+  },
+  activeKey: "heading2"
+}, {
+  id: "heading3",
+  label: "Título 3",
+  Icon: _native.HeadingH3,
+  command: {
+    name: "toggleHeading",
+    level: 3
+  },
+  activeKey: "heading3"
+}], [{
+  id: "bulletList",
+  label: "Lista com marcadores",
+  Icon: _native.ListUnordered,
+  command: {
+    name: "toggleBulletList"
+  },
+  activeKey: "bulletList"
+}, {
+  id: "orderedList",
+  label: "Lista numerada",
+  Icon: _native.ListOrdered,
+  command: {
+    name: "toggleOrderedList"
+  },
+  activeKey: "orderedList"
+}, {
+  id: "blockquote",
+  label: "Citação",
+  Icon: _native.DoubleQuotesL,
+  command: {
+    name: "toggleBlockquote"
+  },
+  activeKey: "blockquote"
+}, {
+  id: "codeBlock",
+  label: "Bloco de código",
+  Icon: _native.WindowCodeBlock,
+  command: {
+    name: "toggleCodeBlock"
+  },
+  activeKey: "codeBlock"
+}], [{
+  id: "link",
+  label: "Inserir link",
+  Icon: _native.Link,
+  activeKey: "link",
+  onPress: openLinkDialog
+}], [{
+  id: "undo",
+  label: "Desfazer",
+  Icon: _native.ArrowUndoUpLeft,
+  command: {
+    name: "undo"
+  },
+  disabled: s => !s.canUndo
+}, {
+  id: "redo",
+  label: "Refazer",
+  Icon: _native.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, canUploadImage) => canUploadImage ? commandIds : commandIds.filter(id => id !== "image");
+const NoteEditor = /*#__PURE__*/(0, _react.forwardRef)(({
+  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 = (0, _react.useRef)(null);
+  const isEmbedded = height !== undefined;
+  const titlePlaceholderColor = (0, _useThemeColor.useThemeColor)("gray-foreground-muted");
+  const [isReady, setIsReady] = (0, _react.useState)(false);
+  const [selectionState, setSelectionState] = (0, _react.useState)(_notesCore.INITIAL_EDITOR_STATE);
+  const [slashState, setSlashState] = (0, _react.useState)(_notesCore.EMPTY_SLASH_STATE);
+  const [contentHeight, setContentHeight] = (0, _react.useState)(height);
+  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)(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();
+    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 = (0, _react.useCallback)(message => {
+    webViewRef.current?.injectJavaScript(`window.${_protocol.EDITOR_RECEIVE_HANDLER}(${JSON.stringify(JSON.stringify(message))}); true;`);
+  }, []);
+  const pendingDocumentRequests = (0, _react.useRef)(new Map());
+  const requestDocument = (0, _react.useCallback)(() => {
+    const requestId = nextRequestId();
+    return new Promise((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 = (0, _react.useRef)(onImageUpload);
+  const onImageRemovedRef = (0, _react.useRef)(onImageRemoved);
+  const onChangeRef = (0, _react.useRef)(onChange);
+  const onLinkPressRef = (0, _react.useRef)(onLinkPress);
+  (0, _react.useEffect)(() => {
+    onImageUploadRef.current = onImageUpload;
+  }, [onImageUpload]);
+  (0, _react.useEffect)(() => {
+    onImageRemovedRef.current = onImageRemoved;
+  }, [onImageRemoved]);
+  (0, _react.useEffect)(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  (0, _react.useEffect)(() => {
+    onLinkPressRef.current = onLinkPress;
+  }, [onLinkPress]);
+  const insertImage = (0, _react.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 = (0, _react.useCallback)(event => {
+    let message;
+    try {
+      message = JSON.parse(event.nativeEvent.data);
+    } catch {
+      return;
+    }
+    if (!(0, _protocol.isEditorMessage)(message)) return;
+    const editorMessage = message;
+    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 !== _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;
+        }
+        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((0, _notesCore.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.
+  (0, _react.useEffect)(() => {
+    if (!isReady) return;
+    send({
+      type: "setContent",
+      doc: initialDocument ?? _notesCore.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.
+  (0, _react.useEffect)(() => {
+    if (!isReady) return;
+    send({
+      type: "setEditable",
+      editable
+    });
+  }, [isReady, editable, send]);
+  const theme = useNoteEditorTheme();
+  (0, _react.useEffect)(() => {
+    if (!isReady) return;
+    send({
+      type: "setTheme",
+      theme
+    });
+  }, [isReady, theme, send]);
+  (0, _react.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] = (0, _react.useState)(false);
+  const [linkValue, setLinkValue] = (0, _react.useState)("");
+  const openLinkDialog = (0, _react.useCallback)(() => {
+    setLinkValue(selectionState.linkHref ?? "");
+    setLinkDialogOpen(true);
+  }, [selectionState.linkHref]);
+  const confirmLink = (0, _react.useCallback)(() => {
+    const href = linkValue.trim();
+    send(href ? {
+      type: "command",
+      command: {
+        name: "setLink",
+        href
+      }
+    } : {
+      type: "command",
+      command: {
+        name: "unsetLink"
+      }
+    });
+    setLinkDialogOpen(false);
+  }, [linkValue, send]);
+  const runToolbarCommand = (0, _react.useCallback)(command => send({
+    type: "command",
+    command
+  }), [send]);
+  const toolbarGroups = (0, _react.useMemo)(() => buildToolbarGroups(selectionState, openLinkDialog), [selectionState, openLinkDialog]);
+  const handleSlashSelect = (0, _react.useCallback)(id => {
+    send({
+      type: "runSlashCommand",
+      commandId: id
+    });
+    if (id === "image") insertImage();
+  }, [send, insertImage]);
+  const containerHeight = isEmbedded ? contentHeight : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [isEmbedded ? styles.containerEmbedded : styles.container, isEmbedded ? {
+      height: containerHeight
+    } : null, backgroundColor ? {
+      backgroundColor
+    } : null],
+    children: [toolbar && /*#__PURE__*/(0, _jsxRuntime.jsx)(NoteEditorToolbar, {
+      groups: toolbarGroups,
+      state: selectionState,
+      onCommand: runToolbarCommand,
+      onImagePress: onImageUpload ? insertImage : undefined
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      ref: titleInputRef,
+      multiline: true,
+      value: title,
+      onChangeText: value => setTitle(sanitizeTitle(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.
+        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\xEDtulo da anota\xE7\xE3o",
+      className: "mb-1 p-0 text-title-lg font-bold leading-title-lg text-content-title"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flex: isEmbedded ? undefined : 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(WebView, {
+        ref: webViewRef,
+        testID: testID,
+        source: {
+          html: _editorHtmlGenerated.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: true,
+        domStorageEnabled: false,
+        allowFileAccess: false,
+        allowFileAccessFromFileURLs: false,
+        allowUniversalAccessFromFileURLs: false,
+        allowsLinkPreview: false,
+        setSupportMultipleWindows: false,
+        mixedContentMode: "never",
+        cacheEnabled: false,
+        hideKeyboardAccessoryView: true,
+        keyboardDisplayRequiresUserAction: false,
+        automaticallyAdjustContentInsets: false,
+        contentInsetAdjustmentBehavior: "never",
+        textInteractionEnabled: true
+        // 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: _reactNative.Platform.OS === "android" ? "hardware" : undefined,
+        style: [styles.webView, isEmbedded ? {
+          flex: undefined,
+          height: containerHeight
+        } : null, backgroundColor ? {
+          backgroundColor
+        } : null]
+      }), slashState.active && slashState.caret ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NoteEditorSlashMenu, {
+        slash: slashState,
+        canUploadImage: Boolean(onImageUpload),
+        onSelect: handleSlashSelect
+      }) : null]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.Dialog, {
+      open: linkDialogOpen,
+      onOpenChange: setLinkDialogOpen,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.DialogContainer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.DialogHeader, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.DialogTitle, {
+            children: "Inserir link"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.DialogContent, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
+            value: linkValue,
+            onChangeText: setLinkValue,
+            placeholder: "https://",
+            label: "URL",
+            autoCapitalize: "none",
+            autoCorrect: false,
+            keyboardType: "url"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.DialogFooter, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+            onPress: confirmLink,
+            children: "Confirmar"
+          })
+        })]
+      })
+    })]
+  });
+});
+NoteEditor.displayName = "NoteEditor";
+function NoteEditorToolbar({
+  groups,
+  state,
+  onCommand,
+  onImagePress
+}) {
+  const iconColor = (0, _useThemeColor.useThemeColor)("gray-foreground");
+  const activeIconColor = (0, _useThemeColor.useThemeColor)("primary-foreground");
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    className: "mb-2 flex-row flex-wrap items-center gap-0.5 border-b border-gray-stroke-muted pb-2",
+    children: [groups.map((group, groupIndex) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      className: "flex-row items-center gap-0.5",
+      children: [groupIndex > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: item.label,
+          accessibilityState: {
+            disabled,
+            selected: active
+          },
+          disabled: disabled,
+          onPress: item.onPress ?? (() => item.command && onCommand(item.command)),
+          className: (0, _utils.cn)("h-8 w-8 items-center justify-center rounded-md", disabled && "opacity-40", active && "bg-primary-background-soft"),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+            width: 16,
+            height: 16,
+            color: active ? activeIconColor : iconColor
+          })
+        }, item.id);
+      })]
+    }, groupIndex)), onImagePress ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      className: "flex-row items-center gap-0.5",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        className: "mx-1 h-5 w-px bg-gray-stroke-muted"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Inserir imagem",
+        onPress: onImagePress,
+        className: "h-8 w-8 items-center justify-center rounded-md",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_native.Image, {
+          width: 16,
+          height: 16,
+          color: iconColor
+        })
+      })]
+    }) : null]
+  });
+}
+
+/**
+ * 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
+}) {
+  if (!slash.caret) return null;
+  const commandIds = visibleSlashCommandIds(slash.commandIds, canUploadImage);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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
+    },
+    children: commandIds.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      className: "px-3 py-2 text-gray-foreground-muted",
+      children: "Nenhum resultado"
+    }) : commandIds.map(id => {
+      const command = (0, _notesCore.getSlashCommand)(id);
+      if (!command) return null;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+        accessibilityRole: "button",
+        onPress: () => onSelect(id),
+        className: "rounded-sm px-3 py-1.5 active:bg-secondary-background-soft-emphasis",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+          className: "font-medium text-gray-foreground",
+          children: command.label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+          className: "text-xs text-gray-foreground-muted",
+          children: command.description
+        })]
+      }, id);
+    })
+  });
+}
+const styles = _reactNative.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
+  }
+});
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(NoteEditor);
+//# sourceMappingURL=NoteEditor.js.map