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

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

@@ -77,6 +77,11 @@ class EditorEditText @JvmOverloads constructor(
         val label: String
     )
 
+    data class LinkHit(
+        val href: String,
+        val text: String
+    )
+
     private data class ParsedRenderPatch(
         val startIndex: Int,
         val deleteCount: Int,
@@ -1583,7 +1588,7 @@ class EditorEditText @JvmOverloads constructor(
         }
     }
 
-    fun mentionHitAt(x: Float, y: Float): MentionHit? {
+    private fun textOffsetHitAt(x: Float, y: Float): Pair<Spanned, Int>? {
         val spannable = text as? Spanned ?: return null
         val layout = layout ?: return null
         if (spannable.isEmpty()) return null
@@ -1603,6 +1608,11 @@ class EditorEditText @JvmOverloads constructor(
 
         val offset = layout.getOffsetForHorizontal(line, localX)
             .coerceIn(0, maxOf(spannable.length - 1, 0))
+        return spannable to offset
+    }
+
+    fun mentionHitAt(x: Float, y: Float): MentionHit? {
+        val (spannable, offset) = textOffsetHitAt(x, y) ?: return null
         val annotations = spannable.getSpans(
             offset,
             (offset + 1).coerceAtMost(spannable.length),
@@ -1626,6 +1636,28 @@ class EditorEditText @JvmOverloads constructor(
         )
     }
 
+    fun linkHitAt(x: Float, y: Float): LinkHit? {
+        val (spannable, offset) = textOffsetHitAt(x, y) ?: return null
+        val annotations = spannable.getSpans(
+            offset,
+            (offset + 1).coerceAtMost(spannable.length),
+            Annotation::class.java
+        )
+        val linkAnnotation = annotations.firstOrNull {
+            it.key == RenderBridge.NATIVE_LINK_HREF_ANNOTATION && it.value.isNotBlank()
+        } ?: return null
+        val start = spannable.getSpanStart(linkAnnotation)
+        val end = spannable.getSpanEnd(linkAnnotation)
+        if (start < 0 || end <= start) {
+            return null
+        }
+
+        return LinkHit(
+            href = linkAnnotation.value,
+            text = spannable.subSequence(start, end).toString()
+        )
+    }
+
     private fun handleImageTap(event: MotionEvent): Boolean {
         if (!imageResizingEnabled) {
             return false

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

@@ -295,6 +295,14 @@ class NativeEditorModule : Module() {
                 editorDestroy(editorId)
             }
         }
+        Function("renderDocumentHtml") { configJson: String, html: String ->
+            val editorId = editorCreate(configJson)
+            try {
+                editorSetHtml(editorId, html)
+            } finally {
+                editorDestroy(editorId)
+            }
+        }
 
         View(NativeEditorExpoView::class) {
             Events(
@@ -370,7 +378,7 @@ class NativeEditorModule : Module() {
 
         View(NativeProseViewerExpoView::class) {
             Name("NativeProseViewer")
-            Events("onContentHeightChange", "onPressMention")
+            Events("onContentHeightChange", "onPressLink", "onPressMention")
 
             Prop("renderJson") { view: NativeProseViewerExpoView, renderJson: String? ->
                 view.setRenderJson(renderJson)
@@ -378,6 +386,12 @@ class NativeEditorModule : Module() {
             Prop("themeJson") { view: NativeProseViewerExpoView, themeJson: String? ->
                 view.setThemeJson(themeJson)
             }
+            Prop("enableLinkTaps") { view: NativeProseViewerExpoView, enableLinkTaps: Boolean? ->
+                view.setEnableLinkTaps(enableLinkTaps)
+            }
+            Prop("interceptLinkTaps") { view: NativeProseViewerExpoView, interceptLinkTaps: Boolean? ->
+                view.setInterceptLinkTaps(interceptLinkTaps)
+            }
         }
     }
 }

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

@@ -1,7 +1,9 @@
 package com.apollohg.editor
 
+import android.content.Intent
 import android.content.Context
 import android.graphics.Color
+import android.net.Uri
 import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
@@ -17,11 +19,15 @@ class NativeProseViewerExpoView(
     private val proseView = EditorEditText(context)
     private val onContentHeightChange by EventDispatcher<Map<String, Any>>()
     @Suppress("unused")
+    private val onPressLink by EventDispatcher<Map<String, Any>>()
+    @Suppress("unused")
     private val onPressMention by EventDispatcher<Map<String, Any>>()
 
     private var lastRenderJson: String? = null
     private var lastThemeJson: String? = null
     private var lastEmittedContentHeight = 0
+    private var enableLinkTaps = true
+    private var interceptLinkTaps = false
 
     init {
         proseView.setBaseStyle(
@@ -43,14 +49,27 @@ class NativeProseViewerExpoView(
                 return@setOnTouchListener false
             }
 
-            val mention = proseView.mentionHitAt(event.x, event.y) ?: return@setOnTouchListener false
-            onPressMention(
-                mapOf(
-                    "docPos" to mention.docPos,
-                    "label" to mention.label
+            proseView.mentionHitAt(event.x, event.y)?.let { mention ->
+                onPressMention(mapOf("docPos" to mention.docPos, "label" to mention.label))
+                return@setOnTouchListener true
+            }
+
+            if (!enableLinkTaps) {
+                return@setOnTouchListener false
+            }
+
+            val link = proseView.linkHitAt(event.x, event.y) ?: return@setOnTouchListener false
+            if (interceptLinkTaps) {
+                onPressLink(
+                    mapOf(
+                        "href" to link.href,
+                        "text" to link.text
+                    )
                 )
-            )
-            true
+                return@setOnTouchListener true
+            }
+
+            return@setOnTouchListener openLink(link.href)
         }
 
         addView(
@@ -83,6 +102,14 @@ class NativeProseViewerExpoView(
         }
     }
 
+    fun setEnableLinkTaps(enableLinkTaps: Boolean?) {
+        this.enableLinkTaps = enableLinkTaps ?: true
+    }
+
+    fun setInterceptLinkTaps(interceptLinkTaps: Boolean?) {
+        this.interceptLinkTaps = interceptLinkTaps ?: false
+    }
+
     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
         val childWidthSpec = getChildMeasureSpec(
             widthMeasureSpec,
@@ -154,4 +181,14 @@ class NativeProseViewerExpoView(
 
         return (resources.displayMetrics.widthPixels - paddingLeft - paddingRight).coerceAtLeast(1)
     }
+
+    private fun openLink(href: String): Boolean {
+        val intent = Intent(Intent.ACTION_VIEW, Uri.parse(href)).apply {
+            addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
+        }
+        return runCatching {
+            context.startActivity(intent)
+            true
+        }.getOrDefault(false)
+    }
 }

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

@@ -752,6 +752,7 @@ class CenteredBulletSpan(
 object RenderBridge {
     internal const val NATIVE_BLOCKQUOTE_ANNOTATION = "nativeBlockquote"
     internal const val NATIVE_TOP_LEVEL_CHILD_INDEX_ANNOTATION = "nativeTopLevelChildIndex"
+    internal const val NATIVE_LINK_HREF_ANNOTATION = "nativeLinkHref"
     private const val NATIVE_SYNTHETIC_PLACEHOLDER_ANNOTATION = "nativeSyntheticPlaceholder"
 
     private data class RenderBuildState(
@@ -1174,6 +1175,15 @@ object RenderBridge {
                             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
+                            )
+                        }
                     }
                 }
             }

package/dist/NativeProseViewer.d.ts

@@ -9,17 +9,33 @@ export interface NativeProseViewerMentionRenderContext {
 }
 export interface NativeProseViewerMentionPressEvent extends NativeProseViewerMentionRenderContext {
 }
+export interface NativeProseViewerLinkPressEvent {
+    href: string;
+    text: string;
+}
 type NativeProseViewerContent = DocumentJSON | string;
-export interface NativeProseViewerProps {
-    contentJSON: NativeProseViewerContent;
+interface NativeProseViewerBaseProps {
+    contentRevision?: string | number;
     contentJSONRevision?: string | number;
     schema?: SchemaDefinition;
     theme?: EditorTheme;
     style?: StyleProp<ViewStyle>;
     allowBase64Images?: boolean;
+    collapseTrailingEmptyParagraphs?: boolean;
+    enableLinkTaps?: boolean;
     mentionPrefix?: string | ((mention: NativeProseViewerMentionRenderContext) => string | null | undefined);
     resolveMentionTheme?: (mention: NativeProseViewerMentionRenderContext) => EditorMentionTheme | null | undefined;
+    onPressLink?: (event: NativeProseViewerLinkPressEvent) => void;
     onPressMention?: (event: NativeProseViewerMentionPressEvent) => void;
 }
-export declare function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, style, allowBase64Images, mentionPrefix, resolveMentionTheme, onPressMention, }: NativeProseViewerProps): import("react/jsx-runtime").JSX.Element;
+interface NativeProseViewerJsonProps extends NativeProseViewerBaseProps {
+    contentJSON: NativeProseViewerContent;
+    contentHTML?: never;
+}
+interface NativeProseViewerHtmlProps extends NativeProseViewerBaseProps {
+    contentHTML: string;
+    contentJSON?: never;
+}
+export type NativeProseViewerProps = NativeProseViewerJsonProps | NativeProseViewerHtmlProps;
+export declare function NativeProseViewer({ ...props }: NativeProseViewerProps): import("react/jsx-runtime").JSX.Element;
 export {};

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,88 @@ 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 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 +277,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,19 +301,26 @@ 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,
@@ -227,7 +329,7 @@ function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, st
     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)
@@ -254,10 +356,18 @@ function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, st
             attrs: resolvedMention?.attrs ?? {},
         });
     }, [mentionPayloadsByDocPos, onPressMention]);
+    const handlePressLink = (0, react_1.useCallback)((event) => {
+        if (!onPressLink)
+            return;
+        onPressLink({
+            href: event.nativeEvent.href,
+            text: event.nativeEvent.text,
+        });
+    }, [onPressLink]);
     const nativeStyle = (0, react_1.useMemo)(() => [
         { minHeight: 1 },
         style,
         contentHeight != null ? { minHeight: contentHeight } : null,
     ], [contentHeight, style]);
-    return ((0, jsx_runtime_1.jsx)(NativeProseViewerView, { style: nativeStyle, renderJson: renderJson, themeJson: themeJson, onContentHeightChange: handleContentHeightChange, onPressMention: typeof onPressMention === 'function' ? handlePressMention : undefined }));
+    return ((0, jsx_runtime_1.jsx)(NativeProseViewerView, { style: nativeStyle, renderJson: renderJson, themeJson: themeJson, enableLinkTaps: enableLinkTaps, interceptLinkTaps: typeof onPressLink === 'function', onContentHeightChange: handleContentHeightChange, onPressLink: typeof onPressLink === 'function' ? handlePressLink : undefined, onPressMention: typeof onPressMention === 'function' ? handlePressMention : undefined }));
 }

package/dist/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';

package/ios/NativeEditorModule.swift

@@ -268,6 +268,13 @@ public class NativeEditorModule: Module {
             }
             return editorSetJson(id: editorId, json: json)
         }
+        Function("renderDocumentHtml") { (configJson: String, html: String) -> String in
+            let editorId = editorCreate(configJson: configJson)
+            defer {
+                editorDestroy(id: editorId)
+            }
+            return editorSetHtml(id: editorId, html: html)
+        }
         Function("editorReplaceHtml") { (id: Int, html: String) -> String in
             editorReplaceHtml(id: UInt64(id), html: html)
         }
@@ -375,7 +382,7 @@ public class NativeEditorModule: Module {
 
         View(NativeProseViewerExpoView.self) {
             ViewName("NativeProseViewer")
-            Events("onContentHeightChange", "onPressMention")
+            Events("onContentHeightChange", "onPressLink", "onPressMention")
 
             Prop("renderJson") { (view: NativeProseViewerExpoView, renderJson: String?) in
                 view.setRenderJson(renderJson)
@@ -383,6 +390,12 @@ public class NativeEditorModule: Module {
             Prop("themeJson") { (view: NativeProseViewerExpoView, themeJson: String?) in
                 view.setThemeJson(themeJson)
             }
+            Prop("enableLinkTaps") { (view: NativeProseViewerExpoView, enableLinkTaps: Bool?) in
+                view.setEnableLinkTaps(enableLinkTaps)
+            }
+            Prop("interceptLinkTaps") { (view: NativeProseViewerExpoView, interceptLinkTaps: Bool?) in
+                view.setInterceptLinkTaps(interceptLinkTaps)
+            }
         }
     }
 }

package/ios/NativeProseViewerExpoView.swift

@@ -3,6 +3,7 @@ import UIKit
 
 final class NativeProseViewerExpoView: ExpoView {
     let onContentHeightChange = EventDispatcher()
+    let onPressLink = EventDispatcher()
     let onPressMention = EventDispatcher()
 
     private let textView = EditorTextView(frame: .zero, textContainer: nil)
@@ -11,11 +12,13 @@ final class NativeProseViewerExpoView: ExpoView {
     private var lastEmittedContentHeight: CGFloat = 0
     private var lastMeasuredWidth: CGFloat = 0
     private var allowContentHeightShrink = true
+    private var enableLinkTaps = true
+    private var interceptLinkTaps = false
 
-    private lazy var mentionTapRecognizer: UITapGestureRecognizer = {
+    private lazy var interactiveTapRecognizer: UITapGestureRecognizer = {
         let recognizer = UITapGestureRecognizer(
             target: self,
-            action: #selector(handleMentionTap(_:))
+            action: #selector(handleInteractiveTap(_:))
         )
         recognizer.cancelsTouchesInView = false
         return recognizer
@@ -36,10 +39,18 @@ final class NativeProseViewerExpoView: ExpoView {
         textView.onHeightMayChange = { [weak self] measuredHeight in
             self?.emitContentHeightIfNeeded(measuredHeight: measuredHeight, force: true)
         }
-        textView.addGestureRecognizer(mentionTapRecognizer)
+        textView.addGestureRecognizer(interactiveTapRecognizer)
         addSubview(textView)
     }
 
+    func setEnableLinkTaps(_ enabled: Bool?) {
+        enableLinkTaps = enabled ?? true
+    }
+
+    func setInterceptLinkTaps(_ intercept: Bool?) {
+        interceptLinkTaps = intercept ?? false
+    }
+
     func setRenderJson(_ renderJson: String?) {
         guard lastRenderJSON != renderJson else { return }
         lastRenderJSON = renderJson
@@ -101,20 +112,32 @@ final class NativeProseViewerExpoView: ExpoView {
         onContentHeightChange(["contentHeight": contentHeight])
     }
 
-    @objc private func handleMentionTap(_ recognizer: UITapGestureRecognizer) {
-        guard recognizer.state == .ended,
-              let mention = mentionHit(at: recognizer.location(in: textView))
-        else {
+    @objc private func handleInteractiveTap(_ recognizer: UITapGestureRecognizer) {
+        guard recognizer.state == .ended else {
+            return
+        }
+
+        let location = recognizer.location(in: textView)
+        if enableLinkTaps, let link = linkHit(at: location) {
+            if interceptLinkTaps {
+                onPressLink([
+                    "href": link.href,
+                    "text": link.text,
+                ])
+            } else {
+                openLink(link.href)
+            }
             return
         }
 
+        guard let mention = mentionHit(at: location) else { return }
         onPressMention([
             "docPos": mention.docPos,
             "label": mention.label,
         ])
     }
 
-    private func mentionHit(at location: CGPoint) -> (docPos: Int, label: String)? {
+    private func characterIndex(at location: CGPoint) -> Int? {
         let textStorage = textView.textStorage
         guard textStorage.length > 0 else { return nil }
 
@@ -133,6 +156,26 @@ final class NativeProseViewerExpoView: ExpoView {
         guard glyphIndex < layoutManager.numberOfGlyphs else { return nil }
         let characterIndex = layoutManager.characterIndexForGlyph(at: glyphIndex)
         guard characterIndex < textStorage.length else { return nil }
+        return characterIndex
+    }
+
+    private func linkHit(at location: CGPoint) -> (href: String, text: String)? {
+        let textStorage = textView.textStorage
+        guard let characterIndex = characterIndex(at: location) else { return nil }
+
+        var effectiveRange = NSRange(location: 0, length: 0)
+        let attrs = textStorage.attributes(at: characterIndex, effectiveRange: &effectiveRange)
+        guard let href = attrs[RenderBridgeAttributes.linkHref] as? String, !href.isEmpty else {
+            return nil
+        }
+
+        let text = (textStorage.string as NSString).substring(with: effectiveRange)
+        return (href: href, text: text)
+    }
+
+    private func mentionHit(at location: CGPoint) -> (docPos: Int, label: String)? {
+        let textStorage = textView.textStorage
+        guard let characterIndex = characterIndex(at: location) else { return nil }
 
         var effectiveRange = NSRange(location: 0, length: 0)
         let attrs = textStorage.attributes(at: characterIndex, effectiveRange: &effectiveRange)
@@ -146,4 +189,9 @@ final class NativeProseViewerExpoView: ExpoView {
         let label = (textStorage.string as NSString).substring(with: effectiveRange)
         return (docPos: docPos, label: label)
     }
+
+    private func openLink(_ href: String) {
+        guard let url = URL(string: href) else { return }
+        UIApplication.shared.open(url, options: [:], completionHandler: nil)
+    }
 }

package/ios/RenderBridge.swift

@@ -107,6 +107,9 @@ enum RenderBridgeAttributes {
     /// Marks synthetic zero-width placeholders used only for UIKit layout.
     static let syntheticPlaceholder = NSAttributedString.Key("com.apollohg.editor.syntheticPlaceholder")
 
+    /// Stores the link href for visually styled link text without enabling UITextView's default link interaction.
+    static let linkHref = NSAttributedString.Key("com.apollohg.editor.linkHref")
+
     /// Stores the owning top-level document child index for partial native patching.
     static let topLevelChildIndex = NSAttributedString.Key("com.apollohg.editor.topLevelChildIndex")
 }
@@ -564,11 +567,11 @@ final class RenderBridge {
         var traits: UIFontDescriptor.SymbolicTraits = []
         var useMonospace = false
         for mark in marks {
+            let markObject = mark as? [String: Any]
             let markType: String
             if let markName = mark as? String {
                 markType = markName
-            } else if let markObject = mark as? [String: Any],
-                      let resolvedType = markObject["type"] as? String {
+            } else if let resolvedType = markObject?["type"] as? String {
                 markType = resolvedType
             } else {
                 continue
@@ -588,6 +591,9 @@ final class RenderBridge {
             case "link":
                 attrs[.underlineStyle] = NSUnderlineStyle.single.rawValue
                 attrs[.foregroundColor] = UIColor.systemBlue
+                if let href = markObject?["href"] as? String, !href.isEmpty {
+                    attrs[RenderBridgeAttributes.linkHref] = href
+                }
             default:
                 break
             }

package/package.json

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