@sigx/lynx-richtext 0.4.7

package/android/com/sigx/richtext/SigxRichTextUI.kt

@@ -0,0 +1,537 @@
+package com.sigx.richtext
+
+import android.content.Context
+import android.os.Handler
+import android.os.Looper
+import android.text.Editable
+import android.text.InputType
+import android.text.Spannable
+import android.text.TextWatcher
+import android.util.TypedValue
+import android.view.inputmethod.BaseInputConnection
+import android.view.inputmethod.EditorInfo
+import android.view.inputmethod.InputMethodManager
+import com.lynx.react.bridge.Callback
+import com.lynx.react.bridge.JavaOnlyMap
+import com.lynx.react.bridge.ReadableMap
+import com.lynx.tasm.behavior.LynxContext
+import com.lynx.tasm.behavior.LynxProp
+import com.lynx.tasm.behavior.LynxUIMethod
+import com.lynx.tasm.behavior.LynxUIMethodConstants
+import com.lynx.tasm.behavior.ui.LynxUI
+import com.lynx.tasm.event.LynxDetailEvent
+
+/**
+ * Native UI for the `<sigx-richtext>` JSX element on Android.
+ *
+ * See `SigxRichTextUI.swift` for the full prop/event/method contract and the
+ * IME/echo rules — the two implementations mirror each other 1:1. The model
+ * is carried by the sigx marker spans (`SigxSpans.kt`); native storage is
+ * authoritative after every edit and the model is read back from it.
+ */
+class SigxRichTextUI(context: LynxContext) : LynxUI<RichEditText>(context) {
+
+    private val theme = RichTextTheme()
+    private var localVersion = 0
+    private var userHasEdited = false
+    private var minHeightPx = 0f
+    private var maxHeightPx = 0f
+    private var lastReportedHeight = -1f
+    private var isProgrammaticEdit = false
+
+    /**
+     * Collapsed-selection format toggles, pending until the next typed run —
+     * Android's analogue of iOS `typingAttributes` (true = force on,
+     * false = force off; absent = inherit via span flags).
+     */
+    private val typingOverrides = mutableMapOf<String, Boolean>()
+
+    private var pendingInsertStart = -1
+    private var pendingInsertEnd = -1
+
+    private val mainHandler = Handler(Looper.getMainLooper())
+
+    override fun createView(context: Context): RichEditText {
+        val view = RichEditText(context)
+        // Seed the theme from the view's platform-default color so derived
+        // visuals (code runs, etc.) match until `text-color` overrides it.
+        theme.textColor = view.currentTextColor
+        view.inputType = InputType.TYPE_CLASS_TEXT or
+            InputType.TYPE_TEXT_FLAG_MULTI_LINE or
+            InputType.TYPE_TEXT_FLAG_CAP_SENTENCES
+        view.setHorizontallyScrolling(false)
+
+        view.addTextChangedListener(object : TextWatcher {
+            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = Unit
+
+            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
+                if (isProgrammaticEdit) return
+                if (count > 0) {
+                    pendingInsertStart = start
+                    pendingInsertEnd = start + count
+                } else {
+                    pendingInsertStart = -1
+                    pendingInsertEnd = -1
+                }
+            }
+
+            override fun afterTextChanged(s: Editable?) {
+                if (isProgrammaticEdit || s == null) return
+                applyTypingOverrides(s)
+                userHasEdited = true
+                localVersion += 1
+                reportHeightIfChanged()
+                fireChange(isComposing(s))
+            }
+        })
+
+        view.onSelectionChangedCallback = { start, end ->
+            if (!isProgrammaticEdit) {
+                // A real caret move ends any pending collapsed-toggle session
+                // — but the move caused by typing itself must not, so only
+                // clear when the caret lands outside the just-inserted run.
+                if (pendingInsertEnd < 0 || end != pendingInsertEnd) typingOverrides.clear()
+                fireSelection(start, end)
+            }
+        }
+        return view
+    }
+
+    // ── Prop setters ─────────────────────────────────────────────────────
+
+    /** Initial document; initial-only once the user has edited (see iOS). */
+    @LynxProp(name = "value")
+    fun setValue(value: String?) {
+        if (userHasEdited || value.isNullOrEmpty()) return
+        val parsed = DocumentMapper.parse(value, theme) ?: return
+        isProgrammaticEdit = true
+        mView.text = parsed.text
+        isProgrammaticEdit = false
+        localVersion = parsed.version
+        reportHeightIfChanged()
+    }
+
+    @LynxProp(name = "placeholder")
+    fun setPlaceholder(value: String?) {
+        mView.hint = value ?: ""
+    }
+
+    @LynxProp(name = "editable")
+    fun setEditable(value: Boolean) {
+        mView.isEnabled = value
+        mView.isFocusable = value
+        mView.isFocusableInTouchMode = value
+    }
+
+    @LynxProp(name = "min-height")
+    fun setMinHeight(value: Float) {
+        minHeightPx = value
+        reportHeightIfChanged()
+    }
+
+    @LynxProp(name = "max-height")
+    fun setMaxHeight(value: Float) {
+        maxHeightPx = value
+        reportHeightIfChanged()
+    }
+
+    @LynxProp(name = "font-size")
+    fun setEditorFontSize(value: Float) {
+        if (value <= 0f) return
+        theme.fontSizePx = value
+        mView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, value)
+    }
+
+    @LynxProp(name = "text-color")
+    fun setTextColor(value: String?) {
+        val color = parseColor(value) ?: return
+        theme.textColor = color
+        mView.setTextColor(color)
+    }
+
+    @LynxProp(name = "accent-color")
+    fun setAccentColor(value: String?) {
+        val color = parseColor(value) ?: return
+        theme.accentColor = color
+    }
+
+    @LynxProp(name = "placeholder-color")
+    fun setPlaceholderColor(value: String?) {
+        val color = parseColor(value) ?: return
+        mView.setHintTextColor(color)
+    }
+
+    @LynxProp(name = "confirm-type")
+    fun setConfirmType(value: String?) {
+        mView.imeOptions = when (value) {
+            "send" -> EditorInfo.IME_ACTION_SEND
+            "search" -> EditorInfo.IME_ACTION_SEARCH
+            "next" -> EditorInfo.IME_ACTION_NEXT
+            "go" -> EditorInfo.IME_ACTION_GO
+            "done" -> EditorInfo.IME_ACTION_DONE
+            else -> EditorInfo.IME_ACTION_UNSPECIFIED
+        }
+    }
+
+    @LynxProp(name = "auto-focus")
+    fun setAutoFocus(value: Boolean) {
+        if (!value) return
+        mainHandler.post { focusAndShowIme() }
+    }
+
+    // ── UI methods ───────────────────────────────────────────────────────
+
+    @LynxUIMethod
+    fun setDocument(params: ReadableMap?, callback: Callback?) {
+        val json = params?.getString("doc") ?: ""
+        mainHandler.post {
+            val editable = mView.text
+            // Rule 4: never replace storage mid-composition.
+            if (isComposing(editable)) {
+                fireChange(isComposing = true)
+                callback?.invoke(LynxUIMethodConstants.SUCCESS, resultMap("applied" to false, "reason" to "composing"))
+                return@post
+            }
+            val parsed = DocumentMapper.parse(json, theme)
+            if (parsed == null) {
+                callback?.invoke(LynxUIMethodConstants.UNKNOWN, "setDocument: unparseable doc")
+                return@post
+            }
+            // Rule 3: drop stale writes; re-emit so JS reconciles.
+            if (parsed.version < localVersion) {
+                fireChange(isComposing = false)
+                callback?.invoke(LynxUIMethodConstants.SUCCESS, resultMap("applied" to false, "reason" to "stale"))
+                return@post
+            }
+            // Rule 2: structural no-op suppression (compare canonical readback).
+            val incoming = DocumentMapper.encode(parsed.text, 0)
+            val current = DocumentMapper.encode(editable, 0)
+            if (incoming == current) {
+                localVersion = maxOf(localVersion, parsed.version)
+                callback?.invoke(LynxUIMethodConstants.SUCCESS, resultMap("applied" to false, "reason" to "equal"))
+                return@post
+            }
+            val caret = mView.selectionStart
+            isProgrammaticEdit = true
+            mView.text = parsed.text
+            isProgrammaticEdit = false
+            // The document has diverged from the initial `value` prop — lock
+            // the prop out (initial-only contract), same as a user edit.
+            userHasEdited = true
+            localVersion = maxOf(localVersion, parsed.version)
+            mView.setSelection(caret.coerceIn(0, mView.text.length))
+            reportHeightIfChanged()
+            fireChange(isComposing = false)
+            callback?.invoke(LynxUIMethodConstants.SUCCESS, resultMap("applied" to true))
+        }
+    }
+
+    @LynxUIMethod
+    fun getDocument(params: ReadableMap?, callback: Callback?) {
+        mainHandler.post {
+            val json = DocumentMapper.encode(mView.text, localVersion)
+            callback?.invoke(LynxUIMethodConstants.SUCCESS, resultMap("doc" to json))
+        }
+    }
+
+    @LynxUIMethod
+    fun toggleFormat(params: ReadableMap?, callback: Callback?) {
+        val type = params?.getString("type") ?: ""
+        if (markerClass(type) == null) {
+            callback?.invoke(LynxUIMethodConstants.UNKNOWN, "toggleFormat: unknown type $type")
+            return
+        }
+        mainHandler.post {
+            val editable = mView.text
+            val start = minOf(mView.selectionStart, mView.selectionEnd).coerceAtLeast(0)
+            val end = maxOf(mView.selectionStart, mView.selectionEnd).coerceAtLeast(0)
+            if (start == end) {
+                // Collapsed: tri-state typing override (Android's typingAttributes).
+                val inherited = formatActiveAt(editable, start, type)
+                val current = typingOverrides[type] ?: inherited
+                typingOverrides[type] = !current
+                fireSelection(start, end)
+                callback?.invoke(LynxUIMethodConstants.SUCCESS, resultMap("active" to !current))
+                return@post
+            }
+            val active = rangeFullyHas(editable, type, start, end)
+            isProgrammaticEdit = true
+            if (active) {
+                removeFormatRange(editable, type, start, end)
+            } else {
+                editable.setSpan(newMarker(type), start, end, DocumentMapper.INLINE_FLAGS)
+            }
+            isProgrammaticEdit = false
+            userHasEdited = true
+            localVersion += 1
+            mView.invalidate()
+            fireChange(isComposing = false)
+            fireSelection(start, end)
+            callback?.invoke(LynxUIMethodConstants.SUCCESS, resultMap("active" to !active))
+        }
+    }
+
+    @LynxUIMethod
+    fun setBlockType(params: ReadableMap?, callback: Callback?) {
+        val type = params?.getString("type") ?: "paragraph"
+        val level = if (params?.hasKey("level") == true) params.getInt("level") else 0
+        mainHandler.post {
+            val editable = mView.text
+            val caretStart = minOf(mView.selectionStart, mView.selectionEnd).coerceAtLeast(0)
+            val caretEnd = maxOf(mView.selectionStart, mView.selectionEnd).coerceAtLeast(0)
+            val (pStart, pEnd) = DocumentMapper.snapToParagraph(editable, caretStart, caretEnd)
+            isProgrammaticEdit = true
+            for (span in editable.getSpans(pStart, pEnd, SigxBlockSpan::class.java)) {
+                editable.removeSpan(span)
+            }
+            if (type != "paragraph") {
+                editable.setSpan(SigxBlockSpan(type, level), pStart, pEnd, Spannable.SPAN_PARAGRAPH)
+            }
+            isProgrammaticEdit = false
+            userHasEdited = true
+            localVersion += 1
+            mView.invalidate()
+            mView.requestLayout()
+            reportHeightIfChanged()
+            fireChange(isComposing = false)
+            fireSelection(caretStart, caretEnd)
+            callback?.invoke(LynxUIMethodConstants.SUCCESS)
+        }
+    }
+
+    @LynxUIMethod
+    fun insertText(params: ReadableMap?, callback: Callback?) {
+        val text = params?.getString("text") ?: ""
+        if (text.isEmpty()) {
+            callback?.invoke(LynxUIMethodConstants.SUCCESS)
+            return
+        }
+        mainHandler.post {
+            val editable = mView.text
+            if (isComposing(editable)) {
+                callback?.invoke(LynxUIMethodConstants.SUCCESS, resultMap("applied" to false, "reason" to "composing"))
+                return@post
+            }
+            val start = minOf(mView.selectionStart, mView.selectionEnd).coerceAtLeast(0)
+            val end = maxOf(mView.selectionStart, mView.selectionEnd).coerceAtLeast(0)
+            // Goes through the TextWatcher (not flagged programmatic) so typing
+            // overrides apply and change/height fire exactly like typed input.
+            editable.replace(start, end, text)
+            callback?.invoke(LynxUIMethodConstants.SUCCESS, resultMap("applied" to true))
+        }
+    }
+
+    @LynxUIMethod
+    fun setSelectionRange(params: ReadableMap?, callback: Callback?) {
+        val start = params?.getInt("start") ?: 0
+        val end = if (params?.hasKey("end") == true) params.getInt("end") else start
+        mainHandler.post {
+            val upper = mView.text.length
+            mView.setSelection(start.coerceIn(0, upper), end.coerceIn(0, upper))
+            callback?.invoke(LynxUIMethodConstants.SUCCESS)
+        }
+    }
+
+    @LynxUIMethod
+    fun focus(params: ReadableMap?, callback: Callback?) {
+        mainHandler.post {
+            focusAndShowIme()
+            callback?.invoke(LynxUIMethodConstants.SUCCESS)
+        }
+    }
+
+    @LynxUIMethod
+    fun blur(params: ReadableMap?, callback: Callback?) {
+        mainHandler.post {
+            mView.clearFocus()
+            val imm = mView.context.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
+            imm?.hideSoftInputFromWindow(mView.windowToken, 0)
+            callback?.invoke(LynxUIMethodConstants.SUCCESS)
+        }
+    }
+
+    // ── Events ───────────────────────────────────────────────────────────
+
+    private fun fireEvent(name: String, params: Map<String, Any?>) {
+        val event = LynxDetailEvent(sign, name)
+        for ((k, v) in params) event.addDetail(k, v)
+        lynxContext.eventEmitter.sendCustomEvent(event)
+    }
+
+    private fun fireChange(isComposing: Boolean) {
+        val json = DocumentMapper.encode(mView.text, localVersion)
+        fireEvent("change", mapOf("doc" to json, "isComposing" to isComposing))
+    }
+
+    private fun fireSelection(start: Int, end: Int) {
+        val editable = mView.text
+        val formats = mutableListOf<String>()
+        for (type in listOf("bold", "italic", "strike", "code")) {
+            val active = if (start == end) {
+                typingOverrides[type] ?: formatActiveAt(editable, start, type)
+            } else {
+                rangeFullyHas(editable, type, start, end)
+            }
+            if (active) formats.add(type)
+        }
+        if (editable.getSpans(start, maxOf(start, end), SigxLinkSpan::class.java).isNotEmpty()) {
+            formats.add("link")
+        }
+
+        var activeBlock = "paragraph"
+        var headingLevel: Int? = null
+        val blockSpans = editable.getSpans(start, maxOf(start, end), SigxBlockSpan::class.java)
+        if (blockSpans.isNotEmpty()) {
+            activeBlock = blockSpans[0].type
+            if (blockSpans[0].level > 0) headingLevel = blockSpans[0].level
+        }
+
+        val density = mView.resources.displayMetrics.density
+        var caretX = 0f
+        var caretY = 0f
+        var caretH = 0f
+        mView.layout?.let { layout ->
+            val pos = end.coerceIn(0, editable.length)
+            val line = layout.getLineForOffset(pos)
+            caretX = (layout.getPrimaryHorizontal(pos) + mView.paddingLeft) / density
+            caretY = (layout.getLineTop(line) + mView.paddingTop - mView.scrollY) / density
+            caretH = (layout.getLineBottom(line) - layout.getLineTop(line)) / density
+        }
+
+        val params = mutableMapOf<String, Any?>(
+            "start" to start,
+            "end" to end,
+            "activeFormats" to formats.joinToString(","),
+            "activeBlock" to activeBlock,
+            "caretX" to caretX,
+            "caretY" to caretY,
+            "caretHeight" to caretH,
+        )
+        if (headingLevel != null) params["headingLevel"] = headingLevel
+        fireEvent("selection", params)
+    }
+
+    private fun reportHeightIfChanged() {
+        val density = mView.resources.displayMetrics.density
+        val content = mView.contentHeight() / density
+        val clamped = maxOf(minHeightPx, if (maxHeightPx > 0f) minOf(content, maxHeightPx) else content)
+        if (kotlin.math.abs(clamped - lastReportedHeight) >= 0.5f) {
+            lastReportedHeight = clamped
+            val lines = mView.lineCount.coerceAtLeast(1)
+            fireEvent("heightchange", mapOf("height" to clamped, "lines" to lines))
+        }
+    }
+
+    // ── Helpers ──────────────────────────────────────────────────────────
+
+    private fun focusAndShowIme() {
+        mView.requestFocus()
+        val imm = mView.context.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
+        imm?.showSoftInput(mView, InputMethodManager.SHOW_IMPLICIT)
+    }
+
+    private fun isComposing(editable: Editable): Boolean =
+        BaseInputConnection.getComposingSpanStart(editable) >= 0
+
+    private fun applyTypingOverrides(editable: Editable) {
+        if (typingOverrides.isEmpty() || pendingInsertStart < 0 || pendingInsertEnd <= pendingInsertStart) return
+        val start = pendingInsertStart.coerceIn(0, editable.length)
+        val end = pendingInsertEnd.coerceIn(start, editable.length)
+        isProgrammaticEdit = true
+        for ((type, on) in typingOverrides) {
+            if (on) {
+                if (!rangeFullyHas(editable, type, start, end)) {
+                    editable.setSpan(newMarker(type), start, end, DocumentMapper.INLINE_FLAGS)
+                }
+            } else {
+                removeFormatRange(editable, type, start, end)
+            }
+        }
+        isProgrammaticEdit = false
+    }
+
+    private fun markerClass(type: String): Class<*>? = when (type) {
+        "bold" -> SigxBoldSpan::class.java
+        "italic" -> SigxItalicSpan::class.java
+        "strike" -> SigxStrikeSpan::class.java
+        "code" -> SigxCodeSpan::class.java
+        else -> null
+    }
+
+    private fun newMarker(type: String): Any = when (type) {
+        "bold" -> SigxBoldSpan()
+        "italic" -> SigxItalicSpan()
+        "strike" -> SigxStrikeSpan()
+        "code" -> SigxCodeSpan(theme.codeBackground)
+        else -> throw IllegalArgumentException("unknown inline format: $type")
+    }
+
+    private fun formatActiveAt(editable: Editable, offset: Int, type: String): Boolean {
+        val cls = markerClass(type) ?: return false
+        // The char *before* the caret carries typing inheritance (iOS parity).
+        val probe = (offset - 1).coerceAtLeast(0)
+        return editable.getSpans(probe, offset, cls).any {
+            editable.getSpanStart(it) < offset && editable.getSpanEnd(it) >= offset
+        }
+    }
+
+    private fun rangeFullyHas(editable: Editable, type: String, start: Int, end: Int): Boolean {
+        val cls = markerClass(type) ?: return false
+        if (end <= start) return false
+        var covered = 0
+        val ranges = editable.getSpans(start, end, cls)
+            .map { maxOf(editable.getSpanStart(it), start) to minOf(editable.getSpanEnd(it), end) }
+            .filter { it.second > it.first }
+            .sortedBy { it.first }
+        var cursor = start
+        for ((s, e) in ranges) {
+            if (s > cursor) return false
+            covered += e - maxOf(s, cursor)
+            cursor = maxOf(cursor, e)
+        }
+        return cursor >= end && covered > 0
+    }
+
+    /** Remove a format from [start, end), splitting spans that extend past it. */
+    private fun removeFormatRange(editable: Editable, type: String, start: Int, end: Int) {
+        val cls = markerClass(type) ?: return
+        for (span in editable.getSpans(start, end, cls)) {
+            val s = editable.getSpanStart(span)
+            val e = editable.getSpanEnd(span)
+            editable.removeSpan(span)
+            if (s < start) editable.setSpan(newMarker(type), s, start, DocumentMapper.INLINE_FLAGS)
+            if (e > end) editable.setSpan(newMarker(type), end, e, DocumentMapper.INLINE_FLAGS)
+        }
+    }
+
+    private fun resultMap(vararg pairs: Pair<String, Any?>): JavaOnlyMap {
+        val map = JavaOnlyMap()
+        for ((k, v) in pairs) {
+            when (v) {
+                is Boolean -> map.putBoolean(k, v)
+                is Int -> map.putInt(k, v)
+                is String -> map.putString(k, v)
+                is Double -> map.putDouble(k, v)
+                null -> map.putNull(k)
+                else -> map.putString(k, v.toString())
+            }
+        }
+        return map
+    }
+
+    private fun parseColor(value: String?): Int? {
+        val raw = value?.trim()?.removePrefix("#") ?: return null
+        if (raw.isEmpty()) return null
+        return try {
+            when (raw.length) {
+                3 -> android.graphics.Color.parseColor("#" + raw.map { "$it$it" }.joinToString(""))
+                6 -> android.graphics.Color.parseColor("#$raw")
+                // #RRGGBBAA → Android wants #AARRGGBB.
+                8 -> android.graphics.Color.parseColor("#" + raw.substring(6, 8) + raw.substring(0, 6))
+                else -> null
+            }
+        } catch (_: IllegalArgumentException) {
+            null
+        }
+    }
+}

package/android/com/sigx/richtext/SigxSpans.kt

@@ -0,0 +1,87 @@
+package com.sigx.richtext
+
+import android.graphics.Typeface
+import android.text.TextPaint
+import android.text.style.CharacterStyle
+import android.text.style.MetricAffectingSpan
+import android.text.style.StrikethroughSpan
+import android.text.style.StyleSpan
+
+/**
+ * Marker spans — the *model* lives in the span classes themselves.
+ *
+ * Each sigx span both marks a model fact (bold/italic/…) and draws its visual,
+ * so readback only has to enumerate these classes: a heading's bold paint
+ * never reads back as a `bold` span because only [SigxBoldSpan] produces one.
+ * (Mirrors the custom-attribute scheme on iOS.)
+ *
+ * Spans move with edits exactly like any Android span; inline spans use
+ * `SPAN_EXCLUSIVE_INCLUSIVE` so typing at a format's trailing edge extends it
+ * (and at the leading edge does not) — matching iOS `typingAttributes`
+ * inheritance.
+ */
+
+class SigxBoldSpan : StyleSpan(Typeface.BOLD)
+
+class SigxItalicSpan : StyleSpan(Typeface.ITALIC)
+
+class SigxStrikeSpan : StrikethroughSpan()
+
+/** Inline code: monospace, slightly smaller, subtle background. */
+class SigxCodeSpan(private val backgroundColor: Int) : MetricAffectingSpan() {
+    override fun updateMeasureState(paint: TextPaint) = apply(paint)
+    override fun updateDrawState(paint: TextPaint) {
+        apply(paint)
+        paint.bgColor = backgroundColor
+    }
+
+    private fun apply(paint: TextPaint) {
+        paint.typeface = Typeface.MONOSPACE
+        paint.textSize = paint.textSize * 0.95f
+    }
+}
+
+/** Link: accent color + underline. Carries the href (the model payload). */
+class SigxLinkSpan(val href: String, private val color: Int) : CharacterStyle() {
+    override fun updateDrawState(paint: TextPaint) {
+        paint.color = color
+        paint.isUnderlineText = true
+    }
+}
+
+/** Mention chip placeholder (P3 — atomic rendering lands with ReplacementSpan). */
+class SigxMentionSpan(val attrs: Map<String, String>, private val color: Int) : CharacterStyle() {
+    override fun updateDrawState(paint: TextPaint) {
+        paint.color = color
+        paint.isUnderlineText = true
+    }
+}
+
+/**
+ * Paragraph-level block style. Applied with `SPAN_PARAGRAPH` over line ranges;
+ * headings scale + embolden the paint.
+ */
+class SigxBlockSpan(
+    val type: String,
+    val level: Int = 0,
+    val checked: Boolean = false,
+) : MetricAffectingSpan() {
+
+    override fun updateMeasureState(paint: TextPaint) = apply(paint)
+    override fun updateDrawState(paint: TextPaint) = apply(paint)
+
+    private fun apply(paint: TextPaint) {
+        if (type == "heading") {
+            val (scale, bold) = when (level) {
+                1 -> 1.75f to true
+                2 -> 1.5f to true
+                3 -> 1.25f to true
+                else -> 1.1f to true
+            }
+            paint.textSize = paint.textSize * scale
+            if (bold) paint.typeface = Typeface.create(paint.typeface, Typeface.BOLD)
+        } else if (type == "codeBlock") {
+            paint.typeface = Typeface.MONOSPACE
+        }
+    }
+}

package/dist/RichTextInput.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `<RichTextInput>` — typed SignalX wrapper over the native `<sigx-richtext>`
+ * element.
+ *
+ * This is the *generic* attributed-text input: it knows nothing about
+ * markdown. `@sigx/lynx-markdown`'s `MarkdownEditor` builds the markdown
+ * mapping, toolbar, and plugin system on top of it.
+ *
+ * Events are decoded into typed shapes (`RichDoc`, `SelectionState`) before
+ * reaching handlers; commands go through {@link RichTextMethods} with the
+ * element handle delivered via `onElement`.
+ */
+import { type Define } from '@sigx/lynx';
+import './jsx-augment.js';
+import type { RichDoc, SelectionState } from './model/types.js';
+import type { RichTextHandle } from './methods.js';
+export type RichTextInputProps = Define.Prop<'value', RichDoc | string, false> & Define.Prop<'placeholder', string, false> & Define.Prop<'editable', boolean, false> & Define.Prop<'minHeight', number, false> & Define.Prop<'maxHeight', number, false> & Define.Prop<'fontSize', number, false> & Define.Prop<'textColor', string, false> & Define.Prop<'accentColor', string, false> & Define.Prop<'placeholderColor', string, false> & Define.Prop<'confirmType', 'send' | 'search' | 'next' | 'go' | 'done', false> & Define.Prop<'autoFocus', boolean, false> & Define.Prop<'class', string, false> & Define.Prop<'style', string | Record<string, string | number>, false>
+/** Receives the BG element handle for {@link RichTextMethods} commands. */
+ & Define.Prop<'onElement', (el: RichTextHandle) => void, false> & Define.Prop<'onChange', (doc: RichDoc, isComposing: boolean) => void, false> & Define.Prop<'onSelection', (sel: SelectionState) => void, false> & Define.Prop<'onHeightChange', (height: number, lines: number) => void, false> & Define.Prop<'onFocus', () => void, false> & Define.Prop<'onBlur', () => void, false>;
+export declare const RichTextInput: import("@sigx/runtime-core").ComponentFactory<RichTextInputProps, void, {}>;

package/dist/RichTextInput.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<RichTextInput>` — typed SignalX wrapper over the native `<sigx-richtext>`
+ * element.
+ *
+ * This is the *generic* attributed-text input: it knows nothing about
+ * markdown. `@sigx/lynx-markdown`'s `MarkdownEditor` builds the markdown
+ * mapping, toolbar, and plugin system on top of it.
+ *
+ * Events are decoded into typed shapes (`RichDoc`, `SelectionState`) before
+ * reaching handlers; commands go through {@link RichTextMethods} with the
+ * element handle delivered via `onElement`.
+ */
+import { component } from '@sigx/lynx';
+import './jsx-augment.js';
+import { decodeDoc } from './model/codec.js';
+export const RichTextInput = component(({ props }) => {
+    const handleChange = (e) => {
+        props.onChange?.(decodeDoc(e.detail.doc), !!e.detail.isComposing);
+    };
+    const handleSelection = (e) => {
+        const d = e.detail;
+        props.onSelection?.({
+            start: d.start,
+            end: d.end,
+            activeFormats: parseFormats(d.activeFormats),
+            activeBlock: (d.activeBlock || 'paragraph'),
+            ...(d.headingLevel !== undefined ? { headingLevel: d.headingLevel } : {}),
+            caretRect: { x: d.caretX ?? 0, y: d.caretY ?? 0, height: d.caretHeight ?? 0 },
+        });
+    };
+    const handleHeight = (e) => {
+        props.onHeightChange?.(e.detail.height, e.detail.lines);
+    };
+    return () => (_jsx("sigx-richtext", { ref: (el) => props.onElement?.(el), value: typeof props.value === 'string' ? props.value : props.value ? JSON.stringify(props.value) : undefined, placeholder: props.placeholder, editable: props.editable, "min-height": props.minHeight, "max-height": props.maxHeight, "font-size": props.fontSize, "text-color": props.textColor, "accent-color": props.accentColor, "placeholder-color": props.placeholderColor, "confirm-type": props.confirmType, "auto-focus": props.autoFocus, class: props.class, style: props.style, bindchange: handleChange, bindselection: handleSelection, bindheightchange: handleHeight, bindfocus: () => props.onFocus?.(), bindblur: () => props.onBlur?.() }));
+});
+function parseFormats(raw) {
+    if (!raw)
+        return [];
+    return raw.split(',').filter(Boolean);
+}