@medway-ui/native 1.2.0 → 1.3.0

package/lib/module/editor/NoteEditor.js

@@ -0,0 +1,705 @@
+"use strict";
+
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Platform, Pressable, StyleSheet, TextInput, View } from "react-native";
+import UntypedWebView from "react-native-webview";
+import { useColorScheme } from "nativewind";
+import { EDITOR_HTML } from "./editorHtml.generated";
+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 } 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.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Retyped locally: the library's own `WebView` resolves to `Component<never>`
+ * under `strict` and rejects every JSX prop.
+ */
+const WebView = UntypedWebView;
+
+/**
+ * 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
+  } = 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(() => ({
+    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: 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, canUploadImage) => canUploadImage ? commandIds : commandIds.filter(id => id !== "image");
+const NoteEditor = /*#__PURE__*/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 = useRef(null);
+  const isEmbedded = height !== undefined;
+  const titlePlaceholderColor = useThemeColor("gray-foreground-muted");
+  const [isReady, setIsReady] = useState(false);
+  const [selectionState, setSelectionState] = useState(INITIAL_EDITOR_STATE);
+  const [slashState, setSlashState] = useState(EMPTY_SLASH_STATE);
+  const [contentHeight, setContentHeight] = useState(height);
+  const [title, setTitle] = useState(() => sanitizeTitle(initialTitle ?? ""));
+  const titleInputRef = useRef(null);
+  const [titleSelection, setTitleSelection] = useState(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 => {
+    webViewRef.current?.injectJavaScript(`window.${EDITOR_RECEIVE_HANDLER}(${JSON.stringify(JSON.stringify(message))}); true;`);
+  }, []);
+  const pendingDocumentRequests = useRef(new Map());
+  const requestDocument = 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 = 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 => {
+    let message;
+    try {
+      message = JSON.parse(event.nativeEvent.data);
+    } catch {
+      return;
+    }
+    if (!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 !== 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 => send({
+    type: "command",
+    command
+  }), [send]);
+  const toolbarGroups = useMemo(() => buildToolbarGroups(selectionState, openLinkDialog), [selectionState, openLinkDialog]);
+  const handleSlashSelect = useCallback(id => {
+    send({
+      type: "runSlashCommand",
+      commandId: id
+    });
+    if (id === "image") insertImage();
+  }, [send, insertImage]);
+  const containerHeight = isEmbedded ? contentHeight : undefined;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [isEmbedded ? styles.containerEmbedded : styles.container, isEmbedded ? {
+      height: containerHeight
+    } : null, backgroundColor ? {
+      backgroundColor
+    } : null],
+    children: [toolbar && /*#__PURE__*/_jsx(NoteEditorToolbar, {
+      groups: toolbarGroups,
+      state: selectionState,
+      onCommand: runToolbarCommand,
+      onImagePress: onImageUpload ? insertImage : undefined
+    }), /*#__PURE__*/_jsx(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__*/_jsxs(View, {
+      style: {
+        flex: isEmbedded ? undefined : 1
+      },
+      children: [/*#__PURE__*/_jsx(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: 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: Platform.OS === "android" ? "hardware" : undefined,
+        style: [styles.webView, isEmbedded ? {
+          flex: undefined,
+          height: containerHeight
+        } : null, backgroundColor ? {
+          backgroundColor
+        } : null]
+      }), slashState.active && slashState.caret ? /*#__PURE__*/_jsx(NoteEditorSlashMenu, {
+        slash: slashState,
+        canUploadImage: Boolean(onImageUpload),
+        onSelect: handleSlashSelect
+      }) : null]
+    }), /*#__PURE__*/_jsx(Dialog, {
+      open: linkDialogOpen,
+      onOpenChange: setLinkDialogOpen,
+      children: /*#__PURE__*/_jsxs(DialogContainer, {
+        children: [/*#__PURE__*/_jsx(DialogHeader, {
+          children: /*#__PURE__*/_jsx(DialogTitle, {
+            children: "Inserir link"
+          })
+        }), /*#__PURE__*/_jsx(DialogContent, {
+          children: /*#__PURE__*/_jsx(Input, {
+            value: linkValue,
+            onChangeText: setLinkValue,
+            placeholder: "https://",
+            label: "URL",
+            autoCapitalize: "none",
+            autoCorrect: false,
+            keyboardType: "url"
+          })
+        }), /*#__PURE__*/_jsx(DialogFooter, {
+          children: /*#__PURE__*/_jsx(Button, {
+            onPress: confirmLink,
+            children: "Confirmar"
+          })
+        })]
+      })
+    })]
+  });
+});
+NoteEditor.displayName = "NoteEditor";
+function NoteEditorToolbar({
+  groups,
+  state,
+  onCommand,
+  onImagePress
+}) {
+  const iconColor = useThemeColor("gray-foreground");
+  const activeIconColor = useThemeColor("primary-foreground");
+  return /*#__PURE__*/_jsxs(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__*/_jsxs(View, {
+      className: "flex-row items-center gap-0.5",
+      children: [groupIndex > 0 ? /*#__PURE__*/_jsx(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__*/_jsx(Pressable, {
+          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"),
+          children: /*#__PURE__*/_jsx(Icon, {
+            width: 16,
+            height: 16,
+            color: active ? activeIconColor : iconColor
+          })
+        }, item.id);
+      })]
+    }, groupIndex)), onImagePress ? /*#__PURE__*/_jsxs(View, {
+      className: "flex-row items-center gap-0.5",
+      children: [/*#__PURE__*/_jsx(View, {
+        className: "mx-1 h-5 w-px bg-gray-stroke-muted"
+      }), /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Inserir imagem",
+        onPress: onImagePress,
+        className: "h-8 w-8 items-center justify-center rounded-md",
+        children: /*#__PURE__*/_jsx(ImageIcon, {
+          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__*/_jsx(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__*/_jsx(Text, {
+      className: "px-3 py-2 text-gray-foreground-muted",
+      children: "Nenhum resultado"
+    }) : commandIds.map(id => {
+      const command = getSlashCommand(id);
+      if (!command) return null;
+      return /*#__PURE__*/_jsxs(Pressable, {
+        accessibilityRole: "button",
+        onPress: () => onSelect(id),
+        className: "rounded-sm px-3 py-1.5 active:bg-secondary-background-soft-emphasis",
+        children: [/*#__PURE__*/_jsx(Text, {
+          className: "font-medium text-gray-foreground",
+          children: command.label
+        }), /*#__PURE__*/_jsx(Text, {
+          className: "text-xs text-gray-foreground-muted",
+          children: command.description
+        })]
+      }, id);
+    })
+  });
+}
+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 /*#__PURE__*/memo(NoteEditor);
+//# sourceMappingURL=NoteEditor.js.map