@openeditor/native 0.0.33 → 0.0.35

package/dist/native-editor.d.ts

@@ -0,0 +1,48 @@
+import type { OpenEditorDocument, OpenEditorPageSnapshot } from "@openeditor/core";
+import type { GlassColorScheme } from "expo-glass-effect";
+import { type OpenEditorRuntimeState, type OpenEditorNativeEffectName, type OpenEditorTheme } from "@openeditor/embedded-runtime";
+import { type ReactNode, type RefAttributes } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type WebViewProps } from "react-native-webview";
+import { type OpenEditorNativeController, type OpenEditorNativeEffectHandlers } from "./controller.js";
+import { type OpenEditorNativeToolbarItem } from "./toolbar-host.js";
+import { type OpenEditorNativeContentInsets } from "./native-layout.js";
+export type { OpenEditorNativeContentInsets } from "./native-layout.js";
+export type OpenEditorNativeTheme = Partial<OpenEditorTheme>;
+type EdgeInsets = OpenEditorNativeContentInsets;
+type OwnedWebViewProps = "source" | "onMessage" | "style" | "scrollEnabled" | "nestedScrollEnabled";
+export type OpenEditorNativeProps = {
+    initialDocument: OpenEditorDocument;
+    /** Page metadata rendered inside the shared, scroll-owned document surface. */
+    page?: OpenEditorPageSnapshot;
+    editable?: boolean;
+    placeholder?: string;
+    theme?: OpenEditorNativeTheme;
+    contentInsets?: Partial<EdgeInsets>;
+    showToolbar?: boolean;
+    toolbarItems?: readonly OpenEditorNativeToolbarItem[];
+    renderToolbar?: (context: {
+        availableNativeEffects: readonly OpenEditorNativeEffectName[];
+        blockHandlesVisible: boolean;
+        controller: OpenEditorNativeController;
+        setBlockHandlesVisible: (visible: boolean) => void;
+        state: OpenEditorRuntimeState;
+    }) => ReactNode;
+    nativeEffects?: OpenEditorNativeEffectHandlers;
+    onDocumentChanged?: (change: {
+        documentRevision: number;
+        origin: "input" | "command";
+    }) => void;
+    onReady?: (controller: OpenEditorNativeController) => void;
+    onError?: (error: Error) => void;
+    toolbarContentInset?: number;
+    toolbarOffset?: {
+        closed?: number;
+        opened?: number;
+    };
+    toolbarColorScheme?: GlassColorScheme;
+    toolbarContainerStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+    webViewProps?: Omit<WebViewProps, OwnedWebViewProps>;
+};
+export declare const OpenEditorNative: import("react").ForwardRefExoticComponent<OpenEditorNativeProps & RefAttributes<OpenEditorNativeController>>;

package/dist/native-editor.js

@@ -0,0 +1,214 @@
+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 { KeyboardStickyView } from "react-native-keyboard-controller";
+import { WebView, } from "react-native-webview";
+import { emptyOpenEditorNativeState, isOpenEditorNativeLifecycleCancellation, OpenEditorNativeBridge, } from "./controller.js";
+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";
+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) {
+    const systemColorScheme = useColorScheme();
+    const resolvedColorScheme = systemColorScheme === "dark" ? "dark" : "light";
+    const resolvedTheme = useMemo(() => resolveOpenEditorNativeTheme(theme, resolvedColorScheme), [resolvedColorScheme, theme]);
+    const resolvedToolbarColorScheme = toolbarColorScheme ?? resolvedColorScheme;
+    const webViewRef = useRef(null);
+    const sessionIdRef = useRef(`native_${Date.now().toString(36)}_${Math.random().toString(36).slice(2)}`);
+    const callbacksRef = useRef({
+        nativeEffects,
+        onDocumentChanged,
+        onError,
+        onReady,
+    });
+    callbacksRef.current = { nativeEffects, onDocumentChanged, onError, onReady };
+    const initialDocumentRef = useRef(initialDocument);
+    const initialConfigRef = useRef({ editable, placeholder, theme: resolvedTheme });
+    const initializedRef = useRef(false);
+    const bridgeLifetimeRef = useRef(0);
+    const [editorState, setEditorState] = useState(emptyOpenEditorNativeState);
+    const [blockHandlesVisible, setBlockHandlesVisible] = useState(false);
+    const [keyboardVisible, setKeyboardVisible] = useState(() => Keyboard.isVisible?.() ?? false);
+    const [bridge] = useState(() => new OpenEditorNativeBridge({
+        sessionId: sessionIdRef.current,
+        send: (message) => webViewRef.current?.postMessage(message),
+        getEffectHandlers: () => callbacksRef.current.nativeEffects,
+    }));
+    // The packaged HTML is several megabytes. Keeping the source object stable is
+    // essential: passing a fresh inline source through React Native on each editor
+    // state update can make WKWebView reload it and can terminate its content
+    // process under memory pressure.
+    const runtimeSource = useMemo(() => ({
+        html: openEditorEmbeddedSurfaceHtml,
+        baseUrl: "https://openeditor.local/",
+    }), []);
+    useImperativeHandle(forwardedRef, () => bridge, [bridge]);
+    const resolvedInsets = resolveOpenEditorNativeContentInsets({
+        contentInsets,
+        editable,
+        showToolbar,
+        toolbarContentInset,
+    });
+    const availableNativeEffects = Object.keys(nativeEffects ?? {});
+    const hostConfig = JSON.stringify({
+        availableNativeEffects,
+        blockHandles: editable && blockHandlesVisible,
+        contentInsets: resolvedInsets,
+        page,
+        placeholder,
+        sessionId: sessionIdRef.current,
+        theme: resolvedTheme,
+    });
+    const injectedConfig = `window.__OPENEDITOR_NATIVE_HOST__=${hostConfig};true;`;
+    const hostConfigUpdateScript = `window.dispatchEvent(new CustomEvent("openeditor:host-config",{detail:${JSON.stringify({
+        blockHandles: editable && blockHandlesVisible,
+        contentInsets: resolvedInsets,
+        page,
+        placeholder,
+        theme: resolvedTheme,
+    })}}));true;`;
+    const initializeRuntime = useCallback(() => {
+        if (!bridge.runtimeReady || initializedRef.current)
+            return;
+        initializedRef.current = true;
+        void bridge
+            .initialize(initialDocumentRef.current, initialConfigRef.current.editable)
+            .then((result) => {
+            bridge.markInitialized();
+            setEditorState((state) => ({
+                ...state,
+                documentRevision: result.documentRevision,
+                revision: result.stateRevision,
+                editable: initialConfigRef.current.editable,
+            }));
+            callbacksRef.current.onReady?.(bridge);
+        })
+            .catch((error) => {
+            initializedRef.current = false;
+            if (isOpenEditorNativeLifecycleCancellation(error))
+                return;
+            callbacksRef.current.onError?.(error instanceof Error
+                ? error
+                : new Error("OpenEditor runtime initialization failed."));
+        });
+    }, [bridge]);
+    useEffect(() => {
+        webViewRef.current?.injectJavaScript(hostConfigUpdateScript);
+    }, [hostConfigUpdateScript]);
+    useEffect(() => {
+        const showSubscription = Keyboard.addListener(Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow", () => setKeyboardVisible(true));
+        const hideSubscription = Keyboard.addListener(Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide", () => setKeyboardVisible(false));
+        return () => {
+            showSubscription.remove();
+            hideSubscription.remove();
+        };
+    }, []);
+    useEffect(() => {
+        const unsubscribe = bridge.subscribe((event) => {
+            if (event.type === "ready") {
+                initializeRuntime();
+                return;
+            }
+            if (event.type === "stateChanged") {
+                setEditorState(event.state);
+                return;
+            }
+            if (event.type === "documentChanged") {
+                if (bridge.ready) {
+                    callbacksRef.current.onDocumentChanged?.({
+                        documentRevision: event.documentRevision,
+                        origin: event.origin,
+                    });
+                }
+                return;
+            }
+            if (event.type === "error") {
+                callbacksRef.current.onError?.(new Error(`${event.code}: ${event.message}`));
+            }
+        });
+        return unsubscribe;
+    }, [bridge, initializeRuntime]);
+    useEffect(() => {
+        const lifetime = ++bridgeLifetimeRef.current;
+        return () => {
+            queueMicrotask(() => {
+                if (bridgeLifetimeRef.current === lifetime)
+                    bridge.dispose();
+            });
+        };
+    }, [bridge]);
+    useEffect(() => {
+        let active = true;
+        void bridge
+            .command({ type: "setEditable", editable })
+            .catch((error) => {
+            if (active && !isOpenEditorNativeLifecycleCancellation(error)) {
+                callbacksRef.current.onError?.(error instanceof Error
+                    ? error
+                    : new Error("OpenEditor could not update editability."));
+            }
+        });
+        return () => {
+            active = false;
+        };
+    }, [bridge, editable]);
+    const onMessage = (event) => {
+        if (!bridge.receive(event.nativeEvent.data)) {
+            callbacksRef.current.onError?.(new Error("OpenEditor runtime sent an invalid bridge message."));
+        }
+        initializeRuntime();
+    };
+    const toolbarEnabled = showToolbar && editable;
+    const shouldRenderToolbar = showToolbar && editable && editorState.focused && keyboardVisible;
+    const toolbar = renderToolbar && shouldRenderToolbar ? (renderToolbar({
+        availableNativeEffects,
+        blockHandlesVisible,
+        controller: bridge,
+        setBlockHandlesVisible,
+        state: editorState,
+    })) : !renderToolbar && toolbarEnabled ? (_jsx(OpenEditorNativeToolbar, { availableNativeEffects: availableNativeEffects, blockHandlesVisible: blockHandlesVisible, controller: bridge, items: toolbarItems, onBlockHandlesVisibleChange: setBlockHandlesVisible, onCommandError: (error) => callbacksRef.current.onError?.(error), state: editorState, style: styles.toolbarContent, theme: resolvedTheme, visible: shouldRenderToolbar })) : null;
+    return (_jsxs(View, { style: [
+            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) => {
+                        initializedRef.current = false;
+                        bridge.resetRuntime();
+                        webViewProps?.onLoadStart?.(event);
+                    }, onContentProcessDidTerminate: (event) => {
+                        callbacksRef.current.onError?.(new Error("OpenEditor WebView content process terminated unexpectedly."));
+                        webViewProps?.onContentProcessDidTerminate?.(event);
+                    }, onMessage: onMessage, originWhitelist: webViewProps?.originWhitelist ?? [
+                        "https://openeditor.local",
+                        "file://*",
+                        "about:blank",
+                    ], ref: webViewRef, scrollEnabled: true, source: runtimeSource, style: [
+                        styles.webView,
+                        {
+                            backgroundColor: resolvedTheme.surface,
+                        },
+                    ] }) }), toolbarEnabled ? (_jsx(KeyboardStickyView, { offset: toolbarOffset, pointerEvents: "box-none", style: [styles.toolbarContainer, toolbarContainerStyle], children: _jsx(OpenEditorNativeToolbarSurface, { active: shouldRenderToolbar, colorScheme: resolvedToolbarColorScheme, theme: resolvedTheme, children: toolbar }) })) : null] }));
+});
+const styles = StyleSheet.create({
+    host: { flex: 1, minHeight: 0 },
+    webViewContainer: { flex: 1, minHeight: 0, overflow: "hidden" },
+    webView: { flex: 1 },
+    toolbarContainer: {
+        bottom: 0,
+        borderRadius: OPENEDITOR_NATIVE_TOOLBAR_RADIUS,
+        height: OPENEDITOR_NATIVE_TOOLBAR_HEIGHT,
+        left: 12,
+        overflow: "hidden",
+        position: "absolute",
+        right: 12,
+        zIndex: 20,
+    },
+    toolbarContent: {
+        backgroundColor: "transparent",
+        borderWidth: 0,
+        minHeight: OPENEDITOR_NATIVE_TOOLBAR_HEIGHT,
+    },
+});

package/dist/native-layout.d.ts

@@ -0,0 +1,20 @@
+export type OpenEditorNativeContentInsets = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const OPENEDITOR_NATIVE_TOOLBAR_HEIGHT = 46;
+export declare const OPENEDITOR_NATIVE_TOOLBAR_RADIUS: number;
+export declare const OPENEDITOR_NATIVE_TOOLBAR_CONTENT_INSET = 70;
+export declare const OPENEDITOR_NATIVE_TOOLBAR_OFFSET: {
+    readonly closed: 0;
+    /** Keep the intentional breathing room above the software keyboard. */
+    readonly opened: -8;
+};
+export declare const resolveOpenEditorNativeContentInsets: ({ contentInsets, editable, showToolbar, toolbarContentInset, }: {
+    contentInsets: Partial<OpenEditorNativeContentInsets>;
+    editable: boolean;
+    showToolbar: boolean;
+    toolbarContentInset: number;
+}) => OpenEditorNativeContentInsets;

package/dist/native-layout.js

@@ -0,0 +1,15 @@
+export const OPENEDITOR_NATIVE_TOOLBAR_HEIGHT = 46;
+export const OPENEDITOR_NATIVE_TOOLBAR_RADIUS = OPENEDITOR_NATIVE_TOOLBAR_HEIGHT / 2;
+export const OPENEDITOR_NATIVE_TOOLBAR_CONTENT_INSET = 70;
+export const OPENEDITOR_NATIVE_TOOLBAR_OFFSET = {
+    closed: 0,
+    /** Keep the intentional breathing room above the software keyboard. */
+    opened: -8,
+};
+export const resolveOpenEditorNativeContentInsets = ({ contentInsets, editable, showToolbar, toolbarContentInset, }) => ({
+    top: contentInsets.top ?? 0,
+    right: contentInsets.right ?? 0,
+    bottom: (contentInsets.bottom ?? 0) +
+        (showToolbar && editable ? toolbarContentInset : 0),
+    left: contentInsets.left ?? 0,
+});

package/dist/native-provider.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement, ReactNode } from "react";
+export type OpenEditorNativeProviderProps = {
+    children: ReactNode;
+};
+/**
+ * Owns the native keyboard animation context used by OpenEditor's toolbar.
+ * Mount once above every OpenEditorNative instance, normally at the app root.
+ */
+export declare function OpenEditorNativeProvider({ children }: OpenEditorNativeProviderProps): ReactElement;

package/dist/native-provider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { KeyboardProvider } from "react-native-keyboard-controller";
+/**
+ * Owns the native keyboard animation context used by OpenEditor's toolbar.
+ * Mount once above every OpenEditorNative instance, normally at the app root.
+ */
+export function OpenEditorNativeProvider({ children }) {
+    return _jsx(KeyboardProvider, { children: children });
+}

package/dist/theme.d.ts

@@ -1,2 +1,32 @@
-/** Converts CSS HSL colors into a native-safe hex color and preserves other color strings. */
-export declare const normalizeNativeThemeColor: (color: string) => string;
+import type { OpenEditorTheme } from "@openeditor/embedded-runtime";
+export type OpenEditorNativeColorScheme = "light" | "dark";
+declare const LIGHT_THEME: {
+    surface: string;
+    surfaceRaised: string;
+    surfaceMuted: string;
+    interactionHover: string;
+    interactionSelected: string;
+    blockSurface: string;
+    text: string;
+    textSoft: string;
+    heading: string;
+    muted: string;
+    placeholder: string;
+    border: string;
+    borderStrong: string;
+    structuralLine: string;
+    accent: string;
+    accentText: string;
+    accentStrong: string;
+    buttonBackground: string;
+    buttonText: string;
+    codeBackground: string;
+    codeText: string;
+    link: string;
+    linkHover: string;
+    shadow: string;
+    fontSans: string;
+};
+export type ResolvedOpenEditorNativeTheme = typeof LIGHT_THEME;
+export declare const resolveOpenEditorNativeTheme: (theme: Partial<OpenEditorTheme> | undefined, colorScheme: OpenEditorNativeColorScheme) => ResolvedOpenEditorNativeTheme;
+export {};

package/dist/theme.js

@@ -1,39 +1,58 @@
-const HSL_COLOR_PATTERN = /^hsla?\(\s*([-+\d.]+)(?:deg)?[\s,]+([-+\d.]+)%[\s,]+([-+\d.]+)%(?:\s*(?:\/|,)\s*([-+\d.]+%?))?\s*\)$/i;
-const clamp = (value, minimum, maximum) => Math.min(Math.max(value, minimum), maximum);
-const hueToRgb = (p, q, input) => {
-    let hue = input;
-    if (hue < 0)
-        hue += 1;
-    if (hue > 1)
-        hue -= 1;
-    if (hue < 1 / 6)
-        return p + (q - p) * 6 * hue;
-    if (hue < 1 / 2)
-        return q;
-    if (hue < 2 / 3)
-        return p + (q - p) * (2 / 3 - hue) * 6;
-    return p;
+const LIGHT_THEME = {
+    surface: "#ffffff",
+    surfaceRaised: "#ffffff",
+    surfaceMuted: "#f5f5f5",
+    interactionHover: "#f5f5f5",
+    interactionSelected: "#e5e5e5",
+    blockSurface: "#fafafa",
+    text: "#171717",
+    textSoft: "#404040",
+    heading: "#0a0a0a",
+    muted: "#737373",
+    placeholder: "#a3a3a3",
+    border: "#e5e5e5",
+    borderStrong: "#d4d4d4",
+    structuralLine: "#e5e5e5",
+    accent: "#171717",
+    accentText: "#ffffff",
+    accentStrong: "#0a0a0a",
+    buttonBackground: "#ffffff",
+    buttonText: "#171717",
+    codeBackground: "#f5f5f5",
+    codeText: "#262626",
+    link: "#1d4ed8",
+    linkHover: "#1e40af",
+    shadow: "rgba(0,0,0,0.18)",
+    fontSans: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif',
 };
-const toByte = (value) => Math.round(clamp(value, 0, 1) * 255 + 1e-9);
-const toHexByte = (value) => value.toString(16).padStart(2, "0");
-/** Converts CSS HSL colors into a native-safe hex color and preserves other color strings. */
-export const normalizeNativeThemeColor = (color) => {
-    const match = HSL_COLOR_PATTERN.exec(color.trim());
-    if (!match)
-        return color;
-    const hue = (((Number(match[1]) % 360) + 360) % 360) / 360;
-    const saturation = clamp(Number(match[2]) / 100, 0, 1);
-    const lightness = clamp(Number(match[3]) / 100, 0, 1);
-    const alphaRaw = match[4];
-    const alpha = alphaRaw
-        ? clamp(Number(alphaRaw.replace("%", "")) / (alphaRaw.endsWith("%") ? 100 : 1), 0, 1)
-        : 1;
-    const q = lightness < 0.5
-        ? lightness * (1 + saturation)
-        : lightness + saturation - lightness * saturation;
-    const p = 2 * lightness - q;
-    const red = saturation === 0 ? lightness : hueToRgb(p, q, hue + 1 / 3);
-    const green = saturation === 0 ? lightness : hueToRgb(p, q, hue);
-    const blue = saturation === 0 ? lightness : hueToRgb(p, q, hue - 1 / 3);
-    return `#${toHexByte(toByte(red))}${toHexByte(toByte(green))}${toHexByte(toByte(blue))}${alpha < 1 ? toHexByte(toByte(alpha)) : ""}`;
+const DARK_THEME = {
+    surface: "#111111",
+    surfaceRaised: "#1c1c1e",
+    surfaceMuted: "#27272a",
+    interactionHover: "#333336",
+    interactionSelected: "#3a3a3c",
+    blockSurface: "#1c1c1e",
+    text: "#f5f5f5",
+    textSoft: "#d4d4d4",
+    heading: "#fafafa",
+    muted: "#a3a3a3",
+    placeholder: "#737373",
+    border: "#333333",
+    borderStrong: "#525252",
+    structuralLine: "#333333",
+    accent: "#f5f5f5",
+    accentText: "#111111",
+    accentStrong: "#ffffff",
+    buttonBackground: "#27272a",
+    buttonText: "#f5f5f5",
+    codeBackground: "#1f1f1f",
+    codeText: "#e5e5e5",
+    link: "#60a5fa",
+    linkHover: "#93c5fd",
+    shadow: "rgba(0,0,0,0.60)",
+    fontSans: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif',
 };
+export const resolveOpenEditorNativeTheme = (theme, colorScheme) => ({
+    ...(colorScheme === "dark" ? DARK_THEME : LIGHT_THEME),
+    ...theme,
+});

package/dist/toolbar-host.d.ts

@@ -0,0 +1,20 @@
+import type { OpenEditorNativeEffectName, OpenEditorRuntimeState } from "@openeditor/embedded-runtime";
+import { type StyleProp, type ViewStyle } from "react-native";
+import type { OpenEditorNativeController } from "./controller.js";
+import type { OpenEditorNativeTheme } from "./native-editor.js";
+import { type OpenEditorNativeToolbarItem } from "./toolbar-items.js";
+export type { OpenEditorNativeToolbarItem } from "./toolbar-items.js";
+export { defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, } from "./toolbar-items.js";
+export type OpenEditorNativeToolbarProps = {
+    availableNativeEffects?: readonly OpenEditorNativeEffectName[];
+    controller: OpenEditorNativeController;
+    state: OpenEditorRuntimeState;
+    items?: readonly OpenEditorNativeToolbarItem[];
+    theme?: OpenEditorNativeTheme;
+    style?: StyleProp<ViewStyle>;
+    onCommandError?: (error: Error) => void;
+    visible?: boolean;
+    blockHandlesVisible?: boolean;
+    onBlockHandlesVisibleChange?: (visible: boolean) => void;
+};
+export declare const OpenEditorNativeToolbar: import("react").MemoExoticComponent<({ availableNativeEffects, controller, state, items, theme, style, onCommandError, visible, blockHandlesVisible, onBlockHandlesVisibleChange, }: OpenEditorNativeToolbarProps) => import("react").JSX.Element>;