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

package/dist/NativeRichTextEditor.js

@@ -62,6 +62,291 @@ function isPromiseLike(value) {
         'then' in value &&
         typeof value.then === 'function');
 }
+function isRecord(value) {
+    return value != null && typeof value === 'object' && !Array.isArray(value);
+}
+const AUTO_LINK_URL_REGEX = /(?:https?:\/\/|www\.)\S+/giu;
+const AUTO_LINK_INLINE_PLACEHOLDER = '\uFFFC';
+const AUTO_LINK_LEADING_BOUNDARY_CHARS = new Set(['(', '[', '{', '<', '"', "'"]);
+const AUTO_LINK_TRAILING_DELIMITER_CHARS = new Set([
+    '.',
+    ',',
+    '!',
+    '?',
+    ';',
+    ':',
+    ')',
+    ']',
+    '}',
+    '>',
+    '"',
+    "'",
+]);
+const AUTO_LINK_ALWAYS_TRIM_CHARS = new Set(['.', ',', '!', '?', ';', ':']);
+const AUTO_LINK_MATCHED_CLOSERS = {
+    ')': '(',
+    ']': '[',
+    '}': '{',
+};
+function unicodeScalars(text) {
+    return Array.from(text);
+}
+function unicodeScalarCount(text) {
+    return unicodeScalars(text).length;
+}
+function hasDocumentLinkMark(marks) {
+    if (!Array.isArray(marks)) {
+        return false;
+    }
+    return marks.some((mark) => isRecord(mark) && typeof mark.type === 'string' && mark.type === 'link');
+}
+function isInlineDocumentNode(node) {
+    if (!isRecord(node)) {
+        return false;
+    }
+    if (node.type === 'text') {
+        return true;
+    }
+    return !Array.isArray(node.content);
+}
+function isInlineTextBlockNode(node) {
+    const content = Array.isArray(node.content) ? node.content : [];
+    return content.length > 0 && content.every((child) => isInlineDocumentNode(child));
+}
+function countOccurrences(text, target) {
+    let count = 0;
+    for (const char of text) {
+        if (char === target) {
+            count += 1;
+        }
+    }
+    return count;
+}
+function trimAutoLinkTrailingPunctuation(value) {
+    let result = value;
+    while (result.length > 0) {
+        const chars = unicodeScalars(result);
+        const lastChar = chars[chars.length - 1];
+        if (!lastChar) {
+            break;
+        }
+        if (AUTO_LINK_ALWAYS_TRIM_CHARS.has(lastChar)) {
+            chars.pop();
+            result = chars.join('');
+            continue;
+        }
+        const matchingOpener = AUTO_LINK_MATCHED_CLOSERS[lastChar];
+        if (matchingOpener &&
+            countOccurrences(result, lastChar) > countOccurrences(result, matchingOpener)) {
+            chars.pop();
+            result = chars.join('');
+            continue;
+        }
+        if ((lastChar === '"' || lastChar === "'") && countOccurrences(result, lastChar) % 2 !== 0) {
+            chars.pop();
+            result = chars.join('');
+            continue;
+        }
+        break;
+    }
+    return result;
+}
+function normalizeAutoDetectedHref(value) {
+    const trimmed = trimAutoLinkTrailingPunctuation(value);
+    if (!trimmed) {
+        return null;
+    }
+    const normalized = /^www\./iu.test(trimmed) ? `https://${trimmed}` : trimmed;
+    try {
+        new URL(normalized);
+        return normalized;
+    }
+    catch {
+        return null;
+    }
+}
+function isAutoLinkBoundaryChar(char) {
+    if (!char) {
+        return true;
+    }
+    return /\s/u.test(char) || char === AUTO_LINK_INLINE_PLACEHOLDER || AUTO_LINK_LEADING_BOUNDARY_CHARS.has(char);
+}
+function isAutoLinkTrailingDelimiterChar(char) {
+    if (!char) {
+        return true;
+    }
+    return (/\s/u.test(char) ||
+        char === AUTO_LINK_INLINE_PLACEHOLDER ||
+        AUTO_LINK_TRAILING_DELIMITER_CHARS.has(char));
+}
+function codeUnitBoundariesForScalars(chars) {
+    const boundaries = [0];
+    let offset = 0;
+    for (const char of chars) {
+        offset += char.length;
+        boundaries.push(offset);
+    }
+    return boundaries;
+}
+function codeUnitOffsetToScalarIndex(boundaries, offset) {
+    let scalarIndex = 0;
+    while (scalarIndex + 1 < boundaries.length && boundaries[scalarIndex + 1] <= offset) {
+        scalarIndex += 1;
+    }
+    return scalarIndex;
+}
+function buildAutoLinkInlineBlock(node, pos) {
+    const chars = [];
+    const docPositions = [];
+    const linked = [];
+    const content = Array.isArray(node.content) ? node.content : [];
+    let nextPos = pos + 1;
+    for (const child of content) {
+        if (!isRecord(child)) {
+            continue;
+        }
+        if (child.type === 'text') {
+            const childText = typeof child.text === 'string' ? child.text : '';
+            const childChars = unicodeScalars(childText);
+            const hasLink = hasDocumentLinkMark(child.marks);
+            for (const char of childChars) {
+                chars.push(char);
+                docPositions.push(nextPos);
+                linked.push(hasLink);
+                nextPos += 1;
+            }
+            continue;
+        }
+        chars.push(child.type === 'hardBreak' ? '\n' : AUTO_LINK_INLINE_PLACEHOLDER);
+        docPositions.push(nextPos);
+        linked.push(false);
+        nextPos += 1;
+    }
+    return {
+        chars,
+        docPositions,
+        linked,
+        contentStart: pos + 1,
+        contentEnd: nextPos,
+        nextPos: nextPos + 1,
+    };
+}
+function findAutoLinkCandidateInInlineBlock(block, cursorDocPos) {
+    if (cursorDocPos < block.contentStart || cursorDocPos > block.contentEnd) {
+        return null;
+    }
+    let localIndex = 0;
+    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])) {
+        return null;
+    }
+    const prefixChars = block.chars.slice(0, localIndex);
+    const prefixText = prefixChars.join('');
+    if (!prefixText) {
+        return null;
+    }
+    const boundaries = codeUnitBoundariesForScalars(prefixChars);
+    AUTO_LINK_URL_REGEX.lastIndex = 0;
+    let lastMatch = null;
+    for (const match of prefixText.matchAll(AUTO_LINK_URL_REGEX)) {
+        lastMatch = match;
+    }
+    if (!lastMatch || typeof lastMatch.index !== 'number') {
+        return null;
+    }
+    const rawStartScalar = codeUnitOffsetToScalarIndex(boundaries, lastMatch.index);
+    const normalizedHref = normalizeAutoDetectedHref(lastMatch[0]);
+    const trimmedText = trimAutoLinkTrailingPunctuation(lastMatch[0]);
+    if (!normalizedHref || !trimmedText) {
+        return null;
+    }
+    const candidateEndScalar = rawStartScalar + unicodeScalarCount(trimmedText);
+    if (candidateEndScalar > prefixChars.length) {
+        return null;
+    }
+    if (!isAutoLinkBoundaryChar(prefixChars[rawStartScalar - 1])) {
+        return null;
+    }
+    for (let index = candidateEndScalar; index < localIndex; index += 1) {
+        if (!isAutoLinkTrailingDelimiterChar(prefixChars[index])) {
+            return null;
+        }
+    }
+    for (let index = rawStartScalar; index < candidateEndScalar; index += 1) {
+        if (block.linked[index]) {
+            return null;
+        }
+    }
+    const docFrom = block.docPositions[rawStartScalar];
+    const docTo = candidateEndScalar < block.docPositions.length
+        ? block.docPositions[candidateEndScalar]
+        : block.contentEnd;
+    if (!(docTo > docFrom)) {
+        return null;
+    }
+    return {
+        docFrom,
+        docTo,
+        href: normalizedHref,
+    };
+}
+function findAutoLinkCandidateInDocument(document, cursorDocPos) {
+    const visit = (node, pos, isRoot = false) => {
+        if (!isRecord(node)) {
+            return { candidate: null, nextPos: pos };
+        }
+        const nodeType = typeof node.type === 'string' ? node.type : '';
+        const content = Array.isArray(node.content) ? node.content : [];
+        if (nodeType === 'text') {
+            const text = typeof node.text === 'string' ? node.text : '';
+            return { candidate: null, nextPos: pos + unicodeScalarCount(text) };
+        }
+        if (isRoot && nodeType === 'doc') {
+            let nextPos = pos;
+            for (const child of content) {
+                const result = visit(child, nextPos);
+                if (result.candidate) {
+                    return result;
+                }
+                nextPos = result.nextPos;
+            }
+            return { candidate: null, nextPos };
+        }
+        if (isInlineTextBlockNode(node)) {
+            const block = buildAutoLinkInlineBlock(node, pos);
+            return {
+                candidate: findAutoLinkCandidateInInlineBlock(block, cursorDocPos),
+                nextPos: block.nextPos,
+            };
+        }
+        if (content.length === 0) {
+            return { candidate: null, nextPos: pos + 1 };
+        }
+        let nextPos = pos + 1;
+        for (const child of content) {
+            const result = visit(child, nextPos);
+            if (result.candidate) {
+                return result;
+            }
+            nextPos = result.nextPos;
+        }
+        return { candidate: null, nextPos: nextPos + 1 };
+    };
+    return visit(document, 0, true).candidate;
+}
+function didContentChange(previousDocumentVersion, update) {
+    if (!update) {
+        return false;
+    }
+    return (previousDocumentVersion == null ||
+        typeof update.documentVersion !== 'number' ||
+        update.documentVersion !== previousDocumentVersion);
+}
 function computeRenderedTextLength(elements) {
     let len = 0;
     let blockCount = 0;
@@ -134,7 +419,7 @@ function useSerializedValue(value, serialize, revision) {
     };
     return serialized;
 }
-exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEditor({ initialContent, initialJSON, value, valueJSON, valueJSONRevision, schema, placeholder, editable = true, maxLength, autoFocus = false, heightBehavior = 'autoGrow', showToolbar = true, toolbarPlacement = 'keyboard', toolbarItems = EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS, onToolbarAction, onRequestLink, onRequestImage, onContentChange, onContentChangeJSON, onSelectionChange, onActiveStateChange, onHistoryStateChange, onFocus, onBlur, style, containerStyle, theme, addons, remoteSelections, allowBase64Images = false, allowImageResizing = true, }, ref) {
+exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEditor({ initialContent, initialJSON, value, valueJSON, valueJSONRevision, schema, placeholder, editable = true, maxLength, autoFocus = false, heightBehavior = 'autoGrow', showToolbar = true, toolbarPlacement = 'keyboard', toolbarItems = EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS, onToolbarAction, onRequestLink, onRequestImage, autoDetectLinks = false, onContentChange, onContentChangeJSON, onSelectionChange, onActiveStateChange, onHistoryStateChange, onFocus, onBlur, style, containerStyle, theme, addons, remoteSelections, allowBase64Images = false, allowImageResizing = true, }, ref) {
     const bridgeRef = (0, react_1.useRef)(null);
     const nativeViewRef = (0, react_1.useRef)(null);
     const [isReady, setIsReady] = (0, react_1.useState)(false);
@@ -241,6 +526,74 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             onContentChangeJSONRef.current?.(bridgeRef.current.getJson());
         }
     }, []);
+    const applyUpdateToNativeView = (0, react_1.useCallback)((update, previousDocumentVersion, skipNativeApplyIfContentUnchanged = false) => {
+        const contentChanged = didContentChange(previousDocumentVersion, update);
+        if (!skipNativeApplyIfContentUnchanged || contentChanged) {
+            const updateJson = JSON.stringify(update);
+            if (react_native_1.Platform.OS === 'android') {
+                setPendingNativeUpdate((current) => ({
+                    json: updateJson,
+                    revision: current.revision + 1,
+                }));
+            }
+            else {
+                try {
+                    const applyResult = nativeViewRef.current?.applyEditorUpdate(updateJson);
+                    if (isPromiseLike(applyResult)) {
+                        void applyResult.catch(() => {
+                            // The native view may already be torn down during navigation.
+                        });
+                    }
+                }
+                catch {
+                    // The native view may already be torn down during navigation.
+                }
+            }
+        }
+        return contentChanged;
+    }, []);
+    const maybeApplyAutoDetectedLink = (0, react_1.useCallback)((update, previousDocumentVersion) => {
+        if (!autoDetectLinks ||
+            !update ||
+            !didContentChange(previousDocumentVersion, update) ||
+            !bridgeRef.current ||
+            bridgeRef.current.isDestroyed ||
+            !update.activeState.allowedMarks.includes('link') ||
+            update.selection.type !== 'text' ||
+            update.selection.anchor == null ||
+            update.selection.head == null ||
+            update.selection.anchor !== update.selection.head) {
+            return update;
+        }
+        const cursorDocPos = update.selection.head;
+        const candidate = findAutoLinkCandidateInDocument(bridgeRef.current.getJson(), cursorDocPos);
+        if (!candidate) {
+            return update;
+        }
+        const scalarFrom = bridgeRef.current.docToScalar(candidate.docFrom);
+        const scalarTo = bridgeRef.current.docToScalar(candidate.docTo);
+        if (!(scalarTo > scalarFrom)) {
+            return update;
+        }
+        const autoLinkUpdate = bridgeRef.current.setMarkAtSelectionScalar(scalarFrom, scalarTo, 'link', { href: candidate.href });
+        if (!autoLinkUpdate) {
+            return update;
+        }
+        bridgeRef.current.setSelection(update.selection.anchor, update.selection.head);
+        const selectionState = bridgeRef.current.getSelectionState();
+        if (selectionState) {
+            autoLinkUpdate.selection = selectionState.selection;
+            autoLinkUpdate.activeState = selectionState.activeState;
+            autoLinkUpdate.historyState = selectionState.historyState;
+            if (typeof selectionState.documentVersion === 'number') {
+                autoLinkUpdate.documentVersion = selectionState.documentVersion;
+            }
+        }
+        else {
+            autoLinkUpdate.selection = update.selection;
+        }
+        return autoLinkUpdate;
+    }, [autoDetectLinks]);
     // Warn if both value and valueJSON are set
     if (__DEV__ && value != null && valueJSON != null) {
         console.warn('NativeRichTextEditor: value and valueJSON are mutually exclusive. ' +
@@ -249,9 +602,15 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     const runAndApply = (0, react_1.useCallback)((mutate, options) => {
         const previousDocumentVersion = documentVersionRef.current;
         const preservedSelection = options?.preserveLiveTextSelection === true ? selectionRef.current : null;
-        const update = mutate();
+        let update = mutate();
         if (!update)
             return null;
+        if (!options?.skipAutoDetectLinks) {
+            update = maybeApplyAutoDetectedLink(update, previousDocumentVersion);
+            if (!update) {
+                return null;
+            }
+        }
         if (preservedSelection?.type === 'text' &&
             typeof preservedSelection.anchor === 'number' &&
             typeof preservedSelection.head === 'number' &&
@@ -264,31 +623,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 head: preservedSelection.head,
             };
         }
-        const contentChanged = previousDocumentVersion == null ||
-            typeof update.documentVersion !== 'number' ||
-            update.documentVersion !== previousDocumentVersion;
-        if (!options?.skipNativeApplyIfContentUnchanged || contentChanged) {
-            const updateJson = JSON.stringify(update);
-            if (react_native_1.Platform.OS === 'android') {
-                setPendingNativeUpdate((current) => ({
-                    json: updateJson,
-                    revision: current.revision + 1,
-                }));
-            }
-            else {
-                try {
-                    const applyResult = nativeViewRef.current?.applyEditorUpdate(updateJson);
-                    if (isPromiseLike(applyResult)) {
-                        void applyResult.catch(() => {
-                            // The native view may already be torn down during navigation.
-                        });
-                    }
-                }
-                catch {
-                    // The native view may already be torn down during navigation.
-                }
-            }
-        }
+        applyUpdateToNativeView(update, previousDocumentVersion, options?.skipNativeApplyIfContentUnchanged);
         syncStateFromUpdate(update);
         onActiveStateChangeRef.current?.(update.activeState);
         onHistoryStateChangeRef.current?.(update.historyState);
@@ -297,7 +632,12 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         }
         onSelectionChangeRef.current?.(update.selection);
         return update;
-    }, [emitContentCallbacksForUpdate, syncStateFromUpdate]);
+    }, [
+        applyUpdateToNativeView,
+        emitContentCallbacksForUpdate,
+        maybeApplyAutoDetectedLink,
+        syncStateFromUpdate,
+    ]);
     (0, react_1.useEffect)(() => {
         const bridgeConfig = maxLength != null || serializedSchemaJson || allowBase64Images
             ? {
@@ -349,6 +689,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         runAndApply(() => bridgeRef.current.replaceHtml(value), {
             suppressContentCallbacks: true,
             preserveLiveTextSelection: true,
+            skipAutoDetectLinks: true,
         });
     }, [value, runAndApply]);
     (0, react_1.useEffect)(() => {
@@ -362,6 +703,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         runAndApply(() => bridgeRef.current.replaceJsonString(serializedValueJson), {
             suppressContentCallbacks: true,
             preserveLiveTextSelection: true,
+            skipAutoDetectLinks: true,
         });
     }, [serializedValueJson, value, runAndApply]);
     const updateToolbarFrame = (0, react_1.useCallback)(() => {
@@ -399,9 +741,15 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             return;
         try {
             const previousDocumentVersion = documentVersionRef.current;
-            const update = bridgeRef.current.parseUpdateJson(event.nativeEvent.updateJson);
+            const nativeUpdate = bridgeRef.current.parseUpdateJson(event.nativeEvent.updateJson);
+            if (!nativeUpdate)
+                return;
+            const update = maybeApplyAutoDetectedLink(nativeUpdate, previousDocumentVersion);
             if (!update)
                 return;
+            if (update !== nativeUpdate) {
+                applyUpdateToNativeView(update, previousDocumentVersion);
+            }
             syncStateFromUpdate(update);
             onActiveStateChangeRef.current?.(update.activeState);
             onHistoryStateChangeRef.current?.(update.historyState);
@@ -411,7 +759,12 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         catch {
             // Invalid JSON from native — skip
         }
-    }, [emitContentCallbacksForUpdate, syncStateFromUpdate]);
+    }, [
+        applyUpdateToNativeView,
+        emitContentCallbacksForUpdate,
+        maybeApplyAutoDetectedLink,
+        syncStateFromUpdate,
+    ]);
     const handleSelectionChange = (0, react_1.useCallback)((event) => {
         if (!bridgeRef.current || bridgeRef.current.isDestroyed)
             return;
@@ -563,6 +916,39 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             });
             return;
         }
+        if (parsed.type === 'mentionsSelectRequest') {
+            const suggestion = mentionSuggestionsByKeyRef.current.get(parsed.suggestionKey);
+            if (!suggestion || !bridgeRef.current || bridgeRef.current.isDestroyed)
+                return;
+            const selectionEvent = {
+                trigger: parsed.trigger,
+                suggestion,
+                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 update = runAndApply(() => bridgeRef.current?.insertContentJsonAtSelectionScalar(parsed.range.anchor, parsed.range.head, (0, addons_1.buildMentionFragmentJson)(finalAttrs)) ?? null);
+            if (update) {
+                addonsRef.current?.mentions?.onSelect?.({
+                    trigger: parsed.trigger,
+                    suggestion,
+                    attrs: finalAttrs,
+                });
+            }
+            return;
+        }
         if (parsed.type === 'mentionsSelect') {
             const suggestion = mentionSuggestionsByKeyRef.current.get(parsed.suggestionKey);
             if (!suggestion)
@@ -573,7 +959,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 attrs: parsed.attrs,
             });
         }
-    }, []);
+    }, [runAndApply]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         focus() {
             nativeViewRef.current?.focus?.();

package/dist/addons.d.ts

@@ -22,10 +22,20 @@ export interface MentionSelectEvent {
     suggestion: MentionSuggestion;
     attrs: Record<string, unknown>;
 }
+export interface MentionSelectionAttrsEvent {
+    trigger: string;
+    suggestion: MentionSuggestion;
+    attrs: Record<string, unknown>;
+    range: {
+        anchor: number;
+        head: number;
+    };
+}
 export interface MentionsAddonConfig {
     trigger?: string;
     suggestions?: readonly MentionSuggestion[];
     theme?: EditorMentionTheme;
+    resolveSelectionAttrs?: (event: MentionSelectionAttrsEvent) => Record<string, unknown> | null | undefined;
     onQueryChange?: (event: MentionQueryChangeEvent) => void;
     onSelect?: (event: MentionSelectEvent) => void;
 }
@@ -42,6 +52,7 @@ export interface SerializedMentionSuggestion {
 export interface SerializedMentionsAddonConfig {
     trigger: string;
     theme?: EditorMentionTheme;
+    resolveSelectionAttrs?: boolean;
     suggestions: SerializedMentionSuggestion[];
 }
 export interface SerializedEditorAddons {
@@ -56,6 +67,15 @@ export type EditorAddonEvent = {
         head: number;
     };
     isActive: boolean;
+} | {
+    type: 'mentionsSelectRequest';
+    trigger: string;
+    suggestionKey: string;
+    attrs: Record<string, unknown>;
+    range: {
+        anchor: number;
+        head: number;
+    };
 } | {
     type: 'mentionsSelect';
     trigger: string;

package/dist/addons.js

@@ -39,6 +39,7 @@ function normalizeEditorAddons(addons) {
         const label = suggestion.label?.trim() || `${trigger}${suggestion.title}`;
         const attrs = {
             label,
+            mentionSuggestionChar: trigger,
             ...(suggestion.attrs ?? {}),
         };
         return {
@@ -53,6 +54,9 @@ function normalizeEditorAddons(addons) {
         mentions: {
             trigger,
             theme: addons.mentions.theme,
+            ...(typeof addons.mentions.resolveSelectionAttrs === 'function'
+                ? { resolveSelectionAttrs: true }
+                : {}),
             suggestions,
         },
     };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 export { NativeRichTextEditor, type NativeRichTextEditorProps, type NativeRichTextEditorRef, type NativeRichTextEditorHeightBehavior, type NativeRichTextEditorToolbarPlacement, type RemoteSelectionDecoration, type LinkRequestContext, type ImageRequestContext, } from './NativeRichTextEditor';
-export { NativeProseViewer, type NativeProseViewerProps, type NativeProseViewerMentionPressEvent, } from './NativeProseViewer';
+export { NativeProseViewer, type NativeProseViewerProps, type NativeProseViewerLinkPressEvent, type NativeProseViewerMentionRenderContext, type NativeProseViewerMentionPressEvent, } from './NativeProseViewer';
 export { EditorToolbar, DEFAULT_EDITOR_TOOLBAR_ITEMS, type EditorToolbarProps, type EditorToolbarItem, type EditorToolbarLeafItem, type EditorToolbarGroupChildItem, type EditorToolbarGroupItem, type EditorToolbarGroupPresentation, type EditorToolbarIcon, type EditorToolbarDefaultIconId, type EditorToolbarSFSymbolIcon, type EditorToolbarMaterialIcon, type EditorToolbarCommand, type EditorToolbarHeadingLevel, type EditorToolbarListType, } from './EditorToolbar';
 export type { EditorContentInsets, EditorTheme, EditorTextStyle, EditorHeadingTheme, EditorListTheme, EditorHorizontalRuleTheme, EditorMentionTheme, EditorToolbarTheme, EditorToolbarAppearance, EditorFontStyle, EditorFontWeight, } from './EditorTheme';
-export { MENTION_NODE_NAME, mentionNodeSpec, withMentionsSchema, buildMentionFragmentJson, type EditorAddons, type MentionsAddonConfig, type MentionSuggestion, type MentionQueryChangeEvent, type MentionSelectEvent, type EditorAddonEvent, } from './addons';
+export { MENTION_NODE_NAME, mentionNodeSpec, withMentionsSchema, buildMentionFragmentJson, type EditorAddons, type MentionsAddonConfig, type MentionSuggestion, type MentionQueryChangeEvent, type MentionSelectionAttrsEvent, type MentionSelectEvent, type EditorAddonEvent, } from './addons';
 export { tiptapSchema, prosemirrorSchema, IMAGE_NODE_NAME, imageNodeSpec, withImagesSchema, buildImageFragmentJson, type SchemaDefinition, type NodeSpec, type MarkSpec, type AttrSpec, type ImageNodeAttributes, } from './schemas';
 export { createYjsCollaborationController, useYjsCollaboration, type YjsCollaborationOptions, type YjsCollaborationState, type YjsTransportStatus, type LocalAwarenessState, type LocalAwarenessUser, type UseYjsCollaborationResult, type YjsCollaborationController, } from './YjsCollaboration';
 export type { Selection, ActiveState, HistoryState, EditorUpdate, DocumentJSON, CollaborationPeer, EncodedCollaborationStateInput, } from './NativeEditorBridge';

package/ios/EditorAddons.swift

@@ -27,11 +27,13 @@ struct NativeMentionsAddonConfig {
     let trigger: String
     let suggestions: [NativeMentionSuggestion]
     let theme: EditorMentionTheme?
+    let resolveSelectionAttrs: Bool
 
     init?(dictionary: [String: Any]) {
         let trigger = (dictionary["trigger"] as? String)?.trimmingCharacters(in: .whitespacesAndNewlines)
         self.trigger = (trigger?.isEmpty == false ? trigger : "@") ?? "@"
         self.suggestions = ((dictionary["suggestions"] as? [[String: Any]]) ?? []).compactMap(NativeMentionSuggestion.init(dictionary:))
+        self.resolveSelectionAttrs = dictionary["resolveSelectionAttrs"] as? Bool ?? false
         if let theme = dictionary["theme"] as? [String: Any] {
             self.theme = EditorMentionTheme(dictionary: theme)
         } else {

package/ios/EditorLayoutManager.swift

@@ -140,7 +140,7 @@ final class EditorLayoutManager: NSLayoutManager {
         let lineFragmentRect = self.lineFragmentRect(forGlyphAt: glyphIndex, effectiveRange: nil)
         let attrs = textStorage.attributes(at: paragraphStart, effectiveRange: nil)
 
-        let baseFont = attrs[.font] as? UIFont ?? .systemFont(ofSize: 16)
+        let baseFont = Self.markerBaseFont(from: attrs)
         let textColor = attrs[RenderBridgeAttributes.listMarkerColor] as? UIColor
             ?? attrs[.foregroundColor] as? UIColor
             ?? .label
@@ -465,6 +465,15 @@ final class EditorLayoutManager: NSLayoutManager {
         return baseFont.withSize(baseFont.pointSize * markerScale)
     }
 
+    static func markerBaseFont(
+        from attrs: [NSAttributedString.Key: Any],
+        fallback fallbackFont: UIFont = .systemFont(ofSize: 16)
+    ) -> UIFont {
+        (attrs[RenderBridgeAttributes.listMarkerBaseFont] as? UIFont)
+            ?? (attrs[.font] as? UIFont)
+            ?? fallbackFont
+    }
+
     private static func unorderedBulletGlyphBounds(for font: UIFont) -> CGRect {
         let ctFont = font as CTFont
         let bullet = UniChar(0x2022)

package/ios/EditorTheme.swift

@@ -139,6 +139,31 @@ struct EditorMentionTheme {
     var optionHighlightedBackgroundColor: UIColor?
     var optionHighlightedTextColor: UIColor?
 
+    func merged(with override: EditorMentionTheme?) -> EditorMentionTheme {
+        guard let override else { return self }
+        var merged = self
+        merged.textColor = override.textColor ?? merged.textColor
+        merged.backgroundColor = override.backgroundColor ?? merged.backgroundColor
+        merged.borderColor = override.borderColor ?? merged.borderColor
+        merged.borderWidth = override.borderWidth ?? merged.borderWidth
+        merged.borderRadius = override.borderRadius ?? merged.borderRadius
+        merged.fontWeight = override.fontWeight ?? merged.fontWeight
+        merged.popoverBackgroundColor =
+            override.popoverBackgroundColor ?? merged.popoverBackgroundColor
+        merged.popoverBorderColor = override.popoverBorderColor ?? merged.popoverBorderColor
+        merged.popoverBorderWidth = override.popoverBorderWidth ?? merged.popoverBorderWidth
+        merged.popoverBorderRadius = override.popoverBorderRadius ?? merged.popoverBorderRadius
+        merged.popoverShadowColor = override.popoverShadowColor ?? merged.popoverShadowColor
+        merged.optionTextColor = override.optionTextColor ?? merged.optionTextColor
+        merged.optionSecondaryTextColor =
+            override.optionSecondaryTextColor ?? merged.optionSecondaryTextColor
+        merged.optionHighlightedBackgroundColor =
+            override.optionHighlightedBackgroundColor ?? merged.optionHighlightedBackgroundColor
+        merged.optionHighlightedTextColor =
+            override.optionHighlightedTextColor ?? merged.optionHighlightedTextColor
+        return merged
+    }
+
     init(dictionary: [String: Any]) {
         textColor = EditorTheme.color(from: dictionary["textColor"])
         backgroundColor = EditorTheme.color(from: dictionary["backgroundColor"])