@openeditor/native 0.0.33 → 0.0.35

package/dist/toolbar-host.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BottomSheet as UniversalBottomSheet, Button as NativeButton, Column as NativeColumn, ListItem as NativeListItem, RNHostView as NativeRNHostView, Row as NativeRow, ScrollView as NativeScrollView, Spacer as NativeSpacer, Text as NativeText, } from "@expo/ui";
+import { BottomSheet as SwiftUIBottomSheet, Group as SwiftUIGroup, Host as SwiftUIHost, } from "@expo/ui/swift-ui";
+import { accessibilityLabel as nativeAccessibilityLabel, frame as nativeFrame, glassEffect, padding as nativePadding, presentationDetents, presentationDragIndicator, } from "@expo/ui/swift-ui/modifiers";
+import { openEditorIcons } from "@openeditor/icons";
+import { HugeiconsIcon } from "@hugeicons/react-native";
+import { memo, useRef, useState } from "react";
+import { Keyboard, Modal, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native";
+import { defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, openEditorNativeTableToolbarItems, } from "./toolbar-items.js";
+export { defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, } from "./toolbar-items.js";
+const isItemActive = (item, state) => (item.activeWhen?.block !== undefined &&
+    state.activeNodes.includes(item.activeWhen.block) &&
+    (item.activeWhen?.headingLevel === undefined ||
+        state.headingLevel === item.activeWhen.headingLevel)) ||
+    (item.activeWhen?.mark !== undefined &&
+        state.activeMarks.includes(item.activeWhen.mark)) ||
+    (item.activeWhen?.table !== undefined &&
+        state.table?.[item.activeWhen.table] === true);
+const isItemDisabled = (item, state) => !state.editable ||
+    (item.disabledWhen === "cannotUndo" && !state.canUndo) ||
+    (item.disabledWhen === "cannotRedo" && !state.canRedo) ||
+    (item.disabledWhen === "cannotMergeCells" && !state.table?.canMergeCells);
+const TOOLBAR_BUTTON_SIZE = 32;
+const IOS_BLOCK_PICKER_PRESENTATION_MODIFIERS = [
+    nativeFrame({ alignment: "topLeading", maxWidth: Infinity }),
+    nativePadding({ leading: 16, top: 16, trailing: 16 }),
+    presentationDragIndicator("visible"),
+    presentationDetents(["medium", "large"]),
+];
+/**
+ * Expo's universal wrapper maps `onDismiss` to the binding-change event on
+ * iOS, losing SwiftUI's actual post-animation dismissal callback. Editor
+ * commands need that real lifecycle boundary so focus-owning native effects do
+ * not race the outgoing sheet.
+ */
+const NativeBlockPickerSheet = ({ children, isPresented, onDismiss, onIsPresentedChange, }) => {
+    if (Platform.OS !== "ios") {
+        return (_jsx(UniversalBottomSheet, { isPresented: isPresented, onDismiss: onDismiss, showDragIndicator: true, snapPoints: ["half", "full"], testID: "openeditor-block-picker", children: children }));
+    }
+    return (_jsx(SwiftUIHost, { pointerEvents: "none", style: { position: "absolute" }, children: _jsx(SwiftUIBottomSheet, { isPresented: isPresented, onDismiss: onDismiss, onIsPresentedChange: onIsPresentedChange, testID: "openeditor-block-picker", children: _jsx(SwiftUIGroup, { modifiers: IOS_BLOCK_PICKER_PRESENTATION_MODIFIERS, children: children }) }) }));
+};
+export const OpenEditorNativeToolbar = memo(function OpenEditorNativeToolbar({ availableNativeEffects = [], controller, state, items = defaultOpenEditorNativeToolbarItems, theme, style, onCommandError, visible = true, blockHandlesVisible = false, onBlockHandlesVisibleChange, }) {
+    const [blockPickerOpen, setBlockPickerOpen] = useState(false);
+    const [linkEditorOpen, setLinkEditorOpen] = useState(false);
+    const [linkValue, setLinkValue] = useState("");
+    const pendingBlockRef = useRef(null);
+    const pickerSelectionRef = useRef(undefined);
+    const runCommand = (command) => {
+        void command.catch((cause) => {
+            onCommandError?.(cause instanceof Error
+                ? cause
+                : new Error("OpenEditor command failed."));
+        });
+    };
+    const colors = {
+        background: theme?.surface ?? "#ffffff",
+        border: theme?.border ?? "#e5e7eb",
+        text: theme?.text ?? "#171717",
+        muted: theme?.muted ?? "#737373",
+        accent: theme?.accent ?? "#171717",
+        accentText: theme?.accentText ?? "#ffffff",
+    };
+    const blockPickerItems = openEditorNativeBlockPickerItems.filter((item) => {
+        if (item.key === "image")
+            return availableNativeEffects.includes("pickImage");
+        if (item.key === "attachment")
+            return availableNativeEffects.includes("pickAttachment");
+        if (item.key === "page")
+            return availableNativeEffects.includes("createPage");
+        return true;
+    });
+    const blockPickerGroups = blockPickerItems.reduce((groups, item) => {
+        const current = groups.at(-1);
+        if (current?.label === item.group)
+            current.items.push(item);
+        else
+            groups.push({ label: item.group, items: [item] });
+        return groups;
+    }, []);
+    const visibleToolbarItems = state.activeNodes.includes("table")
+        ? [
+            ...defaultOpenEditorNativeToolbarItems.filter((item) => item.action === "toggleBlockHandles"),
+            ...openEditorNativeTableToolbarItems.filter((item) => item.key === "table-split-cell"
+                ? state.table?.canSplitCell
+                : item.key !== "table-merge-cells" || !state.table?.canSplitCell),
+        ]
+        : items;
+    return (_jsxs(_Fragment, { children: [visible ? (_jsx(View, { style: [styles.root, style], children: _jsx(ScrollView, { contentContainerStyle: styles.content, horizontal: true, keyboardShouldPersistTaps: "always", showsHorizontalScrollIndicator: false, children: visibleToolbarItems.map((item) => {
+                        const active = item.action === "toggleBlockHandles"
+                            ? blockHandlesVisible
+                            : isItemActive(item, state);
+                        const disabled = isItemDisabled(item, state);
+                        const accessibilityLabel = item.action === "toggleBlockHandles" && blockHandlesVisible
+                            ? "Hide block handles"
+                            : item.label;
+                        return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", accessibilityState: { disabled, selected: active }, disabled: disabled, hitSlop: 6, onPress: () => {
+                                if (item.action === "toggleBlockHandles") {
+                                    onBlockHandlesVisibleChange?.(!blockHandlesVisible);
+                                    return;
+                                }
+                                if (item.action === "openBlockPicker") {
+                                    pickerSelectionRef.current =
+                                        state.selection.type === "text"
+                                            ? {
+                                                anchor: state.selection.anchor,
+                                                head: state.selection.head,
+                                            }
+                                            : undefined;
+                                    setBlockPickerOpen(true);
+                                    return;
+                                }
+                                if (item.action === "openLinkEditor") {
+                                    setLinkValue("");
+                                    setLinkEditorOpen(true);
+                                    return;
+                                }
+                                if (!item.command) {
+                                    Keyboard.dismiss();
+                                    runCommand(controller.blur());
+                                    return;
+                                }
+                                runCommand(controller.command(item.command));
+                            }, style: ({ pressed }) => [
+                                styles.button,
+                                active && { backgroundColor: colors.accent },
+                                pressed && styles.pressed,
+                                disabled && styles.disabled,
+                            ], children: _jsx(HugeiconsIcon, { accessible: false, color: active
+                                    ? colors.accentText
+                                    : disabled
+                                        ? colors.muted
+                                        : colors.text, icon: openEditorIcons[item.icon], size: 20, strokeWidth: 1.8 }) }, item.key));
+                    }) }) })) : null, _jsx(NativeBlockPickerSheet, { isPresented: blockPickerOpen, onDismiss: () => {
+                    const block = pendingBlockRef.current;
+                    pendingBlockRef.current = null;
+                    pickerSelectionRef.current = undefined;
+                    if (block) {
+                        runCommand(controller.command(block).then(() => controller.focus()));
+                    }
+                }, onIsPresentedChange: setBlockPickerOpen, children: _jsxs(NativeColumn, { alignment: "start", spacing: 0, style: { height: "100%", width: "100%" }, children: [_jsxs(NativeRow, { alignment: "center", spacing: 8, style: { paddingBottom: 10, width: "100%" }, children: [_jsx(NativeButton, { modifiers: Platform.OS === "ios"
+                                        ? [
+                                            nativeAccessibilityLabel("Cancel"),
+                                            glassEffect({
+                                                glass: { interactive: true, variant: "clear" },
+                                                shape: "circle",
+                                            }),
+                                        ]
+                                        : undefined, onPress: () => setBlockPickerOpen(false), style: { borderRadius: 18, height: 36, width: 36 }, testID: "close-block-picker", variant: "text", children: _jsx(NativeRNHostView, { matchContents: true, children: _jsx(View, { style: { height: 18, width: 18 }, children: _jsx(HugeiconsIcon, { accessible: false, color: colors.text, icon: openEditorIcons.close, size: 18, strokeWidth: 1.8 }) }) }) }), _jsx(NativeSpacer, { flexible: true }), _jsx(NativeText, { testID: "block-picker-title", textStyle: { fontSize: 17, fontWeight: "600" }, children: "Insert block" }), _jsx(NativeSpacer, { flexible: true }), _jsx(NativeButton, { modifiers: Platform.OS === "ios"
+                                        ? [
+                                            nativeAccessibilityLabel("Done"),
+                                            glassEffect({
+                                                glass: { interactive: true, variant: "clear" },
+                                                shape: "circle",
+                                            }),
+                                        ]
+                                        : undefined, onPress: () => setBlockPickerOpen(false), style: { borderRadius: 18, height: 36, width: 36 }, testID: "done-block-picker", variant: "text", children: _jsx(NativeRNHostView, { matchContents: true, children: _jsx(View, { style: { height: 18, width: 18 }, children: _jsx(HugeiconsIcon, { accessible: false, color: colors.text, icon: openEditorIcons.check, size: 18, strokeWidth: 1.8 }) }) }) })] }), _jsx(NativeScrollView, { showsIndicators: true, style: { height: "100%", width: "100%" }, children: _jsx(NativeColumn, { alignment: "start", spacing: 20, style: { width: "100%" }, children: blockPickerGroups.map((group) => (_jsxs(NativeColumn, { alignment: "start", spacing: 4, style: { width: "100%" }, children: [_jsx(NativeText, { textStyle: {
+                                                color: colors.muted,
+                                                fontSize: 12,
+                                                fontWeight: "600",
+                                            }, children: group.label }), group.items.map((item) => (_jsx(NativeListItem, { leading: (_jsx(HugeiconsIcon, { accessible: false, color: colors.text, icon: openEditorIcons[item.icon], size: 20, strokeWidth: 1.8 })), modifiers: Platform.OS === "ios"
+                                                ? [nativePadding({ vertical: 10 })]
+                                                : undefined, onPress: () => {
+                                                pendingBlockRef.current = {
+                                                    type: "insertBlock",
+                                                    block: item.key,
+                                                    selection: pickerSelectionRef.current,
+                                                };
+                                                setBlockPickerOpen(false);
+                                            }, testID: `insert-${item.key}`, trailing: (_jsx(HugeiconsIcon, { accessible: false, color: colors.muted, icon: openEditorIcons.chevronRight, size: 16, strokeWidth: 1.8 })), children: _jsx(NativeText, { children: item.label }, `${item.key}-label`) }, item.key)))] }, group.label))) }) })] }) }), _jsx(Modal, { animationType: "fade", onRequestClose: () => setLinkEditorOpen(false), presentationStyle: "formSheet", visible: linkEditorOpen, children: _jsxs(View, { style: [styles.linkSheet, { backgroundColor: colors.background }], children: [_jsx(Text, { accessibilityRole: "header", style: [styles.sheetTitle, { color: colors.text }], children: "Edit link" }), _jsx(TextInput, { accessibilityLabel: "Link URL", autoCapitalize: "none", autoCorrect: false, onChangeText: setLinkValue, placeholder: "https://example.com", placeholderTextColor: colors.muted, style: [
+                                styles.linkInput,
+                                { borderColor: colors.border, color: colors.text },
+                            ], value: linkValue }), _jsxs(View, { style: styles.linkActions, children: [_jsx(Pressable, { accessibilityLabel: "Cancel link editing", accessibilityRole: "button", onPress: () => setLinkEditorOpen(false), style: styles.linkAction, children: _jsx(Text, { style: { color: colors.text }, children: "Cancel" }) }), _jsx(Pressable, { accessibilityLabel: "Remove", accessibilityRole: "button", onPress: () => {
+                                        setLinkEditorOpen(false);
+                                        runCommand(controller.command({ type: "setLink", href: null }));
+                                    }, style: styles.linkAction, children: _jsx(Text, { style: { color: colors.text }, children: "Remove" }) }), _jsx(Pressable, { accessibilityLabel: "Apply", accessibilityRole: "button", disabled: !linkValue.trim(), onPress: () => {
+                                        const href = linkValue.trim();
+                                        setLinkEditorOpen(false);
+                                        runCommand(controller.command({ type: "setLink", href }));
+                                    }, style: [styles.linkAction, !linkValue.trim() && styles.disabled], children: _jsx(Text, { style: { color: colors.accent }, children: "Apply" }) })] })] }) })] }));
+});
+const styles = StyleSheet.create({
+    root: {
+        minHeight: 46,
+    },
+    content: {
+        alignItems: "center",
+        gap: 6,
+        paddingHorizontal: 8,
+        paddingVertical: 7,
+    },
+    button: {
+        alignItems: "center",
+        borderRadius: TOOLBAR_BUTTON_SIZE / 2,
+        height: TOOLBAR_BUTTON_SIZE,
+        justifyContent: "center",
+        width: TOOLBAR_BUTTON_SIZE,
+    },
+    pressed: { opacity: 0.64 },
+    disabled: { opacity: 0.42 },
+    sheetTitle: { fontSize: 18, fontWeight: "700" },
+    linkSheet: { flex: 1, gap: 20, justifyContent: "center", padding: 24 },
+    linkInput: {
+        borderRadius: 10,
+        borderWidth: 1,
+        fontSize: 16,
+        minHeight: 48,
+        paddingHorizontal: 14,
+    },
+    linkActions: { flexDirection: "row", justifyContent: "flex-end", gap: 18 },
+    linkAction: { minHeight: 44, justifyContent: "center", paddingHorizontal: 4 },
+});

package/dist/toolbar-items.d.ts

@@ -0,0 +1,109 @@
+import type { OpenEditorRuntimeCommand } from "@openeditor/embedded-runtime";
+import type { OpenEditorIconName } from "@openeditor/icons";
+export type OpenEditorNativeToolbarItem = {
+    key: string;
+    label: string;
+    icon: OpenEditorIconName;
+    command?: OpenEditorRuntimeCommand;
+    action?: "openBlockPicker" | "openLinkEditor" | "toggleBlockHandles" | "dismissKeyboard";
+    activeWhen?: {
+        block?: string;
+        headingLevel?: number;
+        mark?: string;
+        table?: "headerRow" | "headerColumn";
+    };
+    disabledWhen?: "cannotUndo" | "cannotRedo" | "cannotMergeCells";
+};
+export declare const defaultOpenEditorNativeToolbarItems: readonly OpenEditorNativeToolbarItem[];
+export declare const openEditorNativeBlockPickerItems: readonly [{
+    readonly key: "paragraph";
+    readonly label: "Text";
+    readonly group: "Text";
+    readonly icon: "text";
+}, {
+    readonly key: "heading1";
+    readonly label: "Heading 1";
+    readonly group: "Text";
+    readonly icon: "heading1";
+}, {
+    readonly key: "heading2";
+    readonly label: "Heading 2";
+    readonly group: "Text";
+    readonly icon: "heading2";
+}, {
+    readonly key: "heading3";
+    readonly label: "Heading 3";
+    readonly group: "Text";
+    readonly icon: "heading3";
+}, {
+    readonly key: "bulletList";
+    readonly label: "Bullet list";
+    readonly group: "Text";
+    readonly icon: "bulletList";
+}, {
+    readonly key: "orderedList";
+    readonly label: "Numbered list";
+    readonly group: "Text";
+    readonly icon: "orderedList";
+}, {
+    readonly key: "taskList";
+    readonly label: "Task list";
+    readonly group: "Text";
+    readonly icon: "taskList";
+}, {
+    readonly key: "toggleList";
+    readonly label: "Toggle list";
+    readonly group: "Text";
+    readonly icon: "toggleList";
+}, {
+    readonly key: "blockquote";
+    readonly label: "Quote";
+    readonly group: "Text";
+    readonly icon: "blockquote";
+}, {
+    readonly key: "codeBlock";
+    readonly label: "Code block";
+    readonly group: "Text";
+    readonly icon: "codeBlock";
+}, {
+    readonly key: "divider";
+    readonly label: "Divider";
+    readonly group: "Structure";
+    readonly icon: "divider";
+}, {
+    readonly key: "columns";
+    readonly label: "Columns";
+    readonly group: "Layout";
+    readonly icon: "columns";
+}, {
+    readonly key: "table";
+    readonly label: "Table";
+    readonly group: "Layout";
+    readonly icon: "table";
+}, {
+    readonly key: "callout";
+    readonly label: "Callout";
+    readonly group: "Embed";
+    readonly icon: "callout";
+}, {
+    readonly key: "diagram";
+    readonly label: "Diagram";
+    readonly group: "Embed";
+    readonly icon: "diagram";
+}, {
+    readonly key: "page";
+    readonly label: "Page";
+    readonly group: "Embed";
+    readonly icon: "page";
+}, {
+    readonly key: "image";
+    readonly label: "Image";
+    readonly group: "Media";
+    readonly icon: "image";
+}, {
+    readonly key: "attachment";
+    readonly label: "File";
+    readonly group: "Media";
+    readonly icon: "attachment";
+}];
+export declare const openEditorNativeTableToolbarItems: readonly OpenEditorNativeToolbarItem[];

package/dist/toolbar-items.js

@@ -0,0 +1,57 @@
+export const defaultOpenEditorNativeToolbarItems = [
+    { key: "insert", label: "Insert block", icon: "addBlock", action: "openBlockPicker" },
+    { key: "handles", label: "Show block handles", icon: "dragHandle", action: "toggleBlockHandles" },
+    { key: "paragraph", label: "Text", icon: "text", command: { type: "setParagraph" }, activeWhen: { block: "paragraph" } },
+    { key: "heading-1", label: "Heading 1", icon: "heading1", command: { type: "toggleHeading", level: 1 }, activeWhen: { block: "heading", headingLevel: 1 } },
+    { key: "heading-2", label: "Heading 2", icon: "heading2", command: { type: "toggleHeading", level: 2 }, activeWhen: { block: "heading", headingLevel: 2 } },
+    { key: "bold", label: "Bold", icon: "bold", command: { type: "toggleMark", mark: "bold" }, activeWhen: { mark: "bold" } },
+    { key: "italic", label: "Italic", icon: "italic", command: { type: "toggleMark", mark: "italic" }, activeWhen: { mark: "italic" } },
+    { key: "underline", label: "Underline", icon: "underline", command: { type: "toggleMark", mark: "underline" }, activeWhen: { mark: "underline" } },
+    { key: "strike", label: "Strikethrough", icon: "strike", command: { type: "toggleMark", mark: "strike" }, activeWhen: { mark: "strike" } },
+    { key: "code", label: "Inline code", icon: "code", command: { type: "toggleMark", mark: "code" }, activeWhen: { mark: "code" } },
+    { key: "link", label: "Link", icon: "link", action: "openLinkEditor", activeWhen: { mark: "link" } },
+    { key: "bullet-list", label: "Bullet list", icon: "bulletList", command: { type: "toggleList", list: "bullet" }, activeWhen: { block: "bulletList" } },
+    { key: "ordered-list", label: "Numbered list", icon: "orderedList", command: { type: "toggleList", list: "ordered" }, activeWhen: { block: "orderedList" } },
+    { key: "task-list", label: "Task list", icon: "taskList", command: { type: "toggleList", list: "task" }, activeWhen: { block: "taskList" } },
+    { key: "quote", label: "Quote", icon: "blockquote", command: { type: "toggleBlockquote" }, activeWhen: { block: "blockquote" } },
+    { key: "code-block", label: "Code block", icon: "codeBlock", command: { type: "toggleCodeBlock" }, activeWhen: { block: "codeBlock" } },
+    { key: "undo", label: "Undo", icon: "undo", command: { type: "undo" }, disabledWhen: "cannotUndo" },
+    { key: "redo", label: "Redo", icon: "redo", command: { type: "redo" }, disabledWhen: "cannotRedo" },
+    { key: "keyboard", label: "Dismiss keyboard", icon: "keyboard", action: "dismissKeyboard" },
+];
+export const openEditorNativeBlockPickerItems = [
+    { key: "paragraph", label: "Text", group: "Text", icon: "text" },
+    { key: "heading1", label: "Heading 1", group: "Text", icon: "heading1" },
+    { key: "heading2", label: "Heading 2", group: "Text", icon: "heading2" },
+    { key: "heading3", label: "Heading 3", group: "Text", icon: "heading3" },
+    { key: "bulletList", label: "Bullet list", group: "Text", icon: "bulletList" },
+    { key: "orderedList", label: "Numbered list", group: "Text", icon: "orderedList" },
+    { key: "taskList", label: "Task list", group: "Text", icon: "taskList" },
+    { key: "toggleList", label: "Toggle list", group: "Text", icon: "toggleList" },
+    { key: "blockquote", label: "Quote", group: "Text", icon: "blockquote" },
+    { key: "codeBlock", label: "Code block", group: "Text", icon: "codeBlock" },
+    { key: "divider", label: "Divider", group: "Structure", icon: "divider" },
+    { key: "columns", label: "Columns", group: "Layout", icon: "columns" },
+    { key: "table", label: "Table", group: "Layout", icon: "table" },
+    { key: "callout", label: "Callout", group: "Embed", icon: "callout" },
+    { key: "diagram", label: "Diagram", group: "Embed", icon: "diagram" },
+    { key: "page", label: "Page", group: "Embed", icon: "page" },
+    { key: "image", label: "Image", group: "Media", icon: "image" },
+    { key: "attachment", label: "File", group: "Media", icon: "attachment" },
+];
+export const openEditorNativeTableToolbarItems = [
+    { key: "table-row-before", label: "Insert row above", icon: "tableRowInsertBefore", command: { type: "addTableRow", after: false } },
+    { key: "table-row-after", label: "Insert row below", icon: "tableRowInsertAfter", command: { type: "addTableRow" } },
+    { key: "table-delete-row", label: "Delete row", icon: "tableRowDelete", command: { type: "deleteTableRow" } },
+    { key: "table-column-before", label: "Insert column left", icon: "tableColumnInsertBefore", command: { type: "addTableColumn", after: false } },
+    { key: "table-column-after", label: "Insert column right", icon: "tableColumnInsertAfter", command: { type: "addTableColumn" } },
+    { key: "table-delete-column", label: "Delete column", icon: "tableColumnDelete", command: { type: "deleteTableColumn" } },
+    { key: "table-header-row", label: "Toggle header row", icon: "tableHeaderRow", command: { type: "toggleTableHeaderRow" }, activeWhen: { table: "headerRow" } },
+    { key: "table-header-column", label: "Toggle header column", icon: "tableHeaderColumn", command: { type: "toggleTableHeaderColumn" }, activeWhen: { table: "headerColumn" } },
+    { key: "table-merge-cells", label: "Merge selected cells", icon: "mergeCells", command: { type: "mergeTableCells" }, disabledWhen: "cannotMergeCells" },
+    { key: "table-split-cell", label: "Split cell", icon: "splitCells", command: { type: "splitTableCell" } },
+    { key: "table-delete", label: "Delete table", icon: "delete", command: { type: "deleteTable" } },
+    { key: "table-undo", label: "Undo", icon: "undo", command: { type: "undo" }, disabledWhen: "cannotUndo" },
+    { key: "table-redo", label: "Redo", icon: "redo", command: { type: "redo" }, disabledWhen: "cannotRedo" },
+    { key: "table-keyboard", label: "Dismiss keyboard", icon: "keyboard", action: "dismissKeyboard" },
+];

package/dist/toolbar-surface.d.ts

@@ -0,0 +1,17 @@
+import { type GlassColorScheme } from "expo-glass-effect";
+import type { ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import type { OpenEditorNativeTheme } from "./native-editor.js";
+export type OpenEditorNativeToolbarSurfaceProps = {
+    active?: boolean;
+    children: ReactNode;
+    colorScheme?: GlassColorScheme;
+    style?: StyleProp<ViewStyle>;
+    theme?: OpenEditorNativeTheme;
+};
+/**
+ * The platform material surrounding OpenEditor's keyboard toolbar.
+ * iOS uses the system glass implementation when available; other runtimes
+ * receive the same geometry with a theme-aware opaque fallback.
+ */
+export declare function OpenEditorNativeToolbarSurface({ active, children, colorScheme, style, theme, }: OpenEditorNativeToolbarSurfaceProps): import("react").JSX.Element;

package/dist/toolbar-surface.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GlassView, isGlassEffectAPIAvailable, } from "expo-glass-effect";
+import { Platform, StyleSheet, View, } from "react-native";
+import { OPENEDITOR_NATIVE_TOOLBAR_HEIGHT, OPENEDITOR_NATIVE_TOOLBAR_RADIUS, } from "./native-layout.js";
+/**
+ * The platform material surrounding OpenEditor's keyboard toolbar.
+ * iOS uses the system glass implementation when available; other runtimes
+ * receive the same geometry with a theme-aware opaque fallback.
+ */
+export function OpenEditorNativeToolbarSurface({ active = true, children, colorScheme = "auto", style, theme, }) {
+    if (Platform.OS === "ios" && isGlassEffectAPIAvailable()) {
+        return (_jsx(GlassView, { colorScheme: colorScheme, glassEffectStyle: active ? "regular" : "none", isInteractive: true, style: [styles.surface, style], children: children }));
+    }
+    return (_jsx(View, { style: [
+            styles.surface,
+            styles.fallback,
+            {
+                backgroundColor: theme?.surfaceRaised ?? theme?.surfaceMuted ?? theme?.surface ?? "#ffffff",
+                borderColor: theme?.border ?? "#e5e7eb",
+            },
+            style,
+        ], children: children }));
+}
+const styles = StyleSheet.create({
+    surface: {
+        borderRadius: OPENEDITOR_NATIVE_TOOLBAR_RADIUS,
+        height: OPENEDITOR_NATIVE_TOOLBAR_HEIGHT,
+        overflow: "hidden",
+    },
+    fallback: {
+        borderWidth: StyleSheet.hairlineWidth,
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeditor/native",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "type": "module",
   "sideEffects": false,
   "repository": {
@@ -15,7 +15,8 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "plugin.cjs"
   ],
   "exports": {
     ".": {
@@ -23,28 +24,26 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./plugin": "./plugin.cjs",
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@expo/ui": "~56.0.18",
-    "@expo/vector-icons": "15.0.3",
-    "@openeditor/core": "0.0.33",
-    "@openeditor/exporters": "0.0.33",
-    "@openeditor/extensions": "0.0.33",
-    "emojibase": "17.0.0",
-    "emojibase-data": "16.0.2",
-    "react": "19.2.3",
-    "react-native": "0.85.3"
+    "@expo/config-plugins": "57.0.6",
+    "@expo/ui": "~57.0.7",
+    "@hugeicons/react-native": "^1.0.15",
+    "@openeditor/core": "0.0.35",
+    "@openeditor/embedded-runtime": "0.0.35",
+    "@openeditor/embedded-surface": "0.0.35",
+    "@openeditor/icons": "0.0.35"
   },
   "peerDependencies": {
-    "@openeditor/react-native-prose-editor": "0.0.33",
-    "react-native-keyboard-controller": ">=1.21",
+    "expo": ">=57",
     "react": ">=19",
-    "react-native": ">=0.85"
-  },
-  "peerDependenciesMeta": {
-    "react-native-keyboard-controller": {
-      "optional": true
-    }
+    "react-native": ">=0.85",
+    "expo-glass-effect": ">=57",
+    "react-native-keyboard-controller": ">=1.21",
+    "react-native-reanimated": ">=3",
+    "react-native-svg": ">=15",
+    "react-native-webview": ">=13"
   }
 }

package/plugin.cjs

@@ -0,0 +1,79 @@
+const { withAppDelegate } = require("@expo/config-plugins");
+
+const WEBKIT_IMPORT = "import WebKit\n";
+const OBSERVER_PROPERTY =
+	"  private var openEditorKeyboardWillShowObserver: NSObjectProtocol?\n";
+const OBSERVER_SETUP = `    openEditorKeyboardWillShowObserver = NotificationCenter.default.addObserver(
+      forName: UIResponder.keyboardWillShowNotification,
+      object: nil,
+      queue: .main
+    ) { [weak self] _ in
+      guard let rootView = self?.window?.rootViewController?.view else { return }
+      self?.enableOpenEditorInteractiveKeyboardDismissal(in: rootView)
+    }
+
+`;
+const DISMISSAL_METHOD = `  deinit {
+    if let openEditorKeyboardWillShowObserver {
+      NotificationCenter.default.removeObserver(openEditorKeyboardWillShowObserver)
+    }
+  }
+
+  private func enableOpenEditorInteractiveKeyboardDismissal(in view: UIView) {
+    if let webView = view as? WKWebView {
+      webView.scrollView.keyboardDismissMode = .interactive
+    }
+    view.subviews.forEach { enableOpenEditorInteractiveKeyboardDismissal(in: $0) }
+  }
+
+`;
+
+const applyOpenEditorKeyboardDismissal = (contents) => {
+	for (const anchor of [
+		"import React\n",
+		"class AppDelegate: ExpoAppDelegate {\n",
+		"    return super.application(application, didFinishLaunchingWithOptions: launchOptions)\n",
+		"  // Linking API\n",
+	]) {
+		if (!contents.includes(anchor)) {
+			throw new Error(
+				`OpenEditor's Expo plugin could not find ${JSON.stringify(anchor)} in AppDelegate.swift.`,
+			);
+		}
+	}
+
+	let next = contents;
+	if (!next.includes("import WebKit")) {
+		next = next.replace("import React\n", `import React\n${WEBKIT_IMPORT}`);
+	}
+	if (!next.includes("openEditorKeyboardWillShowObserver")) {
+		next = next.replace(
+			"class AppDelegate: ExpoAppDelegate {\n",
+			`class AppDelegate: ExpoAppDelegate {\n${OBSERVER_PROPERTY}`,
+		);
+		next = next.replace(
+			"    return super.application(application, didFinishLaunchingWithOptions: launchOptions)\n",
+			`${OBSERVER_SETUP}    return super.application(application, didFinishLaunchingWithOptions: launchOptions)\n`,
+		);
+		next = next.replace(
+			"  // Linking API\n",
+			`${DISMISSAL_METHOD}  // Linking API\n`,
+		);
+	}
+	return next;
+};
+
+const withOpenEditorNative = (config) =>
+	withAppDelegate(config, (mod) => {
+		if (mod.modResults.language !== "swift") {
+			throw new Error("OpenEditor's Expo plugin requires a Swift AppDelegate.");
+		}
+		mod.modResults.contents = applyOpenEditorKeyboardDismissal(
+			mod.modResults.contents,
+		);
+		return mod;
+	});
+
+module.exports = withOpenEditorNative;
+module.exports.applyOpenEditorKeyboardDismissal =
+	applyOpenEditorKeyboardDismissal;

package/dist/document.d.ts

@@ -1,7 +0,0 @@
-import { type OpenEditorDocument, type OpenEditorDocumentMeta, type ProseMirrorDocument, type ProseMirrorNode } from "@openeditor/core";
-export declare const sanitizeNativeEditorDocument: (document: OpenEditorDocument, meta?: OpenEditorDocumentMeta | undefined) => OpenEditorDocument;
-export declare const toNativeEditorNode: (node: ProseMirrorNode) => ProseMirrorNode;
-export declare const fromNativeEditorNode: (node: ProseMirrorNode) => ProseMirrorNode;
-export declare const toNativeEditorDocument: (document: OpenEditorDocument) => ProseMirrorDocument;
-export declare const fromNativeEditorDocument: (document: ProseMirrorDocument, meta?: OpenEditorDocumentMeta) => OpenEditorDocument;
-export declare const createNativeEditorDocument: (content: ProseMirrorNode[], meta?: OpenEditorDocumentMeta) => ProseMirrorDocument;