@apollohg/react-native-rich-text-editor 2.0.4 → 2.0.6

package/README.md

@@ -18,6 +18,17 @@ See the [documentation](https://github.com/apollohg/react-native-rich-text-edito
 **⭐ Optional native code syntax highlighting**  
 **⭐ Rich copy and paste**  
 
+## Roadmap
+
+Below is a list of features that are planned or in progress. If you have a feature/idea suggestion, please [add it to the discussion](https://github.com/apollohg/react-native-rich-text-editor/discussions/4).
+
+- [x] External text composition
+- [x] Custom atoms via React Native components
+- [ ] Tables *(in progress)*
+- [ ] Output as Markdown/GitHub Flavored Markdown (GFM)
+- [ ] Extension framework
+- [ ] Inline node extensions
+
 ## Requirements
 
 The package uses custom native code and Expo Modules. Use a development build or a bare React Native app with Expo Modules configured; it does not run in Expo Go.

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

@@ -6,7 +6,12 @@ import android.graphics.Path
 import android.graphics.RectF
 import android.text.style.ReplacementSpan
 
-internal fun resolvedCheckboxStyle(sheet: EditorStyleSheet, checked: Boolean): EditorElementStyle {
+internal fun resolvedCheckboxStyle(
+    sheet: EditorStyleSheet,
+    checked: Boolean,
+    ancestors: List<String> = emptyList()
+): EditorElementStyle {
+    val resolved = sheet.resolveElement("taskCheckbox", ancestors)
     val base = EditorElementStyle(
         EditorTextStyle(),
         EditorBoxStyle(
@@ -16,8 +21,8 @@ internal fun resolvedCheckboxStyle(sheet: EditorStyleSheet, checked: Boolean): E
         size = 18f,
         gap = 6f
     )
-        .mergedWith(sheet["taskCheckbox"])
-    return if (checked) base.mergedWith(sheet["taskCheckbox"]?.checked) else base
+        .mergedWith(resolved)
+    return if (checked) base.mergedWith(resolved?.checked) else base
 }
 
 internal fun drawCheckbox(

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

@@ -75,7 +75,11 @@ internal fun EditorEditText.applyThemeImpl(theme: EditorTheme?) {
         background =
             EditorBoxDrawable(it.box("content").scaled(resources.displayMetrics.density))
     }
-    applyContentInsets(theme?.contentInsets)
+    val content = theme?.styleSheet?.box("content", emptyList())?.outerInset
+    applyContentInsets(
+        content?.let { EditorContentInsets(it.top, it.right, it.bottom, it.left) }
+            ?: theme?.contentInsets
+    )
     if (hasLiveEditor()) {
         val previousScrollX = scrollX
         val previousScrollY = scrollY

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

@@ -22,7 +22,7 @@ internal fun EditorEditText.performToolbarToggleListImpl(listType: String, isAct
         val update = if (isActive) {
             driver.unwrapFromList(selection.first, selection.second)
         } else {
-            driver.wrapInList(listType, selection.first, selection.second)
+            driver.applyListType(listType, selection.first, selection.second)
         }
         update?.let { applyUpdateJSON(it) }
     }

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

@@ -81,7 +81,8 @@ internal fun EditorElementStyle.mergedWith(other: EditorElementStyle?): EditorEl
 internal fun resolvedMentionStyle(
     base: EditorTextStyle,
     theme: EditorTheme?,
-    local: EditorMentionTheme?
+    local: EditorMentionTheme?,
+    ancestors: List<String> = emptyList()
 ): EditorElementStyle {
     var result = EditorElementStyle(
         base,
@@ -91,7 +92,7 @@ internal fun resolvedMentionStyle(
             corners = EditorCorners(6f, 6f, 6f, 6f)
         )
     )
-        .mergedWith(theme?.styleSheet?.get("mention"))
+        .mergedWith(theme?.styleSheet?.resolveElement("mention", ancestors))
     listOf(theme?.mentions?.node, local?.node).forEach { node ->
         if (node != null) {
             result = result.copy(

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

@@ -71,13 +71,32 @@ data class EditorElementStyle(
     val declaredProperties: Set<String> = emptySet()
 )
 
-class EditorStyleSheet private constructor(val styles: Map<String, EditorElementStyle>) {
+private data class EditorStyleRule(val path: List<String>, val style: JSONObject)
+
+class EditorStyleSheet private constructor(
+    val styles: Map<String, EditorElementStyle>,
+    private val rules: List<EditorStyleRule> = emptyList()
+) {
     operator fun get(element: String): EditorElementStyle? = styles[canonicalElement(element)]
 
-    fun resolveText(
+    fun resolveElement(
         element: String,
-        ancestors: List<String> = emptyList(),
-        marks: List<String> = emptyList()
+        ancestors: List<String> = emptyList()
+    ): EditorElementStyle? {
+        val name = canonicalMark(canonicalElement(element))
+        val matches = matchingRules(name, ancestors)
+        val existing = this[name]
+        if (matches.isEmpty()) return existing
+        var result = existing ?: decodeElement(JSONObject(), defaultBox(name))
+        for (rule in matches) {
+            result = result.overlaidWith(decodeElement(rule.style, result.box), rule.style)
+        }
+        return result
+    }
+
+    internal fun resolveBaseText(
+        element: String,
+        ancestors: List<String> = emptyList()
     ): EditorTextStyle {
         val name = canonicalElement(element)
         var result = EditorTextStyle().mergedWith(this["text"]?.text)
@@ -85,18 +104,54 @@ class EditorStyleSheet private constructor(val styles: Map<String, EditorElement
         ancestors.forEach {
             result = result.mergedWith(this[it]?.text?.copy(backgroundColor = null))
         }
-        result = result.mergedWith(this[name]?.text?.copy(backgroundColor = null))
+        return result.mergedWith(this[name]?.text?.copy(backgroundColor = null))
+    }
+
+    fun resolveText(
+        element: String,
+        ancestors: List<String> = emptyList(),
+        marks: List<String> = emptyList()
+    ): EditorTextStyle {
+        val name = canonicalElement(element)
+        var result = resolveBaseText(name, ancestors)
+        matchingRules(name, ancestors).forEach {
+            result =
+                result.mergedWith(EditorTextStyle.fromJson(it.style)?.copy(backgroundColor = null))
+        }
         val active = marks.map(::canonicalMark).toSet()
         listOf("inlineCode", "bold", "italic", "link", "underline", "strike").filter {
             it in active
         }.forEach {
             result = result.mergedWith(semanticText(it)).mergedWith(this[it]?.text)
+            matchingRules(it, ancestors + name).forEach { rule ->
+                result = result.mergedWith(EditorTextStyle.fromJson(rule.style))
+            }
         }
         return result
     }
 
-    fun box(element: String): EditorBoxStyle =
-        this[element]?.box ?: defaultBox(canonicalElement(element))
+    fun box(element: String): EditorBoxStyle = box(element, emptyList())
+
+    fun box(element: String, ancestors: List<String>): EditorBoxStyle {
+        var result = this[element]?.box ?: defaultBox(canonicalElement(element))
+        for (rule in matchingRules(element, ancestors)) {
+            result = decodeElement(rule.style, result).box
+        }
+        return result
+    }
+
+    internal fun hasMatchingRuleProperty(
+        element: String,
+        ancestors: List<String>,
+        property: String
+    ): Boolean = matchingRules(element, ancestors).any { it.style.has(property) }
+
+    private fun matchingRules(element: String, ancestors: List<String>): List<EditorStyleRule> {
+        val chain = (ancestors + element).map { canonicalMark(canonicalElement(it)) }
+        return rules.filter { rule ->
+            rule.path.size <= chain.size && chain.takeLast(rule.path.size) == rule.path
+        }
+    }
 
     companion object {
         internal fun decodeTheme(root: JSONObject): EditorTheme? {
@@ -110,7 +165,8 @@ class EditorStyleSheet private constructor(val styles: Map<String, EditorElement
             val sheet = EditorStyleSheet(
                 values.keys().asSequence().associateWith { name ->
                     decodeElement(values.getJSONObject(name), defaultBox(name))
-                }
+                },
+                decodeRules(root)
             )
             val content = sheet.box("content").outerInset
             val marker = sheet["listMarker"]
@@ -160,6 +216,27 @@ class EditorStyleSheet private constructor(val styles: Map<String, EditorElement
             )
         }
 
+        private fun decodeRules(root: JSONObject): List<EditorStyleRule> {
+            val values = root.optJSONArray("rules") ?: return emptyList()
+            return buildList {
+                for (index in 0 until values.length()) {
+                    val entry = values.optJSONObject(index) ?: continue
+                    val pathValues = entry.optJSONArray("path") ?: continue
+                    if (pathValues.length() == 0) continue
+                    val path = mutableListOf<String>()
+                    for (pathIndex in 0 until pathValues.length()) {
+                        val raw = pathValues.opt(pathIndex) as? String ?: break
+                        val name = canonicalMark(canonicalElement(raw))
+                        if (name !in STYLE_NAMES) break
+                        path.add(name)
+                    }
+                    if (path.size != pathValues.length()) continue
+                    val style = entry.optJSONObject("style") ?: continue
+                    add(EditorStyleRule(path.toList(), style))
+                }
+            }
+        }
+
         internal fun decodeElement(
             json: JSONObject,
             fallback: EditorBoxStyle = EditorBoxStyle()
@@ -211,6 +288,117 @@ class EditorStyleSheet private constructor(val styles: Map<String, EditorElement
     }
 }
 
+private val STYLE_NAMES = setOf(
+    "content", "text", "paragraph", "h1", "h2", "h3", "h4", "h5", "h6",
+    "blockquote", "codeBlock", "bulletList", "orderedList", "taskList", "listItem",
+    "taskItem", "listMarker", "taskCheckbox", "horizontalRule", "image", "link",
+    "inlineCode", "bold", "italic", "underline", "strike", "mention", "placeholder"
+)
+
+private fun EditorElementStyle.overlaidWith(
+    other: EditorElementStyle,
+    raw: JSONObject? = null
+): EditorElementStyle {
+    val keys = other.declaredProperties
+    fun sides(prefix: String, current: EditorEdges, next: EditorEdges, suffix: String = "") =
+        EditorEdges(
+            if ("${prefix}Top$suffix" in keys) next.top else current.top,
+            if ("${prefix}Right$suffix" in keys) next.right else current.right,
+            if ("${prefix}Bottom$suffix" in keys) next.bottom else current.bottom,
+            if ("${prefix}Left$suffix" in keys) next.left else current.left
+        )
+    val nextChecked = if ("checked" in keys) {
+        other.checked?.let {
+            (checked ?: EditorElementStyle(EditorTextStyle(), box)).overlaidWith(
+                it,
+                raw?.optJSONObject("checked")
+            )
+        }
+    } else {
+        checked
+    }
+    val nextOrdered = if ("ordered" in keys) {
+        other.ordered?.let { next ->
+            val current = ordered ?: EditorOrderedListMarkerTheme()
+            val orderedJson = raw?.optJSONObject("ordered")
+            EditorOrderedListMarkerTheme(
+                schemes = if (orderedJson?.has("schemes") ==
+                    true
+                ) {
+                    next.schemes
+                } else {
+                    current.schemes
+                },
+                suffix = if (orderedJson?.has("suffix") == true) next.suffix else current.suffix
+            )
+        }
+    } else {
+        ordered
+    }
+    return copy(
+        text = text.mergedWith(other.text),
+        box = box.copy(
+            backgroundColor = if ("backgroundColor" in keys) {
+                other.box.backgroundColor
+            } else {
+                box.backgroundColor
+            },
+            padding = sides("padding", box.padding, other.box.padding),
+            margin = sides("margin", box.margin, other.box.margin),
+            border = sides("border", box.border, other.box.border, "Width"),
+            borderColors = listOf("Top", "Right", "Bottom", "Left").mapIndexed { index, side ->
+                if ("border${side}Color" in keys) {
+                    other.box.borderColors[index]
+                } else {
+                    box.borderColors[index]
+                }
+            },
+            corners = EditorCorners(
+                if ("borderTopLeftRadius" in
+                    keys
+                ) {
+                    other.box.corners.topLeft
+                } else {
+                    box.corners.topLeft
+                },
+                if ("borderTopRightRadius" in
+                    keys
+                ) {
+                    other.box.corners.topRight
+                } else {
+                    box.corners.topRight
+                },
+                if ("borderBottomRightRadius" in keys) {
+                    other.box.corners.bottomRight
+                } else {
+                    box.corners.bottomRight
+                },
+                if ("borderBottomLeftRadius" in keys) {
+                    other.box.corners.bottomLeft
+                } else {
+                    box.corners.bottomLeft
+                }
+            ),
+            borderStyle = if ("borderStyle" in keys) other.box.borderStyle else box.borderStyle
+        ),
+        indent = if ("indent" in keys) other.indent else indent,
+        baseIndentMultiplier = if ("baseIndentMultiplier" in keys) {
+            other.baseIndentMultiplier
+        } else {
+            baseIndentMultiplier
+        },
+        scale = if ("scale" in keys) other.scale else scale,
+        gap = if ("gap" in keys) other.gap else gap,
+        ordered = nextOrdered,
+        checked = nextChecked,
+        resizeMode = if ("resizeMode" in keys) other.resizeMode else resizeMode,
+        size = if ("size" in keys) other.size else size,
+        checkColor = if ("checkColor" in keys) other.checkColor else checkColor,
+        height = if ("height" in keys) other.height else height,
+        declaredProperties = declaredProperties + keys
+    )
+}
+
 internal fun canonicalElement(name: String): String = when (name) {
     "bullet_list" -> "bulletList"
     "ordered_list" -> "orderedList"

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

@@ -870,6 +870,13 @@ internal class EditorV2Adapter private constructor(
     override fun toggleBlockquote(anchor: Int, head: Int): String? =
         commandAtSelection(JSONObject().put("type", "toggleBlockquote"), anchor, head)
 
+    override fun applyListType(listType: String, anchor: Int, head: Int): String? =
+        commandAtSelection(
+            JSONObject().put("type", "applyListType").put("listType", listType),
+            anchor,
+            head
+        )
+
     override fun wrapInList(listType: String, anchor: Int, head: Int): String? {
         val itemType = EditorNodeTypes.listItemType(listType)
         return commandAtSelection(

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

@@ -66,6 +66,7 @@ internal interface EditorV2Driver {
     fun toggleHeading(level: Int, anchor: Int, head: Int): String?
     fun toggleCodeBlock(anchor: Int, head: Int): String?
     fun toggleBlockquote(anchor: Int, head: Int): String?
+    fun applyListType(listType: String, anchor: Int, head: Int): String?
     fun wrapInList(listType: String, anchor: Int, head: Int): String?
     fun unwrapFromList(anchor: Int, head: Int): String?
     fun indentListItem(anchor: Int, head: Int): String?

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

@@ -83,7 +83,9 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
         val selectedSpan = editorView?.selectedImageSpanForResize()
         if (currentGeometry?.docPos != nextGeometry.docPos ||
             dragState?.span?.let { it !== selectedSpan } == true
-        ) cancelActiveResize()
+        ) {
+            cancelActiveResize()
+        }
         currentGeometry = nextGeometry
         visibility = VISIBLE
         bringToFront()
@@ -138,7 +140,10 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
                     fixedHeightPx = geometry.rect.height() - span.currentSizePx().second,
                     maximumWidthPx = editorView?.maximumImageWidthPx() ?: geometry.rect.width(),
                     previewRect = RectF(geometry.rect),
-                    previewContentSize = span.currentSizePx().let { it.first.toFloat() to it.second.toFloat() }
+                    previewContentSize = span.currentSizePx().let {
+                        it.first.toFloat() to
+                            it.second.toFloat()
+                    }
                 )
                 parent?.requestDisallowInterceptTouchEvent(true)
                 return true
@@ -163,7 +168,9 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
                         )
                     }
                     editorView?.restoreImageResizePreview(state.span)
-                } else editorView?.restoreImageResizePreview(state.span)
+                } else {
+                    editorView?.restoreImageResizePreview(state.span)
+                }
                 dragState = null
                 parent?.requestDisallowInterceptTouchEvent(false)
                 post { refresh() }
@@ -188,7 +195,9 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
                     originalContentSize.first,
                     originalContentSize.second
                 )
-            ) return
+            ) {
+                return
+            }
             state.previewRect = RectF(state.originalRect)
             state.previewContentSize = originalContentSize
             currentGeometry = boundEditor.selectedImageGeometry()
@@ -209,7 +218,14 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
             maximumWidthPx = state.maximumWidthPx
         )
         val boundEditor = editorView ?: return
-        if (!boundEditor.previewImageResize(state.span, contentSize.first, contentSize.second)) return
+        if (!boundEditor.previewImageResize(
+                state.span,
+                contentSize.first,
+                contentSize.second
+            )
+        ) {
+            return
+        }
         state.previewRect = RectF(nextRect)
         state.previewContentSize = contentSize
         currentGeometry = boundEditor.selectedImageGeometry()
@@ -324,10 +340,33 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
         val visualWidth = width + fixedWidthPx
         val visualHeight = height + fixedHeightPx
         val rect = when (corner) {
-            Corner.TOP_LEFT -> RectF(anchor.x - visualWidth, anchor.y - visualHeight, anchor.x, anchor.y)
-            Corner.TOP_RIGHT -> RectF(anchor.x, anchor.y - visualHeight, anchor.x + visualWidth, anchor.y)
-            Corner.BOTTOM_LEFT -> RectF(anchor.x - visualWidth, anchor.y, anchor.x, anchor.y + visualHeight)
-            Corner.BOTTOM_RIGHT -> RectF(anchor.x, anchor.y, anchor.x + visualWidth, anchor.y + visualHeight)
+            Corner.TOP_LEFT -> RectF(
+                anchor.x - visualWidth,
+                anchor.y - visualHeight,
+                anchor.x,
+                anchor.y
+            )
+
+            Corner.TOP_RIGHT -> RectF(
+                anchor.x,
+                anchor.y - visualHeight,
+                anchor.x + visualWidth,
+                anchor.y
+            )
+
+            Corner.BOTTOM_LEFT -> RectF(
+                anchor.x - visualWidth,
+                anchor.y,
+                anchor.x,
+                anchor.y + visualHeight
+            )
+
+            Corner.BOTTOM_RIGHT -> RectF(
+                anchor.x,
+                anchor.y,
+                anchor.x + visualWidth,
+                anchor.y + visualHeight
+            )
         }
         return rect to (width to height)
     }

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

@@ -285,9 +285,9 @@ internal fun RenderBridge.calculateIndent(
     density: Float
 ): Float {
     theme?.styleSheet?.let { sheet ->
-        val lists = blockStack.filter { it.listContext != null }
-        return lists.mapIndexed { index, block ->
-            val context = block.listContext!!
+        val lists = blockStack.withIndex().filter { it.value.listContext != null }
+        return lists.mapIndexed { index, entry ->
+            val context = entry.value.listContext!!
             val name = if (context.optString("kind") ==
                 "task"
             ) {
@@ -297,7 +297,20 @@ internal fun RenderBridge.calculateIndent(
             } else {
                 "bulletList"
             }
-            val style = sheet[name]
+            val prefix = blockStack.take(entry.index)
+            val containerIndex = prefix.indexOfLast { canonicalElement(it.nodeType) == name }
+            val style = sheet.resolveElement(
+                name,
+                prefix.take(
+                    if (containerIndex >=
+                        0
+                    ) {
+                        containerIndex
+                    } else {
+                        prefix.size
+                    }
+                ).map { it.nodeType }
+            )
             (style?.indent ?: LayoutConstants.INDENT_PER_DEPTH) *
                 (if (index == 0) style?.baseIndentMultiplier ?: 1f else 1f) *
                 density