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

package/README.md

@@ -4,7 +4,7 @@
 
 See the [documentation](https://github.com/apollohg/react-native-rich-text-editor/wiki) for guides and API references. The package is under active development; review the [changelog](./CHANGELOG.md) before upgrading between major versions.
 
-<img src="https://github.com/apollohg/react-native-rich-text-editor/wiki/images/github-banner.png" alt="Example editor on iOS" width="100%" />
+<a href="./assets/github-demo-banner.mp4"><img src="./assets/github-demo-banner.gif" alt="Native iOS editor demo with rich text, nested lists, a code block, and image resizing" width="100%" /></a>
 
 ## Highlights
 
@@ -16,8 +16,6 @@ See the [documentation](https://github.com/apollohg/react-native-rich-text-edito
 - `RichTextViewer`, an exact-size Fabric renderer for read-only content
 - Shared document handles for local editing and Yjs collaboration
 
-`NativeRichTextEditor` and `NativeProseViewer`, along with their associated types, remain available as deprecated aliases of `RichTextEditor` and `RichTextViewer`.
-
 ## Requirements
 
 The package uses custom native code and Expo Modules. Use a development build or a bare React Native app with Expo Modules configured; it does not run in Expo Go.
@@ -50,7 +48,7 @@ npx expo prebuild
 npx expo run:ios       # or: npx expo run:android
 ```
 
-See the [Installation Guide](https://github.com/apollohg/react-native-rich-text-editor/wiki/Installation) for bare React Native setup and migration from `@apollohg/react-native-prose-editor`.
+See the [Installation Guide](https://github.com/apollohg/react-native-rich-text-editor/wiki/Installation) for bare React Native setup.
 
 ## Editor usage
 
@@ -91,7 +89,7 @@ See [Getting Started](https://github.com/apollohg/react-native-rich-text-editor/
 
 ## Custom atom nodes
 
-Render interactive cards, embeds, and other custom blocks with your own React components. Define an atom with `defineAtomNode`, add it to your document schema, and pass it through the editor or viewer's `atoms` prop.
+Render interactive cards, embeds, and other custom blocks with your own React components.
 
 See [Custom Atom Nodes](https://github.com/apollohg/react-native-rich-text-editor/wiki/Custom-Atom-Nodes) for a complete example and API details.
 
@@ -107,108 +105,13 @@ import { RichTextViewer } from '@apollohg/react-native-rich-text-editor';
 
 See the [Viewer Guide](https://github.com/apollohg/react-native-rich-text-editor/wiki/Viewer) for styling, images, interactions, and custom atoms.
 
-## Element styling and addons
-
-Version 2 uses a flat, typed stylesheet for both the editor and viewer:
-
-```tsx
-import { EditorStyleSheet, RichTextEditor } from '@apollohg/react-native-rich-text-editor';
-
-const theme = EditorStyleSheet.create({
-    content: { padding: 16, backgroundColor: '#ffffff' },
-    text: { fontSize: 16, color: '#202124' },
-    paragraph: { marginBottom: 12 },
-    link: { color: '#285dcc', textDecorationLine: 'underline' },
-    blockquote: {
-        backgroundColor: '#f3f5f8',
-        padding: 12,
-        borderWidth: 1,
-        borderColor: '#dce1e8',
-        borderLeftWidth: 4,
-        borderLeftColor: '#285dcc',
-        borderTopRightRadius: 8,
-    },
-    codeBlock: { backgroundColor: '#eff1f5', padding: 12, borderRadius: 8 },
-    image: { backgroundColor: '#eff1f5', borderRadius: 12, resizeMode: 'cover' },
-});
-
-<RichTextEditor documentHandle={documentHandle} theme={theme} />;
-```
-
-Each entry accepts a style object or nested, conditional style arrays. Later entries override earlier properties; explicit `undefined` removes an earlier property. Side and corner properties override shorthands. Supported fields are checked by TypeScript and validated before native updates. These are editor styles: layout fields such as `flex`, transforms, and positioning are not accepted.
-
-Text styling inherits from `text` and enclosing blocks. Backgrounds, spacing, borders, and corner radii belong to each element. Inline entries support typography and backgrounds; mentions also support borders. List containers, items, markers, and checkboxes have separate entries. `toolbar` retains its existing configuration.
-
-Android editing uses per-block text layout for physical margins, borders, and padding, including RTL content. Per-block justification is supported on Android API 26+; API 24/25 use normal alignment.
-
-Custom atom components mount inside Android's native scrolling content. Their measured height participates in document layout, and their controls receive normal React Native touch events.
+## Styling and addons
 
-Addons are a readonly array. Conditional `false`, `null`, and `undefined` entries are allowed; duplicate capabilities are rejected:
-
-```tsx
-import { createMentionsAddon } from '@apollohg/react-native-rich-text-editor';
-import { createCodeHighlightingAddon } from '@apollohg/react-native-rich-text-editor-code-highlighting';
-
-<RichTextEditor
-    documentHandle={documentHandle}
-    theme={theme}
-    addons={[
-        createMentionsAddon({ trigger: '@', suggestions }),
-        enableHighlighting && createCodeHighlightingAddon({ theme: 'base16-ocean.dark' }),
-    ]}
-/>;
-```
-
-Syntax highlighting requires the separately installed [code-highlighting package](./packages/code-highlighting), followed by a native rebuild. The base editor does not include syntect or its grammars. Set a code block's `attrs.language`, for example `{ type: 'codeBlock', attrs: { language: 'typescript' }, content: [...] }`. Missing or unsupported languages keep ordinary code styling. The code block theme controls the panel; the highlighting addon controls token colors and font traits. Mention-enabled editor handles still require `withMentionsSchema` when creating their schema.
-
-When migrating from version 1, replace `links` with `link`, heading maps with `h1`–`h6`, `spacingAfter` with `marginBottom`, and `contentInsets` with `content.padding*`. Flatten nested quote/code typography into their element entry, and move list appearance into the relevant container/item/marker entries. Addon objects become `[createMentionsAddon(options)]`. The new built-in schema declares code-block language metadata; coordinate schema changes across collaborating clients.
+Customize the editor and viewer with themes, mentions, and syntax highlighting. See [Styling](https://github.com/apollohg/react-native-rich-text-editor/wiki/Styling) and [Addons](https://github.com/apollohg/react-native-rich-text-editor/wiki/Addons).
 
 ## Collaboration
 
-`useYjsCollaboration` connects a room-backed document handle to a Yjs sync and awareness server. The editor and collaboration controller must share the same handle.
-
-```tsx
-import React, { useEffect, useMemo } from 'react';
-import {
-    createNativeEditorDocumentHandle,
-    RichTextEditor,
-    useYjsCollaboration,
-} from '@apollohg/react-native-rich-text-editor';
-
-export function CollaborativeEditor({ documentId }: { documentId: string }) {
-    const documentHandle = useMemo(
-        () =>
-            createNativeEditorDocumentHandle({
-                initialization: {
-                    type: 'room',
-                    documentId,
-                    lineageId: `my-app|${documentId}`,
-                },
-            }),
-        [documentId]
-    );
-
-    const collaboration = useYjsCollaboration({
-        documentId,
-        handle: documentHandle,
-        transport: {
-            url: `wss://example.com/collaboration?documentId=${encodeURIComponent(documentId)}`,
-            connect: true,
-        },
-        localAwareness: {
-            userId: 'user-1',
-            name: 'Ada',
-            color: '#0A84FF',
-        },
-    });
-
-    useEffect(() => () => documentHandle.destroy(), [documentHandle]);
-
-    return <RichTextEditor {...collaboration.editorBindings} />;
-}
-```
-
-See the [Collaboration Guide](https://github.com/apollohg/react-native-rich-text-editor/wiki/Collaboration) for server requirements, persistence, authentication, and recovery.
+Connect shared documents to a Yjs server for collaborative editing and live cursors. See the [Collaboration Guide](https://github.com/apollohg/react-native-rich-text-editor/wiki/Collaboration).
 
 ## Comparison with other React Native editors
 
@@ -225,14 +128,6 @@ Reviewed on 7 September 2026
 
 ## Development
 
-Run `npm run lint:kotlin` to check Kotlin style or `npm run format:kotlin` to
-apply automatic fixes. Both commands use ktlint 1.8.0 with Android Studio style
-and four-space indentation. Java 17+ is required (`JAVA_HOME` or `java` on PATH).
-The first run downloads and verifies the CLI into `.tmp/ktlint`; subsequent runs
-use the cached copy. Generated bindings, build output, dependencies, and Expo's
-generated native projects are excluded. Additional ktlint options can be passed
-after `--`, for example `npm run lint:kotlin -- --reporter=plain-summary`.
-
 See the [example app](./example) to try the editor and viewer, and the [Development Workflow](https://github.com/apollohg/react-native-rich-text-editor/wiki/Development-Workflow) for local setup, native builds, and testing.
 
 ## Documentation
@@ -248,12 +143,9 @@ See the [example app](./example) to try the editor and viewer, and the [Developm
 - [Mentions](https://github.com/apollohg/react-native-rich-text-editor/wiki/Mentions)
 - [Styling](https://github.com/apollohg/react-native-rich-text-editor/wiki/Styling)
 - [Production limits and errors](https://github.com/apollohg/react-native-rich-text-editor/wiki/Production-Limits-and-Errors)
+- [Migration guide](https://github.com/apollohg/react-native-rich-text-editor/wiki/Migration-Guide)
 - [Changelog](./CHANGELOG.md)
 
 ## License
 
-[Apache-2.0](./LICENSE) for this project's own code. Dependencies retain their respective licenses.
-
-[Third-party notices](./THIRD_PARTY_NOTICES.md) cover the bundled Rust libraries, native dependencies, and copied icon assets; [Rust standard-library notices](./RUST-STANDARD-LIBRARY-NOTICES.html) accompany the prebuilt native libraries. The optional highlighting package ships its own notices for syntect, grammars, themes, and its other dependencies.
-
-When distributing an app, include the applicable notices with the app's open-source acknowledgements or other accompanying materials, including the MPL corresponding-source links. Retain notices for the actual React Native/Expo and native dependency versions resolved by your app as well. An npm package's notices are not automatically copied into the final app by Metro. Refresh notices when dependencies, bundled assets, or the Rust toolchain change.
+[Apache-2.0](./LICENSE). See [third-party notices](./THIRD_PARTY_NOTICES.md) and [Rust standard-library notices](./RUST-STANDARD-LIBRARY-NOTICES.html) for bundled dependencies.

package/android/src/main/java/com/apollohg/editor/EditorEditTextImages.kt

@@ -76,6 +76,31 @@ internal fun EditorEditText.selectedImageGeometryImpl(): SelectedImageGeometry?
     )
 }
 
+internal fun EditorEditText.selectedImageSpanForResize(): BlockImageSpan? {
+    val spannable = text as? Spanned ?: return null
+    val selection = resolvedSelectedImageRange(spannable) ?: return null
+    return spannable.getSpans(
+        selection.start,
+        selection.end,
+        BlockImageSpan::class.java
+    ).firstOrNull { span ->
+        spannable.getSpanStart(span) == selection.start &&
+            spannable.getSpanEnd(span) == selection.end
+    }
+}
+
+internal fun EditorEditText.relayoutImageResizePreview(span: BlockImageSpan) {
+    val content = text ?: return
+    val start = content.getSpanStart(span)
+    val end = content.getSpanEnd(span)
+    if (start < 0 || end <= start) return
+    val flags = content.getSpanFlags(span)
+    content.setSpan(span, start, end, flags)
+    requestLayout()
+    invalidate()
+    onContentSizeMayChange?.invoke()
+}
+
 internal fun EditorEditText.resizeImageAtDocPosImpl(docPos: Int, widthPx: Float, heightPx: Float) {
     if (!hasLiveEditor()) return
     val density = resources.displayMetrics.density

package/android/src/main/java/com/apollohg/editor/EditorV2RenderValidation.kt

@@ -141,6 +141,7 @@ private fun validMentionNodeStyle(value: Any?): Boolean {
             listOf("Top", "Right", "Bottom", "Left").map { "border${it}Color" }
     val nonnegative =
         listOf("Top", "Right", "Bottom", "Left").map { "border${it}Width" } +
+            listOf("Top", "Right", "Bottom", "Left").map { "padding$it" } +
             listOf("TopLeft", "TopRight", "BottomLeft", "BottomRight").map { "border${it}Radius" }
     val enums = mapOf(
         "fontWeight" to

package/android/src/main/java/com/apollohg/editor/ImageResizeOverlayView.kt

@@ -30,8 +30,15 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
         val corner: Corner,
         val originalRect: RectF,
         val docPos: Int,
+        val span: BlockImageSpan,
+        val downX: Float,
+        val downY: Float,
+        val originalSize: Pair<Int, Int>,
+        val fixedWidthPx: Float,
+        val fixedHeightPx: Float,
         val maximumWidthPx: Float,
-        var previewRect: RectF
+        var previewRect: RectF,
+        var previewContentSize: Pair<Float, Float>
     )
 
     private var editorView: RichTextEditorView? = null
@@ -73,7 +80,10 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
             cancelActiveResize()
             return
         }
-        if (currentGeometry?.docPos != nextGeometry.docPos) cancelActiveResize()
+        val selectedSpan = editorView?.selectedImageSpanForResize()
+        if (currentGeometry?.docPos != nextGeometry.docPos ||
+            dragState?.span?.let { it !== selectedSpan } == true
+        ) cancelActiveResize()
         currentGeometry = nextGeometry
         visibility = VISIBLE
         bringToFront()
@@ -82,6 +92,7 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
     }
 
     fun cancelActiveResize() {
+        dragState?.let { state -> editorView?.restoreImageResizePreview(state.span) }
         dragState = null
         currentGeometry = null
         parent?.requestDisallowInterceptTouchEvent(false)
@@ -114,12 +125,20 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
         when (event.actionMasked) {
             MotionEvent.ACTION_DOWN -> {
                 val corner = cornerAt(event.x, event.y, geometry.rect) ?: return false
+                val span = editorView?.selectedImageSpanForResize() ?: return false
                 dragState = DragState(
                     corner = corner,
                     originalRect = RectF(geometry.rect),
                     docPos = geometry.docPos,
+                    span = span,
+                    downX = event.x,
+                    downY = event.y,
+                    originalSize = span.currentSizePx(),
+                    fixedWidthPx = geometry.rect.width() - span.currentSizePx().first,
+                    fixedHeightPx = geometry.rect.height() - span.currentSizePx().second,
                     maximumWidthPx = editorView?.maximumImageWidthPx() ?: geometry.rect.width(),
-                    previewRect = RectF(geometry.rect)
+                    previewRect = RectF(geometry.rect),
+                    previewContentSize = span.currentSizePx().let { it.first.toFloat() to it.second.toFloat() }
                 )
                 parent?.requestDisallowInterceptTouchEvent(true)
                 return true
@@ -127,29 +146,24 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
 
             MotionEvent.ACTION_MOVE -> {
                 val state = dragState ?: return false
-                val nextRect = resizedRect(
-                    originalRect = state.originalRect,
-                    corner = state.corner,
-                    deltaX = event.x - handleCenter(state.corner, state.originalRect).x,
-                    deltaY = event.y - handleCenter(state.corner, state.originalRect).y,
-                    maximumWidthPx = state.maximumWidthPx
-                )
-                state.previewRect = RectF(nextRect)
-                currentGeometry = EditorEditText.SelectedImageGeometry(state.docPos, nextRect)
-                updateSystemGestureExclusionRects()
-                invalidate()
+                updatePreview(state, event.x, event.y)
                 return true
             }
 
             MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                 val state = dragState ?: return false
                 if (event.actionMasked == MotionEvent.ACTION_UP) {
-                    editorView?.resizeImage(
-                        state.docPos,
-                        state.previewRect.width(),
-                        state.previewRect.height()
-                    )
-                }
+                    updatePreview(state, event.x, event.y)
+                    val previewSize = state.span.currentSizePx()
+                    if (previewSize != state.originalSize) {
+                        editorView?.resizeImage(
+                            state.docPos,
+                            state.previewContentSize.first,
+                            state.previewContentSize.second
+                        )
+                    }
+                    editorView?.restoreImageResizePreview(state.span)
+                } else editorView?.restoreImageResizePreview(state.span)
                 dragState = null
                 parent?.requestDisallowInterceptTouchEvent(false)
                 post { refresh() }
@@ -160,6 +174,51 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
         return false
     }
 
+    private fun updatePreview(state: DragState, x: Float, y: Float) {
+        val deltaX = x - state.downX
+        val deltaY = y - state.downY
+        if (deltaX == 0f && deltaY == 0f) {
+            val originalContentSize = state.originalSize.let {
+                it.first.toFloat() to it.second.toFloat()
+            }
+            if (state.previewContentSize == originalContentSize) return
+            val boundEditor = editorView ?: return
+            if (!boundEditor.previewImageResize(
+                    state.span,
+                    originalContentSize.first,
+                    originalContentSize.second
+                )
+            ) return
+            state.previewRect = RectF(state.originalRect)
+            state.previewContentSize = originalContentSize
+            currentGeometry = boundEditor.selectedImageGeometry()
+                ?.takeIf { it.docPos == state.docPos }
+                ?: EditorEditText.SelectedImageGeometry(state.docPos, state.originalRect)
+            updateSystemGestureExclusionRects()
+            invalidate()
+            return
+        }
+        val (nextRect, contentSize) = resizedRect(
+            originalRect = state.originalRect,
+            originalContentSize = state.originalSize,
+            fixedWidthPx = state.fixedWidthPx,
+            fixedHeightPx = state.fixedHeightPx,
+            corner = state.corner,
+            deltaX = deltaX,
+            deltaY = deltaY,
+            maximumWidthPx = state.maximumWidthPx
+        )
+        val boundEditor = editorView ?: return
+        if (!boundEditor.previewImageResize(state.span, contentSize.first, contentSize.second)) return
+        state.previewRect = RectF(nextRect)
+        state.previewContentSize = contentSize
+        currentGeometry = boundEditor.selectedImageGeometry()
+            ?.takeIf { it.docPos == state.docPos }
+            ?: EditorEditText.SelectedImageGeometry(state.docPos, nextRect)
+        updateSystemGestureExclusionRects()
+        invalidate()
+    }
+
     override fun onDetachedFromWindow() {
         cancelActiveResize()
         super.onDetachedFromWindow()
@@ -217,12 +276,17 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
 
     private fun resizedRect(
         originalRect: RectF,
+        originalContentSize: Pair<Int, Int>,
+        fixedWidthPx: Float,
+        fixedHeightPx: Float,
         corner: Corner,
         deltaX: Float,
         deltaY: Float,
         maximumWidthPx: Float?
-    ): RectF {
-        val aspectRatio = max(originalRect.width() / max(originalRect.height(), 1f), 0.1f)
+    ): Pair<RectF, Pair<Float, Float>> {
+        val originalWidth = max(originalContentSize.first.toFloat(), 1f)
+        val originalHeight = max(originalContentSize.second.toFloat(), 1f)
+        val aspectRatio = max(originalWidth / originalHeight, 0.1f)
         val signedDx = if (corner == Corner.TOP_RIGHT ||
             corner == Corner.BOTTOM_RIGHT
         ) {
@@ -237,30 +301,34 @@ internal class ImageResizeOverlayView @JvmOverloads constructor(
         } else {
             -deltaY
         }
-        val widthScale = (originalRect.width() + signedDx) / max(originalRect.width(), 1f)
-        val heightScale = (originalRect.height() + signedDy) / max(originalRect.height(), 1f)
+        val projectedScale = 1f +
+            ((signedDx * originalWidth) + (signedDy * originalHeight)) /
+            ((originalWidth * originalWidth) + (originalHeight * originalHeight))
         val scale = max(
-            max(widthScale, heightScale),
-            minimumImageSizePx / max(originalRect.width(), 1f)
+            projectedScale,
+            max(minimumImageSizePx / originalWidth, minimumImageSizePx / originalHeight)
         )
-        val unclampedWidth = max(minimumImageSizePx, originalRect.width() * scale)
+        val unclampedWidth = max(minimumImageSizePx, originalWidth * scale)
         val unclampedHeight = max(minimumImageSizePx / aspectRatio, unclampedWidth / aspectRatio)
         val (width, height) = editorView?.let { boundEditor ->
             maximumWidthPx?.let { maxWidth ->
                 boundEditor.clampImageSize(
                     widthPx = unclampedWidth,
                     heightPx = unclampedHeight,
-                    maximumWidthPx = maxWidth
+                    maximumWidthPx = (maxWidth - fixedWidthPx).coerceAtLeast(minimumImageSizePx)
                 )
             } ?: boundEditor.clampImageSize(unclampedWidth, unclampedHeight)
         } ?: (unclampedWidth to unclampedHeight)
         val anchor = anchorPoint(corner, originalRect)
 
-        return when (corner) {
-            Corner.TOP_LEFT -> RectF(anchor.x - width, anchor.y - height, anchor.x, anchor.y)
-            Corner.TOP_RIGHT -> RectF(anchor.x, anchor.y - height, anchor.x + width, anchor.y)
-            Corner.BOTTOM_LEFT -> RectF(anchor.x - width, anchor.y, anchor.x, anchor.y + height)
-            Corner.BOTTOM_RIGHT -> RectF(anchor.x, anchor.y, anchor.x + width, anchor.y + height)
+        val visualWidth = width + fixedWidthPx
+        val visualHeight = height + fixedHeightPx
+        val rect = when (corner) {
+            Corner.TOP_LEFT -> RectF(anchor.x - visualWidth, anchor.y - visualHeight, anchor.x, anchor.y)
+            Corner.TOP_RIGHT -> RectF(anchor.x, anchor.y - visualHeight, anchor.x + visualWidth, anchor.y)
+            Corner.BOTTOM_LEFT -> RectF(anchor.x - visualWidth, anchor.y, anchor.x, anchor.y + visualHeight)
+            Corner.BOTTOM_RIGHT -> RectF(anchor.x, anchor.y, anchor.x + visualWidth, anchor.y + visualHeight)
         }
+        return rect to (width to height)
     }
 }

package/android/src/main/java/com/apollohg/editor/RenderMediaSpans.kt

@@ -74,6 +74,7 @@ internal class BlockImageSpan(
 
     @Volatile
     private var lastDrawRect: RectF? = null
+    private var temporarySizePx: Pair<Int, Int>? = null
 
     init {
         if (preparedSource != null) {
@@ -228,9 +229,6 @@ internal class BlockImageSpan(
         paint.color = Color.argb(24, 0, 0, 0)
         paint.style = Paint.Style.FILL
         canvas.drawRoundRect(rect, 16f * density, 16f * density, paint)
-        paint.color = Color.argb(120, 0, 0, 0)
-        val iconRadius = minOf(rect.width(), rect.height()) * 0.12f
-        canvas.drawCircle(rect.centerX(), rect.centerY(), iconRadius, paint)
         paint.color = previousColor
         paint.style = previousStyle
     }
@@ -247,6 +245,7 @@ internal class BlockImageSpan(
     }
 
     internal fun currentSizePx(): Pair<Int, Int> {
+        temporarySizePx?.let { return it }
         val maxWidth = resolvedMaxWidth()
         val loadedBitmap = bitmapLease.get()?.bitmap
         val fallbackAspectRatio = if (loadedBitmap != null && loadedBitmap.width > 0 &&
@@ -299,6 +298,19 @@ internal class BlockImageSpan(
 
     internal fun currentDrawRect(): RectF? = lastDrawRect?.let(::RectF)
 
+    internal fun setTemporarySizePx(widthPx: Float, heightPx: Float): Boolean {
+        val next = checkedPositiveInt(widthPx) to checkedPositiveInt(heightPx)
+        if (temporarySizePx == next) return false
+        temporarySizePx = next
+        return true
+    }
+
+    internal fun clearTemporarySize(): Boolean {
+        if (temporarySizePx == null) return false
+        temporarySizePx = null
+        return true
+    }
+
     private fun resolvedMaxWidth(): Float {
         val host = hostRef.get()
         val hostWidth = host?.let {

package/android/src/main/java/com/apollohg/editor/RichTextEditorView.kt

@@ -943,6 +943,20 @@ class RichTextEditorView @JvmOverloads constructor(
         editorEditText.resizeImageAtDocPos(docPos, clampedWidth, clampedHeight)
     }
 
+    internal fun selectedImageSpanForResize(): BlockImageSpan? =
+        editorEditText.selectedImageSpanForResize()
+
+    internal fun previewImageResize(span: BlockImageSpan, widthPx: Float, heightPx: Float): Boolean {
+        if (!span.setTemporarySizePx(widthPx, heightPx)) return false
+        editorEditText.relayoutImageResizePreview(span)
+        return true
+    }
+
+    internal fun restoreImageResizePreview(span: BlockImageSpan) {
+        if (!span.clearTemporarySize()) return
+        editorEditText.relayoutImageResizePreview(span)
+    }
+
     private fun refreshOverlays() {
         layoutAtomHostViews()
         remoteSelectionOverlayView.refreshGeometry()

package/android/src/main/java/com/apollohg/editor/viewer/AndroidProseLayoutEngine.kt

@@ -1182,7 +1182,7 @@ internal class StaticLayoutAndroidProseLayoutEngine : AndroidProseLayoutEngine {
                                 )
                         val width =
                             max(
-                                base.sizePx.toInt(),
+                                if (inline.nodeType == "mention") 0 else base.sizePx.toInt(),
                                 ceil(
                                     labelPaint.measureText(label) + atomInset.left + atomInset.right
                                 ).toInt()

package/dist/EditorStyleSheetNormalization.js

@@ -63,7 +63,7 @@ const fields = {
     italic: inline,
     underline: inline,
     strike: inline,
-    mention: [...inline, ...border],
+    mention: [...inline, ...border, ...spacing('padding')],
     placeholder: typography,
 };
 const enums = {

package/dist/EditorStyleSheetTypes.d.ts

@@ -91,7 +91,7 @@ export interface EditorHorizontalRuleStyle extends EditorBorderStyle, EditorMarg
     backgroundColor?: string;
     height?: number;
 }
-export interface EditorMentionStyle extends EditorInlineStyle, EditorBorderStyle {
+export interface EditorMentionStyle extends EditorInlineStyle, EditorBorderStyle, EditorPaddingStyle {
 }
 export interface EditorStyleMap {
     content: EditorSurfaceStyle;

package/ios/EditorCore.xcframework/Info.plist

@@ -8,32 +8,32 @@
 			<key>BinaryPath</key>
 			<string>libeditor_core.a</string>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_x86_64-simulator</string>
+			<string>ios-arm64</string>
 			<key>LibraryPath</key>
 			<string>libeditor_core.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>BinaryPath</key>
 			<string>libeditor_core.a</string>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64</string>
+			<string>ios-arm64_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libeditor_core.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>