@apollohg/react-native-prose-editor 0.5.6 → 0.5.7

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

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

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

@@ -112,6 +112,40 @@ data class EditorBlockquoteTheme(
     }
 }
 
+data class EditorLinkTheme(
+    val fontFamily: String? = null,
+    val fontSize: Float? = null,
+    val fontWeight: String? = null,
+    val fontStyle: String? = null,
+    val color: Int? = null,
+    val backgroundColor: Int? = null,
+    val underline: Boolean? = null
+) {
+    companion object {
+        fun fromJson(json: JSONObject?): EditorLinkTheme? {
+            json ?: return null
+            return EditorLinkTheme(
+                fontFamily = json.optNullableString("fontFamily"),
+                fontSize = json.optNullableFloat("fontSize"),
+                fontWeight = json.optNullableString("fontWeight"),
+                fontStyle = json.optNullableString("fontStyle"),
+                color = parseColor(json.optNullableString("color")),
+                backgroundColor = parseColor(json.optNullableString("backgroundColor")),
+                underline = if (json.has("underline")) json.optBoolean("underline") else null
+            )
+        }
+    }
+
+    fun asTextStyle(): EditorTextStyle =
+        EditorTextStyle(
+            fontFamily = fontFamily,
+            fontSize = fontSize,
+            fontWeight = fontWeight,
+            fontStyle = fontStyle,
+            color = color
+        )
+}
+
 data class EditorMentionTheme(
     val textColor: Int? = null,
     val backgroundColor: Int? = null,
@@ -268,6 +302,7 @@ data class EditorTheme(
     val list: EditorListTheme? = null,
     val horizontalRule: EditorHorizontalRuleTheme? = null,
     val mentions: EditorMentionTheme? = null,
+    val links: EditorLinkTheme? = null,
     val toolbar: EditorToolbarTheme? = null,
     val backgroundColor: Int? = null,
     val borderRadius: Float? = null,
@@ -298,6 +333,7 @@ data class EditorTheme(
                 list = EditorListTheme.fromJson(root.optJSONObject("list")),
                 horizontalRule = EditorHorizontalRuleTheme.fromJson(root.optJSONObject("horizontalRule")),
                 mentions = EditorMentionTheme.fromJson(root.optJSONObject("mentions")),
+                links = EditorLinkTheme.fromJson(root.optJSONObject("links")),
                 toolbar = EditorToolbarTheme.fromJson(root.optJSONObject("toolbar")),
                 backgroundColor = parseColor(root.optNullableString("backgroundColor")),
                 borderRadius = root.optNullableFloat("borderRadius"),

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

@@ -573,7 +573,7 @@ class NativeEditorExpoView(
         val mentions = addons.mentions ?: return
         val queryState = mentionQueryState ?: return
         val attrs = resolvedMentionAttrs(mentions.trigger, suggestion)
-        if (mentions.resolveSelectionAttrs) {
+        if (mentions.resolveSelectionAttrs || mentions.resolveTheme) {
             emitMentionSelectRequest(mentions.trigger, suggestion, attrs, queryState)
             lastMentionEventJson = null
             clearMentionQueryState()

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

@@ -295,6 +295,16 @@ class NativeEditorModule : Module() {
                 editorDestroy(editorId)
             }
         }
+        Function("measureContentHeight") { renderJson: String, themeJson: String?, width: Double ->
+            val density = appContext.reactContext?.resources?.displayMetrics?.density ?: 1f
+            val height = RenderBridge.measureHeight(
+                json = renderJson,
+                themeJson = themeJson,
+                width = width.toFloat(),
+                density = density
+            )
+            height.toDouble()
+        }
         Function("renderDocumentHtml") { configJson: String, html: String ->
             val editorId = editorCreate(configJson)
             try {

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

@@ -829,6 +829,53 @@ object RenderBridge {
         return state.result
     }
 
+    fun measureHeight(
+        json: String,
+        themeJson: String?,
+        width: Float,
+        density: Float
+    ): Float {
+        if (width <= 0) return 0f
+
+        val theme = EditorTheme.fromJson(themeJson)
+        val baseFontSize = theme?.text?.fontSize
+            ?: theme?.paragraph?.fontSize
+            ?: 16f
+
+        val spannable = buildSpannable(
+            json = json,
+            baseFontSize = baseFontSize,
+            textColor = android.graphics.Color.BLACK,
+            theme = theme,
+            density = density,
+            hostView = null
+        )
+
+        if (spannable.isEmpty()) return 0f
+
+        val contentInsets = theme?.contentInsets
+        val topInset = ((contentInsets?.top ?: 0f) * density).toInt()
+        val bottomInset = ((contentInsets?.bottom ?: 0f) * density).toInt()
+        val leftInset = ((contentInsets?.left ?: 0f) * density).toInt()
+        val rightInset = ((contentInsets?.right ?: 0f) * density).toInt()
+
+        val paint = android.text.TextPaint().apply {
+            textSize = baseFontSize * density
+            isAntiAlias = true
+        }
+
+        val availableWidth = (width - leftInset - rightInset).coerceAtLeast(0f).toInt()
+
+        val staticLayout = android.text.StaticLayout.Builder
+            .obtain(spannable, 0, spannable.length, paint, availableWidth)
+            .setAlignment(android.text.Layout.Alignment.ALIGN_NORMAL)
+            .setIncludePad(true)
+            .build()
+
+        val height = staticLayout.height + topInset + bottomInset
+        return height.toFloat()
+    }
+
     private fun appendElements(
         state: RenderBuildState,
         elements: JSONArray,
@@ -1135,59 +1182,77 @@ object RenderBridge {
                 blockquoteDepth(blockStack) > 0
             )
         } ?: theme?.effectiveTextStyle("paragraph", inBlockquote = blockquoteDepth(blockStack) > 0)
-        val resolvedTextSize = textStyle?.fontSize?.times(density) ?: baseFontSize
-        val resolvedTextColor = textStyle?.color ?: textColor
-
-        // Apply base styling.
-        builder.setSpan(
-            ForegroundColorSpan(resolvedTextColor),
-            start, end,
-            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
-        )
-        builder.setSpan(
-            AbsoluteSizeSpan(resolvedTextSize.toInt(), false),
-            start, end,
-            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
-        )
 
         // Determine which marks are active.
-        var hasBold = textStyle?.typefaceStyle()?.let { it == Typeface.BOLD || it == Typeface.BOLD_ITALIC } == true
-        var hasItalic = textStyle?.typefaceStyle()?.let { it == Typeface.ITALIC || it == Typeface.BOLD_ITALIC } == true
-        var hasUnderline = false
+        var markBold = false
+        var markItalic = false
+        var markUnderline = false
         var hasStrike = false
         var hasCode = false
+        var isLink = false
+        var linkHref: String? = null
         for (mark in marks) {
             when {
                 mark is String -> when (mark) {
-                    "bold", "strong" -> hasBold = true
-                    "italic", "em" -> hasItalic = true
-                    "underline" -> hasUnderline = true
+                    "bold", "strong" -> markBold = true
+                    "italic", "em" -> markItalic = true
+                    "underline" -> markUnderline = true
                     "strike", "strikethrough" -> hasStrike = true
                     "code" -> hasCode = true
                 }
                 mark is JSONObject -> {
                     val markType = mark.optString("type", "")
                     if (markType == "link") {
-                        hasUnderline = true
-                        builder.setSpan(
-                            ForegroundColorSpan(LayoutConstants.DEFAULT_LINK_COLOR),
-                            start,
-                            end,
-                            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
-                        )
-                        val href = mark.optString("href", "")
-                        if (href.isNotBlank()) {
-                            builder.setSpan(
-                                Annotation(NATIVE_LINK_HREF_ANNOTATION, href),
-                                start,
-                                end,
-                                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
-                            )
-                        }
+                        isLink = true
+                        linkHref = mark.optString("href", "").takeIf { it.isNotBlank() }
                     }
                 }
             }
         }
+        val linkTheme = if (isLink) theme?.links else null
+        val effectiveTextStyle = textStyle?.mergedWith(linkTheme?.asTextStyle())
+            ?: linkTheme?.asTextStyle()
+        val resolvedTextSize = effectiveTextStyle?.fontSize?.times(density) ?: baseFontSize
+        val resolvedTextColor = if (isLink) {
+            effectiveTextStyle?.color ?: LayoutConstants.DEFAULT_LINK_COLOR
+        } else {
+            effectiveTextStyle?.color ?: textColor
+        }
+
+        // Apply base styling.
+        builder.setSpan(
+            ForegroundColorSpan(resolvedTextColor),
+            start, end,
+            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+        )
+        builder.setSpan(
+            AbsoluteSizeSpan(resolvedTextSize.toInt(), false),
+            start, end,
+            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+        )
+        linkTheme?.backgroundColor?.let { backgroundColor ->
+            builder.setSpan(
+                BackgroundColorSpan(backgroundColor),
+                start,
+                end,
+                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+            )
+        }
+        linkHref?.let { href ->
+            builder.setSpan(
+                Annotation(NATIVE_LINK_HREF_ANNOTATION, href),
+                start,
+                end,
+                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+            )
+        }
+
+        val typefaceStyle = effectiveTextStyle?.typefaceStyle()
+        val hasBold = markBold ||
+            typefaceStyle?.let { it == Typeface.BOLD || it == Typeface.BOLD_ITALIC } == true
+        val hasItalic = markItalic ||
+            typefaceStyle?.let { it == Typeface.ITALIC || it == Typeface.BOLD_ITALIC } == true
+        val hasUnderline = markUnderline || (isLink && (linkTheme?.underline ?: true))
 
         // Apply bold/italic as a combined StyleSpan.
         if (hasBold && hasItalic) {
@@ -1204,7 +1269,7 @@ object RenderBridge {
             )
         }
 
-        val fontFamily = textStyle?.fontFamily
+        val fontFamily = effectiveTextStyle?.fontFamily
         if (!hasCode && !fontFamily.isNullOrBlank()) {
             builder.setSpan(
                 TypefaceSpan(fontFamily),

package/dist/EditorTheme.d.ts

@@ -26,6 +26,15 @@ export interface EditorTextStyle {
     lineHeight?: number;
     spacingAfter?: number;
 }
+export interface EditorLinkTheme {
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: EditorFontWeight;
+    fontStyle?: EditorFontStyle;
+    color?: string;
+    backgroundColor?: string;
+    underline?: boolean;
+}
 export interface EditorHeadingTheme {
     h1?: EditorTextStyle;
     h2?: EditorTextStyle;
@@ -85,6 +94,7 @@ export interface EditorTheme {
     list?: EditorListTheme;
     horizontalRule?: EditorHorizontalRuleTheme;
     mentions?: EditorMentionTheme;
+    links?: EditorLinkTheme;
     toolbar?: EditorToolbarTheme;
     backgroundColor?: string;
     borderRadius?: number;

package/dist/NativeProseViewer.d.ts

@@ -14,6 +14,17 @@ export interface NativeProseViewerLinkPressEvent {
     text: string;
 }
 type NativeProseViewerContent = DocumentJSON | string;
+export type NativeProseViewerMentionPrefix = string | ((mention: NativeProseViewerMentionRenderContext) => string | null | undefined);
+export interface NativeProseViewerMentionsAddonConfig {
+    trigger?: string;
+    prefix?: NativeProseViewerMentionPrefix;
+    theme?: EditorMentionTheme;
+    resolveTheme?: (mention: NativeProseViewerMentionRenderContext) => EditorMentionTheme | null | undefined;
+    onPress?: (event: NativeProseViewerMentionPressEvent) => void;
+}
+export interface NativeProseViewerAddons {
+    mentions?: NativeProseViewerMentionsAddonConfig;
+}
 interface NativeProseViewerBaseProps {
     contentRevision?: string | number;
     contentJSONRevision?: string | number;
@@ -23,10 +34,10 @@ interface NativeProseViewerBaseProps {
     allowBase64Images?: boolean;
     collapseTrailingEmptyParagraphs?: boolean;
     enableLinkTaps?: boolean;
-    mentionPrefix?: string | ((mention: NativeProseViewerMentionRenderContext) => string | null | undefined);
-    resolveMentionTheme?: (mention: NativeProseViewerMentionRenderContext) => EditorMentionTheme | null | undefined;
+    addons?: NativeProseViewerAddons;
     onPressLink?: (event: NativeProseViewerLinkPressEvent) => void;
-    onPressMention?: (event: NativeProseViewerMentionPressEvent) => void;
+    contentId?: string;
+    containerWidth?: number;
 }
 interface NativeProseViewerJsonProps extends NativeProseViewerBaseProps {
     contentJSON: NativeProseViewerContent;

package/dist/NativeProseViewer.js

@@ -7,6 +7,7 @@ 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 schemas_1 = require("./schemas");
 const NativeProseViewerView = (0, expo_modules_core_1.requireNativeViewManager)('NativeEditor', 'NativeProseViewer');
 let nativeProseViewerModule = null;
@@ -62,18 +63,32 @@ 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;
+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 collectMentionPayloadsByDocPos(document, mentionPrefix, resolveMentionTheme) {
+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;
@@ -89,8 +104,14 @@ function collectMentionPayloadsByDocPos(document, mentionPrefix, resolveMentionT
             const attrs = normalizeMentionAttrs(nodeRecord);
             const label = baseMentionLabelFromAttrs(attrs);
             const mentionContext = { docPos: pos, label, attrs };
-            const renderedLabel = applyMentionPrefix(label, resolveMentionPrefix(mentionPrefix, mentionContext));
-            const mentionTheme = resolveMentionTheme?.(mentionContext) ?? undefined;
+            const renderedLabel = resolveMentionRenderedLabel(mentionContext, effectiveMentionPrefix, trigger);
+            const resolvedMentionTheme = effectiveResolveMentionTheme?.(mentionContext) ?? undefined;
+            const mentionTheme = defaultMentionTheme || resolvedMentionTheme
+                ? {
+                    ...(defaultMentionTheme ?? {}),
+                    ...(resolvedMentionTheme ?? {}),
+                }
+                : undefined;
             mentions.set(pos, {
                 ...mentionContext,
                 renderedLabel,
@@ -332,7 +353,8 @@ function extractRenderError(json) {
     }
 }
 function NativeProseViewer({ ...props }) {
-    const { contentRevision, contentJSONRevision, schema, theme, style, allowBase64Images = false, collapseTrailingEmptyParagraphs = true, enableLinkTaps = true, mentionPrefix, resolveMentionTheme, onPressLink, onPressMention, } = 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;
@@ -349,7 +371,7 @@ function NativeProseViewer({ ...props }) {
     const themeJson = (0, react_1.useMemo)(() => (0, EditorTheme_1.serializeEditorTheme)(theme), [theme]);
     const mentionPayloadsByDocPos = (0, react_1.useMemo)(() => normalizedDocument == null
         ? new Map()
-        : collectMentionPayloadsByDocPos(normalizedDocument, mentionPrefix, resolveMentionTheme), [mentionPrefix, normalizedDocument, resolveMentionTheme]);
+        : collectMentionPayloadsByDocPos(normalizedDocument, addons?.mentions), [addons?.mentions, normalizedDocument]);
     const renderJson = (0, react_1.useMemo)(() => {
         const configJson = JSON.stringify({
             schema: documentSchema,
@@ -382,6 +404,24 @@ function NativeProseViewer({ ...props }) {
     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);
@@ -394,18 +434,21 @@ function NativeProseViewer({ ...props }) {
             return;
         }
         setContentHeight((currentHeight) => currentHeight === nextHeight ? currentHeight : nextHeight);
-    }, [renderJsonIsCollapsedEmpty]);
+        if (contentId && layoutContextKey != null) {
+            (0, heightCache_1.setHeightCache)(contentId, layoutContextKey, renderJsonHash, nextHeight);
+        }
+    }, [renderJsonIsCollapsedEmpty, contentId, layoutContextKey, renderJsonHash]);
     const handlePressMention = (0, react_1.useCallback)((event) => {
-        if (!onPressMention)
+        if (!mentionPressHandler)
             return;
         const { docPos, label } = event.nativeEvent;
         const resolvedMention = mentionPayloadsByDocPos.get(docPos);
-        onPressMention({
+        mentionPressHandler({
             docPos,
             label: resolvedMention?.renderedLabel ?? label,
             attrs: resolvedMention?.attrs ?? {},
         });
-    }, [mentionPayloadsByDocPos, onPressMention]);
+    }, [mentionPayloadsByDocPos, mentionPressHandler]);
     const handlePressLink = (0, react_1.useCallback)((event) => {
         if (!onPressLink)
             return;
@@ -422,11 +465,16 @@ function NativeProseViewer({ ...props }) {
         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, 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 }));
+    }, [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 }));
 }

package/dist/NativeRichTextEditor.js

@@ -957,6 +957,22 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             ? { ...selectionEvent.attrs, ...resolvedAttrs }
             : selectionEvent.attrs;
     }, []);
+    const resolveMentionInsertionAttrs = (0, react_1.useCallback)((selectionEvent) => {
+        const attrs = resolveMentionSelectionAttrs(selectionEvent);
+        let resolvedTheme;
+        try {
+            resolvedTheme = addonsRef.current?.mentions?.resolveTheme?.({
+                ...selectionEvent,
+                attrs,
+            });
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('NativeRichTextEditor: mentions.resolveTheme threw', error);
+            }
+        }
+        return isRecord(resolvedTheme) ? { ...attrs, mentionTheme: resolvedTheme } : attrs;
+    }, [resolveMentionSelectionAttrs]);
     const handleInlineMentionSuggestionPress = (0, react_1.useCallback)((suggestion) => {
         const mentionQuery = mentionQueryEventRef.current;
         const mentions = addonsRef.current?.mentions;
@@ -966,7 +982,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             bridgeRef.current.isDestroyed) {
             return;
         }
-        const attrs = resolveMentionSelectionAttrs({
+        const attrs = resolveMentionInsertionAttrs({
             trigger: mentionQuery.trigger,
             suggestion,
             attrs: resolveMentionSuggestionAttrs(suggestion, mentionQuery.trigger),
@@ -981,7 +997,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 attrs,
             });
         }
-    }, [resolveMentionSelectionAttrs, runAndApply]);
+    }, [resolveMentionInsertionAttrs, runAndApply]);
     const handleAddonEvent = (0, react_1.useCallback)((event) => {
         let parsed = null;
         try {
@@ -1018,7 +1034,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 attrs: parsed.attrs,
                 range: parsed.range,
             };
-            const finalAttrs = resolveMentionSelectionAttrs(selectionEvent);
+            const finalAttrs = resolveMentionInsertionAttrs(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?.({
@@ -1039,7 +1055,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 attrs: parsed.attrs,
             });
         }
-    }, [resolveMentionSelectionAttrs, runAndApply]);
+    }, [resolveMentionInsertionAttrs, runAndApply]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         focus() {
             nativeViewRef.current?.focus?.();

package/dist/addons.d.ts

@@ -31,11 +31,13 @@ export interface MentionSelectionAttrsEvent {
         head: number;
     };
 }
+export type MentionThemeResolveEvent = MentionSelectionAttrsEvent;
 export interface MentionsAddonConfig {
     trigger?: string;
     suggestions?: readonly MentionSuggestion[];
     theme?: EditorMentionTheme;
     resolveSelectionAttrs?: (event: MentionSelectionAttrsEvent) => Record<string, unknown> | null | undefined;
+    resolveTheme?: (event: MentionThemeResolveEvent) => EditorMentionTheme | null | undefined;
     onQueryChange?: (event: MentionQueryChangeEvent) => void;
     onSelect?: (event: MentionSelectEvent) => void;
 }
@@ -53,6 +55,7 @@ export interface SerializedMentionsAddonConfig {
     trigger: string;
     theme?: EditorMentionTheme;
     resolveSelectionAttrs?: boolean;
+    resolveTheme?: boolean;
     suggestions: SerializedMentionSuggestion[];
 }
 export interface SerializedEditorAddons {

package/dist/addons.js

@@ -57,6 +57,7 @@ function normalizeEditorAddons(addons) {
             ...(typeof addons.mentions.resolveSelectionAttrs === 'function'
                 ? { resolveSelectionAttrs: true }
                 : {}),
+            ...(typeof addons.mentions.resolveTheme === 'function' ? { resolveTheme: true } : {}),
             suggestions,
         },
     };

package/dist/heightCache.d.ts

@@ -0,0 +1,6 @@
+export declare const MAX_CACHE_SIZE = 500;
+export declare function computeRenderJsonHash(input: string): number;
+export declare function computeLayoutContextKey(themeJson: string | undefined, containerWidth: number): string;
+export declare function getHeightCache(contentId: string, layoutContextKey: string, renderJsonHash: number): number | null;
+export declare function setHeightCache(contentId: string, layoutContextKey: string, renderJsonHash: number, height: number): void;
+export declare function clearHeightCache(): void;

package/dist/heightCache.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_CACHE_SIZE = void 0;
+exports.computeRenderJsonHash = computeRenderJsonHash;
+exports.computeLayoutContextKey = computeLayoutContextKey;
+exports.getHeightCache = getHeightCache;
+exports.setHeightCache = setHeightCache;
+exports.clearHeightCache = clearHeightCache;
+exports.MAX_CACHE_SIZE = 500;
+const cache = new Map();
+function computeRenderJsonHash(input) {
+    let hash = 5381;
+    for (let i = 0; i < input.length; i++) {
+        hash = ((hash << 5) + hash + input.charCodeAt(i)) | 0;
+    }
+    return hash >>> 0;
+}
+function computeLayoutContextKey(themeJson, containerWidth) {
+    return `${themeJson ?? ''}\x00${containerWidth}`;
+}
+function getHeightCache(contentId, layoutContextKey, renderJsonHash) {
+    const entry = cache.get(contentId);
+    if (!entry)
+        return null;
+    if (entry.layoutContextKey !== layoutContextKey ||
+        entry.renderJsonHash !== renderJsonHash) {
+        return null;
+    }
+    cache.delete(contentId);
+    cache.set(contentId, entry);
+    return entry.height;
+}
+function setHeightCache(contentId, layoutContextKey, renderJsonHash, height) {
+    cache.delete(contentId);
+    if (cache.size >= exports.MAX_CACHE_SIZE) {
+        const oldestKey = cache.keys().next().value;
+        if (oldestKey !== undefined) {
+            cache.delete(oldestKey);
+        }
+    }
+    cache.set(contentId, { height, renderJsonHash, layoutContextKey });
+}
+function clearHeightCache() {
+    cache.clear();
+}

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 export { NativeRichTextEditor, type NativeRichTextEditorProps, type NativeRichTextEditorRef, type NativeRichTextEditorHeightBehavior, type NativeRichTextEditorToolbarPlacement, type RemoteSelectionDecoration, type LinkRequestContext, type ImageRequestContext, } from './NativeRichTextEditor';
-export { NativeProseViewer, type NativeProseViewerProps, type NativeProseViewerLinkPressEvent, type NativeProseViewerMentionRenderContext, type NativeProseViewerMentionPressEvent, } from './NativeProseViewer';
+export { NativeProseViewer, type NativeProseViewerProps, type NativeProseViewerAddons, type NativeProseViewerMentionsAddonConfig, type NativeProseViewerMentionPrefix, 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';
+export type { EditorContentInsets, EditorTheme, EditorTextStyle, EditorLinkTheme, 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 MentionThemeResolveEvent, type MentionSelectEvent, type EditorAddonEvent, } from './addons';
 export { tiptapSchema, prosemirrorSchema, IMAGE_NODE_NAME, imageNodeSpec, withImagesSchema, buildImageFragmentJson, type SchemaDefinition, type NodeSpec, type MarkSpec, type AttrSpec, type ImageNodeAttributes, } from './schemas';
 export { createYjsCollaborationController, useYjsCollaboration, type YjsCollaborationOptions, type YjsCollaborationState, type YjsTransportStatus, type LocalAwarenessState, type LocalAwarenessUser, type UseYjsCollaborationResult, type YjsCollaborationController, } from './YjsCollaboration';
 export type { Selection, ActiveState, HistoryState, EditorUpdate, DocumentJSON, CollaborationPeer, EncodedCollaborationStateInput, } from './NativeEditorBridge';
 export { encodeCollaborationStateBase64, decodeCollaborationStateBase64, } from './NativeEditorBridge';
+export { clearHeightCache } from './heightCache';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.decodeCollaborationStateBase64 = exports.encodeCollaborationStateBase64 = exports.useYjsCollaboration = exports.createYjsCollaborationController = exports.buildImageFragmentJson = exports.withImagesSchema = exports.imageNodeSpec = exports.IMAGE_NODE_NAME = exports.prosemirrorSchema = exports.tiptapSchema = exports.buildMentionFragmentJson = exports.withMentionsSchema = exports.mentionNodeSpec = exports.MENTION_NODE_NAME = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS = exports.EditorToolbar = exports.NativeProseViewer = exports.NativeRichTextEditor = void 0;
+exports.clearHeightCache = exports.decodeCollaborationStateBase64 = exports.encodeCollaborationStateBase64 = exports.useYjsCollaboration = exports.createYjsCollaborationController = exports.buildImageFragmentJson = exports.withImagesSchema = exports.imageNodeSpec = exports.IMAGE_NODE_NAME = exports.prosemirrorSchema = exports.tiptapSchema = exports.buildMentionFragmentJson = exports.withMentionsSchema = exports.mentionNodeSpec = exports.MENTION_NODE_NAME = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS = exports.EditorToolbar = exports.NativeProseViewer = exports.NativeRichTextEditor = void 0;
 var NativeRichTextEditor_1 = require("./NativeRichTextEditor");
 Object.defineProperty(exports, "NativeRichTextEditor", { enumerable: true, get: function () { return NativeRichTextEditor_1.NativeRichTextEditor; } });
 var NativeProseViewer_1 = require("./NativeProseViewer");
@@ -26,3 +26,5 @@ Object.defineProperty(exports, "useYjsCollaboration", { enumerable: true, get: f
 var NativeEditorBridge_1 = require("./NativeEditorBridge");
 Object.defineProperty(exports, "encodeCollaborationStateBase64", { enumerable: true, get: function () { return NativeEditorBridge_1.encodeCollaborationStateBase64; } });
 Object.defineProperty(exports, "decodeCollaborationStateBase64", { enumerable: true, get: function () { return NativeEditorBridge_1.decodeCollaborationStateBase64; } });
+var heightCache_1 = require("./heightCache");
+Object.defineProperty(exports, "clearHeightCache", { enumerable: true, get: function () { return heightCache_1.clearHeightCache; } });

package/ios/EditorAddons.swift

@@ -28,12 +28,14 @@ struct NativeMentionsAddonConfig {
     let suggestions: [NativeMentionSuggestion]
     let theme: EditorMentionTheme?
     let resolveSelectionAttrs: Bool
+    let resolveTheme: Bool
 
     init?(dictionary: [String: Any]) {
         let trigger = (dictionary["trigger"] as? String)?.trimmingCharacters(in: .whitespacesAndNewlines)
         self.trigger = (trigger?.isEmpty == false ? trigger : "@") ?? "@"
         self.suggestions = ((dictionary["suggestions"] as? [[String: Any]]) ?? []).compactMap(NativeMentionSuggestion.init(dictionary:))
         self.resolveSelectionAttrs = dictionary["resolveSelectionAttrs"] as? Bool ?? false
+        self.resolveTheme = dictionary["resolveTheme"] as? Bool ?? false
         if let theme = dictionary["theme"] as? [String: Any] {
             self.theme = EditorMentionTheme(dictionary: theme)
         } else {

package/ios/EditorTheme.swift

@@ -124,6 +124,35 @@ struct EditorBlockquoteTheme {
     }
 }
 
+struct EditorLinkTheme {
+    var fontFamily: String?
+    var fontSize: CGFloat?
+    var fontWeight: String?
+    var fontStyle: String?
+    var color: UIColor?
+    var backgroundColor: UIColor?
+    var underline: Bool?
+
+    init(dictionary: [String: Any]) {
+        fontFamily = dictionary["fontFamily"] as? String
+        fontSize = EditorTheme.cgFloat(dictionary["fontSize"])
+        fontWeight = dictionary["fontWeight"] as? String
+        fontStyle = dictionary["fontStyle"] as? String
+        color = EditorTheme.color(from: dictionary["color"])
+        backgroundColor = EditorTheme.color(from: dictionary["backgroundColor"])
+        underline = dictionary["underline"] as? Bool
+    }
+
+    func resolvedFont(fallback: UIFont) -> UIFont {
+        EditorTextStyle(
+            fontFamily: fontFamily,
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontStyle: fontStyle
+        ).resolvedFont(fallback: fallback)
+    }
+}
+
 struct EditorMentionTheme {
     var textColor: UIColor?
     var backgroundColor: UIColor?
@@ -268,6 +297,7 @@ struct EditorTheme {
     var list: EditorListTheme?
     var horizontalRule: EditorHorizontalRuleTheme?
     var mentions: EditorMentionTheme?
+    var links: EditorLinkTheme?
     var toolbar: EditorToolbarTheme?
     var backgroundColor: UIColor?
     var borderRadius: CGFloat?
@@ -309,6 +339,9 @@ struct EditorTheme {
         if let mentions = dictionary["mentions"] as? [String: Any] {
             self.mentions = EditorMentionTheme(dictionary: mentions)
         }
+        if let links = dictionary["links"] as? [String: Any] {
+            self.links = EditorLinkTheme(dictionary: links)
+        }
         if let toolbar = dictionary["toolbar"] as? [String: Any] {
             self.toolbar = EditorToolbarTheme(dictionary: toolbar)
         }

package/ios/NativeEditorExpoView.swift

@@ -2218,7 +2218,7 @@ class NativeEditorExpoView: ExpoView, EditorTextViewDelegate, UIGestureRecognize
         }
 
         let attrs = resolvedMentionAttrs(trigger: mentions.trigger, suggestion: suggestion)
-        if mentions.resolveSelectionAttrs {
+        if mentions.resolveSelectionAttrs || mentions.resolveTheme {
             emitMentionSelectRequest(
                 trigger: mentions.trigger,
                 suggestion: suggestion,

package/ios/NativeEditorModule.swift

@@ -268,6 +268,14 @@ public class NativeEditorModule: Module {
             }
             return editorSetJson(id: editorId, json: json)
         }
+        Function("measureContentHeight") { (renderJson: String, themeJson: String?, width: Double) -> Double in
+            let height = RenderBridge.measureHeight(
+                forRenderJSON: renderJson,
+                themeJSON: themeJson,
+                width: CGFloat(width)
+            )
+            return Double(height)
+        }
         Function("renderDocumentHtml") { (configJson: String, html: String) -> String in
             let editorId = editorCreate(configJson: configJson)
             defer {

package/ios/RenderBridge.swift

@@ -243,7 +243,8 @@ final class RenderBridge {
                 let baseAttrs = attributesForMarks(
                     marks,
                     baseFont: blockFont,
-                    textColor: blockColor
+                    textColor: blockColor,
+                    theme: theme
                 )
                 let attrs = applyBlockStyle(
                     to: baseAttrs,
@@ -541,6 +542,63 @@ final class RenderBridge {
         return result
     }
 
+    // MARK: - Height Pre-Measurement
+
+    static func measureHeight(
+        forRenderJSON renderJSON: String,
+        themeJSON: String?,
+        width: CGFloat
+    ) -> CGFloat {
+        guard width > 0 else { return 0 }
+
+        let theme = EditorTheme.from(json: themeJSON)
+        let baseFontSize = theme?.text?.fontSize ?? theme?.paragraph?.fontSize ?? 16
+        let baseFont = UIFont.systemFont(ofSize: baseFontSize)
+        let textColor = theme?.text?.color ?? UIColor.label
+
+        let attributedString = renderElements(
+            fromJSON: renderJSON,
+            baseFont: baseFont,
+            textColor: textColor,
+            theme: theme
+        )
+
+        guard attributedString.length > 0 else { return 0 }
+
+        let contentInsets = theme?.contentInsets
+        let topInset = contentInsets?.top ?? 0
+        let bottomInset = contentInsets?.bottom ?? 0
+        let leftInset = contentInsets?.left ?? 0
+        let rightInset = contentInsets?.right ?? 0
+
+        // When contentInsets are set, lineFragmentPadding is 0 (matches
+        // RichTextEditorView.theme didSet). Otherwise use the UITextView
+        // default of 5.
+        let lineFragmentPadding: CGFloat = contentInsets != nil ? 0 : 5
+
+        let textStorage = NSTextStorage(attributedString: attributedString)
+        let layoutManager = NSLayoutManager()
+        let containerWidth = width - leftInset - rightInset - lineFragmentPadding * 2
+        let textContainer = NSTextContainer(
+            size: CGSize(width: max(containerWidth, 0), height: .greatestFiniteMagnitude)
+        )
+        textContainer.lineFragmentPadding = 0
+
+        layoutManager.addTextContainer(textContainer)
+        textStorage.addLayoutManager(layoutManager)
+
+        layoutManager.ensureLayout(for: textContainer)
+
+        var usedRect = layoutManager.usedRect(for: textContainer)
+        let extraLineFragmentRect = layoutManager.extraLineFragmentRect
+        if !extraLineFragmentRect.isEmpty {
+            usedRect = usedRect.union(extraLineFragmentRect)
+        }
+
+        let height = ceil(usedRect.height + topInset + bottomInset)
+        return height
+    }
+
     // MARK: - Mark Handling
 
     /// Build NSAttributedString attributes for a set of render marks.
@@ -556,7 +614,8 @@ final class RenderBridge {
     static func attributesForMarks(
         _ marks: [Any],
         baseFont: UIFont,
-        textColor: UIColor
+        textColor: UIColor,
+        theme: EditorTheme? = nil
     ) -> [NSAttributedString.Key: Any] {
         var attrs = defaultAttributes(baseFont: baseFont, textColor: textColor)
 
@@ -566,6 +625,8 @@ final class RenderBridge {
 
         var traits: UIFontDescriptor.SymbolicTraits = []
         var useMonospace = false
+        var linkTheme: EditorLinkTheme?
+        var shouldUnderline = false
         for mark in marks {
             let markObject = mark as? [String: Any]
             let markType: String
@@ -583,14 +644,20 @@ final class RenderBridge {
             case "italic", "em":
                 traits.insert(.traitItalic)
             case "underline":
-                attrs[.underlineStyle] = NSUnderlineStyle.single.rawValue
+                shouldUnderline = true
             case "strike", "strikethrough":
                 attrs[.strikethroughStyle] = NSUnderlineStyle.single.rawValue
             case "code":
                 useMonospace = true
             case "link":
-                attrs[.underlineStyle] = NSUnderlineStyle.single.rawValue
-                attrs[.foregroundColor] = UIColor.systemBlue
+                linkTheme = theme?.links
+                if theme?.links?.underline ?? true {
+                    shouldUnderline = true
+                }
+                attrs[.foregroundColor] = theme?.links?.color ?? UIColor.systemBlue
+                if let backgroundColor = theme?.links?.backgroundColor {
+                    attrs[.backgroundColor] = backgroundColor
+                }
                 if let href = markObject?["href"] as? String, !href.isEmpty {
                     attrs[RenderBridgeAttributes.linkHref] = href
                 }
@@ -599,11 +666,11 @@ final class RenderBridge {
             }
         }
 
-        var resolvedFont = baseFont
+        var resolvedFont = linkTheme?.resolvedFont(fallback: baseFont) ?? baseFont
 
         if useMonospace {
             resolvedFont = UIFont.monospacedSystemFont(
-                ofSize: baseFont.pointSize,
+                ofSize: resolvedFont.pointSize,
                 weight: traits.contains(.traitBold) ? .bold : .regular
             )
             // Monospaced doesn't support italic via descriptor traits, but we
@@ -612,15 +679,19 @@ final class RenderBridge {
             if traits.contains(.traitItalic) && !traits.contains(.traitBold) {
                 // For code+italic only, try applying italic trait.
                 if let descriptor = resolvedFont.fontDescriptor.withSymbolicTraits(.traitItalic) {
-                    resolvedFont = UIFont(descriptor: descriptor, size: baseFont.pointSize)
+                    resolvedFont = UIFont(descriptor: descriptor, size: resolvedFont.pointSize)
                 }
             }
         } else if !traits.isEmpty {
-            if let descriptor = baseFont.fontDescriptor.withSymbolicTraits(traits) {
-                resolvedFont = UIFont(descriptor: descriptor, size: baseFont.pointSize)
+            let mergedTraits = resolvedFont.fontDescriptor.symbolicTraits.union(traits)
+            if let descriptor = resolvedFont.fontDescriptor.withSymbolicTraits(mergedTraits) {
+                resolvedFont = UIFont(descriptor: descriptor, size: resolvedFont.pointSize)
             }
         }
 
+        if shouldUnderline {
+            attrs[.underlineStyle] = NSUnderlineStyle.single.rawValue
+        }
         attrs[.font] = resolvedFont
         return attrs
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apollohg/react-native-prose-editor",
-    "version": "0.5.6",
+    "version": "0.5.7",
     "description": "Native rich text editor with Rust core for React Native",
     "license": "Apache-2.0",
     "homepage": "https://github.com/apollohg/react-native-prose-editor",