@apollohg/react-native-prose-editor 0.1.1 → 0.3.0

package/ios/RenderBridge.swift

@@ -1,5 +1,16 @@
 import UIKit
 
+extension Notification.Name {
+    static let editorImageAttachmentDidLoad = Notification.Name(
+        "com.apollohg.editor.imageAttachmentDidLoad"
+    )
+}
+
+private enum RenderImageCache {
+    static let cache = NSCache<NSString, UIImage>()
+    static let queue = DispatchQueue(label: "com.apollohg.editor.image-loader", qos: .userInitiated)
+}
+
 // MARK: - Constants
 
 /// Custom NSAttributedString attribute keys for editor metadata.
@@ -34,6 +45,18 @@ enum RenderBridgeAttributes {
 
     /// Stores the reserved list marker gutter width.
     static let listMarkerWidth = NSAttributedString.Key("com.apollohg.editor.listMarkerWidth")
+
+    /// Stores the rendered blockquote border color.
+    static let blockquoteBorderColor = NSAttributedString.Key("com.apollohg.editor.blockquoteBorderColor")
+
+    /// Stores the rendered blockquote border width.
+    static let blockquoteBorderWidth = NSAttributedString.Key("com.apollohg.editor.blockquoteBorderWidth")
+
+    /// Stores the rendered blockquote gap between border and text.
+    static let blockquoteMarkerGap = NSAttributedString.Key("com.apollohg.editor.blockquoteMarkerGap")
+
+    /// Marks synthetic zero-width placeholders used only for UIKit layout.
+    static let syntheticPlaceholder = NSAttributedString.Key("com.apollohg.editor.syntheticPlaceholder")
 }
 
 /// Layout constants for paragraph styles.
@@ -56,6 +79,15 @@ enum LayoutConstants {
     /// Vertical padding above and below the horizontal rule (points).
     static let horizontalRuleVerticalPadding: CGFloat = 8.0
 
+    /// Total leading inset reserved for each blockquote depth.
+    static let blockquoteIndent: CGFloat = 18.0
+
+    /// Width of the rendered blockquote border bar.
+    static let blockquoteBorderWidth: CGFloat = 3.0
+
+    /// Gap between the blockquote border bar and the text that follows.
+    static let blockquoteMarkerGap: CGFloat = 8.0
+
     /// Bullet character for unordered list items.
     static let unorderedListBullet = "\u{2022} "
 
@@ -141,7 +173,7 @@ final class RenderBridge {
             switch type {
             case "textRun":
                 let text = element["text"] as? String ?? ""
-                let marks = element["marks"] as? [String] ?? []
+                let marks = element["marks"] as? [Any] ?? []
                 let blockFont = resolvedFont(
                     for: blockStack,
                     baseFont: baseFont,
@@ -167,9 +199,14 @@ final class RenderBridge {
             case "voidInline":
                 let nodeType = element["nodeType"] as? String ?? ""
                 let docPos = jsonUInt32(element["docPos"])
+                let attrs = element["attrs"] as? [String: Any] ?? [:]
+                if nodeType == "hardBreak" {
+                    overrideTrailingParagraphSpacing(in: result, paragraphSpacing: 0)
+                }
                 let attrStr = attributedStringForVoidInline(
                     nodeType: nodeType,
                     docPos: docPos,
+                    attrs: attrs,
                     baseFont: baseFont,
                     textColor: textColor,
                     blockStack: blockStack,
@@ -180,6 +217,7 @@ final class RenderBridge {
             case "voidBlock":
                 let nodeType = element["nodeType"] as? String ?? ""
                 let docPos = jsonUInt32(element["docPos"])
+                let attrs = element["attrs"] as? [String: Any] ?? [:]
 
                 // Add inter-block newline if not the first block.
                 if !isFirstBlock {
@@ -187,13 +225,21 @@ final class RenderBridge {
                         in: result,
                         pendingParagraphSpacing: &pendingTrailingParagraphSpacing
                     )
-                    result.append(interBlockNewline(baseFont: baseFont, textColor: textColor))
+                    result.append(
+                        interBlockNewline(
+                            baseFont: baseFont,
+                            textColor: textColor,
+                            blockStack: [],
+                            theme: theme
+                        )
+                    )
                 }
                 isFirstBlock = false
 
                 let attrStr = attributedStringForVoidBlock(
                     nodeType: nodeType,
                     docPos: docPos,
+                    elementAttrs: attrs,
                     baseFont: baseFont,
                     textColor: textColor,
                     theme: theme
@@ -225,7 +271,14 @@ final class RenderBridge {
                         in: result,
                         pendingParagraphSpacing: &pendingTrailingParagraphSpacing
                     )
-                    result.append(interBlockNewline(baseFont: baseFont, textColor: textColor))
+                    result.append(
+                        interBlockNewline(
+                            baseFont: baseFont,
+                            textColor: textColor,
+                            blockStack: [],
+                            theme: theme
+                        )
+                    )
                 }
                 isFirstBlock = false
 
@@ -244,18 +297,40 @@ final class RenderBridge {
                 let depth = jsonUInt8(element["depth"])
                 let listContext = element["listContext"] as? [String: Any]
                 let isListItemContainer = nodeType == "listItem" && listContext != nil
+                let isTransparentContainer = nodeType == "blockquote"
+                let ctx = BlockContext(
+                    nodeType: nodeType,
+                    depth: depth,
+                    listContext: listContext,
+                    markerPending: isListItemContainer
+                )
                 let nestedListItemContainer =
                     isListItemContainer && (theme?.list?.itemSpacing != nil)
                     && blockStack.contains(where: { $0.nodeType == "listItem" && $0.listContext != nil })
 
-                if !isListItemContainer {
+                if !isListItemContainer && !isTransparentContainer {
                     // Add inter-block newline before non-first rendered blocks.
                     if !isFirstBlock {
                         applyPendingTrailingParagraphSpacing(
                             in: result,
                             pendingParagraphSpacing: &pendingTrailingParagraphSpacing
                         )
-                        result.append(interBlockNewline(baseFont: baseFont, textColor: textColor))
+                        let newlineBlockStack: [BlockContext]
+                        if blockquoteDepth(in: blockStack + [ctx]) > 0,
+                           !trailingRenderedContentHasBlockquote(in: result)
+                        {
+                            newlineBlockStack = []
+                        } else {
+                            newlineBlockStack = blockStack + [ctx]
+                        }
+                        result.append(
+                            interBlockNewline(
+                                baseFont: baseFont,
+                                textColor: textColor,
+                                blockStack: newlineBlockStack,
+                                theme: theme
+                            )
+                        )
                     }
                     isFirstBlock = false
                 } else if applyPendingTrailingParagraphSpacing(
@@ -271,12 +346,6 @@ final class RenderBridge {
                 }
 
                 // Push block context for inline children to reference.
-                let ctx = BlockContext(
-                    nodeType: nodeType,
-                    depth: depth,
-                    listContext: listContext,
-                    markerPending: isListItemContainer
-                )
                 blockStack.append(ctx)
 
                 var markerListContext: [String: Any]? = nil
@@ -291,7 +360,7 @@ final class RenderBridge {
                 if markerListContext != nil {
                     if var currentBlock = blockStack.popLast() {
                         currentBlock.listMarkerContext = markerListContext
-                        if currentBlock.listContext == nil {
+                        if currentBlock.listContext != nil {
                             currentBlock.listContext = markerListContext
                         }
                         blockStack.append(currentBlock)
@@ -301,8 +370,18 @@ final class RenderBridge {
                 }
 
             case "blockEnd":
-                if let endedBlock = blockStack.popLast(), endedBlock.listContext != nil {
-                    pendingTrailingParagraphSpacing = theme?.list?.itemSpacing
+                if let endedBlock = blockStack.popLast() {
+                    appendTrailingHardBreakPlaceholderIfNeeded(
+                        in: result,
+                        endedBlock: endedBlock,
+                        remainingBlockStack: blockStack,
+                        baseFont: baseFont,
+                        textColor: textColor,
+                        theme: theme
+                    )
+                    if endedBlock.listContext != nil {
+                        pendingTrailingParagraphSpacing = theme?.list?.itemSpacing
+                    }
                 }
 
             default:
@@ -315,7 +394,7 @@ final class RenderBridge {
 
     // MARK: - Mark Handling
 
-    /// Build NSAttributedString attributes for a set of mark names.
+    /// Build NSAttributedString attributes for a set of render marks.
     ///
     /// Supported marks:
     /// - `bold` -> adds `.traitBold` to the font descriptor
@@ -326,7 +405,7 @@ final class RenderBridge {
     ///
     /// Multiple marks are combined: "bold italic" produces a bold-italic font.
     static func attributesForMarks(
-        _ marks: [String],
+        _ marks: [Any],
         baseFont: UIFont,
         textColor: UIColor
     ) -> [NSAttributedString.Key: Any] {
@@ -338,9 +417,18 @@ final class RenderBridge {
 
         var traits: UIFontDescriptor.SymbolicTraits = []
         var useMonospace = false
-
         for mark in marks {
-            switch mark {
+            let markType: String
+            if let markName = mark as? String {
+                markType = markName
+            } else if let markObject = mark as? [String: Any],
+                      let resolvedType = markObject["type"] as? String {
+                markType = resolvedType
+            } else {
+                continue
+            }
+
+            switch markType {
             case "bold", "strong":
                 traits.insert(.traitBold)
             case "italic", "em":
@@ -351,6 +439,9 @@ final class RenderBridge {
                 attrs[.strikethroughStyle] = NSUnderlineStyle.single.rawValue
             case "code":
                 useMonospace = true
+            case "link":
+                attrs[.underlineStyle] = NSUnderlineStyle.single.rawValue
+                attrs[.foregroundColor] = UIColor.systemBlue
             default:
                 break
             }
@@ -391,6 +482,7 @@ final class RenderBridge {
     private static func attributedStringForVoidInline(
         nodeType: String,
         docPos: UInt32,
+        attrs _: [String: Any],
         baseFont: UIFont,
         textColor: UIColor,
         blockStack: [BlockContext],
@@ -409,7 +501,14 @@ final class RenderBridge {
 
         switch nodeType {
         case "hardBreak":
-            return NSAttributedString(string: "\n", attributes: styledAttrs)
+            var hardBreakAttrs = styledAttrs
+            if let paragraphStyle = (hardBreakAttrs[.paragraphStyle] as? NSParagraphStyle)?.mutableCopy()
+                as? NSMutableParagraphStyle
+            {
+                paragraphStyle.paragraphSpacing = 0
+                hardBreakAttrs[.paragraphStyle] = paragraphStyle
+            }
+            return NSAttributedString(string: "\n", attributes: hardBreakAttrs)
         default:
             // Unknown void inline: render as object replacement character.
             return NSAttributedString(
@@ -428,6 +527,7 @@ final class RenderBridge {
     private static func attributedStringForVoidBlock(
         nodeType: String,
         docPos: UInt32,
+        elementAttrs: [String: Any],
         baseFont: UIFont,
         textColor: UIColor,
         theme: EditorTheme?
@@ -449,6 +549,25 @@ final class RenderBridge {
             let range = NSRange(location: 0, length: attrStr.length)
             attrStr.addAttributes(attrs, range: range)
             return attrStr
+        case "image":
+            guard let source = (elementAttrs["src"] as? String)?.trimmingCharacters(in: .whitespacesAndNewlines),
+                  !source.isEmpty
+            else {
+                return NSAttributedString(
+                    string: LayoutConstants.objectReplacementCharacter,
+                    attributes: attrs
+                )
+            }
+            let attachment = BlockImageAttachment(
+                source: source,
+                placeholderTint: textColor,
+                preferredWidth: jsonCGFloat(elementAttrs["width"]),
+                preferredHeight: jsonCGFloat(elementAttrs["height"])
+            )
+            let attrStr = NSMutableAttributedString(attachment: attachment)
+            let range = NSRange(location: 0, length: attrStr.length)
+            attrStr.addAttributes(attrs, range: range)
+            return attrStr
         default:
             // Unknown void block: render as object replacement character.
             return NSAttributedString(
@@ -539,11 +658,15 @@ final class RenderBridge {
     /// a hanging indent so the bullet/number sits in the margin.
     static func paragraphStyleForBlock(
         _ context: BlockContext,
+        blockStack: [BlockContext],
         theme: EditorTheme? = nil,
         baseFont: UIFont = .systemFont(ofSize: 16)
     ) -> NSMutableParagraphStyle {
         let style = NSMutableParagraphStyle()
-        let blockStyle = theme?.effectiveTextStyle(for: context.nodeType)
+        let blockStyle = theme?.effectiveTextStyle(
+            for: context.nodeType,
+            inBlockquote: blockquoteDepth(in: blockStack) > 0
+        )
         let spacing = blockStyle?.spacingAfter
             ?? (context.listContext != nil ? theme?.list?.itemSpacing : nil)
             ?? LayoutConstants.paragraphSpacing
@@ -551,7 +674,15 @@ final class RenderBridge {
 
         let indentPerDepth = theme?.list?.indent ?? LayoutConstants.indentPerDepth
         let markerWidth = listMarkerWidth(for: context, theme: theme, baseFont: baseFont)
-        let baseIndent = CGFloat(context.depth) * indentPerDepth
+        let quoteDepth = CGFloat(blockquoteDepth(in: blockStack))
+        let quoteIndent = max(
+            theme?.blockquote?.indent ?? LayoutConstants.blockquoteIndent,
+            (theme?.blockquote?.markerGap ?? LayoutConstants.blockquoteMarkerGap)
+                + (theme?.blockquote?.borderWidth ?? LayoutConstants.blockquoteBorderWidth)
+        )
+        let baseIndent = (CGFloat(context.depth) * indentPerDepth)
+            - (quoteDepth * indentPerDepth)
+            + (quoteDepth * quoteIndent)
 
         if context.listContext != nil {
             // List item: reserve a fixed gutter and align all wrapped lines to
@@ -587,11 +718,7 @@ final class RenderBridge {
 
     // MARK: - Private Helpers
 
-    /// Safely extract a UInt32 from a JSON dictionary value.
-    ///
-    /// `JSONSerialization` produces `NSNumber` for numeric values. Direct `as? UInt32`
-    /// cast may fail depending on the stored numeric type. This helper handles all
-    /// numeric types that `JSONSerialization` can produce.
+    /// Extract a `UInt32` from a JSON value produced by `JSONSerialization`.
     static func jsonUInt32(_ value: Any?) -> UInt32 {
         if let number = value as? NSNumber {
             return number.uint32Value
@@ -599,7 +726,7 @@ final class RenderBridge {
         return 0
     }
 
-    /// Safely extract a UInt8 from a JSON dictionary value.
+    /// Extract a `UInt8` from a JSON value produced by `JSONSerialization`.
     static func jsonUInt8(_ value: Any?) -> UInt8 {
         if let number = value as? NSNumber {
             return number.uint8Value
@@ -607,7 +734,21 @@ final class RenderBridge {
         return 0
     }
 
-    /// Default attributed string attributes (font + color, no special styling).
+    /// Extract a positive `CGFloat` from a JSON value produced by `JSONSerialization`.
+    static func jsonCGFloat(_ value: Any?) -> CGFloat? {
+        if let number = value as? NSNumber {
+            let resolved = CGFloat(truncating: number)
+            return resolved > 0 ? resolved : nil
+        }
+        if let string = value as? String,
+           let resolved = Double(string.trimmingCharacters(in: .whitespacesAndNewlines)),
+           resolved > 0
+        {
+            return CGFloat(resolved)
+        }
+        return nil
+    }
+
     private static func defaultAttributes(
         baseFont: UIFont,
         textColor: UIColor
@@ -618,9 +759,6 @@ final class RenderBridge {
         ]
     }
 
-    /// Apply the current block context's paragraph style to a mutable attributes dictionary.
-    ///
-    /// This is a no-op if no block context is active.
     @discardableResult
     private static func applyBlockStyle(
         to attrs: [NSAttributedString.Key: Any],
@@ -632,6 +770,7 @@ final class RenderBridge {
         let blockFont = mutableAttrs[.font] as? UIFont ?? .systemFont(ofSize: 16)
         mutableAttrs[.paragraphStyle] = paragraphStyleForBlock(
             currentBlock,
+            blockStack: blockStack,
             theme: theme,
             baseFont: blockFont
         )
@@ -650,6 +789,16 @@ final class RenderBridge {
                 baseFont: blockFont
             )
         }
+        if blockquoteDepth(in: blockStack) > 0 {
+            let foreground = mutableAttrs[.foregroundColor] as? UIColor ?? .separator
+            mutableAttrs[RenderBridgeAttributes.blockquoteBorderColor] =
+                theme?.blockquote?.borderColor
+                ?? foreground.withAlphaComponent(0.3)
+            mutableAttrs[RenderBridgeAttributes.blockquoteBorderWidth] =
+                theme?.blockquote?.borderWidth ?? LayoutConstants.blockquoteBorderWidth
+            mutableAttrs[RenderBridgeAttributes.blockquoteMarkerGap] =
+                theme?.blockquote?.markerGap ?? LayoutConstants.blockquoteMarkerGap
+        }
         return mutableAttrs
     }
 
@@ -659,9 +808,15 @@ final class RenderBridge {
     /// It carries minimal styling (base font, no special attributes).
     private static func interBlockNewline(
         baseFont: UIFont,
-        textColor: UIColor
+        textColor: UIColor,
+        blockStack: [BlockContext],
+        theme: EditorTheme?
     ) -> NSAttributedString {
-        let attrs = defaultAttributes(baseFont: baseFont, textColor: textColor)
+        let attrs = applyBlockStyle(
+            to: defaultAttributes(baseFont: baseFont, textColor: textColor),
+            blockStack: blockStack,
+            theme: theme
+        )
         return NSAttributedString(string: "\n", attributes: attrs)
     }
 
@@ -670,24 +825,46 @@ final class RenderBridge {
         if currentBlock.listContext != nil {
             return currentBlock
         }
-        guard let inheritedListContext = nearestListContext(in: Array(blockStack.dropLast())) else {
+        guard let inheritedListBlock = nearestListBlock(in: Array(blockStack.dropLast())) else {
             return currentBlock
         }
         return BlockContext(
             nodeType: currentBlock.nodeType,
             depth: currentBlock.depth,
-            listContext: inheritedListContext,
+            listContext: inheritedListBlock.listContext,
+            listMarkerContext: currentBlock.listMarkerContext,
             markerPending: false
         )
     }
 
-    private static func nearestListContext(in contexts: [BlockContext]) -> [String: Any]? {
+    private static func nearestListBlock(in contexts: [BlockContext]) -> BlockContext? {
         for context in contexts.reversed() where context.listContext != nil {
-            return context.listContext
+            return context
         }
         return nil
     }
 
+    private static func trailingRenderedContentHasBlockquote(
+        in result: NSAttributedString
+    ) -> Bool {
+        guard result.length > 0 else { return false }
+        let nsString = result.string as NSString
+
+        for index in stride(from: result.length - 1, through: 0, by: -1) {
+            let scalar = nsString.character(at: index)
+            if scalar == 0x000A || scalar == 0x000D {
+                continue
+            }
+            return result.attribute(
+                RenderBridgeAttributes.blockquoteBorderColor,
+                at: index,
+                effectiveRange: nil
+            ) != nil
+        }
+
+        return false
+    }
+
     private static func consumePendingListMarker(from blockStack: inout [BlockContext]) -> [String: Any]? {
         guard blockStack.count >= 2 else { return nil }
         for idx in stride(from: blockStack.count - 2, through: 0, by: -1) {
@@ -725,6 +902,51 @@ final class RenderBridge {
         return true
     }
 
+    private static func appendTrailingHardBreakPlaceholderIfNeeded(
+        in result: NSMutableAttributedString,
+        endedBlock: BlockContext,
+        remainingBlockStack: [BlockContext],
+        baseFont: UIFont,
+        textColor: UIColor,
+        theme: EditorTheme?
+    ) {
+        guard result.length > 0 else { return }
+        guard endedBlock.nodeType != "listItem" else { return }
+        guard result.attribute(
+            RenderBridgeAttributes.voidNodeType,
+            at: result.length - 1,
+            effectiveRange: nil
+        ) as? String == "hardBreak" else {
+            return
+        }
+
+        let placeholderBlockStack = remainingBlockStack + [endedBlock]
+        let blockFont = resolvedFont(
+            for: placeholderBlockStack,
+            baseFont: baseFont,
+            theme: theme
+        )
+        let blockColor = resolvedTextColor(
+            for: placeholderBlockStack,
+            textColor: textColor,
+            theme: theme
+        )
+        var attrs = defaultAttributes(baseFont: blockFont, textColor: blockColor)
+        attrs[RenderBridgeAttributes.syntheticPlaceholder] = true
+        var styledAttrs = applyBlockStyle(
+            to: attrs,
+            blockStack: placeholderBlockStack,
+            theme: theme
+        )
+        if let paragraphStyle = (styledAttrs[.paragraphStyle] as? NSParagraphStyle)?.mutableCopy()
+            as? NSMutableParagraphStyle
+        {
+            paragraphStyle.paragraphSpacing = 0
+            styledAttrs[.paragraphStyle] = paragraphStyle
+        }
+        result.append(NSAttributedString(string: "\u{200B}", attributes: styledAttrs))
+    }
+
     private static func listMarkerWidth(
         for context: BlockContext,
         theme: EditorTheme?,
@@ -741,10 +963,19 @@ final class RenderBridge {
         for blockStack: [BlockContext],
         theme: EditorTheme?
     ) -> EditorTextStyle? {
+        let inBlockquote = blockquoteDepth(in: blockStack) > 0
         guard let currentBlock = effectiveBlockContext(blockStack) else {
-            return theme?.effectiveTextStyle(for: "paragraph")
+            return theme?.effectiveTextStyle(for: "paragraph", inBlockquote: inBlockquote)
+        }
+        return theme?.effectiveTextStyle(for: currentBlock.nodeType, inBlockquote: inBlockquote)
+    }
+
+    private static func blockquoteDepth(in blockStack: [BlockContext]) -> Int {
+        blockStack.reduce(into: 0) { count, context in
+            if context.nodeType == "blockquote" {
+                count += 1
+            }
         }
-        return theme?.effectiveTextStyle(for: currentBlock.nodeType)
     }
 
     private static func resolvedFont(
@@ -823,3 +1054,160 @@ final class HorizontalRuleAttachment: NSTextAttachment {
         }
     }
 }
+
+final class BlockImageAttachment: NSTextAttachment {
+    private let source: String
+    private let placeholderTint: UIColor
+    private var preferredWidth: CGFloat?
+    private var preferredHeight: CGFloat?
+    private var loadedImage: UIImage?
+
+    init(
+        source: String,
+        placeholderTint: UIColor,
+        preferredWidth: CGFloat?,
+        preferredHeight: CGFloat?
+    ) {
+        self.source = source
+        self.placeholderTint = placeholderTint
+        self.preferredWidth = preferredWidth
+        self.preferredHeight = preferredHeight
+        super.init(data: nil, ofType: nil)
+        loadImageIfNeeded()
+    }
+
+    required init?(coder: NSCoder) {
+        return nil
+    }
+
+    func setPreferredSize(width: CGFloat, height: CGFloat) {
+        preferredWidth = width
+        preferredHeight = height
+    }
+
+    func previewImage() -> UIImage? {
+        loadedImage ?? image
+    }
+
+    override func attachmentBounds(
+        for textContainer: NSTextContainer?,
+        proposedLineFragment lineFrag: CGRect,
+        glyphPosition position: CGPoint,
+        characterIndex charIndex: Int
+    ) -> CGRect {
+        let lineFragmentWidth = lineFrag.width.isFinite ? lineFrag.width : 0
+        let containerWidth = textContainer.map {
+            max(0, $0.size.width - ($0.lineFragmentPadding * 2))
+        } ?? 0
+        let widthCandidates = [lineFragmentWidth, containerWidth].filter { $0.isFinite && $0 > 0 }
+        let maxWidth = max(160, widthCandidates.min() ?? 160)
+        let fallbackAspectRatio = loadedImage.flatMap { image -> CGFloat? in
+            let imageSize = image.size
+            guard imageSize.width > 0, imageSize.height > 0 else { return nil }
+            return imageSize.height / imageSize.width
+        } ?? 0.56
+
+        var resolvedWidth = preferredWidth
+        var resolvedHeight = preferredHeight
+
+        if resolvedWidth == nil, resolvedHeight == nil, let loadedImage {
+            let imageSize = loadedImage.size
+            if imageSize.width > 0, imageSize.height > 0 {
+                resolvedWidth = imageSize.width
+                resolvedHeight = imageSize.height
+            }
+        } else if resolvedWidth == nil, let resolvedHeight {
+            resolvedWidth = resolvedHeight / fallbackAspectRatio
+        } else if resolvedHeight == nil, let resolvedWidth {
+            resolvedHeight = resolvedWidth * fallbackAspectRatio
+        }
+
+        let width = max(1, resolvedWidth ?? maxWidth)
+        let height = max(1, resolvedHeight ?? min(180, maxWidth * fallbackAspectRatio))
+        let scale = min(1, maxWidth / width)
+        return CGRect(x: 0, y: 0, width: width * scale, height: height * scale)
+    }
+
+    override func image(
+        forBounds imageBounds: CGRect,
+        textContainer: NSTextContainer?,
+        characterIndex charIndex: Int
+    ) -> UIImage? {
+        if let loadedImage {
+            return loadedImage
+        }
+
+        let renderer = UIGraphicsImageRenderer(bounds: imageBounds)
+        return renderer.image { _ in
+            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)
+            }
+        }
+    }
+
+    private func loadImageIfNeeded() {
+        if let cached = RenderImageCache.cache.object(forKey: source as NSString) {
+            loadedImage = cached
+            image = cached
+            return
+        }
+
+        if let inlineData = Self.decodeDataURL(source),
+           let image = UIImage(data: inlineData)
+        {
+            RenderImageCache.cache.setObject(image, forKey: source as NSString)
+            loadedImage = image
+            self.image = image
+            return
+        }
+
+        guard let url = URL(string: source) else { return }
+        RenderImageCache.queue.async { [weak self] in
+            guard let self else { return }
+            let data: Data?
+            if url.isFileURL {
+                data = try? Data(contentsOf: url)
+            } else {
+                data = try? Data(contentsOf: url)
+            }
+            guard let data,
+                  let image = UIImage(data: data)
+            else {
+                return
+            }
+            RenderImageCache.cache.setObject(image, forKey: self.source as NSString)
+            DispatchQueue.main.async {
+                self.loadedImage = image
+                self.image = image
+                NotificationCenter.default.post(name: .editorImageAttachmentDidLoad, object: self)
+            }
+        }
+    }
+
+    private static func decodeDataURL(_ source: String) -> Data? {
+        let trimmed = source.trimmingCharacters(in: .whitespacesAndNewlines)
+        guard trimmed.lowercased().hasPrefix("data:image/"),
+              let commaIndex = trimmed.firstIndex(of: ",")
+        else {
+            return nil
+        }
+        let metadata = String(trimmed[..<commaIndex]).lowercased()
+        let payload = String(trimmed[trimmed.index(after: commaIndex)...])
+        guard metadata.contains(";base64") else { return nil }
+        return Data(base64Encoded: payload, options: [.ignoreUnknownCharacters])
+    }
+}