@openeditor/react-native-prose-editor 0.0.7 → 0.0.8

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

@@ -0,0 +1,1086 @@
+package com.openeditor.editor
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Rect
+import android.graphics.RectF
+import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
+import android.text.SpannableStringBuilder
+import android.text.Spanned
+import android.text.style.BackgroundColorSpan
+import android.text.style.ForegroundColorSpan
+import android.text.style.StrikethroughSpan
+import android.text.style.StyleSpan
+import android.text.style.TypefaceSpan
+import android.text.style.UnderlineSpan
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewGroup
+import android.util.TypedValue
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.ScrollView
+import android.widget.TextView
+import org.json.JSONObject
+import uniffi.editor_core.editorDocToScalar
+import uniffi.editor_core.editorGetSelectionState
+import uniffi.editor_core.editorResizeImageAtDocPos
+import uniffi.editor_core.editorSetCellSelection
+import uniffi.editor_core.editorSetNodeSelection
+import uniffi.editor_core.editorSetSelection
+import uniffi.editor_core.editorToggleTaskItemCheckedAtSelectionScalar
+
+class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
+    var isScrollingEnabled: Boolean = true
+
+    internal var geometryRevision: Long = 0
+        private set
+
+    private data class PositionSegment(
+        val startUtf16: Int,
+        val endUtf16: Int,
+        val text: String,
+        val docPos: Int,
+        val docSize: Int,
+        val isAtom: Boolean
+    )
+
+    private class TextLeaf(context: Context) : TextView(context) {
+        var positionSegments: List<PositionSegment> = emptyList()
+
+        fun docPositionForOffset(offset: Int): Int? {
+            val segment = positionSegments.firstOrNull {
+                offset in it.startUtf16..it.endUtf16
+            } ?: positionSegments.lastOrNull() ?: return null
+            if (segment.isAtom) {
+                return segment.docPos + if (offset > (segment.startUtf16 + segment.endUtf16) / 2) {
+                    segment.docSize
+                } else {
+                    0
+                }
+            }
+            val localUtf16 = (offset - segment.startUtf16).coerceIn(0, segment.text.length)
+            return segment.docPos + segment.text.codePointCount(0, localUtf16)
+        }
+
+        fun nativeOffsetForDocPosition(docPosition: Int): Int? {
+            val segment = positionSegments.firstOrNull {
+                docPosition in it.docPos..(it.docPos + it.docSize)
+            } ?: return null
+            if (segment.isAtom) {
+                return if (docPosition > segment.docPos) segment.endUtf16 else segment.startUtf16
+            }
+            val scalarOffset = (docPosition - segment.docPos).coerceIn(
+                0,
+                segment.text.codePointCount(0, segment.text.length)
+            )
+            return segment.startUtf16 + segment.text.offsetByCodePoints(0, scalarOffset)
+        }
+
+        fun caretRectForDocPosition(docPosition: Int, caretWidth: Float): RectF? {
+            val textLayout = layout ?: return null
+            val offset = nativeOffsetForDocPosition(docPosition)?.coerceIn(0, text.length) ?: return null
+            val lookupOffset = offset.coerceAtMost((text.length - 1).coerceAtLeast(0))
+            val line = textLayout.getLineForOffset(lookupOffset)
+            val left = compoundPaddingLeft + textLayout.getPrimaryHorizontal(offset)
+            return RectF(
+                left,
+                compoundPaddingTop + textLayout.getLineTop(line).toFloat(),
+                left + caretWidth,
+                compoundPaddingTop + textLayout.getLineBottom(line).toFloat()
+            )
+        }
+
+        fun selectionRectsForDocRange(from: Int, to: Int): List<RectF> {
+            val textLayout = layout ?: return emptyList()
+            val start = nativeOffsetForDocPosition(from)?.coerceIn(0, text.length) ?: return emptyList()
+            val end = nativeOffsetForDocPosition(to)?.coerceIn(start, text.length) ?: return emptyList()
+            if (start == end) return emptyList()
+            val firstLine = textLayout.getLineForOffset(start)
+            val lastLine = textLayout.getLineForOffset((end - 1).coerceAtLeast(start))
+            return (firstLine..lastLine).mapNotNull { line ->
+                val lineStart = maxOf(start, textLayout.getLineStart(line))
+                val lineEnd = minOf(end, textLayout.getLineEnd(line))
+                if (lineStart >= lineEnd) return@mapNotNull null
+                val left = compoundPaddingLeft + textLayout.getPrimaryHorizontal(lineStart)
+                val right = compoundPaddingLeft + textLayout.getPrimaryHorizontal(lineEnd)
+                RectF(
+                    minOf(left, right),
+                    compoundPaddingTop + textLayout.getLineTop(line).toFloat(),
+                    maxOf(left, right),
+                    compoundPaddingTop + textLayout.getLineBottom(line).toFloat()
+                )
+            }
+        }
+    }
+
+    private class CellView(context: Context) : LinearLayout(context) {
+        var docPos: Int = 0
+        var tableId: Int = 0
+        var rowIndex: Int = 0
+        var columnIndex: Int = 0
+        var baseFillColor: Int = Color.WHITE
+    }
+
+    private class BlockImageView(context: Context) : ImageView(context) {
+        var docPos: Int = 0
+        var preferredWidthPx: Int? = null
+        var preferredHeightPx: Int? = null
+
+        override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+            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))
+        }
+    }
+
+    private val stack = LinearLayout(context).apply {
+        orientation = LinearLayout.VERTICAL
+        setPadding(0, 0, 0, 0)
+    }
+    private var currentEditorId: Long = 0L
+    private var baseTextSizePx: Float = 16f * resources.displayMetrics.density
+    private var baseTextColor: Int = Color.BLACK
+    private var isApplyingRemoteUpdate = false
+    private var currentTheme: EditorTheme? = null
+    private var nextTableId = 1
+    private val tableCells = mutableListOf<CellView>()
+    private var selectionAnchorCell: CellView? = null
+    private var selectionHeadCell: CellView? = null
+    private var currentRoot: JSONObject? = null
+    /** Canonical render-tree path to the native view that owns that node. */
+    private val nodeViews = mutableMapOf<List<Int>, View>()
+    private val imageViews = mutableListOf<BlockImageView>()
+    private val textLeafViews = mutableListOf<TextLeaf>()
+    private var selectedNodePos: Int? = null
+    private var selectedTextPos: Int? = null
+    private val caretPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { color = 0xFF2F80ED.toInt() }
+
+    var isInputFocused: Boolean = false
+        set(value) {
+            field = value
+            invalidate()
+        }
+
+    var onAppliedUpdate: ((String) -> Unit)? = null
+    var onRequestTextInput: ((Int) -> Unit)? = null
+    var isEditable: Boolean = true
+        set(value) {
+            field = value
+            refreshImageSelection()
+        }
+
+    init {
+        isFillViewport = false
+        clipToPadding = false
+        addView(
+            stack,
+            LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
+        )
+    }
+
+    override fun onInterceptTouchEvent(event: MotionEvent): Boolean =
+        isScrollingEnabled && super.onInterceptTouchEvent(event)
+
+    override fun onTouchEvent(event: MotionEvent): Boolean =
+        isScrollingEnabled && super.onTouchEvent(event)
+
+    override fun dispatchDraw(canvas: Canvas) {
+        super.dispatchDraw(canvas)
+        if (!isEditable || !isInputFocused || selectedNodePos != null) return
+        selectedCaretRect()?.let { canvas.drawRect(it, caretPaint) }
+    }
+
+    fun bind(editorId: Long) {
+        currentEditorId = editorId
+        if (editorId == 0L) {
+            stack.removeAllViews()
+            currentRoot = null
+            nodeViews.clear()
+            tableCells.clear()
+            imageViews.clear()
+            textLeafViews.clear()
+            selectedNodePos = null
+            selectedTextPos = null
+        }
+    }
+
+    fun configure(textSizePx: Float, textColor: Int, backgroundColor: Int) {
+        baseTextSizePx = textSizePx
+        baseTextColor = textColor
+        setBackgroundColor(backgroundColor)
+    }
+
+    fun applyTheme(theme: EditorTheme?) {
+        currentTheme = theme
+        val density = resources.displayMetrics.density
+        val topInset = ((theme?.contentInsets?.top ?: 0f) * density).toInt()
+        val rightInset = ((theme?.contentInsets?.right ?: 0f) * density).toInt()
+        val bottomInset = ((theme?.contentInsets?.bottom ?: 0f) * density).toInt()
+        val leftInset = ((theme?.contentInsets?.left ?: 0f) * density).toInt()
+        setPadding(leftInset, topInset, rightInset, bottomInset)
+    }
+
+    fun applyUpdateJSON(updateJSON: String, editorId: Long) {
+        val update = try { JSONObject(updateJSON) } catch (_: Throwable) { return }
+        update.optJSONObject("selection")?.let { selection ->
+            selectedNodePos = if (selection.optString("type") == "node") {
+                selection.optInt("pos")
+            } else {
+                null
+            }
+            selectedTextPos = if (
+                selection.optString("type") == "text" &&
+                selection.optInt("anchor") == selection.optInt("head")
+            ) selection.optInt("anchor") else null
+            refreshImageSelection()
+        }
+        val root = update.optJSONObject("renderTree")?.optJSONObject("root") ?: return
+        currentEditorId = editorId
+        isApplyingRemoteUpdate = true
+        val operations = update.optJSONObject("renderPatch")?.optJSONArray("operations")
+        if (currentRoot != null && operations != null) {
+            applyStructuralPatch(operations, root)
+        } else {
+            rebuildAll(root)
+        }
+        refreshTableCellRegistry()
+        refreshImageSelection()
+        currentRoot = root
+        isApplyingRemoteUpdate = false
+        geometryRevision += 1
+        requestLayout()
+    }
+
+    private fun rebuildAll(root: JSONObject) {
+        stack.removeAllViews()
+        nodeViews.clear()
+        tableCells.clear()
+        selectionAnchorCell = null
+        selectionHeadCell = null
+        val children = root.optJSONArray("children")
+        if (children == null || children.length() == 0) {
+            val leaf = textBlockView(root, 0)
+            nodeViews[emptyList()] = leaf
+            stack.addView(leaf)
+            return
+        }
+        for (index in 0 until children.length()) {
+            children.optJSONObject(index)?.let { stack.addView(viewForNode(it, 0, listOf(index))) }
+        }
+    }
+
+    private fun applyStructuralPatch(operations: org.json.JSONArray, nextRoot: JSONObject) {
+        for (index in 0 until operations.length()) {
+            val operation = operations.optJSONObject(index) ?: continue
+            val type = operation.optString("type")
+            val pathArray = operation.optJSONArray("path")
+            val path = buildList {
+                for (pathIndex in 0 until (pathArray?.length() ?: 0)) {
+                    add(pathArray!!.optInt(pathIndex))
+                }
+            }
+            when (type) {
+                "updateMetadata" -> updateMetadata(path, nextRoot)
+                "replaceNode" -> {
+                    if (path.isEmpty()) rebuildAll(nextRoot)
+                    else replaceRenderedOwner(path, nextRoot)
+                }
+                "spliceChildren" -> {
+                    if (path.isEmpty()) applyRootSplice(operation, nextRoot)
+                    else replaceRenderedOwner(path, nextRoot)
+                }
+                else -> {
+                    rebuildAll(nextRoot)
+                    return
+                }
+            }
+        }
+    }
+
+    private fun applyRootSplice(operation: JSONObject, nextRoot: JSONObject) {
+        val start = operation.optInt("startIndex", 0).coerceAtLeast(0)
+        val deleteCount = operation.optInt("deleteCount", 0).coerceAtLeast(0)
+        val insertedCount = operation.optJSONArray("children")?.length() ?: 0
+        val nextChildren = nextRoot.optJSONArray("children")
+        if (start > stack.childCount || start + deleteCount > stack.childCount ||
+            start + insertedCount > (nextChildren?.length() ?: 0)
+        ) {
+            rebuildAll(nextRoot)
+            return
+        }
+        removeBindingsInTopLevelRange(start until start + deleteCount)
+        repeat(deleteCount) { stack.removeViewAt(start) }
+        shiftTopLevelBindings(start + deleteCount, insertedCount - deleteCount)
+        for (offset in 0 until insertedCount) {
+            val childIndex = start + offset
+            nextChildren?.optJSONObject(childIndex)?.let {
+                stack.addView(viewForNode(it, 0, listOf(childIndex)), childIndex)
+            }
+        }
+    }
+
+    private fun replaceRenderedOwner(requestedPath: List<Int>, root: JSONObject) {
+        val ownerPath = nearestRenderedPath(requestedPath) ?: run {
+            rebuildAll(root)
+            return
+        }
+        if (ownerPath.isEmpty()) {
+            rebuildAll(root)
+            return
+        }
+        val oldView = nodeViews[ownerPath] ?: run {
+            rebuildAll(root)
+            return
+        }
+        val node = nodeAt(ownerPath, root) ?: run {
+            rebuildAll(root)
+            return
+        }
+        val parent = oldView.parent as? ViewGroup ?: run {
+            rebuildAll(root)
+            return
+        }
+        val childIndex = parent.indexOfChild(oldView)
+        if (childIndex < 0) {
+            rebuildAll(root)
+            return
+        }
+        removeBindingsUnder(ownerPath)
+        val replacement = viewForNode(node, (ownerPath.size - 1).coerceAtLeast(0), ownerPath)
+        parent.removeViewAt(childIndex)
+        parent.addView(replacement, childIndex)
+    }
+
+    private fun updateMetadata(requestedPath: List<Int>, root: JSONObject) {
+        val ownerPath = nearestRenderedPath(requestedPath) ?: return
+        val owner = nodeViews[ownerPath] ?: return
+        val node = nodeAt(ownerPath, root) ?: return
+        if (owner is TextLeaf) owner.positionSegments = positionSegmentsFor(node)
+        if (owner is CellView) owner.docPos = node.optInt("docPos", owner.docPos)
+        if (owner is BlockImageView) owner.docPos = node.optInt("docPos", owner.docPos)
+    }
+
+    private fun nearestRenderedPath(requestedPath: List<Int>): List<Int>? {
+        var candidate = requestedPath
+        while (true) {
+            if (nodeViews.containsKey(candidate)) return candidate
+            if (candidate.isEmpty()) return null
+            candidate = candidate.dropLast(1)
+        }
+    }
+
+    private fun nodeAt(path: List<Int>, root: JSONObject): JSONObject? {
+        var current = root
+        for (index in path) {
+            current = current.optJSONArray("children")?.optJSONObject(index) ?: return null
+        }
+        return current
+    }
+
+    private fun removeBindingsUnder(path: List<Int>) {
+        nodeViews.keys.removeAll { key -> key.size >= path.size && key.take(path.size) == path }
+    }
+
+    private fun removeBindingsInTopLevelRange(range: IntRange) {
+        if (range.isEmpty()) return
+        nodeViews.keys.removeAll { key -> key.firstOrNull()?.let(range::contains) == true }
+    }
+
+    private fun shiftTopLevelBindings(start: Int, delta: Int) {
+        if (delta == 0) return
+        val shifted = nodeViews.entries.associate { (path, view) ->
+            if (path.firstOrNull()?.let { it >= start } == true) {
+                listOf(path.first() + delta) + path.drop(1) to view
+            } else {
+                path to view
+            }
+        }
+        nodeViews.clear()
+        nodeViews.putAll(shifted)
+    }
+
+    private fun refreshTableCellRegistry() {
+        tableCells.clear()
+        imageViews.clear()
+        textLeafViews.clear()
+        fun collect(view: View) {
+            if (view is CellView) tableCells += view
+            if (view is BlockImageView) imageViews += view
+            if (view is TextLeaf) textLeafViews += view
+            if (view is ViewGroup) {
+                for (index in 0 until view.childCount) collect(view.getChildAt(index))
+            }
+        }
+        for (index in 0 until stack.childCount) collect(stack.getChildAt(index))
+    }
+
+    internal fun topLevelViewForTesting(index: Int): View? =
+        if (index in 0 until stack.childCount) stack.getChildAt(index) else null
+
+    internal val topLevelViewCountForTesting: Int
+        get() = stack.childCount
+
+    private fun viewForNode(node: JSONObject, depth: Int, path: List<Int>): View {
+        val rendered = when (node.optString("kind")) {
+            "list" -> listView(node, depth, path)
+            "listItem" -> listItemView(node, 0, null, depth, path)
+            "columns" -> columnsView(node, depth, path)
+            "column" -> columnView(node, depth, path)
+            "table" -> tableView(node, path)
+            "tableRow" -> rowView(node, 0, nextTableId, path)
+            "tableCell" -> cellView(node, nextTableId, 0, 0, path)
+            "blockAtom" -> atomView(node)
+            else -> if (node.optString("kind") == "block") {
+                blockContainerView(node, depth, path)
+            } else {
+                textBlockView(node, depth)
+            }
+        }
+        nodeViews[path] = rendered
+        return rendered
+    }
+
+    private fun columnsView(node: JSONObject, depth: Int, path: List<Int>): View {
+        val density = resources.displayMetrics.density
+        val row = LinearLayout(context).apply {
+            orientation = LinearLayout.HORIZONTAL
+            isBaselineAligned = false
+            setPadding((depth * 8 * density).toInt(), (4 * density).toInt(), 0, (4 * density).toInt())
+        }
+        val columns = node.optJSONArray("children")
+        for (index in 0 until (columns?.length() ?: 0)) {
+            columns?.optJSONObject(index)?.let {
+                val params = LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f)
+                if (index > 0) params.leftMargin = (12 * density).toInt()
+                row.addView(viewForNode(it, depth + 1, path + index), params)
+            }
+        }
+        return row
+    }
+
+    private fun columnView(node: JSONObject, depth: Int, path: List<Int>): View {
+        val column = LinearLayout(context).apply {
+            orientation = LinearLayout.VERTICAL
+        }
+        val children = node.optJSONArray("children")
+        for (index in 0 until (children?.length() ?: 0)) {
+            children?.optJSONObject(index)?.let { column.addView(viewForNode(it, depth + 1, path + index)) }
+        }
+        if (column.childCount == 0) {
+            column.addView(textBlockView(node, depth))
+        }
+        return column
+    }
+
+    private fun listView(node: JSONObject, depth: Int, path: List<Int>): View {
+        val density = resources.displayMetrics.density
+        val list = LinearLayout(context).apply {
+            orientation = LinearLayout.VERTICAL
+            setPadding((depth * 12 * density).toInt(), (2 * density).toInt(), 0, (2 * density).toInt())
+        }
+        val children = node.optJSONArray("children")
+        val start = node.optJSONObject("attrs")?.optInt("start", 1) ?: 1
+        val nodeType = node.optString("nodeType")
+        for (index in 0 until (children?.length() ?: 0)) {
+            children?.optJSONObject(index)?.let {
+                list.addView(listItemView(it, start + index, nodeType, depth, path + index))
+            }
+        }
+        return list
+    }
+
+    private fun listItemView(
+        node: JSONObject,
+        index: Int,
+        parentListType: String?,
+        depth: Int,
+        path: List<Int>
+    ): View {
+        val density = resources.displayMetrics.density
+        val row = LinearLayout(context).apply {
+            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)
+        }
+        val children = node.optJSONArray("children")
+        for (childIndex in 0 until (children?.length() ?: 0)) {
+            children?.optJSONObject(childIndex)?.let { content.addView(viewForNode(it, depth + 1, path + childIndex)) }
+        }
+        if (content.childCount == 0) {
+            content.addView(textBlockView(node, depth + 1))
+        }
+        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") == "blockquote") {
+            val row = LinearLayout(context).apply {
+                orientation = LinearLayout.HORIZONTAL
+                setPadding((depth * 8 * density).toInt(), (6 * density).toInt(), 0, (6 * density).toInt())
+            }
+            row.addView(
+                View(context).apply { setBackgroundColor(currentTheme?.blockquote?.borderColor ?: Color.LTGRAY) },
+                LinearLayout.LayoutParams(
+                    (((currentTheme?.blockquote?.borderWidth ?: 3f) * density).toInt()).coerceAtLeast(1),
+                    ViewGroup.LayoutParams.MATCH_PARENT
+                )
+            )
+            val quoteContent = LinearLayout(context).apply {
+                orientation = LinearLayout.VERTICAL
+                setPadding((((currentTheme?.blockquote?.markerGap ?: 8f) * density).toInt()), 0, 0, 0)
+            }
+            val children = node.optJSONArray("children")
+            for (index in 0 until (children?.length() ?: 0)) {
+                children?.optJSONObject(index)?.let { quoteContent.addView(viewForNode(it, depth + 1, path + index)) }
+            }
+            row.addView(quoteContent, LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f))
+            return row
+        }
+
+        val container = LinearLayout(context).apply {
+            orientation = LinearLayout.VERTICAL
+            setPadding((depth * 8 * density).toInt(), (4 * density).toInt(), 0, (4 * density).toInt())
+        }
+        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)) }
+        }
+        if (container.childCount == 0) {
+            container.addView(textBlockView(node, depth))
+        }
+        return container
+    }
+
+    private fun tableView(node: JSONObject, path: List<Int>): View {
+        val tableId = nextTableId++
+        val table = LinearLayout(context).apply {
+            orientation = LinearLayout.VERTICAL
+            background = borderDrawable(Color.TRANSPARENT, Color.LTGRAY, 1f)
+        }
+        val rows = node.optJSONArray("children")
+        for (index in 0 until (rows?.length() ?: 0)) {
+            rows?.optJSONObject(index)?.let { table.addView(rowView(it, index, tableId, path + index)) }
+        }
+        table.setOnTouchListener { _, event -> handleTableTouch(event) }
+        return table
+    }
+
+    private fun rowView(node: JSONObject, rowIndex: Int, tableId: Int, path: List<Int>): View {
+        val row = LinearLayout(context).apply {
+            orientation = LinearLayout.HORIZONTAL
+            isBaselineAligned = false
+        }
+        val cells = node.optJSONArray("children")
+        for (index in 0 until (cells?.length() ?: 0)) {
+            cells?.optJSONObject(index)?.let {
+                row.addView(cellView(it, tableId, rowIndex, index, path + index), LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f))
+            }
+        }
+        return row
+    }
+
+    private fun cellView(node: JSONObject, tableId: Int, rowIndex: Int, columnIndex: Int, path: List<Int>): View {
+        val density = resources.displayMetrics.density
+        val fillColor = if (node.optString("nodeType") == "tableHeader") 0xFFF4F5F7.toInt() else Color.WHITE
+        val cell = CellView(context).apply {
+            docPos = node.optInt("docPos", 0)
+            this.tableId = tableId
+            this.rowIndex = rowIndex
+            this.columnIndex = columnIndex
+            baseFillColor = fillColor
+            orientation = LinearLayout.VERTICAL
+            setPadding((8 * density).toInt(), (8 * density).toInt(), (8 * density).toInt(), (8 * density).toInt())
+            background = borderDrawable(
+                fillColor,
+                Color.LTGRAY,
+                0.5f
+            )
+            isClickable = true
+            setOnClickListener { selectCell(this, this) }
+        }
+        tableCells.add(cell)
+        val children = node.optJSONArray("children")
+        for (index in 0 until (children?.length() ?: 0)) {
+            children?.optJSONObject(index)?.let { cell.addView(viewForNode(it, 0, path + index)) }
+        }
+        if (cell.childCount == 0) {
+            cell.addView(textBlockView(node, 0))
+        }
+        return cell
+    }
+
+    private fun textBlockView(node: JSONObject, depth: Int): View {
+        val rendered = attributedInlineContent(node)
+        val leaf = TextLeaf(context).apply leaf@ {
+            text = rendered.first
+            positionSegments = if (rendered.second.isEmpty()) {
+                listOf(PositionSegment(0, 0, "", node.optInt("docPos", 0), node.optInt("docSize", 0), false))
+            } else {
+                rendered.second
+            }
+            setTextColor(baseTextColor)
+            setTextSize(TypedValue.COMPLEX_UNIT_PX, textSizeFor(node))
+            typeface = typefaceFor(node)
+            minLines = 1
+            background = if (node.optString("nodeType") == "codeBlock" || node.optString("nodeType") == "code_block") {
+                roundedDrawable(
+                    currentTheme?.codeBlock?.backgroundColor ?: 0xFFF4F5F7.toInt(),
+                    Color.TRANSPARENT,
+                    0f,
+                    currentTheme?.codeBlock?.borderRadius ?: 8f
+                )
+            } else {
+                null
+            }
+            if (node.optString("nodeType") == "codeBlock" || node.optString("nodeType") == "code_block") {
+                val horizontal = (((currentTheme?.codeBlock?.paddingHorizontal ?: 12f) * resources.displayMetrics.density).toInt())
+                val vertical = (((currentTheme?.codeBlock?.paddingVertical ?: 8f) * resources.displayMetrics.density).toInt())
+                setPadding(horizontal, vertical, horizontal, vertical)
+            } else {
+                setPadding(0, 0, 0, 0)
+            }
+            isFocusable = false
+            isFocusableInTouchMode = false
+            setTextIsSelectable(false)
+            setOnTouchListener { view, event ->
+                if (event.actionMasked != MotionEvent.ACTION_UP || !this@NativeBlockEditorSurface.isEditable) {
+                    return@setOnTouchListener true
+                }
+                val textView = view as TextLeaf
+                textView.docPositionForOffset(textView.getOffsetForPosition(event.x, event.y))
+                    ?.let { onRequestTextInput?.invoke(it) }
+                true
+            }
+        }
+        return leaf
+    }
+
+    private fun positionSegmentsFor(node: JSONObject): List<PositionSegment> {
+        val segments = attributedInlineContent(node).second
+        return if (segments.isEmpty()) {
+            listOf(PositionSegment(0, 0, "", node.optInt("docPos", 0), node.optInt("docSize", 0), false))
+        } else {
+            segments
+        }
+    }
+
+    private fun attributedInlineContent(node: JSONObject): Pair<SpannableStringBuilder, List<PositionSegment>> {
+        val output = SpannableStringBuilder()
+        val segments = mutableListOf<PositionSegment>()
+
+        fun append(current: JSONObject) {
+            val kind = current.optString("kind")
+            val docPos = current.optInt("docPos", 0)
+            val docSize = current.optInt("docSize", 0)
+            if (kind == "text") {
+                val value = current.optString("text", "")
+                val start = output.length
+                output.append(value)
+                applyInlineSpans(output, start, output.length, current)
+                segments += PositionSegment(start, output.length, value, docPos, docSize, false)
+                return
+            }
+            if (kind == "inlineAtom") {
+                val nodeType = current.optString("nodeType")
+                val value = if (nodeType == "hardBreak" || nodeType == "hard_break") {
+                    "\n"
+                } else {
+                    current.optString("label", "\uFFFC")
+                }
+                val start = output.length
+                output.append(value)
+                if (nodeType == "mention") {
+                    output.setSpan(ForegroundColorSpan(currentTheme?.list?.markerColor ?: baseTextColor), start, output.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+                    output.setSpan(BackgroundColorSpan(0x1F2F80ED), start, output.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+                }
+                segments += PositionSegment(start, output.length, value, docPos, maxOf(docSize, 1), true)
+                return
+            }
+            val children = current.optJSONArray("children") ?: return
+            for (index in 0 until children.length()) {
+                children.optJSONObject(index)?.let(::append)
+            }
+        }
+
+        append(node)
+        return output to segments
+    }
+
+    private fun applyInlineSpans(
+        output: SpannableStringBuilder,
+        start: Int,
+        end: Int,
+        node: JSONObject
+    ) {
+        if (start == end) return
+        val marks = node.optJSONArray("marks")
+        val markTypes = buildSet {
+            for (index in 0 until (marks?.length() ?: 0)) {
+                marks?.optJSONObject(index)?.optString("type")?.let(::add)
+            }
+        }
+        val style = when {
+            "bold" in markTypes && "italic" in markTypes -> Typeface.BOLD_ITALIC
+            "bold" in markTypes -> Typeface.BOLD
+            "italic" in markTypes -> Typeface.ITALIC
+            else -> null
+        }
+        style?.let { output.setSpan(StyleSpan(it), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE) }
+        if ("underline" in markTypes || "link" in markTypes) {
+            output.setSpan(UnderlineSpan(), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+        }
+        if ("strike" in markTypes) {
+            output.setSpan(StrikethroughSpan(), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+        }
+        if ("link" in markTypes) {
+            output.setSpan(ForegroundColorSpan(0xFF2F80ED.toInt()), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+        }
+        if ("code" in markTypes) {
+            output.setSpan(TypefaceSpan("monospace"), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+        }
+    }
+
+    private fun atomView(node: JSONObject): View {
+        if (isHorizontalRule(node)) {
+            val density = resources.displayMetrics.density
+            val margin = ((currentTheme?.horizontalRule?.verticalMargin ?: 16f) * density).toInt()
+            val thickness = ((currentTheme?.horizontalRule?.thickness ?: 1f) * density).toInt().coerceAtLeast(1)
+            return LinearLayout(context).apply {
+                orientation = LinearLayout.VERTICAL
+                setPadding(0, margin, 0, margin)
+                addView(
+                    View(context).apply {
+                        setBackgroundColor(currentTheme?.horizontalRule?.color ?: Color.LTGRAY)
+                    },
+                    LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, thickness)
+                )
+            }
+        }
+        if (node.optString("nodeType") == "image") {
+            return imageView(node)
+        }
+        return TextView(context).apply {
+            text = node.optString("label", node.optString("nodeType", "Block"))
+            setTextColor(Color.DKGRAY)
+            textSize = 14f
+            setPadding(12, 8, 12, 8)
+            background = borderDrawable(0xFFF2F3F5.toInt(), Color.TRANSPARENT, 0f)
+        }
+    }
+
+    private fun imageView(node: JSONObject): View {
+        val density = resources.displayMetrics.density
+        val attrs = node.optJSONObject("attrs")
+        val source = attrs?.optString("src", "").orEmpty()
+        val imageView = BlockImageView(context).apply {
+            docPos = node.optInt("docPos", 0)
+            preferredWidthPx = attrs?.optDouble("width", Double.NaN)
+                ?.takeIf { it.isFinite() && it > 0 }
+                ?.let { (it * density).toInt() }
+            preferredHeightPx = attrs?.optDouble("height", Double.NaN)
+                ?.takeIf { it.isFinite() && it > 0 }
+                ?.let { (it * density).toInt() }
+            scaleType = ImageView.ScaleType.FIT_CENTER
+            adjustViewBounds = true
+            background = roundedDrawable(0xFFF2F3F5.toInt(), Color.TRANSPARENT, 0f, 8f)
+            isClickable = true
+            setOnClickListener { selectImage(this) }
+        }
+        NativeImageLoader.load(source) { bitmap ->
+            imageView.post {
+                imageView.setImageBitmap(bitmap)
+                imageView.requestLayout()
+                imageView.invalidate()
+            }
+        }
+        return imageView
+    }
+
+    private fun selectImage(imageView: BlockImageView) {
+        if (!isEditable || currentEditorId == 0L) return
+        selectedNodePos = imageView.docPos
+        editorSetNodeSelection(currentEditorId.toULong(), imageView.docPos.toUInt())
+        refreshImageSelection()
+        onAppliedUpdate?.invoke(editorGetSelectionState(currentEditorId.toULong()))
+    }
+
+    private fun refreshImageSelection() {
+        for (imageView in imageViews) {
+            val selected = isEditable && imageView.docPos == selectedNodePos
+            imageView.background = roundedDrawable(
+                if (imageView.drawable == null) 0xFFF2F3F5.toInt() else Color.TRANSPARENT,
+                if (selected) 0xFF2F80ED.toInt() else Color.TRANSPARENT,
+                if (selected) 2f else 0f,
+                8f
+            )
+        }
+    }
+
+    internal fun selectedImageGeometry(): EditorEditText.SelectedImageGeometry? {
+        val docPos = selectedNodePos ?: return null
+        val imageView = imageViews.firstOrNull { it.docPos == docPos } ?: return null
+        if (!isEditable || imageView.width <= 0 || imageView.height <= 0) return null
+        val rect = Rect(0, 0, imageView.width, imageView.height)
+        offsetDescendantRectToMyCoords(imageView, rect)
+        return EditorEditText.SelectedImageGeometry(docPos, RectF(rect))
+    }
+
+    internal fun selectedCaretRect(): RectF? =
+        selectedTextPos?.let(::caretRectForDocPosition)
+
+    internal fun caretRectForDocPosition(docPosition: Int): RectF? {
+        val caretWidth = maxOf(2f, resources.displayMetrics.density)
+        for (leaf in textLeafViews) {
+            val local = leaf.caretRectForDocPosition(docPosition, caretWidth) ?: continue
+            return descendantRectInSurface(leaf, local)
+        }
+        return null
+    }
+
+    internal fun selectionRectsForDocRange(anchor: Int, head: Int): List<RectF> {
+        val from = minOf(anchor, head)
+        val to = maxOf(anchor, head)
+        if (from == to) return emptyList()
+        return buildList {
+            for (leaf in textLeafViews) {
+                val first = leaf.positionSegments.firstOrNull()?.docPos ?: continue
+                val lastSegment = leaf.positionSegments.lastOrNull() ?: continue
+                val last = lastSegment.docPos + lastSegment.docSize
+                val localFrom = maxOf(from, first)
+                val localTo = minOf(to, last)
+                if (localFrom >= localTo) continue
+                leaf.selectionRectsForDocRange(localFrom, localTo).forEach {
+                    add(descendantRectInSurface(leaf, it))
+                }
+            }
+        }
+    }
+
+    private fun descendantRectInSurface(descendant: View, local: RectF): RectF {
+        val origin = Rect(0, 0, 0, 0)
+        offsetDescendantRectToMyCoords(descendant, origin)
+        return RectF(
+            local.left + origin.left,
+            local.top + origin.top,
+            local.right + origin.left,
+            local.bottom + origin.top
+        )
+    }
+
+    internal fun maximumImageWidthPx(): Float =
+        (width - paddingLeft - paddingRight).coerceAtLeast(48).toFloat()
+
+    internal fun resizeImage(docPos: Int, widthPx: Float, heightPx: Float) {
+        if (!isEditable || currentEditorId == 0L) return
+        val density = resources.displayMetrics.density
+        val widthDp = maxOf(48, (widthPx / density).toInt())
+        val heightDp = maxOf(48, (heightPx / density).toInt())
+        val updateJSON = editorResizeImageAtDocPos(
+            currentEditorId.toULong(),
+            docPos.toUInt(),
+            widthDp.toUInt(),
+            heightDp.toUInt()
+        )
+        applyUpdateJSON(updateJSON, currentEditorId)
+        onAppliedUpdate?.invoke(updateJSON)
+    }
+
+    private data class TextInfo(val text: String, val docFrom: Int?, val docTo: Int?)
+
+    private fun textRange(node: JSONObject): TextInfo {
+        val builder = StringBuilder()
+        var docFrom: Int? = null
+        var docTo: Int? = null
+        appendTextRange(node, builder) { from, to ->
+            if (docFrom == null) docFrom = from
+            docTo = to
+        }
+        return TextInfo(builder.toString(), docFrom, docTo)
+    }
+
+    private fun appendTextRange(
+        node: JSONObject,
+        builder: StringBuilder,
+        onTextRange: (Int?, Int?) -> Unit
+    ) {
+        if (node.optString("kind") == "text") {
+            val text = node.optString("text", "")
+            val from = if (node.has("docPos")) node.optInt("docPos") else null
+            builder.append(text)
+            onTextRange(from, from?.plus(text.codePointCount(0, text.length)))
+            return
+        }
+        val children = node.optJSONArray("children") ?: return
+        for (index in 0 until children.length()) {
+            val child = children.optJSONObject(index) ?: continue
+            appendTextRange(child, builder, onTextRange)
+        }
+    }
+
+    private fun handleTableTouch(event: MotionEvent): Boolean {
+        if (!isEditable) return false
+        val cell = cellAtRaw(event.rawX.toInt(), event.rawY.toInt()) ?: return false
+        when (event.actionMasked) {
+            MotionEvent.ACTION_DOWN -> {
+                parent?.requestDisallowInterceptTouchEvent(true)
+                selectionAnchorCell = cell
+                selectCell(cell, cell)
+                return true
+            }
+            MotionEvent.ACTION_MOVE -> {
+                selectionAnchorCell?.let { selectCell(it, cell) }
+                return true
+            }
+            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+                selectionAnchorCell?.let { selectCell(it, cell) }
+                parent?.requestDisallowInterceptTouchEvent(false)
+                return true
+            }
+        }
+        return false
+    }
+
+    private fun cellAtRaw(rawX: Int, rawY: Int): CellView? {
+        val location = IntArray(2)
+        return tableCells.firstOrNull { cell ->
+            cell.getLocationOnScreen(location)
+            rawX >= location[0] &&
+                rawX <= location[0] + cell.width &&
+                rawY >= location[1] &&
+                rawY <= location[1] + cell.height
+        }
+    }
+
+    private fun selectCell(anchor: CellView, head: CellView) {
+        if (!isEditable || currentEditorId == 0L || anchor.docPos <= 0 || head.docPos <= 0) return
+        selectionAnchorCell = anchor
+        selectionHeadCell = head
+        editorSetCellSelection(currentEditorId.toULong(), anchor.docPos.toUInt(), head.docPos.toUInt())
+        paintCellSelection(anchor, head)
+        onAppliedUpdate?.invoke(editorGetSelectionState(currentEditorId.toULong()))
+    }
+
+    private fun paintCellSelection(anchor: CellView, head: CellView) {
+        val sameTable = anchor.tableId == head.tableId
+        val minRow = minOf(anchor.rowIndex, head.rowIndex)
+        val maxRow = maxOf(anchor.rowIndex, head.rowIndex)
+        val minColumn = minOf(anchor.columnIndex, head.columnIndex)
+        val maxColumn = maxOf(anchor.columnIndex, head.columnIndex)
+        tableCells.forEach { cell ->
+            val selected = if (sameTable) {
+                cell.tableId == anchor.tableId &&
+                    cell.rowIndex in minRow..maxRow &&
+                    cell.columnIndex in minColumn..maxColumn
+            } else {
+                cell == anchor || cell == head
+            }
+            cell.background = borderDrawable(
+                if (selected) 0xFFE8F1FF.toInt() else cell.baseFillColor,
+                if (selected) 0xFF2F80ED.toInt() else Color.LTGRAY,
+                if (selected) 1.5f else 0.5f
+            )
+        }
+    }
+
+    private fun typefaceFor(node: JSONObject): Typeface =
+        when (node.optString("nodeType")) {
+            "h1", "h2", "h3", "h4", "h5", "h6" -> Typeface.DEFAULT_BOLD
+            "codeBlock", "code_block" -> Typeface.MONOSPACE
+            else -> Typeface.DEFAULT
+        }
+
+    private fun textSizeFor(node: JSONObject): Float =
+        when (node.optString("nodeType")) {
+            "h1" -> spToPx(28f)
+            "h2" -> spToPx(24f)
+            "h3" -> spToPx(21f)
+            "h4" -> spToPx(19f)
+            "h5" -> spToPx(17f)
+            "h6" -> spToPx(16f)
+            else -> baseTextSizePx
+        }
+
+    private fun spToPx(value: Float): Float =
+        TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, value, resources.displayMetrics)
+
+    private fun listMarker(nodeType: String?, index: Int): String =
+        when (nodeType) {
+            "orderedList", "ordered_list" -> "$index."
+            "taskList", "task_list" -> "☐"
+            else -> "•"
+        }
+
+    private fun markerView(node: JSONObject, parentListType: String?, index: Int): View {
+        if (parentListType != "taskList" && parentListType != "task_list") {
+            return TextView(context).apply {
+                text = listMarker(parentListType, index)
+                setTextColor(currentTheme?.list?.markerColor ?: baseTextColor)
+                setTextSize(TypedValue.COMPLEX_UNIT_PX, baseTextSizePx)
+                gravity = android.view.Gravity.CENTER_VERTICAL or android.view.Gravity.RIGHT
+                includeFontPadding = false
+            }
+        }
+        val checked = node.optJSONObject("attrs")?.optBoolean("checked", false) ?: false
+        return TextView(context).apply {
+            text = if (checked) "✓" else ""
+            setTextColor(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,
+                4f
+            )
+            setOnClickListener { toggleTaskItem(node) }
+        }
+    }
+
+    private fun toggleTaskItem(node: JSONObject) {
+        if (!isEditable || currentEditorId == 0L) return
+        val textInfo = textRange(node)
+        val docPos = textInfo.docFrom ?: (node.optInt("docPos", 0) + 1)
+        val scalar = editorDocToScalar(currentEditorId.toULong(), docPos.toUInt())
+        val updateJSON = editorToggleTaskItemCheckedAtSelectionScalar(
+            currentEditorId.toULong(),
+            scalar,
+            scalar
+        )
+        applyUpdateJSON(updateJSON, currentEditorId)
+        onAppliedUpdate?.invoke(updateJSON)
+    }
+
+    private fun isHorizontalRule(node: JSONObject): Boolean =
+        node.optString("nodeType") == "horizontalRule" || node.optString("nodeType") == "horizontal_rule"
+
+    private fun borderDrawable(fillColor: Int, strokeColor: Int, strokeDp: Float): GradientDrawable =
+        roundedDrawable(fillColor, strokeColor, strokeDp, 0f)
+
+    private fun roundedDrawable(fillColor: Int, strokeColor: Int, strokeDp: Float, radiusDp: Float): GradientDrawable =
+        GradientDrawable().apply {
+            setColor(fillColor)
+            cornerRadius = radiusDp * resources.displayMetrics.density
+            if (strokeDp > 0f) {
+                setStroke((strokeDp * resources.displayMetrics.density).toInt().coerceAtLeast(1), strokeColor)
+            }
+        }
+}