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

package/README.md

@@ -56,7 +56,7 @@ Required peer dependencies:
 Install the package:
 
 ```sh
-npm install @apollohg/react-native-prose-editor@0.4.3
+npm install @apollohg/react-native-prose-editor@0.5.0
 ```
 
 For local package development in this repo:

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

@@ -72,6 +72,11 @@ class EditorEditText @JvmOverloads constructor(
         val rect: RectF
     )
 
+    data class MentionHit(
+        val docPos: Int,
+        val label: String
+    )
+
     private data class ParsedRenderPatch(
         val startIndex: Int,
         val deleteCount: Int,
@@ -1578,6 +1583,49 @@ class EditorEditText @JvmOverloads constructor(
         }
     }
 
+    fun mentionHitAt(x: Float, y: Float): MentionHit? {
+        val spannable = text as? Spanned ?: return null
+        val layout = layout ?: return null
+        if (spannable.isEmpty()) return null
+
+        val localX = x - totalPaddingLeft + scrollX
+        val localY = y - totalPaddingTop + scrollY
+        if (localY < 0f || localY > layout.height.toFloat()) {
+            return null
+        }
+
+        val line = layout.getLineForVertical(localY.toInt())
+        val lineLeft = layout.getLineLeft(line)
+        val lineRight = layout.getLineRight(line)
+        if (localX < lineLeft || localX > lineRight) {
+            return null
+        }
+
+        val offset = layout.getOffsetForHorizontal(line, localX)
+            .coerceIn(0, maxOf(spannable.length - 1, 0))
+        val annotations = spannable.getSpans(
+            offset,
+            (offset + 1).coerceAtMost(spannable.length),
+            Annotation::class.java
+        )
+        val mentionAnnotation = annotations.firstOrNull {
+            it.key == "nativeVoidNodeType" && it.value == "mention"
+        } ?: return null
+        val docPos = annotations.firstOrNull { it.key == "nativeDocPos" }
+            ?.value
+            ?.toIntOrNull() ?: return null
+        val start = spannable.getSpanStart(mentionAnnotation)
+        val end = spannable.getSpanEnd(mentionAnnotation)
+        if (start < 0 || end <= start) {
+            return null
+        }
+
+        return MentionHit(
+            docPos = docPos,
+            label = 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

@@ -287,6 +287,14 @@ class NativeEditorModule : Module() {
         Function("editorCanRedo") { id: Int ->
             editorCanRedo(id.toULong())
         }
+        Function("renderDocumentJson") { configJson: String, json: String ->
+            val editorId = editorCreate(configJson)
+            try {
+                editorSetJson(editorId, json)
+            } finally {
+                editorDestroy(editorId)
+            }
+        }
 
         View(NativeEditorExpoView::class) {
             Events(
@@ -359,5 +367,17 @@ class NativeEditorModule : Module() {
             }
 
         }
+
+        View(NativeProseViewerExpoView::class) {
+            Name("NativeProseViewer")
+            Events("onContentHeightChange", "onPressMention")
+
+            Prop("renderJson") { view: NativeProseViewerExpoView, renderJson: String? ->
+                view.setRenderJson(renderJson)
+            }
+            Prop("themeJson") { view: NativeProseViewerExpoView, themeJson: String? ->
+                view.setThemeJson(themeJson)
+            }
+        }
     }
 }

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

@@ -0,0 +1,157 @@
+package com.apollohg.editor
+
+import android.content.Context
+import android.graphics.Color
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewGroup
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class NativeProseViewerExpoView(
+    context: Context,
+    appContext: AppContext
+) : ExpoView(context, appContext) {
+
+    private val proseView = EditorEditText(context)
+    private val onContentHeightChange 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
+
+    init {
+        proseView.setBaseStyle(
+            proseView.textSize,
+            proseView.currentTextColor,
+            Color.TRANSPARENT
+        )
+        proseView.isEditable = false
+        proseView.setImageResizingEnabled(false)
+        proseView.setHeightBehavior(EditorHeightBehavior.AUTO_GROW)
+        proseView.isFocusable = false
+        proseView.isFocusableInTouchMode = false
+        proseView.isCursorVisible = false
+        proseView.isLongClickable = false
+        proseView.setTextIsSelectable(false)
+        proseView.showSoftInputOnFocus = false
+        proseView.setOnTouchListener { _, event ->
+            if (event.actionMasked != MotionEvent.ACTION_UP) {
+                return@setOnTouchListener false
+            }
+
+            val mention = proseView.mentionHitAt(event.x, event.y) ?: return@setOnTouchListener false
+            onPressMention(
+                mapOf(
+                    "docPos" to mention.docPos,
+                    "label" to mention.label
+                )
+            )
+            true
+        }
+
+        addView(
+            proseView,
+            LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.WRAP_CONTENT
+            )
+        )
+    }
+
+    fun setRenderJson(renderJson: String?) {
+        if (lastRenderJson == renderJson) return
+        lastRenderJson = renderJson
+        proseView.applyRenderJSON(renderJson ?: "[]")
+        post {
+            requestLayout()
+            emitContentHeightIfNeeded(force = true)
+        }
+    }
+
+    fun setThemeJson(themeJson: String?) {
+        if (lastThemeJson == themeJson) return
+        lastThemeJson = themeJson
+        proseView.applyTheme(EditorTheme.fromJson(themeJson))
+        proseView.applyRenderJSON(lastRenderJson ?: "[]")
+        post {
+            requestLayout()
+            emitContentHeightIfNeeded(force = true)
+        }
+    }
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        val childWidthSpec = getChildMeasureSpec(
+            widthMeasureSpec,
+            paddingLeft + paddingRight,
+            proseView.layoutParams.width
+        )
+        val childHeightSpec = android.view.View.MeasureSpec.makeMeasureSpec(
+            0,
+            android.view.View.MeasureSpec.UNSPECIFIED
+        )
+        proseView.measure(childWidthSpec, childHeightSpec)
+
+        val desiredWidth = proseView.measuredWidth + paddingLeft + paddingRight
+        val desiredHeight = proseView.measuredHeight + paddingTop + paddingBottom
+        setMeasuredDimension(
+            resolveSize(desiredWidth, widthMeasureSpec),
+            resolveSize(desiredHeight, heightMeasureSpec)
+        )
+    }
+
+    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        val childLeft = paddingLeft
+        val childTop = paddingTop
+        proseView.layout(
+            childLeft,
+            childTop,
+            right - left - paddingRight,
+            childTop + proseView.measuredHeight
+        )
+        emitContentHeightIfNeeded()
+    }
+
+    private fun emitContentHeightIfNeeded(force: Boolean = false) {
+        val contentHeight = (measureContentHeightPx() + paddingTop + paddingBottom)
+            .coerceAtLeast(0)
+        if (contentHeight <= 0) {
+            return
+        }
+        if (!force && contentHeight == lastEmittedContentHeight) {
+            return
+        }
+        lastEmittedContentHeight = contentHeight
+        onContentHeightChange(mapOf("contentHeight" to contentHeight))
+    }
+
+    private fun measureContentHeightPx(): Int {
+        val currentMeasuredHeight = proseView.measuredHeight
+        if (currentMeasuredHeight > 0 && proseView.layout != null) {
+            return currentMeasuredHeight
+        }
+
+        val availableWidthPx = resolveAvailableWidthPx()
+        val childWidthSpec = View.MeasureSpec.makeMeasureSpec(availableWidthPx, View.MeasureSpec.EXACTLY)
+        val childHeightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
+        proseView.measure(childWidthSpec, childHeightSpec)
+        return proseView.measuredHeight
+    }
+
+    private fun resolveAvailableWidthPx(): Int {
+        val localWidth = width - paddingLeft - paddingRight
+        if (localWidth > 0) {
+            return localWidth
+        }
+
+        val parentWidth = ((parent as? View)?.width ?: 0) - paddingLeft - paddingRight
+        if (parentWidth > 0) {
+            return parentWidth
+        }
+
+        return (resources.displayMetrics.widthPixels - paddingLeft - paddingRight).coerceAtLeast(1)
+    }
+}

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

@@ -908,10 +908,12 @@ object RenderBridge {
                 "opaqueInlineAtom" -> {
                     val nodeType = element.optString("nodeType", "")
                     val label = element.optString("label", "?")
+                    val docPos = element.optInt("docPos", 0)
                     appendOpaqueInlineAtom(
                         state.result,
                         nodeType,
                         label,
+                        docPos,
                         baseFontSize,
                         textColor,
                         state.blockStack,
@@ -924,6 +926,7 @@ object RenderBridge {
                 "opaqueBlockAtom" -> {
                     val nodeType = element.optString("nodeType", "")
                     val label = element.optString("label", "?")
+                    val docPos = element.optInt("docPos", 0)
                     val blockSpacing = theme?.effectiveTextStyle(nodeType)?.spacingAfter
                     if (!state.isFirstBlock) {
                         val spacingPx = ((state.nextBlockSpacingBefore ?: 0f) * density).toInt()
@@ -941,6 +944,7 @@ object RenderBridge {
                         state.result,
                         nodeType,
                         label,
+                        docPos,
                         baseFontSize,
                         textColor,
                         theme,
@@ -1343,6 +1347,7 @@ object RenderBridge {
         builder: SpannableStringBuilder,
         nodeType: String,
         label: String,
+        docPos: Int,
         baseFontSize: Float,
         textColor: Int,
         blockStack: MutableList<BlockContext>,
@@ -1378,6 +1383,10 @@ object RenderBridge {
             Annotation("nativeVoidNodeType", nodeType),
             start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
         )
+        builder.setSpan(
+            Annotation("nativeDocPos", docPos.toString()),
+            start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+        )
         if (isMention && (theme?.mentions?.fontWeight == "bold" ||
                 theme?.mentions?.fontWeight?.toIntOrNull()?.let { it >= 600 } == true)
         ) {
@@ -1393,6 +1402,7 @@ object RenderBridge {
         builder: SpannableStringBuilder,
         nodeType: String,
         label: String,
+        docPos: Int,
         baseFontSize: Float,
         textColor: Int,
         theme: EditorTheme?,
@@ -1415,6 +1425,10 @@ object RenderBridge {
             Annotation("nativeVoidNodeType", nodeType),
             start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
         )
+        builder.setSpan(
+            Annotation("nativeDocPos", docPos.toString()),
+            start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+        )
         annotateTopLevelChild(builder, start, end, topLevelChildIndex)
     }
 

package/dist/NativeProseViewer.d.ts

@@ -0,0 +1,21 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type EditorTheme } from './EditorTheme';
+import type { DocumentJSON } from './NativeEditorBridge';
+import { type SchemaDefinition } from './schemas';
+export interface NativeProseViewerMentionPressEvent {
+    docPos: number;
+    label: string;
+    attrs: Record<string, unknown>;
+}
+type NativeProseViewerContent = DocumentJSON | string;
+export interface NativeProseViewerProps {
+    contentJSON: NativeProseViewerContent;
+    contentJSONRevision?: string | number;
+    schema?: SchemaDefinition;
+    theme?: EditorTheme;
+    style?: StyleProp<ViewStyle>;
+    allowBase64Images?: boolean;
+    onPressMention?: (event: NativeProseViewerMentionPressEvent) => void;
+}
+export declare function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, style, allowBase64Images, onPressMention, }: NativeProseViewerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/NativeProseViewer.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeProseViewer = NativeProseViewer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const expo_modules_core_1 = require("expo-modules-core");
+const addons_1 = require("./addons");
+const EditorTheme_1 = require("./EditorTheme");
+const schemas_1 = require("./schemas");
+const NativeProseViewerView = (0, expo_modules_core_1.requireNativeViewManager)('NativeEditor', 'NativeProseViewer');
+let nativeProseViewerModule = null;
+function getNativeProseViewerModule() {
+    if (!nativeProseViewerModule) {
+        nativeProseViewerModule =
+            (0, expo_modules_core_1.requireNativeModule)('NativeEditor');
+    }
+    return nativeProseViewerModule;
+}
+const serializedJsonCache = new WeakMap();
+function stringifyCachedJson(value) {
+    if (value != null && typeof value === 'object') {
+        const cached = serializedJsonCache.get(value);
+        if (cached != null) {
+            return cached;
+        }
+        const serialized = JSON.stringify(value);
+        serializedJsonCache.set(value, serialized);
+        return serialized;
+    }
+    return JSON.stringify(value);
+}
+function looksLikeRenderElementsJson(json) {
+    for (let index = 0; index < json.length; index += 1) {
+        const char = json[index];
+        if (char === ' ' || char === '\n' || char === '\r' || char === '\t') {
+            continue;
+        }
+        return char === '[';
+    }
+    return false;
+}
+function unicodeScalarLength(text) {
+    let length = 0;
+    for (const _char of text) {
+        length += 1;
+    }
+    return length;
+}
+function normalizeMentionAttrs(node) {
+    if (node == null || typeof node !== 'object') {
+        return {};
+    }
+    const attrs = node.attrs;
+    if (attrs == null || typeof attrs !== 'object' || Array.isArray(attrs)) {
+        return {};
+    }
+    return attrs;
+}
+function collectMentionPayloadsByDocPos(document) {
+    const mentions = new Map();
+    const visit = (node, pos, isRoot = false) => {
+        if (node == null || typeof node !== 'object') {
+            return pos;
+        }
+        const nodeRecord = node;
+        const nodeType = typeof nodeRecord.type === 'string' ? nodeRecord.type : '';
+        const content = Array.isArray(nodeRecord.content) ? nodeRecord.content : [];
+        if (nodeType === 'text') {
+            const text = typeof nodeRecord.text === 'string' ? nodeRecord.text : '';
+            return pos + unicodeScalarLength(text);
+        }
+        if (nodeType === 'mention') {
+            const attrs = normalizeMentionAttrs(nodeRecord);
+            const label = typeof attrs.label === 'string' ? attrs.label : undefined;
+            mentions.set(pos, { label, attrs });
+        }
+        if (isRoot && nodeType === 'doc') {
+            let nextPos = pos;
+            for (const child of content) {
+                nextPos = visit(child, nextPos);
+            }
+            return nextPos;
+        }
+        if (content.length === 0) {
+            return pos + 1;
+        }
+        let nextPos = pos + 1;
+        for (const child of content) {
+            nextPos = visit(child, nextPos);
+        }
+        return nextPos + 1;
+    };
+    visit(document, 0, true);
+    return mentions;
+}
+function serializeDocumentInput(document, schema) {
+    if (typeof document === 'string') {
+        try {
+            const parsed = JSON.parse(document);
+            const normalizedDocument = (0, schemas_1.normalizeDocumentJson)(parsed, schema);
+            return {
+                normalizedDocument,
+                serializedContentJson: stringifyCachedJson(normalizedDocument),
+            };
+        }
+        catch {
+            return {
+                normalizedDocument: null,
+                serializedContentJson: document,
+            };
+        }
+    }
+    const normalizedDocument = (0, schemas_1.normalizeDocumentJson)(document, schema);
+    return {
+        normalizedDocument,
+        serializedContentJson: stringifyCachedJson(normalizedDocument),
+    };
+}
+function extractRenderError(json) {
+    try {
+        const parsed = JSON.parse(json);
+        if (parsed == null || typeof parsed !== 'object' || Array.isArray(parsed)) {
+            return null;
+        }
+        const error = parsed.error;
+        return typeof error === 'string' ? error : null;
+    }
+    catch {
+        return null;
+    }
+}
+function NativeProseViewer({ contentJSON, contentJSONRevision, schema, theme, style, allowBase64Images = false, 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]);
+    const renderJson = (0, react_1.useMemo)(() => {
+        const configJson = JSON.stringify({
+            schema: documentSchema,
+            ...(allowBase64Images ? { allowBase64Images } : {}),
+        });
+        const nextRenderJson = getNativeProseViewerModule().renderDocumentJson(configJson, serializedContentJson);
+        const renderError = extractRenderError(nextRenderJson);
+        if (renderError != null) {
+            console.error(`NativeProseViewer: ${renderError}`);
+            return '[]';
+        }
+        if (looksLikeRenderElementsJson(nextRenderJson)) {
+            return nextRenderJson;
+        }
+        console.error('NativeProseViewer: native renderDocumentJson returned an invalid payload.');
+        return '[]';
+    }, [allowBase64Images, documentSchema, serializedContentJson]);
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(null);
+    const handleContentHeightChange = (0, react_1.useCallback)((event) => {
+        const nextHeight = event.nativeEvent.contentHeight;
+        setContentHeight((currentHeight) => currentHeight === nextHeight ? currentHeight : nextHeight);
+    }, []);
+    const handlePressMention = (0, react_1.useCallback)((event) => {
+        if (!onPressMention)
+            return;
+        const { docPos, label } = event.nativeEvent;
+        const resolvedMention = mentionPayloadsByDocPos.get(docPos);
+        onPressMention({
+            docPos,
+            label: resolvedMention?.label ?? label,
+            attrs: resolvedMention?.attrs ?? {},
+        });
+    }, [mentionPayloadsByDocPos, onPressMention]);
+    const nativeStyle = (0, react_1.useMemo)(() => [{ minHeight: 1 }, style, contentHeight != null ? { height: contentHeight } : null], [contentHeight, style]);
+    return ((0, jsx_runtime_1.jsx)(NativeProseViewerView, { style: nativeStyle, renderJson: renderJson, themeJson: themeJson, onContentHeightChange: handleContentHeightChange, onPressMention: typeof onPressMention === 'function' ? handlePressMention : undefined }));
+}

package/dist/index.d.ts

@@ -1,4 +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 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 MentionSelectEvent, type EditorAddonEvent, } from './addons';

package/dist/index.js

@@ -1,8 +1,10 @@
 "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.NativeRichTextEditor = void 0;
+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");
+Object.defineProperty(exports, "NativeProseViewer", { enumerable: true, get: function () { return NativeProseViewer_1.NativeProseViewer; } });
 var EditorToolbar_1 = require("./EditorToolbar");
 Object.defineProperty(exports, "EditorToolbar", { enumerable: true, get: function () { return EditorToolbar_1.EditorToolbar; } });
 Object.defineProperty(exports, "DEFAULT_EDITOR_TOOLBAR_ITEMS", { enumerable: true, get: function () { return EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS; } });

package/ios/NativeEditorModule.swift

@@ -261,6 +261,13 @@ public class NativeEditorModule: Module {
         Function("editorCanRedo") { (id: Int) -> Bool in
             editorCanRedo(id: UInt64(id))
         }
+        Function("renderDocumentJson") { (configJson: String, json: String) -> String in
+            let editorId = editorCreate(configJson: configJson)
+            defer {
+                editorDestroy(id: editorId)
+            }
+            return editorSetJson(id: editorId, json: json)
+        }
         Function("editorReplaceHtml") { (id: Int, html: String) -> String in
             editorReplaceHtml(id: UInt64(id), html: html)
         }
@@ -365,5 +372,17 @@ public class NativeEditorModule: Module {
                 view.blur()
             }
         }
+
+        View(NativeProseViewerExpoView.self) {
+            ViewName("NativeProseViewer")
+            Events("onContentHeightChange", "onPressMention")
+
+            Prop("renderJson") { (view: NativeProseViewerExpoView, renderJson: String?) in
+                view.setRenderJson(renderJson)
+            }
+            Prop("themeJson") { (view: NativeProseViewerExpoView, themeJson: String?) in
+                view.setThemeJson(themeJson)
+            }
+        }
     }
 }

package/ios/NativeProseViewerExpoView.swift

@@ -0,0 +1,146 @@
+import ExpoModulesCore
+import UIKit
+
+final class NativeProseViewerExpoView: ExpoView {
+    let onContentHeightChange = EventDispatcher()
+    let onPressMention = EventDispatcher()
+
+    private let textView = EditorTextView(frame: .zero, textContainer: nil)
+    private var lastRenderJSON: String?
+    private var lastThemeJSON: String?
+    private var lastEmittedContentHeight: CGFloat = 0
+    private var lastMeasuredWidth: CGFloat = 0
+
+    private lazy var mentionTapRecognizer: UITapGestureRecognizer = {
+        let recognizer = UITapGestureRecognizer(
+            target: self,
+            action: #selector(handleMentionTap(_:))
+        )
+        recognizer.cancelsTouchesInView = false
+        return recognizer
+    }()
+
+    required init(appContext: AppContext? = nil) {
+        super.init(appContext: appContext)
+        setupView()
+    }
+
+    private func setupView() {
+        textView.baseBackgroundColor = .clear
+        textView.backgroundColor = .clear
+        textView.isEditable = false
+        textView.isSelectable = false
+        textView.allowImageResizing = false
+        textView.heightBehavior = .autoGrow
+        textView.onHeightMayChange = { [weak self] measuredHeight in
+            self?.emitContentHeightIfNeeded(measuredHeight: measuredHeight, force: true)
+        }
+        textView.addGestureRecognizer(mentionTapRecognizer)
+        addSubview(textView)
+    }
+
+    func setRenderJson(_ renderJson: String?) {
+        guard lastRenderJSON != renderJson else { return }
+        lastRenderJSON = renderJson
+        applyRenderJSON()
+    }
+
+    func setThemeJson(_ themeJson: String?) {
+        guard lastThemeJSON != themeJson else { return }
+        lastThemeJSON = themeJson
+        let theme = EditorTheme.from(json: themeJson)
+        textView.applyTheme(theme)
+        let cornerRadius = theme?.borderRadius ?? 0
+        layer.cornerRadius = cornerRadius
+        clipsToBounds = cornerRadius > 0
+        applyRenderJSON()
+    }
+
+    override var intrinsicContentSize: CGSize {
+        guard lastEmittedContentHeight > 0 else {
+            return CGSize(width: UIView.noIntrinsicMetric, height: UIView.noIntrinsicMetric)
+        }
+        return CGSize(width: UIView.noIntrinsicMetric, height: lastEmittedContentHeight)
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        textView.frame = bounds
+        textView.updateAutoGrowHostHeight(bounds.height)
+
+        let currentWidth = ceil(bounds.width)
+        guard abs(currentWidth - lastMeasuredWidth) > 0.5 else { return }
+        lastMeasuredWidth = currentWidth
+        emitContentHeightIfNeeded(force: true)
+    }
+
+    private func applyRenderJSON() {
+        textView.applyRenderJSON(lastRenderJSON ?? "[]")
+        emitContentHeightIfNeeded(force: true)
+    }
+
+    private func emitContentHeightIfNeeded(
+        measuredHeight: CGFloat? = nil,
+        force: Bool = false
+    ) {
+        let resolvedWidth = bounds.width > 0
+            ? bounds.width
+            : (superview?.bounds.width ?? UIScreen.main.bounds.width)
+        let fittedHeight = measuredHeight
+            ?? textView.sizeThatFits(
+                CGSize(width: resolvedWidth, height: CGFloat.greatestFiniteMagnitude)
+            ).height
+        let contentHeight = ceil(fittedHeight)
+        guard contentHeight > 0 else { return }
+        guard force || abs(contentHeight - lastEmittedContentHeight) > 0.5 else { return }
+        lastEmittedContentHeight = contentHeight
+        invalidateIntrinsicContentSize()
+        onContentHeightChange(["contentHeight": contentHeight])
+    }
+
+    @objc private func handleMentionTap(_ recognizer: UITapGestureRecognizer) {
+        guard recognizer.state == .ended,
+              let mention = mentionHit(at: recognizer.location(in: textView))
+        else {
+            return
+        }
+
+        onPressMention([
+            "docPos": mention.docPos,
+            "label": mention.label,
+        ])
+    }
+
+    private func mentionHit(at location: CGPoint) -> (docPos: Int, label: String)? {
+        let textStorage = textView.textStorage
+        guard textStorage.length > 0 else { return nil }
+
+        let layoutManager = textView.layoutManager
+        let textContainer = textView.textContainer
+        var containerPoint = location
+        containerPoint.x -= textView.textContainerInset.left
+        containerPoint.y -= textView.textContainerInset.top
+
+        let usedRect = layoutManager.usedRect(for: textContainer)
+        guard usedRect.insetBy(dx: -6, dy: -6).contains(containerPoint) else {
+            return nil
+        }
+
+        let glyphIndex = layoutManager.glyphIndex(for: containerPoint, in: textContainer)
+        guard glyphIndex < layoutManager.numberOfGlyphs else { return nil }
+        let characterIndex = layoutManager.characterIndexForGlyph(at: glyphIndex)
+        guard characterIndex < textStorage.length else { return nil }
+
+        var effectiveRange = NSRange(location: 0, length: 0)
+        let attrs = textStorage.attributes(at: characterIndex, effectiveRange: &effectiveRange)
+        guard (attrs[RenderBridgeAttributes.voidNodeType] as? String) == "mention" else {
+            return nil
+        }
+
+        let docPos =
+            (attrs[RenderBridgeAttributes.docPos] as? NSNumber)?.intValue
+            ?? Int((attrs[RenderBridgeAttributes.docPos] as? UInt32) ?? 0)
+        let label = (textStorage.string as NSString).substring(with: effectiveRange)
+        return (docPos: docPos, label: label)
+    }
+}

package/package.json

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