@apollohg/react-native-rich-text-editor 2.0.0

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

@@ -0,0 +1,234 @@
+package com.apollohg.editor
+
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.DashPathEffect
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
+
+internal object EditorBoxDrawing {
+    fun path(bounds: RectF, corners: EditorCorners): Path {
+        val sums = listOf(
+            corners.topLeft + corners.topRight,
+            corners.bottomLeft + corners.bottomRight,
+            corners.topLeft + corners.bottomLeft,
+            corners.topRight + corners.bottomRight
+        )
+        val scale = minOf(
+            1f,
+            *sums.mapIndexed { index, sum ->
+                if (sum <=
+                    0
+                ) {
+                    1f
+                } else {
+                    (
+                        if (index <
+                            2
+                        ) {
+                            bounds.width()
+                        } else {
+                            bounds.height()
+                        }
+                        ) / sum
+                }
+            }.toFloatArray()
+        ).coerceAtLeast(0f)
+        val radii = listOf(
+            corners.topLeft,
+            corners.topRight,
+            corners.bottomRight,
+            corners.bottomLeft
+        ).flatMap {
+            listOf(it * scale, it * scale)
+        }.toFloatArray()
+        return Path().apply { addRoundRect(bounds, radii, Path.Direction.CW) }
+    }
+
+    fun draw(canvas: Canvas, bounds: RectF, box: EditorBoxStyle) {
+        if (bounds.isEmpty) return
+        val paint = Paint(Paint.ANTI_ALIAS_FLAG)
+        val outer = path(bounds, box.corners)
+        box.backgroundColor?.let {
+            paint.color = it
+            canvas.drawPath(outer, paint)
+        }
+        val innerBounds = RectF(
+            bounds.left + box.border.left,
+            bounds.top + box.border.top,
+            bounds.right - box.border.right,
+            bounds.bottom - box.border.bottom
+        )
+        val inner = path(innerBounds, innerCorners(box))
+        val ring = Path(outer).apply { op(inner, Path.Op.DIFFERENCE) }
+        if (box.borderStyle == "solid" && box.borderColors.distinct().size == 1) {
+            paint.color = box.borderColors.first()
+            canvas.drawPath(ring, paint)
+            return
+        }
+        val widths = listOf(box.border.top, box.border.right, box.border.bottom, box.border.left)
+        // Extend side clips through the rounded inner corners.
+        val horizontal = box.border.left + box.border.right
+        val vertical = box.border.top + box.border.bottom
+        val reach = minOf(
+            if (horizontal >
+                0
+            ) {
+                bounds.width() / horizontal
+            } else {
+                Float.POSITIVE_INFINITY
+            },
+            if (vertical >
+                0
+            ) {
+                bounds.height() / vertical
+            } else {
+                Float.POSITIVE_INFINITY
+            }
+        )
+        if (!reach.isFinite()) return
+        val join = RectF(
+            bounds.left + box.border.left * reach,
+            bounds.top + box.border.top * reach,
+            bounds.right - box.border.right * reach,
+            bounds.bottom - box.border.bottom * reach
+        )
+        val vertices = listOf(
+            floatArrayOf(
+                bounds.left,
+                bounds.top,
+                bounds.right,
+                bounds.top,
+                join.right,
+                join.top,
+                join.left,
+                join.top
+            ),
+            floatArrayOf(
+                bounds.right,
+                bounds.top,
+                bounds.right,
+                bounds.bottom,
+                join.right,
+                join.bottom,
+                join.right,
+                join.top
+            ),
+            floatArrayOf(
+                bounds.right,
+                bounds.bottom,
+                bounds.left,
+                bounds.bottom,
+                join.left,
+                join.bottom,
+                join.right,
+                join.bottom
+            ),
+            floatArrayOf(
+                bounds.left,
+                bounds.bottom,
+                bounds.left,
+                bounds.top,
+                join.left,
+                join.top,
+                join.left,
+                join.bottom
+            )
+        )
+        widths.forEachIndexed { index, width ->
+            if (width <= 0) return@forEachIndexed
+            val saved = canvas.save()
+            canvas.clipPath(ring)
+            val points = vertices[index]
+            val wedge = Path().apply {
+                moveTo(points[0], points[1])
+                for (i in 2..6 step 2) {
+                    lineTo(
+                        points[i],
+                        points[
+                            i +
+                                1
+                        ]
+                    )
+                }
+                close()
+            }
+            canvas.clipPath(wedge)
+            paint.color = box.borderColors[index]
+            if (box.borderStyle == "solid") {
+                paint.style = Paint.Style.FILL
+                canvas.drawPath(outer, paint)
+            } else {
+                paint.style = Paint.Style.STROKE
+                paint.strokeWidth = width * 2f
+                paint.pathEffect =
+                    DashPathEffect(
+                        if (box.borderStyle ==
+                            "dotted"
+                        ) {
+                            floatArrayOf(width, width)
+                        } else {
+                            floatArrayOf(
+                                width * 3f,
+                                width * 2f
+                            )
+                        },
+                        0f
+                    )
+                canvas.drawPath(outer, paint)
+                paint.pathEffect = null
+            }
+            canvas.restoreToCount(saved)
+        }
+    }
+
+    fun innerCorners(box: EditorBoxStyle) = EditorCorners(
+        (box.corners.topLeft - maxOf(box.border.top, box.border.left)).coerceAtLeast(0f),
+        (box.corners.topRight - maxOf(box.border.top, box.border.right)).coerceAtLeast(0f),
+        (box.corners.bottomRight - maxOf(box.border.bottom, box.border.right)).coerceAtLeast(0f),
+        (box.corners.bottomLeft - maxOf(box.border.bottom, box.border.left)).coerceAtLeast(0f)
+    )
+
+    fun drawImage(
+        canvas: Canvas,
+        bitmap: Bitmap,
+        bounds: RectF,
+        box: EditorBoxStyle,
+        resizeMode: String
+    ) {
+        val inner = RectF(
+            bounds.left + box.inset.left,
+            bounds.top + box.inset.top,
+            bounds.right - box.inset.right,
+            bounds.bottom - box.inset.bottom
+        )
+        val saved = canvas.save()
+        canvas.clipPath(path(inner, innerCorners(box)))
+        val target = RectF(inner)
+        if (resizeMode != "stretch") {
+            val scale = if (resizeMode ==
+                "cover"
+            ) {
+                maxOf(inner.width() / bitmap.width, inner.height() / bitmap.height)
+            } else {
+                minOf(inner.width() / bitmap.width, inner.height() / bitmap.height)
+            }
+            val width = bitmap.width * scale
+            val height = bitmap.height * scale
+            target.set(
+                inner.centerX() - width / 2,
+                inner.centerY() - height / 2,
+                inner.centerX() + width / 2,
+                inner.centerY() + height / 2
+            )
+        }
+        canvas.drawBitmap(
+            bitmap,
+            null,
+            target,
+            Paint(Paint.ANTI_ALIAS_FLAG or Paint.FILTER_BITMAP_FLAG)
+        )
+        canvas.restoreToCount(saved)
+    }
+}

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

@@ -0,0 +1,87 @@
+package com.apollohg.editor
+
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
+import android.text.style.ReplacementSpan
+
+internal fun resolvedCheckboxStyle(sheet: EditorStyleSheet, checked: Boolean): EditorElementStyle {
+    val base = EditorElementStyle(
+        EditorTextStyle(),
+        EditorBoxStyle(
+            border = EditorEdges(1f, 1f, 1f, 1f),
+            corners = EditorCorners(3f, 3f, 3f, 3f)
+        ),
+        size = 18f,
+        gap = 6f
+    )
+        .mergedWith(sheet["taskCheckbox"])
+    return if (checked) base.mergedWith(sheet["taskCheckbox"]?.checked) else base
+}
+
+internal fun drawCheckbox(
+    canvas: Canvas,
+    bounds: RectF,
+    box: EditorBoxStyle,
+    checked: Boolean,
+    checkColor: Int
+) {
+    EditorBoxDrawing.draw(canvas, bounds, box)
+    if (!checked) return
+    val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        color = checkColor
+        style = Paint.Style.STROKE
+        strokeWidth =
+            maxOf(1f, bounds.width() * 0.1f)
+        strokeCap = Paint.Cap.ROUND
+        strokeJoin = Paint.Join.ROUND
+    }
+    val path = Path().apply {
+        moveTo(bounds.left + bounds.width() * .22f, bounds.top + bounds.height() * .52f)
+        lineTo(bounds.left + bounds.width() * .43f, bounds.top + bounds.height() * .72f)
+        lineTo(bounds.left + bounds.width() * .8f, bounds.top + bounds.height() * .28f)
+    }
+    canvas.drawPath(path, paint)
+}
+
+internal class EditorCheckboxSpan(
+    private val style: EditorElementStyle,
+    private val checked: Boolean,
+    private val density: Float
+) : ReplacementSpan() {
+    private val size = ((style.size ?: 18f) * density).toInt()
+    override fun getSize(
+        paint: Paint,
+        text: CharSequence,
+        start: Int,
+        end: Int,
+        fm: Paint.FontMetricsInt?
+    ): Int {
+        fm?.let {
+            it.ascent = minOf(it.ascent, -size)
+            it.top = it.ascent
+        }
+        return size
+    }
+    override fun draw(
+        canvas: Canvas,
+        text: CharSequence,
+        start: Int,
+        end: Int,
+        x: Float,
+        top: Int,
+        y: Int,
+        bottom: Int,
+        paint: Paint
+    ) {
+        val center = y + (paint.fontMetrics.ascent + paint.fontMetrics.descent) / 2f
+        drawCheckbox(
+            canvas,
+            RectF(x, center - size / 2f, x + size, center + size / 2f),
+            style.box.scaled(density),
+            checked,
+            style.checkColor ?: paint.color
+        )
+    }
+}

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

@@ -0,0 +1,120 @@
+package com.apollohg.editor
+
+import android.graphics.Color
+import android.graphics.Typeface
+import android.text.Spanned
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+import org.json.JSONObject
+
+data class NativeCodeHighlightingConfig(val provider: String, val theme: String) {
+    companion object {
+        fun fromJson(json: JSONObject?): NativeCodeHighlightingConfig? = json?.let {
+            val provider = it.optNullableString("provider")
+            val theme = it.optNullableString("theme")
+            require(!provider.isNullOrBlank() && !theme.isNullOrBlank()) {
+                "Code highlighting requires provider and theme."
+            }
+            NativeCodeHighlightingConfig(provider, theme)
+        }
+    }
+}
+
+internal class CodeBlockMetadataSpan(val language: String?)
+
+internal class EditorCodeHighlightSpan(private val range: CodeHighlightRange) :
+    MetricAffectingSpan() {
+    override fun updateMeasureState(paint: TextPaint) {
+        if (range.fontStyle and 5 == 0) return
+        val bold = range.fontStyle and 1 != 0 || paint.typeface?.isBold == true
+        val italic = range.fontStyle and 4 != 0 || paint.typeface?.isItalic == true
+        val style = when {
+            bold && italic -> Typeface.BOLD_ITALIC
+            bold -> Typeface.BOLD
+            italic -> Typeface.ITALIC
+            else -> Typeface.NORMAL
+        }
+        paint.typeface = Typeface.create(paint.typeface, style)
+    }
+    override fun updateDrawState(paint: TextPaint) {
+        updateMeasureState(paint)
+        val rgba = range.color
+        paint.color =
+            Color.argb(
+                (rgba and 255).toInt(),
+                ((rgba shr 24) and 255).toInt(),
+                (
+                    (rgba shr 16) and
+                        255
+                    ).toInt(),
+                ((rgba shr 8) and 255).toInt()
+            )
+        if (range.fontStyle and 2 != 0) paint.isUnderlineText = true
+    }
+}
+
+internal fun EditorEditText.setCodeHighlighting(configuration: NativeCodeHighlightingConfig?) {
+    configuration?.let { CodeHighlightingRegistry.provider(it.provider) }
+    if (codeHighlightingConfiguration == configuration) return
+    codeHighlightingConfiguration = configuration
+    refreshCodeHighlighting()
+}
+
+internal fun EditorEditText.refreshCodeHighlighting() {
+    codeHighlightingSession.cancel()
+    val content = text ?: return
+    content.getSpans(
+        0,
+        content.length,
+        EditorCodeHighlightSpan::class.java
+    ).forEach(content::removeSpan)
+    val config = codeHighlightingConfiguration ?: run {
+        invalidate()
+        return
+    }
+    if (!isAttachedToWindow) return
+    val snapshot = content.toString()
+    val blocks = content.getSpans(0, content.length, CodeBlockMetadataSpan::class.java).mapNotNull {
+        val start = content.getSpanStart(it)
+        val end = content.getSpanEnd(it)
+        if (start < 0 ||
+            end <= start
+        ) {
+            null
+        } else {
+            CodeHighlightBlock(start, snapshot.substring(start, end), it.language)
+        }
+    }
+    if (blocks.isEmpty()) return
+    val revision = lastAuthorizedTextRevision
+    codeHighlightingSession.update(config.provider, config.theme, blocks) { result ->
+        if (!isAttachedToWindow || config != codeHighlightingConfiguration ||
+            revision != lastAuthorizedTextRevision ||
+            text?.toString() != snapshot
+        ) {
+            return@update
+        }
+        result.onSuccess { highlighted ->
+            val current = text ?: return@onSuccess
+            current.getSpans(
+                0,
+                current.length,
+                EditorCodeHighlightSpan::class.java
+            ).forEach(current::removeSpan)
+            highlighted.forEach { block ->
+                block.ranges.forEach { range ->
+                    current.setSpan(
+                        EditorCodeHighlightSpan(range),
+                        block.block.start + range.start,
+                        block.block.start + range.start + range.length,
+                        Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+                    )
+                }
+            }
+            requestLayout()
+            invalidate()
+        }.onFailure {
+            android.util.Log.w("NativeEditor", "Code highlighting failed: ${it.message}")
+        }
+    }
+}

package/android/src/main/java/com/apollohg/editor/EditorDecorationLayer.java

@@ -0,0 +1,18 @@
+package com.apollohg.editor;
+
+import android.content.Context;
+import android.widget.FrameLayout;
+import com.facebook.react.uimanager.PointerEvents;
+import com.facebook.react.uimanager.ReactPointerEventsView;
+
+// Java supports both RN's original getter and its Kotlin property interface.
+final class EditorDecorationLayer extends FrameLayout implements ReactPointerEventsView {
+    EditorDecorationLayer(Context context) {
+        super(context);
+    }
+
+    @Override
+    public PointerEvents getPointerEvents() {
+        return PointerEvents.NONE;
+    }
+}