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

package/ios/Viewer/CoreTextProseLayoutEngine+AttributedText.swift

@@ -13,7 +13,8 @@ extension CoreTextProseLayoutEngine {
         _ inlines: [ViewerInline],
         paint: PreparedTextPaint,
         theme: PreparedProseTheme,
-        warningSemanticGeneration: String
+        warningSemanticGeneration: String,
+        ancestors: [String] = []
     ) -> PreparedAttributedBlock {
         let result = NSMutableAttributedString()
         var atoms: [PreparedAtomSpec] = []
@@ -39,7 +40,7 @@ extension CoreTextProseLayoutEngine {
             switch inline {
             case let .text(text: text, marks: marks):
                 let start = result.length
-                result.append(NSAttributedString(string: text, attributes: attributes(for: marks, paint: paint, theme: theme, warningSemanticGeneration: warningSemanticGeneration)))
+                result.append(NSAttributedString(string: text, attributes: attributes(for: marks, paint: paint, theme: theme, warningSemanticGeneration: warningSemanticGeneration, ancestors: ancestors)))
                 let range = NSRange(location: start, length: (text as NSString).length)
                 if let href = href(in: marks), !text.isEmpty {
                     let semanticIndex: Int
@@ -67,7 +68,8 @@ extension CoreTextProseLayoutEngine {
                     attrsJSON: attrsJSON,
                     paint: paint,
                     theme: theme,
-                    warningSemanticGeneration: warningSemanticGeneration
+                    warningSemanticGeneration: warningSemanticGeneration,
+                    ancestors: ancestors
                 )
                 let displayLabel = label.isEmpty ? " " : label
                 let labelLine = CTLineCreateWithAttributedString(
@@ -137,7 +139,7 @@ extension CoreTextProseLayoutEngine {
         return nil
     }
 
-    func attributes(for marks: [FfiViewerMark], paint: PreparedTextPaint, theme: PreparedProseTheme, warningSemanticGeneration: String) -> [NSAttributedString.Key: Any] {
+    func attributes(for marks: [FfiViewerMark], paint: PreparedTextPaint, theme: PreparedProseTheme, warningSemanticGeneration: String, ancestors: [String] = []) -> [NSAttributedString.Key: Any] {
         if let sheet = theme.styleSheet {
             var base: [NSAttributedString.Key: Any] = [.font: paint.font, .foregroundColor: paint.color]
             EditorStyleSheet.applyText(paint.textValues, to: &base, scale: theme.fontScale)
@@ -146,7 +148,7 @@ extension CoreTextProseLayoutEngine {
                 values["type"] = mark.markType
                 return values
             }
-            var resolved = sheet.inlineAttributes(markValues, base: base, scale: theme.fontScale)
+            var resolved = sheet.inlineAttributes(markValues, base: base, scale: theme.fontScale, ancestors: ancestors)
             for mark in marks {
                 let values = jsonDictionary(mark.attrsJson)
                 switch mark.markType {
@@ -313,11 +315,18 @@ extension CoreTextProseLayoutEngine {
         _ context: ViewerListContext,
         nestingDepth: Int,
         paint: PreparedTextPaint,
-        theme: PreparedProseTheme
+        theme: PreparedProseTheme,
+        ancestors: [String] = []
     ) -> PreparedListMarker {
+        let marker = theme.styleSheet?.resolvedValues("listMarker", ancestors: ancestors) ?? [:]
+        let ordered = (marker["ordered"] as? [String: Any]).map(EditorOrderedListMarkerTheme.init(dictionary:)) ?? theme.orderedListMarker
+        let color = EditorTheme.color(from: marker["color"]) ?? theme.listMarkerColor
         let scale: CGFloat
-        if let sheet = theme.styleSheet {
-            scale = EditorTheme.cgFloat(sheet["listMarker"]["scale"]) ?? (context.ordered ? 1 : LayoutConstants.unorderedListMarkerFontScale)
+        if theme.styleSheet != nil {
+            scale = !context.ordered && context.kind != "task"
+                ? EditorTheme.cgFloat(marker["scale"])
+                    ?? LayoutConstants.unorderedListMarkerFontScale
+                : 1
             if !context.ordered, context.kind != "task" {
                 let diameter = EditorLayoutManager.unorderedBulletDrawingRect(usedRect: .zero, lineFragmentRect: .zero, markerWidth: 0, baselineY: 0, baseFont: paint.font, markerScale: scale, origin: .zero).width
                 return PreparedListMarker(line: nil, label: "•", width: diameter, ascent: diameter / 2, descent: diameter / 2, checked: false)
@@ -333,13 +342,13 @@ extension CoreTextProseLayoutEngine {
             label = OrderedListMarkerFormatter.label(
                 index: UInt32(exactly: context.index) ?? 0,
                 nestingDepth: nestingDepth,
-                theme: theme.orderedListMarker
+                theme: ordered
             )
         } else {
             label = "•"
         }
         guard !label.isEmpty else {
-            let side = theme.styleSheet?.checkbox(checked: context.checked).number("size", fallback: 24) ?? max(font.lineHeight, font.pointSize)
+            let side = theme.styleSheet?.checkbox(checked: context.checked, ancestors: ancestors).number("size", fallback: 24) ?? max(font.lineHeight, font.pointSize)
             return PreparedListMarker(line: nil, label: label, width: side, ascent: side * 0.75, descent: side * 0.25, checked: context.checked)
         }
         let line = CTLineCreateWithAttributedString(
@@ -347,7 +356,7 @@ extension CoreTextProseLayoutEngine {
                 string: label,
                 attributes: [
                     kCTFontAttributeName as NSAttributedString.Key: Self.coreTextFont(from: font),
-                    kCTForegroundColorAttributeName as NSAttributedString.Key: theme.listMarkerColor.cgColor
+                    kCTForegroundColorAttributeName as NSAttributedString.Key: color.cgColor
                 ]
             )
         )
@@ -366,12 +375,21 @@ extension CoreTextProseLayoutEngine {
         attrsJSON: String,
         paint: PreparedTextPaint,
         theme: PreparedProseTheme,
-        warningSemanticGeneration: String
+        warningSemanticGeneration: String,
+        ancestors: [String]
     ) -> PreparedAtomAppearance {
         if nodeType == "mention" {
             let values = jsonDictionary(attrsJSON)
             let localMention = (values["mentionTheme"] as? [String: Any]).map(EditorMentionTheme.init(dictionary:))
-            let mention = (theme.mention?.merged(with: localMention) ?? localMention)?.node
+            var globalMention = theme.mention
+            if let sheet = theme.styleSheet, !sheet.rules.isEmpty {
+                let projection = EditorTheme.legacyProjection(
+                    styles: ["mention": sheet.resolvedValues("mention", ancestors: ancestors)],
+                    root: theme.mentionOverrides.map { ["mentions": $0] } ?? [:]
+                )
+                globalMention = (projection["mentions"] as? [String: Any]).map(EditorMentionTheme.init(dictionary:))
+            }
+            let mention = (globalMention?.merged(with: localMention) ?? localMention)?.node
             var attributes = baseAttributes(paint)
             if let weight = mention?.fontWeight {
                 let font = ViewerFontEnvironment.shared.resolveFont(

package/ios/Viewer/CoreTextProseLayoutEngine+Models.swift

@@ -138,6 +138,7 @@ struct PreparedProseTheme {
     let ruleMargin: CGFloat
     let link: EditorLinkTheme?
     let mention: EditorMentionTheme?
+    let mentionOverrides: [String: Any]?
 
     static func resolve(
         themeJSON: String?,
@@ -205,7 +206,7 @@ struct PreparedProseTheme {
             headings: headings,
             blockquote: quote,
             code: paint(codeStyle, fallback: codeFallback),
-            contentInsets: UIEdgeInsets(
+            contentInsets: theme.styleSheet?.box("content").inset ?? UIEdgeInsets(
                 top: theme.contentInsets?.top ?? 0,
                 left: theme.contentInsets?.left ?? 0,
                 bottom: theme.contentInsets?.bottom ?? 0,
@@ -231,7 +232,8 @@ struct PreparedProseTheme {
             ruleThickness: theme.horizontalRule?.thickness ?? 1,
             ruleMargin: theme.horizontalRule?.verticalMargin ?? 12,
             link: theme.links,
-            mention: theme.mentions
+            mention: theme.mentions,
+            mentionOverrides: theme.styleSheetMentionOverrides
         )
     }
 
@@ -319,4 +321,17 @@ struct PreparedListMarker {
     let checked: Bool
 }
 
+extension ViewerBlock {
+    func ancestors(before ancestor: ViewerStyleAncestor) -> [String] {
+        styleAncestors.prefix { $0.identity != ancestor.identity }.map(\.nodeType)
+    }
+
+    var markerStyleAncestors: [String] {
+        guard let item = styleAncestors.lastIndex(where: { ["listItem", "taskItem"].contains(EditorStyleSheet.element($0.nodeType)) }) else {
+            return styleAncestors.map(\.nodeType)
+        }
+        return styleAncestors.prefix(item + 1).map(\.nodeType)
+    }
+}
+
 /// Performs the width-dependent, immutable Core Text preparation step.

package/ios/Viewer/CoreTextProseLayoutEngine.swift

@@ -66,7 +66,8 @@ final class CoreTextProseLayoutEngine {
                 context,
                 nestingDepth: markerNestingDepth,
                 paint: theme.paint(for: block),
-                theme: theme
+                theme: theme,
+                ancestors: block.markerStyleAncestors
             )
         }
         for (index, block) in document.blocks.enumerated() {
@@ -90,14 +91,14 @@ final class CoreTextProseLayoutEngine {
                 let shared = zip(previous.styleAncestors, block.styleAncestors).prefix { $0 == $1 }.count
                 let previousSibling = previous.styleAncestors.dropFirst(shared).first?.nodeType ?? previous.nodeType
                 let nextSibling = block.styleAncestors.dropFirst(shared).first?.nodeType ?? block.nodeType
-                let previousMargin = sheet.box(previousSibling).margin.bottom
-                let nextMargin = sheet.box(nextSibling).margin.top
+                let previousMargin = sheet.box(previousSibling, ancestors: previous.styleAncestors.prefix(shared).map(\.nodeType)).margin.bottom
+                let nextMargin = sheet.box(nextSibling, ancestors: block.styleAncestors.prefix(shared).map(\.nodeType)).margin.top
                 cursorY -= previousMargin + nextMargin - EditorStyleSheet.collapsedMargin(previousMargin, nextMargin)
             }
             let omitBottomMargin = block.nodeType == "paragraph"
                 && block.styleAncestors.last.map { $0.nodeType == "blockquote" && closing.contains($0) } == true
-            let top = opening.reduce(CGFloat.zero) { $0 + (theme.styleSheet?.box($1.nodeType).outerInsets.top ?? 0) }
-            let bottom = closing.reduce(CGFloat.zero) { $0 + (theme.styleSheet?.box($1.nodeType).outerInsets.bottom ?? 0) }
+            let top = opening.reduce(CGFloat.zero) { $0 + (theme.styleSheet?.box($1.nodeType, ancestors: block.ancestors(before: $1)).outerInsets.top ?? 0) }
+            let bottom = closing.reduce(CGFloat.zero) { $0 + (theme.styleSheet?.box($1.nodeType, ancestors: block.ancestors(before: $1)).outerInsets.bottom ?? 0) }
             cursorY += top
             let prepared = prepareBlock(
                 block,
@@ -128,10 +129,10 @@ final class CoreTextProseLayoutEngine {
                 var outerLeft: CGFloat = 0
                 var outerRight: CGFloat = 0
                 for (depth, ancestor) in block.styleAncestors.enumerated() {
-                    let box = sheet.box(ancestor.nodeType)
+                    let box = sheet.box(ancestor.nodeType, ancestors: block.ancestors(before: ancestor))
                     let remaining = block.styleAncestors.dropFirst(depth + 1)
-                    let innerTop = remaining.reduce(CGFloat.zero) { $0 + (opening.contains($1) ? sheet.box($1.nodeType).outerInsets.top : 0) }
-                    let innerBottom = remaining.reduce(CGFloat.zero) { $0 + (closing.contains($1) ? sheet.box($1.nodeType).outerInsets.bottom : 0) }
+                    let innerTop = remaining.reduce(CGFloat.zero) { $0 + (opening.contains($1) ? sheet.box($1.nodeType, ancestors: block.ancestors(before: $1)).outerInsets.top : 0) }
+                    let innerBottom = remaining.reduce(CGFloat.zero) { $0 + (closing.contains($1) ? sheet.box($1.nodeType, ancestors: block.ancestors(before: $1)).outerInsets.bottom : 0) }
                     let y = cursorY - innerTop - (opening.contains(ancestor) ? box.inset.top : 0)
                     let end = prepared.nextY + innerBottom + (closing.contains(ancestor) ? box.inset.bottom : 0)
                     let rect = CGRect(
@@ -211,8 +212,8 @@ final class CoreTextProseLayoutEngine {
         warningSemanticGeneration: String
     ) -> BlockPreparation {
         let sheet = theme.styleSheet
-        let box = sheet?.box(block.nodeType) ?? EditorStyleBox()
-        let ancestors = block.styleAncestors.reduce(UIEdgeInsets.zero) { $0.adding(sheet?.box($1.nodeType).outerInsets ?? .zero) }
+        let box = sheet?.box(block.nodeType, ancestors: block.styleAncestors.map(\.nodeType)) ?? EditorStyleBox()
+        let ancestors = block.styleAncestors.reduce(UIEdgeInsets.zero) { $0.adding(sheet?.box($1.nodeType, ancestors: block.ancestors(before: $1)).outerInsets ?? .zero) }
         let cursorY = cursorY + box.margin.top
         let contentX = theme.contentInsets.left + ancestors.left + box.margin.left
         let contentWidth = max(1, width - theme.contentInsets.left - theme.contentInsets.right - ancestors.left - ancestors.right - box.margin.left - box.margin.right)
@@ -222,7 +223,7 @@ final class CoreTextProseLayoutEngine {
             : (block.listItemBoundary.map { Int($0.nestingDepth) } ?? max(0, Int(block.depth) - 1))
         let fallbackMarkerNestingDepth = max(0, block.listItemAncestors.count - 1)
         let measuredListMarker = listMarker ?? block.listContext.map {
-            makeListMarker($0, nestingDepth: fallbackMarkerNestingDepth, paint: paint, theme: theme)
+            makeListMarker($0, nestingDepth: fallbackMarkerNestingDepth, paint: paint, theme: theme, ancestors: block.markerStyleAncestors)
         }
         let marker = block.listItemBoundary.map { $0.isFirstRenderableLeaf ? measuredListMarker : nil } ?? measuredListMarker
         // The marker gutter is an independently measured column. In particular,
@@ -235,10 +236,26 @@ final class CoreTextProseLayoutEngine {
         let baseMultiplier = EditorTheme.cgFloat(listValues["baseIndentMultiplier"]) ?? theme.listBaseIndentMultiplier
         let listBaseIndent = block.listContext == nil ? 0 : max(0, listIndent * baseMultiplier)
         let nestedListIndent = block.listContext == nil ? 0 : max(0, listIndent * CGFloat(listDepth))
-        let checkbox = block.listContext.flatMap { $0.kind == "task" ? sheet?.checkbox(checked: $0.checked) : nil }
-        let markerGap = checkbox?.number("gap", fallback: 8) ?? theme.listMarkerGap
+        // Keep the mixed-list baseline and add each container's contextual change.
+        var contextualListIndent: CGFloat = 0
+        if let sheet, block.listContext != nil {
+            let lists = block.styleAncestors.filter { ["bulletList", "orderedList", "taskList"].contains(EditorStyleSheet.element($0.nodeType)) }
+            for (depth, ancestor) in lists.enumerated() {
+                let base = sheet[ancestor.nodeType]
+                let resolved = sheet.resolvedValues(ancestor.nodeType, ancestors: block.ancestors(before: ancestor))
+                let baseIndent = EditorTheme.cgFloat(base["indent"]) ?? theme.listIndent
+                let resolvedIndent = EditorTheme.cgFloat(resolved["indent"]) ?? theme.listIndent
+                let baseMultiplier = depth == 0 ? EditorTheme.cgFloat(base["baseIndentMultiplier"]) ?? theme.listBaseIndentMultiplier : 1
+                let resolvedMultiplier = depth == 0 ? EditorTheme.cgFloat(resolved["baseIndentMultiplier"]) ?? theme.listBaseIndentMultiplier : 1
+                contextualListIndent += max(0, resolvedIndent * resolvedMultiplier) - max(0, baseIndent * baseMultiplier)
+            }
+        }
+        let markerValues = sheet?.resolvedValues("listMarker", ancestors: block.markerStyleAncestors) ?? [:]
+        let markerColor = EditorTheme.color(from: markerValues["color"]) ?? theme.listMarkerColor
+        let checkbox = block.listContext.flatMap { $0.kind == "task" ? sheet?.checkbox(checked: $0.checked, ancestors: block.markerStyleAncestors) : nil }
+        let markerGap = checkbox?.number("gap", fallback: 8) ?? EditorTheme.cgFloat(markerValues["gap"]) ?? theme.listMarkerGap
         let markerGutter = measuredListMarker.map { max(markerGap, $0.width + markerGap) } ?? 0
-        let listInset = listBaseIndent + nestedListIndent + markerGutter
+        let listInset = listBaseIndent + nestedListIndent + contextualListIndent + markerGutter
         let quoteInset = block.inBlockquote ? theme.quoteBorderWidth + theme.quoteMarkerGap + theme.quoteIndent : 0
         let codeInset = block.nodeType == "codeBlock" ? theme.codePaddingHorizontal : 0
         let textX = contentX + listInset + quoteInset + codeInset + box.inset.left
@@ -294,7 +311,7 @@ final class CoreTextProseLayoutEngine {
                     line: marker.line,
                     origin: CGPoint(x: markerX, y: markerTop + marker.ascent),
                     bounds: markerBounds,
-                    color: theme.listMarkerColor.cgColor,
+                    color: markerColor.cgColor,
                     label: marker.label,
                     checked: marker.checked,
                     styleBox: checkbox
@@ -334,12 +351,13 @@ final class CoreTextProseLayoutEngine {
             return BlockPreparation(block: prepared, interactions: [], accessibilityNodes: [node], attachment: attachment, nextY: bounds.maxY + itemSpacing, retainedBytes: prepared.estimatedRetainedBytes + 192)
         }
         if block.nodeType == "horizontalRule" || block.nodeType == "horizontal_rule" {
+            let thickness = sheet == nil ? theme.ruleThickness : box.number("height", fallback: theme.ruleThickness)
             let ruleX = contentX + listInset + quoteInset + box.inset.left
             let ruleWidth = max(1, contentWidth - listInset - quoteInset - box.inset.left - box.inset.right)
             let y = cursorY + theme.ruleMargin + box.inset.top
-            let rule = CGRect(x: ruleX, y: y, width: ruleWidth, height: theme.ruleThickness)
-            var fragments: [PreparedProseFragment] = [.init(kind: .rule, bounds: rule, color: theme.ruleColor.cgColor, strokeWidth: theme.ruleThickness)]
-            let totalEnd = y + theme.ruleThickness + theme.ruleMargin + box.inset.bottom
+            let rule = CGRect(x: ruleX, y: y, width: ruleWidth, height: thickness)
+            var fragments: [PreparedProseFragment] = [.init(kind: .rule, bounds: rule, color: theme.ruleColor.cgColor, strokeWidth: thickness)]
+            let totalEnd = y + thickness + theme.ruleMargin + box.inset.bottom
             if sheet != nil {
                 fragments = [.init(kind: .background, bounds: CGRect(x: contentX, y: cursorY, width: contentWidth, height: totalEnd - cursorY), styleBox: box)]
             }
@@ -352,7 +370,7 @@ final class CoreTextProseLayoutEngine {
                 let markerTop = cursorY + (totalEnd - cursorY - markerHeight) / 2
                 let markerBaseline = markerTop + marker.ascent
                 let markerBounds = CGRect(x: markerX, y: markerTop, width: marker.width, height: markerHeight)
-                fragments.append(.init(kind: .marker, line: marker.line, origin: CGPoint(x: markerX, y: markerBaseline), bounds: markerBounds, color: theme.listMarkerColor.cgColor, label: marker.label, checked: marker.checked, styleBox: checkbox))
+                fragments.append(.init(kind: .marker, line: marker.line, origin: CGPoint(x: markerX, y: markerBaseline), bounds: markerBounds, color: markerColor.cgColor, label: marker.label, checked: marker.checked, styleBox: checkbox))
             }
             let seedBounds = CGRect(x: contentX, y: cursorY, width: contentWidth, height: totalEnd - cursorY)
             let bounds = fragments.reduce(seedBounds) { $0.union($1.bounds) }
@@ -376,7 +394,7 @@ final class CoreTextProseLayoutEngine {
         }
 
         let availableWidth = max(1, contentWidth - listInset - quoteInset - codeInset * 2 - box.inset.left - box.inset.right)
-        let attributed = makeAttributedString(block.inlines, paint: paint, theme: theme, warningSemanticGeneration: warningSemanticGeneration)
+        let attributed = makeAttributedString(block.inlines, paint: paint, theme: theme, warningSemanticGeneration: warningSemanticGeneration, ancestors: block.styleAncestors.map(\.nodeType) + [block.nodeType])
         let highlighted = NSMutableAttributedString(attributedString: attributed.string)
         NativeCodeHighlightPresentation.apply(highlighting, to: highlighted)
         let typesetter = CTTypesetterCreateWithAttributedString(highlighted)
@@ -510,7 +528,7 @@ final class CoreTextProseLayoutEngine {
                 width: marker.width,
                 height: markerHeight
             )
-            fragments.append(.init(kind: .marker, line: marker.line, origin: CGPoint(x: markerX, y: markerBaseline), bounds: markerBounds, color: theme.listMarkerColor.cgColor, label: marker.label, checked: marker.checked, styleBox: checkbox))
+            fragments.append(.init(kind: .marker, line: marker.line, origin: CGPoint(x: markerX, y: markerBaseline), bounds: markerBounds, color: markerColor.cgColor, label: marker.label, checked: marker.checked, styleBox: checkbox))
         }
         let seedBounds = CGRect(x: contentX, y: cursorY, width: contentWidth, height: max(0, totalEnd - cursorY))
         let bounds = fragments.reduce(seedBounds) { $0.union($1.bounds) }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apollohg/react-native-rich-text-editor",
-    "version": "2.0.3",
+    "version": "2.0.5",
     "description": "Native rich text editor with Rust core for React Native",
     "license": "Apache-2.0",
     "homepage": "https://github.com/apollohg/react-native-rich-text-editor",
@@ -47,7 +47,7 @@
         "install:example:pods": "cd example/ios && pod install --no-repo-update",
         "install:ios-test-pods": "cd ios-tests && pod install --no-repo-update",
         "lint:android": "npm run prebuild:example:android && cd example/android && ./gradlew :apollohg_react-native-rich-text-editor:lintDebug && node ../../scripts/assert-android-lint-clean.mjs ../../android/build/reports/lint-results-debug.xml",
-        "lint:ios": "swiftlint lint --strict",
+        "lint:ios": "node scripts/swiftlint.mjs lint --strict",
         "lint:kotlin": "node scripts/ktlint.mjs",
         "prebuild:example": "npm --prefix example run prebuild",
         "prebuild:example:android": "npm --prefix example run prebuild:android",
@@ -75,7 +75,7 @@
         "test:rust": "cargo test --manifest-path rust/editor-core/Cargo.toml",
         "typecheck": "tsc --noEmit",
         "typecheck:example": "npm --prefix example run typecheck",
-        "validate:package": "npm run prepare:example:native && npm run install:ios-test-pods && node scripts/tests/validate-prepared-prose-viewer-cutover.mjs && npm run validate:security -- --release --behavior && node scripts/tests/validate-security-contracts-negative.mjs && node scripts/tests/validate-publish-lifecycle.mjs && bash ./scripts/tests/validate-generated-bindings.sh && bash ./scripts/tests/validate-packed-xcframework.sh && node scripts/tests/validate-packed-package.test.mjs && bash ./scripts/validate-packed-package.sh",
+        "validate:package": "npm run prepare:example:native && npm run install:ios-test-pods && npm run lint:ios && npm run lint:kotlin && node scripts/tests/validate-prepared-prose-viewer-cutover.mjs && npm run validate:security -- --release --behavior && node scripts/tests/validate-security-contracts-negative.mjs && node scripts/tests/validate-publish-lifecycle.mjs && bash ./scripts/tests/validate-generated-bindings.sh && bash ./scripts/tests/validate-packed-xcframework.sh && node scripts/tests/validate-packed-package.test.mjs && bash ./scripts/validate-packed-package.sh",
         "validate:package:contracts": "bash ./scripts/validate-packed-package.sh --validate-packed-tarball \"$RELEASE_TARBALL\"",
         "validate:package:ios:positive": "bash ./scripts/validate-packed-package.sh --validate-ios-consumer . \"$RELEASE_TARBALL\"",
         "validate:package:ios:negative": "VALIDATE_PACKED_PACKAGE_GROUP=ios-consumer node scripts/tests/validate-packed-package.test.mjs",

package/src/EditorStyleSheetNormalization.ts

@@ -319,6 +319,56 @@ export function normalizeEditorTheme(theme: unknown): NormalizedEditorTheme {
     const result: NormalizedEditorTheme = { version: 1 };
 
     for (const [ key, value ] of Object.entries(theme)) {
+        if (key === 'rules') {
+            if (value === undefined) {
+                continue;
+            }
+
+            if (!Array.isArray(value)) {
+                invalid('rules', 'expected an array');
+            }
+
+            result.rules = value.map((entry, index) => {
+                const indexedPath = `rules[${index}]`;
+
+                if (!record(entry)) {
+                    invalid(indexedPath, 'expected a rule object');
+                }
+
+                for (const propertyName of Object.keys(entry)) {
+                    if (propertyName !== 'path' && propertyName !== 'style') {
+                        invalid(`${indexedPath}.${propertyName}`, 'unsupported property');
+                    }
+                }
+
+                if (!Array.isArray(entry.path) || entry.path.length === 0) {
+                    invalid(`${indexedPath}.path`, 'expected a nonempty array');
+                }
+
+                entry.path.forEach((element, pathIndex) => {
+                    if (
+                        typeof element !== 'string' ||
+                        !Object.prototype.hasOwnProperty.call(fields, element)
+                    ) {
+                        invalid(`${indexedPath}.path[${pathIndex}]`, 'unsupported element');
+                    }
+                });
+
+                if (!Object.prototype.hasOwnProperty.call(entry, 'style')) {
+                    invalid(`${indexedPath}.style`, 'expected an own style property');
+                }
+
+                const target = entry.path[entry.path.length - 1] as keyof EditorStyleMap;
+
+                return {
+                    path: [ ...entry.path ],
+                    style: normalizeStyle(entry.style, fields[target], `${indexedPath}.style`),
+                };
+            });
+
+            continue;
+        }
+
         if (key === 'toolbar') {
             if (value !== undefined) {
                 if (!record(value)) {

package/src/EditorStyleSheetTypes.ts

@@ -146,9 +146,19 @@ export interface EditorStyleMap {
     placeholder: EditorTypographyStyle;
 }
 
+export type EditorStyleRule = {
+    [K in keyof EditorStyleMap]: {
+        path: readonly [ ...(keyof EditorStyleMap)[], K ];
+        style: EditorStyleProp<EditorStyleMap[K]>;
+    };
+}[keyof EditorStyleMap];
+
 export type EditorTheme = {
     [K in keyof EditorStyleMap]?: EditorStyleProp<EditorStyleMap[K]>;
-} & { toolbar?: EditorToolbarTheme };
+} & {
+    rules?: readonly EditorStyleRule[];
+    toolbar?: EditorToolbarTheme;
+};
 
 export type EditorLinkTheme = EditorInlineStyle;
 export type EditorHeadingTheme = Partial<
@@ -163,6 +173,10 @@ export type NormalizedEditorStyle = Readonly<Record<string, unknown>>;
 export interface NormalizedEditorTheme {
     version: 1;
     styles?: Partial<Record<keyof EditorStyleMap, NormalizedEditorStyle>>;
+    rules?: readonly {
+        path: readonly (keyof EditorStyleMap)[];
+        style: NormalizedEditorStyle;
+    }[];
     toolbar?: EditorToolbarTheme;
 }
 
@@ -180,10 +194,41 @@ type ExactStyle<T, Shape> = T extends false | null | undefined
                 : never;
         };
 
+type ExactRuleStyle<T, Shape> = [ EditorStyleProp<Shape> ] extends [ T ]
+    ? [ T ] extends [ EditorStyleProp<Shape> ]
+        ? T
+        : ExactStyle<T, Shape>
+    : ExactStyle<T, Shape>;
+
+type ExactEditorStyleRule<T> = T extends {
+    readonly path: infer Path extends readonly (keyof EditorStyleMap)[];
+    readonly style: unknown;
+}
+    ? Path extends readonly [ ...(keyof EditorStyleMap)[], infer Target ]
+        ? Target extends keyof EditorStyleMap
+            ? {
+                [K in keyof T]: K extends 'path'
+                    ? Path
+                    : K extends 'style'
+                        ? ExactRuleStyle<T[K], EditorStyleMap[Target]>
+                        : never;
+            }
+            : never
+        : never
+    : never;
+
+type ExactEditorStyleRules<T> = T extends undefined
+    ? T
+    : T extends readonly unknown[]
+        ? { [K in keyof T]: ExactEditorStyleRule<T[K]> }
+        : never;
+
 export type ExactEditorTheme<T> = {
-    [K in keyof T]: K extends keyof EditorStyleMap
-        ? ExactStyle<T[K], EditorStyleMap[K]>
-        : K extends 'toolbar'
-          ? EditorToolbarTheme
-          : never;
+    [K in keyof T]: K extends 'rules'
+        ? ExactEditorStyleRules<T[K]>
+        : K extends keyof EditorStyleMap
+            ? ExactStyle<T[K], EditorStyleMap[K]>
+            : K extends 'toolbar'
+                ? EditorToolbarTheme
+                : never;
 };

package/src/EditorTheme.ts

@@ -183,7 +183,7 @@ export function serializeEditorTheme(
     const normalized = theme === undefined ? undefined : normalizeEditorTheme(theme);
 
     const cleanedTheme =
-        normalized && (normalized.styles || normalized.toolbar)
+        normalized && (normalized.styles || normalized.rules || normalized.toolbar)
             ? stripUndefined(normalized)
             : undefined;
 
@@ -192,6 +192,10 @@ export function serializeEditorTheme(
             ? (cleanedTheme as Record<string, unknown>)
             : undefined;
 
+    if (base && normalized?.rules !== undefined) {
+        base.rules = normalized.rules;
+    }
+
     const cleanedMentions = mentionTheme
         ? stripUndefined(normalizeEditorMentionTheme(mentionTheme))
         : undefined;

package/src/index.ts

@@ -104,6 +104,7 @@ export { serializeEditorTheme } from './EditorTheme';
 export { EditorStyleSheet } from './EditorStyleSheet';
 export type {
     EditorStyleProp,
+    EditorStyleRule,
     EditorStyleMap,
     EditorTypographyStyle,
     EditorBorderStyle,

package/src/useRichTextEditorCommands.tsx

@@ -359,14 +359,8 @@ export function useRichTextEditorCommands(
             }
 
             applyEngineCommand({
-                type: 'wrapInList',
+                type: 'applyListType',
                 listType,
-                itemType:
-                    listType === 'taskList'
-                        ? 'taskItem'
-                        : listType === 'bullet_list' || listType === 'ordered_list'
-                            ? 'list_item'
-                            : 'listItem',
             });
         },
         [ activeStateRef, applyEngineCommand ]