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

package/dist/useViewerAtoms.js

@@ -15,8 +15,9 @@ function isRecord(value) {
 }
 function parsePositions(json, definitions, snapshot) {
     const values = JSON.parse(json);
-    if (!Array.isArray(values))
+    if (!Array.isArray(values)) {
         throw new Error('Atom positions must be an array.');
+    }
     const seen = new Set();
     const identities = new Set();
     return values.map((value) => {
@@ -27,24 +28,27 @@ function parsePositions(json, definitions, snapshot) {
             Number(value.docPos) < 0 ||
             Number(value.docPos) > 0xffffffff ||
             typeof value.attrsJson !== 'string' ||
-            !['x', 'y', 'width', 'height'].every((key) => typeof value[key] === 'number' && Number.isFinite(value[key])) ||
+            !['x', 'y', 'width', 'height'].every(key => typeof value[key] === 'number' && Number.isFinite(value[key])) ||
             Number(value.width) <= 0 ||
             Number(value.height) < 0 ||
             seen.has(Number(value.docPos))) {
             throw new Error('Invalid prepared atom position.');
         }
         const attrs = JSON.parse(value.attrsJson);
-        if (!isRecord(attrs))
+        if (!isRecord(attrs)) {
             throw new Error('Atom attributes must be a JSON object.');
+        }
         const idAttribute = definitions.get(value.nodeType)?.idAttribute;
         const atomId = idAttribute == null ? undefined : attrs[idAttribute];
-        if (idAttribute != null && (typeof atomId !== 'string' || atomId.length === 0))
+        if (idAttribute != null && (typeof atomId !== 'string' || atomId.length === 0)) {
             throw new Error('Atom identity must be a non-empty string.');
+        }
         const key = typeof atomId === 'string'
             ? JSON.stringify([value.nodeType, atomId])
-            : `${snapshot}:${value.docPos}:${value.nodeType}`;
-        if (identities.has(key))
+            : `${snapshot}:${String(value.docPos)}:${value.nodeType}`;
+        if (identities.has(key)) {
             throw new Error('Duplicate atom identity.');
+        }
         identities.add(key);
         seen.add(Number(value.docPos));
         return { ...value, attrs, key, atomId };
@@ -52,18 +56,20 @@ function parsePositions(json, definitions, snapshot) {
 }
 function useViewerAtoms({ atoms, identity, themeJson, readOnly, interactive = true, viewport, onUpdateAtomAttrs, onError, }) {
     const [width, setWidth] = (0, react_1.useState)(null);
-    const snapshot = (0, react_1.useMemo)(() => String(++nextGeneration), [identity]);
+    const snapshot = (0, react_1.useMemo)(() => ({ identity, value: String(++nextGeneration) }), [identity]).value;
     const serializedAtoms = (0, atoms_1.serializeEditorAtoms)(atoms);
-    const identifiers = JSON.stringify((atoms ?? []).map((atom) => [atom.name, atom.idAttribute]));
-    const generation = (0, react_1.useMemo)(() => String(++nextGeneration), [identity, identifiers, serializedAtoms, width]);
-    const definitions = (0, react_1.useMemo)(() => new Map((atoms ?? []).map((atom) => [atom.name, atom])), [atoms]);
+    const identifiers = JSON.stringify((atoms ?? []).map(atom => [atom.name, atom.idAttribute]));
+    const generation = (0, react_1.useMemo)(() => ({
+        identity, identifiers, serializedAtoms, width, value: String(++nextGeneration),
+    }), [identity, identifiers, serializedAtoms, width]).value;
+    const definitions = (0, react_1.useMemo)(() => new Map((atoms ?? []).map(atom => [atom.name, atom])), [atoms]);
     const enabled = definitions.size > 0;
     const [measurementState, setMeasurementState] = (0, react_1.useState)({
         generation,
         revision: 0,
         values: {},
     });
-    const measurements = measurementState.generation === generation ? measurementState.values : {};
+    const measurements = (0, react_1.useMemo)(() => measurementState.generation === generation ? measurementState.values : {}, [measurementState, generation]);
     const revision = String(measurementState.generation === generation ? measurementState.revision : 0);
     const [layout, setLayout] = (0, react_1.useState)(null);
     const pendingLayout = layout?.generation !== generation;
@@ -72,8 +78,9 @@ function useViewerAtoms({ atoms, identity, themeJson, readOnly, interactive = tr
     const mountedMeasurements = (0, react_1.useRef)(new Map());
     (0, react_1.useLayoutEffect)(() => {
         for (const [key, measured] of mountedMeasurements.current) {
-            if (!definitions.has(measured.nodeType))
+            if (!definitions.has(measured.nodeType)) {
                 mountedMeasurements.current.delete(key);
+            }
         }
     }, [definitions]);
     const mounted = (0, react_1.useRef)(false);
@@ -119,7 +126,12 @@ function useViewerAtoms({ atoms, identity, themeJson, readOnly, interactive = tr
                 measurements,
             },
         })
-        : themeJson, [enabled, themeJson, serializedAtoms, generation, revision, measurements]);
+        : themeJson, [enabled,
+        themeJson,
+        serializedAtoms,
+        generation,
+        revision,
+        measurements]);
     const onAtomLayout = (0, react_1.useCallback)((event) => {
         const value = event.nativeEvent;
         const latest = current.current;
@@ -128,8 +140,9 @@ function useViewerAtoms({ atoms, identity, themeJson, readOnly, interactive = tr
             value.revision !== latest.revision ||
             !Number.isFinite(value.layoutWidth) ||
             value.layoutWidth <= 0 ||
-            (latest.width != null && Math.abs(latest.width - value.layoutWidth) > 1))
+            (latest.width != null && Math.abs(latest.width - value.layoutWidth) > 1)) {
             return;
+        }
         try {
             const next = parsePositions(value.atomsJson, latest.definitions, latest.snapshot);
             const retainedMeasurements = {};
@@ -143,18 +156,19 @@ function useViewerAtoms({ atoms, identity, themeJson, readOnly, interactive = tr
                 }
             }
             for (const key of mountedMeasurements.current.keys()) {
-                if (!retainedKeys.has(key))
+                if (!retainedKeys.has(key)) {
                     mountedMeasurements.current.delete(key);
+                }
             }
             // Unchanged mounted sizes do not emit another Yoga onLayout event.
-            setMeasurementState((previous) => previous.generation === value.generation
+            setMeasurementState(previous => previous.generation === value.generation
                 ? previous
                 : {
                     generation: value.generation,
                     revision: Object.keys(retainedMeasurements).length > 0 ? 1 : 0,
                     values: retainedMeasurements,
                 });
-            setLayout((previous) => previous?.generation === value.generation && previous.json === value.atomsJson
+            setLayout(previous => previous?.generation === value.generation && previous.json === value.atomsJson
                 ? previous
                 : { generation: value.generation, json: value.atomsJson, positions: next });
         }
@@ -171,8 +185,9 @@ function useViewerAtoms({ atoms, identity, themeJson, readOnly, interactive = tr
     }, []);
     const onContainerLayout = (0, react_1.useCallback)((event) => {
         const next = event.nativeEvent.layout.width;
-        if (Number.isFinite(next) && next > 0)
-            setWidth((previous) => (previous === next ? previous : next));
+        if (Number.isFinite(next) && next > 0) {
+            setWidth(previous => (previous === next ? previous : next));
+        }
     }, []);
     const updateQueues = (0, react_1.useRef)(new Map());
     const acknowledged = (0, react_1.useRef)(new Map());
@@ -182,14 +197,16 @@ function useViewerAtoms({ atoms, identity, themeJson, readOnly, interactive = tr
     const updateAttrs = (0, react_1.useCallback)((owner, atom, update) => {
         const execute = async () => {
             const latest = current.current;
-            if (!mounted.current)
+            if (!mounted.current) {
                 throw new atomInstances_1.AtomUpdateAttrsError('not-ready', 'The viewer is unmounted.');
+            }
             if (owner !== latest.generation ||
-                !latest.positions.some((position) => position.key === atom.key && position.attrsJson === atom.attrsJson)) {
+                !latest.positions.some(position => position.key === atom.key && position.attrsJson === atom.attrsJson)) {
                 throw new atomInstances_1.AtomUpdateAttrsError('stale-revision', 'The viewer content has changed.');
             }
-            if (latest.readOnly || !latest.onUpdateAtomAttrs)
+            if (latest.readOnly || !latest.onUpdateAtomAttrs) {
                 throw new atomInstances_1.AtomUpdateAttrsError('not-applicable', 'Viewer updates require readOnly={false} and onUpdateAtomAttrs.');
+            }
             const accepted = acknowledged.current.get(atom.key);
             const attrs = accepted?.generation === owner ? accepted.attrs : atom.attrs;
             const partial = (0, atomUpdates_1.resolveAtomAttrsUpdate)(attrs, update);
@@ -198,8 +215,9 @@ function useViewerAtoms({ atoms, identity, themeJson, readOnly, interactive = tr
                 (0, attributeValidation_1.validateAttributes)({ ...attrs, ...partial }, definition.attrs ?? {});
                 if (definition.idAttribute &&
                     Object.prototype.hasOwnProperty.call(partial, definition.idAttribute) &&
-                    partial[definition.idAttribute] !== attrs[definition.idAttribute])
+                    partial[definition.idAttribute] !== attrs[definition.idAttribute]) {
                     throw new Error('An atom identity cannot be changed.');
+                }
             }
             catch (error) {
                 throw new atomInstances_1.AtomUpdateAttrsError('not-applicable', error instanceof Error ? error.message : String(error));
@@ -211,18 +229,21 @@ function useViewerAtoms({ atoms, identity, themeJson, readOnly, interactive = tr
                 attrs,
                 partial,
             });
-            if (mounted.current && current.current.generation === owner)
+            if (mounted.current && current.current.generation === owner) {
                 acknowledged.current.set(atom.key, {
                     generation: owner,
                     attrs: { ...attrs, ...partial },
                 });
+            }
         };
         const previous = updateQueues.current.get(atom.key);
-        const result = previous ? previous.catch(() => { }).then(execute) : execute();
+        const result = previous ? previous.catch(() => {
+        }).then(execute) : execute();
         updateQueues.current.set(atom.key, result);
         const clean = () => {
-            if (updateQueues.current.get(atom.key) === result)
+            if (updateQueues.current.get(atom.key) === result) {
                 updateQueues.current.delete(atom.key);
+            }
         };
         void result.then(clean, clean);
         return result;
@@ -238,22 +259,25 @@ function useViewerAtoms({ atoms, identity, themeJson, readOnly, interactive = tr
             !Number.isFinite(measured.height) ||
             measured.height < 0 ||
             Math.abs(measured.width - atom.width) > 1 ||
-            !latest.renderedPositions.some((position) => position.docPos === atom.docPos &&
+            !latest.renderedPositions.some(position => position.docPos === atom.docPos &&
                 position.nodeType === atom.nodeType &&
                 position.width === atom.width &&
-                position.attrsJson === atom.attrsJson))
+                position.attrsJson === atom.attrsJson)) {
             return;
+        }
         mountedMeasurements.current.set(atom.key, {
             nodeType: atom.nodeType,
             size: { width: atom.width, height: measured.height },
         });
-        if (latest.pendingLayout)
+        if (latest.pendingLayout) {
             return;
-        setMeasurementState((previous) => {
+        }
+        setMeasurementState(previous => {
             const values = previous.generation === owner ? previous.values : {};
             const existing = values[String(atom.docPos)];
-            if (existing?.width === atom.width && existing.height === measured.height)
+            if (existing?.width === atom.width && existing.height === measured.height) {
                 return previous;
+            }
             return {
                 generation: owner,
                 revision: previous.generation === owner ? previous.revision + 1 : 1,
@@ -264,25 +288,28 @@ function useViewerAtoms({ atoms, identity, themeJson, readOnly, interactive = tr
             };
         });
     }, []);
-    const children = renderedPositions.map((atom) => {
+    const children = renderedPositions.map(atom => {
         const Component = definitions.get(atom.nodeType)?.component;
-        if (!Component)
+        if (!Component) {
             return null;
+        }
         return ((0, jsx_runtime_1.jsx)(react_native_1.View, { collapsable: false, pointerEvents: !interactive || pendingLayout ? 'none' : 'box-none', accessibilityElementsHidden: pendingLayout, importantForAccessibility: pendingLayout ? 'no-hide-descendants' : 'auto', style: {
                 position: 'absolute',
                 left: atom.x,
                 top: atom.y,
                 width: atom.width,
                 opacity: pendingLayout ? 0 : 1,
-            }, onLayout: (event) => measure(generation, atom, Component, event), children: (0, jsx_runtime_1.jsx)(AtomHost_1.AtomHost, { component: Component, width: atom.width, estimatedHeight: atom.height, visible: (0, AtomHost_1.atomIsVisible)(atom.y, atom.height, viewport), onMeasure: (event) => measure(generation, atom, Component, event), atomProps: {
+            }, onLayout: event => measure(generation, atom, Component, event), children: (0, jsx_runtime_1.jsx)(AtomHost_1.AtomHost, { component: Component, width: atom.width, estimatedHeight: atom.height, visible: (0, AtomHost_1.atomIsVisible)(atom.y, atom.height, viewport), onMeasure: event => measure(generation, atom, Component, event), atomProps: {
                     attrs: atom.attrs,
                     nodeType: atom.nodeType,
                     selected: false,
                     readOnly,
                     interactive: interactive && !pendingLayout,
                     isViewer: true,
-                    updateAttrs: (partial) => updateAttrs(layout.generation, atom, partial),
+                    updateAttrs: partial => updateAttrs(layout.generation, atom, partial),
                 } }) }, atom.key));
     });
-    return { enabled, themeJson: configuredThemeJson, onAtomLayout, onContainerLayout, children };
+    return {
+        enabled, themeJson: configuredThemeJson, onAtomLayout, onContainerLayout, children,
+    };
 }

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,