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

package/README.md

@@ -5,8 +5,8 @@
 This project is currently in `alpha` and the API, behavior, and packaging may still change.
 
 <p align="center">
-  <img src="./docs/images/example-ios.png" alt="Example editor Android" width="45%" align="top" />
-  <img src="./docs/images/example-android.png" alt="Example editor iOS" width="45%" align="top" />
+  <img src="https://raw.githubusercontent.com/wiki/apollohg/react-native-prose-editor/images/example-ios.png" alt="Example editor iOS" width="45%" align="top" />
+  <img src="https://raw.githubusercontent.com/wiki/apollohg/react-native-prose-editor/images/example-android.png" alt="Example editor Android" width="45%" align="top" />
 </p>
 
 This repository contains three main pieces:
@@ -38,7 +38,8 @@ The editor already supports:
 - [`android`](./android): Android native view, rendering bridge, and Expo module wiring
 - [`Rust Editor Core`](./rust/editor-core): document model, transforms, schema system, selection, history, serialization, and tests
 - [`example`](./example): Expo 54 app for manual QA and development
-- [`docs`](./docs): project documentation
+
+Project documentation now lives in the [GitHub Wiki](https://github.com/apollohg/react-native-prose-editor/wiki).
 
 ## Installation
 
@@ -56,7 +57,7 @@ Required peer dependencies:
 Install the package:
 
 ```sh
-npm install @apollohg/react-native-prose-editor@0.5.0
+npm install @apollohg/react-native-prose-editor@0.5.1
 ```
 
 For local package development in this repo:
@@ -67,7 +68,7 @@ npm --prefix example install
 npm run example:prebuild
 ```
 
-For full setup details, including peer dependencies, example app setup, and iOS pods, see the [Installation Guide](./docs/guides/installation.md).
+For full setup details, including peer dependencies, example app setup, and iOS pods, see the [Installation Guide](https://github.com/apollohg/react-native-prose-editor/wiki/Installation).
 
 ## Basic Usage
 
@@ -106,9 +107,9 @@ The main extension points today are:
 - `addons`: configure optional features like @-mentions
 - `heightBehavior`: switch between internal scrolling and auto-grow
 
-For setup and customization details, start with the [Documentation Index](./docs/README.md).
+For setup and customization details, start with the [Documentation Index](https://github.com/apollohg/react-native-prose-editor/wiki).
 
-For realtime collaboration, including the correct `useYjsCollaboration()` wiring, encoded-state persistence, remote cursors, and automatic reconnect behavior, see the [Collaboration Guide](./docs/modules/collaboration.md).
+For realtime collaboration, including the correct `useYjsCollaboration()` wiring, encoded-state persistence, remote cursors, and automatic reconnect behavior, see the [Collaboration Guide](https://github.com/apollohg/react-native-prose-editor/wiki/Collaboration).
 
 For whole-document JSON loads, `initialJSON`, controlled `valueJSON`, and `setContentJson()` will normalize an empty root document like `{ type: 'doc', content: [] }` to the active schema's empty text block so block-constrained schemas still load a valid empty document.
 
@@ -152,15 +153,17 @@ npm run ios:test:perf:device
 
 ## Documentation
 
-- [Documentation Index](./docs/README.md): main documentation index
-- [Installation Guide](./docs/guides/installation.md): installation and local setup
-- [Getting Started](./docs/guides/getting-started.md): first setup and first editor
-- [Collaboration Guide](./docs/modules/collaboration.md): Yjs collaboration wiring, source-of-truth rules, and persistence
-- [Toolbar Setup](./docs/guides/toolbar-setup.md): toolbar setup patterns and examples
-- [Mentions Guide](./docs/modules/mentions.md): @-mentions addon setup and configuration
-- [Styling Guide](./docs/guides/styling.md): content, toolbar, and mention styling
-- [NativeRichTextEditor Reference](./docs/reference/native-rich-text-editor.md): component props and ref methods
-- [Design Decisions](./docs/explanations/design-decisions.md): rationale for key API and architecture decisions
+Documentation is published in the [GitHub Wiki](https://github.com/apollohg/react-native-prose-editor/wiki).
+
+- [Documentation Index](https://github.com/apollohg/react-native-prose-editor/wiki): main documentation index
+- [Installation Guide](https://github.com/apollohg/react-native-prose-editor/wiki/Installation): installation and local setup
+- [Getting Started](https://github.com/apollohg/react-native-prose-editor/wiki/Getting-Started): first setup and first editor
+- [Collaboration Guide](https://github.com/apollohg/react-native-prose-editor/wiki/Collaboration): Yjs collaboration wiring, source-of-truth rules, and persistence
+- [Toolbar Setup](https://github.com/apollohg/react-native-prose-editor/wiki/Toolbar-Setup): toolbar setup patterns and examples
+- [Mentions Guide](https://github.com/apollohg/react-native-prose-editor/wiki/Mentions): @-mentions addon setup and configuration
+- [Styling Guide](https://github.com/apollohg/react-native-prose-editor/wiki/Styling): content, toolbar, and mention styling
+- [NativeRichTextEditor Reference](https://github.com/apollohg/react-native-prose-editor/wiki/NativeRichTextEditor-Reference): component props and ref methods
+- [Design Decisions](https://github.com/apollohg/react-native-prose-editor/wiki/Design-Decisions): rationale for key API and architecture decisions
 
 ## Project Status
 

package/android/src/main/java/com/apollohg/editor/EditorAddons.kt

@@ -30,7 +30,8 @@ data class NativeMentionSuggestion(
 data class NativeMentionsAddonConfig(
     val trigger: String,
     val suggestions: List<NativeMentionSuggestion>,
-    val theme: EditorMentionTheme?
+    val theme: EditorMentionTheme?,
+    val resolveSelectionAttrs: Boolean
 ) {
     companion object {
         fun fromJson(json: JSONObject?): NativeMentionsAddonConfig? {
@@ -51,7 +52,8 @@ data class NativeMentionsAddonConfig(
             return NativeMentionsAddonConfig(
                 trigger = trigger,
                 suggestions = suggestions,
-                theme = EditorMentionTheme.fromJson(json.optJSONObject("theme"))
+                theme = EditorMentionTheme.fromJson(json.optJSONObject("theme")),
+                resolveSelectionAttrs = json.optBoolean("resolveSelectionAttrs", false)
             )
         }
     }

package/android/src/main/java/com/apollohg/editor/EditorTheme.kt

@@ -127,6 +127,29 @@ data class EditorMentionTheme(
     val optionHighlightedBackgroundColor: Int? = null,
     val optionHighlightedTextColor: Int? = null
 ) {
+    fun mergedWith(other: EditorMentionTheme?): EditorMentionTheme {
+        other ?: return this
+        return copy(
+            textColor = other.textColor ?: textColor,
+            backgroundColor = other.backgroundColor ?: backgroundColor,
+            borderColor = other.borderColor ?: borderColor,
+            borderWidth = other.borderWidth ?: borderWidth,
+            borderRadius = other.borderRadius ?: borderRadius,
+            fontWeight = other.fontWeight ?: fontWeight,
+            popoverBackgroundColor = other.popoverBackgroundColor ?: popoverBackgroundColor,
+            popoverBorderColor = other.popoverBorderColor ?: popoverBorderColor,
+            popoverBorderWidth = other.popoverBorderWidth ?: popoverBorderWidth,
+            popoverBorderRadius = other.popoverBorderRadius ?: popoverBorderRadius,
+            popoverShadowColor = other.popoverShadowColor ?: popoverShadowColor,
+            optionTextColor = other.optionTextColor ?: optionTextColor,
+            optionSecondaryTextColor = other.optionSecondaryTextColor ?: optionSecondaryTextColor,
+            optionHighlightedBackgroundColor =
+                other.optionHighlightedBackgroundColor ?: optionHighlightedBackgroundColor,
+            optionHighlightedTextColor =
+                other.optionHighlightedTextColor ?: optionHighlightedTextColor
+        )
+    }
+
     companion object {
         fun fromJson(json: JSONObject?): EditorMentionTheme? {
             json ?: return null

package/android/src/main/java/com/apollohg/editor/NativeEditorExpoView.kt

@@ -529,12 +529,42 @@ class NativeEditorExpoView(
         onAddonEvent(mapOf("eventJson" to eventJson))
     }
 
-    private fun emitMentionSelect(trigger: String, suggestion: NativeMentionSuggestion) {
+    private fun resolvedMentionAttrs(
+        trigger: String,
+        suggestion: NativeMentionSuggestion
+    ): JSONObject {
+        val attrs = JSONObject(suggestion.attrs.toString())
+        if (!attrs.has("label")) {
+            attrs.put("label", suggestion.label)
+        }
+        if (!attrs.has("mentionSuggestionChar")) {
+            attrs.put("mentionSuggestionChar", trigger)
+        }
+        return attrs
+    }
+
+    private fun emitMentionSelect(trigger: String, suggestion: NativeMentionSuggestion, attrs: JSONObject) {
         val eventJson = JSONObject()
             .put("type", "mentionsSelect")
             .put("trigger", trigger)
             .put("suggestionKey", suggestion.key)
-            .put("attrs", suggestion.attrs)
+            .put("attrs", attrs)
+            .toString()
+        onAddonEvent(mapOf("eventJson" to eventJson))
+    }
+
+    private fun emitMentionSelectRequest(
+        trigger: String,
+        suggestion: NativeMentionSuggestion,
+        attrs: JSONObject,
+        range: MentionQueryState
+    ) {
+        val eventJson = JSONObject()
+            .put("type", "mentionsSelectRequest")
+            .put("trigger", trigger)
+            .put("suggestionKey", suggestion.key)
+            .put("attrs", attrs)
+            .put("range", JSONObject().put("anchor", range.anchor).put("head", range.head))
             .toString()
         onAddonEvent(mapOf("eventJson" to eventJson))
     }
@@ -542,9 +572,12 @@ class NativeEditorExpoView(
     private fun insertMentionSuggestion(suggestion: NativeMentionSuggestion) {
         val mentions = addons.mentions ?: return
         val queryState = mentionQueryState ?: return
-        val attrs = JSONObject(suggestion.attrs.toString())
-        if (!attrs.has("label")) {
-            attrs.put("label", suggestion.label)
+        val attrs = resolvedMentionAttrs(mentions.trigger, suggestion)
+        if (mentions.resolveSelectionAttrs) {
+            emitMentionSelectRequest(mentions.trigger, suggestion, attrs, queryState)
+            lastMentionEventJson = null
+            clearMentionQueryState()
+            return
         }
         val docJson = JSONObject()
             .put("type", "doc")
@@ -564,7 +597,7 @@ class NativeEditorExpoView(
             docJson.toString()
         )
         richTextView.editorEditText.applyUpdateJSON(updateJson)
-        emitMentionSelect(mentions.trigger, suggestion)
+        emitMentionSelect(mentions.trigger, suggestion, attrs)
         lastMentionEventJson = null
         clearMentionQueryState()
     }

package/android/src/main/java/com/apollohg/editor/RenderBridge.kt

@@ -909,6 +909,9 @@ object RenderBridge {
                     val nodeType = element.optString("nodeType", "")
                     val label = element.optString("label", "?")
                     val docPos = element.optInt("docPos", 0)
+                    val mentionTheme = EditorMentionTheme.fromJson(
+                        element.optJSONObject("mentionTheme")
+                    )
                     appendOpaqueInlineAtom(
                         state.result,
                         nodeType,
@@ -919,6 +922,7 @@ object RenderBridge {
                         state.blockStack,
                         state.pendingLeadingMargins,
                         theme,
+                        mentionTheme,
                         density
                     )
                 }
@@ -1353,6 +1357,7 @@ object RenderBridge {
         blockStack: MutableList<BlockContext>,
         pendingLeadingMargins: MutableMap<Int, PendingLeadingMargin>,
         theme: EditorTheme?,
+        mentionTheme: EditorMentionTheme?,
         density: Float
     ) {
         val isMention = nodeType == "mention"
@@ -1360,8 +1365,13 @@ object RenderBridge {
         val start = builder.length
         builder.append(text)
         val end = builder.length
+        val resolvedMentionTheme = if (isMention) {
+            theme?.mentions?.mergedWith(mentionTheme) ?: mentionTheme
+        } else {
+            null
+        }
         val inlineTextColor = if (isMention) {
-            theme?.mentions?.textColor ?: resolveInlineTextColor(blockStack, textColor, theme)
+            resolvedMentionTheme?.textColor ?: resolveInlineTextColor(blockStack, textColor, theme)
         } else {
             resolveInlineTextColor(blockStack, textColor, theme)
         }
@@ -1372,7 +1382,7 @@ object RenderBridge {
         builder.setSpan(
             BackgroundColorSpan(
                 if (isMention) {
-                    theme?.mentions?.backgroundColor ?: 0x1f1d4ed8
+                    resolvedMentionTheme?.backgroundColor ?: 0x1f1d4ed8
                 } else {
                     0x20000000
                 }
@@ -1387,8 +1397,8 @@ object RenderBridge {
             Annotation("nativeDocPos", docPos.toString()),
             start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
         )
-        if (isMention && (theme?.mentions?.fontWeight == "bold" ||
-                theme?.mentions?.fontWeight?.toIntOrNull()?.let { it >= 600 } == true)
+        if (isMention && (resolvedMentionTheme?.fontWeight == "bold" ||
+                resolvedMentionTheme?.fontWeight?.toIntOrNull()?.let { it >= 600 } == true)
         ) {
             builder.setSpan(
                 StyleSpan(Typeface.BOLD),

package/dist/NativeEditorBridge.d.ts

@@ -1,3 +1,4 @@
+import type { EditorMentionTheme } from './EditorTheme';
 import { type SchemaDefinition } from './schemas';
 export interface NativeEditorModule {
     editorCreate(configJson: string): number;
@@ -93,6 +94,7 @@ export interface RenderElement {
     docPos?: number;
     label?: string;
     attrs?: Record<string, unknown>;
+    mentionTheme?: EditorMentionTheme;
     listContext?: ListContext;
 }
 interface RenderBlocksPatch {
@@ -194,6 +196,8 @@ export declare class NativeEditorBridge {
     toggleMark(markType: string): EditorUpdate | null;
     /** Set a mark with attrs on the current selection. */
     setMark(markType: string, attrs: Record<string, unknown>): EditorUpdate | null;
+    /** Set a mark with attrs at an explicit scalar selection. */
+    setMarkAtSelectionScalar(scalarAnchor: number, scalarHead: number, markType: string, attrs: Record<string, unknown>): EditorUpdate | null;
     /** Remove a mark from the current selection. */
     unsetMark(markType: string): EditorUpdate | null;
     /** Toggle blockquote wrapping for the current block selection. */
@@ -202,6 +206,10 @@ export declare class NativeEditorBridge {
     toggleHeading(level: number): EditorUpdate | null;
     /** Set the document selection by anchor and head positions. */
     setSelection(anchor: number, head: number): void;
+    /** Convert a document position to a scalar position used by native text views. */
+    docToScalar(docPos: number): number;
+    /** Convert a native scalar position back to a document position. */
+    scalarToDoc(scalar: number): number;
     /** Get the current selection from the Rust engine (synchronous native call).
      *  Always returns the live selection, not a stale cache. */
     getSelection(): Selection;

package/dist/NativeEditorBridge.js

@@ -433,6 +433,12 @@ class NativeEditorBridge {
             : getNativeModule().editorSetMark(this._editorId, markType, attrsJson);
         return this.parseAndNoteUpdate(json);
     }
+    /** Set a mark with attrs at an explicit scalar selection. */
+    setMarkAtSelectionScalar(scalarAnchor, scalarHead, markType, attrs) {
+        this.assertNotDestroyed();
+        const json = getNativeModule().editorSetMarkAtSelectionScalar(this._editorId, scalarAnchor, scalarHead, markType, JSON.stringify(attrs));
+        return this.parseAndNoteUpdate(json);
+    }
     /** Remove a mark from the current selection. */
     unsetMark(markType) {
         this.assertNotDestroyed();
@@ -469,6 +475,16 @@ class NativeEditorBridge {
         getNativeModule().editorSetSelection(this._editorId, anchor, head);
         this._lastSelection = { type: 'text', anchor, head };
     }
+    /** Convert a document position to a scalar position used by native text views. */
+    docToScalar(docPos) {
+        this.assertNotDestroyed();
+        return getNativeModule().editorDocToScalar(this._editorId, docPos);
+    }
+    /** Convert a native scalar position back to a document position. */
+    scalarToDoc(scalar) {
+        this.assertNotDestroyed();
+        return getNativeModule().editorScalarToDoc(this._editorId, scalar);
+    }
     /** Get the current selection from the Rust engine (synchronous native call).
      *  Always returns the live selection, not a stale cache. */
     getSelection() {

package/dist/NativeProseViewer.d.ts

@@ -1,12 +1,14 @@
 import { type StyleProp, type ViewStyle } from 'react-native';
-import { type EditorTheme } from './EditorTheme';
+import { type EditorMentionTheme, type EditorTheme } from './EditorTheme';
 import type { DocumentJSON } from './NativeEditorBridge';
 import { type SchemaDefinition } from './schemas';
-export interface NativeProseViewerMentionPressEvent {
+export interface NativeProseViewerMentionRenderContext {
     docPos: number;
     label: string;
     attrs: Record<string, unknown>;
 }
+export interface NativeProseViewerMentionPressEvent extends NativeProseViewerMentionRenderContext {
+}
 type NativeProseViewerContent = DocumentJSON | string;
 export interface NativeProseViewerProps {
     contentJSON: NativeProseViewerContent;
@@ -15,7 +17,9 @@ export interface NativeProseViewerProps {
     theme?: EditorTheme;
     style?: StyleProp<ViewStyle>;
     allowBase64Images?: boolean;
+    mentionPrefix?: string | ((mention: NativeProseViewerMentionRenderContext) => string | null | undefined);
+    resolveMentionTheme?: (mention: NativeProseViewerMentionRenderContext) => EditorMentionTheme | null | undefined;
     onPressMention?: (event: NativeProseViewerMentionPressEvent) => void;
 }
-export declare function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, style, allowBase64Images, onPressMention, }: NativeProseViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, style, allowBase64Images, mentionPrefix, resolveMentionTheme, onPressMention, }: NativeProseViewerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/NativeProseViewer.js

@@ -56,7 +56,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 +85,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 +114,50 @@ 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 serializeDocumentInput(document, schema) {
     if (typeof document === 'string') {
         try {
@@ -129,13 +194,13 @@ function extractRenderError(json) {
         return null;
     }
 }
-function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, style, allowBase64Images = false, onPressMention, }) {
+function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, style, allowBase64Images = false, mentionPrefix, resolveMentionTheme, onPressMention, }) {
     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 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,
@@ -148,15 +213,35 @@ function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, st
             return '[]';
         }
         if (looksLikeRenderElementsJson(nextRenderJson)) {
-            return nextRenderJson;
+            return applyResolvedMentionRendering(nextRenderJson, mentionPayloadsByDocPos);
         }
         console.error('NativeProseViewer: native renderDocumentJson returned an invalid payload.');
         return '[]';
-    }, [allowBase64Images, documentSchema, serializedContentJson]);
+    }, [
+        allowBase64Images,
+        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;
+    }, [contentJSONRevision, 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 +250,14 @@ 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]);
+    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 }));
 }

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. */