@openeditor/react-native-prose-editor 0.0.24 → 0.0.25

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

@@ -352,6 +352,10 @@ data class EditorTheme(
     val toolbar: EditorToolbarTheme? = null,
     val placeholderColor: Int? = null,
     val backgroundColor: Int? = null,
+    val blockSurfaceColor: Int? = null,
+    val structuralLineColor: Int? = null,
+    val accentStrongColor: Int? = null,
+    val accentStrongTextColor: Int? = null,
     val borderRadius: Float? = null,
     val contentInsets: EditorContentInsets? = null
 ) {
@@ -386,6 +390,10 @@ data class EditorTheme(
                 toolbar = EditorToolbarTheme.fromJson(root.optJSONObject("toolbar")),
                 placeholderColor = parseColor(root.optNullableString("placeholderColor")),
                 backgroundColor = parseColor(root.optNullableString("backgroundColor")),
+                blockSurfaceColor = parseColor(root.optNullableString("blockSurfaceColor")),
+                structuralLineColor = parseColor(root.optNullableString("structuralLineColor")),
+                accentStrongColor = parseColor(root.optNullableString("accentStrongColor")),
+                accentStrongTextColor = parseColor(root.optNullableString("accentStrongTextColor")),
                 borderRadius = root.optNullableFloat("borderRadius"),
                 contentInsets = EditorContentInsets.fromJson(root.optJSONObject("contentInsets"))
             )

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

@@ -2,6 +2,9 @@ package com.openeditor.editor
 
 import android.content.Context
 import android.graphics.Color
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Path
 import android.graphics.Rect
 import android.graphics.RectF
 import android.graphics.Typeface
@@ -49,6 +52,7 @@ 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 onAttachmentOpen: ((String?, String, String?, Long?, String?) -> Unit)? = null
+    var onEmojiEditRequest: ((String, Int, String, JSONObject) -> Unit)? = null
     var isScrollingEnabled: Boolean = true
 
     internal var geometryRevision: Long = 0
@@ -63,6 +67,33 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         val isAtom: Boolean
     )
 
+    private class ToggleCaretView(context: Context) : View(context) {
+        var open: Boolean = true
+            set(value) {
+                field = value
+                invalidate()
+            }
+        var caretColor: Int = Color.GRAY
+
+        private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.FILL }
+        private val path = Path()
+
+        override fun onDraw(canvas: Canvas) {
+            super.onDraw(canvas)
+            val density = resources.displayMetrics.density
+            val centerX = width / 2f
+            val centerY = height / 2f
+            path.reset()
+            path.moveTo(centerX - 3f * density, centerY - 4f * density)
+            path.lineTo(centerX + 3f * density, centerY)
+            path.lineTo(centerX - 3f * density, centerY + 4f * density)
+            path.close()
+            paint.color = caretColor
+            if (open) canvas.rotate(90f, centerX, centerY)
+            canvas.drawPath(path, paint)
+        }
+    }
+
     private class TextLeaf(context: Context) : AppCompatEditText(context) {
         var positionSegments: List<PositionSegment> = emptyList()
         var editorSurface: NativeBlockEditorSurface? = null
@@ -204,11 +235,11 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
             val available = MeasureSpec.getSize(widthMeasureSpec).coerceAtLeast(1)
             val intrinsicWidth = drawable?.intrinsicWidth?.takeIf { it > 0 } ?: available
             val intrinsicHeight = drawable?.intrinsicHeight?.takeIf { it > 0 } ?: (intrinsicWidth * 0.56f).toInt()
-            val requestedWidth = preferredWidthPx ?: intrinsicWidth
-            val width = minOf(requestedWidth.coerceAtLeast(1), available)
-            val requestedHeight = preferredHeightPx
-                ?: ((width.toFloat() / intrinsicWidth.coerceAtLeast(1)) * intrinsicHeight).toInt()
-            setMeasuredDimension(width, requestedHeight.coerceAtLeast(1))
+            val sourceWidth = (preferredWidthPx ?: intrinsicWidth).coerceAtLeast(1)
+            val sourceHeight = (preferredHeightPx ?: intrinsicHeight).coerceAtLeast(1)
+            val width = minOf(sourceWidth, available)
+            val height = (width.toFloat() / sourceWidth * sourceHeight).toInt().coerceAtLeast(1)
+            setMeasuredDimension(width, height)
         }
     }
 
@@ -221,6 +252,10 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
     private var baseTextColor: Int = Color.BLACK
     private var isApplyingRemoteUpdate = false
     private var currentTheme: EditorTheme? = null
+    private val resolvedBlockSurfaceColor: Int
+        get() = currentTheme?.blockSurfaceColor ?: 0xFFEEEEEE.toInt()
+    private val resolvedStructuralLineColor: Int
+        get() = currentTheme?.structuralLineColor ?: 0xFFD4D4D4.toInt()
     private var nextTableId = 1
     private val tableCells = mutableListOf<CellView>()
     private var selectionAnchorCell: CellView? = null
@@ -742,7 +777,7 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
                 setPadding((depth * 8 * density).toInt(), (6 * density).toInt(), 0, (6 * density).toInt())
             }
             row.addView(
-                View(context).apply { setBackgroundColor(currentTheme?.blockquote?.borderColor ?: Color.LTGRAY) },
+                View(context).apply { setBackgroundColor(currentTheme?.blockquote?.borderColor ?: resolvedStructuralLineColor) },
                 LinearLayout.LayoutParams(
                     (((currentTheme?.blockquote?.borderWidth ?: 3f) * density).toInt()).coerceAtLeast(1),
                     ViewGroup.LayoutParams.MATCH_PARENT
@@ -779,18 +814,24 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         val container = LinearLayout(context).apply {
             orientation = LinearLayout.HORIZONTAL
             gravity = android.view.Gravity.TOP
-            val padding = (12 * density).toInt()
-            setPadding(padding, padding, padding, padding)
+            val horizontalPadding = ((currentTheme?.codeBlock?.paddingHorizontal ?: 14f) * density).toInt()
+            val verticalPadding = ((currentTheme?.codeBlock?.paddingVertical ?: 12f) * density).toInt()
+            setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
             background = roundedDrawable(
-                currentTheme?.codeBlock?.backgroundColor ?: 0xFFF5F5F5.toInt(),
+                resolvedBlockSurfaceColor,
                 Color.TRANSPARENT,
                 0f,
-                10f
+                12f
             )
         }
         container.addView(TextView(context).apply {
-            text = node.optJSONObject("attrs")?.optString("emoji", "💡") ?: "💡"
+            val emoji = node.optJSONObject("attrs")?.optString("emoji", "💡") ?: "💡"
+            text = emoji
             setTextSize(TypedValue.COMPLEX_UNIT_SP, 20f)
+            contentDescription = "Change callout emoji"
+            isClickable = isEditable
+            isFocusable = isEditable
+            if (isEditable) setOnClickListener { requestEmojiEdit(node, "callout", emoji) }
         })
         val content = LinearLayout(context).apply {
             orientation = LinearLayout.VERTICAL
@@ -805,17 +846,14 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
     }
 
     private fun toggleMarkerView(node: JSONObject, content: LinearLayout, initiallyOpen: Boolean): View =
-        TextView(context).apply {
-            var open = initiallyOpen
-            text = if (open) "⌄" else "›"
+        ToggleCaretView(context).apply {
+            open = initiallyOpen
+            caretColor = currentTheme?.list?.markerColor ?: baseTextColor
             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)
+            isClickable = true
+            isFocusable = true
             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))
@@ -841,13 +879,23 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         onAppliedUpdate?.invoke(updateJSON)
     }
 
+    private fun requestEmojiEdit(node: JSONObject, nodeType: String, emoji: String) {
+        if (!isEditable) return
+        onEmojiEditRequest?.invoke(
+            nodeType,
+            node.optInt("docPos", 0),
+            emoji,
+            JSONObject(node.optJSONObject("attrs")?.toString() ?: "{}"),
+        )
+    }
+
     private fun tableView(node: JSONObject, path: List<Int>): View {
         val tableId = nextTableId++
         val table = LinearLayout(context).apply {
             orientation = LinearLayout.VERTICAL
             background = borderDrawable(
                 Color.TRANSPARENT,
-                currentTheme?.table?.borderColor ?: baseTextColor,
+                currentTheme?.table?.borderColor ?: resolvedStructuralLineColor,
                 1f
             )
         }
@@ -877,12 +925,10 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         val density = resources.displayMetrics.density
         val fillColor = if (node.optString("nodeType") == "tableHeader") {
             currentTheme?.table?.headerBackgroundColor
-                ?: currentTheme?.codeBlock?.backgroundColor
-                ?: Color.TRANSPARENT
+                ?: resolvedBlockSurfaceColor
         } else {
             currentTheme?.table?.cellBackgroundColor
-                ?: currentTheme?.backgroundColor
-                ?: Color.TRANSPARENT
+                ?: resolvedBlockSurfaceColor
         }
         val cell = CellView(context).apply {
             docPos = node.optInt("docPos", 0)
@@ -894,7 +940,7 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
             setPadding((8 * density).toInt(), (8 * density).toInt(), (8 * density).toInt(), (8 * density).toInt())
             background = borderDrawable(
                 fillColor,
-                currentTheme?.table?.borderColor ?: baseTextColor,
+                currentTheme?.table?.borderColor ?: resolvedStructuralLineColor,
                 0.5f
             )
             isClickable = true
@@ -926,28 +972,42 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
             setPadding(horizontal + (depth * 8 * density).toInt(), vertical, horizontal, vertical)
         }
         row.addView(TextView(context).apply {
-            text = attrs?.optString("icon", "📄") ?: "📄"
+            val icon = attrs?.optString("icon", "📄") ?: "📄"
+            text = icon
+            gravity = android.view.Gravity.CENTER
+            includeFontPadding = false
             setTextSize(TypedValue.COMPLEX_UNIT_SP, 18f)
-        }, LinearLayout.LayoutParams((28 * density).toInt(), ViewGroup.LayoutParams.WRAP_CONTENT))
+            contentDescription = "Change page emoji"
+            isClickable = isEditable
+            isFocusable = isEditable
+            if (isEditable) setOnClickListener { requestEmojiEdit(node, "page", icon) }
+        }, LinearLayout.LayoutParams((24 * density).toInt(), (36 * density).toInt()))
         val title = textBlockView(node, depth) as TextLeaf
-        title.setTypeface(title.typeface, Typeface.BOLD)
+        title.typeface = Typeface.create("sans-serif-medium", Typeface.NORMAL)
+        title.paintFlags = title.paintFlags or Paint.UNDERLINE_TEXT_FLAG
+        title.gravity = android.view.Gravity.CENTER_VERTICAL
+        title.includeFontPadding = false
+        title.keyListener = null
+        title.isCursorVisible = false
+        title.isFocusable = false
+        title.isFocusableInTouchMode = false
+        title.isClickable = false
+        title.setTextIsSelectable(false)
         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(
+        val pageId = attrs?.optString("pageId").orEmpty()
+        if (pageId.isNotEmpty()) {
+            row.isClickable = true
+            row.isFocusable = true
+            row.contentDescription = "Open page"
+            row.setOnClickListener {
+                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
     }
 
@@ -959,12 +1019,22 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
             gravity = android.view.Gravity.CENTER_VERTICAL
             val padding = (10 * density).toInt()
             setPadding(padding + (depth * 8 * density).toInt(), padding, padding, padding)
-            background = borderDrawable(Color.TRANSPARENT, currentTheme?.table?.borderColor ?: baseTextColor, 1f)
-            addView(TextView(context).apply { text = "📎"; setTextSize(TypedValue.COMPLEX_UNIT_SP, 22f) }, LinearLayout.LayoutParams((38 * density).toInt(), ViewGroup.LayoutParams.WRAP_CONTENT))
+            background = roundedDrawable(Color.TRANSPARENT, currentTheme?.table?.borderColor ?: baseTextColor, 1f, 12f)
+            val name = attrs?.optString("name").orEmpty().ifEmpty { "Attachment" }
+            val type = attachmentTypeLabel(attrs?.optString("mimeType")?.takeIf(String::isNotEmpty), name)
+            addView(TextView(context).apply {
+                text = type
+                gravity = android.view.Gravity.CENTER
+                setTextColor(currentTheme?.placeholderColor ?: baseTextColor)
+                setTextSize(TypedValue.COMPLEX_UNIT_SP, 9f)
+                setTypeface(typeface, Typeface.BOLD)
+                background = roundedDrawable(resolvedBlockSurfaceColor, Color.TRANSPARENT, 0f, 9f)
+            }, LinearLayout.LayoutParams((42 * density).toInt(), (48 * density).toInt()).apply { marginEnd = (12 * density).toInt() })
             addView(LinearLayout(context).apply {
                 orientation = LinearLayout.VERTICAL
-                addView(TextView(context).apply { text = attrs?.optString("name").orEmpty().ifEmpty { "Attachment" }; setTextColor(baseTextColor); setTextSize(TypedValue.COMPLEX_UNIT_SP, 15f); setTypeface(typeface, Typeface.BOLD) })
-                addView(TextView(context).apply { text = attrs?.optString("mimeType").orEmpty().ifEmpty { "File" }; setTextColor(currentTheme?.placeholderColor ?: baseTextColor); setTextSize(TypedValue.COMPLEX_UNIT_SP, 12f) })
+                addView(TextView(context).apply { text = name; setTextColor(baseTextColor); setTextSize(TypedValue.COMPLEX_UNIT_SP, 15f); setTypeface(typeface, Typeface.BOLD) })
+                val size = attrs?.optLong("size")?.takeIf { attrs.has("size") && !attrs.isNull("size") }?.let(::formatAttachmentSize)
+                addView(TextView(context).apply { text = listOfNotNull(size, type).joinToString(" · "); setTextColor(currentTheme?.placeholderColor ?: baseTextColor); setTextSize(TypedValue.COMPLEX_UNIT_SP, 12f) })
             }, LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f))
             isClickable = true
             isFocusable = true
@@ -981,6 +1051,18 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         }
     }
 
+    private fun attachmentTypeLabel(mimeType: String?, name: String): String {
+        val subtype = mimeType?.substringAfterLast('/')?.substringBefore('+')?.takeIf(String::isNotBlank)
+        val extension = name.substringAfterLast('.', "").takeIf(String::isNotBlank)
+        return (subtype ?: extension ?: "FILE").take(4).uppercase()
+    }
+
+    private fun formatAttachmentSize(bytes: Long): String = when {
+        bytes < 1_024 -> "$bytes B"
+        bytes < 1_048_576 -> if (bytes < 10_240) "%.1f KB".format(bytes / 1_024.0) else "%.0f KB".format(bytes / 1_024.0)
+        else -> if (bytes < 10_485_760) "%.1f MB".format(bytes / 1_048_576.0) else "%.0f MB".format(bytes / 1_048_576.0)
+    }
+
     private fun configureTextLeaf(leaf: TextLeaf, node: JSONObject) {
         val rendered = attributedInlineContent(node)
         val hadFocus = leaf.hasFocus()
@@ -1004,7 +1086,7 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
             minLines = 1
             background = if (node.optString("nodeType") == "codeBlock" || node.optString("nodeType") == "code_block") {
                 roundedDrawable(
-                    currentTheme?.codeBlock?.backgroundColor ?: 0xFFF4F5F7.toInt(),
+                    currentTheme?.codeBlock?.backgroundColor ?: resolvedBlockSurfaceColor,
                     Color.TRANSPARENT,
                     0f,
                     currentTheme?.codeBlock?.borderRadius ?: 8f
@@ -1163,7 +1245,7 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
                 setPadding(0, margin, 0, margin)
                 addView(
                     View(context).apply {
-                        setBackgroundColor(currentTheme?.horizontalRule?.color ?: Color.LTGRAY)
+                        setBackgroundColor(currentTheme?.horizontalRule?.color ?: resolvedStructuralLineColor)
                     },
                     LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, thickness)
                 )
@@ -1174,11 +1256,11 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         }
         return TextView(context).apply {
             text = node.optString("label", node.optString("nodeType", "Block"))
-            setTextColor(currentTheme?.text?.color ?: baseTextColor)
+            setTextColor(currentTheme?.placeholderColor ?: baseTextColor)
             textSize = 14f
             setPadding(12, 8, 12, 8)
             background = borderDrawable(
-                currentTheme?.codeBlock?.backgroundColor ?: Color.TRANSPARENT,
+                resolvedBlockSurfaceColor,
                 Color.TRANSPARENT,
                 0f
             )
@@ -1200,7 +1282,7 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
             scaleType = ImageView.ScaleType.FIT_CENTER
             adjustViewBounds = true
             background = roundedDrawable(
-                currentTheme?.codeBlock?.backgroundColor ?: Color.TRANSPARENT,
+                resolvedBlockSurfaceColor,
                 Color.TRANSPARENT,
                 0f,
                 8f
@@ -1230,7 +1312,7 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         for (imageView in imageViews) {
             val selected = isEditable && imageView.docPos == selectedNodePos
             imageView.background = roundedDrawable(
-                if (imageView.drawable == null) 0xFFF2F3F5.toInt() else Color.TRANSPARENT,
+                if (imageView.drawable == null) resolvedBlockSurfaceColor else Color.TRANSPARENT,
                 if (selected) 0xFF2F80ED.toInt() else Color.TRANSPARENT,
                 if (selected) 2f else 0f,
                 8f
@@ -1525,14 +1607,14 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         val checked = node.optJSONObject("attrs")?.optBoolean("checked", false) ?: false
         return TextView(context).apply {
             text = if (checked) "✓" else ""
-            setTextColor(Color.WHITE)
+            setTextColor(currentTheme?.accentStrongTextColor ?: Color.WHITE)
             textSize = 12f
             gravity = android.view.Gravity.CENTER
             includeFontPadding = false
             background = roundedDrawable(
-                if (checked) (currentTheme?.list?.markerColor ?: baseTextColor) else Color.TRANSPARENT,
-                currentTheme?.list?.markerColor ?: Color.GRAY,
-                1.5f,
+                if (checked) (currentTheme?.accentStrongColor ?: baseTextColor) else resolvedBlockSurfaceColor,
+                Color.TRANSPARENT,
+                0f,
                 4f
             )
             setOnClickListener { toggleTaskItem(node) }

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

@@ -741,6 +741,21 @@ class NativeEditorExpoView(
             url?.let { event["url"] = it }
             emitAddonEvent(mapOf("eventJson" to JSONObject(event).toString()))
         }
+        richTextView.onEmojiEditRequest = { nodeType, docPos, emoji, attrs ->
+            emitAddonEvent(
+                mapOf(
+                    "eventJson" to JSONObject(
+                        mapOf(
+                            "type" to "emojiEditRequest",
+                            "nodeType" to nodeType,
+                            "docPos" to docPos,
+                            "emoji" to emoji,
+                            "attrs" to attrs,
+                        )
+                    ).toString()
+                )
+            )
+        }
         richTextView.onBeforeDetachedFromWindow = {
             prepareForDetachFromWindow()
         }

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

@@ -357,6 +357,11 @@ class NativeEditorModule : Module() {
             val editorId = nativeULong(id) ?: return@Function nativeArgumentError("editor id")
             editorSetMark(editorId, markName, attrsJson)
         }
+        Function("editorUpdateNodeAttrs") { id: Int, pos: Int, attrsJson: String ->
+            val editorId = nativeULong(id) ?: return@Function nativeArgumentError("editor id")
+            val position = nativeUInt(pos) ?: return@Function nativeArgumentError("position")
+            editorUpdateNodeAttrs(editorId, position, attrsJson)
+        }
         Function("editorUnsetMark") { id: Int, markName: String ->
             val editorId = nativeULong(id) ?: return@Function nativeArgumentError("editor id")
             editorUnsetMark(editorId, markName)

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

@@ -8,6 +8,7 @@ import android.util.AttributeSet
 import android.view.ViewGroup
 import android.widget.FrameLayout
 import android.widget.LinearLayout
+import org.json.JSONObject
 import uniffi.editor_core.*
 
 /**
@@ -40,6 +41,7 @@ class RichTextEditorView @JvmOverloads constructor(
     var onFocusChange: ((Boolean) -> Unit)? = null
     var onPageOpen: ((String, String, String?, String?) -> Unit)? = null
     var onAttachmentOpen: ((String?, String, String?, Long?, String?) -> Unit)? = null
+    var onEmojiEditRequest: ((String, Int, String, JSONObject) -> Unit)? = null
 
     var editorId: Long
         get() = currentEditorId
@@ -64,6 +66,7 @@ class RichTextEditorView @JvmOverloads constructor(
         blockSurface.onFocusChange = { focused -> onFocusChange?.invoke(focused) }
         blockSurface.onPageOpen = { pageId, title, icon, href -> onPageOpen?.invoke(pageId, title, icon, href) }
         blockSurface.onAttachmentOpen = { attachmentId, name, mimeType, size, url -> onAttachmentOpen?.invoke(attachmentId, name, mimeType, size, url) }
+        blockSurface.onEmojiEditRequest = { nodeType, docPos, emoji, attrs -> onEmojiEditRequest?.invoke(nodeType, docPos, emoji, attrs) }
         updateAppearance()
     }
 

package/dist/EditorTheme.d.ts

@@ -115,6 +115,10 @@ export interface EditorTheme {
     toolbar?: EditorToolbarTheme;
     placeholderColor?: string;
     backgroundColor?: string;
+    blockSurfaceColor?: string;
+    structuralLineColor?: string;
+    accentStrongColor?: string;
+    accentStrongTextColor?: string;
     borderRadius?: number;
     contentInsets?: EditorContentInsets;
 }

package/dist/NativeEditorBridge.d.ts

@@ -32,6 +32,7 @@ export interface NativeEditorModule {
     editorInsertContentJsonAtSelectionScalar(editorId: number, scalarAnchor: number, scalarHead: number, json: string): string;
     editorToggleMark(editorId: number, markName: string): string;
     editorSetMark(editorId: number, markName: string, attrsJson: string): string;
+    editorUpdateNodeAttrs(editorId: number, pos: number, attrsJson: string): string;
     editorUnsetMark(editorId: number, markName: string): string;
     editorToggleBlockquote(editorId: number): string;
     editorToggleHeading(editorId: number, level: number): string;
@@ -241,6 +242,8 @@ export declare class NativeEditorBridge {
     deleteRange(from: number, to: number): EditorUpdate | null;
     /** Replace the current selection with text atomically. */
     replaceSelectionText(text: string): EditorUpdate | null;
+    /** Replace a node's attributes at its document position. */
+    updateNodeAttrs(pos: number, attrs: Record<string, unknown>): EditorUpdate | null;
     /** Toggle a mark (bold, italic, etc.) on the current selection. */
     toggleMark(markType: string): EditorUpdate | null;
     /** Set a mark with attrs on the current selection. */

package/dist/NativeEditorBridge.js

@@ -519,6 +519,11 @@ class NativeEditorBridge {
         this.assertNotDestroyed();
         return this.runPreparedCommand(() => getNativeModule().editorReplaceSelectionText(this._editorId, text));
     }
+    /** Replace a node's attributes at its document position. */
+    updateNodeAttrs(pos, attrs) {
+        this.assertNotDestroyed();
+        return this.runPreparedCommand(() => getNativeModule().editorUpdateNodeAttrs(this._editorId, pos, JSON.stringify(attrs)));
+    }
     /** Toggle a mark (bold, italic, etc.) on the current selection. */
     toggleMark(markType) {
         this.assertNotDestroyed();

package/dist/NativeRichTextEditor.d.ts

@@ -96,6 +96,13 @@ export interface NativeRichTextEditorProps {
         size: number | null;
         url: string | null;
     }) => void;
+    /** Called when an editable callout or page emoji is pressed. */
+    onRequestEmoji?: (request: {
+        nodeType: 'callout' | 'page';
+        docPos: number;
+        emoji: string;
+        attrs: Record<string, unknown>;
+    }) => 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. */
@@ -163,6 +170,8 @@ export interface NativeRichTextEditorRef {
     moveTableCell(forward?: boolean): void;
     /** Insert text at the current cursor position. */
     insertText(text: string): void;
+    /** Replace a node's attributes at its document position. */
+    updateNodeAttrs(pos: number, attrs: Record<string, unknown>): void;
     /** Insert HTML content at the current selection. */
     insertContentHtml(html: string): void;
     /** Insert JSON content at the current selection. */

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, onOpenPage, onOpenAttachment, 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, onOpenAttachment, onRequestEmoji, 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 === 'emojiEditRequest') {
+            onRequestEmoji?.({
+                nodeType: parsed.nodeType,
+                docPos: parsed.docPos,
+                emoji: parsed.emoji,
+                attrs: parsed.attrs,
+            });
+            return;
+        }
         if (parsed.type === 'attachmentOpen') {
             onOpenAttachment?.({
                 attachmentId: parsed.attachmentId ?? null,
@@ -2188,7 +2197,9 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         resolveMentionInsertionAttrs,
         runAndApplyWithCommandRetry,
         setMentionQueryEventState,
+        onOpenAttachment,
         onOpenPage,
+        onRequestEmoji,
         syncPreflightUpdateFromNativeEvent,
     ]);
     (0, react_1.useImperativeHandle)(ref, () => ({
@@ -2259,6 +2270,9 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         insertText(text) {
             runAndApply(() => bridgeRef.current?.replaceSelectionText(text) ?? null);
         },
+        updateNodeAttrs(pos, attrs) {
+            runAndApply(() => bridgeRef.current?.updateNodeAttrs(pos, attrs) ?? null);
+        },
         insertContentHtml(html) {
             runAndApply(() => bridgeRef.current?.insertContentHtml(html) ?? null);
         },

package/dist/addons.d.ts

@@ -65,6 +65,12 @@ export interface SerializedEditorAddons {
     mentions?: SerializedMentionsAddonConfig;
 }
 export type EditorAddonEvent = {
+    type: 'emojiEditRequest';
+    nodeType: 'callout' | 'page';
+    docPos: number;
+    emoji: string;
+    attrs: Record<string, unknown>;
+} | {
     type: 'attachmentOpen';
     attachmentId?: string | null;
     name: string;

package/ios/EditorTheme.swift

@@ -106,6 +106,22 @@ struct EditorHorizontalRuleTheme {
     }
 }
 
+struct EditorTableTheme {
+    var cellBackgroundColor: UIColor?
+    var headerBackgroundColor: UIColor?
+    var borderColor: UIColor?
+    var selectionBackgroundColor: UIColor?
+    var selectionBorderColor: UIColor?
+
+    init(dictionary: [String: Any]) {
+        cellBackgroundColor = EditorTheme.color(from: dictionary["cellBackgroundColor"])
+        headerBackgroundColor = EditorTheme.color(from: dictionary["headerBackgroundColor"])
+        borderColor = EditorTheme.color(from: dictionary["borderColor"])
+        selectionBackgroundColor = EditorTheme.color(from: dictionary["selectionBackgroundColor"])
+        selectionBorderColor = EditorTheme.color(from: dictionary["selectionBorderColor"])
+    }
+}
+
 struct EditorBlockquoteTheme {
     var text: EditorTextStyle?
     var indent: CGFloat?
@@ -316,12 +332,17 @@ struct EditorTheme {
     var codeBlock: EditorCodeBlockTheme?
     var headings: [String: EditorTextStyle] = [:]
     var list: EditorListTheme?
+    var table: EditorTableTheme?
     var horizontalRule: EditorHorizontalRuleTheme?
     var mentions: EditorMentionTheme?
     var links: EditorLinkTheme?
     var toolbar: EditorToolbarTheme?
     var placeholderColor: UIColor?
     var backgroundColor: UIColor?
+    var blockSurfaceColor: UIColor?
+    var structuralLineColor: UIColor?
+    var accentStrongColor: UIColor?
+    var accentStrongTextColor: UIColor?
     var borderRadius: CGFloat?
     var contentInsets: EditorContentInsets?
 
@@ -358,6 +379,9 @@ struct EditorTheme {
         if let list = dictionary["list"] as? [String: Any] {
             self.list = EditorListTheme(dictionary: list)
         }
+        if let table = dictionary["table"] as? [String: Any] {
+            self.table = EditorTableTheme(dictionary: table)
+        }
         if let horizontalRule = dictionary["horizontalRule"] as? [String: Any] {
             self.horizontalRule = EditorHorizontalRuleTheme(dictionary: horizontalRule)
         }
@@ -372,6 +396,10 @@ struct EditorTheme {
         }
         placeholderColor = EditorTheme.color(from: dictionary["placeholderColor"])
         backgroundColor = EditorTheme.color(from: dictionary["backgroundColor"])
+        blockSurfaceColor = EditorTheme.color(from: dictionary["blockSurfaceColor"])
+        structuralLineColor = EditorTheme.color(from: dictionary["structuralLineColor"])
+        accentStrongColor = EditorTheme.color(from: dictionary["accentStrongColor"])
+        accentStrongTextColor = EditorTheme.color(from: dictionary["accentStrongTextColor"])
         borderRadius = EditorTheme.cgFloat(dictionary["borderRadius"])
         if let contentInsets = dictionary["contentInsets"] as? [String: Any] {
             self.contentInsets = EditorContentInsets(dictionary: contentInsets)

package/ios/NativeBlockEditorSurface.swift

@@ -3,6 +3,7 @@ import UIKit
 final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestureRecognizerDelegate {
     var onPageOpen: ((String, String, String?, String?) -> Void)?
     var onAttachmentOpen: ((String?, String, String?, NSNumber?, String?) -> Void)?
+    var onEmojiEditRequest: ((String, UInt32, String, [String: Any]) -> Void)?
     private final class AttachmentRow: UIStackView {
         var open: (() -> Void)?
         override init(frame: CGRect) {
@@ -12,6 +13,29 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         }
         required init(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
         @objc private func handleOpen() { open?() }
+        override func accessibilityActivate() -> Bool {
+            open?()
+            return true
+        }
+    }
+    private final class PageRow: UIStackView, UIGestureRecognizerDelegate {
+        var open: (() -> Void)?
+        override init(frame: CGRect) {
+            super.init(frame: frame)
+            isUserInteractionEnabled = true
+            let tap = UITapGestureRecognizer(target: self, action: #selector(handleOpen))
+            tap.delegate = self
+            addGestureRecognizer(tap)
+        }
+        required init(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+        @objc private func handleOpen() { open?() }
+        func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool {
+            !(touch.view is UIControl)
+        }
+        override func accessibilityActivate() -> Bool {
+            open?()
+            return true
+        }
     }
     private final class TextLeafView: UITextView {
         struct PositionSegment {
@@ -192,7 +216,7 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         var preferredWidth: CGFloat?
         var preferredHeight: CGFloat?
         weak var preferredWidthConstraint: NSLayoutConstraint?
-        weak var preferredHeightConstraint: NSLayoutConstraint?
+        private var aspectRatioConstraint: NSLayoutConstraint?
 
         override var intrinsicContentSize: CGSize {
             let ratio = image.flatMap { image -> CGFloat? in
@@ -206,7 +230,12 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         func refreshPreferredSizeConstraints() {
             let size = intrinsicContentSize
             preferredWidthConstraint?.constant = size.width
-            preferredHeightConstraint?.constant = size.height
+            let ratio = size.height / max(1, size.width)
+            aspectRatioConstraint?.isActive = false
+            let constraint = heightAnchor.constraint(equalTo: widthAnchor, multiplier: ratio)
+            constraint.priority = .required
+            constraint.isActive = true
+            aspectRatioConstraint = constraint
         }
     }
 
@@ -215,6 +244,12 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
     private var currentEditorId: UInt64 = 0
     private var isApplyingRemoteUpdate = false
     private var currentTheme: EditorTheme?
+    private var resolvedBlockSurfaceColor: UIColor {
+        currentTheme?.blockSurfaceColor ?? UIColor(white: 238 / 255, alpha: 1)
+    }
+    private var resolvedStructuralLineColor: UIColor {
+        currentTheme?.structuralLineColor ?? UIColor(white: 212 / 255, alpha: 1)
+    }
     private var nextTableId = 1
     private var tableCells: [CellView] = []
     private weak var selectionAnchorCell: CellView?
@@ -836,10 +871,10 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         container.layoutMargins = UIEdgeInsets(top: 6, left: 12 + CGFloat(depth) * 8, bottom: 6, right: 0)
         container.isLayoutMarginsRelativeArrangement = true
         if (node["nodeType"] as? String) == "blockquote" {
-            container.layer.borderColor = UIColor.separator.cgColor
+            container.layer.borderColor = resolvedStructuralLineColor.cgColor
             container.layer.borderWidth = 0
             let border = BlockquoteStripeView()
-            border.backgroundColor = currentTheme?.blockquote?.borderColor ?? UIColor.separator
+            border.backgroundColor = currentTheme?.blockquote?.borderColor ?? resolvedStructuralLineColor
             let row = UIStackView()
             row.axis = .horizontal
             row.spacing = currentTheme?.blockquote?.markerGap ?? 8
@@ -868,14 +903,22 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         container.axis = .horizontal
         container.alignment = .top
         container.spacing = 10
-        container.layoutMargins = UIEdgeInsets(top: 12, left: 12, bottom: 12, right: 12)
+        let horizontalPadding = currentTheme?.codeBlock?.paddingHorizontal ?? 14
+        let verticalPadding = currentTheme?.codeBlock?.paddingVertical ?? 12
+        container.layoutMargins = UIEdgeInsets(top: verticalPadding, left: horizontalPadding, bottom: verticalPadding, right: horizontalPadding)
         container.isLayoutMarginsRelativeArrangement = true
-        container.backgroundColor = UIColor.secondarySystemBackground
-        container.layer.cornerRadius = 10
-
-        let emoji = UILabel()
-        emoji.text = stringAttr(node, "emoji") ?? "💡"
-        emoji.font = .systemFont(ofSize: 20)
+        container.backgroundColor = resolvedBlockSurfaceColor
+        container.layer.cornerRadius = 12
+
+        let emoji = UIButton(type: .system)
+        let emojiValue = stringAttr(node, "emoji") ?? "💡"
+        emoji.setTitle(emojiValue, for: .normal)
+        emoji.titleLabel?.font = .systemFont(ofSize: 20)
+        emoji.accessibilityLabel = "Change callout emoji"
+        emoji.isEnabled = isEditable
+        emoji.addAction(UIAction { [weak self] _ in
+            self?.requestEmojiEdit(for: node, nodeType: "callout", emoji: emojiValue)
+        }, for: .touchUpInside)
         container.addArrangedSubview(emoji)
 
         let content = UIStackView()
@@ -891,13 +934,14 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
     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.setImage(toggleCaretImage(), for: .normal)
+        button.tintColor = currentTheme?.list?.markerColor ?? .secondaryLabel
+        button.imageView?.transform = open ? CGAffineTransform(rotationAngle: .pi / 2) : .identity
         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)
+            let nextOpen = button.accessibilityLabel == "Expand toggle item"
+            button.imageView?.transform = nextOpen ? CGAffineTransform(rotationAngle: .pi / 2) : .identity
             button.accessibilityLabel = nextOpen ? "Collapse toggle item" : "Expand toggle item"
             self.setToggleContent(content, open: nextOpen)
             if self.isEditable {
@@ -916,6 +960,19 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         return wrapper
     }
 
+    private func toggleCaretImage() -> UIImage? {
+        let renderer = UIGraphicsImageRenderer(size: CGSize(width: 8, height: 10))
+        return renderer.image { _ in
+            let path = UIBezierPath()
+            path.move(to: CGPoint(x: 1, y: 1))
+            path.addLine(to: CGPoint(x: 7, y: 5))
+            path.addLine(to: CGPoint(x: 1, y: 9))
+            path.close()
+            UIColor.white.setFill()
+            path.fill()
+        }.withRenderingMode(.alwaysTemplate)
+    }
+
     private func setToggleContent(_ content: UIStackView, open: Bool) {
         for (index, child) in content.arrangedSubviews.enumerated() where index > 0 {
             child.isHidden = !open
@@ -935,6 +992,13 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         onAppliedUpdate?(updateJSON)
     }
 
+    private func requestEmojiEdit(for node: [String: Any], nodeType: String, emoji: String) {
+        guard isEditable else { return }
+        let attrs = node["attrs"] as? [String: Any] ?? [:]
+        let pos = (node["docPos"] as? NSNumber)?.uint32Value ?? 0
+        onEmojiEditRequest?(nodeType, pos, emoji, attrs)
+    }
+
     func blockquoteStripeRectsForTesting() -> [CGRect] {
         layoutIfNeeded()
         return descendants(of: self)
@@ -980,7 +1044,7 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         let table = UIStackView()
         table.axis = .vertical
         table.spacing = 0
-        table.layer.borderColor = UIColor.separator.cgColor
+        table.layer.borderColor = (currentTheme?.table?.borderColor ?? resolvedStructuralLineColor).cgColor
         table.layer.borderWidth = 1
         table.layer.cornerRadius = 6
         table.clipsToBounds = true
@@ -1014,11 +1078,11 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         cell.spacing = 4
         cell.layoutMargins = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
         cell.isLayoutMarginsRelativeArrangement = true
-        cell.layer.borderColor = UIColor.separator.cgColor
+        cell.layer.borderColor = (currentTheme?.table?.borderColor ?? resolvedStructuralLineColor).cgColor
         cell.layer.borderWidth = 0.5
         cell.baseFillColor = (node["nodeType"] as? String) == "tableHeader"
-            ? UIColor.secondarySystemBackground
-            : (currentTheme?.backgroundColor ?? baseBackgroundColor)
+            ? (currentTheme?.table?.headerBackgroundColor ?? resolvedBlockSurfaceColor)
+            : (currentTheme?.table?.cellBackgroundColor ?? resolvedBlockSurfaceColor)
         cell.backgroundColor = cell.baseFillColor
         cell.isUserInteractionEnabled = true
         let tap = UITapGestureRecognizer(target: self, action: #selector(handleCellTap(_:)))
@@ -1051,7 +1115,7 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
     }
 
     private func pageView(for node: [String: Any], depth: Int) -> UIView {
-        let row = UIStackView()
+        let row = PageRow()
         row.axis = .horizontal
         row.alignment = .center
         row.spacing = 8
@@ -1059,30 +1123,47 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         row.isLayoutMarginsRelativeArrangement = true
         row.layer.cornerRadius = 8
 
-        let icon = UILabel()
-        icon.text = stringAttr(node, "icon") ?? "📄"
-        icon.font = .systemFont(ofSize: 18)
+        let icon = UIButton(type: .system)
+        let iconValue = stringAttr(node, "icon") ?? "📄"
+        icon.setTitle(iconValue, for: .normal)
+        icon.titleLabel?.font = .systemFont(ofSize: 18)
+        icon.accessibilityLabel = "Change page emoji"
+        icon.isEnabled = isEditable
+        icon.addAction(UIAction { [weak self] _ in
+            self?.requestEmojiEdit(for: node, nodeType: "page", emoji: iconValue)
+        }, for: .touchUpInside)
         icon.setContentHuggingPriority(.required, for: .horizontal)
+        icon.widthAnchor.constraint(equalToConstant: 24).isActive = true
         row.addArrangedSubview(icon)
 
         let title = textBlockView(for: node, depth: depth)
         if let leaf = title as? UITextView {
-            leaf.font = .systemFont(ofSize: 16, weight: .semibold)
+            let titleText = NSMutableAttributedString(attributedString: leaf.attributedText)
+            if titleText.length > 0 {
+                titleText.addAttributes([
+                    .font: UIFont.systemFont(ofSize: 16, weight: .medium),
+                    .foregroundColor: baseTextColor,
+                    .underlineStyle: NSUnderlineStyle.single.rawValue,
+                    .underlineColor: baseTextColor.withAlphaComponent(0.28),
+                ], range: NSRange(location: 0, length: titleText.length))
+            }
+            leaf.attributedText = titleText
+            leaf.textContainerInset = UIEdgeInsets(top: 8, left: 0, bottom: 8, right: 0)
             leaf.textColor = baseTextColor
+            leaf.isEditable = false
+            leaf.isSelectable = false
+            leaf.isUserInteractionEnabled = false
         }
         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
+        row.isAccessibilityElement = true
+        row.accessibilityTraits = .button
+        row.accessibilityLabel = "Open page"
+        row.open = { [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
     }
 
@@ -1095,10 +1176,23 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         row.isLayoutMarginsRelativeArrangement = true
         row.layer.cornerRadius = 10
         row.layer.borderWidth = 1
-        row.layer.borderColor = UIColor.separator.cgColor
-        let icon = UILabel()
-        icon.text = "📎"
-        icon.font = .systemFont(ofSize: 22)
+        row.layer.borderColor = resolvedStructuralLineColor.cgColor
+        let type = attachmentTypeLabel(mimeType: stringAttr(node, "mimeType"), name: stringAttr(node, "name") ?? "Attachment")
+        let icon = UIView()
+        icon.backgroundColor = resolvedBlockSurfaceColor
+        icon.layer.cornerRadius = 9
+        icon.widthAnchor.constraint(equalToConstant: 42).isActive = true
+        icon.heightAnchor.constraint(equalToConstant: 48).isActive = true
+        let typeLabel = UILabel()
+        typeLabel.text = type
+        typeLabel.font = .systemFont(ofSize: 9, weight: .bold)
+        typeLabel.textColor = .secondaryLabel
+        typeLabel.translatesAutoresizingMaskIntoConstraints = false
+        icon.addSubview(typeLabel)
+        NSLayoutConstraint.activate([
+            typeLabel.centerXAnchor.constraint(equalTo: icon.centerXAnchor),
+            typeLabel.centerYAnchor.constraint(equalTo: icon.centerYAnchor),
+        ])
         row.addArrangedSubview(icon)
         let details = UIStackView()
         details.axis = .vertical
@@ -1109,7 +1203,8 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         name.textColor = baseTextColor
         name.lineBreakMode = .byTruncatingMiddle
         let meta = UILabel()
-        meta.text = stringAttr(node, "mimeType") ?? "File"
+        let size = formatAttachmentSize((node["attrs"] as? [String: Any])?["size"] as? NSNumber)
+        meta.text = [size, type].compactMap { $0 }.joined(separator: " · ")
         meta.font = .systemFont(ofSize: 12)
         meta.textColor = .secondaryLabel
         details.addArrangedSubview(name)
@@ -1129,6 +1224,20 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         return row
     }
 
+    private func attachmentTypeLabel(mimeType: String?, name: String) -> String {
+        let subtype = mimeType?.split(separator: "/").last?.split(separator: "+").first.map(String.init)
+        let parts = name.split(separator: ".")
+        let fileExtension = parts.count > 1 ? parts.last.map(String.init) : nil
+        return String((subtype ?? fileExtension ?? "FILE").prefix(4)).uppercased()
+    }
+
+    private func formatAttachmentSize(_ size: NSNumber?) -> String? {
+        guard let bytes = size?.doubleValue, bytes >= 0 else { return nil }
+        if bytes < 1_024 { return "\(Int(bytes.rounded())) B" }
+        if bytes < 1_048_576 { return String(format: bytes < 10_240 ? "%.1f KB" : "%.0f KB", bytes / 1_024) }
+        return String(format: bytes < 10_485_760 ? "%.1f MB" : "%.0f MB", bytes / 1_048_576)
+    }
+
     private func configureTextLeaf(_ leaf: TextLeafView, for node: [String: Any]) {
         let wasFirstResponder = leaf.isFirstResponder
         let previousSelection = leaf.selectedRange
@@ -1174,7 +1283,7 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
             ]
         }
         if isCodeBlock(node) {
-            leaf.backgroundColor = currentTheme?.codeBlock?.backgroundColor ?? UIColor.secondarySystemBackground
+            leaf.backgroundColor = currentTheme?.codeBlock?.backgroundColor ?? resolvedBlockSurfaceColor
             leaf.textContainerInset = UIEdgeInsets(
                 top: currentTheme?.codeBlock?.paddingVertical ?? 8,
                 left: currentTheme?.codeBlock?.paddingHorizontal ?? 12,
@@ -1301,7 +1410,7 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
             let margin = currentTheme?.horizontalRule?.verticalMargin ?? 16
             let wrapper = UIView()
             let line = UIView()
-            line.backgroundColor = currentTheme?.horizontalRule?.color ?? UIColor.separator
+            line.backgroundColor = currentTheme?.horizontalRule?.color ?? resolvedStructuralLineColor
             wrapper.addSubview(line)
             let thickness = currentTheme?.horizontalRule?.thickness ?? 1
             wrapper.heightAnchor.constraint(equalToConstant: margin * 2 + thickness).isActive = true
@@ -1320,8 +1429,8 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         let label = UILabel()
         label.text = node["label"] as? String ?? node["nodeType"] as? String ?? "Block"
         label.font = .systemFont(ofSize: 14, weight: .medium)
-        label.textColor = .secondaryLabel
-        label.backgroundColor = .secondarySystemBackground
+        label.textColor = currentTheme?.placeholderColor ?? .secondaryLabel
+        label.backgroundColor = resolvedBlockSurfaceColor
         label.layer.cornerRadius = 6
         label.clipsToBounds = true
         label.numberOfLines = 0
@@ -1338,7 +1447,7 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         imageView.contentMode = .scaleAspectFit
         imageView.clipsToBounds = true
         imageView.layer.cornerRadius = 8
-        imageView.backgroundColor = .secondarySystemFill
+        imageView.backgroundColor = resolvedBlockSurfaceColor
         imageView.isUserInteractionEnabled = true
         imageView.addGestureRecognizer(
             UITapGestureRecognizer(target: self, action: #selector(handleImageTap(_:)))
@@ -1357,19 +1466,15 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
             equalToConstant: imageView.intrinsicContentSize.width
         )
         preferredWidth.priority = .defaultHigh
-        let preferredHeight = imageView.heightAnchor.constraint(
-            equalToConstant: imageView.intrinsicContentSize.height
-        )
         imageView.preferredWidthConstraint = preferredWidth
-        imageView.preferredHeightConstraint = preferredHeight
         NSLayoutConstraint.activate([
             imageView.leadingAnchor.constraint(equalTo: wrapper.leadingAnchor),
             imageView.topAnchor.constraint(equalTo: wrapper.topAnchor),
             imageView.bottomAnchor.constraint(equalTo: wrapper.bottomAnchor),
             imageView.widthAnchor.constraint(lessThanOrEqualTo: wrapper.widthAnchor),
-            preferredWidth,
-            preferredHeight
+            preferredWidth
         ])
+        imageView.refreshPreferredSizeConstraints()
         return wrapper
     }
 
@@ -1687,13 +1792,14 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         let button = UIButton(type: .custom)
         button.setTitle(checked ? "✓" : "", for: .normal)
         button.titleLabel?.font = .systemFont(ofSize: 12, weight: .bold)
-        button.setTitleColor(.white, for: .normal)
-        button.backgroundColor = checked ? (currentTheme?.list?.markerColor ?? tintColor) : .clear
-        button.layer.borderColor = (currentTheme?.list?.markerColor ?? UIColor.secondaryLabel).cgColor
-        button.layer.borderWidth = 1.5
+        button.setTitleColor(currentTheme?.accentStrongTextColor ?? .white, for: .normal)
+        button.backgroundColor = checked
+            ? (currentTheme?.accentStrongColor ?? baseTextColor)
+            : resolvedBlockSurfaceColor
+        button.layer.borderWidth = 0
         button.layer.cornerRadius = 4
-        button.widthAnchor.constraint(equalToConstant: 18).isActive = true
-        button.heightAnchor.constraint(equalToConstant: 18).isActive = true
+        button.widthAnchor.constraint(equalToConstant: 20).isActive = true
+        button.heightAnchor.constraint(equalToConstant: 20).isActive = true
         button.addAction(UIAction { [weak self] _ in
             self?.toggleTaskItem(node)
         }, for: .touchUpInside)
@@ -1831,8 +1937,12 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
             } else {
                 selected = cell === anchor || cell === head
             }
-            cell.backgroundColor = selected ? UIColor.systemBlue.withAlphaComponent(0.12) : cell.baseFillColor
-            cell.layer.borderColor = selected ? UIColor.systemBlue.cgColor : UIColor.separator.cgColor
+            cell.backgroundColor = selected
+                ? (currentTheme?.table?.selectionBackgroundColor ?? cell.baseFillColor)
+                : cell.baseFillColor
+            cell.layer.borderColor = selected
+                ? (currentTheme?.table?.selectionBorderColor ?? baseTextColor).cgColor
+                : (currentTheme?.table?.borderColor ?? resolvedStructuralLineColor).cgColor
             cell.layer.borderWidth = selected ? 1.5 : 0.5
         }
     }

package/ios/NativeEditorExpoView.swift

@@ -2119,6 +2119,18 @@ class NativeEditorExpoView: ExpoView, UIGestureRecognizerDelegate {
                   let json = String(data: data, encoding: .utf8) else { return }
             self?.onAddonEvent(["eventJson": json])
         }
+        richTextView.onEmojiEditRequest = { [weak self] nodeType, docPos, emoji, attrs in
+            let event: [String: Any] = [
+                "type": "emojiEditRequest",
+                "nodeType": nodeType,
+                "docPos": docPos,
+                "emoji": emoji,
+                "attrs": attrs,
+            ]
+            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/NativeEditorModule.swift

@@ -200,6 +200,12 @@ public class NativeEditorModule: Module {
             guard let editorId = nativeUInt64(id) else { return nativeArgumentError("editor id") }
             return editorSetMark(id: editorId, markName: markName, attrsJson: attrsJson)
         }
+        Function("editorUpdateNodeAttrs") { (id: Int, pos: Int, attrsJson: String) -> String in
+            guard let editorId = nativeUInt64(id), let position = nativeUInt32(pos) else {
+                return nativeArgumentError("position")
+            }
+            return editorUpdateNodeAttrs(id: editorId, pos: position, attrsJson: attrsJson)
+        }
         Function("editorUnsetMark") { (id: Int, markName: String) -> String in
             guard let editorId = nativeUInt64(id) else { return nativeArgumentError("editor id") }
             return editorUnsetMark(id: editorId, markName: markName)

package/ios/RichTextEditorView.swift

@@ -648,6 +648,7 @@ final class RichTextEditorView: UIView {
     var onFocusChange: ((Bool) -> Void)?
     var onPageOpen: ((String, String, String?, String?) -> Void)?
     var onAttachmentOpen: ((String?, String, String?, NSNumber?, String?) -> Void)?
+    var onEmojiEditRequest: ((String, UInt32, String, [String: Any]) -> Void)?
     private var lastAutoGrowWidth: CGFloat = 0
     private var cachedAutoGrowMeasuredHeight: CGFloat = 0
     private var remoteSelections: [RemoteSelectionDecoration] = []
@@ -768,6 +769,9 @@ final class RichTextEditorView: UIView {
         blockSurface.onAttachmentOpen = { [weak self] attachmentId, name, mimeType, size, url in
             self?.onAttachmentOpen?(attachmentId, name, mimeType, size, url)
         }
+        blockSurface.onEmojiEditRequest = { [weak self] nodeType, docPos, emoji, attrs in
+            self?.onEmojiEditRequest?(nodeType, docPos, emoji, attrs)
+        }
         blockSurface.onContentHeightMayChange = { [weak self] measuredHeight in
             guard let self, self.heightBehavior == .autoGrow else { return }
             self.cachedAutoGrowMeasuredHeight = measuredHeight

package/package.json

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