@openeditor/native 0.0.24 → 0.0.25

package/README.md

@@ -8,8 +8,13 @@ Pass `attachmentRuntime` to use the system picker and host storage lifecycle. Th
 
 - `OpenEditorNative` as the primary editing surface
 - `OpenEditorNativeViewer` for read-only rendering
+- `OpenEditorNativeEmojiPicker` for standalone native emoji selection
 - native document bridge helpers where renderer adaptation is required
 
+Callout and Page emoji are editable in `OpenEditorNative`: pressing the emoji
+opens the native picker and commits the selected Unicode value through editor
+history. Inline emoji continue to use the device keyboard.
+
 ## Required peers
 
 - `@openeditor/react-native-prose-editor`
@@ -33,6 +38,26 @@ export function Example() {
 }
 ```
 
+## Standalone emoji picker
+
+The editor wires this automatically for callouts and pages. Hosts can also use
+the same picker for page headers or other product UI:
+
+```tsx
+import { OpenEditorNativeEmojiPicker } from "@openeditor/native";
+
+<OpenEditorNativeEmojiPicker
+  visible={pickerOpen}
+  onEmojiSelect={setPageIcon}
+  onRequestClose={() => setPickerOpen(false)}
+/>;
+```
+
+The native picker shares OpenEditor’s Emojibase dataset with the Frimousse web
+picker, while using a platform-native medium bottom sheet and native controls
+for scrolling, search, and touch handling. Long-press an emoji that supports
+skin tones to choose a variant from the platform-native context menu.
+
 ## Internal notes
 
 - The native prose editor engine remains an implementation detail behind this package.

package/dist/emoji-button.d.ts

@@ -0,0 +1,8 @@
+import { type OpenEditorNativeEmoji } from "./emoji-data.js";
+type EmojiButtonProps = {
+    item: OpenEditorNativeEmoji;
+    size: number;
+    onSelect: (emoji: string) => void;
+};
+export declare const EmojiButton: (props: EmojiButtonProps) => import("react").JSX.Element;
+export {};

package/dist/emoji-button.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuView } from "@expo/ui/community/menu";
+import { useMemo } from "react";
+import { Pressable, Text } from "react-native";
+import { emojiForNativeSkinTone, openEditorNativeEmojiSkinToneOptions, } from "./emoji-data.js";
+const EmojiTrigger = ({ item, size, onSelect }) => (_jsx(Pressable, { accessibilityLabel: item.emoji, accessibilityRole: "button", onPress: () => onSelect(item.emoji), style: { alignItems: "center", height: 44, justifyContent: "center", width: size }, children: _jsx(Text, { style: { fontSize: 27 }, children: item.emoji }) }));
+const ToneEmojiButton = ({ item, size, onSelect }) => {
+    const actions = useMemo(() => openEditorNativeEmojiSkinToneOptions.map((option) => {
+        const emoji = emojiForNativeSkinTone(item, option.tone);
+        return { id: emoji, title: `${emoji}  ${option.label}` };
+    }), [item]);
+    return (_jsx(MenuView, { actions: actions, onPressAction: ({ nativeEvent }) => onSelect(nativeEvent.event), shouldOpenOnLongPress: true, style: { height: 44, width: size }, children: _jsx(EmojiTrigger, { item: item, onSelect: onSelect, size: size }) }));
+};
+export const EmojiButton = (props) => (props.item.skins?.length ? _jsx(ToneEmojiButton, { ...props }) : _jsx(EmojiTrigger, { ...props }));

package/dist/emoji-data.d.ts

@@ -0,0 +1,44 @@
+export type OpenEditorNativeEmojiSkinTone = 0 | 1 | 2 | 3 | 4 | 5;
+export type OpenEditorNativeEmoji = {
+    emoji: string;
+    label: string;
+    search: string;
+    group: number;
+    order: number;
+    skins?: readonly {
+        emoji: string;
+        tone?: number;
+    }[];
+};
+export type OpenEditorNativeEmojiSection = {
+    key: string;
+    title: string;
+    data: readonly OpenEditorNativeEmoji[];
+};
+export declare const openEditorNativeEmojiSkinToneOptions: readonly [{
+    readonly tone: 0;
+    readonly emoji: "✋";
+    readonly label: "Default skin tone";
+}, {
+    readonly tone: 1;
+    readonly emoji: "✋🏻";
+    readonly label: "Light skin tone";
+}, {
+    readonly tone: 2;
+    readonly emoji: "✋🏼";
+    readonly label: "Medium-light skin tone";
+}, {
+    readonly tone: 3;
+    readonly emoji: "✋🏽";
+    readonly label: "Medium skin tone";
+}, {
+    readonly tone: 4;
+    readonly emoji: "✋🏾";
+    readonly label: "Medium-dark skin tone";
+}, {
+    readonly tone: 5;
+    readonly emoji: "✋🏿";
+    readonly label: "Dark skin tone";
+}];
+export declare const emojiForNativeSkinTone: (item: OpenEditorNativeEmoji, skinTone: OpenEditorNativeEmojiSkinTone) => string;
+export declare const getOpenEditorNativeEmojiSections: (query?: string) => readonly OpenEditorNativeEmojiSection[];

package/dist/emoji-data.js

@@ -0,0 +1,50 @@
+import emojiDataJson from "emojibase-data/en/data.json";
+import emojiMessagesJson from "emojibase-data/en/messages.json";
+const normalizeSearch = (value) => value.toLocaleLowerCase().normalize("NFKD").replace(/[\u0300-\u036f]/g, "").trim();
+const rawEmojiData = emojiDataJson;
+const rawMessages = emojiMessagesJson;
+const groupMessages = new Map(rawMessages.groups.map((group) => [group.order, { key: group.key, title: group.message }]));
+const nativeEmoji = rawEmojiData
+    .filter((item) => typeof item.group === "number" && item.group !== 2)
+    .map((item) => ({
+    emoji: item.emoji,
+    label: item.label,
+    search: normalizeSearch([item.label, ...(item.tags ?? [])].join(" ")),
+    group: item.group,
+    order: item.order ?? Number.MAX_SAFE_INTEGER,
+    skins: item.skins,
+}))
+    .sort((left, right) => left.order - right.order);
+export const openEditorNativeEmojiSkinToneOptions = [
+    { tone: 0, emoji: "✋", label: "Default skin tone" },
+    { tone: 1, emoji: "✋🏻", label: "Light skin tone" },
+    { tone: 2, emoji: "✋🏼", label: "Medium-light skin tone" },
+    { tone: 3, emoji: "✋🏽", label: "Medium skin tone" },
+    { tone: 4, emoji: "✋🏾", label: "Medium-dark skin tone" },
+    { tone: 5, emoji: "✋🏿", label: "Dark skin tone" },
+];
+export const emojiForNativeSkinTone = (item, skinTone) => {
+    if (skinTone === 0)
+        return item.emoji;
+    return item.skins?.find((skin) => skin.tone === skinTone)?.emoji ?? item.emoji;
+};
+export const getOpenEditorNativeEmojiSections = (query = "") => {
+    const normalizedQuery = normalizeSearch(query);
+    const groups = new Map();
+    for (const item of nativeEmoji) {
+        if (normalizedQuery && !item.search.includes(normalizedQuery))
+            continue;
+        const group = groups.get(item.group);
+        if (group)
+            group.push(item);
+        else
+            groups.set(item.group, [item]);
+    }
+    return [...groups.entries()]
+        .sort(([left], [right]) => left - right)
+        .map(([group, data]) => ({
+        key: groupMessages.get(group)?.key ?? String(group),
+        title: groupMessages.get(group)?.title ?? "Emoji",
+        data,
+    }));
+};

package/dist/emoji-picker.d.ts

@@ -0,0 +1,12 @@
+export type OpenEditorNativeEmojiPickerTheme = {
+    surfaceMuted?: string;
+    text?: string;
+    muted?: string;
+};
+export type OpenEditorNativeEmojiPickerProps = {
+    visible: boolean;
+    onEmojiSelect: (emoji: string) => void;
+    onRequestClose: () => void;
+    theme?: OpenEditorNativeEmojiPickerTheme;
+};
+export declare const OpenEditorNativeEmojiPicker: ({ visible, onEmojiSelect, onRequestClose, theme, }: OpenEditorNativeEmojiPickerProps) => import("react").JSX.Element;

package/dist/emoji-picker.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BottomSheet, RNHostView } from "@expo/ui";
+import { useMemo, useState } from "react";
+import { ScrollView, Text, TextInput, useWindowDimensions, View, } from "react-native";
+import { getOpenEditorNativeEmojiSections, } from "./emoji-data.js";
+import { EmojiButton } from "./emoji-button.js";
+const toRows = (items, columns = 8) => {
+    const rows = [];
+    for (let index = 0; index < items.length; index += columns) {
+        rows.push(items.slice(index, index + columns));
+    }
+    return rows;
+};
+const DEFAULT_THEME = {
+    surfaceMuted: "#eeeeee",
+    text: "#171717",
+    muted: "#737373",
+};
+export const OpenEditorNativeEmojiPicker = ({ visible, onEmojiSelect, onRequestClose, theme, }) => {
+    const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+    const [query, setQuery] = useState("");
+    const resolvedTheme = { ...DEFAULT_THEME, ...theme };
+    const nativeScrollHeight = Math.max(240, Math.floor(windowHeight * 0.5) - 32);
+    const contentWidth = Math.max(240, Math.min(windowWidth - 32, 520));
+    const emojiButtonWidth = contentWidth / 8;
+    const sections = useMemo(() => getOpenEditorNativeEmojiSections(query).map((section) => ({
+        ...section,
+        data: toRows(section.data),
+    })), [query]);
+    const close = () => {
+        setQuery("");
+        onRequestClose();
+    };
+    const selectEmoji = (selectedEmoji) => {
+        onEmojiSelect(selectedEmoji);
+        close();
+    };
+    return (_jsx(BottomSheet, { isPresented: visible, onDismiss: close, snapPoints: ["half"], children: _jsx(RNHostView, { matchContents: true, children: _jsxs(ScrollView, { contentContainerStyle: { paddingBottom: 32 }, keyboardShouldPersistTaps: "handled", style: { height: nativeScrollHeight, width: contentWidth }, children: [_jsx(TextInput, { autoCapitalize: "none", autoCorrect: false, onChangeText: setQuery, placeholder: "Search emoji\u2026", placeholderTextColor: resolvedTheme.muted, returnKeyType: "search", style: {
+                            backgroundColor: resolvedTheme.surfaceMuted,
+                            borderRadius: 10,
+                            color: resolvedTheme.text,
+                            fontSize: 16,
+                            height: 44,
+                            paddingHorizontal: 12,
+                            width: contentWidth,
+                        } }), sections.length === 0 ? (_jsx(Text, { style: {
+                            color: resolvedTheme.muted,
+                            fontSize: 15,
+                            height: 160,
+                            paddingTop: 48,
+                            textAlign: "center",
+                            width: contentWidth,
+                        }, children: "No emoji found." })) : sections.map((section) => (_jsxs(View, { style: { width: contentWidth }, children: [_jsx(Text, { style: {
+                                    color: resolvedTheme.muted,
+                                    fontSize: 12,
+                                    fontWeight: "600",
+                                    height: 32,
+                                    paddingHorizontal: 8,
+                                    paddingVertical: 8,
+                                    width: contentWidth,
+                                }, children: section.title }), section.data.map((row, rowIndex) => (_jsx(View, { style: {
+                                    alignItems: "center",
+                                    flexDirection: "row",
+                                    height: 44,
+                                    width: contentWidth,
+                                }, children: row.map((item) => (_jsx(EmojiButton, { item: item, onSelect: selectEmoji, size: emojiButtonWidth }, item.emoji))) }, `${section.key}-${rowIndex}`)))] }, section.key)))] }) }) }));
+};

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import { type OpenEditorDocument, type OpenEditorAttachmentRuntime, type ProseMi
 import { type ReactNode } from "react";
 import type { NativeRichTextEditorToolbarPlacement } from "@openeditor/react-native-prose-editor";
 export { normalizeNativeThemeColor } from "./theme.js";
+export { OpenEditorNativeEmojiPicker, type OpenEditorNativeEmojiPickerProps, type OpenEditorNativeEmojiPickerTheme, } from "./emoji-picker.js";
+export { emojiForNativeSkinTone, getOpenEditorNativeEmojiSections, openEditorNativeEmojiSkinToneOptions, type OpenEditorNativeEmoji, type OpenEditorNativeEmojiSection, type OpenEditorNativeEmojiSkinTone, } from "./emoji-data.js";
 export type OpenEditorNativeProps = {
     document?: OpenEditorDocument;
     editable?: boolean;
@@ -44,12 +46,14 @@ export type OpenEditorNativeTheme = {
     background: string;
     surface: string;
     surfaceMuted: string;
+    blockSurface?: string;
     text: string;
     textSoft?: string;
     muted: string;
     placeholder?: string;
     border: string;
     borderStrong?: string;
+    structuralLine?: string;
     accent: string;
     accentText: string;
     accentStrong?: string;

package/dist/index.js

@@ -7,23 +7,30 @@ import { resolveSelectedTopLevelIndex } from "./selection.js";
 import { createOpenEditorNativeToolbarItems, defaultDocumentForToolbarAction, openEditorNativeToolbarActionKeys, } from "./toolbar.js";
 import { normalizeNativeThemeColor } from "./theme.js";
 export { normalizeNativeThemeColor } from "./theme.js";
+import { OpenEditorNativeEmojiPicker } from "./emoji-picker.js";
+export { OpenEditorNativeEmojiPicker, } from "./emoji-picker.js";
+export { emojiForNativeSkinTone, getOpenEditorNativeEmojiSections, openEditorNativeEmojiSkinToneOptions, } from "./emoji-data.js";
 import { defaultBlockRegistry } from "@openeditor/extensions";
+const defaultLightNeutralSurface = "#eeeeee";
+const defaultLightStructuralLine = "#d4d4d4";
 const defaultNativeTheme = {
     background: "#fafafa",
     surface: "#ffffff",
-    surfaceMuted: "#f5f5f5",
+    surfaceMuted: defaultLightNeutralSurface,
+    blockSurface: defaultLightNeutralSurface,
     text: "#171717",
     textSoft: "#262626",
     muted: "#737373",
     placeholder: "#a3a3a3",
-    border: "#e5e5e5",
-    borderStrong: "#d4d4d4",
-    accent: "#f5f5f5",
+    border: defaultLightNeutralSurface,
+    borderStrong: defaultLightStructuralLine,
+    structuralLine: defaultLightStructuralLine,
+    accent: defaultLightNeutralSurface,
     accentText: "#171717",
     accentStrong: "#171717",
     primary: "#171717",
     primaryText: "#ffffff",
-    codeBackground: "#f5f5f5",
+    codeBackground: defaultLightNeutralSurface,
     codeText: "#171717",
     debugBackground: "#171717",
     debugText: "#d4d4d4",
@@ -186,6 +193,10 @@ const openEditorNativeSchema = {
 };
 const toNativeEditorTheme = (theme) => ({
     backgroundColor: normalizeNativeThemeColor(theme.background),
+    blockSurfaceColor: normalizeNativeThemeColor(theme.blockSurface),
+    structuralLineColor: normalizeNativeThemeColor(theme.structuralLine),
+    accentStrongColor: normalizeNativeThemeColor(theme.accentStrong),
+    accentStrongTextColor: normalizeNativeThemeColor(theme.primaryText),
     borderRadius: 0,
     placeholderColor: normalizeNativeThemeColor(theme.placeholder),
     contentInsets: {
@@ -222,7 +233,7 @@ const toNativeEditorTheme = (theme) => ({
         itemSpacing: 6,
     },
     blockquote: {
-        borderColor: normalizeNativeThemeColor(theme.accent),
+        borderColor: normalizeNativeThemeColor(theme.structuralLine),
         borderWidth: 3,
         text: {
             color: normalizeNativeThemeColor(theme.textSoft),
@@ -242,14 +253,14 @@ const toNativeEditorTheme = (theme) => ({
         },
     },
     table: {
-        cellBackgroundColor: normalizeNativeThemeColor(theme.surface),
-        headerBackgroundColor: normalizeNativeThemeColor(theme.surfaceMuted),
-        borderColor: normalizeNativeThemeColor(theme.border),
+        cellBackgroundColor: normalizeNativeThemeColor(theme.blockSurface),
+        headerBackgroundColor: normalizeNativeThemeColor(theme.blockSurface),
+        borderColor: normalizeNativeThemeColor(theme.structuralLine),
         selectionBackgroundColor: normalizeNativeThemeColor(theme.accent),
         selectionBorderColor: normalizeNativeThemeColor(theme.accentStrong),
     },
     horizontalRule: {
-        color: normalizeNativeThemeColor(theme.border),
+        color: normalizeNativeThemeColor(theme.structuralLine),
         thickness: 1,
         verticalMargin: 16,
     },
@@ -298,6 +309,29 @@ const isSafeInputUrl = (value, allowDataImage = false) => {
     return true;
 };
 const documentsMatch = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+const attachmentTypeLabel = (mimeType, name) => {
+    const subtype = mimeType?.split("/").at(-1)?.split("+")[0]?.trim();
+    const extension = name.includes(".") ? name.split(".").at(-1)?.trim() : undefined;
+    return (subtype || extension || "FILE").slice(0, 4).toUpperCase();
+};
+const formatAttachmentSize = (size) => {
+    if (size === null || !Number.isFinite(size) || size < 0)
+        return null;
+    if (size < 1024)
+        return `${Math.round(size)} B`;
+    if (size < 1024 * 1024)
+        return `${(size / 1024).toFixed(size < 10 * 1024 ? 1 : 0)} KB`;
+    return `${(size / (1024 * 1024)).toFixed(size < 10 * 1024 * 1024 ? 1 : 0)} MB`;
+};
+const NativeToggleListItem = ({ children, initiallyOpen, theme, }) => {
+    const [open, setOpen] = useState(initiallyOpen);
+    const childArray = Array.isArray(children) ? children : [children];
+    return (_jsxs(View, { style: styles.viewerListRow, children: [_jsx(Pressable, { accessibilityLabel: open ? "Collapse toggle item" : "Expand toggle item", accessibilityRole: "button", hitSlop: 8, onPress: () => setOpen((current) => !current), style: styles.viewerListControl, children: _jsx(View, { style: [
+                        styles.viewerToggleCaret,
+                        { borderLeftColor: theme.muted },
+                        open ? styles.viewerToggleCaretOpen : null,
+                    ] }) }), _jsx(View, { style: styles.viewerListContent, children: open ? childArray : childArray.slice(0, 1) })] }));
+};
 const nativeSeedDocument = createDocument([
     textBlock("heading", "OpenEditor Native", { level: 1 }),
     textBlock("paragraph", "This native surface is intentionally limited to engine-owned blocks for now."),
@@ -355,28 +389,29 @@ const renderNativeViewerNode = (node, key, theme, renderers, onOpenPage, attachm
         case "bulletList":
         case "orderedList":
         case "taskList":
+        case "toggleList":
             return _jsx(View, { style: { marginBottom: 12 }, children: children }, key);
         case "blockquote":
-            return _jsx(View, { style: { borderLeftColor: theme.accent, borderLeftWidth: 3, marginBottom: 12, paddingLeft: 12 }, children: children }, key);
+            return _jsx(View, { style: { borderLeftColor: theme.structuralLine, borderLeftWidth: 3, marginBottom: 12, paddingLeft: 12 }, children: children }, key);
         case "codeBlock":
             return _jsx(View, { style: { backgroundColor: theme.codeBackground, borderRadius: 8, marginBottom: 12, padding: 12 }, children: _jsx(Text, { style: { color: theme.codeText }, children: node.content?.map((child) => child.text ?? "").join("") }) }, key);
         case "callout": {
             const emoji = normalizeEmoji(node.attrs?.emoji, DEFAULT_CALLOUT_EMOJI);
-            return _jsxs(View, { style: { backgroundColor: theme.codeBackground, borderRadius: 10, flexDirection: "row", gap: 10, marginBottom: 12, padding: 14 }, children: [_jsx(Text, { style: { fontSize: 20 }, children: emoji }), _jsx(View, { style: { flex: 1 }, children: children })] }, key);
+            return _jsxs(View, { style: { backgroundColor: theme.blockSurface, borderRadius: 12, flexDirection: "row", gap: 10, marginBottom: 12, padding: 14 }, children: [_jsx(Text, { style: { fontSize: 20 }, children: emoji }), _jsx(View, { style: { flex: 1 }, children: children })] }, key);
         }
         case "divider":
-            return _jsx(View, { style: { backgroundColor: theme.border, height: 1, marginVertical: 16 } }, key);
+            return _jsx(View, { style: { backgroundColor: theme.structuralLine, height: 1, marginVertical: 16 } }, key);
         case "image":
             return (_jsx(NativeImage, { source: { uri: typeof node.attrs?.src === "string" ? node.attrs.src : "" }, accessibilityLabel: typeof node.attrs?.alt === "string" ? node.attrs.alt : undefined, style: { borderRadius: 8, height: 220, marginBottom: 12, width: "100%" }, resizeMode: "cover" }, key));
         case "columns":
             return _jsx(View, { style: { flexDirection: "row", gap: 12, marginBottom: 12 }, children: children }, key);
         case "table":
-            return _jsx(View, { style: { borderColor: theme.border, borderRadius: 8, borderWidth: 1, marginBottom: 12, overflow: "hidden" }, children: children }, key);
+            return _jsx(View, { style: { borderColor: theme.structuralLine, borderRadius: 8, borderWidth: 1, marginBottom: 12, overflow: "hidden" }, children: children }, key);
         case "page": {
             const pageId = typeof node.attrs?.pageId === "string" ? node.attrs.pageId : "";
             const title = node.content?.map((child) => child.text ?? "").join("") || "Untitled";
             const icon = normalizeEmoji(node.attrs?.icon, DEFAULT_PAGE_EMOJI);
-            const content = _jsxs(_Fragment, { children: [_jsx(Text, { style: { fontSize: 18 }, children: icon }), _jsx(Text, { style: { color: theme.text, flex: 1, fontWeight: "600", textDecorationLine: "underline" }, children: title }), _jsx(Text, { style: { color: theme.muted }, children: "\u2192" })] });
+            const content = _jsxs(_Fragment, { children: [_jsx(Text, { style: [styles.viewerPageIcon, { color: theme.text }], children: icon }), _jsx(Text, { style: [styles.viewerPageTitle, { color: theme.text, textDecorationColor: theme.muted }], children: title }), _jsx(Text, { style: { color: theme.muted }, children: "\u2192" })] });
             return onOpenPage && pageId ? (_jsx(Pressable, { accessibilityRole: "button", onPress: () => onOpenPage({ pageId, title, icon, href: typeof node.attrs?.href === "string" ? node.attrs.href : null }), style: { alignItems: "center", borderRadius: 8, flexDirection: "row", gap: 8, marginBottom: 8, padding: 8 }, children: content }, key)) : _jsx(View, { style: { alignItems: "center", flexDirection: "row", gap: 8, marginBottom: 8, padding: 8 }, children: content }, key);
         }
         case "attachment": {
@@ -387,20 +422,29 @@ const renderNativeViewerNode = (node, key, theme, renderers, onOpenPage, attachm
                 size: typeof node.attrs?.size === "number" ? node.attrs.size : null,
                 url: typeof node.attrs?.url === "string" ? node.attrs.url : null,
             };
-            const content = _jsxs(_Fragment, { children: [_jsx(Text, { style: { fontSize: 22 }, children: "\uD83D\uDCCE" }), _jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontWeight: "600" }, children: snapshot.name }), _jsx(Text, { style: { color: theme.muted, fontSize: 12 }, children: snapshot.mimeType ?? "File" })] }), _jsx(Text, { style: { color: theme.muted }, children: "Open" })] });
-            return attachmentRuntime?.openAttachment ? _jsx(Pressable, { accessibilityLabel: `Open ${snapshot.name}`, accessibilityRole: "button", onPress: () => void attachmentRuntime.openAttachment?.(snapshot), style: { alignItems: "center", borderColor: theme.border, borderRadius: 10, borderWidth: 1, flexDirection: "row", gap: 10, marginBottom: 8, minHeight: 64, padding: 10 }, children: content }, key) : _jsx(View, { style: { alignItems: "center", borderColor: theme.border, borderRadius: 10, borderWidth: 1, flexDirection: "row", gap: 10, marginBottom: 8, minHeight: 64, padding: 10 }, children: content }, key);
+            const size = formatAttachmentSize(snapshot.size);
+            const type = attachmentTypeLabel(snapshot.mimeType, snapshot.name);
+            const content = _jsxs(_Fragment, { children: [_jsx(View, { style: [styles.viewerAttachmentIcon, { backgroundColor: theme.blockSurface }], children: _jsx(Text, { style: [styles.viewerAttachmentType, { color: theme.muted }], children: type }) }), _jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontWeight: "600" }, children: snapshot.name }), _jsx(Text, { style: { color: theme.muted, fontSize: 12, marginTop: 3 }, children: [size, type].filter(Boolean).join(" · ") })] }), _jsx(Text, { style: { color: theme.muted }, children: "\u2192" })] });
+            return attachmentRuntime?.openAttachment ? _jsx(Pressable, { accessibilityLabel: `Open ${snapshot.name}`, accessibilityRole: "button", onPress: () => void attachmentRuntime.openAttachment?.(snapshot), style: [styles.viewerAttachment, { backgroundColor: theme.surface, borderColor: theme.structuralLine }], children: content }, key) : _jsx(View, { style: [styles.viewerAttachment, { backgroundColor: theme.surface, borderColor: theme.structuralLine }], children: content }, key);
         }
         default:
             if (node.type === "column") {
                 return _jsx(View, { style: { flex: 1 }, children: children }, key);
             }
             if (node.type === "tableRow") {
-                return _jsx(View, { style: { borderBottomColor: theme.border, borderBottomWidth: StyleSheet.hairlineWidth, flexDirection: "row" }, children: children }, key);
+                return _jsx(View, { style: { borderBottomColor: theme.structuralLine, borderBottomWidth: StyleSheet.hairlineWidth, flexDirection: "row" }, children: children }, key);
             }
             if (node.type === "tableHeader" || node.type === "tableCell") {
-                return _jsx(View, { style: { flex: 1, padding: 10 }, children: children }, key);
+                return _jsx(View, { style: { backgroundColor: theme.blockSurface, flex: 1, padding: 10 }, children: children }, key);
+            }
+            if (node.type === "taskItem") {
+                const checked = node.attrs?.checked === true;
+                return _jsxs(View, { style: styles.viewerListRow, children: [_jsx(View, { style: [styles.viewerTaskCheckbox, { backgroundColor: checked ? theme.accentStrong : theme.blockSurface }], children: checked ? _jsx(Text, { style: [styles.viewerTaskCheck, { color: theme.primaryText }], children: "\u2713" }) : null }), _jsx(View, { style: styles.viewerListContent, children: children })] }, key);
             }
-            if (node.type === "listItem" || node.type === "taskItem") {
+            if (node.type === "toggleListItem") {
+                return _jsx(NativeToggleListItem, { initiallyOpen: node.attrs?.open !== false, theme: theme, children: children }, key);
+            }
+            if (node.type === "listItem") {
                 return _jsxs(View, { style: { flexDirection: "row", gap: 8, marginBottom: 6 }, children: [_jsx(Text, { style: { color: theme.muted }, children: "\u2022" }), _jsx(View, { style: { flex: 1 }, children: children })] }, key);
             }
             return _jsx(View, { children: children }, key);
@@ -433,6 +477,7 @@ export const OpenEditorNative = ({ document = nativeSeedDocument, editable = tru
     const [linkRequest, setLinkRequest] = useState(null);
     const [linkUrl, setLinkUrl] = useState("https://");
     const [imageRequest, setImageRequest] = useState(null);
+    const [emojiRequest, setEmojiRequest] = useState(null);
     const [imageUrl, setImageUrl] = useState("https://placehold.co/960x420/png");
     const [attachmentUpload, setAttachmentUpload] = useState(null);
     const attachmentAbortRef = useRef(null);
@@ -597,9 +642,22 @@ export const OpenEditorNative = ({ document = nativeSeedDocument, editable = tru
                 }, onRequestImage: (request) => {
                     setImageUrl("https://placehold.co/960x420/png");
                     setImageRequest(request);
-                }, onOpenPage: onOpenPage, onOpenAttachment: (attachment) => void attachmentRuntime?.openAttachment?.(attachment), onSelectionChange: setSelection, onContentChangeJSON: (json) => {
+                }, onOpenPage: onOpenPage, onRequestEmoji: setEmojiRequest, onOpenAttachment: (attachment) => void attachmentRuntime?.openAttachment?.(attachment), onSelectionChange: setSelection, onContentChangeJSON: (json) => {
                     syncDocument(contentFromNativeJson(json), false);
-                }, style: styles.nativeEditor }), _jsx(UrlDialog, { title: "Link", value: linkUrl, visible: linkRequest !== null, placeholder: "https://", confirmLabel: linkUrl.trim() ? "Apply" : "Remove", onChangeText: setLinkUrl, onCancel: () => setLinkRequest(null), onSubmit: submitLinkDialog, theme: resolvedTheme }), _jsx(Modal, { animationType: "fade", onRequestClose: () => { attachmentAbortRef.current?.abort(); setAttachmentUpload(null); }, transparent: true, visible: attachmentUpload !== null, children: _jsx(View, { style: [styles.dialogBackdrop, { backgroundColor: resolvedTheme.backdrop }], children: _jsxs(View, { accessibilityViewIsModal: true, style: [styles.dialog, { backgroundColor: resolvedTheme.surface, borderColor: resolvedTheme.border }], children: [_jsx(Text, { style: [styles.unavailableTitle, { color: resolvedTheme.text }], children: attachmentUpload?.input.name }), _jsx(Text, { style: [styles.unavailableText, { color: attachmentUpload?.error ? "#b42318" : resolvedTheme.muted }], children: attachmentUpload?.error ?? `Uploading ${Math.round((attachmentUpload?.progress ?? 0) * 100)}%` }), _jsxs(View, { style: styles.dialogActions, children: [attachmentUpload?.error ? _jsx(CommandButton, { label: "Retry", onPress: () => void uploadAttachment(), theme: resolvedTheme }) : null, _jsx(CommandButton, { label: "Cancel", onPress: () => { attachmentAbortRef.current?.abort(); setAttachmentUpload(null); }, theme: resolvedTheme })] })] }) }) }), _jsx(UrlDialog, { title: "Image", value: imageUrl, visible: imageRequest !== null, placeholder: "https://", confirmLabel: "Insert", onChangeText: setImageUrl, onCancel: () => setImageRequest(null), onSubmit: submitImageDialog, theme: resolvedTheme })] }));
+                }, style: styles.nativeEditor }), _jsx(UrlDialog, { title: "Link", value: linkUrl, visible: linkRequest !== null, placeholder: "https://", confirmLabel: linkUrl.trim() ? "Apply" : "Remove", onChangeText: setLinkUrl, onCancel: () => setLinkRequest(null), onSubmit: submitLinkDialog, theme: resolvedTheme }), _jsx(Modal, { animationType: "fade", onRequestClose: () => { attachmentAbortRef.current?.abort(); setAttachmentUpload(null); }, transparent: true, visible: attachmentUpload !== null, children: _jsx(View, { style: [styles.dialogBackdrop, { backgroundColor: resolvedTheme.backdrop }], children: _jsxs(View, { accessibilityViewIsModal: true, style: [styles.dialog, { backgroundColor: resolvedTheme.surface, borderColor: resolvedTheme.border }], children: [_jsx(Text, { style: [styles.unavailableTitle, { color: resolvedTheme.text }], children: attachmentUpload?.input.name }), _jsx(Text, { style: [styles.unavailableText, { color: attachmentUpload?.error ? "#b42318" : resolvedTheme.muted }], children: attachmentUpload?.error ?? `Uploading ${Math.round((attachmentUpload?.progress ?? 0) * 100)}%` }), _jsxs(View, { style: styles.dialogActions, children: [attachmentUpload?.error ? _jsx(CommandButton, { label: "Retry", onPress: () => void uploadAttachment(), theme: resolvedTheme }) : null, _jsx(CommandButton, { label: "Cancel", onPress: () => { attachmentAbortRef.current?.abort(); setAttachmentUpload(null); }, theme: resolvedTheme })] })] }) }) }), _jsx(UrlDialog, { title: "Image", value: imageUrl, visible: imageRequest !== null, placeholder: "https://", confirmLabel: "Insert", onChangeText: setImageUrl, onCancel: () => setImageRequest(null), onSubmit: submitImageDialog, theme: resolvedTheme }), _jsx(OpenEditorNativeEmojiPicker, { onEmojiSelect: (emoji) => {
+                    if (!emojiRequest)
+                        return;
+                    const attribute = emojiRequest.nodeType === "page" ? "icon" : "emoji";
+                    editorRef.current?.updateNodeAttrs(emojiRequest.docPos, {
+                        ...emojiRequest.attrs,
+                        [attribute]: emoji,
+                    });
+                    setEmojiRequest(null);
+                }, onRequestClose: () => setEmojiRequest(null), theme: {
+                    surfaceMuted: resolvedTheme.surfaceMuted,
+                    text: resolvedTheme.text,
+                    muted: resolvedTheme.muted,
+                }, visible: emojiRequest !== null })] }));
 };
 export const OpenEditorNativeViewer = ({ document = nativeSeedDocument, theme, renderers, onOpenPage, attachmentRuntime, }) => {
     const resolvedTheme = {
@@ -627,6 +685,82 @@ const styles = StyleSheet.create({
         gap: 4,
         padding: 16,
     },
+    viewerListRow: {
+        alignItems: "flex-start",
+        flexDirection: "row",
+        gap: 8,
+        marginBottom: 6,
+    },
+    viewerListControl: {
+        alignItems: "center",
+        height: 24,
+        justifyContent: "center",
+        width: 20,
+    },
+    viewerListContent: {
+        flex: 1,
+    },
+    viewerToggleCaret: {
+        borderBottomColor: "transparent",
+        borderBottomWidth: 4,
+        borderLeftWidth: 6,
+        borderTopColor: "transparent",
+        borderTopWidth: 4,
+        height: 0,
+        transform: [{ rotate: "0deg" }],
+        width: 0,
+    },
+    viewerToggleCaretOpen: {
+        transform: [{ rotate: "90deg" }],
+    },
+    viewerTaskCheckbox: {
+        alignItems: "center",
+        borderRadius: 4,
+        height: 20,
+        justifyContent: "center",
+        marginTop: 2,
+        width: 20,
+    },
+    viewerTaskCheck: {
+        fontSize: 13,
+        fontWeight: "800",
+        lineHeight: 16,
+    },
+    viewerPageIcon: {
+        fontSize: 18,
+        lineHeight: 24,
+        textAlign: "center",
+        width: 24,
+    },
+    viewerPageTitle: {
+        flex: 1,
+        fontWeight: "600",
+        lineHeight: 24,
+        textDecorationLine: "underline",
+    },
+    viewerAttachment: {
+        alignItems: "center",
+        borderRadius: 12,
+        borderWidth: 1,
+        flexDirection: "row",
+        gap: 12,
+        marginBottom: 8,
+        minHeight: 68,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+    },
+    viewerAttachmentIcon: {
+        alignItems: "center",
+        borderRadius: 9,
+        height: 48,
+        justifyContent: "center",
+        width: 42,
+    },
+    viewerAttachmentType: {
+        fontSize: 9,
+        fontWeight: "800",
+        letterSpacing: 0.4,
+    },
     nativeEditor: {
         minHeight: 320,
     },

package/dist/toolbar.d.ts

@@ -24,6 +24,6 @@ export declare const createOpenEditorNativeToolbarItems: ({ canUndo, canRedo, }?
 export declare const openEditorNativeToolbarItems: readonly EditorToolbarItem[];
 export declare const nativeToolbarParityCoverage: () => {
     missingBlockControls: string[];
-    missingMarkControls: ("bold" | "italic" | "underline" | "strike" | "link" | "code")[];
+    missingMarkControls: ("bold" | "link" | "strike" | "italic" | "underline" | "code")[];
 };
 export declare const defaultDocumentForToolbarAction: (key: string) => ProseMirrorDocument | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeditor/native",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "type": "module",
   "sideEffects": false,
   "repository": {
@@ -26,15 +26,18 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
+    "@expo/ui": "~56.0.18",
     "@expo/vector-icons": "15.0.3",
-    "@openeditor/core": "0.0.24",
-    "@openeditor/exporters": "0.0.24",
-    "@openeditor/extensions": "0.0.24",
+    "@openeditor/core": "0.0.25",
+    "@openeditor/exporters": "0.0.25",
+    "@openeditor/extensions": "0.0.25",
+    "emojibase": "17.0.0",
+    "emojibase-data": "16.0.2",
     "react": "19.2.3",
     "react-native": "0.85.3"
   },
   "peerDependencies": {
-    "@openeditor/react-native-prose-editor": "0.0.24",
+    "@openeditor/react-native-prose-editor": "0.0.25",
     "react-native-keyboard-controller": ">=1.21",
     "react": ">=19",
     "react-native": ">=0.85"