@openeditor/react-native-prose-editor 0.0.7 → 0.0.8

package/ios/NativeBlockEditorSurface.swift

@@ -0,0 +1,1393 @@
+import UIKit
+
+final class NativeBlockEditorSurface: UIScrollView {
+    private final class TextLeafView: UITextView {
+        struct PositionSegment {
+            let range: NSRange
+            let text: String
+            let docPos: UInt32
+            let docSize: UInt32
+            let isAtom: Bool
+        }
+
+        var positionSegments: [PositionSegment] = []
+        var onActivate: ((UInt32) -> Void)?
+        var geometryContainerWidth: CGFloat?
+        private let geometryStorage = NSTextStorage()
+        private let geometryLayoutManager = NSLayoutManager()
+        private let geometryTextContainer = NSTextContainer()
+        private var geometryInitialized = false
+
+        // Leaves expose TextKit geometry but never own keyboard focus. The
+        // shared EditorTextView input coordinator is the sole first responder.
+        override var canBecomeFirstResponder: Bool { false }
+
+        override var intrinsicContentSize: CGSize {
+            let size = sizeThatFits(CGSize(width: bounds.width > 0 ? bounds.width : 320, height: .greatestFiniteMagnitude))
+            return CGSize(width: UIView.noIntrinsicMetric, height: max(36, ceil(size.height)))
+        }
+
+        @objc func activate(_ gesture: UITapGestureRecognizer) {
+            let point = gesture.location(in: self)
+            var fraction: CGFloat = 0
+            let glyphIndex = layoutManager.glyphIndex(
+                for: point,
+                in: textContainer,
+                fractionOfDistanceThroughGlyph: &fraction
+            )
+            let utf16Offset = min(
+                layoutManager.characterIndexForGlyph(at: glyphIndex) + (fraction >= 0.5 ? 1 : 0),
+                textStorage.length
+            )
+            guard let segment = positionSegments.first(where: {
+                utf16Offset >= $0.range.location && utf16Offset <= NSMaxRange($0.range)
+            }) ?? positionSegments.last else { return }
+            if segment.isAtom {
+                let after = utf16Offset > segment.range.location + segment.range.length / 2
+                onActivate?(segment.docPos + (after ? segment.docSize : 0))
+                return
+            }
+            let localUtf16 = max(0, min(utf16Offset - segment.range.location, segment.text.utf16.count))
+            let index = String.Index(utf16Offset: localUtf16, in: segment.text)
+            let scalarOffset = segment.text[..<index].unicodeScalars.count
+            onActivate?(segment.docPos + UInt32(scalarOffset))
+        }
+
+        func nativeOffset(forDocPosition docPosition: UInt32) -> Int? {
+            guard let segment = positionSegments.first(where: {
+                docPosition >= $0.docPos && docPosition <= $0.docPos + $0.docSize
+            }) else { return nil }
+            let localUtf16: Int
+            if segment.isAtom {
+                localUtf16 = docPosition > segment.docPos ? segment.range.length : 0
+            } else {
+                let scalarOffset = Int(docPosition - segment.docPos)
+                localUtf16 = String(
+                    segment.text.unicodeScalars.prefix(
+                        min(scalarOffset, segment.text.unicodeScalars.count)
+                    )
+                ).utf16.count
+            }
+            return segment.range.location + localUtf16
+        }
+
+        func caretRect(forDocPosition docPosition: UInt32) -> CGRect? {
+            guard let offset = nativeOffset(forDocPosition: docPosition) else { return nil }
+            prepareGeometryLayout()
+            let lineHeight = font?.lineHeight ?? 20
+            let inset = textContainerInset
+            guard geometryStorage.length > 0, geometryLayoutManager.numberOfGlyphs > 0 else {
+                return CGRect(x: inset.left, y: inset.top, width: 2, height: lineHeight)
+            }
+            let clamped = min(max(offset, 0), geometryStorage.length)
+            if clamped == geometryStorage.length {
+                let lastGlyph = geometryLayoutManager.numberOfGlyphs - 1
+                let lineRect = geometryLayoutManager.lineFragmentUsedRect(
+                    forGlyphAt: lastGlyph,
+                    effectiveRange: nil
+                )
+                let endsInHardBreak = (geometryStorage.string as NSString)
+                    .character(at: geometryStorage.length - 1) == 0x000A
+                if endsInHardBreak {
+                    return CGRect(
+                        x: inset.left,
+                        y: inset.top + lineRect.maxY,
+                        width: 2,
+                        height: lineRect.height > 0 ? lineRect.height : lineHeight
+                    )
+                }
+                let glyphRect = geometryLayoutManager.boundingRect(
+                    forGlyphRange: NSRange(location: lastGlyph, length: 1),
+                    in: geometryTextContainer
+                )
+                return CGRect(
+                    x: inset.left + glyphRect.maxX,
+                    y: inset.top + lineRect.minY,
+                    width: 2,
+                    height: lineRect.height > 0 ? lineRect.height : lineHeight
+                )
+            }
+            let glyph = geometryLayoutManager.glyphIndexForCharacter(at: clamped)
+            let lineRect = geometryLayoutManager.lineFragmentUsedRect(forGlyphAt: glyph, effectiveRange: nil)
+            let glyphLocation = geometryLayoutManager.location(forGlyphAt: glyph)
+            return CGRect(
+                x: inset.left + lineRect.minX + glyphLocation.x,
+                y: inset.top + lineRect.minY,
+                width: 2,
+                height: lineRect.height > 0 ? lineRect.height : lineHeight
+            )
+        }
+
+        private func prepareGeometryLayout() {
+            if !geometryInitialized {
+                geometryStorage.addLayoutManager(geometryLayoutManager)
+                geometryLayoutManager.addTextContainer(geometryTextContainer)
+                geometryTextContainer.lineFragmentPadding = 0
+                geometryInitialized = true
+            }
+            if geometryStorage.string != attributedText.string
+                || geometryStorage.length != attributedText.length
+            {
+                geometryStorage.setAttributedString(attributedText)
+            }
+            let width = max(geometryContainerWidth ?? bounds.width, 1)
+            if geometryTextContainer.size.width != width {
+                geometryTextContainer.size = CGSize(width: width, height: .greatestFiniteMagnitude)
+                geometryLayoutManager.invalidateLayout(
+                    forCharacterRange: NSRange(location: 0, length: geometryStorage.length),
+                    actualCharacterRange: nil
+                )
+            }
+            geometryLayoutManager.ensureLayout(for: geometryTextContainer)
+        }
+
+        func selectionRects(from: UInt32, to: UInt32) -> [CGRect] {
+            guard let startOffset = nativeOffset(forDocPosition: from),
+                  let endOffset = nativeOffset(forDocPosition: to),
+                  startOffset < endOffset
+            else { return [] }
+            prepareGeometryLayout()
+            let characterRange = NSRange(
+                location: startOffset,
+                length: endOffset - startOffset
+            )
+            let glyphRange = geometryLayoutManager.glyphRange(
+                forCharacterRange: characterRange,
+                actualCharacterRange: nil
+            )
+            let inset = textContainerInset
+            var rects: [CGRect] = []
+            geometryLayoutManager.enumerateLineFragments(
+                forGlyphRange: glyphRange
+            ) { _, usedRect, _, lineGlyphRange, _ in
+                let selectedGlyphRange = NSIntersectionRange(glyphRange, lineGlyphRange)
+                guard selectedGlyphRange.length > 0 else { return }
+                let selectedRect = self.geometryLayoutManager.boundingRect(
+                    forGlyphRange: selectedGlyphRange,
+                    in: self.geometryTextContainer
+                )
+                let rect = CGRect(
+                    x: inset.left + selectedRect.minX,
+                    y: inset.top + usedRect.minY,
+                    width: selectedRect.width,
+                    height: usedRect.height
+                )
+                if !rect.isEmpty, rect.width > 0, rect.height > 0 {
+                    rects.append(rect)
+                }
+            }
+            return rects
+        }
+    }
+
+    private final class CellView: UIStackView {
+        var docPos: UInt32 = 0
+        var tableId: Int = 0
+        var rowIndex: Int = 0
+        var columnIndex: Int = 0
+        var baseFillColor: UIColor = .systemBackground
+    }
+
+    private final class BlockquoteStripeView: UIView {}
+
+    private final class BlockImageView: UIImageView {
+        var docPos: UInt32 = 0
+        var preferredWidth: CGFloat?
+        var preferredHeight: CGFloat?
+        weak var preferredWidthConstraint: NSLayoutConstraint?
+        weak var preferredHeightConstraint: NSLayoutConstraint?
+
+        override var intrinsicContentSize: CGSize {
+            let ratio = image.flatMap { image -> CGFloat? in
+                guard image.size.width > 0, image.size.height > 0 else { return nil }
+                return image.size.height / image.size.width
+            } ?? 0.56
+            let width = max(1, preferredWidth ?? image?.size.width ?? 320)
+            return CGSize(width: width, height: max(1, preferredHeight ?? width * ratio))
+        }
+
+        func refreshPreferredSizeConstraints() {
+            let size = intrinsicContentSize
+            preferredWidthConstraint?.constant = size.width
+            preferredHeightConstraint?.constant = size.height
+        }
+    }
+
+    private let stack = UIStackView()
+    private var currentEditorId: UInt64 = 0
+    private var isApplyingRemoteUpdate = false
+    private var currentTheme: EditorTheme?
+    private var nextTableId = 1
+    private var tableCells: [CellView] = []
+    private weak var selectionAnchorCell: CellView?
+    private weak var selectionHeadCell: CellView?
+    private var currentRoot: [String: Any]?
+    /// Native views are bound to canonical render-tree paths. Inline nodes share
+    /// their owning text-block view; every structural node owns a distinct view.
+    /// This is the identity layer used by recursive patches.
+    private var nodeViews: [[Int]: UIView] = [:]
+    private var imageViews: [BlockImageView] = []
+    private var textLeafViews: [TextLeafView] = []
+    private var selectedNodePos: UInt32?
+    private var selectedTextPos: UInt32?
+    private let caretView = UIView()
+
+    var baseFont: UIFont = .systemFont(ofSize: 16)
+    var baseTextColor: UIColor = .label
+    var baseBackgroundColor: UIColor = .systemBackground {
+        didSet {
+            backgroundColor = baseBackgroundColor
+        }
+    }
+    var onAppliedUpdate: ((String) -> Void)?
+    var onRequestTextInput: ((UInt32) -> Void)?
+    var isEditable = true {
+        didSet {
+            refreshImageSelection()
+            refreshCaret()
+        }
+    }
+    var isInputFocused = false {
+        didSet { refreshCaret() }
+    }
+    var onContentHeightMayChange: ((CGFloat) -> Void)?
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setup()
+    }
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        setup()
+    }
+
+    private func setup() {
+        backgroundColor = baseBackgroundColor
+        keyboardDismissMode = .interactive
+        alwaysBounceVertical = true
+        stack.axis = .vertical
+        stack.spacing = 8
+        stack.alignment = .fill
+        addSubview(stack)
+        caretView.backgroundColor = .systemBlue
+        caretView.isUserInteractionEnabled = false
+        caretView.layer.cornerRadius = 1
+        caretView.isHidden = true
+        addSubview(caretView)
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        let topInset = currentTheme?.contentInsets?.top ?? 0
+        let bottomInset = currentTheme?.contentInsets?.bottom ?? 0
+        let leftInset = currentTheme?.contentInsets?.left ?? 0
+        let rightInset = currentTheme?.contentInsets?.right ?? 0
+        let contentWidth = max(bounds.width - leftInset - rightInset, 0)
+        // Give text leaves their real width before asking Auto Layout for height.
+        // Measuring the zero-width stack made UITextView fall back to 320pt, so
+        // wrapped caret and selection geometry was computed on the wrong line.
+        stack.frame = CGRect(x: leftInset, y: topInset, width: contentWidth, height: max(stack.bounds.height, 1))
+        stack.setNeedsLayout()
+        stack.layoutIfNeeded()
+        let contentHeight = stack.systemLayoutSizeFitting(
+            CGSize(width: contentWidth, height: UIView.layoutFittingCompressedSize.height),
+            withHorizontalFittingPriority: .required,
+            verticalFittingPriority: .fittingSizeLevel
+        ).height
+        stack.frame.size.height = contentHeight
+        stack.layoutIfNeeded()
+        contentSize = CGSize(width: bounds.width, height: stack.frame.maxY + bottomInset)
+        refreshCaret()
+        onContentHeightMayChange?(contentSize.height)
+    }
+
+    func applyTheme(_ theme: EditorTheme?) {
+        currentTheme = theme
+        contentInset = .zero
+        verticalScrollIndicatorInsets = .zero
+        if let currentRoot {
+            rebuildAll(from: currentRoot)
+            refreshTableCellRegistry()
+            refreshImageSelection()
+        }
+        setNeedsLayout()
+    }
+
+    func bind(editorId: UInt64) {
+        currentEditorId = editorId
+        if editorId == 0 {
+            clear()
+        }
+    }
+
+    func applyUpdateJSON(_ updateJSON: String, editorId: UInt64) {
+        guard let data = updateJSON.data(using: .utf8),
+              let update = try? JSONSerialization.jsonObject(with: data) as? [String: Any]
+        else { return }
+
+        if let selection = update["selection"] as? [String: Any] {
+            let type = selection["type"] as? String
+            selectedNodePos = type == "node" ? (selection["pos"] as? NSNumber)?.uint32Value : nil
+            let anchor = (selection["anchor"] as? NSNumber)?.uint32Value
+            let head = (selection["head"] as? NSNumber)?.uint32Value
+            selectedTextPos = type == "text" && anchor == head ? anchor : nil
+            refreshImageSelection()
+            refreshCaret()
+        }
+        guard let renderTree = update["renderTree"] as? [String: Any],
+              let root = renderTree["root"] as? [String: Any]
+        else { return }
+
+        currentEditorId = editorId
+        isApplyingRemoteUpdate = true
+        let patch = update["renderPatch"] as? [String: Any]
+        if currentRoot != nil, let operations = patch?["operations"] as? [[String: Any]] {
+            applyStructuralPatch(operations, nextRoot: root)
+        } else {
+            rebuildAll(from: root)
+        }
+        refreshTableCellRegistry()
+        refreshImageSelection()
+        refreshCaret()
+        currentRoot = root
+        isApplyingRemoteUpdate = false
+        setNeedsLayout()
+        layoutIfNeeded()
+    }
+
+    private func rebuildAll(from root: [String: Any]) {
+        clear()
+        nodeViews.removeAll()
+        tableCells.removeAll()
+        imageViews.removeAll()
+        textLeafViews.removeAll()
+        selectionAnchorCell = nil
+        selectionHeadCell = nil
+        let children = root["children"] as? [[String: Any]] ?? []
+        for (index, child) in children.enumerated() {
+            stack.addArrangedSubview(view(for: child, depth: 0, path: [index]))
+        }
+        if children.isEmpty {
+            let leaf = textBlockView(for: root, depth: 0)
+            nodeViews[[]] = leaf
+            stack.addArrangedSubview(leaf)
+        }
+    }
+
+    /// Applies canonical recursive patches at the smallest native view boundary.
+    /// Metadata-only changes mutate bindings in place; node replacements stop at
+    /// the nearest rendered owner (normally the edited text block); and root
+    /// splices preserve both unchanged prefixes and suffixes.
+    private func applyStructuralPatch(
+        _ operations: [[String: Any]],
+        nextRoot: [String: Any]
+    ) {
+        for operation in operations {
+            let type = operation["type"] as? String
+            let path = (operation["path"] as? [NSNumber])?.map(\.intValue) ?? []
+            switch type {
+            case "updateMetadata":
+                updateMetadata(at: path, from: nextRoot)
+            case "replaceNode":
+                guard !path.isEmpty else {
+                    rebuildAll(from: nextRoot)
+                    continue
+                }
+                replaceRenderedOwner(containing: path, from: nextRoot)
+            case "spliceChildren":
+                if path.isEmpty {
+                    applyRootSplice(operation, nextRoot: nextRoot)
+                } else {
+                    replaceRenderedOwner(containing: path, from: nextRoot)
+                }
+            default:
+                rebuildAll(from: nextRoot)
+                return
+            }
+        }
+    }
+
+    private func applyRootSplice(_ operation: [String: Any], nextRoot: [String: Any]) {
+        let start = max(0, (operation["startIndex"] as? NSNumber)?.intValue ?? 0)
+        let deleteCount = max(0, (operation["deleteCount"] as? NSNumber)?.intValue ?? 0)
+        let insertedCount = (operation["children"] as? [[String: Any]])?.count ?? 0
+        let nextChildren = nextRoot["children"] as? [[String: Any]] ?? []
+        guard start <= stack.arrangedSubviews.count,
+              start + deleteCount <= stack.arrangedSubviews.count,
+              start + insertedCount <= nextChildren.count
+        else {
+            rebuildAll(from: nextRoot)
+            return
+        }
+
+        removeBindings(underTopLevelRange: start..<(start + deleteCount))
+        for _ in 0..<deleteCount {
+            let old = stack.arrangedSubviews[start]
+            stack.removeArrangedSubview(old)
+            old.removeFromSuperview()
+        }
+        shiftTopLevelBindings(startingAt: start + deleteCount, by: insertedCount - deleteCount)
+        for offset in 0..<insertedCount {
+            let index = start + offset
+            stack.insertArrangedSubview(view(for: nextChildren[index], depth: 0, path: [index]), at: index)
+        }
+    }
+
+    private func replaceRenderedOwner(containing requestedPath: [Int], from root: [String: Any]) {
+        guard let ownerPath = nearestRenderedPath(containing: requestedPath),
+              !ownerPath.isEmpty,
+              let oldView = nodeViews[ownerPath],
+              let node = node(at: ownerPath, in: root)
+        else {
+            rebuildAll(from: root)
+            return
+        }
+        guard let parent = oldView.superview else {
+            rebuildAll(from: root)
+            return
+        }
+        removeBindings(under: ownerPath)
+        let replacement = view(for: node, depth: max(0, ownerPath.count - 1), path: ownerPath)
+        if let parentStack = parent as? UIStackView,
+           let index = parentStack.arrangedSubviews.firstIndex(where: { $0 === oldView }) {
+            parentStack.removeArrangedSubview(oldView)
+            oldView.removeFromSuperview()
+            parentStack.insertArrangedSubview(replacement, at: index)
+        } else if let index = parent.subviews.firstIndex(where: { $0 === oldView }) {
+            oldView.removeFromSuperview()
+            parent.insertSubview(replacement, at: index)
+            replacement.frame = oldView.frame
+        } else {
+            rebuildAll(from: root)
+        }
+    }
+
+    private func updateMetadata(at requestedPath: [Int], from root: [String: Any]) {
+        guard let ownerPath = nearestRenderedPath(containing: requestedPath),
+              let owner = nodeViews[ownerPath],
+              let node = node(at: ownerPath, in: root)
+        else { return }
+        if let leaf = owner as? TextLeafView {
+            let segments = attributedInlineContent(
+                for: node,
+                baseFont: leaf.font ?? baseFont,
+                textColor: leaf.textColor ?? baseTextColor
+            ).segments
+            if segments.isEmpty {
+                let blockPos = (node["docPos"] as? NSNumber)?.uint32Value ?? 0
+                let blockSize = (node["docSize"] as? NSNumber)?.uint32Value ?? 0
+                leaf.positionSegments = [
+                    .init(range: NSRange(location: 0, length: 0), text: "", docPos: blockPos, docSize: blockSize, isAtom: false),
+                ]
+            } else {
+                leaf.positionSegments = segments
+            }
+        }
+        if let cell = owner as? CellView {
+            cell.docPos = (node["docPos"] as? NSNumber)?.uint32Value ?? cell.docPos
+        }
+        if let image = owner as? BlockImageView {
+            image.docPos = (node["docPos"] as? NSNumber)?.uint32Value ?? image.docPos
+        }
+    }
+
+    private func nearestRenderedPath(containing requestedPath: [Int]) -> [Int]? {
+        var candidate = requestedPath
+        while true {
+            if nodeViews[candidate] != nil { return candidate }
+            guard !candidate.isEmpty else { return nil }
+            candidate.removeLast()
+        }
+    }
+
+    private func node(at path: [Int], in root: [String: Any]) -> [String: Any]? {
+        var current = root
+        for index in path {
+            guard let children = current["children"] as? [[String: Any]],
+                  index >= 0, index < children.count
+            else { return nil }
+            current = children[index]
+        }
+        return current
+    }
+
+    private func removeBindings(under path: [Int]) {
+        nodeViews = nodeViews.filter { key, _ in
+            key.count < path.count || Array(key.prefix(path.count)) != path
+        }
+    }
+
+    private func removeBindings(underTopLevelRange range: Range<Int>) {
+        nodeViews = nodeViews.filter { key, _ in
+            guard let first = key.first else { return true }
+            return !range.contains(first)
+        }
+    }
+
+    private func shiftTopLevelBindings(startingAt start: Int, by delta: Int) {
+        guard delta != 0 else { return }
+        var shifted: [[Int]: UIView] = [:]
+        for (path, view) in nodeViews {
+            guard let first = path.first, first >= start else {
+                shifted[path] = view
+                continue
+            }
+            var nextPath = path
+            nextPath[0] += delta
+            shifted[nextPath] = view
+        }
+        nodeViews = shifted
+    }
+
+    private func clear() {
+        for view in stack.arrangedSubviews {
+            stack.removeArrangedSubview(view)
+            view.removeFromSuperview()
+        }
+        currentRoot = nil
+        nodeViews.removeAll()
+        tableCells.removeAll()
+        imageViews.removeAll()
+        textLeafViews.removeAll()
+        selectionAnchorCell = nil
+        selectionHeadCell = nil
+        selectedNodePos = nil
+        selectedTextPos = nil
+    }
+
+    private func refreshTableCellRegistry() {
+        tableCells.removeAll()
+        imageViews.removeAll()
+        textLeafViews.removeAll()
+        func collect(_ view: UIView) {
+            if let cell = view as? CellView {
+                tableCells.append(cell)
+            }
+            if let image = view as? BlockImageView {
+                imageViews.append(image)
+            }
+            if let leaf = view as? TextLeafView {
+                textLeafViews.append(leaf)
+            }
+            for child in view.subviews {
+                collect(child)
+            }
+        }
+        for view in stack.arrangedSubviews {
+            collect(view)
+        }
+    }
+
+    private func view(for node: [String: Any], depth: Int, path: [Int]) -> UIView {
+        let rendered: UIView = switch node["kind"] as? String {
+        case "list":
+            listView(for: node, depth: depth, path: path)
+        case "listItem":
+            listItemView(for: node, index: 0, parentListType: nil, depth: depth, path: path)
+        case "columns":
+            columnsView(for: node, depth: depth, path: path)
+        case "column":
+            columnView(for: node, depth: depth, path: path)
+        case "table":
+            tableView(for: node, path: path)
+        case "tableRow":
+            rowView(for: node, rowIndex: 0, tableId: nextTableId, path: path)
+        case "tableCell":
+            cellView(for: node, tableId: nextTableId, rowIndex: 0, columnIndex: 0, path: path)
+        case "blockAtom":
+            atomView(for: node)
+        default:
+            if (node["kind"] as? String) == "block" {
+                blockContainerView(for: node, depth: depth, path: path)
+            } else {
+                textBlockView(for: node, depth: depth)
+            }
+        }
+        nodeViews[path] = rendered
+        return rendered
+    }
+
+    private func columnsView(for node: [String: Any], depth: Int, path: [Int]) -> UIView {
+        let row = UIStackView()
+        row.axis = .horizontal
+        row.alignment = .top
+        row.distribution = .fillEqually
+        row.spacing = 12
+        row.layoutMargins = UIEdgeInsets(top: 4, left: CGFloat(depth) * 8, bottom: 4, right: 0)
+        row.isLayoutMarginsRelativeArrangement = true
+        for (index, column) in (node["children"] as? [[String: Any]] ?? []).enumerated() {
+            row.addArrangedSubview(view(for: column, depth: depth + 1, path: path + [index]))
+        }
+        return row
+    }
+
+    private func columnView(for node: [String: Any], depth: Int, path: [Int]) -> UIView {
+        let column = UIStackView()
+        column.axis = .vertical
+        column.spacing = 4
+        for (index, child) in (node["children"] as? [[String: Any]] ?? []).enumerated() {
+            column.addArrangedSubview(view(for: child, depth: depth + 1, path: path + [index]))
+        }
+        if column.arrangedSubviews.isEmpty {
+            column.addArrangedSubview(textBlockView(for: node, depth: depth))
+        }
+        return column
+    }
+
+    private func listView(for node: [String: Any], depth: Int, path: [Int]) -> UIView {
+        let list = UIStackView()
+        list.axis = .vertical
+        list.spacing = 2
+        list.layoutMargins = UIEdgeInsets(top: 2, left: CGFloat(depth) * 12, bottom: 2, right: 0)
+        list.isLayoutMarginsRelativeArrangement = true
+        let children = node["children"] as? [[String: Any]] ?? []
+        let start = intAttr(node, "start") ?? 1
+        for (offset, child) in children.enumerated() {
+            list.addArrangedSubview(
+                listItemView(
+                    for: child,
+                    index: start + offset,
+                    parentListType: node["nodeType"] as? String,
+                    depth: depth,
+                    path: path + [offset]
+                )
+            )
+        }
+        return list
+    }
+
+    private func listItemView(
+        for node: [String: Any],
+        index: Int,
+        parentListType: String?,
+        depth: Int,
+        path: [Int]
+    ) -> UIView {
+        let row = UIStackView()
+        row.axis = .horizontal
+        row.alignment = .top
+        row.spacing = 8
+
+        row.addArrangedSubview(markerView(for: node, parentListType: parentListType, index: index))
+
+        let content = UIStackView()
+        content.axis = .vertical
+        content.spacing = 4
+        for (childIndex, child) in (node["children"] as? [[String: Any]] ?? []).enumerated() {
+            content.addArrangedSubview(view(for: child, depth: depth + 1, path: path + [childIndex]))
+        }
+        if content.arrangedSubviews.isEmpty {
+            content.addArrangedSubview(textBlockView(for: node, depth: depth + 1))
+        }
+        row.addArrangedSubview(content)
+        return row
+    }
+
+    private func blockContainerView(for node: [String: Any], depth: Int, path: [Int]) -> UIView {
+        let container = UIStackView()
+        container.axis = .vertical
+        container.spacing = 4
+        container.layoutMargins = UIEdgeInsets(top: 6, left: 12 + CGFloat(depth) * 8, bottom: 6, right: 0)
+        container.isLayoutMarginsRelativeArrangement = true
+        if (node["nodeType"] as? String) == "blockquote" {
+            container.layer.borderColor = UIColor.separator.cgColor
+            container.layer.borderWidth = 0
+            let border = BlockquoteStripeView()
+            border.backgroundColor = currentTheme?.blockquote?.borderColor ?? UIColor.separator
+            let row = UIStackView()
+            row.axis = .horizontal
+            row.spacing = currentTheme?.blockquote?.markerGap ?? 8
+            border.widthAnchor.constraint(equalToConstant: currentTheme?.blockquote?.borderWidth ?? 3).isActive = true
+            row.addArrangedSubview(border)
+            let quoteContent = UIStackView()
+            quoteContent.axis = .vertical
+            quoteContent.spacing = 4
+            for (index, child) in (node["children"] as? [[String: Any]] ?? []).enumerated() {
+                quoteContent.addArrangedSubview(view(for: child, depth: depth + 1, path: path + [index]))
+            }
+            row.addArrangedSubview(quoteContent)
+            return row
+        }
+        for (index, child) in (node["children"] as? [[String: Any]] ?? []).enumerated() {
+            container.addArrangedSubview(view(for: child, depth: depth + 1, path: path + [index]))
+        }
+        if container.arrangedSubviews.isEmpty {
+            container.addArrangedSubview(textBlockView(for: node, depth: depth))
+        }
+        return container
+    }
+
+    func blockquoteStripeRectsForTesting() -> [CGRect] {
+        layoutIfNeeded()
+        return descendants(of: self)
+            .compactMap { $0 as? BlockquoteStripeView }
+            .map { stripe in stripe.convert(stripe.bounds, to: self) }
+    }
+
+    func topLevelViewForTesting(at index: Int) -> UIView? {
+        guard index >= 0, index < stack.arrangedSubviews.count else { return nil }
+        return stack.arrangedSubviews[index]
+    }
+
+    var topLevelViewCountForTesting: Int {
+        stack.arrangedSubviews.count
+    }
+
+    func firstTextAttributesForTesting() -> [NSAttributedString.Key: Any]? {
+        func find(in view: UIView) -> TextLeafView? {
+            if let leaf = view as? TextLeafView, leaf.attributedText.length > 0 {
+                return leaf
+            }
+            return view.subviews.lazy.compactMap(find).first
+        }
+        guard let leaf = find(in: stack) else { return nil }
+        return leaf.attributedText.attributes(at: 0, effectiveRange: nil)
+    }
+
+    private func descendants(of view: UIView) -> [UIView] {
+        view.subviews.flatMap { [$0] + descendants(of: $0) }
+    }
+
+    private func tableView(for node: [String: Any], path: [Int]) -> UIView {
+        let tableId = nextTableId
+        nextTableId += 1
+        let table = UIStackView()
+        table.axis = .vertical
+        table.spacing = 0
+        table.layer.borderColor = UIColor.separator.cgColor
+        table.layer.borderWidth = 1
+        table.layer.cornerRadius = 6
+        table.clipsToBounds = true
+        for (index, row) in (node["children"] as? [[String: Any]] ?? []).enumerated() {
+            table.addArrangedSubview(rowView(for: row, rowIndex: index, tableId: tableId, path: path + [index]))
+        }
+        let pan = UIPanGestureRecognizer(target: self, action: #selector(handleTablePan(_:)))
+        pan.cancelsTouchesInView = false
+        table.addGestureRecognizer(pan)
+        return table
+    }
+
+    private func rowView(for node: [String: Any], rowIndex: Int, tableId: Int, path: [Int]) -> UIView {
+        let row = UIStackView()
+        row.axis = .horizontal
+        row.spacing = 0
+        row.distribution = .fillEqually
+        for (index, cell) in (node["children"] as? [[String: Any]] ?? []).enumerated() {
+            row.addArrangedSubview(cellView(for: cell, tableId: tableId, rowIndex: rowIndex, columnIndex: index, path: path + [index]))
+        }
+        return row
+    }
+
+    private func cellView(for node: [String: Any], tableId: Int, rowIndex: Int, columnIndex: Int, path: [Int]) -> UIView {
+        let cell = CellView()
+        cell.docPos = (node["docPos"] as? NSNumber)?.uint32Value ?? 0
+        cell.tableId = tableId
+        cell.rowIndex = rowIndex
+        cell.columnIndex = columnIndex
+        cell.axis = .vertical
+        cell.spacing = 4
+        cell.layoutMargins = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
+        cell.isLayoutMarginsRelativeArrangement = true
+        cell.layer.borderColor = UIColor.separator.cgColor
+        cell.layer.borderWidth = 0.5
+        cell.baseFillColor = (node["nodeType"] as? String) == "tableHeader"
+            ? UIColor.secondarySystemBackground
+            : (currentTheme?.backgroundColor ?? baseBackgroundColor)
+        cell.backgroundColor = cell.baseFillColor
+        cell.isUserInteractionEnabled = true
+        let tap = UITapGestureRecognizer(target: self, action: #selector(handleCellTap(_:)))
+        cell.addGestureRecognizer(tap)
+        tableCells.append(cell)
+        for (index, child) in (node["children"] as? [[String: Any]] ?? []).enumerated() {
+            cell.addArrangedSubview(view(for: child, depth: 0, path: path + [index]))
+        }
+        if cell.arrangedSubviews.isEmpty {
+            cell.addArrangedSubview(textBlockView(for: node, depth: 0))
+        }
+        return cell
+    }
+
+    private func textBlockView(for node: [String: Any], depth: Int) -> UIView {
+        let leaf = TextLeafView()
+        leaf.font = font(for: node)
+        let nodeType = node["nodeType"] as? String ?? "paragraph"
+        let textStyle = currentTheme?.effectiveTextStyle(for: nodeType)
+        let textColor = textStyle?.color ?? baseTextColor
+        leaf.textColor = textColor
+        let rendered = attributedInlineContent(
+            for: node,
+            baseFont: leaf.font ?? baseFont,
+            textColor: textColor
+        )
+        let attributedText = NSMutableAttributedString(attributedString: rendered.text)
+        if attributedText.length > 0,
+           textStyle?.lineHeight != nil || textStyle?.spacingAfter != nil {
+            let paragraphStyle = NSMutableParagraphStyle()
+            if let lineHeight = textStyle?.lineHeight {
+                paragraphStyle.minimumLineHeight = lineHeight
+                paragraphStyle.maximumLineHeight = lineHeight
+            }
+            paragraphStyle.paragraphSpacing = textStyle?.spacingAfter ?? 0
+            attributedText.addAttribute(
+                .paragraphStyle,
+                value: paragraphStyle,
+                range: NSRange(location: 0, length: attributedText.length)
+            )
+        }
+        leaf.attributedText = attributedText
+        leaf.positionSegments = rendered.segments
+        if leaf.positionSegments.isEmpty {
+            let blockPos = (node["docPos"] as? NSNumber)?.uint32Value ?? 0
+            let blockSize = (node["docSize"] as? NSNumber)?.uint32Value ?? 0
+            leaf.positionSegments = [
+                .init(
+                    range: NSRange(location: 0, length: 0),
+                    text: "",
+                    docPos: blockPos,
+                    docSize: blockSize,
+                    isAtom: false
+                ),
+            ]
+        }
+        if isCodeBlock(node) {
+            leaf.backgroundColor = currentTheme?.codeBlock?.backgroundColor ?? UIColor.secondarySystemBackground
+            leaf.textContainerInset = UIEdgeInsets(
+                top: currentTheme?.codeBlock?.paddingVertical ?? 8,
+                left: currentTheme?.codeBlock?.paddingHorizontal ?? 12,
+                bottom: currentTheme?.codeBlock?.paddingVertical ?? 8,
+                right: currentTheme?.codeBlock?.paddingHorizontal ?? 12
+            )
+            leaf.layer.cornerRadius = currentTheme?.codeBlock?.borderRadius ?? 8
+            leaf.clipsToBounds = true
+        } else {
+            leaf.backgroundColor = .clear
+            leaf.textContainerInset = .zero
+        }
+        leaf.isScrollEnabled = false
+        leaf.isEditable = false
+        leaf.isSelectable = false
+        leaf.textContainer.widthTracksTextView = false
+        leaf.textContainer.lineFragmentPadding = 0
+        leaf.onActivate = { [weak self] docPos in
+            guard let self, self.isEditable else { return }
+            self.onRequestTextInput?(docPos)
+        }
+        leaf.addGestureRecognizer(UITapGestureRecognizer(target: leaf, action: #selector(TextLeafView.activate(_:))))
+        return leaf
+    }
+
+    private func attributedInlineContent(
+        for node: [String: Any],
+        baseFont: UIFont,
+        textColor: UIColor
+    ) -> (text: NSAttributedString, segments: [TextLeafView.PositionSegment]) {
+        let output = NSMutableAttributedString()
+        var segments: [TextLeafView.PositionSegment] = []
+
+        func append(_ current: [String: Any]) {
+            let kind = current["kind"] as? String
+            let docPos = (current["docPos"] as? NSNumber)?.uint32Value ?? 0
+            let docSize = (current["docSize"] as? NSNumber)?.uint32Value ?? 0
+            if kind == "text" {
+                let value = current["text"] as? String ?? ""
+                let range = NSRange(location: output.length, length: value.utf16.count)
+                output.append(NSAttributedString(
+                    string: value,
+                    attributes: inlineAttributes(for: current, baseFont: baseFont, textColor: textColor)
+                ))
+                segments.append(.init(
+                    range: range,
+                    text: value,
+                    docPos: docPos,
+                    docSize: docSize,
+                    isAtom: false
+                ))
+                return
+            }
+            if kind == "inlineAtom" {
+                let nodeType = current["nodeType"] as? String
+                let value = nodeType == "hardBreak" || nodeType == "hard_break"
+                    ? "\n"
+                    : (current["label"] as? String ?? "\u{FFFC}")
+                let range = NSRange(location: output.length, length: value.utf16.count)
+                var attributes: [NSAttributedString.Key: Any] = [
+                    .font: baseFont,
+                    .foregroundColor: textColor,
+                ]
+                if nodeType == "mention" {
+                    attributes[.foregroundColor] = tintColor
+                    attributes[.backgroundColor] = tintColor.withAlphaComponent(0.12)
+                }
+                output.append(NSAttributedString(string: value, attributes: attributes))
+                segments.append(.init(
+                    range: range,
+                    text: value,
+                    docPos: docPos,
+                    docSize: max(docSize, 1),
+                    isAtom: true
+                ))
+                return
+            }
+            for child in current["children"] as? [[String: Any]] ?? [] {
+                append(child)
+            }
+        }
+
+        append(node)
+        return (output, segments)
+    }
+
+    private func inlineAttributes(
+        for node: [String: Any],
+        baseFont: UIFont,
+        textColor: UIColor
+    ) -> [NSAttributedString.Key: Any] {
+        var attributes: [NSAttributedString.Key: Any] = [
+            .font: baseFont,
+            .foregroundColor: textColor,
+        ]
+        let marks = node["marks"] as? [[String: Any]] ?? []
+        let markTypes = Set(marks.compactMap { $0["type"] as? String })
+        var traits: UIFontDescriptor.SymbolicTraits = []
+        if markTypes.contains("bold") { traits.insert(.traitBold) }
+        if markTypes.contains("italic") { traits.insert(.traitItalic) }
+        if !traits.isEmpty, let descriptor = baseFont.fontDescriptor.withSymbolicTraits(traits) {
+            attributes[.font] = UIFont(descriptor: descriptor, size: baseFont.pointSize)
+        }
+        if markTypes.contains("underline") || markTypes.contains("link") {
+            attributes[.underlineStyle] = NSUnderlineStyle.single.rawValue
+        }
+        if markTypes.contains("strike") {
+            attributes[.strikethroughStyle] = NSUnderlineStyle.single.rawValue
+        }
+        if markTypes.contains("link") {
+            attributes[.foregroundColor] = tintColor
+        }
+        if markTypes.contains("code") {
+            attributes[.font] = UIFont.monospacedSystemFont(ofSize: baseFont.pointSize, weight: .regular)
+        }
+        return attributes
+    }
+
+    private func atomView(for node: [String: Any]) -> UIView {
+        if isHorizontalRule(node) {
+            let margin = currentTheme?.horizontalRule?.verticalMargin ?? 16
+            let wrapper = UIView()
+            let line = UIView()
+            line.backgroundColor = currentTheme?.horizontalRule?.color ?? UIColor.separator
+            wrapper.addSubview(line)
+            let thickness = currentTheme?.horizontalRule?.thickness ?? 1
+            wrapper.heightAnchor.constraint(equalToConstant: margin * 2 + thickness).isActive = true
+            line.translatesAutoresizingMaskIntoConstraints = false
+            NSLayoutConstraint.activate([
+                line.leadingAnchor.constraint(equalTo: wrapper.leadingAnchor),
+                line.trailingAnchor.constraint(equalTo: wrapper.trailingAnchor),
+                line.centerYAnchor.constraint(equalTo: wrapper.centerYAnchor),
+                line.heightAnchor.constraint(equalToConstant: thickness)
+            ])
+            return wrapper
+        }
+        if (node["nodeType"] as? String) == "image" {
+            return imageView(for: node)
+        }
+        let label = UILabel()
+        label.text = node["label"] as? String ?? node["nodeType"] as? String ?? "Block"
+        label.font = .systemFont(ofSize: 14, weight: .medium)
+        label.textColor = .secondaryLabel
+        label.backgroundColor = .secondarySystemBackground
+        label.layer.cornerRadius = 6
+        label.clipsToBounds = true
+        label.numberOfLines = 0
+        return label
+    }
+
+    private func imageView(for node: [String: Any]) -> UIView {
+        let attrs = node["attrs"] as? [String: Any] ?? [:]
+        let source = attrs["src"] as? String ?? ""
+        let imageView = BlockImageView()
+        imageView.docPos = (node["docPos"] as? NSNumber)?.uint32Value ?? 0
+        imageView.preferredWidth = (attrs["width"] as? NSNumber).map { CGFloat($0.doubleValue) }
+        imageView.preferredHeight = (attrs["height"] as? NSNumber).map { CGFloat($0.doubleValue) }
+        imageView.contentMode = .scaleAspectFit
+        imageView.clipsToBounds = true
+        imageView.layer.cornerRadius = 8
+        imageView.backgroundColor = .secondarySystemFill
+        imageView.isUserInteractionEnabled = true
+        imageView.addGestureRecognizer(
+            UITapGestureRecognizer(target: self, action: #selector(handleImageTap(_:)))
+        )
+        NativeImageLoader.load(source: source) { [weak self, weak imageView] image in
+            guard let self, let imageView else { return }
+            imageView.image = image
+            imageView.invalidateIntrinsicContentSize()
+            imageView.refreshPreferredSizeConstraints()
+            self.setNeedsLayout()
+        }
+        let wrapper = UIView()
+        wrapper.addSubview(imageView)
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        let preferredWidth = imageView.widthAnchor.constraint(
+            equalToConstant: imageView.intrinsicContentSize.width
+        )
+        preferredWidth.priority = .defaultHigh
+        let preferredHeight = imageView.heightAnchor.constraint(
+            equalToConstant: imageView.intrinsicContentSize.height
+        )
+        imageView.preferredWidthConstraint = preferredWidth
+        imageView.preferredHeightConstraint = preferredHeight
+        NSLayoutConstraint.activate([
+            imageView.leadingAnchor.constraint(equalTo: wrapper.leadingAnchor),
+            imageView.topAnchor.constraint(equalTo: wrapper.topAnchor),
+            imageView.bottomAnchor.constraint(equalTo: wrapper.bottomAnchor),
+            imageView.widthAnchor.constraint(lessThanOrEqualTo: wrapper.widthAnchor),
+            preferredWidth,
+            preferredHeight
+        ])
+        return wrapper
+    }
+
+    @objc private func handleImageTap(_ gesture: UITapGestureRecognizer) {
+        guard let imageView = gesture.view as? BlockImageView else { return }
+        selectImage(imageView)
+    }
+
+    private func selectImage(_ imageView: BlockImageView) {
+        guard isEditable, currentEditorId != 0 else { return }
+        selectedNodePos = imageView.docPos
+        editorSetNodeSelection(id: currentEditorId, pos: imageView.docPos)
+        refreshImageSelection()
+        onAppliedUpdate?(editorGetSelectionState(id: currentEditorId))
+    }
+
+    private func refreshImageSelection() {
+        for imageView in imageViews {
+            let selected = isEditable && imageView.docPos == selectedNodePos
+            imageView.layer.borderWidth = selected ? 2 : 0
+            imageView.layer.borderColor = selected ? UIColor.systemBlue.cgColor : nil
+        }
+    }
+
+    func hasImage(at point: CGPoint) -> Bool {
+        imageView(at: point) != nil
+    }
+
+    @discardableResult
+    func selectImage(at point: CGPoint) -> Bool {
+        guard isEditable, currentEditorId != 0, let imageView = imageView(at: point) else {
+            return false
+        }
+        selectImage(imageView)
+        return true
+    }
+
+    func selectedImageGeometry() -> (docPos: UInt32, rect: CGRect)? {
+        guard let selectedNodePos,
+              let imageView = imageViews.first(where: { $0.docPos == selectedNodePos })
+        else { return nil }
+        return (selectedNodePos, imageView.convert(imageView.bounds, to: self))
+    }
+
+    func selectedCaretRect() -> CGRect? {
+        guard let selectedTextPos else { return nil }
+        return caretRect(forDocPosition: selectedTextPos)
+    }
+
+    func caretRect(forDocPosition docPosition: UInt32) -> CGRect? {
+        for leaf in textLeafViews {
+            leaf.geometryContainerWidth = effectiveGeometryWidth(for: leaf)
+            guard let rect = leaf.caretRect(forDocPosition: docPosition) else { continue }
+            let converted = leaf.convert(rect, to: self)
+            if converted.height > 0 {
+                return converted
+            }
+        }
+        return nil
+    }
+
+    private func effectiveGeometryWidth(for leaf: TextLeafView) -> CGFloat {
+        var widths = [leaf.bounds.width]
+        var ancestor = leaf.superview
+        while let view = ancestor, view !== self {
+            if view.bounds.width > 0 { widths.append(view.bounds.width) }
+            ancestor = view.superview
+        }
+        if bounds.width > 0 { widths.append(bounds.width) }
+        return widths.filter { $0 > 0 }.min() ?? max(bounds.width, 1)
+    }
+
+    func selectionRects(anchor: UInt32, head: UInt32) -> [CGRect] {
+        let from = min(anchor, head)
+        let to = max(anchor, head)
+        guard from < to else { return [] }
+        return textLeafViews.flatMap { leaf -> [CGRect] in
+            guard let first = leaf.positionSegments.first?.docPos,
+                  let lastSegment = leaf.positionSegments.last
+            else { return [] }
+            let last = lastSegment.docPos + lastSegment.docSize
+            let localFrom = max(from, first)
+            let localTo = min(to, last)
+            guard localFrom < localTo else { return [] }
+            leaf.geometryContainerWidth = effectiveGeometryWidth(for: leaf)
+            return leaf.selectionRects(from: localFrom, to: localTo).map {
+                leaf.convert($0, to: self)
+            }
+        }
+    }
+
+    private func refreshCaret() {
+        guard isEditable, isInputFocused, selectedNodePos == nil,
+              let rect = selectedCaretRect()
+        else {
+            caretView.isHidden = true
+            return
+        }
+        caretView.frame = CGRect(x: rect.minX, y: rect.minY, width: 2, height: rect.height)
+        caretView.isHidden = false
+        bringSubviewToFront(caretView)
+    }
+
+    func firstImageGeometryForTesting() -> (docPos: UInt32, rect: CGRect)? {
+        guard let imageView = imageViews.first else { return nil }
+        return (imageView.docPos, imageView.convert(imageView.bounds, to: self))
+    }
+
+    func imagePreview(docPos: UInt32) -> UIImage? {
+        imageViews.first(where: { $0.docPos == docPos })?.image
+    }
+
+    func setImagePreviewActive(_ active: Bool) {
+        guard let selectedNodePos,
+              let imageView = imageViews.first(where: { $0.docPos == selectedNodePos })
+        else { return }
+        imageView.alpha = active ? 0 : 1
+    }
+
+    func maximumImageWidth() -> CGFloat {
+        max(48, bounds.width - contentInset.left - contentInset.right)
+    }
+
+    func resizeImage(docPos: UInt32, width: UInt32, height: UInt32) {
+        guard currentEditorId != 0 else { return }
+        let updateJSON = editorResizeImageAtDocPos(
+            id: currentEditorId,
+            docPos: docPos,
+            width: width,
+            height: height
+        )
+        applyUpdateJSON(updateJSON, editorId: currentEditorId)
+        onAppliedUpdate?(updateJSON)
+    }
+
+    private func imageView(at point: CGPoint) -> BlockImageView? {
+        imageViews.last { imageView in
+            imageView.convert(imageView.bounds, to: self).contains(point)
+        }
+    }
+
+    private func font(for node: [String: Any]) -> UIFont {
+        let nodeType = node["nodeType"] as? String ?? "paragraph"
+        let fallback: UIFont = switch nodeType {
+        case "h1":
+            .systemFont(ofSize: 28, weight: .bold)
+        case "h2":
+            .systemFont(ofSize: 24, weight: .bold)
+        case "h3":
+            .systemFont(ofSize: 21, weight: .semibold)
+        case "h4":
+            .systemFont(ofSize: 19, weight: .semibold)
+        case "h5":
+            .systemFont(ofSize: 17, weight: .semibold)
+        case "h6":
+            .systemFont(ofSize: 16, weight: .semibold)
+        case "codeBlock", "code_block":
+            .monospacedSystemFont(ofSize: baseFont.pointSize, weight: .regular)
+        default:
+            baseFont
+        }
+        return currentTheme?.effectiveTextStyle(for: nodeType).resolvedFont(fallback: fallback)
+            ?? fallback
+    }
+
+    private func listMarker(for nodeType: String?, index: Int) -> String {
+        switch nodeType {
+        case "orderedList", "ordered_list":
+            return "\(index)."
+        case "taskList", "task_list":
+            return "☐"
+        default:
+            return "•"
+        }
+    }
+
+    private func intAttr(_ node: [String: Any], _ key: String) -> Int? {
+        guard let attrs = node["attrs"] as? [String: Any] else { return nil }
+        if let number = attrs[key] as? NSNumber {
+            return number.intValue
+        }
+        return attrs[key] as? Int
+    }
+
+    private func markerView(for node: [String: Any], parentListType: String?, index: Int) -> UIView {
+        guard parentListType == "taskList" || parentListType == "task_list" else {
+            let marker = UILabel()
+            marker.text = listMarker(for: parentListType, index: index)
+            marker.font = baseFont
+            marker.textColor = currentTheme?.list?.markerColor ?? baseTextColor
+            marker.textAlignment = .right
+            marker.setContentHuggingPriority(.required, for: .horizontal)
+            marker.widthAnchor.constraint(equalToConstant: 24).isActive = true
+            marker.heightAnchor.constraint(equalToConstant: 24).isActive = true
+            return marker
+        }
+
+        let checked = boolAttr(node, "checked") ?? false
+        let button = UIButton(type: .custom)
+        button.setTitle(checked ? "✓" : "", for: .normal)
+        button.titleLabel?.font = .systemFont(ofSize: 12, weight: .bold)
+        button.setTitleColor(.white, for: .normal)
+        button.backgroundColor = checked ? (currentTheme?.list?.markerColor ?? tintColor) : .clear
+        button.layer.borderColor = (currentTheme?.list?.markerColor ?? UIColor.secondaryLabel).cgColor
+        button.layer.borderWidth = 1.5
+        button.layer.cornerRadius = 4
+        button.widthAnchor.constraint(equalToConstant: 18).isActive = true
+        button.heightAnchor.constraint(equalToConstant: 18).isActive = true
+        button.addAction(UIAction { [weak self] _ in
+            self?.toggleTaskItem(node)
+        }, for: .touchUpInside)
+
+        let wrapper = UIView()
+        wrapper.widthAnchor.constraint(equalToConstant: 24).isActive = true
+        wrapper.heightAnchor.constraint(equalToConstant: 24).isActive = true
+        button.translatesAutoresizingMaskIntoConstraints = false
+        wrapper.addSubview(button)
+        NSLayoutConstraint.activate([
+            button.centerXAnchor.constraint(equalTo: wrapper.centerXAnchor),
+            button.centerYAnchor.constraint(equalTo: wrapper.centerYAnchor),
+        ])
+        return wrapper
+    }
+
+    private func toggleTaskItem(_ node: [String: Any]) {
+        guard isEditable, currentEditorId != 0 else { return }
+        let textInfo = textRange(in: node)
+        let docPos = textInfo.docFrom ?? UInt32((node["docPos"] as? NSNumber)?.uint32Value ?? 0) + 1
+        let scalar = editorDocToScalar(id: currentEditorId, docPos: docPos)
+        let updateJSON = editorToggleTaskItemCheckedAtSelectionScalar(
+            id: currentEditorId,
+            scalarAnchor: scalar,
+            scalarHead: scalar
+        )
+        applyUpdateJSON(updateJSON, editorId: currentEditorId)
+        onAppliedUpdate?(updateJSON)
+    }
+
+    private func boolAttr(_ node: [String: Any], _ key: String) -> Bool? {
+        guard let attrs = node["attrs"] as? [String: Any] else { return nil }
+        return attrs[key] as? Bool
+    }
+
+    private func isCodeBlock(_ node: [String: Any]) -> Bool {
+        let nodeType = node["nodeType"] as? String
+        return nodeType == "codeBlock" || nodeType == "code_block"
+    }
+
+    private func isHorizontalRule(_ node: [String: Any]) -> Bool {
+        let nodeType = node["nodeType"] as? String
+        return nodeType == "horizontalRule" || nodeType == "horizontal_rule"
+    }
+
+    private func textRange(in node: [String: Any]) -> (text: String, docFrom: UInt32?, docTo: UInt32?) {
+        var text = ""
+        var docFrom: UInt32?
+        var docTo: UInt32?
+        appendTextRange(in: node, text: &text, docFrom: &docFrom, docTo: &docTo)
+        return (text, docFrom, docTo)
+    }
+
+    private func appendTextRange(
+        in node: [String: Any],
+        text: inout String,
+        docFrom: inout UInt32?,
+        docTo: inout UInt32?
+    ) {
+        if (node["kind"] as? String) == "text" {
+            let value = node["text"] as? String ?? ""
+            let from = (node["docPos"] as? NSNumber)?.uint32Value
+            if docFrom == nil {
+                docFrom = from
+            }
+            text += value
+            if let from {
+                docTo = from + UInt32(value.unicodeScalars.count)
+            }
+            return
+        }
+        for child in node["children"] as? [[String: Any]] ?? [] {
+            appendTextRange(in: child, text: &text, docFrom: &docFrom, docTo: &docTo)
+        }
+    }
+
+    @objc private func handleCellTap(_ gesture: UITapGestureRecognizer) {
+        guard isEditable else { return }
+        guard let cell = gesture.view as? CellView else { return }
+        selectCell(anchor: cell, head: cell)
+    }
+
+    @objc private func handleTablePan(_ gesture: UIPanGestureRecognizer) {
+        guard isEditable else { return }
+        let point = gesture.location(in: self)
+        guard let cell = cell(at: point) else { return }
+        switch gesture.state {
+        case .began:
+            selectionAnchorCell = cell
+            selectCell(anchor: cell, head: cell)
+        case .changed:
+            if let anchor = selectionAnchorCell {
+                selectCell(anchor: anchor, head: cell)
+            }
+        case .ended, .cancelled, .failed:
+            if let anchor = selectionAnchorCell {
+                selectCell(anchor: anchor, head: cell)
+            }
+        default:
+            break
+        }
+    }
+
+    private func cell(at point: CGPoint) -> CellView? {
+        tableCells.first { cell in
+            cell.convert(cell.bounds, to: self).contains(point)
+        }
+    }
+
+    private func selectCell(anchor: CellView, head: CellView) {
+        guard currentEditorId != 0, anchor.docPos > 0, head.docPos > 0 else { return }
+        selectionAnchorCell = anchor
+        selectionHeadCell = head
+        editorSetCellSelection(id: currentEditorId, anchor: anchor.docPos, head: head.docPos)
+        paintCellSelection(anchor: anchor, head: head)
+        onAppliedUpdate?(editorGetSelectionState(id: currentEditorId))
+    }
+
+    private func paintCellSelection(anchor: CellView, head: CellView) {
+        let sameTable = anchor.tableId == head.tableId
+        let minRow = min(anchor.rowIndex, head.rowIndex)
+        let maxRow = max(anchor.rowIndex, head.rowIndex)
+        let minColumn = min(anchor.columnIndex, head.columnIndex)
+        let maxColumn = max(anchor.columnIndex, head.columnIndex)
+        for cell in tableCells {
+            let selected: Bool
+            if sameTable {
+                selected = cell.tableId == anchor.tableId &&
+                    (minRow...maxRow).contains(cell.rowIndex) &&
+                    (minColumn...maxColumn).contains(cell.columnIndex)
+            } else {
+                selected = cell === anchor || cell === head
+            }
+            cell.backgroundColor = selected ? UIColor.systemBlue.withAlphaComponent(0.12) : cell.baseFillColor
+            cell.layer.borderColor = selected ? UIColor.systemBlue.cgColor : UIColor.separator.cgColor
+            cell.layer.borderWidth = selected ? 1.5 : 0.5
+        }
+    }
+}