@apollohg/react-native-rich-text-editor 2.0.3 → 2.0.5

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

@@ -101,14 +101,20 @@ internal fun RenderBridge.appendElements(
                     atomId != null,
                     state.blockStack.isEmpty(),
                     state.reusableImages,
-                    state.blockStack.fold(EditorEdges()) { total, block ->
+                    state.blockStack.foldIndexed(EditorEdges()) { index, total, block ->
                         total +
                             (
-                                theme?.styleSheet?.box(block.nodeType)?.outerInset?.scaled(density)
+                                theme?.styleSheet?.box(
+                                    block.nodeType,
+                                    state.blockStack.take(index).map {
+                                        it.nodeType
+                                    }
+                                )?.outerInset?.scaled(density)
                                     ?: EditorEdges()
                                 )
                     },
-                    state.blockStack.size
+                    state.blockStack.size,
+                    state.blockStack.map { it.nodeType }
                 )
             }
 
@@ -279,6 +285,12 @@ internal fun RenderBridge.appendElements(
                 }
 
                 if (markerListContext != null) {
+                    val ownerIndex = state.blockStack.indexOfLast { it.listContext != null }
+                    val markerAncestors = state.blockStack.take(ownerIndex + 1).map { it.nodeType }
+                    val markerStyle = theme?.styleSheet?.resolveElement(
+                        "listMarker",
+                        markerAncestors
+                    )
                     val ordered = markerListContext.optBoolean("ordered", false)
                     val isTask = markerListContext.optString("kind", "") == "task"
                     val visualListDepth = (
@@ -295,34 +307,62 @@ internal fun RenderBridge.appendElements(
                         OrderedListMarkerFormatter.label(
                             index,
                             visualListDepth,
-                            theme?.list?.orderedMarker
+                            markerStyle?.ordered ?: theme?.list?.orderedMarker
                         )
                     } else {
                         null
                     }
                     val marker = listMarkerString(markerListContext)
-                    val markerBaseSize =
-                        resolveTextStyle(
-                            nodeType,
-                            theme,
-                            blockquoteDepth(state.blockStack) > 0
-                        ).fontSize?.times(density) ?: baseFontSize
+                    val markerInBlockquote = blockquoteDepth(state.blockStack) > 0
+                    var markerTextStyle = theme?.styleSheet?.resolveBaseText(
+                        nodeType,
+                        if (markerInBlockquote) listOf("blockquote") else emptyList()
+                    ) ?: resolveTextStyle(
+                        nodeType,
+                        theme,
+                        markerInBlockquote
+                    )
+                    theme?.styleSheet?.let { sheet ->
+                        val ancestors = state.blockStack.dropLast(1).map { it.nodeType }
+                        val resolved = sheet.resolveText(nodeType, ancestors)
+                        markerTextStyle = markerTextStyle.copy(
+                            fontSize = if (sheet.hasMatchingRuleProperty(
+                                    nodeType,
+                                    ancestors,
+                                    "fontSize"
+                                )
+                            ) {
+                                resolved.fontSize
+                            } else {
+                                markerTextStyle.fontSize
+                            },
+                            color = if (sheet.hasMatchingRuleProperty(
+                                    nodeType,
+                                    ancestors,
+                                    "color"
+                                )
+                            ) {
+                                resolved.color
+                            } else {
+                                markerTextStyle.color
+                            }
+                        )
+                    }
+                    val markerBaseSize = markerTextStyle.fontSize?.times(density) ?: baseFontSize
                     val resolvedMarkerBaseSize = if (isTask) {
                         markerBaseSize * LayoutConstants.TASK_LIST_MARKER_FONT_SCALE
                     } else {
                         markerBaseSize
                     }
-                    val markerTextStyle = resolveTextStyle(
-                        nodeType,
-                        theme,
-                        blockquoteDepth(state.blockStack) > 0
-                    )
+                    val markerColor = markerStyle?.text?.color ?: theme?.list?.markerColor
+                        ?: markerTextStyle.color
+                        ?: textColor
                     appendStyledText(
                         state.result,
                         marker,
                         emptyList(),
                         resolvedMarkerBaseSize,
-                        theme?.list?.markerColor ?: textColor,
+                        markerColor,
                         state.blockStack,
                         state.pendingLeadingMargins,
                         null,
@@ -348,7 +388,11 @@ internal fun RenderBridge.appendElements(
                     }
                     val checkbox = if (isTask) {
                         theme?.styleSheet?.let {
-                            resolvedCheckboxStyle(it, markerListContext.optBoolean("checked"))
+                            resolvedCheckboxStyle(
+                                it,
+                                markerListContext.optBoolean("checked"),
+                                markerAncestors
+                            )
                         }
                     } else {
                         null
@@ -367,7 +411,7 @@ internal fun RenderBridge.appendElements(
                     }
                     val markerGapPx =
                         (
-                            checkbox?.gap ?: theme?.list?.markerGap
+                            checkbox?.gap ?: markerStyle?.gap ?: theme?.list?.markerGap
                                 ?: LayoutConstants.LIST_MARKER_TEXT_GAP
                             ) *
                             density
@@ -381,7 +425,7 @@ internal fun RenderBridge.appendElements(
                     }
                     if (ordered && !isTask && presentationLabel != null && marker.endsWith(' ')) {
                         state.result.setSpan(
-                            OrderedListMarkerSpan(presentationLabel),
+                            OrderedListMarkerSpan(presentationLabel, markerColor),
                             markerStart,
                             markerEnd - 1,
                             Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
@@ -389,15 +433,19 @@ internal fun RenderBridge.appendElements(
                     }
                     if (!ordered && !isTask) {
                         val markerScale =
-                            theme?.list?.markerScale
+                            markerStyle?.scale ?: theme?.list?.markerScale
                                 ?: LayoutConstants.UNORDERED_LIST_MARKER_FONT_SCALE
-                        val markerWidth = calculateMarkerWidth(density)
                         val bulletRadius = ((markerBaseSize * markerScale) * 0.16f).coerceAtLeast(
                             2f * density
                         )
+                        val markerWidth = if (theme?.styleSheet != null) {
+                            (bulletRadius * 2f) + markerGapPx
+                        } else {
+                            calculateMarkerWidth(density)
+                        }
                         state.result.setSpan(
                             CenteredBulletSpan(
-                                textColor = theme?.list?.markerColor ?: textColor,
+                                textColor = markerColor,
                                 markerWidthPx = markerWidth,
                                 bulletRadiusPx = bulletRadius,
                                 bodyFontSizePx = resolvedMarkerBaseSize,
@@ -420,6 +468,7 @@ internal fun RenderBridge.appendElements(
 
             "blockEnd" -> {
                 if (state.blockStack.isNotEmpty()) {
+                    val endedAncestors = state.blockStack.dropLast(1).map { it.nodeType }
                     val endedBlock = state.blockStack.removeAt(state.blockStack.lastIndex)
                     appendTrailingHardBreakPlaceholderIfNeeded(
                         builder = state.result,
@@ -434,9 +483,18 @@ internal fun RenderBridge.appendElements(
                     theme?.styleSheet?.let { sheet ->
                         val start = endedBlock.renderStart
                         if (start <= state.result.length) {
-                            val ancestors = state.blockStack.fold(EditorEdges()) { total, block ->
+                            val ancestors = state.blockStack.foldIndexed(EditorEdges()) {
+                                    index,
+                                    total,
+                                    block
+                                ->
                                 total +
-                                    sheet.box(block.nodeType).outerInset.scaled(density)
+                                    sheet.box(
+                                        block.nodeType,
+                                        state.blockStack.take(index).map {
+                                            it.nodeType
+                                        }
+                                    ).outerInset.scaled(density)
                             }
                             val empty = start == state.result.length
                             val flags = if (empty) {
@@ -446,7 +504,7 @@ internal fun RenderBridge.appendElements(
                             }
                             state.result.setSpan(
                                 EditorBlockBoxSpan(
-                                    sheet.box(endedBlock.nodeType).scaled(density),
+                                    sheet.box(endedBlock.nodeType, endedAncestors).scaled(density),
                                     ancestors,
                                     state.blockStack.size,
                                     endedBlock.nodeType

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

@@ -317,7 +317,8 @@ internal fun RenderBridge.appendVoidBlock(
     isDirectRootChild: Boolean,
     reusableImages: MutableList<BlockImageSpan> = mutableListOf(),
     ancestorBoxInset: EditorEdges = EditorEdges(),
-    containerDepth: Int = 0
+    containerDepth: Int = 0,
+    ancestors: List<String> = emptyList()
 ) {
     if (docPos != null && atomConfiguration?.registeredNodeTypes?.contains(nodeType) == true) {
         val start = builder.length
@@ -356,18 +357,21 @@ internal fun RenderBridge.appendVoidBlock(
             val start = builder.length
             builder.append(LayoutConstants.OBJECT_REPLACEMENT_CHARACTER)
             val end = builder.length
-            val ruleColor = theme?.horizontalRule?.color ?: Color.argb(
-                (Color.alpha(textColor) * 0.3f).toInt(),
-                Color.red(textColor),
-                Color.green(textColor),
-                Color.blue(textColor)
-            )
+            val ruleStyle = theme?.styleSheet?.resolveElement("horizontalRule", ancestors)
+            val ruleBox = theme?.styleSheet?.box("horizontalRule", ancestors)
+            val ruleColor =
+                ruleStyle?.box?.backgroundColor ?: theme?.horizontalRule?.color ?: Color.argb(
+                    (Color.alpha(textColor) * 0.3f).toInt(),
+                    Color.red(textColor),
+                    Color.green(textColor),
+                    Color.blue(textColor)
+                )
             builder.setSpan(
                 HorizontalRuleSpan(
                     lineColor = ruleColor,
                     lineHeight =
                         (
-                            theme?.horizontalRule?.thickness
+                            ruleStyle?.height ?: theme?.horizontalRule?.thickness
                                 ?: LayoutConstants.HORIZONTAL_RULE_HEIGHT
                             ) *
                             density,
@@ -378,17 +382,17 @@ internal fun RenderBridge.appendVoidBlock(
                             ) *
                             density,
                     boxInset =
-                        theme?.styleSheet?.box("horizontalRule")?.outerInset?.scaled(density)
+                        ruleBox?.outerInset?.scaled(density)
                             ?: EditorEdges()
                 ),
                 start,
                 end,
                 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
             )
-            theme?.styleSheet?.let {
+            ruleBox?.let { box ->
                 builder.setSpan(
                     EditorBlockBoxSpan(
-                        it.box("horizontalRule").scaled(density),
+                        box.scaled(density),
                         ancestorBoxInset,
                         containerDepth,
                         "horizontalRule"
@@ -417,8 +421,8 @@ internal fun RenderBridge.appendVoidBlock(
             builder.append(LayoutConstants.OBJECT_REPLACEMENT_CHARACTER)
             val end = builder.length
             val imageStyle = theme?.styleSheet?.let {
-                it["image"]
-                    ?: EditorElementStyle(EditorTextStyle(), it.box("image"))
+                it.resolveElement("image", ancestors)
+                    ?: EditorElementStyle(EditorTextStyle(), it.box("image", ancestors))
             }
             val reused = reusableImages.firstOrNull {
                 it.matches(source, preferredWidthDp, preferredHeightDp)
@@ -494,7 +498,17 @@ internal fun RenderBridge.appendOpaqueInlineAtom(
                 )
             )
         builder.setSpan(
-            EditorMentionSpan(resolvedMentionStyle(base, theme, mentionTheme), density),
+            EditorMentionSpan(
+                resolvedMentionStyle(
+                    base,
+                    theme,
+                    mentionTheme,
+                    blockStack.map {
+                        it.nodeType
+                    }
+                ),
+                density
+            ),
             start,
             end,
             Spanned.SPAN_EXCLUSIVE_EXCLUSIVE

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

@@ -106,7 +106,8 @@ class MarkerGapSpan(private val widthPx: Float) : ReplacementSpan() {
     ) = Unit
 }
 
-internal class OrderedListMarkerSpan(internal val label: String) : ReplacementSpan() {
+internal class OrderedListMarkerSpan(internal val label: String, private val textColor: Int) :
+    ReplacementSpan() {
     override fun getSize(
         paint: Paint,
         text: CharSequence,
@@ -126,7 +127,10 @@ internal class OrderedListMarkerSpan(internal val label: String) : ReplacementSp
         bottom: Int,
         paint: Paint
     ) {
+        val previousColor = paint.color
+        paint.color = textColor
         canvas.drawText(label, x, y.toFloat(), paint)
+        paint.color = previousColor
     }
 }
 

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

@@ -946,7 +946,11 @@ class RichTextEditorView @JvmOverloads constructor(
     internal fun selectedImageSpanForResize(): BlockImageSpan? =
         editorEditText.selectedImageSpanForResize()
 
-    internal fun previewImageResize(span: BlockImageSpan, widthPx: Float, heightPx: Float): Boolean {
+    internal fun previewImageResize(
+        span: BlockImageSpan,
+        widthPx: Float,
+        heightPx: Float
+    ): Boolean {
         if (!span.setTemporarySizePx(widthPx, heightPx)) return false
         editorEditText.relayoutImageResizePreview(span)
         return true