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

package/dist/addons.d.ts

@@ -0,0 +1,70 @@
+import type { EditorMentionTheme } from './EditorTheme';
+import type { DocumentJSON } from './NativeEditorBridge';
+import type { SchemaDefinition, NodeSpec } from './schemas';
+export interface MentionSuggestion {
+    key: string;
+    title: string;
+    subtitle?: string;
+    label?: string;
+    attrs?: Record<string, unknown>;
+}
+export interface MentionQueryChangeEvent {
+    query: string;
+    trigger: string;
+    range: {
+        anchor: number;
+        head: number;
+    };
+    isActive: boolean;
+}
+export interface MentionSelectEvent {
+    trigger: string;
+    suggestion: MentionSuggestion;
+    attrs: Record<string, unknown>;
+}
+export interface MentionsAddonConfig {
+    trigger?: string;
+    suggestions?: readonly MentionSuggestion[];
+    theme?: EditorMentionTheme;
+    onQueryChange?: (event: MentionQueryChangeEvent) => void;
+    onSelect?: (event: MentionSelectEvent) => void;
+}
+export interface EditorAddons {
+    mentions?: MentionsAddonConfig;
+}
+export interface SerializedMentionSuggestion {
+    key: string;
+    title: string;
+    subtitle?: string;
+    label: string;
+    attrs: Record<string, unknown>;
+}
+export interface SerializedMentionsAddonConfig {
+    trigger: string;
+    theme?: EditorMentionTheme;
+    suggestions: SerializedMentionSuggestion[];
+}
+export interface SerializedEditorAddons {
+    mentions?: SerializedMentionsAddonConfig;
+}
+export type EditorAddonEvent = {
+    type: 'mentionsQueryChange';
+    query: string;
+    trigger: string;
+    range: {
+        anchor: number;
+        head: number;
+    };
+    isActive: boolean;
+} | {
+    type: 'mentionsSelect';
+    trigger: string;
+    suggestionKey: string;
+    attrs: Record<string, unknown>;
+};
+export declare const MENTION_NODE_NAME = "mention";
+export declare function mentionNodeSpec(): NodeSpec;
+export declare function withMentionsSchema(schema: SchemaDefinition): SchemaDefinition;
+export declare function normalizeEditorAddons(addons?: EditorAddons): SerializedEditorAddons | undefined;
+export declare function serializeEditorAddons(addons?: EditorAddons): string | undefined;
+export declare function buildMentionFragmentJson(attrs: Record<string, unknown>): DocumentJSON;

package/dist/addons.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENTION_NODE_NAME = void 0;
+exports.mentionNodeSpec = mentionNodeSpec;
+exports.withMentionsSchema = withMentionsSchema;
+exports.normalizeEditorAddons = normalizeEditorAddons;
+exports.serializeEditorAddons = serializeEditorAddons;
+exports.buildMentionFragmentJson = buildMentionFragmentJson;
+exports.MENTION_NODE_NAME = 'mention';
+const DEFAULT_MENTION_TRIGGER = '@';
+function mentionNodeSpec() {
+    return {
+        name: exports.MENTION_NODE_NAME,
+        content: '',
+        group: 'inline',
+        role: 'inline',
+        isVoid: true,
+        attrs: {
+            label: { default: null },
+        },
+    };
+}
+function withMentionsSchema(schema) {
+    const hasMentionNode = schema.nodes.some((node) => node.name === exports.MENTION_NODE_NAME);
+    if (hasMentionNode) {
+        return schema;
+    }
+    return {
+        ...schema,
+        nodes: [...schema.nodes, mentionNodeSpec()],
+    };
+}
+function normalizeEditorAddons(addons) {
+    if (!addons?.mentions) {
+        return undefined;
+    }
+    const trigger = addons.mentions.trigger?.trim() || DEFAULT_MENTION_TRIGGER;
+    const suggestions = (addons.mentions.suggestions ?? []).map((suggestion) => {
+        const label = suggestion.label?.trim() || `${trigger}${suggestion.title}`;
+        const attrs = {
+            label,
+            ...(suggestion.attrs ?? {}),
+        };
+        return {
+            key: suggestion.key,
+            title: suggestion.title,
+            subtitle: suggestion.subtitle,
+            label,
+            attrs,
+        };
+    });
+    return {
+        mentions: {
+            trigger,
+            theme: addons.mentions.theme,
+            suggestions,
+        },
+    };
+}
+function serializeEditorAddons(addons) {
+    const normalized = normalizeEditorAddons(addons);
+    if (!normalized?.mentions) {
+        return undefined;
+    }
+    return JSON.stringify(normalized);
+}
+function buildMentionFragmentJson(attrs) {
+    return {
+        type: 'doc',
+        content: [
+            {
+                type: exports.MENTION_NODE_NAME,
+                attrs,
+            },
+        ],
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { NativeRichTextEditor, type NativeRichTextEditorProps, type NativeRichTextEditorRef, type NativeRichTextEditorHeightBehavior, type NativeRichTextEditorToolbarPlacement, type RemoteSelectionDecoration, type LinkRequestContext, type ImageRequestContext, } from './NativeRichTextEditor';
+export { EditorToolbar, DEFAULT_EDITOR_TOOLBAR_ITEMS, type EditorToolbarProps, type EditorToolbarItem, type EditorToolbarIcon, type EditorToolbarDefaultIconId, type EditorToolbarSFSymbolIcon, type EditorToolbarMaterialIcon, type EditorToolbarCommand, 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 { 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';
+export { encodeCollaborationStateBase64, decodeCollaborationStateBase64, } from './NativeEditorBridge';

package/dist/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decodeCollaborationStateBase64 = exports.encodeCollaborationStateBase64 = exports.useYjsCollaboration = exports.createYjsCollaborationController = exports.buildImageFragmentJson = exports.withImagesSchema = exports.imageNodeSpec = exports.IMAGE_NODE_NAME = exports.prosemirrorSchema = exports.tiptapSchema = exports.buildMentionFragmentJson = exports.withMentionsSchema = exports.mentionNodeSpec = exports.MENTION_NODE_NAME = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS = exports.EditorToolbar = exports.NativeRichTextEditor = void 0;
+var NativeRichTextEditor_1 = require("./NativeRichTextEditor");
+Object.defineProperty(exports, "NativeRichTextEditor", { enumerable: true, get: function () { return NativeRichTextEditor_1.NativeRichTextEditor; } });
+var EditorToolbar_1 = require("./EditorToolbar");
+Object.defineProperty(exports, "EditorToolbar", { enumerable: true, get: function () { return EditorToolbar_1.EditorToolbar; } });
+Object.defineProperty(exports, "DEFAULT_EDITOR_TOOLBAR_ITEMS", { enumerable: true, get: function () { return EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS; } });
+var addons_1 = require("./addons");
+Object.defineProperty(exports, "MENTION_NODE_NAME", { enumerable: true, get: function () { return addons_1.MENTION_NODE_NAME; } });
+Object.defineProperty(exports, "mentionNodeSpec", { enumerable: true, get: function () { return addons_1.mentionNodeSpec; } });
+Object.defineProperty(exports, "withMentionsSchema", { enumerable: true, get: function () { return addons_1.withMentionsSchema; } });
+Object.defineProperty(exports, "buildMentionFragmentJson", { enumerable: true, get: function () { return addons_1.buildMentionFragmentJson; } });
+var schemas_1 = require("./schemas");
+Object.defineProperty(exports, "tiptapSchema", { enumerable: true, get: function () { return schemas_1.tiptapSchema; } });
+Object.defineProperty(exports, "prosemirrorSchema", { enumerable: true, get: function () { return schemas_1.prosemirrorSchema; } });
+Object.defineProperty(exports, "IMAGE_NODE_NAME", { enumerable: true, get: function () { return schemas_1.IMAGE_NODE_NAME; } });
+Object.defineProperty(exports, "imageNodeSpec", { enumerable: true, get: function () { return schemas_1.imageNodeSpec; } });
+Object.defineProperty(exports, "withImagesSchema", { enumerable: true, get: function () { return schemas_1.withImagesSchema; } });
+Object.defineProperty(exports, "buildImageFragmentJson", { enumerable: true, get: function () { return schemas_1.buildImageFragmentJson; } });
+var YjsCollaboration_1 = require("./YjsCollaboration");
+Object.defineProperty(exports, "createYjsCollaborationController", { enumerable: true, get: function () { return YjsCollaboration_1.createYjsCollaborationController; } });
+Object.defineProperty(exports, "useYjsCollaboration", { enumerable: true, get: function () { return YjsCollaboration_1.useYjsCollaboration; } });
+var NativeEditorBridge_1 = require("./NativeEditorBridge");
+Object.defineProperty(exports, "encodeCollaborationStateBase64", { enumerable: true, get: function () { return NativeEditorBridge_1.encodeCollaborationStateBase64; } });
+Object.defineProperty(exports, "decodeCollaborationStateBase64", { enumerable: true, get: function () { return NativeEditorBridge_1.decodeCollaborationStateBase64; } });

package/dist/schemas.d.ts

@@ -0,0 +1,35 @@
+import type { DocumentJSON } from './NativeEditorBridge';
+export interface AttrSpec {
+    default?: unknown;
+}
+export interface NodeSpec {
+    name: string;
+    content: string;
+    group?: string;
+    attrs?: Record<string, AttrSpec>;
+    role: string;
+    htmlTag?: string;
+    isVoid?: boolean;
+}
+export interface MarkSpec {
+    name: string;
+    attrs?: Record<string, AttrSpec>;
+    excludes?: string;
+}
+export interface SchemaDefinition {
+    nodes: NodeSpec[];
+    marks: MarkSpec[];
+}
+export interface ImageNodeAttributes {
+    src: string;
+    alt?: string | null;
+    title?: string | null;
+    width?: number | null;
+    height?: number | null;
+}
+export declare const IMAGE_NODE_NAME = "image";
+export declare function imageNodeSpec(name?: string): NodeSpec;
+export declare function withImagesSchema(schema: SchemaDefinition): SchemaDefinition;
+export declare function buildImageFragmentJson(attrs: ImageNodeAttributes): DocumentJSON;
+export declare const tiptapSchema: SchemaDefinition;
+export declare const prosemirrorSchema: SchemaDefinition;

package/{src/schemas.ts → dist/schemas.js}

@@ -1,36 +1,56 @@
-export interface AttrSpec {
-    default?: unknown;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prosemirrorSchema = exports.tiptapSchema = exports.IMAGE_NODE_NAME = void 0;
+exports.imageNodeSpec = imageNodeSpec;
+exports.withImagesSchema = withImagesSchema;
+exports.buildImageFragmentJson = buildImageFragmentJson;
+exports.IMAGE_NODE_NAME = 'image';
+function imageNodeSpec(name = exports.IMAGE_NODE_NAME) {
+    return {
+        name,
+        content: '',
+        group: 'block',
+        attrs: {
+            src: {},
+            alt: { default: null },
+            title: { default: null },
+            width: { default: null },
+            height: { default: null },
+        },
+        role: 'block',
+        htmlTag: 'img',
+        isVoid: true,
+    };
 }
-
-export interface NodeSpec {
-    name: string;
-    content: string;
-    group?: string;
-    attrs?: Record<string, AttrSpec>;
-    role: string;
-    htmlTag?: string;
-    isVoid?: boolean;
+function withImagesSchema(schema) {
+    const hasImageNode = schema.nodes.some((node) => node.name === exports.IMAGE_NODE_NAME);
+    if (hasImageNode) {
+        return schema;
+    }
+    return {
+        ...schema,
+        nodes: [...schema.nodes, imageNodeSpec()],
+    };
 }
-
-export interface MarkSpec {
-    name: string;
-    attrs?: Record<string, AttrSpec>;
-    excludes?: string;
+function buildImageFragmentJson(attrs) {
+    return {
+        type: 'doc',
+        content: [
+            {
+                type: exports.IMAGE_NODE_NAME,
+                attrs,
+            },
+        ],
+    };
 }
-
-export interface SchemaDefinition {
-    nodes: NodeSpec[];
-    marks: MarkSpec[];
-}
-
-const MARKS: MarkSpec[] = [
+const MARKS = [
     { name: 'bold' },
     { name: 'italic' },
     { name: 'underline' },
     { name: 'strike' },
+    { name: 'link', attrs: { href: {} } },
 ];
-
-export const tiptapSchema: SchemaDefinition = {
+exports.tiptapSchema = {
     nodes: [
         {
             name: 'doc',
@@ -44,6 +64,13 @@ export const tiptapSchema: SchemaDefinition = {
             role: 'textBlock',
             htmlTag: 'p',
         },
+        {
+            name: 'blockquote',
+            content: 'block+',
+            group: 'block',
+            role: 'block',
+            htmlTag: 'blockquote',
+        },
         {
             name: 'bulletList',
             content: 'listItem+',
@@ -81,6 +108,7 @@ export const tiptapSchema: SchemaDefinition = {
             htmlTag: 'hr',
             isVoid: true,
         },
+        imageNodeSpec(),
         {
             name: 'text',
             content: '',
@@ -90,8 +118,7 @@ export const tiptapSchema: SchemaDefinition = {
     ],
     marks: MARKS,
 };
-
-export const prosemirrorSchema: SchemaDefinition = {
+exports.prosemirrorSchema = {
     nodes: [
         {
             name: 'doc',
@@ -105,6 +132,13 @@ export const prosemirrorSchema: SchemaDefinition = {
             role: 'textBlock',
             htmlTag: 'p',
         },
+        {
+            name: 'blockquote',
+            content: 'block+',
+            group: 'block',
+            role: 'block',
+            htmlTag: 'blockquote',
+        },
         {
             name: 'bullet_list',
             content: 'list_item+',
@@ -142,6 +176,7 @@ export const prosemirrorSchema: SchemaDefinition = {
             htmlTag: 'hr',
             isVoid: true,
         },
+        imageNodeSpec('image'),
         {
             name: 'text',
             content: '',

package/dist/useNativeEditor.d.ts

@@ -0,0 +1,40 @@
+import { NativeEditorBridge, type ActiveState, type HistoryState, type RenderElement, type Selection } from './NativeEditorBridge';
+export interface UseNativeEditorOptions {
+    /** Maximum character length. Omit for no limit. */
+    maxLength?: number;
+    /** Initial HTML content to load after creation. */
+    initialHtml?: string;
+    /** Called when content changes after an editing operation. */
+    onChange?: (html: string) => void;
+    /** Called when selection changes. */
+    onSelectionChange?: (selection: Selection) => void;
+}
+export interface UseNativeEditorReturn {
+    /** The underlying bridge instance, or null before creation. */
+    bridge: NativeEditorBridge | null;
+    /** Whether the editor has been created and is ready. */
+    isReady: boolean;
+    /** Current selection state. */
+    selection: Selection;
+    /** Currently active marks/nodes at the selection. */
+    activeState: ActiveState;
+    /** Current undo/redo availability. */
+    historyState: HistoryState;
+    /** Current render elements. */
+    renderElements: RenderElement[];
+    /** Toggle a mark (e.g. 'bold', 'italic', 'underline'). */
+    toggleMark: (markType: string) => void;
+    /** Undo the last operation. */
+    undo: () => void;
+    /** Redo the last undone operation. */
+    redo: () => void;
+    /** Toggle blockquote wrapping around the current block selection. */
+    toggleBlockquote: () => void;
+    /** Insert text at a position. */
+    insertText: (pos: number, text: string) => void;
+    /** Delete a range [from, to). */
+    deleteRange: (from: number, to: number) => void;
+    /** Get the current HTML content. */
+    getHtml: () => string;
+}
+export declare function useNativeEditor(options?: UseNativeEditorOptions): UseNativeEditorReturn;

package/dist/useNativeEditor.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNativeEditor = useNativeEditor;
+const react_1 = require("react");
+const NativeEditorBridge_1 = require("./NativeEditorBridge");
+const DEFAULT_SELECTION = { type: 'text', anchor: 0, head: 0 };
+const DEFAULT_ACTIVE_STATE = {
+    marks: {},
+    markAttrs: {},
+    nodes: {},
+    commands: {},
+    allowedMarks: [],
+    insertableNodes: [],
+};
+const DEFAULT_HISTORY_STATE = { canUndo: false, canRedo: false };
+function useNativeEditor(options = {}) {
+    const { maxLength, initialHtml, onChange, onSelectionChange } = options;
+    const bridgeRef = (0, react_1.useRef)(null);
+    const onChangeRef = (0, react_1.useRef)(onChange);
+    onChangeRef.current = onChange;
+    const onSelectionChangeRef = (0, react_1.useRef)(onSelectionChange);
+    onSelectionChangeRef.current = onSelectionChange;
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const [selection, setSelection] = (0, react_1.useState)(DEFAULT_SELECTION);
+    const [activeState, setActiveState] = (0, react_1.useState)(DEFAULT_ACTIVE_STATE);
+    const [historyState, setHistoryState] = (0, react_1.useState)(DEFAULT_HISTORY_STATE);
+    const [renderElements, setRenderElements] = (0, react_1.useState)([]);
+    const syncStateFromUpdate = (0, react_1.useCallback)((update) => {
+        if (!update)
+            return;
+        setRenderElements(update.renderElements);
+        setSelection(update.selection);
+        setActiveState(update.activeState);
+        setHistoryState(update.historyState);
+    }, []);
+    const applyUpdate = (0, react_1.useCallback)((update) => {
+        if (!update)
+            return;
+        syncStateFromUpdate(update);
+        onSelectionChangeRef.current?.(update.selection);
+        // Fetch current HTML and notify onChange
+        if (onChangeRef.current && bridgeRef.current && !bridgeRef.current.isDestroyed) {
+            const html = bridgeRef.current.getHtml();
+            onChangeRef.current(html);
+        }
+    }, [syncStateFromUpdate]);
+    (0, react_1.useEffect)(() => {
+        const bridge = NativeEditorBridge_1.NativeEditorBridge.create(maxLength != null ? { maxLength } : undefined);
+        bridgeRef.current = bridge;
+        if (initialHtml) {
+            bridge.setHtml(initialHtml);
+        }
+        syncStateFromUpdate(bridge.getCurrentState());
+        setIsReady(true);
+        return () => {
+            bridge.destroy();
+            bridgeRef.current = null;
+            setIsReady(false);
+        };
+    }, [maxLength, initialHtml, syncStateFromUpdate]);
+    const toggleMark = (0, react_1.useCallback)((markType) => {
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+            return;
+        const update = bridgeRef.current.toggleMark(markType);
+        applyUpdate(update);
+    }, [applyUpdate]);
+    const undo = (0, react_1.useCallback)(() => {
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+            return;
+        const update = bridgeRef.current.undo();
+        applyUpdate(update);
+    }, [applyUpdate]);
+    const redo = (0, react_1.useCallback)(() => {
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+            return;
+        const update = bridgeRef.current.redo();
+        applyUpdate(update);
+    }, [applyUpdate]);
+    const toggleBlockquote = (0, react_1.useCallback)(() => {
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+            return;
+        const update = bridgeRef.current.toggleBlockquote();
+        applyUpdate(update);
+    }, [applyUpdate]);
+    const insertText = (0, react_1.useCallback)((pos, text) => {
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+            return;
+        const update = bridgeRef.current.insertText(pos, text);
+        applyUpdate(update);
+    }, [applyUpdate]);
+    const deleteRange = (0, react_1.useCallback)((from, to) => {
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+            return;
+        const update = bridgeRef.current.deleteRange(from, to);
+        applyUpdate(update);
+    }, [applyUpdate]);
+    const getHtml = (0, react_1.useCallback)(() => {
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+            return '';
+        return bridgeRef.current.getHtml();
+    }, []);
+    return {
+        bridge: bridgeRef.current,
+        isReady,
+        selection,
+        activeState,
+        historyState,
+        renderElements,
+        toggleMark,
+        undo,
+        redo,
+        toggleBlockquote,
+        insertText,
+        deleteRange,
+        getHtml,
+    };
+}

package/ios/EditorAddons.swift

@@ -131,12 +131,18 @@ final class MentionSuggestionChipButton: UIButton {
     private let subtitleLabelView = UILabel()
     private let stackView = UIStackView()
     private var theme: EditorMentionTheme?
+    private var toolbarAppearance: EditorToolbarAppearance = .custom
 
     let suggestion: NativeMentionSuggestion
 
-    init(suggestion: NativeMentionSuggestion, theme: EditorMentionTheme?) {
+    init(
+        suggestion: NativeMentionSuggestion,
+        theme: EditorMentionTheme?,
+        toolbarAppearance: EditorToolbarAppearance = .custom
+    ) {
         self.suggestion = suggestion
         self.theme = theme
+        self.toolbarAppearance = toolbarAppearance
         super.init(frame: .zero)
         translatesAutoresizingMaskIntoConstraints = false
         layer.cornerRadius = 12
@@ -179,7 +185,7 @@ final class MentionSuggestionChipButton: UIButton {
 
         addTarget(self, action: #selector(handleTouchDown), for: [.touchDown, .touchDragEnter])
         addTarget(self, action: #selector(handleTouchUp), for: [.touchCancel, .touchDragExit, .touchUpInside, .touchUpOutside])
-        apply(theme: theme)
+        apply(theme: theme, toolbarAppearance: toolbarAppearance)
         updateAppearance(highlighted: false)
     }
 
@@ -187,8 +193,9 @@ final class MentionSuggestionChipButton: UIButton {
         return nil
     }
 
-    func apply(theme: EditorMentionTheme?) {
+    func apply(theme: EditorMentionTheme?, toolbarAppearance: EditorToolbarAppearance = .custom) {
         self.theme = theme
+        self.toolbarAppearance = toolbarAppearance
         layer.cornerRadius = theme?.borderRadius ?? 12
         layer.borderColor = (theme?.borderColor ?? UIColor.clear).cgColor
         layer.borderWidth = theme?.borderWidth ?? 0
@@ -211,6 +218,18 @@ final class MentionSuggestionChipButton: UIButton {
     }
 
     private func updateAppearance(highlighted: Bool) {
+        if toolbarAppearance == .native {
+            layer.cornerRadius = 18
+            layer.borderColor = UIColor.clear.cgColor
+            layer.borderWidth = 0
+            backgroundColor = highlighted
+                ? UIColor.white.withAlphaComponent(0.18)
+                : .clear
+            titleLabelView.textColor = .label
+            subtitleLabelView.textColor = .secondaryLabel
+            return
+        }
+
         backgroundColor = highlighted
             ? (theme?.optionHighlightedBackgroundColor ?? UIColor.systemBlue.withAlphaComponent(0.12))
             : (theme?.backgroundColor ?? UIColor.secondarySystemBackground)
@@ -225,4 +244,8 @@ final class MentionSuggestionChipButton: UIButton {
             && !titleLabelView.isUserInteractionEnabled
             && !subtitleLabelView.isUserInteractionEnabled
     }
+
+    func usesNativeAppearanceForTesting() -> Bool {
+        toolbarAppearance == .native
+    }
 }

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>