@apollohg/react-native-rich-text-editor 2.0.1 → 2.0.2

package/ios/EditorInteractionOverlays.swift

@@ -408,38 +408,29 @@ final class ImageResizeOverlayView: UIView {
 
     private struct DragState {
         let corner: Corner
-        let originalRect: CGRect
+        let originalSize: CGSize
         let docPos: UInt32
         let maximumWidth: CGFloat
+        let editorId: UInt64
+        let attachment: BlockImageAttachment
+        let originalWidth: CGFloat?
+        let originalHeight: CGFloat?
+        var previewSize: CGSize
     }
 
     private weak var editorView: RichTextEditorView?
     private let selectionLayer = CAShapeLayer()
-    private let previewBackdropView = UIView()
-    private let previewImageView = UIImageView()
     private var handleViews: [Corner: ImageResizeHandleView] = [:]
     private var currentRect: CGRect?
     private var currentDocPos: UInt32?
     private var dragState: DragState?
     private let handleSize: CGFloat = 20
-    private let minimumImageSize: CGFloat = 48
 
     override init(frame: CGRect) {
         super.init(frame: frame)
         backgroundColor = .clear
         clipsToBounds = true
 
-        previewBackdropView.isUserInteractionEnabled = false
-        previewBackdropView.isHidden = true
-        previewBackdropView.layer.zPosition = 1
-        addSubview(previewBackdropView)
-
-        previewImageView.isUserInteractionEnabled = false
-        previewImageView.isHidden = true
-        previewImageView.contentMode = .scaleToFill
-        previewImageView.layer.zPosition = 2
-        addSubview(previewImageView)
-
         selectionLayer.strokeColor = UIColor.systemBlue.cgColor
         selectionLayer.fillColor = UIColor.clear.cgColor
         selectionLayer.lineWidth = 2
@@ -467,8 +458,8 @@ final class ImageResizeOverlayView: UIView {
     }
 
     func refresh() {
-        if dragState != nil {
-            return
+        if let dragState, !isCurrentDrag(dragState) {
+            finishPreviewResize(commit: false)
         }
 
         guard let editorView,
@@ -478,7 +469,6 @@ final class ImageResizeOverlayView: UIView {
             return
         }
 
-        hidePreviewLayers()
         applyGeometry(rect: geometry.rect, docPos: geometry.docPos)
     }
 
@@ -488,15 +478,16 @@ final class ImageResizeOverlayView: UIView {
     }
 
     func simulatePreviewResizeForTesting(width: CGFloat, height: CGFloat) {
-        guard beginPreviewResize(from: .bottomRight) else { return }
-        let nextRect = CGRect(
-            origin: dragState?.originalRect.origin ?? .zero,
-            size: editorView?.clampedImageSize(
-                CGSize(width: width, height: height),
-                maximumWidth: dragState?.maximumWidth
-            ) ?? CGSize(width: width, height: height)
-        )
-        updatePreviewRect(nextRect)
+        if dragState == nil, !beginPreviewResize(from: .bottomRight) { return }
+        let size = editorView?.clampedImageSize(
+            CGSize(width: width, height: height), maximumWidth: dragState?.maximumWidth
+        ) ?? CGSize(width: width, height: height)
+        updatePreviewSize(size)
+    }
+
+    func simulatePreviewDragForTesting(corner: Corner, translation: CGPoint) {
+        if dragState == nil, !beginPreviewResize(from: corner) { return }
+        updatePreview(translation: translation)
     }
 
     func commitPreviewResizeForTesting() {
@@ -511,10 +502,6 @@ final class ImageResizeOverlayView: UIView {
         !isHidden
     }
 
-    var previewHasImageForTesting: Bool {
-        !previewImageView.isHidden && previewImageView.image != nil
-    }
-
     func interceptsPointForTesting(_ location: CGPoint) -> Bool {
         self.point(inside: location, with: nil)
     }
@@ -530,8 +517,7 @@ final class ImageResizeOverlayView: UIView {
     }
 
     private func hideOverlay() {
-        hidePreviewLayers()
-        dragState = nil
+        if dragState != nil { finishPreviewResize(commit: false) }
         currentRect = nil
         currentDocPos = nil
         selectionLayer.path = nil
@@ -539,64 +525,94 @@ final class ImageResizeOverlayView: UIView {
     }
 
     private func applyGeometry(rect: CGRect, docPos: UInt32) {
-        let integralRect = rect.integral
-        currentRect = integralRect
+        guard currentRect != rect || currentDocPos != docPos || isHidden else { return }
+        currentRect = rect
         currentDocPos = docPos
-        selectionLayer.path = UIBezierPath(roundedRect: integralRect, cornerRadius: 8).cgPath
+        CATransaction.begin()
+        CATransaction.setDisableActions(true)
+        selectionLayer.path = UIBezierPath(roundedRect: rect, cornerRadius: 8).cgPath
         isHidden = false
-        layoutHandleViews(for: integralRect)
+        layoutHandleViews(for: rect)
+        CATransaction.commit()
     }
 
-    private func hidePreviewLayers() {
-        previewBackdropView.isHidden = true
-        previewImageView.isHidden = true
-        previewImageView.image = nil
-    }
-
-    private func showPreview(docPos: UInt32, originalRect: CGRect) {
-        previewBackdropView.backgroundColor = editorView?.imageResizePreviewBackgroundColor() ?? .systemBackground
-        previewBackdropView.frame = originalRect
-        previewBackdropView.isHidden = false
-
-        previewImageView.image = editorView?.imagePreviewForResize(docPos: docPos)
-        previewImageView.frame = originalRect
-        previewImageView.isHidden = previewImageView.image == nil
+    private func isCurrentDrag(_ state: DragState) -> Bool {
+        guard let editorView, editorView.editorId == state.editorId,
+              editorView.textView.selectedImageSelectionState()?.docPos == state.docPos,
+              editorView.textView.blockImageAttachment(docPos: state.docPos)?.attachment === state.attachment
+        else { return false }
+        return true
     }
 
     @discardableResult
     private func beginPreviewResize(from corner: Corner) -> Bool {
-        guard let currentRect, let currentDocPos else { return false }
-        editorView?.setImageResizePreviewActive(true)
-        let maximumWidth = editorView?.maximumImageWidthForResizeGesture() ?? currentRect.width
+        guard let editorView, let currentRect, let currentDocPos,
+              let image = editorView.textView.blockImageAttachment(docPos: currentDocPos)
+        else { return false }
+        editorView.setImageResizePreviewActive(true)
+        let inset = image.attachment.styleBox?.inset ?? .zero
+        let contentSize = CGSize(
+            width: max(1, currentRect.width - inset.left - inset.right),
+            height: max(1, currentRect.height - inset.top - inset.bottom)
+        )
         dragState = DragState(
             corner: corner,
-            originalRect: currentRect,
+            originalSize: contentSize,
             docPos: currentDocPos,
-            maximumWidth: maximumWidth
+            maximumWidth: max(48, editorView.maximumImageWidthForResizeGesture() - inset.left - inset.right),
+            editorId: editorView.editorId,
+            attachment: image.attachment,
+            originalWidth: image.attachment.preferredWidth,
+            originalHeight: image.attachment.preferredHeight,
+            previewSize: contentSize
         )
-        showPreview(docPos: currentDocPos, originalRect: currentRect)
         return true
     }
 
-    private func updatePreviewRect(_ rect: CGRect) {
-        guard let currentDocPos else { return }
-        applyGeometry(rect: rect, docPos: currentDocPos)
-        previewImageView.frame = currentRect ?? rect.integral
+    private func updatePreviewSize(_ proposedSize: CGSize) {
+        guard var state = dragState, let editorView else { return }
+        guard isCurrentDrag(state) else {
+            finishPreviewResize(commit: false)
+            return
+        }
+        let scale = window?.screen.scale ?? 1
+        let size = proposedSize == state.originalSize ? proposedSize : CGSize(
+            width: (proposedSize.width * scale).rounded() / scale,
+            height: (proposedSize.height * scale).rounded() / scale
+        )
+        guard size != state.previewSize else { return }
+        state.previewSize = size
+        dragState = state
+        UIView.performWithoutAnimation {
+            editorView.textView.previewResizeImageAtDocPos(
+                state.docPos,
+                width: size.width,
+                height: size.height
+            )
+            if let geometry = editorView.selectedImageGeometry() {
+                applyGeometry(rect: geometry.rect, docPos: geometry.docPos)
+            }
+        }
     }
 
     private func finishPreviewResize(commit: Bool) {
-        guard let dragState else { return }
-        let finalSize = currentRect?.size ?? dragState.originalRect.size
-        self.dragState = nil
-        editorView?.setImageResizePreviewActive(false)
-        if commit {
-            editorView?.resizeImage(docPos: dragState.docPos, size: finalSize)
+        guard let state = dragState, let editorView else { return }
+        let shouldCommit = commit && isCurrentDrag(state)
+        dragState = nil
+        if shouldCommit, state.previewSize != state.originalSize {
+            editorView.resizeImage(docPos: state.docPos, size: state.previewSize)
         } else {
-            hidePreviewLayers()
-        }
-        DispatchQueue.main.async { [weak self] in
-            self?.refresh()
+            editorView.textView.restoreImageResizePreview(
+                state.attachment, width: state.originalWidth, height: state.originalHeight
+            )
         }
+        editorView.setImageResizePreviewActive(false)
+        refresh()
+    }
+
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+        if window == nil { finishPreviewResize(commit: false) }
     }
 
     private func layoutHandleViews(for rect: CGRect) {
@@ -624,50 +640,30 @@ final class ImageResizeOverlayView: UIView {
         }
     }
 
-    private func anchorPoint(for corner: Corner, in rect: CGRect) -> CGPoint {
-        switch corner {
-        case .topLeft:
-            return CGPoint(x: rect.maxX, y: rect.maxY)
-        case .topRight:
-            return CGPoint(x: rect.minX, y: rect.maxY)
-        case .bottomLeft:
-            return CGPoint(x: rect.maxX, y: rect.minY)
-        case .bottomRight:
-            return CGPoint(x: rect.minX, y: rect.minY)
-        }
+    static func resizedSize(from size: CGSize, corner: Corner, translation: CGPoint) -> CGSize {
+        let dx = (corner == .topRight || corner == .bottomRight) ? translation.x : -translation.x
+        let dy = (corner == .bottomLeft || corner == .bottomRight) ? translation.y : -translation.y
+        let lengthSquared = max(1, size.width * size.width + size.height * size.height)
+        let minimumScale = 48 / max(1, min(size.width, size.height))
+        let scale = max(minimumScale, 1 + (dx * size.width + dy * size.height) / lengthSquared)
+        return CGSize(width: size.width * scale, height: size.height * scale)
     }
 
-    private func resizedRect(
-        from originalRect: CGRect,
-        corner: Corner,
-        translation: CGPoint,
-        maximumWidth: CGFloat?
-    ) -> CGRect {
-        let aspectRatio = max(originalRect.width / max(originalRect.height, 1), 0.1)
-        let signedDx = (corner == .topRight || corner == .bottomRight) ? translation.x : -translation.x
-        let signedDy = (corner == .bottomLeft || corner == .bottomRight) ? translation.y : -translation.y
-        let widthScale = (originalRect.width + signedDx) / max(originalRect.width, 1)
-        let heightScale = (originalRect.height + signedDy) / max(originalRect.height, 1)
-        let scale = max(minimumImageSize / max(originalRect.width, 1), widthScale, heightScale)
-        let unclampedSize = CGSize(
-            width: max(minimumImageSize, originalRect.width * scale),
-            height: max(minimumImageSize / aspectRatio, (max(minimumImageSize, originalRect.width * scale) / aspectRatio))
-        )
-        let clampedSize = editorView?.clampedImageSize(unclampedSize, maximumWidth: maximumWidth) ?? unclampedSize
-        let width = clampedSize.width
-        let height = clampedSize.height
-        let anchor = anchorPoint(for: corner, in: originalRect)
-
-        switch corner {
-        case .topLeft:
-            return CGRect(x: anchor.x - width, y: anchor.y - height, width: width, height: height)
-        case .topRight:
-            return CGRect(x: anchor.x, y: anchor.y - height, width: width, height: height)
-        case .bottomLeft:
-            return CGRect(x: anchor.x - width, y: anchor.y, width: width, height: height)
-        case .bottomRight:
-            return CGRect(x: anchor.x, y: anchor.y, width: width, height: height)
+    private func updatePreview(translation: CGPoint) {
+        guard let dragState else { return }
+        if translation == .zero {
+            updatePreviewSize(dragState.originalSize)
+            return
         }
+        let size = Self.resizedSize(
+            from: dragState.originalSize,
+            corner: dragState.corner,
+            translation: translation
+        )
+        let clampedSize = editorView?.clampedImageSize(
+            size, maximumWidth: dragState.maximumWidth
+        ) ?? size
+        updatePreviewSize(clampedSize)
     }
 
     @objc
@@ -676,22 +672,18 @@ final class ImageResizeOverlayView: UIView {
 
         switch gesture.state {
         case .began:
-            _ = beginPreviewResize(from: handleView.corner)
+            if beginPreviewResize(from: handleView.corner) {
+                updatePreview(translation: gesture.translation(in: window))
+            }
         case .changed:
-            guard let dragState else { return }
-            let nextRect = resizedRect(
-                from: dragState.originalRect,
-                corner: dragState.corner,
-                translation: gesture.translation(in: self),
-                maximumWidth: dragState.maximumWidth
-            )
-            updatePreviewRect(nextRect)
+            updatePreview(translation: gesture.translation(in: window))
         case .ended:
+            updatePreview(translation: gesture.translation(in: window))
             finishPreviewResize(commit: true)
         case .cancelled, .failed:
             finishPreviewResize(commit: false)
         default:
-            finishPreviewResize(commit: false)
+            break
         }
     }
 }

package/ios/EditorLayoutManager.swift

@@ -54,7 +54,16 @@ final class EditorLayoutManager: NSLayoutManager, NSLayoutManagerDelegate {
         storage.enumerateAttribute(editorInlineLineHeightAttribute, in: characters) { value, _, _ in
             height = max(height, EditorTheme.cgFloat(value) ?? 0)
         }
+        var ascent = baselineOffset.pointee + (height - lineFragmentUsedRect.pointee.height) / 2
+        var descent = height - ascent
+        storage.enumerateAttribute(editorMentionBoxAttribute, in: characters) { value, _, _ in
+            guard let chip = value as? EditorMentionRenderedBox else { return }
+            ascent = max(ascent, chip.baselineOffset)
+            descent = max(descent, chip.size.height - chip.baselineOffset)
+        }
+        height = ascent + descent
         let extra = height - lineFragmentUsedRect.pointee.height
+        let baselineAdjustment = ascent - baselineOffset.pointee
         var leading: CGFloat = 0
         var overlap: CGFloat = 0
         if characters.location < storage.length,
@@ -76,7 +85,7 @@ final class EditorLayoutManager: NSLayoutManager, NSLayoutManagerDelegate {
         lineFragmentRect.pointee.size.height += extra + leading
         lineFragmentUsedRect.pointee.size.height = height
         lineFragmentUsedRect.pointee.origin.y += leading + overlap
-        baselineOffset.pointee += extra / 2 + leading
+        baselineOffset.pointee += baselineAdjustment + leading
         return true
     }
 
@@ -226,10 +235,11 @@ final class EditorLayoutManager: NSLayoutManager, NSLayoutManagerDelegate {
         storage.enumerateAttribute(editorMentionBoxAttribute, in: visible) { value, range, _ in
             guard let box = value as? EditorMentionRenderedBox else { return }
             let glyph = self.glyphIndexForCharacter(at: range.location)
-            let line = self.lineFragmentUsedRect(forGlyphAt: glyph, effectiveRange: nil)
             let location = self.location(forGlyphAt: glyph)
             let fragment = self.lineFragmentRect(forGlyphAt: glyph, effectiveRange: nil)
-            let rect = CGRect(x: fragment.minX + location.x + origin.x, y: line.midY - box.size.height / 2 + origin.y, width: box.size.width, height: box.size.height)
+            let rect = CGRect(x: fragment.minX + location.x + origin.x,
+                y: fragment.minY + location.y + origin.y - box.baselineOffset,
+                width: box.size.width, height: box.size.height)
             box.box.draw(in: rect, context: context)
             let labelHeight = box.label?.size().height ?? 0
             box.label?.draw(at: CGPoint(x: rect.minX + box.padding.left,

package/ios/EditorStyleSheet.swift

@@ -150,6 +150,14 @@ struct EditorStyleBox {
     }
     var inset: UIEdgeInsets { padding.adding(borders) }
     var outerInsets: UIEdgeInsets { inset.adding(margin) }
+    var mentionInsets: UIEdgeInsets {
+        UIEdgeInsets(
+            top: number("paddingTop", fallback: number("padding", fallback: 4)),
+            left: number("paddingLeft", fallback: number("padding", fallback: 6)),
+            bottom: number("paddingBottom", fallback: number("padding", fallback: 4)),
+            right: number("paddingRight", fallback: number("padding", fallback: 6))
+        ).adding(borders)
+    }
     private func insets(_ key: String) -> UIEdgeInsets {
         UIEdgeInsets(top: number(key + "Top", fallback: number(key)), left: number(key + "Left", fallback: number(key)), bottom: number(key + "Bottom", fallback: number(key)), right: number(key + "Right", fallback: number(key)))
     }
@@ -410,15 +418,18 @@ final class EditorMentionRenderedBox: NSObject {
     let label: NSAttributedString?
     let size: CGSize
     let padding: UIEdgeInsets
+    let baselineOffset: CGFloat
 
     init(box: EditorStyleBox, label: NSAttributedString? = nil) {
         self.box = box
         self.label = label
-        padding = UIEdgeInsets(top: 4, left: 6, bottom: 4, right: 6).adding(box.inset)
+        padding = box.mentionInsets
         let measured = label?.size() ?? .zero
         let lineHeight = box.number("lineHeight", fallback: measured.height)
         size = CGSize(width: ceil(measured.width) + padding.left + padding.right,
             height: ceil(max(measured.height, lineHeight)) + padding.top + padding.bottom)
+        let font = label.flatMap { $0.length > 0 ? $0.attribute(.font, at: 0, effectiveRange: nil) as? UIFont : nil }
+        baselineOffset = padding.top + (size.height - padding.top - padding.bottom - measured.height) / 2 + (font?.ascender ?? 0)
     }
 }
 

package/ios/EditorTextView+Images.swift

@@ -289,7 +289,7 @@ extension EditorTextView {
         return (selectionState.docPos, rect)
     }
 
-    private func blockImageAttachment(docPos: UInt32) -> (range: NSRange, attachment: BlockImageAttachment)? {
+    func blockImageAttachment(docPos: UInt32) -> (range: NSRange, attachment: BlockImageAttachment)? {
         let fullRange = NSRange(location: 0, length: textStorage.length)
         var resolved: (range: NSRange, attachment: BlockImageAttachment)?
         textStorage.enumerateAttribute(
@@ -309,10 +309,6 @@ extension EditorTextView {
         return resolved
     }
 
-    func imagePreviewForDocPos(_ docPos: UInt32) -> UIImage? {
-        blockImageAttachment(docPos: docPos)?.attachment.previewImage()
-    }
-
     func maximumRenderableImageWidth() -> CGFloat {
         let containerWidth: CGFloat
         if bounds.width > 0 {
@@ -337,14 +333,40 @@ extension EditorTextView {
         }
     }
 
-    func previewResizeImageAtDocPos(_ docPos: UInt32, width: CGFloat, height: CGFloat) {
+    func previewResizeImageAtDocPos(_ docPos: UInt32, width: CGFloat?, height: CGFloat?) {
         guard let attachmentState = blockImageAttachment(docPos: docPos) else { return }
-        attachmentState.attachment.setPreferredSize(width: width, height: height)
-        layoutManager.invalidateLayout(forCharacterRange: attachmentState.range, actualCharacterRange: nil)
-        layoutManager.invalidateDisplay(forCharacterRange: attachmentState.range)
+        updateImageResizePreview(attachmentState.attachment, range: attachmentState.range, width: width, height: height)
+    }
+
+    func restoreImageResizePreview(_ attachment: BlockImageAttachment, width: CGFloat?, height: CGFloat?) {
+        var attachmentRange: NSRange?
+        textStorage.enumerateAttribute(.attachment, in: NSRange(location: 0, length: textStorage.length)) { value, range, stop in
+            if value as? BlockImageAttachment === attachment {
+                attachmentRange = range
+                stop.pointee = true
+            }
+        }
+        guard let attachmentRange else { return }
+        updateImageResizePreview(attachment, range: attachmentRange, width: width, height: height)
+    }
+
+    private func updateImageResizePreview(_ attachment: BlockImageAttachment, range: NSRange, width: CGFloat?, height: CGFloat?) {
+        guard attachment.preferredWidth != width || attachment.preferredHeight != height else { return }
+        let previousOffset = contentOffset
+        attachment.preferredWidth = width
+        attachment.preferredHeight = height
+        layoutManager.invalidateLayout(forCharacterRange: range, actualCharacterRange: nil)
+        layoutManager.invalidateDisplay(forCharacterRange: range)
         textStorage.beginEditing()
-        textStorage.edited(.editedAttributes, range: attachmentState.range, changeInLength: 0)
+        textStorage.edited(.editedAttributes, range: range, changeInLength: 0)
         textStorage.endEditing()
+        invalidateAutoGrowHeightMeasurement()
+        layoutManager.ensureLayout(forCharacterRange: range)
+        setNeedsLayout()
+        layoutIfNeeded()
+        setContentOffset(previousOffset, animated: false)
+        notifyHeightChangeIfNeeded()
+        onViewportMayChange?()
     }
 
     func setImageResizePreviewActive(_ active: Bool) {

package/ios/EditorTextView.swift

@@ -415,7 +415,7 @@ final class EditorTextView: UITextView, UIGestureRecognizerDelegate, UITextDragD
                 height: min(maxPlaceholderHeight, ceil(fittedHeight))
             )
         }
-        if heightBehavior == .autoGrow, !isPreviewingImageResize {
+        if heightBehavior == .autoGrow {
             let currentWidth = ceil(bounds.width)
             if abs(currentWidth - lastAutoGrowMeasuredWidth) > 0.5 {
                 autoGrowHeightCheckIsDirty = true

package/ios/EditorV2Adapter+RenderValidation.swift

@@ -150,7 +150,7 @@ extension EditorV2Adapter {
     private static func isValidMentionStyle(_ value: Any) -> Bool {
         guard let style = value as? [String: Any] else { return false }
         let colors: Set<String> = ["color", "backgroundColor", "textDecorationColor", "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"]
-        let dimensions: Set<String> = ["fontSize", "lineHeight", "letterSpacing", "borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"]
+        let dimensions: Set<String> = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontSize", "lineHeight", "letterSpacing", "borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"]
         let strings: Set<String> = ["fontFamily", "fontWeight", "fontStyle", "textDecorationLine", "textDecorationStyle", "borderStyle"]
         guard hasOnlyKeys(style, colors.union(dimensions).union(strings)) else { return false }
         for key in colors where style[key] != nil {
@@ -159,7 +159,7 @@ extension EditorV2Adapter {
         for key in dimensions where style[key] != nil {
             guard let number = finiteNumber(style[key])?.doubleValue else { return false }
             if ["fontSize", "lineHeight"].contains(key), number <= 0 { return false }
-            if key.hasPrefix("border"), number < 0 { return false }
+            if key.hasPrefix("border") || key.hasPrefix("padding"), number < 0 { return false }
         }
         for key in strings where style[key] != nil {
             guard let value = style[key] as? String else { return false }

package/ios/NativeToolbar+ButtonStyle.swift

@@ -108,9 +108,7 @@ extension EditorAccessoryToolbarView {
                 ?? (resolvedAppearance == .native ? self.tintColor : .secondaryLabel)
         }
 
-        button.tintColor = tintColor
-        button.setTitleColor(tintColor, for: .normal)
-        button.setTitleColor(tintColor, for: .disabled)
+        applyButtonForeground(to: button, color: tintColor)
         button.tintAdjustmentMode = enabled ? .automatic : .normal
         button.alpha = enabled || resolvedAppearance == .native ? 1 : 0.7
         let inactiveBackgroundColor = buttonStyle?.backgroundColor
@@ -139,7 +137,20 @@ extension EditorAccessoryToolbarView {
             color: backgroundColor,
             cornerRadius: cornerRadius
         )
-        applyButtonIconStyle(to: button, item: item)
+        applyButtonIconStyle(to: button, item: item, color: tintColor)
+    }
+
+    /// A configured `UIButton` paints disabled content in its own system gray,
+    /// ignoring `tintColor`, so the colour must be forced through the
+    /// configuration's transformers as well.
+    private func applyButtonForeground(to button: UIButton, color: UIColor) {
+        button.tintColor = color
+        button.setTitleColor(color, for: .normal)
+        button.setTitleColor(color, for: .disabled)
+        guard #available(iOS 15.0, *), var configuration = button.configuration else { return }
+        configuration.baseForegroundColor = color
+        configuration.imageColorTransformer = UIConfigurationColorTransformer { _ in color }
+        button.configuration = configuration
     }
 
     /// Own the configured background to avoid stacking it with UIButton state fills.
@@ -175,13 +186,14 @@ extension EditorAccessoryToolbarView {
         return min(requestedSize, resolvedButtonSize)
     }
 
-    private func applyButtonIconStyle(to button: UIButton, item: NativeToolbarItem) {
+    private func applyButtonIconStyle(to button: UIButton, item: NativeToolbarItem, color: UIColor) {
         let iconSize = resolvedButtonIconSize(for: item)
         let font = UIFont.systemFont(ofSize: iconSize, weight: .semibold)
         if #available(iOS 15.0, *), var configuration = button.configuration {
             configuration.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { incoming in
                 var outgoing = incoming
                 outgoing.font = font
+                outgoing.foregroundColor = color
                 return outgoing
             }
             button.configuration = configuration

package/ios/NativeToolbar+Diagnostics.swift

@@ -25,6 +25,21 @@ extension EditorAccessoryToolbarView {
         buttonBindings.indices.contains(index) ? buttonBindings[index].button.tintColor : nil
     }
 
+    /// The foreground colour a configured button will actually paint for its
+    /// current state, resolved through the configuration transformers rather
+    /// than `tintColor`, which UIKit ignores for disabled configured buttons.
+    func buttonPaintedForegroundColorForTesting(_ index: Int) -> UIColor? {
+        guard buttonBindings.indices.contains(index) else { return nil }
+        let button = buttonBindings[index].button
+        guard #available(iOS 15.0, *), let configuration = button.configuration else {
+            return button.titleColor(for: button.state)
+        }
+        if button.image(for: .normal) != nil {
+            return configuration.imageColorTransformer?(.black)
+        }
+        return configuration.titleTextAttributesTransformer?(AttributeContainer()).foregroundColor
+    }
+
     func buttonFontSizeForTesting(_ index: Int) -> CGFloat? {
         buttonBindings.indices.contains(index) ? buttonBindings[index].button.titleLabel?.font.pointSize : nil
     }

package/ios/RenderBridge+Atoms.swift

@@ -192,7 +192,6 @@ extension RenderBridge {
             }
             let attachment = BlockImageAttachment(
                 source: source,
-                placeholderTint: textColor,
                 preferredWidth: jsonCGFloat(elementAttrs["width"]),
                 preferredHeight: jsonCGFloat(elementAttrs["height"])
             )

package/ios/RenderBridge+Attachments.swift

@@ -101,7 +101,6 @@ final class AtomBlockAttachment: NSTextAttachment {
 final class BlockImageAttachment: NSTextAttachment {
     var styleBox: EditorStyleBox?
     let source: String
-    let placeholderTint: UIColor
     private weak var loadOwner: RenderImageLoadOwner?
     private var loadReceipt: RenderImageLoadOwner.ImageLoadReceipt?
     var preferredWidth: CGFloat?
@@ -110,12 +109,10 @@ final class BlockImageAttachment: NSTextAttachment {
 
     init(
         source: String,
-        placeholderTint: UIColor,
         preferredWidth: CGFloat?,
         preferredHeight: CGFloat?
     ) {
         self.source = source
-        self.placeholderTint = placeholderTint
         self.preferredWidth = preferredWidth
         self.preferredHeight = preferredHeight
         self.loadOwner = RenderImageLoadOwner.current
@@ -131,15 +128,6 @@ final class BlockImageAttachment: NSTextAttachment {
         loadReceipt?.cancel()
     }
 
-    func setPreferredSize(width: CGFloat, height: CGFloat) {
-        preferredWidth = width
-        preferredHeight = height
-    }
-
-    func previewImage() -> UIImage? {
-        loadedImage ?? image
-    }
-
     override func attachmentBounds(
         for textContainer: NSTextContainer?,
         proposedLineFragment lineFrag: CGRect,
@@ -193,9 +181,6 @@ final class BlockImageAttachment: NSTextAttachment {
                 renderer.cgContext.clip(to: imageBounds.inset(by: styleBox.inset))
                 if let loadedImage {
                     loadedImage.draw(in: styleBox.imageRect(loadedImage.size, in: imageBounds))
-                } else {
-                    let iconBounds = imageBounds.insetBy(dx: imageBounds.width * 0.35, dy: imageBounds.height * 0.35)
-                    UIImage(systemName: "photo")?.withTintColor(placeholderTint, renderingMode: .alwaysOriginal).draw(in: iconBounds)
                 }
             }
         }
@@ -206,20 +191,6 @@ final class BlockImageAttachment: NSTextAttachment {
             let path = UIBezierPath(roundedRect: imageBounds, cornerRadius: 12)
             UIColor.secondarySystemFill.setFill()
             path.fill()
-
-            let iconSize = min(imageBounds.width, imageBounds.height) * 0.28
-            let iconOrigin = CGPoint(
-                x: imageBounds.midX - (iconSize / 2),
-                y: imageBounds.midY - (iconSize / 2)
-            )
-            let iconRect = CGRect(origin: iconOrigin, size: CGSize(width: iconSize, height: iconSize))
-
-            if #available(iOS 13.0, *) {
-                let config = UIImage.SymbolConfiguration(pointSize: iconSize, weight: .medium)
-                let icon = UIImage(systemName: "photo", withConfiguration: config)?
-                    .withTintColor(placeholderTint.withAlphaComponent(0.7), renderingMode: .alwaysOriginal)
-                icon?.draw(in: iconRect)
-            }
         }
     }