@ecsplico/editor 2.1.2 → 3.0.0

package/dist/react/EditorToolbar.js

@@ -1,13 +1,12 @@
-import { abilitiesAtSelection } from "../core/abilities.js";
-import { mergeToolbarGroups } from "../core/toolbar.js";
-import { contributions } from "../core/define-editor.js";
 import { borrowedFeatureContext, editorEntryOf } from "../core/editor-ui.js";
+import { commandState, toolbarOf } from "../core/commands.js";
 import { useEditorContext } from "./context.js";
 import { useEditorI18n } from "./use-editor-i18n.js";
 import { cn } from "./ui/utils.js";
 import { Icon } from "./Icon.js";
 import { useStore } from "./use-store.js";
 import { Button } from "./ui/button.js";
+import { shortcutLabel } from "./key-labels.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./ui/dropdown-menu.js";
 import { Separator } from "./ui/separator.js";
@@ -15,7 +14,11 @@ import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEditorState } from "@tiptap/react";
 //#region src/react/EditorToolbar.tsx
-const NO_ABILITIES = /* @__PURE__ */ new Set();
+const NO_EDITOR = {
+	visible: true,
+	enabled: false,
+	active: false
+};
 const built = /* @__PURE__ */ new WeakMap();
 function groupsOf(ctx, preset) {
 	if (!preset) return [];
@@ -23,25 +26,17 @@ function groupsOf(ctx, preset) {
 	if (!byPreset) built.set(ctx, byPreset = /* @__PURE__ */ new WeakMap());
 	const cached = byPreset.get(preset);
 	if (cached) return cached;
-	const groups = mergeToolbarGroups(contributions(preset, "toolbar").flatMap((factory) => factory(ctx)));
+	const groups = toolbarOf(preset, ctx);
 	byPreset.set(preset, groups);
 	return groups;
 }
-const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
-const KEY_LABELS = {
-	meta: isMac ? "⌘" : "Ctrl",
-	ctrl: "Ctrl",
-	alt: isMac ? "⌥" : "Alt",
-	shift: "⇧",
-	enter: "↵"
-};
 /**
 * The toolbar of an editor, placed anywhere on the page. `editor` is the instance it works on (from the surface's
-* `onReady`); the preset registered for that instance supplies the groups, `preset` renders them (disabled) while
-* there is no editor yet. A destroyed editor counts as none: a host still holds the old instance for the render in
-* which its keyed surface remounts. Never reads a global active editor.
+* `onReady`); the preset registered for that instance (`editorEntryOf`) supplies the groups. Without an editor (not
+* mounted yet, or read-only by the host's choice) it renders no groups. A destroyed editor counts as none: a host still
+* holds the old instance for the render in which its keyed surface remounts. Never reads a global active editor.
 */
-function EditorToolbar({ editor: given, preset }) {
+function EditorToolbar({ editor: given }) {
 	const editor = given?.isDestroyed ? void 0 : given;
 	const app = useEditorContext();
 	const { t } = useEditorI18n();
@@ -56,22 +51,19 @@ function EditorToolbar({ editor: given, preset }) {
 		};
 	});
 	state.ref.current = editor;
-	useStore(app.settings);
-	const abilities = useEditorState({
+	useEditorState({
 		editor: editor ?? null,
-		selector: ({ editor: current }) => current && !current.isDestroyed ? abilitiesAtSelection(current) : NO_ABILITIES,
+		selector: ({ editor: current }) => current && !current.isDestroyed ? current.state : null,
 		equalityFn: () => false
-	}) ?? NO_ABILITIES;
-	const groups = groupsOf(state.ctx, editorEntryOf(editor)?.preset ?? preset).filter((group) => !editor || !group.visible || group.visible(editor)).map((group) => ({
+	});
+	useStore(app.settings);
+	const groups = groupsOf(state.ctx, editorEntryOf(editor)?.preset).filter((group) => !editor || !group.visible || group.visible(editor)).map((group) => ({
 		group,
-		items: group.items.filter((item) => !editor || !item.visible || item.visible(editor))
+		items: group.items.map((item) => ({
+			item,
+			state: editor ? commandState(editor, item, "selection") : NO_EDITOR
+		})).filter(({ state: itemState }) => itemState.visible)
 	})).filter(({ items }) => items.length > 0);
-	const active = (item) => !!editor && !!item.active?.(editor);
-	const disabled = (item) => {
-		if (!editor) return true;
-		if (item.disabled?.(editor)) return true;
-		return !active(item) && !!item.ability && !abilities.has(item.ability);
-	};
 	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
 		className: "flex flex-wrap items-center gap-1.5",
 		role: "toolbar",
@@ -83,27 +75,27 @@ function EditorToolbar({ editor: given, preset }) {
 				className: "mx-2 h-6 data-[orientation=vertical]:h-6"
 			}), /* @__PURE__ */ jsx("div", {
 				className: "flex items-center gap-0.5",
-				children: items.map((item) => item.component ? /* @__PURE__ */ jsx(item.component, { editor }, item.id) : /* @__PURE__ */ jsx(ToolbarButton, {
+				children: items.map(({ item, state }) => "component" in item ? /* @__PURE__ */ jsx(item.component, { editor }, item.id) : /* @__PURE__ */ jsx(ToolbarButton, {
 					item,
 					editor,
-					active: active(item),
-					disabled: disabled(item)
+					state
 				}, item.id))
 			})]
 		}, group.id))
 	}) });
 }
-function ToolbarButton({ item, editor, active, disabled }) {
+function ToolbarButton({ item, editor, state }) {
+	const { active, enabled } = state;
 	const button = /* @__PURE__ */ jsx(Button, {
 		variant: "ghost",
 		size: "icon-sm",
 		"aria-label": item.label,
 		"aria-pressed": item.active ? active : void 0,
 		"data-state": item.active ? active ? "on" : "off" : void 0,
-		disabled,
+		disabled: !enabled,
 		className: cn(active && "bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary"),
 		onMouseDown: (event) => event.preventDefault(),
-		onClick: item.run && editor ? () => item.run(editor) : void 0,
+		onClick: "run" in item && editor ? () => item.run(editor) : void 0,
 		children: /* @__PURE__ */ jsx(Icon, { name: item.icon })
 	});
 	const tooltip = (trigger) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
@@ -112,9 +104,9 @@ function ToolbarButton({ item, editor, active, disabled }) {
 	}), /* @__PURE__ */ jsxs(TooltipContent, { children: [item.label, item.kbds && item.kbds.length > 0 && /* @__PURE__ */ jsx("kbd", {
 		"data-slot": "kbd",
 		className: "rounded-sm bg-background/20 px-1 font-sans",
-		children: item.kbds.map((key) => KEY_LABELS[key] ?? key.toUpperCase()).join("+")
+		children: shortcutLabel(item.kbds)
 	})] })] });
-	if (!item.menu) return tooltip(button);
+	if (!("menu" in item)) return tooltip(button);
 	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [tooltip(/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 		asChild: true,
 		children: button

package/dist/react/EditorToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbar.js","names":[],"sources":["../../src/react/EditorToolbar.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEditorState } from '@tiptap/react'\nimport { type ComponentType, type ReactNode, useState } from 'react'\nimport { abilitiesAtSelection } from '../core/abilities'\nimport { contributions } from '../core/define-editor'\nimport { borrowedFeatureContext, editorEntryOf } from '../core/editor-ui'\nimport type { FeatureContext } from '../core/feature'\nimport type { Ability } from '../core/schema/abilities'\nimport { mergeToolbarGroups, type MenuItem, type ToolbarGroup, type ToolbarItem } from '../core/toolbar'\nimport { useEditorContext } from './context'\nimport type { ReactPreset } from './EditorSurface'\nimport { Icon } from './Icon'\nimport { Button } from './ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from './ui/dropdown-menu'\nimport { Separator } from './ui/separator'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip'\nimport { useEditorI18n } from './use-editor-i18n'\nimport { useStore } from './use-store'\nimport { cn } from './ui/utils'\n\ntype ItemComponent = ComponentType<{ editor: Editor }>\ntype Item = ToolbarItem<ItemComponent>\ntype Group = ToolbarGroup<ItemComponent>\n\nconst NO_ABILITIES: ReadonlySet<Ability> = new Set()\n\n// Factories are plain functions here (React features must not call hooks in them): built once per preset, app-wide,\n// keyed by the toolbar's `ctx` so each toolbar's items delegate to its own editor.\nconst built = new WeakMap<FeatureContext, WeakMap<ReactPreset, Group[]>>()\nfunction groupsOf(ctx: FeatureContext, preset: ReactPreset | undefined): Group[] {\n  if (!preset) return []\n  let byPreset = built.get(ctx)\n  if (!byPreset) built.set(ctx, byPreset = new WeakMap())\n  const cached = byPreset.get(preset)\n  if (cached) return cached\n  const groups = mergeToolbarGroups(contributions(preset, 'toolbar').flatMap(factory => factory(ctx)))\n  byPreset.set(preset, groups)\n  return groups\n}\n\nconst isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform)\nconst KEY_LABELS: Record<string, string> = {\n  meta: isMac ? '⌘' : 'Ctrl',\n  ctrl: 'Ctrl',\n  // i18n-ignore: keyboard key name, shown as on the keycap\n  alt: isMac ? '⌥' : 'Alt',\n  shift: '⇧',\n  enter: '↵',\n}\n\n/**\n * The toolbar of an editor, placed anywhere on the page. `editor` is the instance it works on (from the surface's\n * `onReady`); the preset registered for that instance supplies the groups, `preset` renders them (disabled) while\n * there is no editor yet. A destroyed editor counts as none: a host still holds the old instance for the render in\n * which its keyed surface remounts. Never reads a global active editor.\n */\nexport function EditorToolbar({ editor: given, preset }: { editor?: Editor, preset?: ReactPreset }) {\n  const editor = given?.isDestroyed ? undefined : given\n  const app = useEditorContext()\n  const { t } = useEditorI18n()\n\n  // The context toolbar factories see: settings and fetch of the app, everything per-surface delegates to the editor's\n  // registered context while there is one. Built once; `ref` keeps it pointing at the current editor.\n  const [state] = useState(() => {\n    const ref: { current: Editor | undefined } = { current: editor }\n    return { ref, ctx: borrowedFeatureContext({ app, getEditor: () => ref.current }) }\n  })\n  state.ref.current = editor\n\n  // `active`/`visible`/`menu` may read the settings: re-render when they change.\n  useStore(app.settings)\n  // `active`, `can()` and the abilities read the editor state: re-render on every transaction.\n  const abilities = useEditorState({\n    editor: editor ?? null,\n    selector: ({ editor: current }) => current && !current.isDestroyed ? abilitiesAtSelection(current) : NO_ABILITIES,\n    equalityFn: () => false,\n  }) ?? NO_ABILITIES\n\n  const groups = groupsOf(state.ctx, (editorEntryOf(editor)?.preset as ReactPreset | undefined) ?? preset)\n    .filter(group => !editor || !group.visible || group.visible(editor))\n    .map(group => ({ group, items: group.items.filter(item => !editor || !item.visible || item.visible(editor)) }))\n    .filter(({ items }) => items.length > 0)\n\n  const active = (item: Item) => !!editor && !!item.active?.(editor)\n  const disabled = (item: Item) => {\n    if (!editor) return true\n    if (item.disabled?.(editor)) return true\n    return !active(item) && !!item.ability && !abilities.has(item.ability)\n  }\n\n  return (\n    <TooltipProvider>\n      <div className=\"flex flex-wrap items-center gap-1.5\" role=\"toolbar\" aria-label={t('toolbar.label')}>\n        {groups.map(({ group, items }, index) => (\n          <div key={group.id} className=\"contents\">\n            {index > 0 && <Separator orientation=\"vertical\" className=\"mx-2 h-6 data-[orientation=vertical]:h-6\" />}\n            <div className=\"flex items-center gap-0.5\">\n              {items.map(item => item.component\n                ? <item.component key={item.id} editor={editor!} />\n                : <ToolbarButton\n                    key={item.id}\n                    item={item}\n                    editor={editor}\n                    active={active(item)}\n                    disabled={disabled(item)}\n                  />)}\n            </div>\n          </div>\n        ))}\n      </div>\n    </TooltipProvider>\n  )\n}\n\nfunction ToolbarButton({ item, editor, active, disabled }: { item: Item, editor: Editor | undefined, active: boolean, disabled: boolean }) {\n  const button = (\n    <Button\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      aria-label={item.label}\n      aria-pressed={item.active ? active : undefined}\n      data-state={item.active ? (active ? 'on' : 'off') : undefined}\n      disabled={disabled}\n      className={cn(active && 'bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary')}\n      onMouseDown={event => event.preventDefault()}\n      onClick={item.run && editor ? () => item.run!(editor) : undefined}\n    >\n      <Icon name={item.icon} />\n    </Button>\n  )\n  const tooltip = (trigger: ReactNode) => (\n    <Tooltip>\n      <TooltipTrigger asChild>{trigger}</TooltipTrigger>\n      <TooltipContent>\n        {item.label}\n        {item.kbds && item.kbds.length > 0 && (\n          <kbd data-slot=\"kbd\" className=\"rounded-sm bg-background/20 px-1 font-sans\">{item.kbds.map(key => KEY_LABELS[key] ?? key.toUpperCase()).join('+')}</kbd>\n        )}\n      </TooltipContent>\n    </Tooltip>\n  )\n  if (!item.menu) return tooltip(button)\n  return (\n    <DropdownMenu>\n      {tooltip(<DropdownMenuTrigger asChild>{button}</DropdownMenuTrigger>)}\n      <DropdownMenuContent align=\"start\">\n        {editor && item.menu(editor).map((entry, index) => <MenuRow key={index} entry={entry} />)}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\nfunction MenuRow({ entry }: { entry: MenuItem }) {\n  if (entry.type === 'label') return <DropdownMenuLabel>{entry.label}</DropdownMenuLabel>\n  if (entry.type === 'separator') return <DropdownMenuSeparator />\n  return (\n    <DropdownMenuItem disabled={entry.disabled} onSelect={() => entry.onSelect?.()}>\n      {entry.icon && <Icon name={entry.icon} />}\n      <span>{entry.label}</span>\n      {entry.description && <span className=\"ml-auto text-xs text-muted-foreground\">{entry.description}</span>}\n    </DropdownMenuItem>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"EditorToolbar.js","names":[],"sources":["../../src/react/EditorToolbar.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEditorState } from '@tiptap/react'\nimport { type ComponentType, type ReactNode, useState } from 'react'\nimport { type CommandDef, type CommandState, commandState, type MenuItem, type PlacedToolbarGroup, toolbarOf } from '../core/commands'\nimport { borrowedFeatureContext, editorEntryOf } from '../core/editor-ui'\nimport type { FeatureContext } from '../core/feature'\nimport { useEditorContext } from './context'\nimport type { ReactPreset } from './EditorSurface'\nimport { Icon } from './Icon'\nimport { Button } from './ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from './ui/dropdown-menu'\nimport { Separator } from './ui/separator'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip'\nimport { shortcutLabel } from './key-labels'\nimport { useEditorI18n } from './use-editor-i18n'\nimport { useStore } from './use-store'\nimport { cn } from './ui/utils'\n\ntype ItemComponent = ComponentType<{ editor: Editor }>\ntype Item = CommandDef<ItemComponent>\ntype Group = PlacedToolbarGroup<ItemComponent>\n\nconst NO_EDITOR: CommandState = { visible: true, enabled: false, active: false }\n\n// Factories are plain functions here (React features must not call hooks in them): built once per preset, app-wide,\n// keyed by the toolbar's `ctx` so each toolbar's items delegate to its own editor.\nconst built = new WeakMap<FeatureContext, WeakMap<ReactPreset, Group[]>>()\nfunction groupsOf(ctx: FeatureContext, preset: ReactPreset | undefined): Group[] {\n  if (!preset) return []\n  let byPreset = built.get(ctx)\n  if (!byPreset) built.set(ctx, byPreset = new WeakMap())\n  const cached = byPreset.get(preset)\n  if (cached) return cached\n  const groups = toolbarOf(preset, ctx)\n  byPreset.set(preset, groups)\n  return groups\n}\n\n/**\n * The toolbar of an editor, placed anywhere on the page. `editor` is the instance it works on (from the surface's\n * `onReady`); the preset registered for that instance (`editorEntryOf`) supplies the groups. Without an editor (not\n * mounted yet, or read-only by the host's choice) it renders no groups. A destroyed editor counts as none: a host still\n * holds the old instance for the render in which its keyed surface remounts. Never reads a global active editor.\n */\nexport function EditorToolbar({ editor: given }: { editor?: Editor }) {\n  const editor = given?.isDestroyed ? undefined : given\n  const app = useEditorContext()\n  const { t } = useEditorI18n()\n\n  // The context toolbar factories see: settings and fetch of the app, everything per-surface delegates to the editor's\n  // registered context while there is one. Built once; `ref` keeps it pointing at the current editor.\n  const [state] = useState(() => {\n    const ref: { current: Editor | undefined } = { current: editor }\n    return { ref, ctx: borrowedFeatureContext({ app, getEditor: () => ref.current }) }\n  })\n  state.ref.current = editor\n\n  // `active`, `can()` and the abilities read the editor state: re-render on every transaction.\n  useEditorState({\n    editor: editor ?? null,\n    selector: ({ editor: current }) => current && !current.isDestroyed ? current.state : null,\n    equalityFn: () => false,\n  })\n  // `active`/`visible`/`menu` may read the settings: re-render when they change.\n  useStore(app.settings)\n\n  // Every enabled/visible/active state comes from `commandState`.\n  const groups = groupsOf(state.ctx, editorEntryOf(editor)?.preset as ReactPreset | undefined)\n    .filter(group => !editor || !group.visible || group.visible(editor))\n    .map(group => ({\n      group,\n      items: group.items\n        .map(item => ({ item, state: editor ? commandState(editor, item, 'selection') : NO_EDITOR }))\n        .filter(({ state: itemState }) => itemState.visible),\n    }))\n    .filter(({ items }) => items.length > 0)\n\n  return (\n    <TooltipProvider>\n      <div className=\"flex flex-wrap items-center gap-1.5\" role=\"toolbar\" aria-label={t('toolbar.label')}>\n        {groups.map(({ group, items }, index) => (\n          <div key={group.id} className=\"contents\">\n            {index > 0 && <Separator orientation=\"vertical\" className=\"mx-2 h-6 data-[orientation=vertical]:h-6\" />}\n            <div className=\"flex items-center gap-0.5\">\n              {items.map(({ item, state }) => 'component' in item\n                ? <item.component key={item.id} editor={editor!} />\n                : <ToolbarButton\n                    key={item.id}\n                    item={item}\n                    editor={editor}\n                    state={state}\n                  />)}\n            </div>\n          </div>\n        ))}\n      </div>\n    </TooltipProvider>\n  )\n}\n\nfunction ToolbarButton({ item, editor, state }: { item: Item, editor: Editor | undefined, state: CommandState }) {\n  const { active, enabled } = state\n  const button = (\n    <Button\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      aria-label={item.label}\n      aria-pressed={item.active ? active : undefined}\n      data-state={item.active ? (active ? 'on' : 'off') : undefined}\n      disabled={!enabled}\n      className={cn(active && 'bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary')}\n      onMouseDown={event => event.preventDefault()}\n      onClick={'run' in item && editor ? () => item.run(editor) : undefined}\n    >\n      <Icon name={item.icon} />\n    </Button>\n  )\n  const tooltip = (trigger: ReactNode) => (\n    <Tooltip>\n      <TooltipTrigger asChild>{trigger}</TooltipTrigger>\n      <TooltipContent>\n        {item.label}\n        {item.kbds && item.kbds.length > 0 && (\n          <kbd data-slot=\"kbd\" className=\"rounded-sm bg-background/20 px-1 font-sans\">{shortcutLabel(item.kbds)}</kbd>\n        )}\n      </TooltipContent>\n    </Tooltip>\n  )\n  if (!('menu' in item)) return tooltip(button)\n  return (\n    <DropdownMenu>\n      {tooltip(<DropdownMenuTrigger asChild>{button}</DropdownMenuTrigger>)}\n      <DropdownMenuContent align=\"start\">\n        {editor && item.menu(editor).map((entry, index) => <MenuRow key={index} entry={entry} />)}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\nfunction MenuRow({ entry }: { entry: MenuItem }) {\n  if (entry.type === 'label') return <DropdownMenuLabel>{entry.label}</DropdownMenuLabel>\n  if (entry.type === 'separator') return <DropdownMenuSeparator />\n  return (\n    <DropdownMenuItem disabled={entry.disabled} onSelect={() => entry.onSelect?.()}>\n      {entry.icon && <Icon name={entry.icon} />}\n      <span>{entry.label}</span>\n      {entry.description && <span className=\"ml-auto text-xs text-muted-foreground\">{entry.description}</span>}\n    </DropdownMenuItem>\n  )\n}\n"],"mappings":"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"}

package/dist/react/SimpleEditor.d.ts

@@ -1,27 +1,26 @@
-import { AbilitiesOptions, SlashCommandItem } from "../core/extension-points.js";
-import { EditorMetadata, MetadataItem } from "../core/metadata-types.js";
-import { AnyExtension, Editor, JSONContent } from "@tiptap/core";
+import { EditorSurfaceHandle, EditorSurfaceProps, ReactFeature, ReactPreset } from "./EditorSurface.js";
 //#region src/react/SimpleEditor.d.ts
-export interface SimpleEditorProps {
-  /** TipTap JSON, with `onChange`; the editor keeps its own undo history. Content outside the simple schema is rejected through `onContentError`. */
-  value?: JSONContent;
-  onChange?: (content: JSONContent) => void;
-  editable?: boolean;
-  /** Host lists (custom `@`/`#`-style sources); the simple editor has no built-in lists. */
-  metadata?: EditorMetadata;
-  /** Deep-merged into the ability defaults; read once at mount. */
-  abilities?: Partial<AbilitiesOptions>;
-  /** Added after the built-in extensions; read once at mount. */
-  extensions?: AnyExtension[];
-  /** Builds the `/` menu from the defaults (none in the simple editor); absent = no `/` menu. Read once at mount. */
-  slashCommands?: (defaults: SlashCommandItem[]) => SlashCommandItem[];
-  onReady?: (editor: Editor) => void;
-  onMetadataCreate?: (list: string, item: MetadataItem) => void;
-  onContentError?: (error: Error) => void;
+/**
+ * Props of the simple editor: those of the surface except the preset (`value`/`onChange`, `editable`, `metadata`,
+ * `abilities`, `extensions`, `commands`, `onReady`, ...) plus `add`.
+ */
+export interface SimpleEditorProps extends Omit<EditorSurfaceProps, 'preset'> {
+  /**
+   * Host features appended after `core-content` and `core-ui` (an own block, or the AI feature from `/ai/react` for the
+   * AI sidebar); read once at mount. Only what the host imports is in the bundle: for the composition dimensions
+   * (`content`, `interaction`, `ai`, `remove`, `backend`) use `AdvancedEditor`.
+   */
+  add?: readonly ReactFeature[];
 }
-/** The simple editor (core feature only: formatting, headings, lists, quotes, code, undo/redo); no backend, no AI. */
-export declare const SimpleEditor: import("react").ForwardRefExoticComponent<SimpleEditorProps & import("react").RefAttributes<{
-  editor: Editor | null;
-}>>;
+/** The handle of the simple editor: the surface's (`editor`, `openSettings`) plus the preset it mounts. */
+export interface SimpleEditorHandle extends EditorSurfaceHandle {
+  readonly preset: ReactPreset;
+}
+/**
+ * The simple editor: `core-content` + `core-ui` (formatting, headings, lists, quotes, code, undo/redo; no backend, no
+ * AI) plus the features in `add`. It builds the preset directly (not through `composeEditor`, whose UI bindings import
+ * every catalog feature), so its bundle holds nothing else. Remount (`key`) to change `add`.
+ */
+export declare const SimpleEditor: import("react").ForwardRefExoticComponent<SimpleEditorProps & import("react").RefAttributes<SimpleEditorHandle>>;
 //#endregion
 //# sourceMappingURL=SimpleEditor.d.ts.map

package/dist/react/SimpleEditor.js

@@ -1,15 +1,29 @@
+import { defineEditor } from "../core/define-editor.js";
+import { coreContentFeature, coreUiFeature } from "../core/core-feature.js";
 import { EditorSurface } from "./EditorSurface.js";
-import { simpleEditor } from "../presets/simple.js";
+import { EditorCommandPalette } from "./EditorCommandPalette.js";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react/SimpleEditor.tsx
-/** The simple editor (core feature only: formatting, headings, lists, quotes, code, undo/redo); no backend, no AI. */
-const SimpleEditor = forwardRef(function SimpleEditor(props, ref) {
-	const [preset] = useState(simpleEditor);
+/**
+* The simple editor: `core-content` + `core-ui` (formatting, headings, lists, quotes, code, undo/redo; no backend, no
+* AI) plus the features in `add`. It builds the preset directly (not through `composeEditor`, whose UI bindings import
+* every catalog feature), so its bundle holds nothing else. Remount (`key`) to change `add`.
+*/
+const SimpleEditor = forwardRef(function SimpleEditor({ add, ...props }, ref) {
+	const [preset] = useState(() => defineEditor({ features: [
+		coreContentFeature(),
+		coreUiFeature({ palette: EditorCommandPalette }),
+		...add ?? []
+	] }));
 	const surface = useRef(null);
-	useImperativeHandle(ref, () => ({ get editor() {
-		return surface.current?.editor ?? null;
-	} }), []);
+	useImperativeHandle(ref, () => ({
+		get editor() {
+			return surface.current?.editor ?? null;
+		},
+		openSettings: (tab) => surface.current?.openSettings(tab),
+		preset
+	}), [preset]);
 	return /* @__PURE__ */ jsx(EditorSurface, {
 		ref: surface,
 		preset,

package/dist/react/SimpleEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleEditor.js","names":[],"sources":["../../src/react/SimpleEditor.tsx"],"sourcesContent":["import type { AnyExtension, Editor, JSONContent } from '@tiptap/core'\nimport { forwardRef, useImperativeHandle, useRef, useState } from 'react'\nimport type { AbilitiesOptions, SlashCommandItem } from '../core/extension-points'\nimport type { EditorMetadata, MetadataItem } from '../core/metadata-types'\nimport { simpleEditor } from '../presets/simple'\nimport { EditorSurface, type EditorSurfaceHandle } from './EditorSurface'\n\nexport interface SimpleEditorProps {\n  /** TipTap JSON, with `onChange`; the editor keeps its own undo history. Content outside the simple schema is rejected through `onContentError`. */\n  value?: JSONContent\n  onChange?: (content: JSONContent) => void\n  editable?: boolean\n  /** Host lists (custom `@`/`#`-style sources); the simple editor has no built-in lists. */\n  metadata?: EditorMetadata\n  /** Deep-merged into the ability defaults; read once at mount. */\n  abilities?: Partial<AbilitiesOptions>\n  /** Added after the built-in extensions; read once at mount. */\n  extensions?: AnyExtension[]\n  /** Builds the `/` menu from the defaults (none in the simple editor); absent = no `/` menu. Read once at mount. */\n  slashCommands?: (defaults: SlashCommandItem[]) => SlashCommandItem[]\n  onReady?: (editor: Editor) => void\n  onMetadataCreate?: (list: string, item: MetadataItem) => void\n  onContentError?: (error: Error) => void\n}\n\n/** The simple editor (core feature only: formatting, headings, lists, quotes, code, undo/redo); no backend, no AI. */\nexport const SimpleEditor = forwardRef<{ editor: Editor | null }, SimpleEditorProps>(function SimpleEditor(props, ref) {\n  const [preset] = useState(simpleEditor)\n  const surface = useRef<EditorSurfaceHandle>(null)\n  useImperativeHandle(ref, () => ({ get editor() { return surface.current?.editor ?? null } }), [])\n  return <EditorSurface ref={surface} preset={preset} {...props} />\n})\n"],"mappings":";;;;;;AA0BA,MAAa,eAAe,WAAyD,SAAS,aAAa,OAAO,KAAK;CACrH,MAAM,CAAC,UAAU,SAAS,YAAY;CACtC,MAAM,UAAU,OAA4B,IAAI;CAChD,oBAAoB,YAAY,EAAE,IAAI,SAAS;EAAE,OAAO,QAAQ,SAAS,UAAU;CAAK,EAAE,IAAI,CAAC,CAAC;CAChG,OAAO,oBAAC,eAAD;EAAe,KAAK;EAAiB;EAAQ,GAAI;CAAQ,CAAA;AAClE,CAAC"}
+{"version":3,"file":"SimpleEditor.js","names":[],"sources":["../../src/react/SimpleEditor.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport type { ComponentType } from 'react'\nimport { forwardRef, useImperativeHandle, useRef, useState } from 'react'\nimport { coreContentFeature, coreUiFeature } from '../core/core-feature'\nimport { defineEditor } from '../core/define-editor'\nimport { EditorCommandPalette } from './EditorCommandPalette'\nimport { EditorSurface, type EditorSurfaceHandle, type EditorSurfaceProps, type ReactFeature, type ReactPreset } from './EditorSurface'\n\n/**\n * Props of the simple editor: those of the surface except the preset (`value`/`onChange`, `editable`, `metadata`,\n * `abilities`, `extensions`, `commands`, `onReady`, ...) plus `add`.\n */\nexport interface SimpleEditorProps extends Omit<EditorSurfaceProps, 'preset'> {\n  /**\n   * Host features appended after `core-content` and `core-ui` (an own block, or the AI feature from `/ai/react` for the\n   * AI sidebar); read once at mount. Only what the host imports is in the bundle: for the composition dimensions\n   * (`content`, `interaction`, `ai`, `remove`, `backend`) use `AdvancedEditor`.\n   */\n  add?: readonly ReactFeature[]\n}\n\n/** The handle of the simple editor: the surface's (`editor`, `openSettings`) plus the preset it mounts. */\nexport interface SimpleEditorHandle extends EditorSurfaceHandle {\n  readonly preset: ReactPreset\n}\n\n/**\n * The simple editor: `core-content` + `core-ui` (formatting, headings, lists, quotes, code, undo/redo; no backend, no\n * AI) plus the features in `add`. It builds the preset directly (not through `composeEditor`, whose UI bindings import\n * every catalog feature), so its bundle holds nothing else. Remount (`key`) to change `add`.\n */\nexport const SimpleEditor = forwardRef<SimpleEditorHandle, SimpleEditorProps>(function SimpleEditor({ add, ...props }, ref) {\n  const [preset] = useState(() => defineEditor({ features: [coreContentFeature(), coreUiFeature<ComponentType<{ editor: Editor }>>({ palette: EditorCommandPalette }), ...(add ?? [])] }))\n  const surface = useRef<EditorSurfaceHandle>(null)\n  useImperativeHandle(ref, () => ({\n    get editor() { return surface.current?.editor ?? null },\n    openSettings: tab => surface.current?.openSettings(tab),\n    preset,\n  }), [preset])\n  return <EditorSurface ref={surface} preset={preset} {...props} />\n})\n"],"mappings":";;;;;;;;;;;;AA+BA,MAAa,eAAe,WAAkD,SAAS,aAAa,EAAE,KAAK,GAAG,SAAS,KAAK;CAC1H,MAAM,CAAC,UAAU,eAAe,aAAa,EAAE,UAAU;EAAC,mBAAmB;EAAG,cAAiD,EAAE,SAAS,qBAAqB,CAAC;EAAG,GAAI,OAAO,CAAC;CAAE,EAAE,CAAC,CAAC;CACvL,MAAM,UAAU,OAA4B,IAAI;CAChD,oBAAoB,YAAY;EAC9B,IAAI,SAAS;GAAE,OAAO,QAAQ,SAAS,UAAU;EAAK;EACtD,eAAc,QAAO,QAAQ,SAAS,aAAa,GAAG;EACtD;CACF,IAAI,CAAC,MAAM,CAAC;CACZ,OAAO,oBAAC,eAAD;EAAe,KAAK;EAAiB;EAAQ,GAAI;CAAQ,CAAA;AAClE,CAAC"}

package/dist/react/advanced.d.ts

@@ -1,4 +1,5 @@
-import { AdvancedEditorOptions } from "../presets/advanced.js";
+import { ComposeOptions, ComposedEditor, ContentLevel, FeatureId, InteractionLevel, UiBindings } from "../presets/compose.js";
+import { ComposedEditorHandle } from "./composed-surface.js";
 import { AdvancedEditor, AdvancedEditorProps } from "./AdvancedEditor.js";
-import { advancedEditor } from "./advanced-preset.js";
-export { AdvancedEditor, type AdvancedEditorOptions, type AdvancedEditorProps, advancedEditor };
+import { advancedEditor, composeEditor } from "./compose.js";
+export { AdvancedEditor, type ComposedEditorHandle as AdvancedEditorHandle, type AdvancedEditorProps, type ComposeOptions, type ComposedEditor, type ContentLevel, type FeatureId, type InteractionLevel, type UiBindings, advancedEditor, composeEditor };

package/dist/react/advanced.js

@@ -1,3 +1,3 @@
-import { advancedEditor } from "./advanced-preset.js";
+import { advancedEditor, composeEditor } from "./compose.js";
 import { AdvancedEditor } from "./AdvancedEditor.js";
-export { AdvancedEditor, advancedEditor };
+export { AdvancedEditor, advancedEditor, composeEditor };

package/dist/react/compose.d.ts

@@ -0,0 +1,20 @@
+import { ComposeOptions, ComposedEditor } from "../presets/compose.js";
+import { Editor } from "@tiptap/core";
+import { ComponentType } from "react";
+//#region src/react/compose.d.ts
+type ReactComponent = ComponentType<{
+  editor: Editor;
+}>;
+/**
+ * `composeEditor` of `presets/compose` over the React bindings: the editor of the three dimensions (`content`,
+ * `interaction`, `ai`), pruned by the capabilities of `options.backend`.
+ */
+export declare const composeEditor: (options: ComposeOptions<ReactComponent>) => ComposedEditor<ReactComponent>;
+/**
+ * The advanced editor on the React surface: `{ content: 'rich', interaction: 'full', ai: true }`, every dimension option
+ * overridable (`compositeKinds`, `backend`, `add`, `remove`, ...), so the schema is the one of `advancedSchemaExtensions()`.
+ */
+export declare const advancedEditor: (options?: Partial<ComposeOptions<ReactComponent>>) => ComposedEditor<ReactComponent>;
+//#endregion
+export {};
+//# sourceMappingURL=compose.d.ts.map

package/dist/react/compose.js

@@ -0,0 +1,49 @@
+import { coreUiFeature } from "../core/core-feature.js";
+import { composeEditor as composeEditor$1 } from "../presets/compose.js";
+import { EditorCommandPalette } from "./EditorCommandPalette.js";
+import { aiFeature } from "../features/ai/react.js";
+import { authorsFeature } from "../features/authors/react.js";
+import { blockUiFeature } from "../features/block-ui/react.js";
+import { collabFeature } from "../features/collab/react.js";
+import { commentsFeature } from "../features/comments/react.js";
+import { compositeFeature } from "../features/composites/react.js";
+import { mediaFeature } from "../features/media/react.js";
+import { themesFeature } from "../features/themes/react.js";
+import { transcriptFeature } from "../features/transcript/react.js";
+import { compositeAiFeature } from "../integrations/composite-ai/index.js";
+import { transcriptAiFeature } from "../integrations/transcript-ai/index.js";
+//#region src/react/compose.ts
+/** The React bindings of every UI-bound catalog feature. */
+const REACT_BINDINGS = {
+	"core-ui": () => coreUiFeature({ palette: EditorCommandPalette }),
+	"media": mediaFeature,
+	"transcript": transcriptFeature,
+	"composites": compositeFeature,
+	"authors": authorsFeature,
+	"comments": commentsFeature,
+	"ai": aiFeature,
+	"composite-ai": compositeAiFeature,
+	"transcript-ai": transcriptAiFeature,
+	"collab": collabFeature,
+	"block-ui": blockUiFeature,
+	"themes": themesFeature
+};
+/**
+* `composeEditor` of `presets/compose` over the React bindings: the editor of the three dimensions (`content`,
+* `interaction`, `ai`), pruned by the capabilities of `options.backend`.
+*/
+const composeEditor = (options) => composeEditor$1(REACT_BINDINGS, options);
+/**
+* The advanced editor on the React surface: `{ content: 'rich', interaction: 'full', ai: true }`, every dimension option
+* overridable (`compositeKinds`, `backend`, `add`, `remove`, ...), so the schema is the one of `advancedSchemaExtensions()`.
+*/
+const advancedEditor = (options = {}) => composeEditor({
+	content: "rich",
+	interaction: "full",
+	ai: true,
+	...options
+});
+//#endregion
+export { advancedEditor, composeEditor };
+
+//# sourceMappingURL=compose.js.map

package/dist/react/compose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compose.js","names":["compose"],"sources":["../../src/react/compose.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport type { ComponentType } from 'react'\nimport { coreUiFeature } from '../core/core-feature'\nimport { EditorCommandPalette } from './EditorCommandPalette'\nimport { aiFeature } from '../features/ai/react'\nimport { authorsFeature } from '../features/authors/react'\nimport { blockUiFeature } from '../features/block-ui/react'\nimport { collabFeature } from '../features/collab/react'\nimport { commentsFeature } from '../features/comments/react'\nimport { compositeFeature } from '../features/composites/react'\nimport { mediaFeature } from '../features/media/react'\nimport { themesFeature } from '../features/themes/react'\nimport { transcriptFeature } from '../features/transcript/react'\nimport { compositeAiFeature } from '../integrations/composite-ai'\nimport { transcriptAiFeature } from '../integrations/transcript-ai'\nimport { type ComposedEditor, type ComposeOptions, composeEditor as compose, type UiBindings } from '../presets/compose'\n\ntype ReactComponent = ComponentType<{ editor: Editor }>\n\n/** The React bindings of every UI-bound catalog feature. */\nconst REACT_BINDINGS = {\n  'core-ui': () => coreUiFeature<ReactComponent>({ palette: EditorCommandPalette }),\n  'media': mediaFeature,\n  'transcript': transcriptFeature,\n  'composites': compositeFeature,\n  'authors': authorsFeature,\n  'comments': commentsFeature,\n  'ai': aiFeature,\n  'composite-ai': compositeAiFeature,\n  'transcript-ai': transcriptAiFeature,\n  'collab': collabFeature,\n  'block-ui': blockUiFeature,\n  'themes': themesFeature,\n} satisfies UiBindings<ReactComponent>\n\n/**\n * `composeEditor` of `presets/compose` over the React bindings: the editor of the three dimensions (`content`,\n * `interaction`, `ai`), pruned by the capabilities of `options.backend`.\n */\nexport const composeEditor = (options: ComposeOptions<ReactComponent>): ComposedEditor<ReactComponent> => compose(REACT_BINDINGS, options)\n\n/**\n * The advanced editor on the React surface: `{ content: 'rich', interaction: 'full', ai: true }`, every dimension option\n * overridable (`compositeKinds`, `backend`, `add`, `remove`, ...), so the schema is the one of `advancedSchemaExtensions()`.\n */\nexport const advancedEditor = (options: Partial<ComposeOptions<ReactComponent>> = {}): ComposedEditor<ReactComponent> => composeEditor({ content: 'rich', interaction: 'full', ai: true, ...options })\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,iBAAiB;CACrB,iBAAiB,cAA8B,EAAE,SAAS,qBAAqB,CAAC;CAChF,SAAS;CACT,cAAc;CACd,cAAc;CACd,WAAW;CACX,YAAY;CACZ,MAAM;CACN,gBAAgB;CAChB,iBAAiB;CACjB,UAAU;CACV,YAAY;CACZ,UAAU;AACZ;;;;;AAMA,MAAa,iBAAiB,YAA4EA,gBAAQ,gBAAgB,OAAO;;;;;AAMzI,MAAa,kBAAkB,UAAmD,CAAC,MAAsC,cAAc;CAAE,SAAS;CAAQ,aAAa;CAAQ,IAAI;CAAM,GAAG;AAAQ,CAAC"}

package/dist/react/composed-surface.d.ts

@@ -0,0 +1,39 @@
+import { EditorBackend } from "../core/backend.js";
+import { EditorSurfaceHandle, EditorSurfaceProps, ReactFeature } from "./EditorSurface.js";
+import { CompositeKind } from "../features/composites/kinds.js";
+import { ComposedEditor, ContentLevel, FeatureId, InteractionLevel } from "../presets/compose.js";
+import { Editor } from "@tiptap/core";
+import { ComponentType } from "react";
+//#region src/react/composed-surface.d.ts
+/** The preset a composed editor mounts: the three dimensions' features, with `omitted` listing what the backend or `remove` dropped. */
+export type ReactComposedPreset = ComposedEditor<ComponentType<{
+  editor: Editor;
+}>>;
+/** The handle of a composed editor: the surface's (`editor`, `openSettings`) plus the preset it composed. */
+export interface ComposedEditorHandle extends EditorSurfaceHandle {
+  readonly preset: ReactComposedPreset;
+}
+/**
+ * The surface's own props (collaboration session or standalone `value`/`onChange`, metadata, abilities, extensions,
+ * block actions, commands, `documentId`, `editable`, `settingsUi`, the open state of the sidebar and comments margin,
+ * `onReady` and the other callbacks) except the preset, plus the composition. Every composition prop is read once at
+ * mount; hosts remount (`key`) to change one.
+ */
+export interface ComposedEditorProps extends Omit<EditorSurfaceProps, 'preset'> {
+  /** Document model: a level or the content feature ids to install. */
+  content?: ContentLevel | readonly FeatureId[];
+  /** Editing UX: a level or the interaction feature ids; `[]` = no interaction (a viewer). */
+  interaction?: InteractionLevel | readonly FeatureId[];
+  /** Installs the AI feature and the integrations whose content is present. */
+  ai?: boolean;
+  /** Host features, appended after the catalog. */
+  add?: readonly ReactFeature[];
+  /** Features (catalog or host) left out, with the features that require them. */
+  remove?: readonly FeatureId[];
+  /** The backend the composition is pruned by (default: the editor context's backend). */
+  backend?: EditorBackend;
+  /** Composite kinds („Bausteine“) when `content` includes composites (default: `defaultCompositeKinds(t)`). */
+  compositeKinds?: readonly CompositeKind[];
+}
+//#endregion
+//# sourceMappingURL=composed-surface.d.ts.map

package/dist/react/composed-surface.js

@@ -0,0 +1,71 @@
+import { useEditorContext } from "./context.js";
+import { EditorSurface } from "./EditorSurface.js";
+import { composeEditor } from "./compose.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/composed-surface.tsx
+/** `EditorSurface` over an already composed preset; hands out the preset through the ref. */
+const ReadySurface = forwardRef(function ReadySurface({ preset, ...surface }, ref) {
+	const surfaceRef = useRef(null);
+	useImperativeHandle(ref, () => ({
+		get editor() {
+			return surfaceRef.current?.editor ?? null;
+		},
+		openSettings: (tab) => surfaceRef.current?.openSettings(tab),
+		preset
+	}), [preset]);
+	return /* @__PURE__ */ jsx(EditorSurface, {
+		ref: surfaceRef,
+		preset,
+		...surface
+	});
+});
+/**
+* `EditorSurface` over the preset `composeEditor` builds from the composition props, at mount. A backend that probes
+* its capabilities (`backend.ready`) is awaited first, so the composition is pruned by what it really offers; until
+* then nothing renders. Passing the host's own `collaboration` session keeps `collab` and `comments` whatever the
+* backend offers.
+*/
+const ComposedSurface = forwardRef(function ComposedSurface({ content, interaction, ai, add, remove, backend, compositeKinds, ...surface }, ref) {
+	const app = useEditorContext();
+	const [source] = useState(() => backend ?? app.backend);
+	const [compose] = useState(() => {
+		const options = {
+			content,
+			interaction,
+			ai,
+			collaboration: surface.collaboration !== void 0,
+			...compositeKinds && { compositeKinds },
+			...add && { add },
+			...remove && { remove }
+		};
+		return () => composeEditor({
+			...options,
+			backend: source
+		});
+	});
+	const [preset, setPreset] = useState(() => source.ready ? void 0 : compose());
+	useEffect(() => {
+		if (preset || !source.ready) return;
+		let live = true;
+		source.ready.then(() => {
+			if (live) setPreset(compose());
+		});
+		return () => {
+			live = false;
+		};
+	}, [
+		preset,
+		source,
+		compose
+	]);
+	return preset ? /* @__PURE__ */ jsx(ReadySurface, {
+		ref,
+		preset,
+		...surface
+	}) : null;
+});
+//#endregion
+export { ComposedSurface };
+
+//# sourceMappingURL=composed-surface.js.map

package/dist/react/composed-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composed-surface.js","names":[],"sources":["../../src/react/composed-surface.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { type ComponentType, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport type { EditorBackend } from '../core/backend'\nimport type { CompositeKind } from '../features/composites/kinds'\nimport type { ComposedEditor, ContentLevel, FeatureId, InteractionLevel } from '../presets/compose'\nimport { composeEditor } from './compose'\nimport { useEditorContext } from './context'\nimport { EditorSurface, type EditorSurfaceHandle, type EditorSurfaceProps, type ReactFeature } from './EditorSurface'\n\n/** The preset a composed editor mounts: the three dimensions' features, with `omitted` listing what the backend or `remove` dropped. */\nexport type ReactComposedPreset = ComposedEditor<ComponentType<{ editor: Editor }>>\n\n/** The handle of a composed editor: the surface's (`editor`, `openSettings`) plus the preset it composed. */\nexport interface ComposedEditorHandle extends EditorSurfaceHandle {\n  readonly preset: ReactComposedPreset\n}\n\n/**\n * The surface's own props (collaboration session or standalone `value`/`onChange`, metadata, abilities, extensions,\n * block actions, commands, `documentId`, `editable`, `settingsUi`, the open state of the sidebar and comments margin,\n * `onReady` and the other callbacks) except the preset, plus the composition. Every composition prop is read once at\n * mount; hosts remount (`key`) to change one.\n */\nexport interface ComposedEditorProps extends Omit<EditorSurfaceProps, 'preset'> {\n  /** Document model: a level or the content feature ids to install. */\n  content?: ContentLevel | readonly FeatureId[]\n  /** Editing UX: a level or the interaction feature ids; `[]` = no interaction (a viewer). */\n  interaction?: InteractionLevel | readonly FeatureId[]\n  /** Installs the AI feature and the integrations whose content is present. */\n  ai?: boolean\n  /** Host features, appended after the catalog. */\n  add?: readonly ReactFeature[]\n  /** Features (catalog or host) left out, with the features that require them. */\n  remove?: readonly FeatureId[]\n  /** The backend the composition is pruned by (default: the editor context's backend). */\n  backend?: EditorBackend\n  /** Composite kinds („Bausteine“) when `content` includes composites (default: `defaultCompositeKinds(t)`). */\n  compositeKinds?: readonly CompositeKind[]\n}\n\n/** `EditorSurface` over an already composed preset; hands out the preset through the ref. */\nconst ReadySurface = forwardRef<ComposedEditorHandle, Omit<EditorSurfaceProps, 'preset'> & { preset: ReactComposedPreset }>(function ReadySurface({ preset, ...surface }, ref) {\n  const surfaceRef = useRef<EditorSurfaceHandle>(null)\n  useImperativeHandle(ref, () => ({\n    get editor() { return surfaceRef.current?.editor ?? null },\n    openSettings: tab => surfaceRef.current?.openSettings(tab),\n    preset,\n  }), [preset])\n  return <EditorSurface ref={surfaceRef} preset={preset} {...surface} />\n})\n\n/**\n * `EditorSurface` over the preset `composeEditor` builds from the composition props, at mount. A backend that probes\n * its capabilities (`backend.ready`) is awaited first, so the composition is pruned by what it really offers; until\n * then nothing renders. Passing the host's own `collaboration` session keeps `collab` and `comments` whatever the\n * backend offers.\n */\nexport const ComposedSurface = forwardRef<ComposedEditorHandle, ComposedEditorProps & Required<Pick<ComposedEditorProps, 'content' | 'interaction' | 'ai'>>>(function ComposedSurface(\n  { content, interaction, ai, add, remove, backend, compositeKinds, ...surface },\n  ref,\n) {\n  const app = useEditorContext()\n  // Read once at mount, like every composition prop, although the preset may only be built after `backend.ready`.\n  const [source] = useState(() => backend ?? app.backend)\n  const [compose] = useState(() => {\n    const options = {\n      content,\n      interaction,\n      ai,\n      collaboration: surface.collaboration !== undefined,\n      ...(compositeKinds && { compositeKinds }),\n      ...(add && { add }),\n      ...(remove && { remove }),\n    }\n    return () => composeEditor({ ...options, backend: source })\n  })\n  const [preset, setPreset] = useState<ReactComposedPreset | undefined>(() => source.ready ? undefined : compose())\n  useEffect(() => {\n    if (preset || !source.ready) return\n    let live = true\n    void source.ready.then(() => { if (live) setPreset(compose()) })\n    return () => { live = false }\n  }, [preset, source, compose])\n  return preset ? <ReadySurface ref={ref} preset={preset} {...surface} /> : null\n})\n"],"mappings":";;;;;;;AAyCA,MAAM,eAAe,WAAuG,SAAS,aAAa,EAAE,QAAQ,GAAG,WAAW,KAAK;CAC7K,MAAM,aAAa,OAA4B,IAAI;CACnD,oBAAoB,YAAY;EAC9B,IAAI,SAAS;GAAE,OAAO,WAAW,SAAS,UAAU;EAAK;EACzD,eAAc,QAAO,WAAW,SAAS,aAAa,GAAG;EACzD;CACF,IAAI,CAAC,MAAM,CAAC;CACZ,OAAO,oBAAC,eAAD;EAAe,KAAK;EAAoB;EAAQ,GAAI;CAAU,CAAA;AACvE,CAAC;;;;;;;AAQD,MAAa,kBAAkB,WAA8H,SAAS,gBACpK,EAAE,SAAS,aAAa,IAAI,KAAK,QAAQ,SAAS,gBAAgB,GAAG,WACrE,KACA;CACA,MAAM,MAAM,iBAAiB;CAE7B,MAAM,CAAC,UAAU,eAAe,WAAW,IAAI,OAAO;CACtD,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,UAAU;GACd;GACA;GACA;GACA,eAAe,QAAQ,kBAAkB,KAAA;GACzC,GAAI,kBAAkB,EAAE,eAAe;GACvC,GAAI,OAAO,EAAE,IAAI;GACjB,GAAI,UAAU,EAAE,OAAO;EACzB;EACA,aAAa,cAAc;GAAE,GAAG;GAAS,SAAS;EAAO,CAAC;CAC5D,CAAC;CACD,MAAM,CAAC,QAAQ,aAAa,eAAgD,OAAO,QAAQ,KAAA,IAAY,QAAQ,CAAC;CAChH,gBAAgB;EACd,IAAI,UAAU,CAAC,OAAO,OAAO;EAC7B,IAAI,OAAO;EACX,OAAY,MAAM,WAAW;GAAE,IAAI,MAAM,UAAU,QAAQ,CAAC;EAAE,CAAC;EAC/D,aAAa;GAAE,OAAO;EAAM;CAC9B,GAAG;EAAC;EAAQ;EAAQ;CAAO,CAAC;CAC5B,OAAO,SAAS,oBAAC,cAAD;EAAmB;EAAa;EAAQ,GAAI;CAAU,CAAA,IAAI;AAC5E,CAAC"}

package/dist/react/context.js

@@ -9,13 +9,17 @@ function EditorContextProvider({ context, children }) {
 		children
 	});
 }
+/** The `EditorContext` of the nearest `EditorContextProvider`, or `null` outside one. */
+function useOptionalEditorContext() {
+	return useContext(Ctx);
+}
 /** The `EditorContext` of the nearest `EditorContextProvider`. */
 function useEditorContext() {
-	const context = useContext(Ctx);
+	const context = useOptionalEditorContext();
 	if (!context) throw new Error("@ecsplico/editor: no editor context; wrap the tree in <EditorContextProvider context={createEditorContext()}>");
 	return context;
 }
 //#endregion
-export { EditorContextProvider, useEditorContext };
+export { EditorContextProvider, useEditorContext, useOptionalEditorContext };
 
 //# sourceMappingURL=context.js.map

package/dist/react/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/react/context.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from 'react'\nimport type { EditorContext } from '../core/context'\n\nconst Ctx = createContext<EditorContext | null>(null)\n\n/** Makes `context` (from `createEditorContext()`) available to the editor components below. The host owns it and disposes it. */\nexport function EditorContextProvider({ context, children }: { context: EditorContext, children: ReactNode }) {\n  return <Ctx.Provider value={context}>{children}</Ctx.Provider>\n}\n\n/** The `EditorContext` of the nearest `EditorContextProvider`. */\nexport function useEditorContext(): EditorContext {\n  const context = useContext(Ctx)\n  if (!context) throw new Error('@ecsplico/editor: no editor context; wrap the tree in <EditorContextProvider context={createEditorContext()}>')\n  return context\n}\n"],"mappings":";;;AAGA,MAAM,MAAM,cAAoC,IAAI;;AAGpD,SAAgB,sBAAsB,EAAE,SAAS,YAA6D;CAC5G,OAAO,oBAAC,IAAI,UAAL;EAAc,OAAO;EAAU;CAAuB,CAAA;AAC/D;;AAGA,SAAgB,mBAAkC;CAChD,MAAM,UAAU,WAAW,GAAG;CAC9B,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,+GAA+G;CAC7I,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/react/context.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from 'react'\nimport type { EditorContext } from '../core/context'\n\nconst Ctx = createContext<EditorContext | null>(null)\n\n/** Makes `context` (from `createEditorContext()`) available to the editor components below. The host owns it and disposes it. */\nexport function EditorContextProvider({ context, children }: { context: EditorContext, children: ReactNode }) {\n  return <Ctx.Provider value={context}>{children}</Ctx.Provider>\n}\n\n/** The `EditorContext` of the nearest `EditorContextProvider`, or `null` outside one. */\nexport function useOptionalEditorContext(): EditorContext | null {\n  return useContext(Ctx)\n}\n\n/** The `EditorContext` of the nearest `EditorContextProvider`. */\nexport function useEditorContext(): EditorContext {\n  const context = useOptionalEditorContext()\n  if (!context) throw new Error('@ecsplico/editor: no editor context; wrap the tree in <EditorContextProvider context={createEditorContext()}>')\n  return context\n}\n"],"mappings":";;;AAGA,MAAM,MAAM,cAAoC,IAAI;;AAGpD,SAAgB,sBAAsB,EAAE,SAAS,YAA6D;CAC5G,OAAO,oBAAC,IAAI,UAAL;EAAc,OAAO;EAAU;CAAuB,CAAA;AAC/D;;AAGA,SAAgB,2BAAiD;CAC/D,OAAO,WAAW,GAAG;AACvB;;AAGA,SAAgB,mBAAkC;CAChD,MAAM,UAAU,yBAAyB;CACzC,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,+GAA+G;CAC7I,OAAO;AACT"}

package/dist/react/index.d.ts

@@ -1,5 +1,6 @@
 import { EditorSurface, EditorSurfaceHandle, EditorSurfaceProps, ReactFeature, ReactPreset } from "./EditorSurface.js";
 import { EditorContextProvider, useEditorContext } from "./context.js";
+import { EditorCommandPalette } from "./EditorCommandPalette.js";
 import { EditorSettingsModal } from "./EditorSettingsModal.js";
 import { EditorSettingsPanel } from "./EditorSettingsPanel.js";
 import { EditorToolbar } from "./EditorToolbar.js";
@@ -14,4 +15,4 @@ import { cn } from "./ui/utils.js";
 import { useNotifier } from "./use-notifier.js";
 import { useStore } from "./use-store.js";
 import { Toaster } from "sonner";
-export { EditorContextProvider, EditorSettingsModal, EditorSettingsPanel, EditorSurface, type EditorSurfaceHandle, type EditorSurfaceProps, EditorToolbar, EditorUiContext, Icon, type ReactFeature, type ReactPreset, SettingsSection, SuggestionList, type SuggestionListHandle, Toaster, cn, reactNotifier, reactSuggestionRenderer, useEditorContext, useEditorI18n, useEditorSettings, useEditorUi, useNotifier, useStore };
+export { EditorCommandPalette, EditorContextProvider, EditorSettingsModal, EditorSettingsPanel, EditorSurface, type EditorSurfaceHandle, type EditorSurfaceProps, EditorToolbar, EditorUiContext, Icon, type ReactFeature, type ReactPreset, SettingsSection, SuggestionList, type SuggestionListHandle, Toaster, cn, reactNotifier, reactSuggestionRenderer, useEditorContext, useEditorI18n, useEditorSettings, useEditorUi, useNotifier, useStore };

package/dist/react/index.js

@@ -10,8 +10,9 @@ import { EditorUiContext, useEditorUi } from "./editor-ui.js";
 import { reactNotifier } from "./notify.js";
 import { SuggestionList, reactSuggestionRenderer } from "./suggestion-renderer.js";
 import { EditorSurface } from "./EditorSurface.js";
+import { EditorCommandPalette } from "./EditorCommandPalette.js";
 import { useNotifier } from "./use-notifier.js";
 import { SettingsSection } from "./SettingsSection.js";
 import { EditorToolbar } from "./EditorToolbar.js";
 import { Toaster } from "sonner";
-export { EditorContextProvider, EditorSettingsModal, EditorSettingsPanel, EditorSurface, EditorToolbar, EditorUiContext, Icon, SettingsSection, SuggestionList, Toaster, cn, reactNotifier, reactSuggestionRenderer, useEditorContext, useEditorI18n, useEditorSettings, useEditorUi, useNotifier, useStore };
+export { EditorCommandPalette, EditorContextProvider, EditorSettingsModal, EditorSettingsPanel, EditorSurface, EditorToolbar, EditorUiContext, Icon, SettingsSection, SuggestionList, Toaster, cn, reactNotifier, reactSuggestionRenderer, useEditorContext, useEditorI18n, useEditorSettings, useEditorUi, useNotifier, useStore };

package/dist/react/key-labels.js

@@ -0,0 +1,15 @@
+//#region src/react/key-labels.ts
+const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+const KEY_LABELS = {
+	meta: isMac ? "⌘" : "Ctrl",
+	ctrl: "Ctrl",
+	alt: isMac ? "⌥" : "Alt",
+	shift: "⇧",
+	enter: "↵"
+};
+/** A command's shortcut keys (`['meta', 'shift', 'a']`) as shown on the keycaps of this platform (`⌘+⇧+A`). Vue's `UKbd` does the same inside Nuxt UI. */
+const shortcutLabel = (kbds) => kbds.map((key) => KEY_LABELS[key] ?? key.toUpperCase()).join("+");
+//#endregion
+export { shortcutLabel };
+
+//# sourceMappingURL=key-labels.js.map

package/dist/react/key-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-labels.js","names":[],"sources":["../../src/react/key-labels.ts"],"sourcesContent":["const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform)\nconst KEY_LABELS: Record<string, string> = {\n  meta: isMac ? '⌘' : 'Ctrl',\n  ctrl: 'Ctrl',\n  // i18n-ignore: keyboard key name, shown as on the keycap\n  alt: isMac ? '⌥' : 'Alt',\n  shift: '⇧',\n  enter: '↵',\n}\n\n/** A command's shortcut keys (`['meta', 'shift', 'a']`) as shown on the keycaps of this platform (`⌘+⇧+A`). Vue's `UKbd` does the same inside Nuxt UI. */\nexport const shortcutLabel = (kbds: readonly string[]): string => kbds.map(key => KEY_LABELS[key] ?? key.toUpperCase()).join('+')\n"],"mappings":";AAAA,MAAM,QAAQ,OAAO,cAAc,eAAe,kBAAkB,KAAK,UAAU,QAAQ;AAC3F,MAAM,aAAqC;CACzC,MAAM,QAAQ,MAAM;CACpB,MAAM;CAEN,KAAK,QAAQ,MAAM;CACnB,OAAO;CACP,OAAO;AACT;;AAGA,MAAa,iBAAiB,SAAoC,KAAK,KAAI,QAAO,WAAW,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,GAAG"}

package/dist/react/settings.d.ts

@@ -1,5 +1,5 @@
-import { EditorSettings } from "../settings/index.js";
 import { Store } from "../core/store.js";
+import { EditorSettings } from "../settings/index.js";
 //#region src/react/settings.d.ts
 /**
  * The editor settings shared by all editors of the app (see `createEditorContext` for persistence). `settings` is