@apollohg/react-native-prose-editor 0.5.3 → 0.5.5

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

@@ -55,6 +55,7 @@ data class EditorTextStyle(
 
 data class EditorListTheme(
     val indent: Float? = null,
+    val baseIndentMultiplier: Float? = null,
     val itemSpacing: Float? = null,
     val markerColor: Int? = null,
     val markerScale: Float? = null
@@ -64,6 +65,7 @@ data class EditorListTheme(
             json ?: return null
             return EditorListTheme(
                 indent = json.optNullableFloat("indent"),
+                baseIndentMultiplier = json.optNullableFloat("baseIndentMultiplier"),
                 itemSpacing = json.optNullableFloat("itemSpacing"),
                 markerColor = parseColor(json.optNullableString("markerColor")),
                 markerScale = json.optNullableFloat("markerScale")
@@ -194,6 +196,8 @@ data class EditorToolbarTheme(
     val borderColor: Int? = null,
     val borderWidth: Float? = null,
     val borderRadius: Float? = null,
+    val marginTop: Float? = null,
+    val showTopBorder: Boolean? = null,
     val keyboardOffset: Float? = null,
     val horizontalInset: Float? = null,
     val separatorColor: Int? = null,
@@ -222,6 +226,8 @@ data class EditorToolbarTheme(
                 borderColor = parseColor(json.optNullableString("borderColor")),
                 borderWidth = json.optNullableFloat("borderWidth"),
                 borderRadius = json.optNullableFloat("borderRadius"),
+                marginTop = json.optNullableFloat("marginTop"),
+                showTopBorder = if (json.has("showTopBorder")) json.optBoolean("showTopBorder") else null,
                 keyboardOffset = json.optNullableFloat("keyboardOffset"),
                 horizontalInset = json.optNullableFloat("horizontalInset"),
                 separatorColor = parseColor(json.optNullableString("separatorColor")),

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

@@ -386,6 +386,11 @@ class NativeEditorModule : Module() {
             Prop("themeJson") { view: NativeProseViewerExpoView, themeJson: String? ->
                 view.setThemeJson(themeJson)
             }
+            Prop("collapsesWhenEmpty") {
+                view: NativeProseViewerExpoView,
+                collapsesWhenEmpty: Boolean? ->
+                view.setCollapsesWhenEmpty(collapsesWhenEmpty)
+            }
             Prop("enableLinkTaps") { view: NativeProseViewerExpoView, enableLinkTaps: Boolean? ->
                 view.setEnableLinkTaps(enableLinkTaps)
             }

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

@@ -10,6 +10,8 @@ import android.view.ViewGroup
 import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
+import kotlin.math.abs
+import org.json.JSONArray
 
 class NativeProseViewerExpoView(
     context: Context,
@@ -26,8 +28,11 @@ class NativeProseViewerExpoView(
     private var lastRenderJson: String? = null
     private var lastThemeJson: String? = null
     private var lastEmittedContentHeight = 0
+    private var collapsesWhenEmpty = true
+    private var isCollapsedEmptyContent = false
     private var enableLinkTaps = true
     private var interceptLinkTaps = false
+    internal var suppressContentHeightEventsForTesting = false
 
     init {
         proseView.setBaseStyle(
@@ -36,6 +41,9 @@ class NativeProseViewerExpoView(
             Color.TRANSPARENT
         )
         proseView.isEditable = false
+        proseView.inputType = android.text.InputType.TYPE_CLASS_TEXT or
+            android.text.InputType.TYPE_TEXT_FLAG_MULTI_LINE or
+            android.text.InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS
         proseView.setImageResizingEnabled(false)
         proseView.setHeightBehavior(EditorHeightBehavior.AUTO_GROW)
         proseView.isFocusable = false
@@ -84,22 +92,25 @@ class NativeProseViewerExpoView(
     fun setRenderJson(renderJson: String?) {
         if (lastRenderJson == renderJson) return
         lastRenderJson = renderJson
-        proseView.applyRenderJSON(renderJson ?: "[]")
-        post {
-            requestLayout()
-            emitContentHeightIfNeeded(force = true)
-        }
+        applyRenderJson()
+        requestLayout()
     }
 
     fun setThemeJson(themeJson: String?) {
         if (lastThemeJson == themeJson) return
         lastThemeJson = themeJson
         proseView.applyTheme(EditorTheme.fromJson(themeJson))
-        proseView.applyRenderJSON(lastRenderJson ?: "[]")
-        post {
-            requestLayout()
-            emitContentHeightIfNeeded(force = true)
-        }
+        applyRenderJson()
+        requestLayout()
+    }
+
+    fun setCollapsesWhenEmpty(collapsesWhenEmpty: Boolean?) {
+        val nextValue = collapsesWhenEmpty ?: true
+        if (this.collapsesWhenEmpty == nextValue) return
+        this.collapsesWhenEmpty = nextValue
+        updateCollapsedEmptyState()
+        requestLayout()
+        emitContentHeightIfNeeded(force = true)
     }
 
     fun setEnableLinkTaps(enableLinkTaps: Boolean?) {
@@ -111,6 +122,12 @@ class NativeProseViewerExpoView(
     }
 
     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        if (isCollapsedEmptyContent) {
+            setMeasuredDimension(resolveSize(0, widthMeasureSpec), 0)
+            emitContentHeightIfNeeded()
+            return
+        }
+
         val childWidthSpec = getChildMeasureSpec(
             widthMeasureSpec,
             paddingLeft + paddingRight,
@@ -122,15 +139,29 @@ class NativeProseViewerExpoView(
         )
         proseView.measure(childWidthSpec, childHeightSpec)
 
+        val resolvedContentHeight = proseView.resolveAutoGrowHeight()
         val desiredWidth = proseView.measuredWidth + paddingLeft + paddingRight
-        val desiredHeight = proseView.measuredHeight + paddingTop + paddingBottom
+        val desiredHeight = resolvedContentHeight + paddingTop + paddingBottom
+        val measuredHeight = when (View.MeasureSpec.getMode(heightMeasureSpec)) {
+            View.MeasureSpec.AT_MOST -> desiredHeight.coerceAtMost(
+                View.MeasureSpec.getSize(heightMeasureSpec)
+            )
+            else -> desiredHeight
+        }
         setMeasuredDimension(
             resolveSize(desiredWidth, widthMeasureSpec),
-            resolveSize(desiredHeight, heightMeasureSpec)
+            measuredHeight
         )
+        emitContentHeightIfNeeded(measuredContentHeight = desiredHeight)
     }
 
     override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        if (isCollapsedEmptyContent) {
+            proseView.layout(paddingLeft, paddingTop, right - left - paddingRight, paddingTop)
+            emitContentHeightIfNeeded()
+            return
+        }
+
         val childLeft = paddingLeft
         val childTop = paddingTop
         proseView.layout(
@@ -142,30 +173,63 @@ class NativeProseViewerExpoView(
         emitContentHeightIfNeeded()
     }
 
-    private fun emitContentHeightIfNeeded(force: Boolean = false) {
-        val contentHeight = (measureContentHeightPx() + paddingTop + paddingBottom)
-            .coerceAtLeast(0)
-        if (contentHeight <= 0) {
+    private fun applyRenderJson() {
+        updateCollapsedEmptyState()
+        proseView.applyRenderJSON(lastRenderJson ?: "[]")
+        proseView.visibility = if (isCollapsedEmptyContent) View.GONE else View.VISIBLE
+    }
+
+    private fun updateCollapsedEmptyState() {
+        isCollapsedEmptyContent = collapsesWhenEmpty &&
+            renderJsonContainsOnlyEmptyParagraphs(lastRenderJson ?: "[]")
+        proseView.visibility = if (isCollapsedEmptyContent) View.GONE else View.VISIBLE
+    }
+
+    private fun emitContentHeightIfNeeded(
+        force: Boolean = false,
+        measuredContentHeight: Int? = null
+    ) {
+        val contentHeight = if (isCollapsedEmptyContent) {
+            0
+        } else {
+            (
+                measuredContentHeight ?: (measureContentHeightPx() + paddingTop + paddingBottom)
+            ).coerceAtLeast(0)
+        }
+        if (contentHeight <= 0 && !isCollapsedEmptyContent) {
             return
         }
         if (!force && contentHeight == lastEmittedContentHeight) {
             return
         }
         lastEmittedContentHeight = contentHeight
+        if (suppressContentHeightEventsForTesting) {
+            return
+        }
         onContentHeightChange(mapOf("contentHeight" to contentHeight))
     }
 
     private fun measureContentHeightPx(): Int {
-        val currentMeasuredHeight = proseView.measuredHeight
-        if (currentMeasuredHeight > 0 && proseView.layout != null) {
-            return currentMeasuredHeight
+        if (isCollapsedEmptyContent) {
+            return 0
         }
 
         val availableWidthPx = resolveAvailableWidthPx()
-        val childWidthSpec = View.MeasureSpec.makeMeasureSpec(availableWidthPx, View.MeasureSpec.EXACTLY)
-        val childHeightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
-        proseView.measure(childWidthSpec, childHeightSpec)
-        return proseView.measuredHeight
+        if (
+            proseView.measuredWidth <= 0 ||
+            abs(proseView.measuredWidth - availableWidthPx) > 1
+        ) {
+            val childWidthSpec = View.MeasureSpec.makeMeasureSpec(
+                availableWidthPx,
+                View.MeasureSpec.EXACTLY
+            )
+            val childHeightSpec = View.MeasureSpec.makeMeasureSpec(
+                0,
+                View.MeasureSpec.UNSPECIFIED
+            )
+            proseView.measure(childWidthSpec, childHeightSpec)
+        }
+        return proseView.resolveAutoGrowHeight()
     }
 
     private fun resolveAvailableWidthPx(): Int {
@@ -191,4 +255,61 @@ class NativeProseViewerExpoView(
             true
         }.getOrDefault(false)
     }
+
+    companion object {
+        private const val EMPTY_TEXT_BLOCK_PLACEHOLDER = '\u200B'
+
+        internal fun renderJsonContainsOnlyEmptyParagraphs(renderJson: String): Boolean {
+            val elements = try {
+                JSONArray(renderJson)
+            } catch (_: Exception) {
+                return false
+            }
+
+            if (elements.length() == 0) {
+                return true
+            }
+
+            var hasParagraph = false
+            var paragraphIsOpen = false
+
+            for (index in 0 until elements.length()) {
+                val element = elements.optJSONObject(index) ?: return false
+                when (element.optString("type", "")) {
+                    "blockStart" -> {
+                        if (
+                            paragraphIsOpen ||
+                            element.optString("nodeType", "") != "paragraph" ||
+                            element.optInt("depth", 0) != 0
+                        ) {
+                            return false
+                        }
+                        paragraphIsOpen = true
+                        hasParagraph = true
+                    }
+
+                    "textRun" -> {
+                        val text = element.optString("text", "")
+                        if (
+                            !paragraphIsOpen ||
+                            !text.all { it == EMPTY_TEXT_BLOCK_PLACEHOLDER }
+                        ) {
+                            return false
+                        }
+                    }
+
+                    "blockEnd" -> {
+                        if (!paragraphIsOpen) {
+                            return false
+                        }
+                        paragraphIsOpen = false
+                    }
+
+                    else -> return false
+                }
+            }
+
+            return hasParagraph && !paragraphIsOpen
+        }
+    }
 }

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

@@ -1465,6 +1465,9 @@ object RenderBridge {
         val indent = calculateIndent(currentBlock, blockStack, theme, density)
         val markerWidth = calculateMarkerWidth(density)
         val quoteDepth = blockquoteDepth(blockStack)
+        val indentPerDepth = (theme?.list?.indent ?: LayoutConstants.INDENT_PER_DEPTH) * density
+        val listBaseIndentAdjustment =
+            calculateListBaseIndentAdjustment(currentBlock, theme, density)
         val quoteStripeColor = if (quoteDepth > 0) {
             theme?.blockquote?.borderColor ?: Color.argb(
                 (Color.alpha(resolveInlineTextColor(blockStack, Color.BLACK, theme)) * 0.3f).toInt(),
@@ -1486,8 +1489,9 @@ object RenderBridge {
         ) * density
         val blockquoteIndentPx = (quoteDepth * quoteIndent).toInt()
         val quoteBaseIndent = if (quoteDepth > 0) {
-            ((currentBlock.depth * ((theme?.list?.indent ?: LayoutConstants.INDENT_PER_DEPTH) * density))
-                - (quoteDepth * ((theme?.list?.indent ?: LayoutConstants.INDENT_PER_DEPTH) * density))
+            ((currentBlock.depth * indentPerDepth)
+                - (quoteDepth * indentPerDepth)
+                + listBaseIndentAdjustment
                 + ((quoteDepth - 1f) * quoteIndent)).toInt()
         } else {
             0
@@ -1666,7 +1670,25 @@ object RenderBridge {
             (theme?.blockquote?.markerGap ?: LayoutConstants.BLOCKQUOTE_MARKER_GAP) +
                 (theme?.blockquote?.borderWidth ?: LayoutConstants.BLOCKQUOTE_BORDER_WIDTH)
         ) * density
-        return (context.depth * indentPerDepth) - (quoteDepth * indentPerDepth) + (quoteDepth * quoteIndent)
+        val listBaseIndentAdjustment = calculateListBaseIndentAdjustment(context, theme, density)
+        return (context.depth * indentPerDepth) -
+            (quoteDepth * indentPerDepth) +
+            listBaseIndentAdjustment +
+            (quoteDepth * quoteIndent)
+    }
+
+    private fun calculateListBaseIndentAdjustment(
+        context: BlockContext,
+        theme: EditorTheme?,
+        density: Float
+    ): Float {
+        if (context.listContext == null) {
+            return 0f
+        }
+
+        val indentPerDepth = (theme?.list?.indent ?: LayoutConstants.INDENT_PER_DEPTH) * density
+        val listBaseIndentMultiplier = maxOf(theme?.list?.baseIndentMultiplier ?: 1f, 0f)
+        return (listBaseIndentMultiplier - 1f) * indentPerDepth
     }
 
     private fun effectiveBlockContext(blockStack: List<BlockContext>): BlockContext? {

package/dist/EditorTheme.d.ts

@@ -36,6 +36,7 @@ export interface EditorHeadingTheme {
 }
 export interface EditorListTheme {
     indent?: number;
+    baseIndentMultiplier?: number;
     itemSpacing?: number;
     markerColor?: string;
     markerScale?: number;
@@ -59,6 +60,8 @@ export interface EditorToolbarTheme {
     borderColor?: string;
     borderWidth?: number;
     borderRadius?: number;
+    marginTop?: number;
+    showTopBorder?: boolean;
     keyboardOffset?: number;
     horizontalInset?: number;
     separatorColor?: string;

package/dist/EditorToolbar.js

@@ -109,7 +109,7 @@ const DEFAULT_MATERIAL_ICONS = {
     undo: 'undo',
     redo: 'redo',
 };
-function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleHeading, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS, theme, showTopBorder = true, }) {
+function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleHeading, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS, theme, showTopBorder, }) {
     const marks = activeState.marks ?? {};
     const nodes = activeState.nodes ?? {};
     const commands = activeState.commands ?? {};
@@ -371,6 +371,7 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
             groupsByKey: nextGroups,
         };
     }, [expandedGroupKey, menuState?.groupKey, resolveButton, toolbarItems]);
+    const resolvedShowTopBorder = showTopBorder ?? theme?.showTopBorder ?? true;
     (0, react_1.useEffect)(() => {
         if (expandedGroupKey != null && !groupsByKey.has(expandedGroupKey)) {
             setExpandedGroupKey(null);
@@ -414,7 +415,7 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
                 });
         });
     }, []);
-    const menuGroup = menuState != null ? groupsByKey.get(menuState.groupKey) ?? null : null;
+    const menuGroup = menuState != null ? (groupsByKey.get(menuState.groupKey) ?? null) : null;
     const menuHeight = menuGroup ? menuGroup.children.length * 40 + 16 : 0;
     const menuTop = menuState == null
         ? 0
@@ -426,7 +427,11 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
         const activeColor = theme?.buttonActiveColor ?? ACTIVE_COLOR;
         const defaultColor = theme?.buttonColor ?? DEFAULT_COLOR;
         const disabledColor = theme?.buttonDisabledColor ?? DISABLED_COLOR;
-        const color = button.isActive ? activeColor : button.isDisabled ? disabledColor : defaultColor;
+        const color = button.isActive
+            ? activeColor
+            : button.isDisabled
+                ? disabledColor
+                : defaultColor;
         const anchorGroupKey = options?.anchorGroupKey;
         return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: anchorGroupKey == null
                 ? undefined
@@ -457,15 +462,15 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
         ] }, key));
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
             styles.container,
-            !showTopBorder && styles.containerWithoutTopBorder,
+            !resolvedShowTopBorder && styles.containerWithoutTopBorder,
             theme?.backgroundColor != null ? { backgroundColor: theme.backgroundColor } : null,
             theme?.borderColor != null
-                ? showTopBorder
+                ? resolvedShowTopBorder
                     ? { borderTopColor: theme.borderColor }
                     : null
                 : null,
             theme?.borderWidth != null
-                ? showTopBorder
+                ? resolvedShowTopBorder
                     ? { borderTopWidth: theme.borderWidth }
                     : null
                 : null,

package/dist/NativeProseViewer.js

@@ -4,6 +4,7 @@ exports.NativeProseViewer = NativeProseViewer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const expo_modules_core_1 = require("expo-modules-core");
+const react_native_1 = require("react-native");
 const addons_1 = require("./addons");
 const EditorTheme_1 = require("./EditorTheme");
 const schemas_1 = require("./schemas");
@@ -168,6 +169,59 @@ function isEmptyParagraphPlaceholderText(text) {
     }
     return Array.from(text).every((char) => char === EMPTY_TEXT_BLOCK_PLACEHOLDER);
 }
+function isCollapsibleEmptyParagraphText(text) {
+    return Array.from(text).every((char) => char === EMPTY_TEXT_BLOCK_PLACEHOLDER);
+}
+function renderElementsJsonContainsOnlyEmptyParagraphs(renderJson) {
+    let parsedElements;
+    try {
+        parsedElements = JSON.parse(renderJson);
+    }
+    catch {
+        return false;
+    }
+    if (!Array.isArray(parsedElements)) {
+        return false;
+    }
+    if (parsedElements.length === 0) {
+        return true;
+    }
+    let hasParagraph = false;
+    let paragraphIsOpen = false;
+    for (const element of parsedElements) {
+        if (element == null || typeof element !== 'object' || Array.isArray(element)) {
+            return false;
+        }
+        const renderElement = element;
+        switch (renderElement.type) {
+            case 'blockStart':
+                if (paragraphIsOpen ||
+                    renderElement.nodeType !== 'paragraph' ||
+                    renderElement.depth !== 0) {
+                    return false;
+                }
+                paragraphIsOpen = true;
+                hasParagraph = true;
+                break;
+            case 'textRun':
+                if (!paragraphIsOpen ||
+                    typeof renderElement.text !== 'string' ||
+                    !isCollapsibleEmptyParagraphText(renderElement.text)) {
+                    return false;
+                }
+                break;
+            case 'blockEnd':
+                if (!paragraphIsOpen) {
+                    return false;
+                }
+                paragraphIsOpen = false;
+                break;
+            default:
+                return false;
+        }
+    }
+    return hasParagraph && !paragraphIsOpen;
+}
 function isTrailingEmptyParagraphRange(elements, start, endExclusive) {
     const startElement = elements[start];
     const endElement = elements[endExclusive - 1];
@@ -325,26 +379,22 @@ function NativeProseViewer({ ...props }) {
         mentionPayloadsByDocPos,
         serializedContentJson,
     ]);
+    const renderJsonIsCollapsedEmpty = (0, react_1.useMemo)(() => collapseTrailingEmptyParagraphs &&
+        renderElementsJsonContainsOnlyEmptyParagraphs(renderJson), [collapseTrailingEmptyParagraphs, renderJson]);
     const [contentHeight, setContentHeight] = (0, react_1.useState)(null);
-    const allowContentHeightShrinkRef = (0, react_1.useRef)(true);
-    (0, react_1.useEffect)(() => {
-        allowContentHeightShrinkRef.current = true;
-    }, [resolvedContentRevision, renderJson, themeJson]);
     const handleContentHeightChange = (0, react_1.useCallback)((event) => {
-        const nextHeight = event.nativeEvent.contentHeight;
-        if (nextHeight <= 0)
+        const density = react_native_1.Platform.OS === 'android' ? react_native_1.PixelRatio.get() : 1;
+        const nextHeight = Math.ceil(event.nativeEvent.contentHeight / density);
+        if (nextHeight < 0)
+            return;
+        if (nextHeight === 0 && !renderJsonIsCollapsedEmpty)
+            return;
+        if (nextHeight === 0) {
+            setContentHeight((currentHeight) => currentHeight === 0 ? currentHeight : 0);
             return;
-        setContentHeight((currentHeight) => currentHeight == null ||
-            nextHeight >= currentHeight ||
-            allowContentHeightShrinkRef.current
-            ? (() => {
-                allowContentHeightShrinkRef.current = false;
-                return currentHeight === nextHeight
-                    ? currentHeight
-                    : nextHeight;
-            })()
-            : currentHeight);
-    }, []);
+        }
+        setContentHeight((currentHeight) => currentHeight === nextHeight ? currentHeight : nextHeight);
+    }, [renderJsonIsCollapsedEmpty]);
     const handlePressMention = (0, react_1.useCallback)((event) => {
         if (!onPressMention)
             return;
@@ -364,10 +414,19 @@ function NativeProseViewer({ ...props }) {
             text: event.nativeEvent.text,
         });
     }, [onPressLink]);
-    const nativeStyle = (0, react_1.useMemo)(() => [
-        { minHeight: 1 },
-        style,
-        contentHeight != null ? { minHeight: contentHeight } : null,
-    ], [contentHeight, style]);
-    return ((0, jsx_runtime_1.jsx)(NativeProseViewerView, { style: nativeStyle, renderJson: renderJson, themeJson: themeJson, enableLinkTaps: enableLinkTaps, interceptLinkTaps: typeof onPressLink === 'function', onContentHeightChange: handleContentHeightChange, onPressLink: typeof onPressLink === 'function' ? handlePressLink : undefined, onPressMention: typeof onPressMention === 'function' ? handlePressMention : undefined }));
+    const nativeStyle = (0, react_1.useMemo)(() => {
+        let measuredStyle = null;
+        if (renderJsonIsCollapsedEmpty) {
+            measuredStyle = { height: 0, minHeight: 0 };
+        }
+        else if (contentHeight != null && contentHeight > 0) {
+            measuredStyle = { minHeight: contentHeight };
+        }
+        return [
+            { minHeight: renderJsonIsCollapsedEmpty ? 0 : 1 },
+            style,
+            measuredStyle,
+        ];
+    }, [contentHeight, renderJsonIsCollapsedEmpty, style]);
+    return ((0, jsx_runtime_1.jsx)(NativeProseViewerView, { style: nativeStyle, renderJson: renderJson, themeJson: themeJson, collapsesWhenEmpty: collapseTrailingEmptyParagraphs, enableLinkTaps: enableLinkTaps, interceptLinkTaps: typeof onPressLink === 'function', onContentHeightChange: handleContentHeightChange, onPressLink: typeof onPressLink === 'function' ? handlePressLink : undefined, onPressMention: typeof onPressMention === 'function' ? handlePressMention : undefined }));
 }

package/dist/NativeRichTextEditor.js

@@ -16,6 +16,9 @@ const DEV_NATIVE_VIEW_KEY = __DEV__
     : 'native-editor';
 const LINK_TOOLBAR_ACTION_KEY = '__native-editor-link__';
 const IMAGE_TOOLBAR_ACTION_KEY = '__native-editor-image__';
+const DEFAULT_MENTION_TRIGGER = '@';
+const MAX_INLINE_MENTION_SUGGESTIONS = 8;
+const INLINE_TOOLBAR_BORDER_COLOR = '#E5E5EA';
 function mapToolbarChildForNative(item, activeState, editable, onRequestLink, onRequestImage) {
     if (item.type === 'link') {
         return {
@@ -34,7 +37,9 @@ function mapToolbarChildForNative(item, activeState, editable, onRequestLink, on
             label: item.label,
             icon: item.icon,
             isActive: false,
-            isDisabled: !editable || !onRequestImage || !activeState.insertableNodes.includes(schemas_1.IMAGE_NODE_NAME),
+            isDisabled: !editable ||
+                !onRequestImage ||
+                !activeState.insertableNodes.includes(schemas_1.IMAGE_NODE_NAME),
         };
     }
     return item;
@@ -65,6 +70,34 @@ function isPromiseLike(value) {
 function isRecord(value) {
     return value != null && typeof value === 'object' && !Array.isArray(value);
 }
+function resolveMentionTrigger(addons) {
+    return addons?.mentions?.trigger?.trim() || DEFAULT_MENTION_TRIGGER;
+}
+function resolveMentionSuggestionLabel(suggestion, trigger) {
+    return suggestion.label?.trim() || `${trigger}${suggestion.title}`;
+}
+function filterMentionSuggestions(suggestions, query, trigger) {
+    const normalizedQuery = query.trim().toLowerCase();
+    const filtered = normalizedQuery.length === 0
+        ? suggestions
+        : suggestions.filter((suggestion) => {
+            const label = resolveMentionSuggestionLabel(suggestion, trigger);
+            return (suggestion.title.toLowerCase().includes(normalizedQuery) ||
+                label.toLowerCase().includes(normalizedQuery) ||
+                suggestion.subtitle?.toLowerCase().includes(normalizedQuery) === true);
+        });
+    return filtered.slice(0, MAX_INLINE_MENTION_SUGGESTIONS);
+}
+function resolveMentionSuggestionAttrs(suggestion, trigger) {
+    const attrs = { ...(suggestion.attrs ?? {}) };
+    if (!('label' in attrs)) {
+        attrs.label = resolveMentionSuggestionLabel(suggestion, trigger);
+    }
+    if (!('mentionSuggestionChar' in attrs)) {
+        attrs.mentionSuggestionChar = trigger;
+    }
+    return attrs;
+}
 const AUTO_LINK_URL_REGEX = /(?:https?:\/\/|www\.)\S+/giu;
 const AUTO_LINK_INLINE_PLACEHOLDER = '\uFFFC';
 const AUTO_LINK_LEADING_BOUNDARY_CHARS = new Set(['(', '[', '{', '<', '"', "'"]);
@@ -142,7 +175,8 @@ function trimAutoLinkTrailingPunctuation(value) {
             result = chars.join('');
             continue;
         }
-        if ((lastChar === '"' || lastChar === "'") && countOccurrences(result, lastChar) % 2 !== 0) {
+        if ((lastChar === '"' || lastChar === "'") &&
+            countOccurrences(result, lastChar) % 2 !== 0) {
             chars.pop();
             result = chars.join('');
             continue;
@@ -169,7 +203,9 @@ function isAutoLinkBoundaryChar(char) {
     if (!char) {
         return true;
     }
-    return /\s/u.test(char) || char === AUTO_LINK_INLINE_PLACEHOLDER || AUTO_LINK_LEADING_BOUNDARY_CHARS.has(char);
+    return (/\s/u.test(char) ||
+        char === AUTO_LINK_INLINE_PLACEHOLDER ||
+        AUTO_LINK_LEADING_BOUNDARY_CHARS.has(char));
 }
 function isAutoLinkTrailingDelimiterChar(char) {
     if (!char) {
@@ -236,13 +272,15 @@ function findAutoLinkCandidateInInlineBlock(block, cursorDocPos) {
         return null;
     }
     let localIndex = 0;
-    while (localIndex < block.docPositions.length && block.docPositions[localIndex] < cursorDocPos) {
+    while (localIndex < block.docPositions.length &&
+        block.docPositions[localIndex] < cursorDocPos) {
         localIndex += 1;
     }
     if (localIndex === 0) {
         return null;
     }
-    if (cursorDocPos < block.contentEnd && !isAutoLinkTrailingDelimiterChar(block.chars[localIndex - 1])) {
+    if (cursorDocPos < block.contentEnd &&
+        !isAutoLinkTrailingDelimiterChar(block.chars[localIndex - 1])) {
         return null;
     }
     const prefixChars = block.chars.slice(0, localIndex);
@@ -444,11 +482,14 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         canUndo: false,
         canRedo: false,
     });
+    const [mentionQueryEvent, setMentionQueryEvent] = (0, react_1.useState)(null);
     // Selection and rendered text length refs (non-rendering state)
     const selectionRef = (0, react_1.useRef)({ type: 'text', anchor: 0, head: 0 });
     const renderedTextLengthRef = (0, react_1.useRef)(0);
     const documentVersionRef = (0, react_1.useRef)(null);
     const toolbarRef = (0, react_1.useRef)(null);
+    const mentionQueryEventRef = (0, react_1.useRef)(null);
+    mentionQueryEventRef.current = mentionQueryEvent;
     const toolbarItemsSerializationCacheRef = (0, react_1.useRef)(null);
     // Stable callback refs to avoid re-renders
     const onContentChangeRef = (0, react_1.useRef)(onContentChange);
@@ -672,12 +713,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             setIsReady(false);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        maxLength,
-        syncStateFromUpdate,
-        allowBase64Images,
-        serializedSchemaJson,
-    ]);
+    }, [maxLength, syncStateFromUpdate, allowBase64Images, serializedSchemaJson]);
     (0, react_1.useEffect)(() => {
         if (value == null)
             return;
@@ -803,6 +839,9 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     const handleFocusChange = (0, react_1.useCallback)((event) => {
         const { isFocused: focused } = event.nativeEvent;
         setIsFocused(focused);
+        if (!focused) {
+            setMentionQueryEvent(null);
+        }
         if (focused) {
             onFocusRef.current?.();
         }
@@ -810,6 +849,12 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             onBlurRef.current?.();
         }
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (addons?.mentions != null) {
+            return;
+        }
+        setMentionQueryEvent(null);
+    }, [addons?.mentions]);
     const handleContentHeightChange = (0, react_1.useCallback)((event) => {
         if (heightBehavior !== 'autoGrow')
             return;
@@ -897,6 +942,46 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         }
         onToolbarAction?.(event.nativeEvent.key);
     }, [onToolbarAction, openImageRequest, openLinkRequest]);
+    const resolveMentionSelectionAttrs = (0, react_1.useCallback)((selectionEvent) => {
+        let resolvedAttrs;
+        try {
+            resolvedAttrs =
+                addonsRef.current?.mentions?.resolveSelectionAttrs?.(selectionEvent);
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('NativeRichTextEditor: mentions.resolveSelectionAttrs threw', error);
+            }
+        }
+        return isRecord(resolvedAttrs)
+            ? { ...selectionEvent.attrs, ...resolvedAttrs }
+            : selectionEvent.attrs;
+    }, []);
+    const handleInlineMentionSuggestionPress = (0, react_1.useCallback)((suggestion) => {
+        const mentionQuery = mentionQueryEventRef.current;
+        const mentions = addonsRef.current?.mentions;
+        if (!mentionQuery ||
+            !mentions ||
+            !bridgeRef.current ||
+            bridgeRef.current.isDestroyed) {
+            return;
+        }
+        const attrs = resolveMentionSelectionAttrs({
+            trigger: mentionQuery.trigger,
+            suggestion,
+            attrs: resolveMentionSuggestionAttrs(suggestion, mentionQuery.trigger),
+            range: mentionQuery.range,
+        });
+        const update = runAndApply(() => bridgeRef.current?.insertContentJsonAtSelectionScalar(mentionQuery.range.anchor, mentionQuery.range.head, (0, addons_1.buildMentionFragmentJson)(attrs)) ?? null);
+        if (update) {
+            setMentionQueryEvent(null);
+            mentions.onSelect?.({
+                trigger: mentionQuery.trigger,
+                suggestion,
+                attrs,
+            });
+        }
+    }, [resolveMentionSelectionAttrs, runAndApply]);
     const handleAddonEvent = (0, react_1.useCallback)((event) => {
         let parsed = null;
         try {
@@ -908,11 +993,18 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         if (!parsed)
             return;
         if (parsed.type === 'mentionsQueryChange') {
-            addonsRef.current?.mentions?.onQueryChange?.({
+            const nextEvent = {
                 query: parsed.query,
                 trigger: parsed.trigger,
                 range: parsed.range,
                 isActive: parsed.isActive,
+            };
+            setMentionQueryEvent(parsed.isActive ? nextEvent : null);
+            addonsRef.current?.mentions?.onQueryChange?.({
+                query: nextEvent.query,
+                trigger: nextEvent.trigger,
+                range: nextEvent.range,
+                isActive: nextEvent.isActive,
             });
             return;
         }
@@ -926,19 +1018,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 attrs: parsed.attrs,
                 range: parsed.range,
             };
-            let resolvedAttrs;
-            try {
-                resolvedAttrs =
-                    addonsRef.current?.mentions?.resolveSelectionAttrs?.(selectionEvent);
-            }
-            catch (error) {
-                if (__DEV__) {
-                    console.error('NativeRichTextEditor: mentions.resolveSelectionAttrs threw', error);
-                }
-            }
-            const finalAttrs = isRecord(resolvedAttrs)
-                ? { ...parsed.attrs, ...resolvedAttrs }
-                : parsed.attrs;
+            const finalAttrs = resolveMentionSelectionAttrs(selectionEvent);
             const update = runAndApply(() => bridgeRef.current?.insertContentJsonAtSelectionScalar(parsed.range.anchor, parsed.range.head, (0, addons_1.buildMentionFragmentJson)(finalAttrs)) ?? null);
             if (update) {
                 addonsRef.current?.mentions?.onSelect?.({
@@ -959,7 +1039,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 attrs: parsed.attrs,
             });
         }
-    }, [runAndApply]);
+    }, [resolveMentionSelectionAttrs, runAndApply]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         focus() {
             nativeViewRef.current?.focus?.();
@@ -1092,6 +1172,25 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         borderWidth: theme?.toolbar?.borderWidth,
         borderRadius: theme?.toolbar?.borderRadius,
     };
+    const inlineToolbarMarginTop = theme?.toolbar?.marginTop ?? 8;
+    const inlineToolbarShowTopBorder = theme?.toolbar?.showTopBorder ?? false;
+    const inlineToolbarMentionTheme = theme?.mentions ?? addons?.mentions?.theme;
+    const inlineToolbarContentTopBorderStyle = inlineToolbarShowTopBorder
+        ? {
+            borderTopWidth: theme?.toolbar?.borderWidth ?? react_native_1.StyleSheet.hairlineWidth,
+            borderTopColor: theme?.toolbar?.borderColor ?? INLINE_TOOLBAR_BORDER_COLOR,
+        }
+        : null;
+    const inlineMentionSuggestions = toolbarPlacement === 'inline' &&
+        isFocused &&
+        mentionQueryEvent != null &&
+        addons?.mentions != null
+        ? filterMentionSuggestions(addons.mentions.suggestions ?? [], mentionQueryEvent.query, mentionQueryEvent.trigger || resolveMentionTrigger(addons))
+        : [];
+    const shouldShowInlineMentionSuggestions = shouldRenderJsToolbar &&
+        toolbarPlacement === 'inline' &&
+        isFocused &&
+        inlineMentionSuggestions.length > 0;
     const containerMinHeight = react_native_1.StyleSheet.flatten(containerStyle)?.minHeight;
     const nativeViewStyleParts = [];
     if (containerMinHeight != null) {
@@ -1106,6 +1205,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     const nativeViewStyle = nativeViewStyleParts.length <= 1 ? nativeViewStyleParts[0] : nativeViewStyleParts;
     const jsToolbar = ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: toolbarRef, testID: 'native-editor-js-toolbar', style: [
             styles.inlineToolbar,
+            { marginTop: inlineToolbarMarginTop },
             inlineToolbarChrome.backgroundColor != null
                 ? { backgroundColor: inlineToolbarChrome.backgroundColor }
                 : null,
@@ -1118,7 +1218,43 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             inlineToolbarChrome.borderRadius != null
                 ? { borderRadius: inlineToolbarChrome.borderRadius }
                 : null,
-        ], onLayout: updateToolbarFrame, children: (0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { activeState: activeState, historyState: historyState, toolbarItems: toolbarItems, theme: theme?.toolbar, showTopBorder: false, onToggleMark: (mark) => runAndApply(() => bridgeRef.current?.toggleMark(mark) ?? null, {
+        ], onLayout: updateToolbarFrame, children: shouldShowInlineMentionSuggestions ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: 'native-editor-inline-mention-suggestions', style: [
+                styles.inlineMentionSuggestionsContainer,
+                inlineToolbarContentTopBorderStyle,
+            ], children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.inlineMentionSuggestionsContent, keyboardShouldPersistTaps: 'always', children: inlineMentionSuggestions.map((suggestion) => {
+                    const label = resolveMentionSuggestionLabel(suggestion, mentionQueryEvent?.trigger ?? resolveMentionTrigger(addons));
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: `native-editor-inline-mention-suggestion-${suggestion.key}`, onPress: () => handleInlineMentionSuggestionPress(suggestion), accessibilityRole: 'button', accessibilityLabel: label, style: ({ pressed }) => [
+                            styles.inlineMentionSuggestion,
+                            {
+                                backgroundColor: pressed
+                                    ? (inlineToolbarMentionTheme?.optionHighlightedBackgroundColor ??
+                                        'rgba(0, 122, 255, 0.12)')
+                                    : (inlineToolbarMentionTheme?.backgroundColor ??
+                                        '#F2F2F7'),
+                                borderColor: inlineToolbarMentionTheme?.borderColor ??
+                                    'transparent',
+                                borderWidth: inlineToolbarMentionTheme?.borderWidth ?? 0,
+                                borderRadius: inlineToolbarMentionTheme?.borderRadius ?? 12,
+                            },
+                        ], children: ({ pressed }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
+                                        styles.inlineMentionSuggestionTitle,
+                                        {
+                                            color: pressed
+                                                ? (inlineToolbarMentionTheme?.optionHighlightedTextColor ??
+                                                    inlineToolbarMentionTheme?.optionTextColor ??
+                                                    '#000000')
+                                                : (inlineToolbarMentionTheme?.optionTextColor ??
+                                                    inlineToolbarMentionTheme?.textColor ??
+                                                    '#000000'),
+                                        },
+                                    ], children: label }), suggestion.subtitle ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
+                                        styles.inlineMentionSuggestionSubtitle,
+                                        {
+                                            color: inlineToolbarMentionTheme?.optionSecondaryTextColor ??
+                                                '#8E8E93',
+                                        },
+                                    ], children: suggestion.subtitle })) : null] })) }, suggestion.key));
+                }) }) })) : ((0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { activeState: activeState, historyState: historyState, toolbarItems: toolbarItems, theme: theme?.toolbar, showTopBorder: inlineToolbarShowTopBorder, onToggleMark: (mark) => runAndApply(() => bridgeRef.current?.toggleMark(mark) ?? null, {
                 skipNativeApplyIfContentUnchanged: true,
             }), onToggleListType: (listType) => runAndApply(() => bridgeRef.current?.toggleList(listType) ?? null), onToggleHeading: (level) => runAndApply(() => bridgeRef.current?.toggleHeading(level) ?? null), onToggleBlockquote: () => runAndApply(() => bridgeRef.current?.toggleBlockquote() ?? null), onInsertNodeType: (nodeType) => runAndApply(() => bridgeRef.current?.insertNode(nodeType) ?? null), onRunCommand: (command) => {
                 switch (command) {
@@ -1143,7 +1279,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 skipNativeApplyIfContentUnchanged: true,
             }), onToggleStrike: () => runAndApply(() => bridgeRef.current?.toggleMark('strike') ?? null, {
                 skipNativeApplyIfContentUnchanged: true,
-            }), onToggleBulletList: () => runAndApply(() => bridgeRef.current?.toggleList('bulletList') ?? null), onToggleOrderedList: () => runAndApply(() => bridgeRef.current?.toggleList('orderedList') ?? null), onIndentList: () => runAndApply(() => bridgeRef.current?.indentListItem() ?? null), onOutdentList: () => runAndApply(() => bridgeRef.current?.outdentListItem() ?? null), onInsertHorizontalRule: () => runAndApply(() => bridgeRef.current?.insertNode('horizontalRule') ?? null), onInsertLineBreak: () => runAndApply(() => bridgeRef.current?.insertNode('hardBreak') ?? null), onUndo: () => runAndApply(() => bridgeRef.current?.undo() ?? null), onRedo: () => runAndApply(() => bridgeRef.current?.redo() ?? null) }) }));
+            }), onToggleBulletList: () => runAndApply(() => bridgeRef.current?.toggleList('bulletList') ?? null), onToggleOrderedList: () => runAndApply(() => bridgeRef.current?.toggleList('orderedList') ?? null), onIndentList: () => runAndApply(() => bridgeRef.current?.indentListItem() ?? null), onOutdentList: () => runAndApply(() => bridgeRef.current?.outdentListItem() ?? null), onInsertHorizontalRule: () => runAndApply(() => bridgeRef.current?.insertNode('horizontalRule') ?? null), onInsertLineBreak: () => runAndApply(() => bridgeRef.current?.insertNode('hardBreak') ?? null), onUndo: () => runAndApply(() => bridgeRef.current?.undo() ?? null), onRedo: () => runAndApply(() => bridgeRef.current?.redo() ?? null) })) }));
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, containerStyle], children: [(0, jsx_runtime_1.jsx)(NativeEditorView, { ref: nativeViewRef, style: nativeViewStyle, editorId: editorInstanceId, placeholder: placeholder, editable: editable, autoFocus: autoFocus, showToolbar: showToolbar, toolbarPlacement: toolbarPlacement, heightBehavior: heightBehavior, allowImageResizing: allowImageResizing, themeJson: themeJson, addonsJson: addonsJson, toolbarItemsJson: toolbarItemsJson, remoteSelectionsJson: remoteSelectionsJson, toolbarFrameJson: toolbarPlacement === 'inline' && isFocused ? toolbarFrameJson : undefined, editorUpdateJson: pendingNativeUpdate.json, editorUpdateRevision: pendingNativeUpdate.revision, onEditorUpdate: handleUpdate, onSelectionChange: handleSelectionChange, onFocusChange: handleFocusChange, onContentHeightChange: handleContentHeightChange, onToolbarAction: handleToolbarAction, onAddonEvent: handleAddonEvent }, DEV_NATIVE_VIEW_KEY), shouldRenderJsToolbar && jsToolbar] }));
 });
 const styles = react_native_1.StyleSheet.create({
@@ -1151,9 +1287,32 @@ const styles = react_native_1.StyleSheet.create({
         position: 'relative',
     },
     inlineToolbar: {
-        marginTop: 8,
         borderWidth: react_native_1.StyleSheet.hairlineWidth,
-        borderColor: '#E5E5EA',
+        borderColor: INLINE_TOOLBAR_BORDER_COLOR,
+        overflow: 'hidden',
+    },
+    inlineMentionSuggestionsContainer: {
         overflow: 'hidden',
     },
+    inlineMentionSuggestionsContent: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        alignItems: 'center',
+    },
+    inlineMentionSuggestion: {
+        minWidth: 88,
+        minHeight: 40,
+        marginRight: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        justifyContent: 'center',
+    },
+    inlineMentionSuggestionTitle: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    inlineMentionSuggestionSubtitle: {
+        marginTop: 1,
+        fontSize: 12,
+    },
 });

package/ios/EditorTheme.swift

@@ -80,12 +80,14 @@ struct EditorTextStyle {
 
 struct EditorListTheme {
     var indent: CGFloat?
+    var baseIndentMultiplier: CGFloat?
     var itemSpacing: CGFloat?
     var markerColor: UIColor?
     var markerScale: CGFloat?
 
     init(dictionary: [String: Any]) {
         indent = EditorTheme.cgFloat(dictionary["indent"])
+        baseIndentMultiplier = EditorTheme.cgFloat(dictionary["baseIndentMultiplier"])
         itemSpacing = EditorTheme.cgFloat(dictionary["itemSpacing"])
         markerColor = EditorTheme.color(from: dictionary["markerColor"])
         markerScale = EditorTheme.cgFloat(dictionary["markerScale"])
@@ -194,6 +196,8 @@ struct EditorToolbarTheme {
     var borderColor: UIColor?
     var borderWidth: CGFloat?
     var borderRadius: CGFloat?
+    var marginTop: CGFloat?
+    var showTopBorder: Bool?
     var keyboardOffset: CGFloat?
     var horizontalInset: CGFloat?
     var separatorColor: UIColor?
@@ -209,6 +213,8 @@ struct EditorToolbarTheme {
         borderColor = EditorTheme.color(from: dictionary["borderColor"])
         borderWidth = EditorTheme.cgFloat(dictionary["borderWidth"])
         borderRadius = EditorTheme.cgFloat(dictionary["borderRadius"])
+        marginTop = EditorTheme.cgFloat(dictionary["marginTop"])
+        showTopBorder = dictionary["showTopBorder"] as? Bool
         keyboardOffset = EditorTheme.cgFloat(dictionary["keyboardOffset"])
         horizontalInset = EditorTheme.cgFloat(dictionary["horizontalInset"])
         separatorColor = EditorTheme.color(from: dictionary["separatorColor"])

package/ios/NativeEditorModule.swift

@@ -390,6 +390,10 @@ public class NativeEditorModule: Module {
             Prop("themeJson") { (view: NativeProseViewerExpoView, themeJson: String?) in
                 view.setThemeJson(themeJson)
             }
+            Prop("collapsesWhenEmpty") {
+                (view: NativeProseViewerExpoView, collapsesWhenEmpty: Bool?) in
+                view.setCollapsesWhenEmpty(collapsesWhenEmpty)
+            }
             Prop("enableLinkTaps") { (view: NativeProseViewerExpoView, enableLinkTaps: Bool?) in
                 view.setEnableLinkTaps(enableLinkTaps)
             }

package/ios/NativeProseViewerExpoView.swift

@@ -11,7 +11,8 @@ final class NativeProseViewerExpoView: ExpoView {
     private var lastThemeJSON: String?
     private var lastEmittedContentHeight: CGFloat = 0
     private var lastMeasuredWidth: CGFloat = 0
-    private var allowContentHeightShrink = true
+    private var collapsesWhenEmpty = true
+    private var isCollapsedEmptyContent = false
     private var enableLinkTaps = true
     private var interceptLinkTaps = false
 
@@ -51,17 +52,24 @@ final class NativeProseViewerExpoView: ExpoView {
         interceptLinkTaps = intercept ?? false
     }
 
+    func setCollapsesWhenEmpty(_ collapses: Bool?) {
+        let nextValue = collapses ?? true
+        guard collapsesWhenEmpty != nextValue else { return }
+        collapsesWhenEmpty = nextValue
+        updateCollapsedEmptyState()
+        setNeedsLayout()
+        emitContentHeightIfNeeded(force: true)
+    }
+
     func setRenderJson(_ renderJson: String?) {
         guard lastRenderJSON != renderJson else { return }
         lastRenderJSON = renderJson
-        allowContentHeightShrink = true
         applyRenderJSON()
     }
 
     func setThemeJson(_ themeJson: String?) {
         guard lastThemeJSON != themeJson else { return }
         lastThemeJSON = themeJson
-        allowContentHeightShrink = true
         let theme = EditorTheme.from(json: themeJson)
         textView.applyTheme(theme)
         let cornerRadius = theme?.borderRadius ?? 0
@@ -71,6 +79,9 @@ final class NativeProseViewerExpoView: ExpoView {
     }
 
     override var intrinsicContentSize: CGSize {
+        if isCollapsedEmptyContent {
+            return CGSize(width: UIView.noIntrinsicMetric, height: 0)
+        }
         guard lastEmittedContentHeight > 0 else {
             return CGSize(width: UIView.noIntrinsicMetric, height: UIView.noIntrinsicMetric)
         }
@@ -79,8 +90,13 @@ final class NativeProseViewerExpoView: ExpoView {
 
     override func layoutSubviews() {
         super.layoutSubviews()
-        textView.frame = bounds
-        textView.updateAutoGrowHostHeight(bounds.height)
+        if isCollapsedEmptyContent {
+            textView.frame = CGRect(x: 0, y: 0, width: bounds.width, height: 0)
+            textView.updateAutoGrowHostHeight(0)
+        } else {
+            textView.frame = bounds
+            textView.updateAutoGrowHostHeight(bounds.height)
+        }
 
         let currentWidth = ceil(bounds.width)
         guard abs(currentWidth - lastMeasuredWidth) > 0.5 else { return }
@@ -89,23 +105,34 @@ final class NativeProseViewerExpoView: ExpoView {
     }
 
     private func applyRenderJSON() {
+        updateCollapsedEmptyState()
         textView.applyRenderJSON(lastRenderJSON ?? "[]")
-        emitContentHeightIfNeeded(force: true)
+        textView.isHidden = isCollapsedEmptyContent
+        lastMeasuredWidth = 0
+        invalidateIntrinsicContentSize()
+        setNeedsLayout()
+    }
+
+    private func updateCollapsedEmptyState() {
+        isCollapsedEmptyContent = collapsesWhenEmpty
+            && Self.renderJsonContainsOnlyEmptyParagraphs(lastRenderJSON ?? "[]")
+        textView.isHidden = isCollapsedEmptyContent
     }
 
     private func emitContentHeightIfNeeded(
         measuredHeight: CGFloat? = nil,
         force: Bool = false
     ) {
-        let resolvedWidth = bounds.width > 0
-            ? bounds.width
-            : (superview?.bounds.width ?? UIScreen.main.bounds.width)
-        let fittedHeight = measuredHeight
-            ?? textView.measuredAutoGrowHeightForTesting(width: resolvedWidth)
-        let contentHeight = ceil(fittedHeight)
-        guard contentHeight > 0 else { return }
-        guard allowContentHeightShrink || contentHeight >= lastEmittedContentHeight else { return }
-        allowContentHeightShrink = false
+        let contentHeight: CGFloat
+        if isCollapsedEmptyContent {
+            contentHeight = 0
+        } else {
+            guard bounds.width > 0 else { return }
+            let fittedHeight = measuredHeight
+                ?? textView.measuredAutoGrowHeightForTesting(width: bounds.width)
+            contentHeight = ceil(fittedHeight)
+            guard contentHeight > 0 else { return }
+        }
         guard force || abs(contentHeight - lastEmittedContentHeight) > 0.5 else { return }
         lastEmittedContentHeight = contentHeight
         invalidateIntrinsicContentSize()
@@ -194,4 +221,56 @@ final class NativeProseViewerExpoView: ExpoView {
         guard let url = URL(string: href) else { return }
         UIApplication.shared.open(url, options: [:], completionHandler: nil)
     }
+
+    static func renderJsonContainsOnlyEmptyParagraphs(_ renderJson: String) -> Bool {
+        guard let data = renderJson.data(using: .utf8),
+              let elements = try? JSONSerialization.jsonObject(with: data) as? [[String: Any]]
+        else {
+            return false
+        }
+
+        if elements.isEmpty {
+            return true
+        }
+
+        var hasParagraph = false
+        var paragraphIsOpen = false
+
+        for element in elements {
+            guard let type = element["type"] as? String else {
+                return false
+            }
+
+            switch type {
+            case "blockStart":
+                guard !paragraphIsOpen,
+                      element["nodeType"] as? String == "paragraph",
+                      (element["depth"] as? NSNumber)?.intValue == 0
+                else {
+                    return false
+                }
+                paragraphIsOpen = true
+                hasParagraph = true
+
+            case "textRun":
+                guard paragraphIsOpen,
+                      let text = element["text"] as? String,
+                      text.allSatisfy({ $0 == "\u{200B}" })
+                else {
+                    return false
+                }
+
+            case "blockEnd":
+                guard paragraphIsOpen else {
+                    return false
+                }
+                paragraphIsOpen = false
+
+            default:
+                return false
+            }
+        }
+
+        return hasParagraph && !paragraphIsOpen
+    }
 }

package/ios/RenderBridge.swift

@@ -847,8 +847,13 @@ final class RenderBridge {
             (theme?.blockquote?.markerGap ?? LayoutConstants.blockquoteMarkerGap)
                 + (theme?.blockquote?.borderWidth ?? LayoutConstants.blockquoteBorderWidth)
         )
+        let listBaseIndentMultiplier = max(theme?.list?.baseIndentMultiplier ?? 1, 0)
+        let listBaseIndentAdjustment = context.listContext != nil
+            ? ((listBaseIndentMultiplier - 1) * indentPerDepth)
+            : 0
         let baseIndent = (CGFloat(context.depth) * indentPerDepth)
             - (quoteDepth * indentPerDepth)
+            + listBaseIndentAdjustment
             + (quoteDepth * quoteIndent)
 
         if context.listContext != nil {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apollohg/react-native-prose-editor",
-    "version": "0.5.3",
+    "version": "0.5.5",
     "description": "Native rich text editor with Rust core for React Native",
     "license": "Apache-2.0",
     "homepage": "https://github.com/apollohg/react-native-prose-editor",