@apollohg/react-native-prose-editor 0.5.2 → 0.5.4

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);
@@ -158,6 +159,141 @@ function applyResolvedMentionRendering(renderJson, mentionPayloadsByDocPos) {
     });
     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) {
+        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 {
@@ -194,9 +330,21 @@ function extractRenderError(json) {
         return null;
     }
 }
-function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, style, allowBase64Images = false, mentionPrefix, resolveMentionTheme, 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()
@@ -206,32 +354,47 @@ function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, st
             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 applyResolvedMentionRendering(nextRenderJson, mentionPayloadsByDocPos);
+            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);
     const allowContentHeightShrinkRef = (0, react_1.useRef)(true);
     (0, react_1.useEffect)(() => {
         allowContentHeightShrinkRef.current = true;
-    }, [contentJSONRevision, renderJson, themeJson]);
+    }, [resolvedContentRevision, renderJson, themeJson]);
     const handleContentHeightChange = (0, react_1.useCallback)((event) => {
         const nextHeight = event.nativeEvent.contentHeight;
-        if (nextHeight <= 0)
+        if (nextHeight < 0)
             return;
+        if (nextHeight === 0 && !renderJsonIsCollapsedEmpty)
+            return;
+        if (nextHeight === 0) {
+            setContentHeight((currentHeight) => currentHeight === 0 ? currentHeight : 0);
+            return;
+        }
         setContentHeight((currentHeight) => currentHeight == null ||
             nextHeight >= currentHeight ||
             allowContentHeightShrinkRef.current
@@ -242,7 +405,7 @@ function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, st
                     : nextHeight;
             })()
             : currentHeight);
-    }, []);
+    }, [renderJsonIsCollapsedEmpty]);
     const handlePressMention = (0, react_1.useCallback)((event) => {
         if (!onPressMention)
             return;
@@ -254,10 +417,27 @@ function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, st
             attrs: resolvedMention?.attrs ?? {},
         });
     }, [mentionPayloadsByDocPos, onPressMention]);
-    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, 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)(() => {
+        let measuredStyle = null;
+        if (renderJsonIsCollapsedEmpty) {
+            measuredStyle = { height: 0, minHeight: 0 };
+        }
+        else if (contentHeight != null && contentHeight > 0) {
+            measuredStyle = { minHeight: contentHeight };
+        }
+        return [
+            { minHeight: renderJsonIsCollapsedEmpty ? 0 : 1 },
+            style,
+            measuredStyle,
+        ];
+    }, [contentHeight, 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 onPressMention === 'function' ? handlePressMention : undefined }));
 }

package/dist/NativeRichTextEditor.js

@@ -16,6 +16,9 @@ const DEV_NATIVE_VIEW_KEY = __DEV__
     : 'native-editor';
 const LINK_TOOLBAR_ACTION_KEY = '__native-editor-link__';
 const IMAGE_TOOLBAR_ACTION_KEY = '__native-editor-image__';
+const DEFAULT_MENTION_TRIGGER = '@';
+const MAX_INLINE_MENTION_SUGGESTIONS = 8;
+const INLINE_TOOLBAR_BORDER_COLOR = '#E5E5EA';
 function mapToolbarChildForNative(item, activeState, editable, onRequestLink, onRequestImage) {
     if (item.type === 'link') {
         return {
@@ -34,7 +37,9 @@ function mapToolbarChildForNative(item, activeState, editable, onRequestLink, on
             label: item.label,
             icon: item.icon,
             isActive: false,
-            isDisabled: !editable || !onRequestImage || !activeState.insertableNodes.includes(schemas_1.IMAGE_NODE_NAME),
+            isDisabled: !editable ||
+                !onRequestImage ||
+                !activeState.insertableNodes.includes(schemas_1.IMAGE_NODE_NAME),
         };
     }
     return item;
@@ -65,6 +70,34 @@ function isPromiseLike(value) {
 function isRecord(value) {
     return value != null && typeof value === 'object' && !Array.isArray(value);
 }
+function resolveMentionTrigger(addons) {
+    return addons?.mentions?.trigger?.trim() || DEFAULT_MENTION_TRIGGER;
+}
+function resolveMentionSuggestionLabel(suggestion, trigger) {
+    return suggestion.label?.trim() || `${trigger}${suggestion.title}`;
+}
+function filterMentionSuggestions(suggestions, query, trigger) {
+    const normalizedQuery = query.trim().toLowerCase();
+    const filtered = normalizedQuery.length === 0
+        ? suggestions
+        : suggestions.filter((suggestion) => {
+            const label = resolveMentionSuggestionLabel(suggestion, trigger);
+            return (suggestion.title.toLowerCase().includes(normalizedQuery) ||
+                label.toLowerCase().includes(normalizedQuery) ||
+                suggestion.subtitle?.toLowerCase().includes(normalizedQuery) === true);
+        });
+    return filtered.slice(0, MAX_INLINE_MENTION_SUGGESTIONS);
+}
+function resolveMentionSuggestionAttrs(suggestion, trigger) {
+    const attrs = { ...(suggestion.attrs ?? {}) };
+    if (!('label' in attrs)) {
+        attrs.label = resolveMentionSuggestionLabel(suggestion, trigger);
+    }
+    if (!('mentionSuggestionChar' in attrs)) {
+        attrs.mentionSuggestionChar = trigger;
+    }
+    return attrs;
+}
 const AUTO_LINK_URL_REGEX = /(?:https?:\/\/|www\.)\S+/giu;
 const AUTO_LINK_INLINE_PLACEHOLDER = '\uFFFC';
 const AUTO_LINK_LEADING_BOUNDARY_CHARS = new Set(['(', '[', '{', '<', '"', "'"]);
@@ -142,7 +175,8 @@ function trimAutoLinkTrailingPunctuation(value) {
             result = chars.join('');
             continue;
         }
-        if ((lastChar === '"' || lastChar === "'") && countOccurrences(result, lastChar) % 2 !== 0) {
+        if ((lastChar === '"' || lastChar === "'") &&
+            countOccurrences(result, lastChar) % 2 !== 0) {
             chars.pop();
             result = chars.join('');
             continue;
@@ -169,7 +203,9 @@ function isAutoLinkBoundaryChar(char) {
     if (!char) {
         return true;
     }
-    return /\s/u.test(char) || char === AUTO_LINK_INLINE_PLACEHOLDER || AUTO_LINK_LEADING_BOUNDARY_CHARS.has(char);
+    return (/\s/u.test(char) ||
+        char === AUTO_LINK_INLINE_PLACEHOLDER ||
+        AUTO_LINK_LEADING_BOUNDARY_CHARS.has(char));
 }
 function isAutoLinkTrailingDelimiterChar(char) {
     if (!char) {
@@ -236,13 +272,15 @@ function findAutoLinkCandidateInInlineBlock(block, cursorDocPos) {
         return null;
     }
     let localIndex = 0;
-    while (localIndex < block.docPositions.length && block.docPositions[localIndex] < cursorDocPos) {
+    while (localIndex < block.docPositions.length &&
+        block.docPositions[localIndex] < cursorDocPos) {
         localIndex += 1;
     }
     if (localIndex === 0) {
         return null;
     }
-    if (cursorDocPos < block.contentEnd && !isAutoLinkTrailingDelimiterChar(block.chars[localIndex - 1])) {
+    if (cursorDocPos < block.contentEnd &&
+        !isAutoLinkTrailingDelimiterChar(block.chars[localIndex - 1])) {
         return null;
     }
     const prefixChars = block.chars.slice(0, localIndex);
@@ -444,11 +482,14 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         canUndo: false,
         canRedo: false,
     });
+    const [mentionQueryEvent, setMentionQueryEvent] = (0, react_1.useState)(null);
     // Selection and rendered text length refs (non-rendering state)
     const selectionRef = (0, react_1.useRef)({ type: 'text', anchor: 0, head: 0 });
     const renderedTextLengthRef = (0, react_1.useRef)(0);
     const documentVersionRef = (0, react_1.useRef)(null);
     const toolbarRef = (0, react_1.useRef)(null);
+    const mentionQueryEventRef = (0, react_1.useRef)(null);
+    mentionQueryEventRef.current = mentionQueryEvent;
     const toolbarItemsSerializationCacheRef = (0, react_1.useRef)(null);
     // Stable callback refs to avoid re-renders
     const onContentChangeRef = (0, react_1.useRef)(onContentChange);
@@ -672,12 +713,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             setIsReady(false);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        maxLength,
-        syncStateFromUpdate,
-        allowBase64Images,
-        serializedSchemaJson,
-    ]);
+    }, [maxLength, syncStateFromUpdate, allowBase64Images, serializedSchemaJson]);
     (0, react_1.useEffect)(() => {
         if (value == null)
             return;
@@ -803,6 +839,9 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     const handleFocusChange = (0, react_1.useCallback)((event) => {
         const { isFocused: focused } = event.nativeEvent;
         setIsFocused(focused);
+        if (!focused) {
+            setMentionQueryEvent(null);
+        }
         if (focused) {
             onFocusRef.current?.();
         }
@@ -810,6 +849,12 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             onBlurRef.current?.();
         }
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (addons?.mentions != null) {
+            return;
+        }
+        setMentionQueryEvent(null);
+    }, [addons?.mentions]);
     const handleContentHeightChange = (0, react_1.useCallback)((event) => {
         if (heightBehavior !== 'autoGrow')
             return;
@@ -897,6 +942,46 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         }
         onToolbarAction?.(event.nativeEvent.key);
     }, [onToolbarAction, openImageRequest, openLinkRequest]);
+    const resolveMentionSelectionAttrs = (0, react_1.useCallback)((selectionEvent) => {
+        let resolvedAttrs;
+        try {
+            resolvedAttrs =
+                addonsRef.current?.mentions?.resolveSelectionAttrs?.(selectionEvent);
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('NativeRichTextEditor: mentions.resolveSelectionAttrs threw', error);
+            }
+        }
+        return isRecord(resolvedAttrs)
+            ? { ...selectionEvent.attrs, ...resolvedAttrs }
+            : selectionEvent.attrs;
+    }, []);
+    const handleInlineMentionSuggestionPress = (0, react_1.useCallback)((suggestion) => {
+        const mentionQuery = mentionQueryEventRef.current;
+        const mentions = addonsRef.current?.mentions;
+        if (!mentionQuery ||
+            !mentions ||
+            !bridgeRef.current ||
+            bridgeRef.current.isDestroyed) {
+            return;
+        }
+        const attrs = resolveMentionSelectionAttrs({
+            trigger: mentionQuery.trigger,
+            suggestion,
+            attrs: resolveMentionSuggestionAttrs(suggestion, mentionQuery.trigger),
+            range: mentionQuery.range,
+        });
+        const update = runAndApply(() => bridgeRef.current?.insertContentJsonAtSelectionScalar(mentionQuery.range.anchor, mentionQuery.range.head, (0, addons_1.buildMentionFragmentJson)(attrs)) ?? null);
+        if (update) {
+            setMentionQueryEvent(null);
+            mentions.onSelect?.({
+                trigger: mentionQuery.trigger,
+                suggestion,
+                attrs,
+            });
+        }
+    }, [resolveMentionSelectionAttrs, runAndApply]);
     const handleAddonEvent = (0, react_1.useCallback)((event) => {
         let parsed = null;
         try {
@@ -908,11 +993,18 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         if (!parsed)
             return;
         if (parsed.type === 'mentionsQueryChange') {
-            addonsRef.current?.mentions?.onQueryChange?.({
+            const nextEvent = {
                 query: parsed.query,
                 trigger: parsed.trigger,
                 range: parsed.range,
                 isActive: parsed.isActive,
+            };
+            setMentionQueryEvent(parsed.isActive ? nextEvent : null);
+            addonsRef.current?.mentions?.onQueryChange?.({
+                query: nextEvent.query,
+                trigger: nextEvent.trigger,
+                range: nextEvent.range,
+                isActive: nextEvent.isActive,
             });
             return;
         }
@@ -926,19 +1018,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 attrs: parsed.attrs,
                 range: parsed.range,
             };
-            let resolvedAttrs;
-            try {
-                resolvedAttrs =
-                    addonsRef.current?.mentions?.resolveSelectionAttrs?.(selectionEvent);
-            }
-            catch (error) {
-                if (__DEV__) {
-                    console.error('NativeRichTextEditor: mentions.resolveSelectionAttrs threw', error);
-                }
-            }
-            const finalAttrs = isRecord(resolvedAttrs)
-                ? { ...parsed.attrs, ...resolvedAttrs }
-                : parsed.attrs;
+            const finalAttrs = resolveMentionSelectionAttrs(selectionEvent);
             const update = runAndApply(() => bridgeRef.current?.insertContentJsonAtSelectionScalar(parsed.range.anchor, parsed.range.head, (0, addons_1.buildMentionFragmentJson)(finalAttrs)) ?? null);
             if (update) {
                 addonsRef.current?.mentions?.onSelect?.({
@@ -959,7 +1039,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 attrs: parsed.attrs,
             });
         }
-    }, [runAndApply]);
+    }, [resolveMentionSelectionAttrs, runAndApply]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         focus() {
             nativeViewRef.current?.focus?.();
@@ -1092,6 +1172,25 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         borderWidth: theme?.toolbar?.borderWidth,
         borderRadius: theme?.toolbar?.borderRadius,
     };
+    const inlineToolbarMarginTop = theme?.toolbar?.marginTop ?? 8;
+    const inlineToolbarShowTopBorder = theme?.toolbar?.showTopBorder ?? false;
+    const inlineToolbarMentionTheme = theme?.mentions ?? addons?.mentions?.theme;
+    const inlineToolbarContentTopBorderStyle = inlineToolbarShowTopBorder
+        ? {
+            borderTopWidth: theme?.toolbar?.borderWidth ?? react_native_1.StyleSheet.hairlineWidth,
+            borderTopColor: theme?.toolbar?.borderColor ?? INLINE_TOOLBAR_BORDER_COLOR,
+        }
+        : null;
+    const inlineMentionSuggestions = toolbarPlacement === 'inline' &&
+        isFocused &&
+        mentionQueryEvent != null &&
+        addons?.mentions != null
+        ? filterMentionSuggestions(addons.mentions.suggestions ?? [], mentionQueryEvent.query, mentionQueryEvent.trigger || resolveMentionTrigger(addons))
+        : [];
+    const shouldShowInlineMentionSuggestions = shouldRenderJsToolbar &&
+        toolbarPlacement === 'inline' &&
+        isFocused &&
+        inlineMentionSuggestions.length > 0;
     const containerMinHeight = react_native_1.StyleSheet.flatten(containerStyle)?.minHeight;
     const nativeViewStyleParts = [];
     if (containerMinHeight != null) {
@@ -1106,6 +1205,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     const nativeViewStyle = nativeViewStyleParts.length <= 1 ? nativeViewStyleParts[0] : nativeViewStyleParts;
     const jsToolbar = ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: toolbarRef, testID: 'native-editor-js-toolbar', style: [
             styles.inlineToolbar,
+            { marginTop: inlineToolbarMarginTop },
             inlineToolbarChrome.backgroundColor != null
                 ? { backgroundColor: inlineToolbarChrome.backgroundColor }
                 : null,
@@ -1118,7 +1218,43 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             inlineToolbarChrome.borderRadius != null
                 ? { borderRadius: inlineToolbarChrome.borderRadius }
                 : null,
-        ], onLayout: updateToolbarFrame, children: (0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { activeState: activeState, historyState: historyState, toolbarItems: toolbarItems, theme: theme?.toolbar, showTopBorder: false, onToggleMark: (mark) => runAndApply(() => bridgeRef.current?.toggleMark(mark) ?? null, {
+        ], onLayout: updateToolbarFrame, children: shouldShowInlineMentionSuggestions ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: 'native-editor-inline-mention-suggestions', style: [
+                styles.inlineMentionSuggestionsContainer,
+                inlineToolbarContentTopBorderStyle,
+            ], children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.inlineMentionSuggestionsContent, keyboardShouldPersistTaps: 'always', children: inlineMentionSuggestions.map((suggestion) => {
+                    const label = resolveMentionSuggestionLabel(suggestion, mentionQueryEvent?.trigger ?? resolveMentionTrigger(addons));
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: `native-editor-inline-mention-suggestion-${suggestion.key}`, onPress: () => handleInlineMentionSuggestionPress(suggestion), accessibilityRole: 'button', accessibilityLabel: label, style: ({ pressed }) => [
+                            styles.inlineMentionSuggestion,
+                            {
+                                backgroundColor: pressed
+                                    ? (inlineToolbarMentionTheme?.optionHighlightedBackgroundColor ??
+                                        'rgba(0, 122, 255, 0.12)')
+                                    : (inlineToolbarMentionTheme?.backgroundColor ??
+                                        '#F2F2F7'),
+                                borderColor: inlineToolbarMentionTheme?.borderColor ??
+                                    'transparent',
+                                borderWidth: inlineToolbarMentionTheme?.borderWidth ?? 0,
+                                borderRadius: inlineToolbarMentionTheme?.borderRadius ?? 12,
+                            },
+                        ], children: ({ pressed }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
+                                        styles.inlineMentionSuggestionTitle,
+                                        {
+                                            color: pressed
+                                                ? (inlineToolbarMentionTheme?.optionHighlightedTextColor ??
+                                                    inlineToolbarMentionTheme?.optionTextColor ??
+                                                    '#000000')
+                                                : (inlineToolbarMentionTheme?.optionTextColor ??
+                                                    inlineToolbarMentionTheme?.textColor ??
+                                                    '#000000'),
+                                        },
+                                    ], children: label }), suggestion.subtitle ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
+                                        styles.inlineMentionSuggestionSubtitle,
+                                        {
+                                            color: inlineToolbarMentionTheme?.optionSecondaryTextColor ??
+                                                '#8E8E93',
+                                        },
+                                    ], children: suggestion.subtitle })) : null] })) }, suggestion.key));
+                }) }) })) : ((0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { activeState: activeState, historyState: historyState, toolbarItems: toolbarItems, theme: theme?.toolbar, showTopBorder: inlineToolbarShowTopBorder, onToggleMark: (mark) => runAndApply(() => bridgeRef.current?.toggleMark(mark) ?? null, {
                 skipNativeApplyIfContentUnchanged: true,
             }), onToggleListType: (listType) => runAndApply(() => bridgeRef.current?.toggleList(listType) ?? null), onToggleHeading: (level) => runAndApply(() => bridgeRef.current?.toggleHeading(level) ?? null), onToggleBlockquote: () => runAndApply(() => bridgeRef.current?.toggleBlockquote() ?? null), onInsertNodeType: (nodeType) => runAndApply(() => bridgeRef.current?.insertNode(nodeType) ?? null), onRunCommand: (command) => {
                 switch (command) {
@@ -1143,7 +1279,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 skipNativeApplyIfContentUnchanged: true,
             }), onToggleStrike: () => runAndApply(() => bridgeRef.current?.toggleMark('strike') ?? null, {
                 skipNativeApplyIfContentUnchanged: true,
-            }), onToggleBulletList: () => runAndApply(() => bridgeRef.current?.toggleList('bulletList') ?? null), onToggleOrderedList: () => runAndApply(() => bridgeRef.current?.toggleList('orderedList') ?? null), onIndentList: () => runAndApply(() => bridgeRef.current?.indentListItem() ?? null), onOutdentList: () => runAndApply(() => bridgeRef.current?.outdentListItem() ?? null), onInsertHorizontalRule: () => runAndApply(() => bridgeRef.current?.insertNode('horizontalRule') ?? null), onInsertLineBreak: () => runAndApply(() => bridgeRef.current?.insertNode('hardBreak') ?? null), onUndo: () => runAndApply(() => bridgeRef.current?.undo() ?? null), onRedo: () => runAndApply(() => bridgeRef.current?.redo() ?? null) }) }));
+            }), onToggleBulletList: () => runAndApply(() => bridgeRef.current?.toggleList('bulletList') ?? null), onToggleOrderedList: () => runAndApply(() => bridgeRef.current?.toggleList('orderedList') ?? null), onIndentList: () => runAndApply(() => bridgeRef.current?.indentListItem() ?? null), onOutdentList: () => runAndApply(() => bridgeRef.current?.outdentListItem() ?? null), onInsertHorizontalRule: () => runAndApply(() => bridgeRef.current?.insertNode('horizontalRule') ?? null), onInsertLineBreak: () => runAndApply(() => bridgeRef.current?.insertNode('hardBreak') ?? null), onUndo: () => runAndApply(() => bridgeRef.current?.undo() ?? null), onRedo: () => runAndApply(() => bridgeRef.current?.redo() ?? null) })) }));
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, containerStyle], children: [(0, jsx_runtime_1.jsx)(NativeEditorView, { ref: nativeViewRef, style: nativeViewStyle, editorId: editorInstanceId, placeholder: placeholder, editable: editable, autoFocus: autoFocus, showToolbar: showToolbar, toolbarPlacement: toolbarPlacement, heightBehavior: heightBehavior, allowImageResizing: allowImageResizing, themeJson: themeJson, addonsJson: addonsJson, toolbarItemsJson: toolbarItemsJson, remoteSelectionsJson: remoteSelectionsJson, toolbarFrameJson: toolbarPlacement === 'inline' && isFocused ? toolbarFrameJson : undefined, editorUpdateJson: pendingNativeUpdate.json, editorUpdateRevision: pendingNativeUpdate.revision, onEditorUpdate: handleUpdate, onSelectionChange: handleSelectionChange, onFocusChange: handleFocusChange, onContentHeightChange: handleContentHeightChange, onToolbarAction: handleToolbarAction, onAddonEvent: handleAddonEvent }, DEV_NATIVE_VIEW_KEY), shouldRenderJsToolbar && jsToolbar] }));
 });
 const styles = react_native_1.StyleSheet.create({
@@ -1151,9 +1287,32 @@ const styles = react_native_1.StyleSheet.create({
         position: 'relative',
     },
     inlineToolbar: {
-        marginTop: 8,
         borderWidth: react_native_1.StyleSheet.hairlineWidth,
-        borderColor: '#E5E5EA',
+        borderColor: INLINE_TOOLBAR_BORDER_COLOR,
+        overflow: 'hidden',
+    },
+    inlineMentionSuggestionsContainer: {
         overflow: 'hidden',
     },
+    inlineMentionSuggestionsContent: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        alignItems: 'center',
+    },
+    inlineMentionSuggestion: {
+        minWidth: 88,
+        minHeight: 40,
+        marginRight: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        justifyContent: 'center',
+    },
+    inlineMentionSuggestionTitle: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    inlineMentionSuggestionSubtitle: {
+        marginTop: 1,
+        fontSize: 12,
+    },
 });

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { NativeRichTextEditor, type NativeRichTextEditorProps, type NativeRichTextEditorRef, type NativeRichTextEditorHeightBehavior, type NativeRichTextEditorToolbarPlacement, type RemoteSelectionDecoration, type LinkRequestContext, type ImageRequestContext, } from './NativeRichTextEditor';
-export { NativeProseViewer, type NativeProseViewerProps, type NativeProseViewerMentionRenderContext, type NativeProseViewerMentionPressEvent, } from './NativeProseViewer';
+export { NativeProseViewer, type NativeProseViewerProps, type NativeProseViewerLinkPressEvent, type NativeProseViewerMentionRenderContext, type NativeProseViewerMentionPressEvent, } from './NativeProseViewer';
 export { EditorToolbar, DEFAULT_EDITOR_TOOLBAR_ITEMS, type EditorToolbarProps, type EditorToolbarItem, type EditorToolbarLeafItem, type EditorToolbarGroupChildItem, type EditorToolbarGroupItem, type EditorToolbarGroupPresentation, type EditorToolbarIcon, type EditorToolbarDefaultIconId, type EditorToolbarSFSymbolIcon, type EditorToolbarMaterialIcon, type EditorToolbarCommand, type EditorToolbarHeadingLevel, type EditorToolbarListType, } from './EditorToolbar';
 export type { EditorContentInsets, EditorTheme, EditorTextStyle, EditorHeadingTheme, EditorListTheme, EditorHorizontalRuleTheme, EditorMentionTheme, EditorToolbarTheme, EditorToolbarAppearance, EditorFontStyle, EditorFontWeight, } from './EditorTheme';
 export { MENTION_NODE_NAME, mentionNodeSpec, withMentionsSchema, buildMentionFragmentJson, type EditorAddons, type MentionsAddonConfig, type MentionSuggestion, type MentionQueryChangeEvent, type MentionSelectionAttrsEvent, type MentionSelectEvent, type EditorAddonEvent, } from './addons';