@openeditor/react-native-prose-editor 0.0.9 → 0.0.11

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

@@ -1,15 +1,15 @@
 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.Editable
+import android.text.TextWatcher
 import android.text.style.BackgroundColorSpan
 import android.text.style.ForegroundColorSpan
 import android.text.style.StrikethroughSpan
@@ -19,19 +19,32 @@ import android.text.style.UnderlineSpan
 import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
+import android.view.inputmethod.BaseInputConnection
+import android.view.inputmethod.EditorInfo
+import android.view.inputmethod.InputConnection
+import android.view.inputmethod.InputConnectionWrapper
+import android.view.inputmethod.InputMethodManager
 import android.util.TypedValue
+import android.text.InputType
 import android.widget.ImageView
 import android.widget.LinearLayout
 import android.widget.ScrollView
 import android.widget.TextView
+import androidx.appcompat.widget.AppCompatEditText
 import org.json.JSONObject
 import uniffi.editor_core.editorDocToScalar
+import uniffi.editor_core.editorDeleteBackwardAtSelectionScalar
 import uniffi.editor_core.editorGetSelectionState
+import uniffi.editor_core.editorReplaceSelectionText
 import uniffi.editor_core.editorResizeImageAtDocPos
 import uniffi.editor_core.editorSetCellSelection
 import uniffi.editor_core.editorSetNodeSelection
 import uniffi.editor_core.editorSetSelection
+import uniffi.editor_core.editorSplitBlock
 import uniffi.editor_core.editorToggleTaskItemCheckedAtSelectionScalar
+import uniffi.editor_core.editorUpdateNodeAttrs
+
+internal data class SelectedImageGeometry(val docPos: Int, val rect: RectF)
 
 class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
     var isScrollingEnabled: Boolean = true
@@ -48,8 +61,61 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         val isAtom: Boolean
     )
 
-    private class TextLeaf(context: Context) : TextView(context) {
+    private class TextLeaf(context: Context) : AppCompatEditText(context) {
         var positionSegments: List<PositionSegment> = emptyList()
+        var editorSurface: NativeBlockEditorSurface? = null
+        private var beforeText: String = ""
+        private var compositionBaselineText: String? = null
+        private var beforeSelectionStart: Int = 0
+        private var beforeSelectionEnd: Int = 0
+
+        init {
+            addTextChangedListener(object : TextWatcher {
+                override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
+                    beforeText = s?.toString().orEmpty()
+                    if (editorSurface?.isApplyingRemoteUpdate != true && compositionBaselineText == null) {
+                        compositionBaselineText = beforeText
+                    }
+                    beforeSelectionStart = selectionStart.coerceAtLeast(0)
+                    beforeSelectionEnd = selectionEnd.coerceAtLeast(beforeSelectionStart)
+                }
+
+                override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) = Unit
+
+                override fun afterTextChanged(s: Editable?) {
+                    val surface = editorSurface ?: return
+                    if (surface.isApplyingRemoteUpdate) return
+                    if (s != null && BaseInputConnection.getComposingSpanStart(s) >= 0) return
+                    val baseline = compositionBaselineText ?: beforeText
+                    compositionBaselineText = null
+                    surface.commitLeafTextMutation(this@TextLeaf, baseline, s?.toString().orEmpty())
+                }
+            })
+        }
+
+        override fun onSelectionChanged(selStart: Int, selEnd: Int) {
+            super.onSelectionChanged(selStart, selEnd)
+            editorSurface?.selectionChanged(this, selStart, selEnd)
+        }
+
+        override fun onCreateInputConnection(outAttrs: EditorInfo): InputConnection? {
+            val target = super.onCreateInputConnection(outAttrs) ?: return null
+            return object : InputConnectionWrapper(target, false) {
+                override fun deleteSurroundingText(beforeLength: Int, afterLength: Int): Boolean {
+                    if (beforeLength > 0 && selectionStart == 0 && selectionEnd == 0 &&
+                        editorSurface?.deleteBackwardAtLeafBoundary(this@TextLeaf) == true
+                    ) return true
+                    return super.deleteSurroundingText(beforeLength, afterLength)
+                }
+
+                override fun deleteSurroundingTextInCodePoints(beforeLength: Int, afterLength: Int): Boolean {
+                    if (beforeLength > 0 && selectionStart == 0 && selectionEnd == 0 &&
+                        editorSurface?.deleteBackwardAtLeafBoundary(this@TextLeaf) == true
+                    ) return true
+                    return super.deleteSurroundingTextInCodePoints(beforeLength, afterLength)
+                }
+            }
+        }
 
         fun docPositionForOffset(offset: Int): Int? {
             val segment = positionSegments.firstOrNull {
@@ -82,8 +148,9 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
 
         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 textLength = text?.length ?: 0
+            val offset = nativeOffsetForDocPosition(docPosition)?.coerceIn(0, textLength) ?: return null
+            val lookupOffset = offset.coerceAtMost((textLength - 1).coerceAtLeast(0))
             val line = textLayout.getLineForOffset(lookupOffset)
             val left = compoundPaddingLeft + textLayout.getPrimaryHorizontal(offset)
             return RectF(
@@ -96,8 +163,9 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
 
         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()
+            val textLength = text?.length ?: 0
+            val start = nativeOffsetForDocPosition(from)?.coerceIn(0, textLength) ?: return emptyList()
+            val end = nativeOffsetForDocPosition(to)?.coerceIn(start, textLength) ?: return emptyList()
             if (start == end) return emptyList()
             val firstLine = textLayout.getLineForOffset(start)
             val lastLine = textLayout.getLineForOffset((end - 1).coerceAtLeast(start))
@@ -162,22 +230,117 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
     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
+    var onAppliedUpdate: ((String) -> Unit)? = null
+    var onSelectionChange: ((Int, Int) -> Unit)? = null
+    var onEditorUpdate: ((String) -> Unit)? = null
+    var onFocusChange: ((Boolean) -> Unit)? = null
+    var placeholder: String = ""
         set(value) {
             field = value
-            invalidate()
+            textLeafViews.forEach { updateLeafHint(it) }
         }
-
-    var onAppliedUpdate: ((String) -> Unit)? = null
-    var onRequestTextInput: ((Int) -> Unit)? = null
+    private var configuredAutoCapitalize: String? = null
+    private var configuredAutoCorrect: Boolean? = null
+    private var configuredKeyboardType: String? = null
     var isEditable: Boolean = true
         set(value) {
             field = value
+            textLeafViews.forEach {
+                it.isEnabled = value
+                it.isFocusable = value
+                it.isFocusableInTouchMode = value
+                it.setTextIsSelectable(value)
+            }
             refreshImageSelection()
         }
 
+    internal val activeEditText: AppCompatEditText?
+        get() = textLeafViews.firstOrNull { it.hasFocus() }
+            ?: selectedTextPos?.let { position ->
+                textLeafViews.firstOrNull { it.nativeOffsetForDocPosition(position) != null }
+            }
+            ?: textLeafViews.firstOrNull()
+
+    val isEditorFocused: Boolean get() = textLeafViews.any { it.hasFocus() }
+
+    fun focus(): Boolean {
+        val leaf = activeEditText ?: return false
+        val focused = leaf.requestFocus()
+        if (focused) {
+            context.getSystemService(InputMethodManager::class.java)
+                ?.showSoftInput(leaf, InputMethodManager.SHOW_IMPLICIT)
+        }
+        return focused
+    }
+
+    fun blur() {
+        activeEditText?.clearFocus()
+    }
+
+    fun hasActiveComposition(): Boolean {
+        val editable = activeEditText?.text ?: return false
+        return BaseInputConnection.getComposingSpanStart(editable) >= 0
+    }
+
+    fun currentScalarSelection(): Pair<Int, Int>? {
+        val selection = activeDocSelection() ?: return null
+        if (currentEditorId == 0L) return null
+        return editorDocToScalar(currentEditorId.toULong(), selection.first.toUInt()).toInt() to
+            editorDocToScalar(currentEditorId.toULong(), selection.second.toUInt()).toInt()
+    }
+
+    fun activeDocPositionForUtf16Offset(offset: Int): Int? {
+        val leaf = activeEditText as? TextLeaf ?: return null
+        return leaf.docPositionForOffset(offset)
+    }
+
+    fun setAutoCapitalize(value: String?) {
+        configuredAutoCapitalize = value
+        val flag = when (value) {
+            "none" -> 0
+            "words" -> InputType.TYPE_TEXT_FLAG_CAP_WORDS
+            "characters" -> InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS
+            else -> InputType.TYPE_TEXT_FLAG_CAP_SENTENCES
+        }
+        textLeafViews.forEach { leaf ->
+            leaf.inputType = (leaf.inputType and (
+                InputType.TYPE_TEXT_FLAG_CAP_WORDS or
+                    InputType.TYPE_TEXT_FLAG_CAP_SENTENCES or
+                    InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS
+                ).inv()) or flag
+        }
+    }
+
+    fun setAutoCorrect(enabled: Boolean?) {
+        configuredAutoCorrect = enabled
+        textLeafViews.forEach { leaf ->
+            leaf.inputType = if (enabled == true) {
+                (leaf.inputType and InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS.inv()) or InputType.TYPE_TEXT_FLAG_AUTO_CORRECT
+            } else {
+                (leaf.inputType and InputType.TYPE_TEXT_FLAG_AUTO_CORRECT.inv()) or InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS
+            }
+        }
+    }
+
+    fun setKeyboardType(value: String?) {
+        configuredKeyboardType = value
+        val inputClass = when (value) {
+            "numeric", "number-pad", "decimal-pad" -> InputType.TYPE_CLASS_NUMBER
+            "phone-pad" -> InputType.TYPE_CLASS_PHONE
+            else -> InputType.TYPE_CLASS_TEXT
+        }
+        textLeafViews.forEach { it.inputType = (it.inputType and InputType.TYPE_MASK_CLASS.inv()) or inputClass }
+    }
+
+    private fun activeDocSelection(): Pair<Int, Int>? {
+        val leaf = activeEditText as? TextLeaf ?: return null
+        val start = leaf.selectionStart.coerceAtLeast(0)
+        val end = leaf.selectionEnd.coerceAtLeast(start)
+        val anchor = leaf.docPositionForOffset(start) ?: return null
+        val head = leaf.docPositionForOffset(end) ?: return null
+        return anchor to head
+    }
+
     init {
         isFillViewport = false
         clipToPadding = false
@@ -193,12 +356,6 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
     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) {
@@ -227,10 +384,26 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         val bottomInset = ((theme?.contentInsets?.bottom ?: 0f) * density).toInt()
         val leftInset = ((theme?.contentInsets?.left ?: 0f) * density).toInt()
         setPadding(leftInset, topInset, rightInset, bottomInset)
+        currentRoot?.let { root ->
+            val focusedSelection = activeDocSelection()
+            // Retire the old input connection before replacing themed leaves. Keeping
+            // a detached EditText as the IME target can make Android replay its text
+            // into the newly focused canonical leaf after a uiMode change.
+            if (focusedSelection != null) activeEditText?.clearFocus()
+            isApplyingRemoteUpdate = true
+            rebuildAll(root)
+            refreshTableCellRegistry()
+            isApplyingRemoteUpdate = false
+            focusedSelection?.let { applyNativeSelection(it.first, it.second, true) }
+        }
     }
 
     fun applyUpdateJSON(updateJSON: String, editorId: Long) {
+        val shouldPreserveTextFocus = textLeafViews.any { it.hasFocus() }
         val update = try { JSONObject(updateJSON) } catch (_: Throwable) { return }
+        val textSelection = update.optJSONObject("selection")?.takeIf {
+            it.optString("type") == "text"
+        }?.let { it.optInt("anchor") to it.optInt("head") }
         update.optJSONObject("selection")?.let { selection ->
             selectedNodePos = if (selection.optString("type") == "node") {
                 selection.optInt("pos")
@@ -243,7 +416,11 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
             ) selection.optInt("anchor") else null
             refreshImageSelection()
         }
-        val root = update.optJSONObject("renderTree")?.optJSONObject("root") ?: return
+        val root = update.optJSONObject("renderTree")?.optJSONObject("root")
+        if (root == null) {
+            textSelection?.let { applyNativeSelection(it.first, it.second, shouldPreserveTextFocus) }
+            return
+        }
         currentEditorId = editorId
         isApplyingRemoteUpdate = true
         val operations = update.optJSONObject("renderPatch")?.optJSONArray("operations")
@@ -256,6 +433,7 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         refreshImageSelection()
         currentRoot = root
         isApplyingRemoteUpdate = false
+        textSelection?.let { applyNativeSelection(it.first, it.second, shouldPreserveTextFocus) }
         geometryRevision += 1
         requestLayout()
     }
@@ -345,6 +523,10 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
             rebuildAll(root)
             return
         }
+        if (oldView is TextLeaf) {
+            configureTextLeaf(oldView, node)
+            return
+        }
         val parent = oldView.parent as? ViewGroup ?: run {
             rebuildAll(root)
             return
@@ -429,6 +611,11 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
     internal val topLevelViewCountForTesting: Int
         get() = stack.childCount
 
+    internal fun textColorForTesting(value: String): Int? =
+        textLeafViews.firstOrNull { it.text?.toString() == value }?.currentTextColor
+
+    internal fun tableFillColorsForTesting(): List<Int> = tableCells.map { it.baseFillColor }
+
     private fun viewForNode(node: JSONObject, depth: Int, path: List<Int>): View {
         val rendered = when (node.optString("kind")) {
             "list" -> listView(node, depth, path)
@@ -510,10 +697,6 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
             orientation = LinearLayout.HORIZONTAL
             isBaselineAligned = false
         }
-        row.addView(
-            markerView(node, parentListType, index),
-            LinearLayout.LayoutParams((24 * density).toInt(), (24 * density).toInt())
-        )
         val content = LinearLayout(context).apply {
             orientation = LinearLayout.VERTICAL
             setPadding((8 * density).toInt(), 0, 0, 0)
@@ -525,12 +708,26 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         if (content.childCount == 0) {
             content.addView(textBlockView(node, depth + 1))
         }
+        val marker = if (parentListType == "toggleList" || parentListType == "toggle_list") {
+            val open = node.optJSONObject("attrs")?.optBoolean("open", true) ?: true
+            setToggleContent(content, open)
+            toggleMarkerView(node, content, open)
+        } else {
+            markerView(node, parentListType, index)
+        }
+        row.addView(
+            marker,
+            LinearLayout.LayoutParams((24 * density).toInt(), (24 * density).toInt())
+        )
         row.addView(content, LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f))
         return row
     }
 
     private fun blockContainerView(node: JSONObject, depth: Int, path: List<Int>): View {
         val density = resources.displayMetrics.density
+        if (node.optString("nodeType") == "callout") {
+            return calloutView(node, depth, path)
+        }
         if (node.optString("nodeType") == "blockquote") {
             val row = LinearLayout(context).apply {
                 orientation = LinearLayout.HORIZONTAL
@@ -569,11 +766,95 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         return container
     }
 
+    private fun calloutView(node: JSONObject, depth: Int, path: List<Int>): View {
+        val density = resources.displayMetrics.density
+        val tone = node.optJSONObject("attrs")?.optString("tone", "info") ?: "info"
+        val accent = when (tone) {
+            "success" -> 0xFF16A34A.toInt()
+            "warning" -> 0xFFD97706.toInt()
+            "danger" -> 0xFFDC2626.toInt()
+            else -> 0xFF2563EB.toInt()
+        }
+        val container = LinearLayout(context).apply {
+            orientation = LinearLayout.VERTICAL
+            val padding = (12 * density).toInt()
+            setPadding(padding, padding, padding, padding)
+            background = roundedDrawable(
+                Color.argb(24, Color.red(accent), Color.green(accent), Color.blue(accent)),
+                Color.argb(140, Color.red(accent), Color.green(accent), Color.blue(accent)),
+                1f,
+                10f
+            )
+        }
+        container.addView(TextView(context).apply {
+            text = tone.replaceFirstChar { it.uppercase() }
+            setTextColor(accent)
+            setTextSize(TypedValue.COMPLEX_UNIT_SP, 12f)
+            setTypeface(typeface, Typeface.BOLD)
+            isClickable = this@NativeBlockEditorSurface.isEditable
+            setOnClickListener { cycleCalloutTone(node) }
+        })
+        val children = node.optJSONArray("children")
+        for (index in 0 until (children?.length() ?: 0)) {
+            children?.optJSONObject(index)?.let { container.addView(viewForNode(it, depth + 1, path + index)) }
+        }
+        return container
+    }
+
+    private fun toggleMarkerView(node: JSONObject, content: LinearLayout, initiallyOpen: Boolean): View =
+        TextView(context).apply {
+            var open = initiallyOpen
+            text = if (open) "⌄" else "›"
+            contentDescription = if (open) "Collapse toggle item" else "Expand toggle item"
+            gravity = android.view.Gravity.CENTER
+            setTextColor(currentTheme?.list?.markerColor ?: baseTextColor)
+            setTextSize(TypedValue.COMPLEX_UNIT_SP, 18f)
+            setTypeface(typeface, Typeface.BOLD)
+            setOnClickListener {
+                open = !open
+                text = if (open) "⌄" else "›"
+                contentDescription = if (open) "Collapse toggle item" else "Expand toggle item"
+                setToggleContent(content, open)
+                if (isEditable) updateNodeAttrs(node, JSONObject().put("open", open))
+            }
+        }
+
+    private fun setToggleContent(content: LinearLayout, open: Boolean) {
+        for (index in 1 until content.childCount) {
+            content.getChildAt(index).visibility = if (open) View.VISIBLE else View.GONE
+        }
+    }
+
+    private fun cycleCalloutTone(node: JSONObject) {
+        if (!isEditable) return
+        val tones = listOf("info", "success", "warning", "danger")
+        val current = node.optJSONObject("attrs")?.optString("tone", "info") ?: "info"
+        val next = tones[(tones.indexOf(current).coerceAtLeast(0) + 1) % tones.size]
+        updateNodeAttrs(node, JSONObject().put("tone", next))
+    }
+
+    private fun updateNodeAttrs(node: JSONObject, patch: JSONObject) {
+        if (currentEditorId == 0L) return
+        val attrs = JSONObject(node.optJSONObject("attrs")?.toString() ?: "{}")
+        patch.keys().forEach { key -> attrs.put(key, patch.get(key)) }
+        val updateJSON = editorUpdateNodeAttrs(
+            currentEditorId.toULong(),
+            node.optInt("docPos", 0).toUInt(),
+            attrs.toString()
+        )
+        applyUpdateJSON(updateJSON, currentEditorId)
+        onAppliedUpdate?.invoke(updateJSON)
+    }
+
     private fun tableView(node: JSONObject, path: List<Int>): View {
         val tableId = nextTableId++
         val table = LinearLayout(context).apply {
             orientation = LinearLayout.VERTICAL
-            background = borderDrawable(Color.TRANSPARENT, Color.LTGRAY, 1f)
+            background = borderDrawable(
+                Color.TRANSPARENT,
+                currentTheme?.table?.borderColor ?: baseTextColor,
+                1f
+            )
         }
         val rows = node.optJSONArray("children")
         for (index in 0 until (rows?.length() ?: 0)) {
@@ -599,7 +880,15 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
 
     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 fillColor = if (node.optString("nodeType") == "tableHeader") {
+            currentTheme?.table?.headerBackgroundColor
+                ?: currentTheme?.codeBlock?.backgroundColor
+                ?: Color.TRANSPARENT
+        } else {
+            currentTheme?.table?.cellBackgroundColor
+                ?: currentTheme?.backgroundColor
+                ?: Color.TRANSPARENT
+        }
         val cell = CellView(context).apply {
             docPos = node.optInt("docPos", 0)
             this.tableId = tableId
@@ -610,7 +899,7 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
             setPadding((8 * density).toInt(), (8 * density).toInt(), (8 * density).toInt(), (8 * density).toInt())
             background = borderDrawable(
                 fillColor,
-                Color.LTGRAY,
+                currentTheme?.table?.borderColor ?: baseTextColor,
                 0.5f
             )
             isClickable = true
@@ -628,17 +917,29 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
     }
 
     private fun textBlockView(node: JSONObject, depth: Int): View {
+        return TextLeaf(context).also { configureTextLeaf(it, node) }
+    }
+
+    private fun configureTextLeaf(leaf: TextLeaf, node: JSONObject) {
         val rendered = attributedInlineContent(node)
-        val leaf = TextLeaf(context).apply leaf@ {
+        val hadFocus = leaf.hasFocus()
+        val previousSelectionStart = leaf.selectionStart.coerceAtLeast(0)
+        val previousSelectionEnd = leaf.selectionEnd.coerceAtLeast(previousSelectionStart)
+        leaf.apply leaf@ {
             text = rendered.first
             positionSegments = if (rendered.second.isEmpty()) {
-                listOf(PositionSegment(0, 0, "", node.optInt("docPos", 0), node.optInt("docSize", 0), false))
+                listOf(PositionSegment(0, 0, "", node.optInt("docPos", 0) + if (node.optInt("docSize", 0) >= 2) 1 else 0, 0, false))
             } else {
                 rendered.second
             }
-            setTextColor(baseTextColor)
-            setTextSize(TypedValue.COMPLEX_UNIT_PX, textSizeFor(node))
-            typeface = typefaceFor(node)
+            val style = currentTheme?.effectiveTextStyle(node.optString("nodeType"))
+            setTextColor(style?.color ?: baseTextColor)
+            setTextSize(
+                TypedValue.COMPLEX_UNIT_PX,
+                style?.fontSize?.let(::spToPx) ?: textSizeFor(node)
+            )
+            typeface = style?.let { Typeface.create(it.fontFamily, it.typefaceStyle()) }
+                ?: typefaceFor(node)
             minLines = 1
             background = if (node.optString("nodeType") == "codeBlock" || node.optString("nodeType") == "code_block") {
                 roundedDrawable(
@@ -657,26 +958,59 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
             } 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
+            isEnabled = this@NativeBlockEditorSurface.isEditable
+            isFocusable = this@NativeBlockEditorSurface.isEditable
+            isFocusableInTouchMode = this@NativeBlockEditorSurface.isEditable
+            setTextIsSelectable(this@NativeBlockEditorSurface.isEditable)
+            isSingleLine = false
+            editorSurface = this@NativeBlockEditorSurface
+            updateLeafHint(this)
+            onFocusChangeListener = OnFocusChangeListener { _, focused ->
+                if (focused) onFocusChange?.invoke(true)
+                else if (!this@NativeBlockEditorSurface.isEditorFocused) onFocusChange?.invoke(false)
+            }
+            applyConfiguredInputTraits(this)
+            if (hadFocus) {
+                setSelection(
+                    previousSelectionStart.coerceAtMost(length()),
+                    previousSelectionEnd.coerceAtMost(length())
+                )
             }
         }
-        return leaf
+    }
+
+    private fun updateLeafHint(leaf: TextLeaf) {
+        leaf.hint = if ((textLeafViews.firstOrNull() == null || textLeafViews.firstOrNull() === leaf) && leaf.text.isNullOrEmpty()) {
+            placeholder
+        } else {
+            null
+        }
+    }
+
+    private fun applyConfiguredInputTraits(leaf: TextLeaf) {
+        val capitalFlag = when (configuredAutoCapitalize) {
+            "none" -> 0
+            "words" -> InputType.TYPE_TEXT_FLAG_CAP_WORDS
+            "characters" -> InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS
+            else -> InputType.TYPE_TEXT_FLAG_CAP_SENTENCES
+        }
+        val inputClass = when (configuredKeyboardType) {
+            "numeric", "number-pad", "decimal-pad" -> InputType.TYPE_CLASS_NUMBER
+            "phone-pad" -> InputType.TYPE_CLASS_PHONE
+            else -> InputType.TYPE_CLASS_TEXT
+        }
+        val suggestionFlag = if (configuredAutoCorrect == true) {
+            InputType.TYPE_TEXT_FLAG_AUTO_CORRECT
+        } else {
+            InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS
+        }
+        leaf.inputType = inputClass or capitalFlag or suggestionFlag or InputType.TYPE_TEXT_FLAG_MULTI_LINE
     }
 
     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))
+            listOf(PositionSegment(0, 0, "", node.optInt("docPos", 0) + if (node.optInt("docSize", 0) >= 2) 1 else 0, 0, false))
         } else {
             segments
         }
@@ -779,10 +1113,14 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         }
         return TextView(context).apply {
             text = node.optString("label", node.optString("nodeType", "Block"))
-            setTextColor(Color.DKGRAY)
+            setTextColor(currentTheme?.text?.color ?: baseTextColor)
             textSize = 14f
             setPadding(12, 8, 12, 8)
-            background = borderDrawable(0xFFF2F3F5.toInt(), Color.TRANSPARENT, 0f)
+            background = borderDrawable(
+                currentTheme?.codeBlock?.backgroundColor ?: Color.TRANSPARENT,
+                Color.TRANSPARENT,
+                0f
+            )
         }
     }
 
@@ -800,7 +1138,12 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
                 ?.let { (it * density).toInt() }
             scaleType = ImageView.ScaleType.FIT_CENTER
             adjustViewBounds = true
-            background = roundedDrawable(0xFFF2F3F5.toInt(), Color.TRANSPARENT, 0f, 8f)
+            background = roundedDrawable(
+                currentTheme?.codeBlock?.backgroundColor ?: Color.TRANSPARENT,
+                Color.TRANSPARENT,
+                0f,
+                8f
+            )
             isClickable = true
             setOnClickListener { selectImage(this) }
         }
@@ -834,13 +1177,13 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         }
     }
 
-    internal fun selectedImageGeometry(): EditorEditText.SelectedImageGeometry? {
+    internal fun selectedImageGeometry(): 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))
+        return SelectedImageGeometry(docPos, RectF(rect))
     }
 
     internal fun selectedCaretRect(): RectF? =
@@ -874,6 +1217,80 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         }
     }
 
+    private fun applyNativeSelection(anchor: Int, head: Int, preservingFocus: Boolean) {
+        val candidates = textLeafViews.filter {
+            it.nativeOffsetForDocPosition(anchor) != null &&
+                it.nativeOffsetForDocPosition(head) != null
+        }
+        val leaf = candidates.firstOrNull { it.hasFocus() }
+            ?: (if (anchor == head) candidates.lastOrNull() else candidates.firstOrNull())
+            ?: return
+        val start = leaf.nativeOffsetForDocPosition(minOf(anchor, head)) ?: return
+        val end = leaf.nativeOffsetForDocPosition(maxOf(anchor, head)) ?: return
+        isApplyingRemoteUpdate = true
+        try {
+            leaf.setSelection(start.coerceIn(0, leaf.length()), end.coerceIn(0, leaf.length()))
+            if (preservingFocus && !leaf.hasFocus()) leaf.requestFocus()
+        } finally {
+            isApplyingRemoteUpdate = false
+        }
+    }
+
+    private fun selectionChanged(leaf: TextLeaf, start: Int, end: Int) {
+        if (isApplyingRemoteUpdate || !isEditable || currentEditorId == 0L) return
+        val anchor = leaf.docPositionForOffset(start.coerceAtLeast(0)) ?: return
+        val head = leaf.docPositionForOffset(end.coerceAtLeast(start)) ?: return
+        editorSetSelection(currentEditorId.toULong(), anchor.toUInt(), head.toUInt())
+        onSelectionChange?.invoke(anchor, head)
+        onAppliedUpdate?.invoke(editorGetSelectionState(currentEditorId.toULong()))
+    }
+
+    private fun commitLeafTextMutation(leaf: TextLeaf, before: String, after: String) {
+        if (isApplyingRemoteUpdate || !isEditable || currentEditorId == 0L || before == after) return
+        var prefix = 0
+        val prefixLimit = minOf(before.length, after.length)
+        while (prefix < prefixLimit && before[prefix] == after[prefix]) prefix += 1
+        var suffix = 0
+        while (
+            suffix < before.length - prefix &&
+            suffix < after.length - prefix &&
+            before[before.length - 1 - suffix] == after[after.length - 1 - suffix]
+        ) suffix += 1
+
+        val oldEnd = before.length - suffix
+        val newEnd = after.length - suffix
+        val anchor = leaf.docPositionForOffset(prefix) ?: return
+        val head = leaf.docPositionForOffset(oldEnd) ?: return
+        val replacement = after.substring(prefix, newEnd)
+        editorSetSelection(currentEditorId.toULong(), anchor.toUInt(), head.toUInt())
+        val update = if (replacement == "\n") {
+            if (anchor != head) {
+                editorReplaceSelectionText(currentEditorId.toULong(), "")
+            }
+            editorSplitBlock(currentEditorId.toULong(), anchor.toUInt())
+        } else {
+            editorReplaceSelectionText(currentEditorId.toULong(), replacement)
+        }
+        applyUpdateJSON(update, currentEditorId)
+        onEditorUpdate?.invoke(update)
+        onAppliedUpdate?.invoke(update)
+    }
+
+    private fun deleteBackwardAtLeafBoundary(leaf: TextLeaf): Boolean {
+        if (isApplyingRemoteUpdate || !isEditable || currentEditorId == 0L) return false
+        val docPosition = leaf.docPositionForOffset(0) ?: return false
+        val scalar = editorDocToScalar(currentEditorId.toULong(), docPosition.toUInt())
+        val update = editorDeleteBackwardAtSelectionScalar(
+            currentEditorId.toULong(),
+            scalar,
+            scalar
+        )
+        applyUpdateJSON(update, currentEditorId)
+        onEditorUpdate?.invoke(update)
+        onAppliedUpdate?.invoke(update)
+        return true
+    }
+
     private fun descendantRectInSurface(descendant: View, local: RectF): RectF {
         val origin = Rect(0, 0, 0, 0)
         offsetDescendantRectToMyCoords(descendant, origin)
@@ -993,8 +1410,14 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
                 cell == anchor || cell == head
             }
             cell.background = borderDrawable(
-                if (selected) 0xFFE8F1FF.toInt() else cell.baseFillColor,
-                if (selected) 0xFF2F80ED.toInt() else Color.LTGRAY,
+                if (selected) {
+                    currentTheme?.table?.selectionBackgroundColor ?: cell.baseFillColor
+                } else cell.baseFillColor,
+                if (selected) {
+                    currentTheme?.table?.selectionBorderColor ?: baseTextColor
+                } else {
+                    currentTheme?.table?.borderColor ?: baseTextColor
+                },
                 if (selected) 1.5f else 0.5f
             )
         }