@openeditor/react-native-prose-editor 0.0.10 → 0.0.12

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

@@ -42,10 +42,12 @@ import uniffi.editor_core.editorSetNodeSelection
 import uniffi.editor_core.editorSetSelection
 import uniffi.editor_core.editorSplitBlock
 import uniffi.editor_core.editorToggleTaskItemCheckedAtSelectionScalar
+import uniffi.editor_core.editorUpdateNodeAttrs
 
 internal data class SelectedImageGeometry(val docPos: Int, val rect: RectF)
 
 class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
+    var onPageOpen: ((String, String, String?, String?) -> Unit)? = null
     var isScrollingEnabled: Boolean = true
 
     internal var geometryRevision: Long = 0
@@ -616,6 +618,9 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
     internal fun tableFillColorsForTesting(): List<Int> = tableCells.map { it.baseFillColor }
 
     private fun viewForNode(node: JSONObject, depth: Int, path: List<Int>): View {
+        if (node.optString("nodeType") == "page") {
+            return pageView(node, depth).also { nodeViews[path] = it }
+        }
         val rendered = when (node.optString("kind")) {
             "list" -> listView(node, depth, path)
             "listItem" -> listItemView(node, 0, null, depth, path)
@@ -696,10 +701,6 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
             orientation = LinearLayout.HORIZONTAL
             isBaselineAligned = false
         }
-        row.addView(
-            markerView(node, parentListType, index),
-            LinearLayout.LayoutParams((24 * density).toInt(), (24 * density).toInt())
-        )
         val content = LinearLayout(context).apply {
             orientation = LinearLayout.VERTICAL
             setPadding((8 * density).toInt(), 0, 0, 0)
@@ -711,12 +712,26 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         if (content.childCount == 0) {
             content.addView(textBlockView(node, depth + 1))
         }
+        val marker = if (parentListType == "toggleList" || parentListType == "toggle_list") {
+            val open = node.optJSONObject("attrs")?.optBoolean("open", true) ?: true
+            setToggleContent(content, open)
+            toggleMarkerView(node, content, open)
+        } else {
+            markerView(node, parentListType, index)
+        }
+        row.addView(
+            marker,
+            LinearLayout.LayoutParams((24 * density).toInt(), (24 * density).toInt())
+        )
         row.addView(content, LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f))
         return row
     }
 
     private fun blockContainerView(node: JSONObject, depth: Int, path: List<Int>): View {
         val density = resources.displayMetrics.density
+        if (node.optString("nodeType") == "callout") {
+            return calloutView(node, depth, path)
+        }
         if (node.optString("nodeType") == "blockquote") {
             val row = LinearLayout(context).apply {
                 orientation = LinearLayout.HORIZONTAL
@@ -755,6 +770,86 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         return container
     }
 
+    private fun calloutView(node: JSONObject, depth: Int, path: List<Int>): View {
+        val density = resources.displayMetrics.density
+        val tone = node.optJSONObject("attrs")?.optString("tone", "info") ?: "info"
+        val accent = when (tone) {
+            "success" -> 0xFF16A34A.toInt()
+            "warning" -> 0xFFD97706.toInt()
+            "danger" -> 0xFFDC2626.toInt()
+            else -> 0xFF2563EB.toInt()
+        }
+        val container = LinearLayout(context).apply {
+            orientation = LinearLayout.VERTICAL
+            val padding = (12 * density).toInt()
+            setPadding(padding, padding, padding, padding)
+            background = roundedDrawable(
+                Color.argb(24, Color.red(accent), Color.green(accent), Color.blue(accent)),
+                Color.argb(140, Color.red(accent), Color.green(accent), Color.blue(accent)),
+                1f,
+                10f
+            )
+        }
+        container.addView(TextView(context).apply {
+            text = tone.replaceFirstChar { it.uppercase() }
+            setTextColor(accent)
+            setTextSize(TypedValue.COMPLEX_UNIT_SP, 12f)
+            setTypeface(typeface, Typeface.BOLD)
+            isClickable = this@NativeBlockEditorSurface.isEditable
+            setOnClickListener { cycleCalloutTone(node) }
+        })
+        val children = node.optJSONArray("children")
+        for (index in 0 until (children?.length() ?: 0)) {
+            children?.optJSONObject(index)?.let { container.addView(viewForNode(it, depth + 1, path + index)) }
+        }
+        return container
+    }
+
+    private fun toggleMarkerView(node: JSONObject, content: LinearLayout, initiallyOpen: Boolean): View =
+        TextView(context).apply {
+            var open = initiallyOpen
+            text = if (open) "⌄" else "›"
+            contentDescription = if (open) "Collapse toggle item" else "Expand toggle item"
+            gravity = android.view.Gravity.CENTER
+            setTextColor(currentTheme?.list?.markerColor ?: baseTextColor)
+            setTextSize(TypedValue.COMPLEX_UNIT_SP, 18f)
+            setTypeface(typeface, Typeface.BOLD)
+            setOnClickListener {
+                open = !open
+                text = if (open) "⌄" else "›"
+                contentDescription = if (open) "Collapse toggle item" else "Expand toggle item"
+                setToggleContent(content, open)
+                if (isEditable) updateNodeAttrs(node, JSONObject().put("open", open))
+            }
+        }
+
+    private fun setToggleContent(content: LinearLayout, open: Boolean) {
+        for (index in 1 until content.childCount) {
+            content.getChildAt(index).visibility = if (open) View.VISIBLE else View.GONE
+        }
+    }
+
+    private fun cycleCalloutTone(node: JSONObject) {
+        if (!isEditable) return
+        val tones = listOf("info", "success", "warning", "danger")
+        val current = node.optJSONObject("attrs")?.optString("tone", "info") ?: "info"
+        val next = tones[(tones.indexOf(current).coerceAtLeast(0) + 1) % tones.size]
+        updateNodeAttrs(node, JSONObject().put("tone", next))
+    }
+
+    private fun updateNodeAttrs(node: JSONObject, patch: JSONObject) {
+        if (currentEditorId == 0L) return
+        val attrs = JSONObject(node.optJSONObject("attrs")?.toString() ?: "{}")
+        patch.keys().forEach { key -> attrs.put(key, patch.get(key)) }
+        val updateJSON = editorUpdateNodeAttrs(
+            currentEditorId.toULong(),
+            node.optInt("docPos", 0).toUInt(),
+            attrs.toString()
+        )
+        applyUpdateJSON(updateJSON, currentEditorId)
+        onAppliedUpdate?.invoke(updateJSON)
+    }
+
     private fun tableView(node: JSONObject, path: List<Int>): View {
         val tableId = nextTableId++
         val table = LinearLayout(context).apply {
@@ -829,6 +924,42 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         return TextLeaf(context).also { configureTextLeaf(it, node) }
     }
 
+    private fun pageView(node: JSONObject, depth: Int): View {
+        val density = resources.displayMetrics.density
+        val attrs = node.optJSONObject("attrs")
+        val row = LinearLayout(context).apply {
+            orientation = LinearLayout.HORIZONTAL
+            gravity = android.view.Gravity.CENTER_VERTICAL
+            val horizontal = (6 * density).toInt()
+            val vertical = (5 * density).toInt()
+            setPadding(horizontal + (depth * 8 * density).toInt(), vertical, horizontal, vertical)
+        }
+        row.addView(TextView(context).apply {
+            text = attrs?.optString("icon", "📄") ?: "📄"
+            setTextSize(TypedValue.COMPLEX_UNIT_SP, 18f)
+        }, LinearLayout.LayoutParams((28 * density).toInt(), ViewGroup.LayoutParams.WRAP_CONTENT))
+        val title = textBlockView(node, depth) as TextLeaf
+        title.setTypeface(title.typeface, Typeface.BOLD)
+        row.addView(title, LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f))
+        row.addView(TextView(context).apply {
+            text = "→"
+            contentDescription = "Open page"
+            gravity = android.view.Gravity.CENTER
+            setTextSize(TypedValue.COMPLEX_UNIT_SP, 18f)
+            setTypeface(typeface, Typeface.BOLD)
+            setOnClickListener {
+                val pageId = attrs?.optString("pageId").orEmpty()
+                if (pageId.isNotEmpty()) onPageOpen?.invoke(
+                    pageId,
+                    title.text?.toString().orEmpty().ifEmpty { "Untitled" },
+                    attrs?.optString("icon")?.takeIf(String::isNotEmpty),
+                    attrs?.optString("href")?.takeIf(String::isNotEmpty),
+                )
+            }
+        }, LinearLayout.LayoutParams((40 * density).toInt(), (40 * density).toInt()))
+        return row
+    }
+
     private fun configureTextLeaf(leaf: TextLeaf, node: JSONObject) {
         val rendered = attributedInlineContent(node)
         val hadFocus = leaf.hasFocus()

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

@@ -727,6 +727,12 @@ class NativeEditorExpoView(
         addView(richTextView, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
         richTextView.onSelectionChange = ::onSelectionChanged
         richTextView.onEditorUpdate = ::onEditorUpdate
+        richTextView.onPageOpen = { pageId, title, icon, href ->
+            val event = mutableMapOf<String, Any>("type" to "pageOpen", "pageId" to pageId, "title" to title)
+            icon?.let { event["icon"] = it }
+            href?.let { event["href"] = it }
+            emitAddonEvent(mapOf("eventJson" to JSONObject(event).toString()))
+        }
         richTextView.onBeforeDetachedFromWindow = {
             prepareForDetachFromWindow()
         }

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

@@ -38,6 +38,7 @@ class RichTextEditorView @JvmOverloads constructor(
     var onSelectionChange: ((Int, Int) -> Unit)? = null
     var onEditorUpdate: ((String) -> Unit)? = null
     var onFocusChange: ((Boolean) -> Unit)? = null
+    var onPageOpen: ((String, String, String?, String?) -> Unit)? = null
 
     var editorId: Long
         get() = currentEditorId
@@ -60,6 +61,7 @@ class RichTextEditorView @JvmOverloads constructor(
         blockSurface.onSelectionChange = { anchor, head -> onSelectionChange?.invoke(anchor, head) }
         blockSurface.onEditorUpdate = { update -> onEditorUpdate?.invoke(update) }
         blockSurface.onFocusChange = { focused -> onFocusChange?.invoke(focused) }
+        blockSurface.onPageOpen = { pageId, title, icon, href -> onPageOpen?.invoke(pageId, title, icon, href) }
         updateAppearance()
     }
 

package/dist/NativeRichTextEditor.d.ts

@@ -81,6 +81,13 @@ export interface NativeRichTextEditorProps {
     onRequestLink?: (context: LinkRequestContext) => void;
     /** Called when a toolbar image item is pressed so the host can choose an image source. */
     onRequestImage?: (context: ImageRequestContext) => void;
+    /** Called when the disclosure control on a Page block is pressed. */
+    onOpenPage?: (page: {
+        pageId: string;
+        title: string;
+        icon?: string | null;
+        href?: string | null;
+    }) => void;
     /** Whether plain URLs typed or pasted into the editor should be converted into link marks automatically. */
     autoDetectLinks?: boolean;
     /** Whether `data:image/...` sources are accepted for image insertion and HTML parsing. */

package/dist/NativeRichTextEditor.js

@@ -559,7 +559,7 @@ function doesLiveMentionQueryConflictWithNativeSelectRequest(request, currentQue
         currentQuery.range.anchor !== request.range.anchor ||
         currentQuery.range.head !== request.range.head);
 }
-exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEditor({ initialContent, initialJSON, value, valueJSON, valueJSONRevision, valueJSONUpdateMode = 'replace', preserveSelectionOnValueJSONReset = false, selectionOnValueJSONReset, schema, placeholder, editable = true, maxLength, autoFocus = false, autoCapitalize, autoCorrect, keyboardType, keyboardAppearance, heightBehavior = 'autoGrow', showToolbar = true, toolbarPlacement = 'keyboard', toolbarItems = EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS, onToolbarAction, onRequestLink, onRequestImage, autoDetectLinks = false, onContentChange, onContentChangeJSON, onSelectionChange, onActiveStateChange, onHistoryStateChange, onFocus, onBlur, style, containerStyle, theme, addons, remoteSelections, allowBase64Images = false, allowImageResizing = true, }, ref) {
+exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEditor({ initialContent, initialJSON, value, valueJSON, valueJSONRevision, valueJSONUpdateMode = 'replace', preserveSelectionOnValueJSONReset = false, selectionOnValueJSONReset, schema, placeholder, editable = true, maxLength, autoFocus = false, autoCapitalize, autoCorrect, keyboardType, keyboardAppearance, heightBehavior = 'autoGrow', showToolbar = true, toolbarPlacement = 'keyboard', toolbarItems = EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS, onToolbarAction, onRequestLink, onRequestImage, onOpenPage, autoDetectLinks = false, onContentChange, onContentChangeJSON, onSelectionChange, onActiveStateChange, onHistoryStateChange, onFocus, onBlur, style, containerStyle, theme, addons, remoteSelections, allowBase64Images = false, allowImageResizing = true, }, ref) {
     const bridgeRef = (0, react_1.useRef)(null);
     const nativeViewRef = (0, react_1.useRef)(null);
     const [isReady, setIsReady] = (0, react_1.useState)(false);
@@ -2054,6 +2054,15 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         }
         if (!parsed)
             return;
+        if (parsed.type === 'pageOpen') {
+            onOpenPage?.({
+                pageId: parsed.pageId,
+                title: parsed.title,
+                icon: parsed.icon,
+                href: parsed.href,
+            });
+            return;
+        }
         let parsedDocumentVersion = typeof parsed.documentVersion === 'number' ? parsed.documentVersion : undefined;
         if (typeof parsedDocumentVersion !== 'number' &&
             parsed.type === 'mentionsSelectRequest' &&
@@ -2169,6 +2178,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         resolveMentionInsertionAttrs,
         runAndApplyWithCommandRetry,
         setMentionQueryEventState,
+        onOpenPage,
         syncPreflightUpdateFromNativeEvent,
     ]);
     (0, react_1.useImperativeHandle)(ref, () => ({

package/dist/addons.d.ts

@@ -65,6 +65,12 @@ export interface SerializedEditorAddons {
     mentions?: SerializedMentionsAddonConfig;
 }
 export type EditorAddonEvent = {
+    type: 'pageOpen';
+    pageId: string;
+    title: string;
+    icon?: string | null;
+    href?: string | null;
+} | {
     type: 'mentionsQueryChange';
     query: string;
     trigger: string;

package/ios/Generated_editor_core.swift

@@ -1323,6 +1323,18 @@ public func editorUnwrapFromListAtSelectionScalar(id: UInt64, scalarAnchor: UInt
     )
 })
 }
+/**
+ * Replace a node's attributes at its document position.
+ */
+public func editorUpdateNodeAttrs(id: UInt64, pos: UInt32, attrsJson: String) -> String  {
+    return try!  FfiConverterString.lift(try! rustCall() {
+    uniffi_editor_core_fn_func_editor_update_node_attrs(
+        FfiConverterUInt64.lower(id),
+        FfiConverterUInt32.lower(pos),
+        FfiConverterString.lower(attrsJson),$0
+    )
+})
+}
 /**
  * Wrap the current selection in a list. Returns an update JSON string.
  */
@@ -1582,6 +1594,9 @@ private let initializationResult: InitializationResult = {
     if (uniffi_editor_core_checksum_func_editor_unwrap_from_list_at_selection_scalar() != 57899) {
         return InitializationResult.apiChecksumMismatch
     }
+    if (uniffi_editor_core_checksum_func_editor_update_node_attrs() != 14684) {
+        return InitializationResult.apiChecksumMismatch
+    }
     if (uniffi_editor_core_checksum_func_editor_wrap_in_list() != 32846) {
         return InitializationResult.apiChecksumMismatch
     }

package/ios/NativeBlockEditorSurface.swift

@@ -1,6 +1,7 @@
 import UIKit
 
 final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestureRecognizerDelegate {
+    var onPageOpen: ((String, String, String?, String?) -> Void)?
     private final class TextLeafView: UITextView {
         struct PositionSegment {
             let range: NSRange
@@ -696,6 +697,11 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
     }
 
     private func view(for node: [String: Any], depth: Int, path: [Int]) -> UIView {
+        if node["nodeType"] as? String == "page" {
+            let rendered = pageView(for: node, depth: depth)
+            nodeViews[path] = rendered
+            return rendered
+        }
         let rendered: UIView = switch node["kind"] as? String {
         case "list":
             listView(for: node, depth: depth, path: path)
@@ -785,8 +791,6 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         row.alignment = .top
         row.spacing = 8
 
-        row.addArrangedSubview(markerView(for: node, parentListType: parentListType, index: index))
-
         let content = UIStackView()
         content.axis = .vertical
         content.spacing = 4
@@ -796,11 +800,20 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         if content.arrangedSubviews.isEmpty {
             content.addArrangedSubview(textBlockView(for: node, depth: depth + 1))
         }
+        if parentListType == "toggleList" || parentListType == "toggle_list" {
+            row.addArrangedSubview(toggleMarkerView(for: node, content: content))
+            setToggleContent(content, open: boolAttr(node, "open") ?? true)
+        } else {
+            row.addArrangedSubview(markerView(for: node, parentListType: parentListType, index: index))
+        }
         row.addArrangedSubview(content)
         return row
     }
 
     private func blockContainerView(for node: [String: Any], depth: Int, path: [Int]) -> UIView {
+        if (node["nodeType"] as? String) == "callout" {
+            return calloutView(for: node, depth: depth, path: path)
+        }
         let container = UIStackView()
         container.axis = .vertical
         container.spacing = 4
@@ -834,6 +847,96 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         return container
     }
 
+    private func calloutView(for node: [String: Any], depth: Int, path: [Int]) -> UIView {
+        let tone = stringAttr(node, "tone") ?? "info"
+        let accent: UIColor = switch tone {
+        case "success": .systemGreen
+        case "warning": .systemOrange
+        case "danger": .systemRed
+        default: .systemBlue
+        }
+        let container = UIStackView()
+        container.axis = .vertical
+        container.spacing = 8
+        container.layoutMargins = UIEdgeInsets(top: 12, left: 12, bottom: 12, right: 12)
+        container.isLayoutMarginsRelativeArrangement = true
+        container.backgroundColor = accent.withAlphaComponent(0.1)
+        container.layer.borderColor = accent.withAlphaComponent(0.55).cgColor
+        container.layer.borderWidth = 1
+        container.layer.cornerRadius = 10
+
+        let toneButton = UIButton(type: .system)
+        toneButton.setTitle(tone.capitalized, for: .normal)
+        toneButton.setTitleColor(accent, for: .normal)
+        toneButton.titleLabel?.font = .systemFont(ofSize: 12, weight: .semibold)
+        toneButton.contentHorizontalAlignment = .leading
+        toneButton.isEnabled = isEditable
+        toneButton.addAction(UIAction { [weak self] _ in
+            self?.cycleCalloutTone(node)
+        }, for: .touchUpInside)
+        container.addArrangedSubview(toneButton)
+
+        for (index, child) in (node["children"] as? [[String: Any]] ?? []).enumerated() {
+            container.addArrangedSubview(view(for: child, depth: depth + 1, path: path + [index]))
+        }
+        return container
+    }
+
+    private func toggleMarkerView(for node: [String: Any], content: UIStackView) -> UIView {
+        let open = boolAttr(node, "open") ?? true
+        let button = UIButton(type: .system)
+        button.setTitle(open ? "⌄" : "›", for: .normal)
+        button.titleLabel?.font = .systemFont(ofSize: 18, weight: .semibold)
+        button.accessibilityLabel = open ? "Collapse toggle item" : "Expand toggle item"
+        button.addAction(UIAction { [weak self, weak button, weak content] _ in
+            guard let self, let button, let content else { return }
+            let nextOpen = button.title(for: .normal) != "⌄"
+            button.setTitle(nextOpen ? "⌄" : "›", for: .normal)
+            button.accessibilityLabel = nextOpen ? "Collapse toggle item" : "Expand toggle item"
+            self.setToggleContent(content, open: nextOpen)
+            if self.isEditable {
+                self.updateNodeAttrs(node, patch: ["open": nextOpen])
+            }
+        }, for: .touchUpInside)
+        let wrapper = UIView()
+        wrapper.widthAnchor.constraint(equalToConstant: 24).isActive = true
+        wrapper.heightAnchor.constraint(equalToConstant: 24).isActive = true
+        button.translatesAutoresizingMaskIntoConstraints = false
+        wrapper.addSubview(button)
+        NSLayoutConstraint.activate([
+            button.centerXAnchor.constraint(equalTo: wrapper.centerXAnchor),
+            button.centerYAnchor.constraint(equalTo: wrapper.centerYAnchor),
+        ])
+        return wrapper
+    }
+
+    private func setToggleContent(_ content: UIStackView, open: Bool) {
+        for (index, child) in content.arrangedSubviews.enumerated() where index > 0 {
+            child.isHidden = !open
+        }
+    }
+
+    private func cycleCalloutTone(_ node: [String: Any]) {
+        guard isEditable else { return }
+        let tones = ["info", "success", "warning", "danger"]
+        let current = stringAttr(node, "tone") ?? "info"
+        let next = tones[((tones.firstIndex(of: current) ?? 0) + 1) % tones.count]
+        updateNodeAttrs(node, patch: ["tone": next])
+    }
+
+    private func updateNodeAttrs(_ node: [String: Any], patch: [String: Any]) {
+        guard currentEditorId != 0 else { return }
+        var attrs = node["attrs"] as? [String: Any] ?? [:]
+        attrs.merge(patch) { _, next in next }
+        guard let data = try? JSONSerialization.data(withJSONObject: attrs),
+              let json = String(data: data, encoding: .utf8)
+        else { return }
+        let pos = (node["docPos"] as? NSNumber)?.uint32Value ?? 0
+        let updateJSON = editorUpdateNodeAttrs(id: currentEditorId, pos: pos, attrsJson: json)
+        applyUpdateJSON(updateJSON, editorId: currentEditorId)
+        onAppliedUpdate?(updateJSON)
+    }
+
     func blockquoteStripeRectsForTesting() -> [CGRect] {
         layoutIfNeeded()
         return descendants(of: self)
@@ -949,6 +1052,42 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         return leaf
     }
 
+    private func pageView(for node: [String: Any], depth: Int) -> UIView {
+        let row = UIStackView()
+        row.axis = .horizontal
+        row.alignment = .center
+        row.spacing = 8
+        row.layoutMargins = UIEdgeInsets(top: 5, left: CGFloat(depth) * 8 + 6, bottom: 5, right: 6)
+        row.isLayoutMarginsRelativeArrangement = true
+        row.layer.cornerRadius = 8
+
+        let icon = UILabel()
+        icon.text = stringAttr(node, "icon") ?? "📄"
+        icon.font = .systemFont(ofSize: 18)
+        icon.setContentHuggingPriority(.required, for: .horizontal)
+        row.addArrangedSubview(icon)
+
+        let title = textBlockView(for: node, depth: depth)
+        if let leaf = title as? UITextView {
+            leaf.font = .systemFont(ofSize: 16, weight: .semibold)
+            leaf.textColor = baseTextColor
+        }
+        row.addArrangedSubview(title)
+
+        let open = UIButton(type: .system)
+        open.setTitle("→", for: .normal)
+        open.titleLabel?.font = .systemFont(ofSize: 18, weight: .semibold)
+        open.accessibilityLabel = "Open page"
+        open.setContentHuggingPriority(.required, for: .horizontal)
+        open.addAction(UIAction { [weak self, weak title] _ in
+            guard let pageId = self?.stringAttr(node, "pageId"), !pageId.isEmpty else { return }
+            let pageTitle = (title as? UITextView)?.text ?? "Untitled"
+            self?.onPageOpen?(pageId, pageTitle, self?.stringAttr(node, "icon"), self?.stringAttr(node, "href"))
+        }, for: .touchUpInside)
+        row.addArrangedSubview(open)
+        return row
+    }
+
     private func configureTextLeaf(_ leaf: TextLeafView, for node: [String: Any]) {
         let wasFirstResponder = leaf.isFirstResponder
         let previousSelection = leaf.selectedRange
@@ -1549,6 +1688,10 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         return attrs[key] as? Bool
     }
 
+    private func stringAttr(_ node: [String: Any], _ key: String) -> String? {
+        (node["attrs"] as? [String: Any])?[key] as? String
+    }
+
     private func isCodeBlock(_ node: [String: Any]) -> Bool {
         let nodeType = node["nodeType"] as? String
         return nodeType == "codeBlock" || nodeType == "code_block"

package/ios/NativeEditorExpoView.swift

@@ -2101,6 +2101,14 @@ class NativeEditorExpoView: ExpoView, UIGestureRecognizerDelegate {
             if focused { self?.handleTextDidBeginEditing() }
             else { self?.handleTextDidEndEditing() }
         }
+        richTextView.onPageOpen = { [weak self] pageId, title, icon, href in
+            var event: [String: Any] = ["type": "pageOpen", "pageId": pageId, "title": title]
+            if let icon { event["icon"] = icon }
+            if let href { event["href"] = href }
+            guard let data = try? JSONSerialization.data(withJSONObject: event),
+                  let json = String(data: data, encoding: .utf8) else { return }
+            self?.onAddonEvent(["eventJson": json])
+        }
         configureAccessoryToolbar()
 
         addSubview(richTextView)

package/ios/RichTextEditorView.swift

@@ -646,6 +646,7 @@ final class RichTextEditorView: UIView {
     var onSelectionChange: ((UInt32, UInt32) -> Void)?
     var onEditorUpdate: ((String) -> Void)?
     var onFocusChange: ((Bool) -> Void)?
+    var onPageOpen: ((String, String, String?, String?) -> Void)?
     private var lastAutoGrowWidth: CGFloat = 0
     private var cachedAutoGrowMeasuredHeight: CGFloat = 0
     private var remoteSelections: [RemoteSelectionDecoration] = []
@@ -760,6 +761,9 @@ final class RichTextEditorView: UIView {
         blockSurface.onFocusChange = { [weak self] focused in
             self?.onFocusChange?(focused)
         }
+        blockSurface.onPageOpen = { [weak self] pageId, title, icon, href in
+            self?.onPageOpen?(pageId, title, icon, href)
+        }
         blockSurface.onContentHeightMayChange = { [weak self] measuredHeight in
             guard let self, self.heightBehavior == .autoGrow else { return }
             self.cachedAutoGrowMeasuredHeight = measuredHeight

package/ios/editor_coreFFI/editor_coreFFI.h

@@ -617,6 +617,11 @@ RustBuffer uniffi_editor_core_fn_func_editor_unwrap_from_list(uint64_t id, RustC
 RustBuffer uniffi_editor_core_fn_func_editor_unwrap_from_list_at_selection_scalar(uint64_t id, uint32_t scalar_anchor, uint32_t scalar_head, RustCallStatus *_Nonnull out_status
 );
 #endif
+#ifndef UNIFFI_FFIDEF_UNIFFI_EDITOR_CORE_FN_FUNC_EDITOR_UPDATE_NODE_ATTRS
+#define UNIFFI_FFIDEF_UNIFFI_EDITOR_CORE_FN_FUNC_EDITOR_UPDATE_NODE_ATTRS
+RustBuffer uniffi_editor_core_fn_func_editor_update_node_attrs(uint64_t id, uint32_t pos, RustBuffer attrs_json, RustCallStatus *_Nonnull out_status
+);
+#endif
 #ifndef UNIFFI_FFIDEF_UNIFFI_EDITOR_CORE_FN_FUNC_EDITOR_WRAP_IN_LIST
 #define UNIFFI_FFIDEF_UNIFFI_EDITOR_CORE_FN_FUNC_EDITOR_WRAP_IN_LIST
 RustBuffer uniffi_editor_core_fn_func_editor_wrap_in_list(uint64_t id, RustBuffer list_type, RustCallStatus *_Nonnull out_status
@@ -1343,6 +1348,12 @@ uint16_t uniffi_editor_core_checksum_func_editor_unwrap_from_list(void
 #define UNIFFI_FFIDEF_UNIFFI_EDITOR_CORE_CHECKSUM_FUNC_EDITOR_UNWRAP_FROM_LIST_AT_SELECTION_SCALAR
 uint16_t uniffi_editor_core_checksum_func_editor_unwrap_from_list_at_selection_scalar(void
 
+);
+#endif
+#ifndef UNIFFI_FFIDEF_UNIFFI_EDITOR_CORE_CHECKSUM_FUNC_EDITOR_UPDATE_NODE_ATTRS
+#define UNIFFI_FFIDEF_UNIFFI_EDITOR_CORE_CHECKSUM_FUNC_EDITOR_UPDATE_NODE_ATTRS
+uint16_t uniffi_editor_core_checksum_func_editor_update_node_attrs(void
+
 );
 #endif
 #ifndef UNIFFI_FFIDEF_UNIFFI_EDITOR_CORE_CHECKSUM_FUNC_EDITOR_WRAP_IN_LIST

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeditor/react-native-prose-editor",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "OpenEditor-owned native rich text editor engine for React Native",
   "license": "Apache-2.0",
   "homepage": "https://github.com/EasyLink-HQ/openeditor",

package/rust/bindings/kotlin/uniffi/editor_core/editor_core.kt

@@ -911,6 +911,8 @@ internal interface IntegrityCheckingUniffiLib : Library {
 
     fun uniffi_editor_core_checksum_func_editor_unwrap_from_list_at_selection_scalar(): Short
 
+    fun uniffi_editor_core_checksum_func_editor_update_node_attrs(): Short
+
     fun uniffi_editor_core_checksum_func_editor_wrap_in_list(): Short
 
     fun uniffi_editor_core_checksum_func_editor_wrap_in_list_at_selection_scalar(): Short
@@ -1398,6 +1400,13 @@ internal interface UniffiLib : Library {
         uniffi_out_err: UniffiRustCallStatus,
     ): RustBuffer.ByValue
 
+    fun uniffi_editor_core_fn_func_editor_update_node_attrs(
+        `id`: Long,
+        `pos`: Int,
+        `attrsJson`: RustBuffer.ByValue,
+        uniffi_out_err: UniffiRustCallStatus,
+    ): RustBuffer.ByValue
+
     fun uniffi_editor_core_fn_func_editor_wrap_in_list(
         `id`: Long,
         `listType`: RustBuffer.ByValue,
@@ -1860,6 +1869,9 @@ private fun uniffiCheckApiChecksums(lib: IntegrityCheckingUniffiLib) {
     if (lib.uniffi_editor_core_checksum_func_editor_unwrap_from_list_at_selection_scalar() != 57899.toShort()) {
         throw RuntimeException("UniFFI API checksum mismatch: try cleaning and rebuilding your project")
     }
+    if (lib.uniffi_editor_core_checksum_func_editor_update_node_attrs() != 14684.toShort()) {
+        throw RuntimeException("UniFFI API checksum mismatch: try cleaning and rebuilding your project")
+    }
     if (lib.uniffi_editor_core_checksum_func_editor_wrap_in_list() != 32846.toShort()) {
         throw RuntimeException("UniFFI API checksum mismatch: try cleaning and rebuilding your project")
     }
@@ -3212,6 +3224,25 @@ fun `editorUnwrapFromListAtSelectionScalar`(
         },
     )
 
+/**
+ * Replace a node's attributes at its document position.
+ */
+fun `editorUpdateNodeAttrs`(
+    `id`: kotlin.ULong,
+    `pos`: kotlin.UInt,
+    `attrsJson`: kotlin.String,
+): kotlin.String =
+    FfiConverterString.lift(
+        uniffiRustCall { _status ->
+            UniffiLib.INSTANCE.uniffi_editor_core_fn_func_editor_update_node_attrs(
+                FfiConverterULong.lower(`id`),
+                FfiConverterUInt.lower(`pos`),
+                FfiConverterString.lower(`attrsJson`),
+                _status,
+            )
+        },
+    )
+
 /**
  * Wrap the current selection in a list. Returns an update JSON string.
  */