@apollohg/react-native-prose-editor 0.5.1 → 0.5.3

package/dist/NativeProseViewer.js

@@ -17,6 +17,7 @@ function getNativeProseViewerModule() {
     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);
@@ -56,7 +57,21 @@ function normalizeMentionAttrs(node) {
     }
     return attrs;
 }
-function collectMentionPayloadsByDocPos(document) {
+function baseMentionLabelFromAttrs(attrs) {
+    const label = attrs.label;
+    return typeof label === 'string' && label.length > 0 ? label : 'mention';
+}
+function resolveMentionPrefix(mentionPrefix, mention) {
+    const rawPrefix = typeof mentionPrefix === 'function' ? mentionPrefix(mention) : mentionPrefix;
+    return typeof rawPrefix === 'string' && rawPrefix.length > 0 ? rawPrefix : undefined;
+}
+function applyMentionPrefix(label, prefix) {
+    if (!prefix || label.startsWith(prefix)) {
+        return label;
+    }
+    return `${prefix}${label}`;
+}
+function collectMentionPayloadsByDocPos(document, mentionPrefix, resolveMentionTheme) {
     const mentions = new Map();
     const visit = (node, pos, isRoot = false) => {
         if (node == null || typeof node !== 'object') {
@@ -71,8 +86,15 @@ function collectMentionPayloadsByDocPos(document) {
         }
         if (nodeType === 'mention') {
             const attrs = normalizeMentionAttrs(nodeRecord);
-            const label = typeof attrs.label === 'string' ? attrs.label : undefined;
-            mentions.set(pos, { label, attrs });
+            const label = baseMentionLabelFromAttrs(attrs);
+            const mentionContext = { docPos: pos, label, attrs };
+            const renderedLabel = applyMentionPrefix(label, resolveMentionPrefix(mentionPrefix, mentionContext));
+            const mentionTheme = resolveMentionTheme?.(mentionContext) ?? undefined;
+            mentions.set(pos, {
+                ...mentionContext,
+                renderedLabel,
+                mentionTheme,
+            });
         }
         if (isRoot && nodeType === 'doc') {
             let nextPos = pos;
@@ -93,6 +115,132 @@ function collectMentionPayloadsByDocPos(document) {
     visit(document, 0, true);
     return mentions;
 }
+function applyResolvedMentionRendering(renderJson, mentionPayloadsByDocPos) {
+    if (mentionPayloadsByDocPos.size === 0) {
+        return renderJson;
+    }
+    let parsedElements;
+    try {
+        parsedElements = JSON.parse(renderJson);
+    }
+    catch {
+        return renderJson;
+    }
+    if (!Array.isArray(parsedElements)) {
+        return renderJson;
+    }
+    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 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 {
@@ -129,34 +277,73 @@ function extractRenderError(json) {
         return null;
     }
 }
-function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, style, allowBase64Images = false, onPressMention, }) {
+function NativeProseViewer({ ...props }) {
+    const { contentRevision, contentJSONRevision, schema, theme, style, allowBase64Images = false, collapseTrailingEmptyParagraphs = true, enableLinkTaps = true, mentionPrefix, resolveMentionTheme, onPressLink, onPressMention, } = props;
+    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)(() => serializeDocumentInput(contentJSON, documentSchema), [contentJSON, contentJSONRevision, documentSchema]);
+    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), [normalizedDocument]);
+        : collectMentionPayloadsByDocPos(normalizedDocument, mentionPrefix, resolveMentionTheme), [mentionPrefix, normalizedDocument, resolveMentionTheme]);
     const renderJson = (0, react_1.useMemo)(() => {
         const configJson = JSON.stringify({
             schema: documentSchema,
             ...(allowBase64Images ? { allowBase64Images } : {}),
         });
-        const nextRenderJson = getNativeProseViewerModule().renderDocumentJson(configJson, serializedContentJson);
+        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)) {
-            return nextRenderJson;
+            const collapsedRenderJson = collapseTrailingEmptyParagraphs
+                ? collapseTrailingEmptyParagraphRenderElements(nextRenderJson)
+                : nextRenderJson;
+            return applyResolvedMentionRendering(collapsedRenderJson, mentionPayloadsByDocPos);
         }
         console.error('NativeProseViewer: native renderDocumentJson returned an invalid payload.');
         return '[]';
-    }, [allowBase64Images, documentSchema, serializedContentJson]);
+    }, [
+        allowBase64Images,
+        collapseTrailingEmptyParagraphs,
+        contentHTML,
+        documentSchema,
+        mentionPayloadsByDocPos,
+        serializedContentJson,
+    ]);
     const [contentHeight, setContentHeight] = (0, react_1.useState)(null);
+    const allowContentHeightShrinkRef = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        allowContentHeightShrinkRef.current = true;
+    }, [resolvedContentRevision, renderJson, themeJson]);
     const handleContentHeightChange = (0, react_1.useCallback)((event) => {
         const nextHeight = event.nativeEvent.contentHeight;
-        setContentHeight((currentHeight) => currentHeight === nextHeight ? currentHeight : nextHeight);
+        if (nextHeight <= 0)
+            return;
+        setContentHeight((currentHeight) => currentHeight == null ||
+            nextHeight >= currentHeight ||
+            allowContentHeightShrinkRef.current
+            ? (() => {
+                allowContentHeightShrinkRef.current = false;
+                return currentHeight === nextHeight
+                    ? currentHeight
+                    : nextHeight;
+            })()
+            : currentHeight);
     }, []);
     const handlePressMention = (0, react_1.useCallback)((event) => {
         if (!onPressMention)
@@ -165,10 +352,22 @@ function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, st
         const resolvedMention = mentionPayloadsByDocPos.get(docPos);
         onPressMention({
             docPos,
-            label: resolvedMention?.label ?? label,
+            label: resolvedMention?.renderedLabel ?? label,
             attrs: resolvedMention?.attrs ?? {},
         });
     }, [mentionPayloadsByDocPos, onPressMention]);
-    const nativeStyle = (0, react_1.useMemo)(() => [{ minHeight: 1 }, style, contentHeight != null ? { height: contentHeight } : null], [contentHeight, style]);
-    return ((0, jsx_runtime_1.jsx)(NativeProseViewerView, { style: nativeStyle, renderJson: renderJson, themeJson: themeJson, onContentHeightChange: handleContentHeightChange, onPressMention: typeof onPressMention === 'function' ? handlePressMention : undefined }));
+    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)(() => [
+        { minHeight: 1 },
+        style,
+        contentHeight != null ? { minHeight: contentHeight } : null,
+    ], [contentHeight, style]);
+    return ((0, jsx_runtime_1.jsx)(NativeProseViewerView, { style: nativeStyle, renderJson: renderJson, themeJson: themeJson, enableLinkTaps: enableLinkTaps, interceptLinkTaps: typeof onPressLink === 'function', onContentHeightChange: handleContentHeightChange, onPressLink: typeof onPressLink === 'function' ? handlePressLink : undefined, onPressMention: typeof onPressMention === 'function' ? handlePressMention : undefined }));
 }

package/dist/NativeRichTextEditor.d.ts

@@ -63,6 +63,8 @@ export interface NativeRichTextEditorProps {
     onRequestLink?: (context: LinkRequestContext) => void;
     /** Called when a toolbar image item is pressed so the host can choose an image source. */
     onRequestImage?: (context: ImageRequestContext) => void;
+    /** Whether plain URLs typed or pasted into the editor should be converted into link marks automatically. */
+    autoDetectLinks?: boolean;
     /** Whether `data:image/...` sources are accepted for image insertion and HTML parsing. */
     allowBase64Images?: boolean;
     /** Whether selected images show native resize handles. */