@openeditor/native 0.0.36 → 0.0.38

package/README.md

@@ -26,18 +26,10 @@ Install the native peer dependencies:
 pnpm add expo-glass-effect react-native-keyboard-controller react-native-reanimated react-native-svg react-native-webview
 ```
 
-For Expo, install the SDK plugin so iOS WebViews receive interactive keyboard
-dismissal:
-
-```json
-{
-  "expo": {
-    "plugins": ["@openeditor/native/plugin"]
-  }
-}
-```
-
-Rebuild the native application after adding the plugin or a native dependency.
+The package includes an Expo native module that scopes interactive iOS keyboard
+dismissal to the editor's own WebView. Expo autolinking discovers it; no config
+plugin or AppDelegate mutation is required. Rebuild the native application after
+adding the package or changing native dependencies.
 Mount the SDK provider once at the app root:
 
 ```tsx

package/dist/native-editor.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { openEditorEmbeddedSurfaceHtml } from "@openeditor/embedded-surface/html";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
-import { Keyboard, Platform, StyleSheet, useColorScheme, View, } from "react-native";
+import { Keyboard, findNodeHandle, Platform, StyleSheet, useColorScheme, View, } from "react-native";
 import { KeyboardStickyView } from "react-native-keyboard-controller";
 import { WebView, } from "react-native-webview";
 import { emptyOpenEditorNativeState, isOpenEditorNativeLifecycleCancellation, OpenEditorNativeBridge, } from "./controller.js";
@@ -9,6 +9,7 @@ import { OpenEditorNativeToolbar, } from "./toolbar-host.js";
 import { OpenEditorNativeToolbarSurface } from "./toolbar-surface.js";
 import { OPENEDITOR_NATIVE_TOOLBAR_OFFSET, OPENEDITOR_NATIVE_TOOLBAR_CONTENT_INSET, OPENEDITOR_NATIVE_TOOLBAR_HEIGHT, OPENEDITOR_NATIVE_TOOLBAR_RADIUS, resolveOpenEditorNativeContentInsets, } from "./native-layout.js";
 import { resolveOpenEditorNativeTheme } from "./theme.js";
+import { setOpenEditorInteractiveKeyboardDismissal } from "./native-module.js";
 const DEFAULT_INSETS = { top: 0, right: 16, bottom: 0, left: 16 };
 const HostWebView = WebView;
 export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDocument, page, editable = true, placeholder = "Start writing…", theme, contentInsets = DEFAULT_INSETS, showToolbar = true, toolbarItems, renderToolbar, nativeEffects, onDocumentChanged, onReady, onError, toolbarContentInset = OPENEDITOR_NATIVE_TOOLBAR_CONTENT_INSET, toolbarOffset = OPENEDITOR_NATIVE_TOOLBAR_OFFSET, toolbarColorScheme, toolbarContainerStyle, style, webViewProps, }, forwardedRef) {
@@ -17,6 +18,12 @@ export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDo
     const resolvedTheme = useMemo(() => resolveOpenEditorNativeTheme(theme, resolvedColorScheme), [resolvedColorScheme, theme]);
     const resolvedToolbarColorScheme = toolbarColorScheme ?? resolvedColorScheme;
     const webViewRef = useRef(null);
+    const webViewHostRef = useRef(null);
+    const configureInteractiveKeyboardDismissal = useCallback(() => {
+        if (Platform.OS !== "ios")
+            return;
+        setOpenEditorInteractiveKeyboardDismissal(findNodeHandle(webViewHostRef.current));
+    }, []);
     const sessionIdRef = useRef(`native_${Date.now().toString(36)}_${Math.random().toString(36).slice(2)}`);
     const callbacksRef = useRef({
         nativeEffects,
@@ -174,10 +181,13 @@ export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDo
             styles.host,
             { backgroundColor: resolvedTheme.surface },
             style,
-        ], children: [_jsx(View, { style: styles.webViewContainer, children: _jsx(HostWebView, { ...webViewProps, allowsBackForwardNavigationGestures: false, bounces: webViewProps?.bounces ?? true, injectedJavaScriptBeforeContentLoaded: injectedConfig, javaScriptEnabled: true, hideKeyboardAccessoryView: webViewProps?.hideKeyboardAccessoryView ?? true, nestedScrollEnabled: true, onLoadStart: (event) => {
+        ], children: [_jsx(View, { ref: webViewHostRef, style: styles.webViewContainer, children: _jsx(HostWebView, { ...webViewProps, allowsBackForwardNavigationGestures: false, bounces: webViewProps?.bounces ?? true, injectedJavaScriptBeforeContentLoaded: injectedConfig, javaScriptEnabled: true, hideKeyboardAccessoryView: webViewProps?.hideKeyboardAccessoryView ?? true, nestedScrollEnabled: true, onLoadStart: (event) => {
                         initializedRef.current = false;
                         bridge.resetRuntime();
                         webViewProps?.onLoadStart?.(event);
+                    }, onLoad: (event) => {
+                        configureInteractiveKeyboardDismissal();
+                        webViewProps?.onLoad?.(event);
                     }, onContentProcessDidTerminate: (event) => {
                         callbacksRef.current.onError?.(new Error("OpenEditor WebView content process terminated unexpectedly."));
                         webViewProps?.onContentProcessDidTerminate?.(event);

package/dist/native-module.d.ts

@@ -0,0 +1 @@
+export declare const setOpenEditorInteractiveKeyboardDismissal: (viewTag: number | null) => void;

package/dist/native-module.js

@@ -0,0 +1,7 @@
+import { requireOptionalNativeModule } from "expo";
+const nativeModule = requireOptionalNativeModule("OpenEditorNative");
+export const setOpenEditorInteractiveKeyboardDismissal = (viewTag) => {
+    if (viewTag === null || !nativeModule)
+        return;
+    void nativeModule.setInteractiveKeyboardDismissal(viewTag);
+};

package/dist/toolbar-host.js

@@ -4,23 +4,11 @@ import { BottomSheet as SwiftUIBottomSheet, Group as SwiftUIGroup, Host as Swift
 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 { memo, useState } from "react";
 import { Keyboard, Modal, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native";
-import { defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, openEditorNativeTableToolbarItems, } from "./toolbar-items.js";
+import { defaultOpenEditorNativeToolbarItems, } from "./toolbar-items.js";
+import { dismissOpenEditorNativeBlockPicker, EMPTY_OPENEDITOR_NATIVE_BLOCK_PICKER, OPENEDITOR_NATIVE_TOOLBAR_BUTTON_GEOMETRY, openOpenEditorNativeBlockPicker, resolveOpenEditorNativeBlockPickerGroups, resolveOpenEditorNativeToolbarColors, resolveOpenEditorNativeToolbarItemPresentation, resolveOpenEditorNativeToolbarItems, selectOpenEditorNativeBlock, } from "./toolbar-model.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 }),
@@ -40,11 +28,9 @@ const NativeBlockPickerSheet = ({ children, isPresented, onDismiss, onIsPresente
     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 [blockPicker, setBlockPicker] = useState(EMPTY_OPENEDITOR_NATIVE_BLOCK_PICKER);
     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
@@ -52,61 +38,18 @@ export const OpenEditorNativeToolbar = memo(function OpenEditorNativeToolbar({ a
                 : 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;
+    const colors = resolveOpenEditorNativeToolbarColors(theme);
+    const blockPickerGroups = resolveOpenEditorNativeBlockPickerGroups(availableNativeEffects);
+    const visibleToolbarItems = resolveOpenEditorNativeToolbarItems(state, 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;
+                        const { active, disabled, label: accessibilityLabel } = resolveOpenEditorNativeToolbarItemPresentation(item, state, blockHandlesVisible);
                         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);
+                                    setBlockPicker(openOpenEditorNativeBlockPicker(state.selection));
                                     return;
                                 }
                                 if (item.action === "openLinkEditor") {
@@ -130,14 +73,13 @@ export const OpenEditorNativeToolbar = memo(function OpenEditorNativeToolbar({ a
                                     : 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()));
+                    }) }) })) : null, _jsx(NativeBlockPickerSheet, { isPresented: blockPicker.presented, onDismiss: () => {
+                    const result = dismissOpenEditorNativeBlockPicker(blockPicker);
+                    setBlockPicker(result.state);
+                    if (result.command) {
+                        runCommand(controller.command(result.command).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"
+                }, onIsPresentedChange: (presented) => setBlockPicker((current) => ({ ...current, presented })), 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({
@@ -145,7 +87,7 @@ export const OpenEditorNativeToolbar = memo(function OpenEditorNativeToolbar({ a
                                                 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"
+                                        : undefined, onPress: () => setBlockPicker((current) => ({ ...current, presented: 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({
@@ -153,19 +95,14 @@ export const OpenEditorNativeToolbar = memo(function OpenEditorNativeToolbar({ a
                                                 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: {
+                                        : undefined, onPress: () => setBlockPicker((current) => ({ ...current, presented: 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);
+                                                setBlockPicker((current) => selectOpenEditorNativeBlock(current, item.key));
                                             }, 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 },
@@ -190,10 +127,8 @@ const styles = StyleSheet.create({
     },
     button: {
         alignItems: "center",
-        borderRadius: TOOLBAR_BUTTON_SIZE / 2,
-        height: TOOLBAR_BUTTON_SIZE,
+        ...OPENEDITOR_NATIVE_TOOLBAR_BUTTON_GEOMETRY,
         justifyContent: "center",
-        width: TOOLBAR_BUTTON_SIZE,
     },
     pressed: { opacity: 0.64 },
     disabled: { opacity: 0.42 },

package/dist/toolbar-model.d.ts

@@ -0,0 +1,48 @@
+import type { OpenEditorNativeEffectName, OpenEditorRuntimeCommand, OpenEditorRuntimeState } from "@openeditor/embedded-runtime";
+import type { OpenEditorNativeTheme } from "./native-editor.js";
+import { openEditorNativeBlockPickerItems, type OpenEditorNativeToolbarItem } from "./toolbar-items.js";
+export type OpenEditorNativeToolbarColors = {
+    accent: string;
+    accentText: string;
+    background: string;
+    border: string;
+    muted: string;
+    text: string;
+};
+export declare const OPENEDITOR_NATIVE_TOOLBAR_BUTTON_GEOMETRY: {
+    borderRadius: number;
+    height: number;
+    width: number;
+};
+export declare const resolveOpenEditorNativeToolbarColors: (theme?: OpenEditorNativeTheme) => OpenEditorNativeToolbarColors;
+export declare const isOpenEditorNativeToolbarItemActive: (item: OpenEditorNativeToolbarItem, state: OpenEditorRuntimeState) => boolean;
+export declare const isOpenEditorNativeToolbarItemDisabled: (item: OpenEditorNativeToolbarItem, state: OpenEditorRuntimeState) => boolean;
+export declare const resolveOpenEditorNativeToolbarItemPresentation: (item: OpenEditorNativeToolbarItem, state: OpenEditorRuntimeState, blockHandlesVisible: boolean) => {
+    active: boolean;
+    disabled: boolean;
+    label: string;
+};
+export declare const resolveOpenEditorNativeToolbarItems: (state: OpenEditorRuntimeState, items?: readonly OpenEditorNativeToolbarItem[]) => readonly OpenEditorNativeToolbarItem[];
+export declare const resolveOpenEditorNativeBlockPickerGroups: (availableNativeEffects: readonly OpenEditorNativeEffectName[]) => {
+    label: string;
+    items: Array<(typeof openEditorNativeBlockPickerItems)[number]>;
+}[];
+export declare const createOpenEditorNativeBlockInsertion: (block: (typeof openEditorNativeBlockPickerItems)[number]["key"], selection: OpenEditorRuntimeState["selection"]) => Extract<OpenEditorRuntimeCommand, {
+    type: "insertBlock";
+}>;
+export type OpenEditorNativeBlockPickerState = {
+    pending: Extract<OpenEditorRuntimeCommand, {
+        type: "insertBlock";
+    }> | null;
+    presented: boolean;
+    selection: OpenEditorRuntimeState["selection"] | null;
+};
+export declare const EMPTY_OPENEDITOR_NATIVE_BLOCK_PICKER: OpenEditorNativeBlockPickerState;
+export declare const openOpenEditorNativeBlockPicker: (selection: OpenEditorRuntimeState["selection"]) => OpenEditorNativeBlockPickerState;
+export declare const selectOpenEditorNativeBlock: (state: OpenEditorNativeBlockPickerState, block: (typeof openEditorNativeBlockPickerItems)[number]["key"]) => OpenEditorNativeBlockPickerState;
+export declare const dismissOpenEditorNativeBlockPicker: (state: OpenEditorNativeBlockPickerState) => {
+    command: Extract<OpenEditorRuntimeCommand, {
+        type: "insertBlock";
+    }> | null;
+    state: OpenEditorNativeBlockPickerState;
+};

package/dist/toolbar-model.js

@@ -0,0 +1,83 @@
+import { defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, openEditorNativeTableToolbarItems, } from "./toolbar-items.js";
+export const OPENEDITOR_NATIVE_TOOLBAR_BUTTON_GEOMETRY = {
+    borderRadius: 16,
+    height: 32,
+    width: 32,
+};
+export const resolveOpenEditorNativeToolbarColors = (theme) => ({
+    background: theme?.surface ?? "#ffffff",
+    border: theme?.border ?? "#e5e7eb",
+    text: theme?.text ?? "#171717",
+    muted: theme?.muted ?? "#737373",
+    accent: theme?.accent ?? "#171717",
+    accentText: theme?.accentText ?? "#ffffff",
+});
+export const isOpenEditorNativeToolbarItemActive = (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);
+export const isOpenEditorNativeToolbarItemDisabled = (item, state) => !state.editable
+    || (item.disabledWhen === "cannotUndo" && !state.canUndo)
+    || (item.disabledWhen === "cannotRedo" && !state.canRedo)
+    || (item.disabledWhen === "cannotMergeCells" && !state.table?.canMergeCells);
+export const resolveOpenEditorNativeToolbarItemPresentation = (item, state, blockHandlesVisible) => {
+    const active = item.action === "toggleBlockHandles"
+        ? blockHandlesVisible
+        : isOpenEditorNativeToolbarItemActive(item, state);
+    return {
+        active,
+        disabled: isOpenEditorNativeToolbarItemDisabled(item, state),
+        label: item.action === "toggleBlockHandles" && blockHandlesVisible
+            ? "Hide block handles"
+            : item.label,
+    };
+};
+export const resolveOpenEditorNativeToolbarItems = (state, items = defaultOpenEditorNativeToolbarItems) => 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;
+export const resolveOpenEditorNativeBlockPickerGroups = (availableNativeEffects) => 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;
+})
+    .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;
+}, []);
+export const createOpenEditorNativeBlockInsertion = (block, selection) => ({
+    type: "insertBlock",
+    block,
+    selection: selection.type === "text"
+        ? { anchor: selection.anchor, head: selection.head }
+        : undefined,
+});
+export const EMPTY_OPENEDITOR_NATIVE_BLOCK_PICKER = {
+    pending: null,
+    presented: false,
+    selection: null,
+};
+export const openOpenEditorNativeBlockPicker = (selection) => ({ pending: null, presented: true, selection });
+export const selectOpenEditorNativeBlock = (state, block) => ({
+    ...state,
+    pending: createOpenEditorNativeBlockInsertion(block, state.selection ?? { type: "node", from: 0, to: 0 }),
+    presented: false,
+});
+export const dismissOpenEditorNativeBlockPicker = (state) => ({ command: state.pending, state: EMPTY_OPENEDITOR_NATIVE_BLOCK_PICKER });

package/dist/toolbar-surface-model.d.ts

@@ -0,0 +1,22 @@
+import type { OpenEditorNativeTheme } from "./native-editor.js";
+export declare const OPENEDITOR_NATIVE_TOOLBAR_SURFACE_GEOMETRY: {
+    borderRadius: number;
+    height: number;
+    overflow: "hidden";
+};
+export declare const resolveOpenEditorNativeToolbarMaterial: ({ active, glassAvailable, isIOS, theme, }: {
+    active?: boolean;
+    glassAvailable: boolean;
+    isIOS: boolean;
+    theme?: OpenEditorNativeTheme;
+}) => {
+    kind: "glass";
+    glassEffectStyle: "none" | "regular";
+    backgroundColor?: undefined;
+    borderColor?: undefined;
+} | {
+    kind: "fallback";
+    backgroundColor: string;
+    borderColor: string;
+    glassEffectStyle?: undefined;
+};

package/dist/toolbar-surface-model.js

@@ -0,0 +1,13 @@
+import { OPENEDITOR_NATIVE_TOOLBAR_HEIGHT, OPENEDITOR_NATIVE_TOOLBAR_RADIUS, } from "./native-layout.js";
+export const OPENEDITOR_NATIVE_TOOLBAR_SURFACE_GEOMETRY = {
+    borderRadius: OPENEDITOR_NATIVE_TOOLBAR_RADIUS,
+    height: OPENEDITOR_NATIVE_TOOLBAR_HEIGHT,
+    overflow: "hidden",
+};
+export const resolveOpenEditorNativeToolbarMaterial = ({ active = true, glassAvailable, isIOS, theme, }) => isIOS && glassAvailable
+    ? { kind: "glass", glassEffectStyle: active ? "regular" : "none" }
+    : {
+        kind: "fallback",
+        backgroundColor: theme?.surfaceRaised ?? theme?.surfaceMuted ?? theme?.surface ?? "#ffffff",
+        borderColor: theme?.border ?? "#e5e7eb",
+    };

package/dist/toolbar-surface.js

@@ -1,32 +1,34 @@
 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";
+import { OPENEDITOR_NATIVE_TOOLBAR_SURFACE_GEOMETRY, resolveOpenEditorNativeToolbarMaterial, } from "./toolbar-surface-model.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 }));
+    const material = resolveOpenEditorNativeToolbarMaterial({
+        active,
+        glassAvailable: isGlassEffectAPIAvailable(),
+        isIOS: Platform.OS === "ios",
+        theme,
+    });
+    if (material.kind === "glass") {
+        return (_jsx(GlassView, { colorScheme: colorScheme, glassEffectStyle: material.glassEffectStyle, 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",
+                backgroundColor: material.backgroundColor,
+                borderColor: material.borderColor,
             },
             style,
         ], children: children }));
 }
 const styles = StyleSheet.create({
-    surface: {
-        borderRadius: OPENEDITOR_NATIVE_TOOLBAR_RADIUS,
-        height: OPENEDITOR_NATIVE_TOOLBAR_HEIGHT,
-        overflow: "hidden",
-    },
+    surface: OPENEDITOR_NATIVE_TOOLBAR_SURFACE_GEOMETRY,
     fallback: {
         borderWidth: StyleSheet.hairlineWidth,
     },

package/expo-module.config.json

@@ -0,0 +1,6 @@
+{
+  "platforms": ["apple"],
+  "apple": {
+    "modules": ["OpenEditorNativeModule"]
+  }
+}

package/ios/OpenEditorNative.podspec

@@ -0,0 +1,21 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name             = 'OpenEditorNative'
+  s.version          = package['version']
+  s.summary          = 'Native platform integration for OpenEditor.'
+  s.homepage         = 'https://github.com/EasyLink-HQ/openeditor'
+  s.license          = { :type => 'MIT' }
+  s.author           = 'EasyLink HQ'
+  s.platforms        = { :ios => '16.4' }
+  s.swift_version    = '5.9'
+  s.source           = { :git => 'https://github.com/EasyLink-HQ/openeditor.git', :tag => s.version.to_s }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+  s.frameworks = 'WebKit'
+  s.source_files = '**/*.{h,m,mm,swift}'
+  s.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES' }
+end

package/ios/OpenEditorNativeModule.swift

@@ -0,0 +1,28 @@
+import ExpoModulesCore
+import WebKit
+
+public final class OpenEditorNativeModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("OpenEditorNative")
+
+    AsyncFunction("setInteractiveKeyboardDismissal") { (rootView: UIView) -> Bool in
+      guard let webView = Self.findWebView(in: rootView) else {
+        return false
+      }
+      webView.scrollView.keyboardDismissMode = .interactive
+      return true
+    }.runOnQueue(.main)
+  }
+
+  private static func findWebView(in view: UIView) -> WKWebView? {
+    if let webView = view as? WKWebView {
+      return webView
+    }
+    for subview in view.subviews {
+      if let webView = findWebView(in: subview) {
+        return webView
+      }
+    }
+    return nil
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeditor/native",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "type": "module",
   "sideEffects": false,
   "repository": {
@@ -16,7 +16,8 @@
   },
   "files": [
     "dist",
-    "plugin.cjs"
+    "expo-module.config.json",
+    "ios"
   ],
   "exports": {
     ".": {
@@ -24,17 +25,15 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./plugin": "./plugin.cjs",
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@expo/config-plugins": "57.0.6",
-    "@expo/ui": "~57.0.7",
+    "@expo/ui": "~57.0.9",
     "@hugeicons/react-native": "^1.0.15",
-    "@openeditor/core": "0.0.36",
-    "@openeditor/embedded-runtime": "0.0.36",
-    "@openeditor/embedded-surface": "0.0.36",
-    "@openeditor/icons": "0.0.36"
+    "@openeditor/core": "0.0.38",
+    "@openeditor/embedded-runtime": "0.0.38",
+    "@openeditor/embedded-surface": "0.0.38",
+    "@openeditor/icons": "0.0.38"
   },
   "peerDependencies": {
     "expo": ">=57",

package/plugin.cjs

@@ -1,79 +0,0 @@
-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;