@apollohg/react-native-rich-text-editor 2.0.0

package/dist/useNativeEditor.js

@@ -0,0 +1,370 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNativeEditorDocument = useNativeEditorDocument;
+const react_1 = require("react");
+const NativeEditorBridge_1 = require("./NativeEditorBridge");
+const NativeEditorBoundaryError_1 = require("./NativeEditorBoundaryError");
+const DEFAULT_V2_HISTORY_STATE = { canUndo: false, canRedo: false };
+function isRevisionMismatchError(error) {
+    return error instanceof NativeEditorBoundaryError_1.NativeEditorOperationError && error.code === 'REVISION_MISMATCH';
+}
+/**
+ * Headless binding to a document handle: the same controlled content,
+ * getters, and history the editor exposes, with no view attached. Use it to
+ * read or drive a document that is not currently mounted — a preview, a
+ * background save, a test.
+ *
+ * `RichTextEditor` uses this internally, so mounting an editor on the
+ * same handle does not conflict with it.
+ */
+function useNativeEditorDocument(options) {
+    const { handle, value, valueJSON, valueJSONUpdateMode = 'replace', revisionSignal, onLocalCommit, } = options;
+    (0, NativeEditorBridge_1._assertNativeEditorDocumentHandle)(handle);
+    const editorId = handle.editorId;
+    const onContentChangeRef = (0, react_1.useRef)(options.onContentChange);
+    onContentChangeRef.current = options.onContentChange;
+    const onContentChangeJSONRef = (0, react_1.useRef)(options.onContentChangeJSON);
+    onContentChangeJSONRef.current = options.onContentChangeJSON;
+    const onHistoryStateChangeRef = (0, react_1.useRef)(options.onHistoryStateChange);
+    onHistoryStateChangeRef.current = options.onHistoryStateChange;
+    const onLocalCommitRef = (0, react_1.useRef)(onLocalCommit);
+    onLocalCommitRef.current = onLocalCommit;
+    const [engineView, setEngineView] = (0, react_1.useState)({
+        editorId,
+        ready: false,
+        documentState: null,
+        documentRevision: null,
+        documentOrigin: null,
+        historyState: DEFAULT_V2_HISTORY_STATE,
+        contentKey: null,
+    });
+    const currentEditorIdRef = (0, react_1.useRef)(editorId);
+    currentEditorIdRef.current = editorId;
+    const readyRef = (0, react_1.useRef)({ editorId, ready: false });
+    const emittedRef = (0, react_1.useRef)({
+        editorId,
+        lastRevision: null,
+        lastContentKey: null,
+        lastHistoryKey: null,
+    });
+    const pendingControlledEchoesRef = (0, react_1.useRef)({
+        editorId,
+        keys: [],
+    });
+    const controlledKindRef = (0, react_1.useRef)(null);
+    controlledKindRef.current = value != null ? 'html' : valueJSON != null ? 'json' : null;
+    const ignoredControlledEchoRef = (0, react_1.useRef)(null);
+    const lastControlledContentKeyRef = (0, react_1.useRef)(null);
+    if (readyRef.current.editorId !== editorId) {
+        readyRef.current = { editorId, ready: false };
+    }
+    if (emittedRef.current.editorId !== editorId) {
+        emittedRef.current = {
+            editorId,
+            lastRevision: null,
+            lastContentKey: null,
+            lastHistoryKey: null,
+        };
+        pendingControlledEchoesRef.current = { editorId, keys: [] };
+        ignoredControlledEchoRef.current = null;
+        lastControlledContentKeyRef.current = null;
+    }
+    const refresh = (0, react_1.useCallback)((emitContentCallbacks) => {
+        const refreshedEditorId = handle.editorId;
+        if (handle.isDestroyed || currentEditorIdRef.current !== refreshedEditorId) {
+            return;
+        }
+        const state = handle.bridge.getState();
+        const ready = state.documentState !== 'AwaitRemote';
+        let contentKey = null;
+        let snapshotHtml = null;
+        let snapshotJson = null;
+        if (ready) {
+            const snapshot = handle.bridge.getContentSnapshot();
+            snapshotHtml = snapshot.html;
+            snapshotJson = snapshot.json;
+            contentKey = JSON.stringify(snapshot.json);
+        }
+        if (currentEditorIdRef.current !== refreshedEditorId)
+            return;
+        const historyState = {
+            canUndo: state.canUndo,
+            canRedo: state.canRedo,
+        };
+        readyRef.current = { editorId: refreshedEditorId, ready };
+        setEngineView({
+            editorId: refreshedEditorId,
+            ready,
+            documentState: state.documentState,
+            documentRevision: state.documentRevision,
+            documentOrigin: state.documentOrigin,
+            historyState,
+            contentKey,
+        });
+        const historyKey = `${state.canUndo}/${state.canRedo}`;
+        const emitted = emittedRef.current;
+        if (currentEditorIdRef.current !== refreshedEditorId ||
+            emitted.editorId !== refreshedEditorId) {
+            return;
+        }
+        if (historyKey !== emitted.lastHistoryKey) {
+            emitted.lastHistoryKey = historyKey;
+            onHistoryStateChangeRef.current?.(historyState);
+        }
+        if (ready) {
+            const lastRevision = emitted.lastRevision;
+            if (emitContentCallbacks &&
+                lastRevision != null &&
+                lastRevision !== state.documentRevision &&
+                emitted.lastContentKey !== contentKey) {
+                if (snapshotHtml != null) {
+                    if (controlledKindRef.current === 'html' &&
+                        onContentChangeRef.current != null) {
+                        const echoes = pendingControlledEchoesRef.current.keys;
+                        echoes.push(`html:${snapshotHtml}`);
+                        if (echoes.length > 32)
+                            echoes.shift();
+                    }
+                    onContentChangeRef.current?.(snapshotHtml);
+                }
+                if (snapshotJson != null) {
+                    if (controlledKindRef.current === 'json' &&
+                        onContentChangeJSONRef.current != null) {
+                        const echoes = pendingControlledEchoesRef.current.keys;
+                        echoes.push(`json:${contentKey}`);
+                        if (echoes.length > 32)
+                            echoes.shift();
+                    }
+                    onContentChangeJSONRef.current?.(snapshotJson);
+                }
+            }
+            emitted.lastRevision = state.documentRevision;
+            emitted.lastContentKey = contentKey;
+        }
+    }, [handle]);
+    (0, react_1.useEffect)(() => {
+        refresh(true);
+    }, [refresh, revisionSignal]);
+    const refreshFromEngine = (0, react_1.useCallback)(() => {
+        refresh(true);
+    }, [refresh]);
+    const serializedControlledJson = (0, react_1.useMemo)(() => (value == null && valueJSON != null ? JSON.stringify(valueJSON) : null), [value, valueJSON]);
+    // Controlled document flow: external value/valueJSON changes lower to one
+    // local-API replacement carrying the rendered engine revision as its
+    // base. Content callbacks stay suppressed (controlled sync parity).
+    (0, react_1.useEffect)(() => {
+        if (engineView.editorId !== editorId || !engineView.ready || handle.isDestroyed)
+            return;
+        if (engineView.documentRevision == null)
+            return;
+        const wantsHtml = value != null;
+        const wantsJson = value == null && serializedControlledJson != null;
+        if (!wantsHtml && !wantsJson)
+            return;
+        const controlledContentKey = wantsHtml
+            ? `html:${value}`
+            : `json:${serializedControlledJson}`;
+        const controlledContentChanged = lastControlledContentKeyRef.current !== controlledContentKey;
+        if (controlledContentChanged) {
+            lastControlledContentKeyRef.current = controlledContentKey;
+            ignoredControlledEchoRef.current = null;
+        }
+        if (ignoredControlledEchoRef.current === controlledContentKey)
+            return;
+        if (!controlledContentChanged && pendingControlledEchoesRef.current.keys.length > 0)
+            return;
+        const snapshot = handle.bridge.getContentSnapshot();
+        if (currentEditorIdRef.current !== editorId || emittedRef.current.editorId !== editorId) {
+            return;
+        }
+        const currentJsonKey = JSON.stringify(snapshot.json);
+        if (wantsHtml && snapshot.html === value) {
+            const echoIndex = pendingControlledEchoesRef.current.keys.indexOf(controlledContentKey);
+            if (echoIndex >= 0) {
+                pendingControlledEchoesRef.current.keys.splice(0, echoIndex + 1);
+            }
+            emittedRef.current.lastRevision = engineView.documentRevision;
+            emittedRef.current.lastContentKey = currentJsonKey;
+            return;
+        }
+        if (wantsJson && currentJsonKey === serializedControlledJson) {
+            const echoIndex = pendingControlledEchoesRef.current.keys.indexOf(controlledContentKey);
+            if (echoIndex >= 0) {
+                pendingControlledEchoesRef.current.keys.splice(0, echoIndex + 1);
+            }
+            emittedRef.current.lastRevision = engineView.documentRevision;
+            emittedRef.current.lastContentKey = currentJsonKey;
+            return;
+        }
+        const echoIndex = pendingControlledEchoesRef.current.keys.indexOf(controlledContentKey);
+        if (echoIndex >= 0) {
+            pendingControlledEchoesRef.current.keys.splice(0, echoIndex + 1);
+            ignoredControlledEchoRef.current = controlledContentKey;
+            return;
+        }
+        try {
+            pendingControlledEchoesRef.current.keys = [];
+            handle.bridge.applyLocalApi({
+                ...(wantsHtml
+                    ? { setHtml: value }
+                    : { setJson: JSON.parse(serializedControlledJson) }),
+                history: valueJSONUpdateMode === 'reset' ? 'resetAndClear' : 'undoableBoundary',
+                baseDocumentRevision: engineView.documentRevision,
+            });
+            if (currentEditorIdRef.current !== editorId)
+                return;
+            onLocalCommitRef.current?.();
+            refresh(false);
+        }
+        catch (error) {
+            if (isRevisionMismatchError(error)) {
+                // Refresh from the engine; the effect re-applies against the
+                // fresh revision (never a guessed one).
+                refresh(false);
+                return;
+            }
+            throw error;
+        }
+    }, [
+        handle,
+        value,
+        serializedControlledJson,
+        valueJSONUpdateMode,
+        editorId,
+        engineView.editorId,
+        engineView.ready,
+        engineView.documentRevision,
+        refresh,
+    ]);
+    const mutate = (0, react_1.useCallback)((operation) => {
+        if (handle.isDestroyed || currentEditorIdRef.current !== handle.editorId) {
+            if (__DEV__) {
+                console.error('useNativeEditorDocument: dropped a mutation because the handle is not the current binding', {
+                    destroyed: handle.isDestroyed,
+                    boundEditorId: currentEditorIdRef.current,
+                    handleEditorId: handle.editorId,
+                });
+            }
+            return;
+        }
+        operation();
+        if (currentEditorIdRef.current !== handle.editorId)
+            return;
+        onLocalCommitRef.current?.();
+        refresh(true);
+    }, [handle, refresh]);
+    const setContent = (0, react_1.useCallback)((html) => {
+        mutate(() => handle.bridge.replaceDocument({ setHtml: html, history: 'undoableBoundary' }));
+    }, [handle, mutate]);
+    const setContentJson = (0, react_1.useCallback)((doc) => {
+        mutate(() => handle.bridge.replaceDocument({ setJson: doc, history: 'undoableBoundary' }));
+    }, [handle, mutate]);
+    const clearContent = (0, react_1.useCallback)(() => {
+        mutate(() => {
+            return handle.bridge.replaceDocument({
+                setJson: (0, NativeEditorBridge_1._getNativeEditorDocumentHandleDescriptor)(handle).emptyDocument,
+                history: 'resetAndClear',
+            });
+        });
+    }, [handle, mutate]);
+    const undo = (0, react_1.useCallback)(() => {
+        mutate(() => handle.bridge.undo());
+    }, [handle, mutate]);
+    const redo = (0, react_1.useCallback)(() => {
+        mutate(() => handle.bridge.redo());
+    }, [handle, mutate]);
+    const getContent = (0, react_1.useCallback)(() => {
+        if (handle.isDestroyed ||
+            readyRef.current.editorId !== handle.editorId ||
+            !readyRef.current.ready) {
+            return '';
+        }
+        return handle.bridge.getDocumentHtml();
+    }, [handle]);
+    const getContentJson = (0, react_1.useCallback)(() => {
+        if (handle.isDestroyed ||
+            readyRef.current.editorId !== handle.editorId ||
+            !readyRef.current.ready) {
+            return {};
+        }
+        return handle.bridge.getDocumentJson();
+    }, [handle]);
+    const getIsEmpty = (0, react_1.useCallback)(() => {
+        if (handle.isDestroyed ||
+            readyRef.current.editorId !== handle.editorId ||
+            !readyRef.current.ready) {
+            return true;
+        }
+        return handle.bridge.renderUpdate().documentIsEmpty;
+    }, [handle]);
+    const getTextContent = (0, react_1.useCallback)(() => {
+        if (handle.isDestroyed ||
+            readyRef.current.editorId !== handle.editorId ||
+            !readyRef.current.ready) {
+            return '';
+        }
+        return handle.bridge.getDocumentHtml().replace(/<[^>]+>/g, '');
+    }, [handle]);
+    const canUndo = (0, react_1.useCallback)(() => {
+        if (handle.isDestroyed ||
+            readyRef.current.editorId !== handle.editorId ||
+            !readyRef.current.ready) {
+            return false;
+        }
+        return handle.bridge.getState().canUndo;
+    }, [handle]);
+    const canRedo = (0, react_1.useCallback)(() => {
+        if (handle.isDestroyed ||
+            readyRef.current.editorId !== handle.editorId ||
+            !readyRef.current.ready) {
+            return false;
+        }
+        return handle.bridge.getState().canRedo;
+    }, [handle]);
+    let renderedEngineView = engineView;
+    if (engineView.editorId !== editorId) {
+        if (handle.isDestroyed) {
+            renderedEngineView = {
+                editorId,
+                ready: false,
+                documentState: null,
+                documentRevision: null,
+                documentOrigin: null,
+                historyState: DEFAULT_V2_HISTORY_STATE,
+                contentKey: null,
+            };
+        }
+        else {
+            const state = handle.bridge.getState();
+            renderedEngineView = {
+                editorId,
+                ready: state.documentState !== 'AwaitRemote',
+                documentState: state.documentState,
+                documentRevision: state.documentRevision,
+                documentOrigin: state.documentOrigin,
+                historyState: { canUndo: state.canUndo, canRedo: state.canRedo },
+                contentKey: null,
+            };
+        }
+        readyRef.current = { editorId, ready: renderedEngineView.ready };
+    }
+    return {
+        isReady: renderedEngineView.ready,
+        documentState: renderedEngineView.documentState,
+        documentRevision: renderedEngineView.documentRevision,
+        documentOrigin: renderedEngineView.documentOrigin,
+        historyState: renderedEngineView.historyState,
+        refresh: refreshFromEngine,
+        getContent,
+        getContentJson,
+        getIsEmpty,
+        getTextContent,
+        setContent,
+        setContentJson,
+        clearContent,
+        undo,
+        redo,
+        canUndo,
+        canRedo,
+    };
+}

package/dist/useRichTextEditorCommands.d.ts

@@ -0,0 +1,21 @@
+import { type AtomAttrsUpdate } from './atoms';
+import { type AtomInstance } from './atomInstances';
+import { type NativeEditorDocumentHandle } from './NativeEditorBridge';
+import { type EditorToolbarHeadingLevel } from './EditorToolbar';
+import { useRichTextEditorState } from './useRichTextEditorState';
+import { useRichTextEditorUpdates } from './useRichTextEditorUpdates';
+export declare function useRichTextEditorCommands(context: Pick<ReturnType<typeof useRichTextEditorState>, 'editable' | 'documentHandle' | 'latestRevisionRef' | 'atomStateRef' | 'bridge' | 'document' | 'nativeViewRef' | 'activeStateRef' | 'documentDescriptor' | 'onRequestLinkRef' | 'selectionRef' | 'onRequestImageRef' | 'ref' | 'externalCompositionManager'> & Pick<ReturnType<typeof useRichTextEditorUpdates>, 'refreshAtomsFromUpdate' | 'afterLocalEngineMutation' | 'pushEngineUpdateToView'>): {
+    openLinkRequest: () => void;
+    openImageRequest: () => void;
+    editableRef: import("react").RefObject<boolean>;
+    runAtomAction: (owner: NativeEditorDocumentHandle, instance: AtomInstance, documentVersion: string | null, action: "select" | "delete" | "before" | "after") => Promise<void>;
+    updateAtomAttrs: (atomKey: string, nodeType: string, expectedDocPos: number, expectedDocumentVersion: string | null, hasStableKey: boolean, update: AtomAttrsUpdate) => Promise<void>;
+    atomOwnerRef: import("react").RefObject<NativeEditorDocumentHandle>;
+    commandToggleMark: (markType: string) => void;
+    commandToggleList: (listType: string) => void;
+    commandToggleHeading: (level: EditorToolbarHeadingLevel) => void;
+    commandToggleBlockquote: () => void;
+    commandInsertNode: (nodeType: string) => void;
+    commandIndentListItem: () => void;
+    commandOutdentListItem: () => void;
+};