@openeditor/react-native-prose-editor 0.0.6 → 0.0.8

package/dist/NativeProseViewer.js

@@ -3,478 +3,53 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NativeProseViewer = NativeProseViewer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const expo_modules_core_1 = require("expo-modules-core");
 const react_native_1 = require("react-native");
-const addons_1 = require("./addons");
-const EditorTheme_1 = require("./EditorTheme");
-const heightCache_1 = require("./heightCache");
+const NativeRichTextEditor_1 = require("./NativeRichTextEditor");
 const schemas_1 = require("./schemas");
-const NativeProseViewerView = (0, expo_modules_core_1.requireNativeViewManager)('NativeEditor', 'NativeProseViewer');
-let nativeProseViewerModule = null;
-function getNativeProseViewerModule() {
-    if (!nativeProseViewerModule) {
-        nativeProseViewerModule =
-            (0, expo_modules_core_1.requireNativeModule)('NativeEditor');
-    }
-    return nativeProseViewerModule;
-}
-const serializedJsonCache = new WeakMap();
-const EMPTY_TEXT_BLOCK_PLACEHOLDER = '\u200B';
-function stringifyCachedJson(value) {
-    if (value != null && typeof value === 'object') {
-        const cached = serializedJsonCache.get(value);
-        if (cached != null) {
-            return cached;
-        }
-        const serialized = JSON.stringify(value);
-        serializedJsonCache.set(value, serialized);
-        return serialized;
-    }
-    return JSON.stringify(value);
-}
-function looksLikeRenderElementsJson(json) {
-    for (let index = 0; index < json.length; index += 1) {
-        const char = json[index];
-        if (char === ' ' || char === '\n' || char === '\r' || char === '\t') {
-            continue;
-        }
-        return char === '[';
-    }
-    return false;
-}
-function unicodeScalarLength(text) {
-    let length = 0;
-    for (const _char of text) {
-        length += 1;
-    }
-    return length;
-}
-function normalizeMentionAttrs(node) {
-    if (node == null || typeof node !== 'object') {
-        return {};
-    }
-    const attrs = node.attrs;
-    if (attrs == null || typeof attrs !== 'object' || Array.isArray(attrs)) {
-        return {};
-    }
-    return attrs;
-}
-function baseMentionLabelFromAttrs(attrs) {
-    const label = attrs.label;
-    return typeof label === 'string' && label.length > 0 ? label : 'mention';
-}
-function resolveConfiguredMentionPrefix(prefix, mention) {
-    const rawPrefix = typeof prefix === 'function' ? prefix(mention) : prefix;
-    return typeof rawPrefix === 'string' && rawPrefix.length > 0 ? rawPrefix : undefined;
-}
-function mentionTriggerFromAttrs(attrs) {
-    const trigger = attrs.mentionSuggestionChar;
-    return typeof trigger === 'string' && trigger.length > 0 ? trigger : undefined;
-}
-function applyMentionPrefix(label, prefix) {
-    if (!prefix || label.startsWith(prefix)) {
-        return label;
-    }
-    return `${prefix}${label}`;
-}
-function resolveMentionRenderedLabel(mentionContext, prefix, trigger) {
-    if (prefix !== undefined) {
-        return applyMentionPrefix(mentionContext.label, resolveConfiguredMentionPrefix(prefix, mentionContext));
-    }
-    return applyMentionPrefix(mentionContext.label, trigger ?? mentionTriggerFromAttrs(mentionContext.attrs));
-}
-function collectMentionPayloadsByDocPos(document, mentionsAddon) {
-    const mentions = new Map();
-    const effectiveMentionPrefix = mentionsAddon?.prefix;
-    const effectiveResolveMentionTheme = mentionsAddon?.resolveTheme;
-    const defaultMentionTheme = mentionsAddon?.theme;
-    const trigger = mentionsAddon?.trigger?.trim() || undefined;
-    const visit = (node, pos, isRoot = false) => {
-        if (node == null || typeof node !== 'object') {
-            return pos;
-        }
-        const nodeRecord = node;
-        const nodeType = typeof nodeRecord.type === 'string' ? nodeRecord.type : '';
-        const content = Array.isArray(nodeRecord.content) ? nodeRecord.content : [];
-        if (nodeType === 'text') {
-            const text = typeof nodeRecord.text === 'string' ? nodeRecord.text : '';
-            return pos + unicodeScalarLength(text);
-        }
-        if (nodeType === 'mention') {
-            const attrs = normalizeMentionAttrs(nodeRecord);
-            const label = baseMentionLabelFromAttrs(attrs);
-            const mentionContext = { docPos: pos, label, attrs };
-            const renderedLabel = resolveMentionRenderedLabel(mentionContext, effectiveMentionPrefix, trigger);
-            const resolvedMentionTheme = effectiveResolveMentionTheme?.(mentionContext) ?? undefined;
-            const mentionTheme = defaultMentionTheme || resolvedMentionTheme
-                ? {
-                    ...(defaultMentionTheme ?? {}),
-                    ...(resolvedMentionTheme ?? {}),
-                }
-                : undefined;
-            mentions.set(pos, {
-                ...mentionContext,
-                renderedLabel,
-                mentionTheme,
-            });
-        }
-        if (isRoot && nodeType === 'doc') {
-            let nextPos = pos;
-            for (const child of content) {
-                nextPos = visit(child, nextPos);
-            }
-            return nextPos;
-        }
-        if (content.length === 0) {
-            return pos + 1;
-        }
-        let nextPos = pos + 1;
-        for (const child of content) {
-            nextPos = visit(child, nextPos);
-        }
-        return nextPos + 1;
-    };
-    visit(document, 0, true);
-    return mentions;
-}
-function applyResolvedMentionRendering(renderJson, mentionPayloadsByDocPos) {
-    if (mentionPayloadsByDocPos.size === 0) {
-        return renderJson;
-    }
-    let parsedElements;
+function parseDocument(content) {
+    if (typeof content !== 'string')
+        return content;
     try {
-        parsedElements = JSON.parse(renderJson);
+        const parsed = JSON.parse(content);
+        return parsed != null && typeof parsed === 'object'
+            ? parsed
+            : { type: 'doc', content: [] };
     }
     catch {
-        return renderJson;
-    }
-    if (!Array.isArray(parsedElements)) {
-        return renderJson;
+        return { type: 'doc', content: [] };
     }
-    let didChange = false;
-    const nextElements = parsedElements.map((element) => {
-        if (element == null || typeof element !== 'object' || Array.isArray(element)) {
-            return element;
-        }
-        const renderElement = element;
-        if (renderElement.type !== 'opaqueInlineAtom' ||
-            renderElement.nodeType !== 'mention' ||
-            typeof renderElement.docPos !== 'number') {
-            return element;
-        }
-        const mention = mentionPayloadsByDocPos.get(renderElement.docPos);
-        if (!mention) {
-            return element;
-        }
-        let nextElement = renderElement;
-        if (renderElement.label !== mention.renderedLabel) {
-            nextElement = { ...nextElement, label: mention.renderedLabel };
-            didChange = true;
-        }
-        if (mention.mentionTheme && Object.keys(mention.mentionTheme).length > 0) {
-            nextElement =
-                nextElement === renderElement ? { ...nextElement } : nextElement;
-            nextElement.mentionTheme = mention.mentionTheme;
-            didChange = true;
-        }
-        return nextElement;
-    });
-    return didChange ? JSON.stringify(nextElements) : renderJson;
-}
-function isTopLevelSingleElementBlock(element) {
-    return element.type === 'voidBlock' || element.type === 'opaqueBlockAtom';
-}
-function isEmptyParagraphPlaceholderText(text) {
-    if (text.length === 0) {
-        return false;
-    }
-    return Array.from(text).every((char) => char === EMPTY_TEXT_BLOCK_PLACEHOLDER);
-}
-function isCollapsibleEmptyParagraphText(text) {
-    return Array.from(text).every((char) => char === EMPTY_TEXT_BLOCK_PLACEHOLDER);
 }
-function renderElementsJsonContainsOnlyEmptyParagraphs(renderJson) {
-    let parsedElements;
-    try {
-        parsedElements = JSON.parse(renderJson);
-    }
-    catch {
-        return false;
-    }
-    if (!Array.isArray(parsedElements)) {
-        return false;
-    }
-    if (parsedElements.length === 0) {
+function isEmptyDocument(document) {
+    const root = document;
+    if (!Array.isArray(root.content) || root.content.length === 0)
         return true;
-    }
-    let hasParagraph = false;
-    let paragraphIsOpen = false;
-    for (const element of parsedElements) {
-        if (element == null || typeof element !== 'object' || Array.isArray(element)) {
-            return false;
-        }
-        const renderElement = element;
-        switch (renderElement.type) {
-            case 'blockStart':
-                if (paragraphIsOpen ||
-                    renderElement.nodeType !== 'paragraph' ||
-                    renderElement.depth !== 0) {
-                    return false;
-                }
-                paragraphIsOpen = true;
-                hasParagraph = true;
-                break;
-            case 'textRun':
-                if (!paragraphIsOpen ||
-                    typeof renderElement.text !== 'string' ||
-                    !isCollapsibleEmptyParagraphText(renderElement.text)) {
-                    return false;
-                }
-                break;
-            case 'blockEnd':
-                if (!paragraphIsOpen) {
-                    return false;
-                }
-                paragraphIsOpen = false;
-                break;
-            default:
-                return false;
-        }
-    }
-    return hasParagraph && !paragraphIsOpen;
-}
-function isTrailingEmptyParagraphRange(elements, start, endExclusive) {
-    const startElement = elements[start];
-    const endElement = elements[endExclusive - 1];
-    if (startElement?.type !== 'blockStart' ||
-        startElement.nodeType !== 'paragraph' ||
-        startElement.depth !== 0 ||
-        endElement?.type !== 'blockEnd') {
-        return false;
-    }
-    const innerElements = elements.slice(start + 1, endExclusive - 1);
-    return (innerElements.length > 0 &&
-        innerElements.every((element) => element.type === 'textRun' &&
-            typeof element.text === 'string' &&
-            isEmptyParagraphPlaceholderText(element.text)));
-}
-function collapseTrailingEmptyParagraphRenderElements(renderJson) {
-    let parsedElements;
-    try {
-        parsedElements = JSON.parse(renderJson);
-    }
-    catch {
-        return renderJson;
-    }
-    if (!Array.isArray(parsedElements)) {
-        return renderJson;
-    }
-    const elements = parsedElements;
-    const topLevelRanges = [];
-    for (let index = 0; index < elements.length; index += 1) {
-        const element = elements[index];
-        if (!element || typeof element !== 'object' || Array.isArray(element)) {
-            continue;
-        }
-        if (element.type === 'blockStart' && element.depth === 0) {
-            let nestingDepth = 1;
-            let cursor = index + 1;
-            while (cursor < elements.length && nestingDepth > 0) {
-                const current = elements[cursor];
-                if (current?.type === 'blockStart') {
-                    nestingDepth += 1;
-                }
-                else if (current?.type === 'blockEnd') {
-                    nestingDepth -= 1;
-                }
-                cursor += 1;
-            }
-            if (nestingDepth !== 0) {
-                return renderJson;
-            }
-            topLevelRanges.push({ start: index, endExclusive: cursor });
-            index = cursor - 1;
-            continue;
-        }
-        if (isTopLevelSingleElementBlock(element)) {
-            topLevelRanges.push({ start: index, endExclusive: index + 1 });
-        }
-    }
-    if (topLevelRanges.length <= 1) {
-        return renderJson;
-    }
-    let trimStart = null;
-    for (let rangeIndex = topLevelRanges.length - 1; rangeIndex >= 1; rangeIndex -= 1) {
-        const range = topLevelRanges[rangeIndex];
-        if (!isTrailingEmptyParagraphRange(elements, range.start, range.endExclusive)) {
-            break;
-        }
-        trimStart = range.start;
-    }
-    if (trimStart == null) {
-        return renderJson;
-    }
-    return JSON.stringify(elements.slice(0, trimStart));
-}
-function serializeDocumentInput(document, schema) {
-    if (typeof document === 'string') {
-        try {
-            const parsed = JSON.parse(document);
-            const normalizedDocument = (0, schemas_1.normalizeDocumentJson)(parsed, schema);
-            return {
-                normalizedDocument,
-                serializedContentJson: stringifyCachedJson(normalizedDocument),
-            };
-        }
-        catch {
-            return {
-                normalizedDocument: null,
-                serializedContentJson: document,
-            };
-        }
-    }
-    const normalizedDocument = (0, schemas_1.normalizeDocumentJson)(document, schema);
-    return {
-        normalizedDocument,
-        serializedContentJson: stringifyCachedJson(normalizedDocument),
-    };
-}
-function extractRenderError(json) {
-    try {
-        const parsed = JSON.parse(json);
-        if (parsed == null || typeof parsed !== 'object' || Array.isArray(parsed)) {
-            return null;
-        }
-        const error = parsed.error;
-        return typeof error === 'string' ? error : null;
-    }
-    catch {
-        return null;
-    }
+    return root.content.every((node) => {
+        if (node == null || typeof node !== 'object')
+            return true;
+        const record = node;
+        return record.type === 'paragraph' &&
+            (!Array.isArray(record.content) || record.content.length === 0);
+    });
 }
-function NativeProseViewer({ ...props }) {
-    const { contentRevision, contentJSONRevision, schema, theme, style, allowBase64Images = false, collapseTrailingEmptyParagraphs = true, enableLinkTaps = true, addons, onPressLink, contentId, containerWidth, } = props;
-    const mentionPressHandler = addons?.mentions?.onPress;
-    const contentJSON = 'contentJSON' in props ? props.contentJSON : undefined;
-    const contentHTML = 'contentHTML' in props ? props.contentHTML : undefined;
-    const resolvedContentRevision = contentRevision ?? contentJSONRevision;
-    const documentSchema = (0, react_1.useMemo)(() => (0, addons_1.withMentionsSchema)(schema ?? schemas_1.tiptapSchema), [schema]);
-    const { normalizedDocument, serializedContentJson } = (0, react_1.useMemo)(() => {
-        if (contentJSON === undefined) {
-            return {
-                normalizedDocument: null,
-                serializedContentJson: null,
-            };
-        }
-        return serializeDocumentInput(contentJSON, documentSchema);
-    }, [contentJSON, resolvedContentRevision, documentSchema]);
-    const themeJson = (0, react_1.useMemo)(() => (0, EditorTheme_1.serializeEditorTheme)(theme), [theme]);
-    const mentionPayloadsByDocPos = (0, react_1.useMemo)(() => normalizedDocument == null
-        ? new Map()
-        : collectMentionPayloadsByDocPos(normalizedDocument, addons?.mentions), [addons?.mentions, normalizedDocument]);
-    const renderJson = (0, react_1.useMemo)(() => {
-        const configJson = JSON.stringify({
-            schema: documentSchema,
-            ...(allowBase64Images ? { allowBase64Images } : {}),
-        });
-        const nextRenderJson = serializedContentJson != null
-            ? getNativeProseViewerModule().renderDocumentJson(configJson, serializedContentJson)
-            : getNativeProseViewerModule().renderDocumentHtml(configJson, contentHTML ?? '');
-        const renderError = extractRenderError(nextRenderJson);
-        if (renderError != null) {
-            console.error(`NativeProseViewer: ${renderError}`);
-            return '[]';
-        }
-        if (looksLikeRenderElementsJson(nextRenderJson)) {
-            const collapsedRenderJson = collapseTrailingEmptyParagraphs
-                ? collapseTrailingEmptyParagraphRenderElements(nextRenderJson)
-                : nextRenderJson;
-            return applyResolvedMentionRendering(collapsedRenderJson, mentionPayloadsByDocPos);
-        }
-        console.error('NativeProseViewer: native renderDocumentJson returned an invalid payload.');
-        return '[]';
-    }, [
-        allowBase64Images,
-        collapseTrailingEmptyParagraphs,
-        contentHTML,
-        documentSchema,
-        mentionPayloadsByDocPos,
-        serializedContentJson,
-    ]);
-    const renderJsonIsCollapsedEmpty = (0, react_1.useMemo)(() => collapseTrailingEmptyParagraphs &&
-        renderElementsJsonContainsOnlyEmptyParagraphs(renderJson), [collapseTrailingEmptyParagraphs, renderJson]);
-    const [contentHeight, setContentHeight] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        setContentHeight(null);
-    }, [contentId]);
-    const renderJsonHash = (0, react_1.useMemo)(() => (0, heightCache_1.computeRenderJsonHash)(renderJson), [renderJson]);
-    const layoutContextKey = (0, react_1.useMemo)(() => containerWidth != null ? (0, heightCache_1.computeLayoutContextKey)(themeJson, containerWidth) : null, [themeJson, containerWidth]);
-    const preMeasuredHeight = (0, react_1.useMemo)(() => {
-        if (!contentId || layoutContextKey == null || containerWidth == null) {
-            return null;
-        }
-        const cached = (0, heightCache_1.getHeightCache)(contentId, layoutContextKey, renderJsonHash);
-        if (cached != null)
-            return cached;
-        const measured = getNativeProseViewerModule().measureContentHeight(renderJson, themeJson, containerWidth);
-        if (measured > 0) {
-            (0, heightCache_1.setHeightCache)(contentId, layoutContextKey, renderJsonHash, measured);
-        }
-        return measured > 0 ? measured : null;
-    }, [contentId, containerWidth, renderJson, themeJson, layoutContextKey, renderJsonHash]);
-    const handleContentHeightChange = (0, react_1.useCallback)((event) => {
-        const density = react_native_1.Platform.OS === 'android' ? react_native_1.PixelRatio.get() : 1;
-        const nextHeight = Math.ceil(event.nativeEvent.contentHeight / density);
-        if (nextHeight < 0)
-            return;
-        if (nextHeight === 0 && !renderJsonIsCollapsedEmpty)
-            return;
-        if (nextHeight === 0) {
-            setContentHeight((currentHeight) => currentHeight === 0 ? currentHeight : 0);
-            return;
-        }
-        setContentHeight((currentHeight) => currentHeight === nextHeight ? currentHeight : nextHeight);
-        if (contentId && layoutContextKey != null) {
-            (0, heightCache_1.setHeightCache)(contentId, layoutContextKey, renderJsonHash, nextHeight);
-        }
-    }, [renderJsonIsCollapsedEmpty, contentId, layoutContextKey, renderJsonHash]);
-    const handlePressMention = (0, react_1.useCallback)((event) => {
-        if (!mentionPressHandler)
-            return;
-        const { docPos, label } = event.nativeEvent;
-        const resolvedMention = mentionPayloadsByDocPos.get(docPos);
-        mentionPressHandler({
-            docPos,
-            label: resolvedMention?.renderedLabel ?? label,
-            attrs: resolvedMention?.attrs ?? {},
-        });
-    }, [mentionPayloadsByDocPos, mentionPressHandler]);
-    const handlePressLink = (0, react_1.useCallback)((event) => {
-        if (!onPressLink)
-            return;
-        onPressLink({
-            href: event.nativeEvent.href,
-            text: event.nativeEvent.text,
-        });
-    }, [onPressLink]);
-    const nativeStyle = (0, react_1.useMemo)(() => {
-        let measuredStyle = null;
-        if (renderJsonIsCollapsedEmpty) {
-            measuredStyle = { height: 0, minHeight: 0 };
-        }
-        else if (contentHeight != null && contentHeight > 0) {
-            measuredStyle = { minHeight: contentHeight };
-        }
-        else if (preMeasuredHeight != null && preMeasuredHeight > 0) {
-            measuredStyle = { minHeight: preMeasuredHeight };
-        }
-        return [
-            { minHeight: renderJsonIsCollapsedEmpty ? 0 : 1 },
-            style,
-            measuredStyle,
-        ];
-    }, [contentHeight, preMeasuredHeight, renderJsonIsCollapsedEmpty, style]);
-    return ((0, jsx_runtime_1.jsx)(NativeProseViewerView, { style: nativeStyle, renderJson: renderJson, themeJson: themeJson, collapsesWhenEmpty: collapseTrailingEmptyParagraphs, enableLinkTaps: enableLinkTaps, interceptLinkTaps: typeof onPressLink === 'function', onContentHeightChange: handleContentHeightChange, onPressLink: typeof onPressLink === 'function' ? handlePressLink : undefined, onPressMention: typeof mentionPressHandler === 'function'
-            ? handlePressMention
-            : undefined }));
+/**
+ * Read-only presentation of the canonical block-editor surface.
+ *
+ * The viewer deliberately shares the editor's document parser, render tree,
+ * layout surface, theme implementation, and native views. Keeping it as a
+ * configured editor prevents the read-only product from becoming a second
+ * rendering engine with subtly different schema behavior.
+ */
+function NativeProseViewer(props) {
+    const { schema = schemas_1.tiptapSchema, theme, style, allowBase64Images = false, } = props;
+    const documentSchema = schema;
+    const document = (0, react_1.useMemo)(() => 'contentJSON' in props && props.contentJSON != null
+        ? (0, schemas_1.normalizeDocumentJson)(parseDocument(props.contentJSON), documentSchema)
+        : undefined, [documentSchema, props.contentJSON, props.revision]);
+    if ('collapseWhenEmpty' in props &&
+        props.collapseWhenEmpty &&
+        document &&
+        isEmptyDocument(document)) {
+        return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [style, { height: 0, minHeight: 0 }] });
+    }
+    return ((0, jsx_runtime_1.jsx)(NativeRichTextEditor_1.NativeRichTextEditor, { value: 'contentHTML' in props ? props.contentHTML : undefined, valueJSON: document, valueJSONRevision: props.revision, schema: documentSchema, editable: false, showToolbar: false, heightBehavior: "autoGrow", allowBase64Images: allowBase64Images, allowImageResizing: false, theme: theme, containerStyle: style }));
 }

package/dist/NativeRichTextEditor.d.ts

@@ -4,7 +4,7 @@ import { type ActiveState, type DocumentJSON, type HistoryState, type Selection
 import { type EditorToolbarHeadingLevel, type EditorToolbarItem } from './EditorToolbar';
 import { type EditorTheme } from './EditorTheme';
 import { type EditorAddons } from './addons';
-import { type ImageNodeAttributes, type SchemaDefinition } from './schemas';
+import { type ColumnsFragmentOptions, type ImageNodeAttributes, type SchemaDefinition, type TableFragmentOptions } from './schemas';
 export type NativeRichTextEditorHeightBehavior = 'fixed' | 'autoGrow';
 export type NativeRichTextEditorToolbarPlacement = 'keyboard' | 'inline';
 export type NativeRichTextEditorValueJSONUpdateMode = 'replace' | 'reset';
@@ -137,6 +137,15 @@ export interface NativeRichTextEditorRef {
     insertNode(nodeType: string): void;
     /** Insert a block image node with the given source and optional metadata. */
     insertImage(src: string, attrs?: Omit<ImageNodeAttributes, 'src'>): void;
+    /** Insert a structured columns layout at the current selection. */
+    insertColumns(options?: ColumnsFragmentOptions): void;
+    /** Insert a structured table at the current selection. */
+    insertTable(options?: TableFragmentOptions): void;
+    insertTableRow(after?: boolean): void;
+    deleteTableRow(): void;
+    insertTableColumn(after?: boolean): void;
+    deleteTableColumn(): void;
+    moveTableCell(forward?: boolean): void;
     /** Insert text at the current cursor position. */
     insertText(text: string): void;
     /** Insert HTML content at the current selection. */