@ecsplico/editor 2.1.2 → 3.0.0

package/dist/vue/advanced.js

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

package/dist/vue/components/EditorCommandPalette.js

@@ -0,0 +1,91 @@
+import { editorEntryOf } from "../../core/editor-ui.js";
+import { filterPalette, paletteGroupsOf } from "../../core/palette.js";
+import { useUiKit } from "../kit/use-ui-kit.js";
+import { useEditorI18n } from "../use-editor-i18n.js";
+import { useEditorUi } from "../use-editor-ui.js";
+import { computed, createBlock, createTextVNode, createVNode, defineComponent, openBlock, ref, toDisplayString, toRaw, unref, watch, withCtx } from "vue";
+//#region src/vue/components/EditorCommandPalette.vue
+/**
+* „Befehle“ (⌘K): the commands of the surface's editor (features' and host's, `palette !== false`) in a modal palette,
+* grouped like the toolbar, disabled where `commandState` disables them; a menu command opens its rows as a second
+* level. Mounted by `core-ui` as an overlay of the surface; the surface's `ui.paletteOpen` is its open state.
+*/
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "EditorCommandPalette",
+	props: { editor: {} },
+	setup(__props) {
+		const props = __props;
+		const { CommandPalette: UCommandPalette, Modal: UModal } = useUiKit();
+		const ui = useEditorUi(() => props.editor);
+		const { t } = useEditorI18n();
+		const all = ref([]);
+		const query = ref("");
+		const groups = computed(() => filterPalette(all.value, query.value).map((group) => ({
+			id: group.id,
+			label: group.label,
+			ignoreFilter: true,
+			items: group.entries.map(itemOf)
+		})));
+		function close() {
+			if (ui.value?.paletteOpen) ui.value.togglePalette();
+		}
+		function itemOf(entry) {
+			const { run } = entry;
+			return {
+				id: entry.id,
+				label: entry.label,
+				...entry.icon && { icon: entry.icon },
+				...entry.kbds && { kbds: entry.kbds },
+				...entry.description !== void 0 && { description: entry.description },
+				disabled: entry.disabled,
+				...entry.children ? { children: entry.children.map(itemOf) } : run && { onSelect: () => {
+					close();
+					run();
+				} }
+			};
+		}
+		watch(() => ui.value?.paletteOpen ?? false, (open) => {
+			if (!open) return;
+			const entry = editorEntryOf(toRaw(props.editor));
+			query.value = "";
+			all.value = entry ? paletteGroupsOf(toRaw(props.editor), entry) : [];
+		}, { immediate: true });
+		function onOpenChange(open) {
+			if (open !== !!ui.value?.paletteOpen) ui.value?.togglePalette();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(UModal), {
+				open: unref(ui)?.paletteOpen ?? false,
+				title: unref(t)("palette.title"),
+				description: unref(t)("palette.description"),
+				"onUpdate:open": onOpenChange
+			}, {
+				content: withCtx(() => [createVNode(unref(UCommandPalette), {
+					"search-term": query.value,
+					"onUpdate:searchTerm": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+					groups: groups.value,
+					placeholder: unref(t)("palette.placeholder"),
+					close: "",
+					class: "h-80",
+					"onUpdate:open": onOpenChange
+				}, {
+					empty: withCtx(() => [createTextVNode(toDisplayString(unref(t)("palette.empty")), 1)]),
+					_: 1
+				}, 8, [
+					"search-term",
+					"groups",
+					"placeholder"
+				])]),
+				_: 1
+			}, 8, [
+				"open",
+				"title",
+				"description"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=EditorCommandPalette.js.map

package/dist/vue/components/EditorCommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorCommandPalette.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createTextVNode","_toDisplayString"],"sources":["../../../src/vue/components/EditorCommandPalette.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Editor } from '@tiptap/core'\nimport { computed, ref, toRaw, watch } from 'vue'\nimport { editorEntryOf } from '../../core/editor-ui'\nimport { filterPalette, type PaletteEntry, type PaletteGroup, paletteGroupsOf } from '../../core/palette'\nimport type { CommandPaletteItem } from '../kit/types'\nimport { useUiKit } from '../kit/use-ui-kit'\nimport { useEditorUi } from '../use-editor-ui'\nimport { useEditorI18n } from '../use-editor-i18n'\n\n/**\n * „Befehle“ (⌘K): the commands of the surface's editor (features' and host's, `palette !== false`) in a modal palette,\n * grouped like the toolbar, disabled where `commandState` disables them; a menu command opens its rows as a second\n * level. Mounted by `core-ui` as an overlay of the surface; the surface's `ui.paletteOpen` is its open state.\n */\nconst props = defineProps<{ editor: Editor }>()\n\nconst { CommandPalette: UCommandPalette, Modal: UModal } = useUiKit()\nconst ui = useEditorUi(() => props.editor)\nconst { t } = useEditorI18n()\n\n// The search is `filterPalette`, the same function the React palette uses: the kit widget lists the rows as given\n// (`ignoreFilter`) and only reports what is typed (`searchTerm`). A menu command's second level is the widget's own search.\nconst all = ref<PaletteGroup[]>([])\nconst query = ref('')\nconst groups = computed(() => filterPalette(all.value, query.value).map(group => ({ id: group.id, label: group.label, ignoreFilter: true, items: group.entries.map(itemOf) })))\n\nfunction close() {\n  if (ui.value?.paletteOpen) ui.value.togglePalette()\n}\n\nfunction itemOf(entry: PaletteEntry): CommandPaletteItem {\n  const { run } = entry\n  return {\n    id: entry.id,\n    label: entry.label,\n    ...(entry.icon && { icon: entry.icon }),\n    ...(entry.kbds && { kbds: entry.kbds }),\n    ...(entry.description !== undefined && { description: entry.description }),\n    disabled: entry.disabled,\n    ...(entry.children ? { children: entry.children.map(itemOf) } : run && {\n      onSelect: () => {\n        close()\n        run()\n      },\n    }),\n  }\n}\n\n// The state of every command is read when the palette opens, not while it is closed.\nwatch(() => ui.value?.paletteOpen ?? false, (open) => {\n  if (!open) return\n  const entry = editorEntryOf(toRaw(props.editor))\n  query.value = ''\n  all.value = entry ? paletteGroupsOf(toRaw(props.editor), entry) : []\n}, { immediate: true })\n\nfunction onOpenChange(open: boolean) {\n  if (open !== !!ui.value?.paletteOpen) ui.value?.togglePalette()\n}\n</script>\n\n<template>\n  <UModal\n    :open=\"ui?.paletteOpen ?? false\"\n    :title=\"t('palette.title')\"\n    :description=\"t('palette.description')\"\n    @update:open=\"onOpenChange\"\n  >\n    <template #content>\n      <UCommandPalette v-model:search-term=\"query\" :groups=\"groups\" :placeholder=\"t('palette.placeholder')\" close class=\"h-80\" @update:open=\"onOpenChange\">\n        <template #empty>\n          {{ t('palette.empty') }}\n        </template>\n      </UCommandPalette>\n    </template>\n  </UModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAEd,MAAM,EAAE,gBAAgB,iBAAiB,OAAO,WAAW,SAAS;EACpE,MAAM,KAAK,kBAAkB,MAAM,MAAM;EACzC,MAAM,EAAE,MAAM,cAAc;EAI5B,MAAM,MAAM,IAAoB,CAAC,CAAC;EAClC,MAAM,QAAQ,IAAI,EAAE;EACpB,MAAM,SAAS,eAAe,cAAc,IAAI,OAAO,MAAM,KAAK,CAAC,CAAC,KAAI,WAAU;GAAE,IAAI,MAAM;GAAI,OAAO,MAAM;GAAO,cAAc;GAAM,OAAO,MAAM,QAAQ,IAAI,MAAM;EAAE,EAAE,CAAC;EAE9K,SAAS,QAAQ;GACf,IAAI,GAAG,OAAO,aAAa,GAAG,MAAM,cAAc;EACpD;EAEA,SAAS,OAAO,OAAyC;GACvD,MAAM,EAAE,QAAQ;GAChB,OAAO;IACL,IAAI,MAAM;IACV,OAAO,MAAM;IACb,GAAI,MAAM,QAAQ,EAAE,MAAM,MAAM,KAAK;IACrC,GAAI,MAAM,QAAQ,EAAE,MAAM,MAAM,KAAK;IACrC,GAAI,MAAM,gBAAgB,KAAA,KAAa,EAAE,aAAa,MAAM,YAAY;IACxE,UAAU,MAAM;IAChB,GAAI,MAAM,WAAW,EAAE,UAAU,MAAM,SAAS,IAAI,MAAM,EAAE,IAAI,OAAO,EACrE,gBAAgB;KACd,MAAM;KACN,IAAI;IACN,EACF;GACF;EACF;EAGA,YAAY,GAAG,OAAO,eAAe,QAAQ,SAAS;GACpD,IAAI,CAAC,MAAM;GACX,MAAM,QAAQ,cAAc,MAAM,MAAM,MAAM,CAAC;GAC/C,MAAM,QAAQ;GACd,IAAI,QAAQ,QAAQ,gBAAgB,MAAM,MAAM,MAAM,GAAG,KAAK,IAAI,CAAC;EACrE,GAAG,EAAE,WAAW,KAAK,CAAC;EAEtB,SAAS,aAAa,MAAe;GACnC,IAAI,SAAS,CAAC,CAAC,GAAG,OAAO,aAAa,GAAG,OAAO,cAAc;EAChE;;GAIE,OAAAA,UAAA,GAAAC,YAaSC,MAAA,MAAA,GAAA;IAZN,MAAMA,MAAA,EAAA,CAAE,EAAE,eAAW;IACrB,OAAOA,MAAA,CAAA,CAAC,CAAA,eAAA;IACR,aAAaA,MAAA,CAAA,CAAC,CAAA,qBAAA;IACd,iBAAa;;IAEH,SAAOC,cAKE,CAJlBC,YAIkBF,MAAA,eAAA,GAAA;KAJO,eAAa,MAAA;KAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;KAAG,QAAQ,OAAA;KAAS,aAAaA,MAAA,CAAA,CAAC,CAAA,qBAAA;KAAyB,OAAA;KAAM,OAAM;KAAQ,iBAAa;;KAC1H,OAAKC,cACU,CAArBE,gBAAAC,gBAAAJ,MAAA,CAAA,CAAC,CAAA,eAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/vue/components/EditorCommandPalette.vue.d.ts

@@ -0,0 +1,15 @@
+import { Editor } from "@tiptap/core";
+//#region src/vue/components/EditorCommandPalette.vue.d.ts
+/**
+ * „Befehle“ (⌘K): the commands of the surface's editor (features' and host's, `palette !== false`) in a modal palette,
+ * grouped like the toolbar, disabled where `commandState` disables them; a menu command opens its rows as a second
+ * level. Mounted by `core-ui` as an overlay of the surface; the surface's `ui.paletteOpen` is its open state.
+ */
+type __VLS_Props = {
+  editor: Editor;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=EditorCommandPalette.vue.d.ts.map

package/dist/vue/components/EditorSettingsModal.js

@@ -1,16 +1,17 @@
 import { settingsTabsOf } from "../../core/define-editor.js";
+import { editorEntryOf } from "../../core/editor-ui.js";
 import { useUiKit } from "../kit/use-ui-kit.js";
 import { useEditorSettings } from "../settings.js";
 import { useEditorContext } from "../context.js";
 import { useEditorI18n } from "../use-editor-i18n.js";
 import _sfc_main$1 from "./EditorSettingsPanel.js";
-import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, openBlock, unref, useModel, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, openBlock, toRaw, unref, useModel, withCtx } from "vue";
 //#region src/vue/components/EditorSettingsModal.vue
 const _hoisted_1 = { class: "flex w-full justify-end" };
-/** „Einstellungen“: `EditorSettingsPanel` in a modal. Renders nothing when the preset contributes no settings tab. */
+/** „Einstellungen“: `EditorSettingsPanel` in a modal. Renders nothing without an editor or when its preset contributes no settings tab. */
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "EditorSettingsModal",
-	props: /*@__PURE__*/ mergeModels({ preset: {} }, {
+	props: /*@__PURE__*/ mergeModels({ editor: {} }, {
 		"open": {
 			type: Boolean,
 			default: false
@@ -29,7 +30,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const app = useEditorContext();
 		const { t } = useEditorI18n();
 		const { synced } = useEditorSettings();
-		const hasTabs = computed(() => settingsTabsOf(props.preset, app).length > 0);
+		const hasTabs = computed(() => {
+			const preset = editorEntryOf(props.editor && toRaw(props.editor))?.preset;
+			return !!preset && settingsTabsOf(preset, app).length > 0;
+		});
 		return (_ctx, _cache) => {
 			return hasTabs.value ? (openBlock(), createBlock(unref(UModal), {
 				key: 0,
@@ -45,9 +49,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				body: withCtx(() => [createVNode(_sfc_main$1, {
 					tab: tab.value,
 					"onUpdate:tab": _cache[0] || (_cache[0] = ($event) => tab.value = $event),
-					preset: __props.preset,
+					editor: __props.editor,
 					"content-class": "h-[32rem] overflow-y-auto pt-4 pr-2"
-				}, null, 8, ["tab", "preset"])]),
+				}, null, 8, ["tab", "editor"])]),
 				footer: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(UButton), {
 					label: unref(t)("common.close"),
 					color: "neutral",

package/dist/vue/components/EditorSettingsModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorSettingsModal.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","EditorSettingsPanel","_createElementVNode","_createCommentVNode"],"sources":["../../../src/vue/components/EditorSettingsModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useUiKit } from '../kit/use-ui-kit'\nimport { computed } from 'vue'\nimport { settingsTabsOf } from '../../core/define-editor'\nimport type { EditorPreset } from '../../core/feature'\nimport { useEditorContext } from '../context'\nimport { useEditorI18n } from '../use-editor-i18n'\nimport { useEditorSettings } from '../settings'\nimport EditorSettingsPanel from './EditorSettingsPanel.vue'\n\n/** „Einstellungen“: `EditorSettingsPanel` in a modal. Renders nothing when the preset contributes no settings tab. */\nconst props = defineProps<{\n  /** The preset whose features contribute the tabs (the surface's `preset`). */\n  preset: EditorPreset\n}>()\n\nconst { Button: UButton, Modal: UModal } = useUiKit()\n\nconst open = defineModel<boolean>('open', { default: false })\n/** Shown tab id (see `EditorSettingsPanel`). */\nconst tab = defineModel<string | undefined>('tab', { default: undefined })\n\nconst app = useEditorContext()\nconst { t } = useEditorI18n()\nconst { synced } = useEditorSettings()\nconst hasTabs = computed(() => settingsTabsOf(props.preset, app).length > 0)\n</script>\n\n<template>\n  <UModal\n    v-if=\"hasTabs\"\n    :open=\"open\"\n    :title=\"t('settings.title')\"\n    :description=\"t(synced ? 'settings.scope.account' : 'settings.scope.browser')\"\n    :ui=\"{ overlay: 'bg-[color-mix(in_oklab,var(--sk-bg-elevated)_60%,transparent)] backdrop-blur-sm', content: 'sm:w-[42rem] sm:max-w-[42rem]' }\"\n    @update:open=\"open = $event\"\n  >\n    <template #body>\n      <EditorSettingsPanel v-model:tab=\"tab\" :preset=\"preset\" content-class=\"h-[32rem] overflow-y-auto pt-4 pr-2\" />\n    </template>\n    <template #footer>\n      <div class=\"flex w-full justify-end\">\n        <UButton :label=\"t('common.close')\" color=\"neutral\" variant=\"ghost\" @click=\"open = false\" />\n      </div>\n    </template>\n  </UModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EAKd,MAAM,EAAE,QAAQ,SAAS,OAAO,WAAW,SAAS;EAEpD,MAAM,OAAOA,SAAoB,SAAC,MAA0B;;EAE5D,MAAM,MAAMA,SAA+B,SAAC,KAA6B;EAEzE,MAAM,MAAM,iBAAiB;EAC7B,MAAM,EAAE,MAAM,cAAc;EAC5B,MAAM,EAAE,WAAW,kBAAkB;EACrC,MAAM,UAAU,eAAe,eAAe,MAAM,QAAQ,GAAG,CAAC,CAAC,SAAS,CAAC;;GAKjE,OAAA,QAAA,SADRC,UAAA,GAAAC,YAgBSC,MAAA,MAAA,GAAA;;IAdN,MAAM,KAAA;IACN,OAAOA,MAAA,CAAA,CAAC,CAAA,gBAAA;IACR,aAAaA,MAAA,CAAA,CAAC,CAACA,MAAA,MAAA,IAAM,2BAAA,wBAAA;IACrB,IAAI;KAAA,SAAA;KAAA,SAAA;IAAA;IACJ,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAO;;IAEV,MAAIC,cACiG,CAA9GC,YAA8GC,aAAA;KAAjF,KAAK,IAAA;KAAA,gBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,IAAG,QAAA;KAAG,QAAQ,QAAA;KAAQ,iBAAc;;IAE7D,QAAMF,cAGT,CAFNG,mBAEM,OAFN,YAEM,CADJF,YAA4FF,MAAA,OAAA,GAAA;KAAlF,OAAOA,MAAA,CAAA,CAAC,CAAA,cAAA;KAAkB,OAAM;KAAU,SAAQ;KAAS,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI"}
+{"version":3,"file":"EditorSettingsModal.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","EditorSettingsPanel","_createElementVNode","_createCommentVNode"],"sources":["../../../src/vue/components/EditorSettingsModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useUiKit } from '../kit/use-ui-kit'\nimport { computed, toRaw } from 'vue'\nimport type { Editor } from '@tiptap/core'\nimport { settingsTabsOf } from '../../core/define-editor'\nimport { editorEntryOf } from '../../core/editor-ui'\nimport { useEditorContext } from '../context'\nimport { useEditorI18n } from '../use-editor-i18n'\nimport { useEditorSettings } from '../settings'\nimport EditorSettingsPanel from './EditorSettingsPanel.vue'\n\n/** „Einstellungen“: `EditorSettingsPanel` in a modal. Renders nothing without an editor or when its preset contributes no settings tab. */\nconst props = defineProps<{\n  /** The editor whose preset (registered by its surface, from its `ready` event) contributes the tabs. */\n  editor?: Editor\n}>()\n\nconst { Button: UButton, Modal: UModal } = useUiKit()\n\nconst open = defineModel<boolean>('open', { default: false })\n/** Shown tab id (see `EditorSettingsPanel`). */\nconst tab = defineModel<string | undefined>('tab', { default: undefined })\n\nconst app = useEditorContext()\nconst { t } = useEditorI18n()\nconst { synced } = useEditorSettings()\nconst hasTabs = computed(() => {\n  const preset = editorEntryOf(props.editor && toRaw(props.editor))?.preset\n  return !!preset && settingsTabsOf(preset, app).length > 0\n})\n</script>\n\n<template>\n  <UModal\n    v-if=\"hasTabs\"\n    :open=\"open\"\n    :title=\"t('settings.title')\"\n    :description=\"t(synced ? 'settings.scope.account' : 'settings.scope.browser')\"\n    :ui=\"{ overlay: 'bg-[color-mix(in_oklab,var(--sk-bg-elevated)_60%,transparent)] backdrop-blur-sm', content: 'sm:w-[42rem] sm:max-w-[42rem]' }\"\n    @update:open=\"open = $event\"\n  >\n    <template #body>\n      <EditorSettingsPanel v-model:tab=\"tab\" :editor=\"editor\" content-class=\"h-[32rem] overflow-y-auto pt-4 pr-2\" />\n    </template>\n    <template #footer>\n      <div class=\"flex w-full justify-end\">\n        <UButton :label=\"t('common.close')\" color=\"neutral\" variant=\"ghost\" @click=\"open = false\" />\n      </div>\n    </template>\n  </UModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EAKd,MAAM,EAAE,QAAQ,SAAS,OAAO,WAAW,SAAS;EAEpD,MAAM,OAAOA,SAAoB,SAAC,MAA0B;;EAE5D,MAAM,MAAMA,SAA+B,SAAC,KAA6B;EAEzE,MAAM,MAAM,iBAAiB;EAC7B,MAAM,EAAE,MAAM,cAAc;EAC5B,MAAM,EAAE,WAAW,kBAAkB;EACrC,MAAM,UAAU,eAAe;GAC7B,MAAM,SAAS,cAAc,MAAM,UAAU,MAAM,MAAM,MAAM,CAAC,CAAC,EAAE;GACnE,OAAO,CAAC,CAAC,UAAU,eAAe,QAAQ,GAAG,CAAC,CAAC,SAAS;EAC1D,CAAC;;GAKS,OAAA,QAAA,SADRC,UAAA,GAAAC,YAgBSC,MAAA,MAAA,GAAA;;IAdN,MAAM,KAAA;IACN,OAAOA,MAAA,CAAA,CAAC,CAAA,gBAAA;IACR,aAAaA,MAAA,CAAA,CAAC,CAACA,MAAA,MAAA,IAAM,2BAAA,wBAAA;IACrB,IAAI;KAAA,SAAA;KAAA,SAAA;IAAA;IACJ,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAO;;IAEV,MAAIC,cACiG,CAA9GC,YAA8GC,aAAA;KAAjF,KAAK,IAAA;KAAA,gBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,IAAG,QAAA;KAAG,QAAQ,QAAA;KAAQ,iBAAc;;IAE7D,QAAMF,cAGT,CAFNG,mBAEM,OAFN,YAEM,CADJF,YAA4FF,MAAA,OAAA,GAAA;KAAlF,OAAOA,MAAA,CAAA,CAAC,CAAA,cAAA;KAAkB,OAAM;KAAU,SAAQ;KAAS,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAA,QAAI"}

package/dist/vue/components/EditorSettingsModal.vue.d.ts

@@ -1,9 +1,9 @@
-import { EditorPreset } from "../../core/feature.js";
+import { Editor } from "@tiptap/core";
 //#region src/vue/components/EditorSettingsModal.vue.d.ts
-/** „Einstellungen“: `EditorSettingsPanel` in a modal. Renders nothing when the preset contributes no settings tab. */
+/** „Einstellungen“: `EditorSettingsPanel` in a modal. Renders nothing without an editor or when its preset contributes no settings tab. */
 type __VLS_Props = {
-  /** The preset whose features contribute the tabs (the surface's `preset`). */
-  preset: EditorPreset;
+  /** The editor whose preset (registered by its surface, from its `ready` event) contributes the tabs. */
+  editor?: Editor;
 };
 type __VLS_ModelProps = {
   'open'?: boolean;

package/dist/vue/components/EditorSettingsPanel.js

@@ -1,21 +1,22 @@
 import { settingsTabsOf } from "../../core/define-editor.js";
+import { editorEntryOf } from "../../core/editor-ui.js";
 import { useUiKit } from "../kit/use-ui-kit.js";
 import { useEditorContext } from "../context.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, resolveDynamicComponent, unref, useModel } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, resolveDynamicComponent, toRaw, unref, useModel } from "vue";
 //#region src/vue/components/EditorSettingsPanel.vue
 const _hoisted_1 = {
 	key: 0,
 	class: "flex w-full flex-col"
 };
 /**
-* The settings of an editor: one tab per settings tab the preset's features contribute (composites: `editing`, AI:
-* `ai`). Place it anywhere; it renders nothing when the preset contributes no tab. The values live in the app's shared
-* settings (`useEditorSettings`), so panels of several editors edit the same preferences.
+* The settings of an editor: one tab per settings tab the features of its preset contribute (composites: `editing`,
+* AI: `ai`). Place it anywhere; it renders nothing without an editor or when the preset contributes no tab. The values
+* live in the app's shared settings (`useEditorSettings`), so panels of several editors edit the same preferences.
 */
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "EditorSettingsPanel",
 	props: /*@__PURE__*/ mergeModels({
-		preset: {},
+		editor: {},
 		contentClass: { default: "pt-4" }
 	}, {
 		"tab": { default: void 0 },
@@ -28,7 +29,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		/** Shown tab id; a missing or removed id shows the first contributed tab. */
 		const tab = useModel(__props, "tab");
 		const app = useEditorContext();
-		const tabs = computed(() => settingsTabsOf(props.preset, app));
+		const tabs = computed(() => {
+			const preset = editorEntryOf(props.editor && toRaw(props.editor))?.preset;
+			return preset ? settingsTabsOf(preset, app) : [];
+		});
 		const active = computed(() => tabs.value.find((candidate) => candidate.id === tab.value) ?? tabs.value[0]);
 		const items = computed(() => tabs.value.map(({ id, label, icon }) => ({
 			label,

package/dist/vue/components/EditorSettingsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorSettingsPanel.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","_unref","_createElementVNode","_normalizeClass","_createBlock","_resolveDynamicComponent","_mergeProps","_createCommentVNode"],"sources":["../../../src/vue/components/EditorSettingsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useUiKit } from '../kit/use-ui-kit'\nimport type { TabItem } from '../kit/types'\nimport { type Component, computed } from 'vue'\nimport { settingsTabsOf } from '../../core/define-editor'\nimport type { EditorPreset } from '../../core/feature'\nimport { useEditorContext } from '../context'\n\n/**\n * The settings of an editor: one tab per settings tab the preset's features contribute (composites: `editing`, AI:\n * `ai`). Place it anywhere; it renders nothing when the preset contributes no tab. The values live in the app's shared\n * settings (`useEditorSettings`), so panels of several editors edit the same preferences.\n */\nconst props = withDefaults(defineProps<{\n  /** The preset whose features contribute the tabs (the surface's `preset`). */\n  preset: EditorPreset\n  /** Classes of the tab content area, e.g. a fixed height with scrolling. */\n  contentClass?: string\n}>(), { contentClass: 'pt-4' })\n\nconst { Tabs: UTabs } = useUiKit()\n\n/** Shown tab id; a missing or removed id shows the first contributed tab. */\nconst tab = defineModel<string | undefined>('tab', { default: undefined })\n\nconst app = useEditorContext()\nconst tabs = computed(() => settingsTabsOf(props.preset, app))\nconst active = computed(() => tabs.value.find(candidate => candidate.id === tab.value) ?? tabs.value[0])\nconst items = computed<TabItem[]>(() => tabs.value.map(({ id, label, icon }) => ({ label, value: id, ...(icon && { icon }) })))\n// The descriptors are framework-agnostic (`component: unknown`); in this Vue panel they are Vue components.\nconst activeComponent = computed(() => active.value?.component as Component | undefined)\n</script>\n\n<template>\n  <div v-if=\"active\" class=\"flex w-full flex-col\">\n    <UTabs\n      :model-value=\"active.id\"\n      :items=\"items\"\n      :content=\"false\"\n      orientation=\"horizontal\"\n      variant=\"link\"\n      class=\"w-full\"\n      @update:model-value=\"tab = String($event)\"\n    />\n    <div :class=\"contentClass\" data-settings-panel-content>\n      <component :is=\"activeComponent\" :key=\"active.id\" v-bind=\"active.props\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQ;EAOd,MAAM,EAAE,MAAM,UAAU,SAAS;;EAGjC,MAAM,MAAMA,SAA+B,SAAC,KAA6B;EAEzE,MAAM,MAAM,iBAAiB;EAC7B,MAAM,OAAO,eAAe,eAAe,MAAM,QAAQ,GAAG,CAAC;EAC7D,MAAM,SAAS,eAAe,KAAK,MAAM,MAAK,cAAa,UAAU,OAAO,IAAI,KAAK,KAAK,KAAK,MAAM,EAAE;EACvG,MAAM,QAAQ,eAA0B,KAAK,MAAM,KAAK,EAAE,IAAI,OAAO,YAAY;GAAE;GAAO,OAAO;GAAI,GAAI,QAAQ,EAAE,KAAK;EAAG,EAAE,CAAC;EAE9H,MAAM,kBAAkB,eAAe,OAAO,OAAO,SAAkC;;GAI1E,OAAA,OAAA,SAAXC,UAAA,GAAAC,mBAaM,OAbN,YAaM,CAZJC,YAQEC,MAAA,KAAA,GAAA;IAPC,eAAa,OAAA,MAAO;IACpB,OAAO,MAAA;IACP,SAAS;IACV,aAAY;IACZ,SAAQ;IACR,OAAM;IACL,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,IAAA,QAAM,OAAO,MAAM;GAE1C,GAAA,MAAA,GAAA,CAAA,eAAA,OAAA,CAAA,GAAAC,mBAEM,OAAA;IAFA,OAAKC,eAAE,QAAA,YAAY;IAAE,+BAAA;GACzB,GAAA,EAAAL,UAAA,GAAAM,YAA0EC,wBAA1D,gBAAA,KAAe,GAA/BC,WAA0E,EAAxC,KAAK,OAAA,MAAO,GAAY,GAAA,OAAA,MAAO,KAAK,GAAA,MAAA,EAAA,EAAA,GAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,QAAA,IAAA"}
+{"version":3,"file":"EditorSettingsPanel.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","_unref","_createElementVNode","_normalizeClass","_createBlock","_resolveDynamicComponent","_mergeProps","_createCommentVNode"],"sources":["../../../src/vue/components/EditorSettingsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useUiKit } from '../kit/use-ui-kit'\nimport type { TabItem } from '../kit/types'\nimport type { Editor } from '@tiptap/core'\nimport { type Component, computed, toRaw } from 'vue'\nimport { settingsTabsOf } from '../../core/define-editor'\nimport { editorEntryOf } from '../../core/editor-ui'\nimport { useEditorContext } from '../context'\n\n/**\n * The settings of an editor: one tab per settings tab the features of its preset contribute (composites: `editing`,\n * AI: `ai`). Place it anywhere; it renders nothing without an editor or when the preset contributes no tab. The values\n * live in the app's shared settings (`useEditorSettings`), so panels of several editors edit the same preferences.\n */\nconst props = withDefaults(defineProps<{\n  /** The editor whose preset (registered by its surface, from its `ready` event) contributes the tabs. */\n  editor?: Editor\n  /** Classes of the tab content area, e.g. a fixed height with scrolling. */\n  contentClass?: string\n}>(), { contentClass: 'pt-4' })\n\nconst { Tabs: UTabs } = useUiKit()\n\n/** Shown tab id; a missing or removed id shows the first contributed tab. */\nconst tab = defineModel<string | undefined>('tab', { default: undefined })\n\nconst app = useEditorContext()\nconst tabs = computed(() => {\n  const preset = editorEntryOf(props.editor && toRaw(props.editor))?.preset\n  return preset ? settingsTabsOf(preset, app) : []\n})\nconst active = computed(() => tabs.value.find(candidate => candidate.id === tab.value) ?? tabs.value[0])\nconst items = computed<TabItem[]>(() => tabs.value.map(({ id, label, icon }) => ({ label, value: id, ...(icon && { icon }) })))\n// The descriptors are framework-agnostic (`component: unknown`); in this Vue panel they are Vue components.\nconst activeComponent = computed(() => active.value?.component as Component | undefined)\n</script>\n\n<template>\n  <div v-if=\"active\" class=\"flex w-full flex-col\">\n    <UTabs\n      :model-value=\"active.id\"\n      :items=\"items\"\n      :content=\"false\"\n      orientation=\"horizontal\"\n      variant=\"link\"\n      class=\"w-full\"\n      @update:model-value=\"tab = String($event)\"\n    />\n    <div :class=\"contentClass\" data-settings-panel-content>\n      <component :is=\"activeComponent\" :key=\"active.id\" v-bind=\"active.props\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ;EAOd,MAAM,EAAE,MAAM,UAAU,SAAS;;EAGjC,MAAM,MAAMA,SAA+B,SAAC,KAA6B;EAEzE,MAAM,MAAM,iBAAiB;EAC7B,MAAM,OAAO,eAAe;GAC1B,MAAM,SAAS,cAAc,MAAM,UAAU,MAAM,MAAM,MAAM,CAAC,CAAC,EAAE;GACnE,OAAO,SAAS,eAAe,QAAQ,GAAG,IAAI,CAAC;EACjD,CAAC;EACD,MAAM,SAAS,eAAe,KAAK,MAAM,MAAK,cAAa,UAAU,OAAO,IAAI,KAAK,KAAK,KAAK,MAAM,EAAE;EACvG,MAAM,QAAQ,eAA0B,KAAK,MAAM,KAAK,EAAE,IAAI,OAAO,YAAY;GAAE;GAAO,OAAO;GAAI,GAAI,QAAQ,EAAE,KAAK;EAAG,EAAE,CAAC;EAE9H,MAAM,kBAAkB,eAAe,OAAO,OAAO,SAAkC;;GAI1E,OAAA,OAAA,SAAXC,UAAA,GAAAC,mBAaM,OAbN,YAaM,CAZJC,YAQEC,MAAA,KAAA,GAAA;IAPC,eAAa,OAAA,MAAO;IACpB,OAAO,MAAA;IACP,SAAS;IACV,aAAY;IACZ,SAAQ;IACR,OAAM;IACL,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAE,IAAA,QAAM,OAAO,MAAM;GAE1C,GAAA,MAAA,GAAA,CAAA,eAAA,OAAA,CAAA,GAAAC,mBAEM,OAAA;IAFA,OAAKC,eAAE,QAAA,YAAY;IAAE,+BAAA;GACzB,GAAA,EAAAL,UAAA,GAAAM,YAA0EC,wBAA1D,gBAAA,KAAe,GAA/BC,WAA0E,EAAxC,KAAK,OAAA,MAAO,GAAY,GAAA,OAAA,MAAO,KAAK,GAAA,MAAA,EAAA,EAAA,GAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,QAAA,IAAA"}

package/dist/vue/components/EditorSettingsPanel.vue.d.ts

@@ -1,13 +1,13 @@
-import { EditorPreset } from "../../core/feature.js";
+import { Editor } from "@tiptap/core";
 //#region src/vue/components/EditorSettingsPanel.vue.d.ts
 /**
- * The settings of an editor: one tab per settings tab the preset's features contribute (composites: `editing`, AI:
- * `ai`). Place it anywhere; it renders nothing when the preset contributes no tab. The values live in the app's shared
- * settings (`useEditorSettings`), so panels of several editors edit the same preferences.
+ * The settings of an editor: one tab per settings tab the features of its preset contribute (composites: `editing`,
+ * AI: `ai`). Place it anywhere; it renders nothing without an editor or when the preset contributes no tab. The values
+ * live in the app's shared settings (`useEditorSettings`), so panels of several editors edit the same preferences.
  */
 type __VLS_Props = {
-  /** The preset whose features contribute the tabs (the surface's `preset`). */
-  preset: EditorPreset;
+  /** The editor whose preset (registered by its surface, from its `ready` event) contributes the tabs. */
+  editor?: Editor;
   /** Classes of the tab content area, e.g. a fixed height with scrolling. */
   contentClass?: string;
 };

package/dist/vue/components/EditorSurface.js

@@ -21,9 +21,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		abilities: {},
 		extensions: {},
 		blockActions: {},
-		slashCommands: {},
+		commands: {},
 		documentId: {},
-		upload: {},
 		editable: {
 			type: Boolean,
 			default: true
@@ -68,6 +67,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const app = useEditorContext();
 		const settingsOpen = ref(false);
 		const settingsTab = ref();
+		const paletteOpen = ref(false);
 		const ui = {
 			openSettings: (tab) => {
 				if (!settingsTabsOf(preset, app).length) return;
@@ -86,6 +86,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			},
 			get commentsOpen() {
 				return commentsOpen.value;
+			},
+			togglePalette: () => {
+				paletteOpen.value = !paletteOpen.value;
+			},
+			get paletteOpen() {
+				return paletteOpen.value;
 			}
 		};
 		provide(EDITOR_UI, ui);
@@ -103,9 +109,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			editable: props.editable,
 			metadata: props.metadata,
 			documentId: props.documentId,
-			upload: props.upload,
 			abilities: props.abilities,
-			slashCommands: props.slashCommands,
+			commands: props.commands,
 			extensions: props.extensions,
 			blockActions: props.blockActions,
 			onChange: (content) => emit("update:modelValue", content),
@@ -153,11 +158,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"onUpdate:open": _cache[0] || (_cache[0] = ($event) => settingsOpen.value = $event),
 					tab: settingsTab.value,
 					"onUpdate:tab": _cache[1] || (_cache[1] = ($event) => settingsTab.value = $event),
-					preset: unref(preset)
+					editor: unref(editor)
 				}, null, 8, [
 					"open",
 					"tab",
-					"preset"
+					"editor"
 				])) : createCommentVNode("v-if", true)
 			], 64)) : createCommentVNode("v-if", true);
 		};

package/dist/vue/components/EditorSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorSurface.js","names":["_useModel","_unref","_openBlock","_createElementBlock","_Fragment","_createElementVNode","_createVNode","_renderList","_createBlock","_resolveDynamicComponent","EditorSettingsModal","_createCommentVNode"],"sources":["../../../src/vue/components/EditorSurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AnyExtension, Editor, JSONContent } from '@tiptap/vue-3'\nimport { EditorContent, useEditor } from '@tiptap/vue-3'\nimport { type Component, onBeforeUnmount, provide, ref, toRaw, watch } from 'vue'\nimport { settingsTabsOf } from '../../core/define-editor'\nimport type { EditorUi } from '../../core/editor-ui'\nimport { useEditorContext } from '../context'\nimport { attachNotifier } from '../notify'\nimport { useUiKit } from '../kit/use-ui-kit'\nimport { EDITOR_UI } from '../use-editor-ui'\nimport type { AbilitiesOptions, BlockAction, SlashCommandItem } from '../../core/extension-points'\nimport type { CollaborationSession, EditorPreset, UploadFn } from '../../core/feature'\nimport type { EditorMetadata, MetadataItem } from '../../core/metadata-types'\nimport { createSurfaceSession } from '../../core/surface-session'\nimport { vueSuggestionRenderer } from '../suggestion-renderer'\nimport EditorSettingsModal from './EditorSettingsModal.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  /** The features this editor is made of (`simpleEditor()`, `defineEditor(...)`); fixed at mount, remount (`key`) to change it. */\n  preset: EditorPreset\n  /** Collaborative mode: the Y.Doc is the document. Needs a preset with the collaboration feature; fixed at mount. */\n  collaboration?: CollaborationSession\n  /** Standalone mode (without `collaboration`): TipTap JSON via `v-model`; the editor keeps its own undo history. */\n  modelValue?: JSONContent\n  /** Host lists (`mentions`, `hashtags`, `speakers`, custom) features' suggestions search. */\n  metadata?: EditorMetadata\n  /** Deep-merged into the `Abilities` defaults; read once at setup. */\n  abilities?: Partial<AbilitiesOptions>\n  /** Added after the features' extensions; read once at setup. */\n  extensions?: AnyExtension[]\n  /** Hover actions shown after the features' own; shown by an installed block-UI feature. */\n  blockActions?: BlockAction[]\n  /** Builds the `/` menu from the features' commands; absent = the features' commands. Read once at setup. */\n  slashCommands?: (defaults: SlashCommandItem[]) => SlashCommandItem[]\n  /** Document whose package stores uploads (media feature). Read once at setup. */\n  documentId?: string\n  /** Stores an uploaded file and returns its URL (media feature). Read once at setup. */\n  upload?: UploadFn\n  editable?: boolean\n  /** `internal`: the surface owns its settings UI; `external`: it emits `settingsOpen` and the host shows the panel. */\n  settingsUi?: 'internal' | 'external'\n}>(), { editable: true, settingsUi: 'internal' })\n\nconst emit = defineEmits<{\n  'ready': [editor: Editor]\n  'update:modelValue': [content: JSONContent]\n  'metadataCreate': [list: string, item: MetadataItem]\n  /** The JSON handed in (initially or later) does not fit this editor's schema; the last valid document stays. */\n  'contentError': [error: Error]\n  /** `settingsUi: 'external'`: the editor asks the host to open its settings (on `tab` when given). */\n  'settingsOpen': [tab?: string]\n}>()\n\n/** Whether this editor's AI sidebar is open (`toggleSidebar`): hosts bind it (`v-model:sidebar-open`). */\nconst sidebarOpen = defineModel<boolean>('sidebarOpen', { default: false })\n/**\n * Whether this editor's comments margin is open (`toggleComments`, Mod-Shift-m of the comments feature): hosts bind it\n * (`v-model:comments-open`). The AI sidebar and the margin exclude each other: whichever opens last closes the other.\n */\nconst commentsOpen = defineModel<boolean>('commentsOpen', { default: false })\nwatch(sidebarOpen, (open) => {\n  if (open) commentsOpen.value = false\n})\nwatch(commentsOpen, (open) => {\n  if (open) sidebarOpen.value = false\n})\n\nconst { preset } = props\nconst app = useEditorContext()\n\n\n// The editor's chrome for its subtree (EDITOR_UI) and, registered by editor instance once it exists, for components\n// a host places beside it (EditorToolbar, outline, sidebar).\nconst settingsOpen = ref(false)\nconst settingsTab = ref<string | undefined>()\nconst ui: EditorUi = {\n  openSettings: (tab) => {\n    // Nothing to open without a contributed tab.\n    if (!settingsTabsOf(preset, app).length) return\n    if (props.settingsUi === 'external') {\n      emit('settingsOpen', tab)\n      return\n    }\n    if (tab) settingsTab.value = tab\n    settingsOpen.value = true\n  },\n  toggleSidebar: () => {\n    sidebarOpen.value = !sidebarOpen.value\n  },\n  toggleComments: () => {\n    commentsOpen.value = !commentsOpen.value\n  },\n  get commentsOpen() {\n    return commentsOpen.value\n  },\n}\nprovide(EDITOR_UI, ui)\n\n// Captured in setup: features raise notices later, outside it.\nconst kitNotify = useUiKit().notifier()\nattachNotifier(app.notify, kitNotify)\n\n// Everything framework-free: mode, context, extensions, content validation, setup lifecycle. The mode is fixed at\n// setup; hosts switch it by remounting (`key`).\nconst session = createSurfaceSession({\n  app,\n  preset,\n  ui,\n  notify: kitNotify,\n  suggestionRenderer: vueSuggestionRenderer,\n  getEditor: () => editor.value,\n  collaboration: props.collaboration,\n  // Raw: a reactive host value would put Vue proxies into node attributes.\n  value: props.modelValue && toRaw(props.modelValue),\n  editable: props.editable,\n  metadata: props.metadata,\n  documentId: props.documentId,\n  upload: props.upload,\n  abilities: props.abilities,\n  slashCommands: props.slashCommands,\n  extensions: props.extensions,\n  blockActions: props.blockActions,\n  onChange: content => emit('update:modelValue', content),\n  onMetadataCreate: (list, item) => emit('metadataCreate', list, item),\n  onContentError: error => emit('contentError', error),\n  // The registered instance is the one `useEditor` created: the vue-3 `Editor` subclass.\n  onReady: instance => emit('ready', instance as Editor),\n})\n// Descriptors are framework-agnostic (`overlays: unknown[]`); in this Vue surface they are Vue components.\nconst overlays = session.overlays as readonly Component[]\n\n// Setup contributions run during setup (also on the server) and are torn down when the surface unmounts.\nsession.activate()\n\nconst editor = useEditor(session.editorOptions)\n\nwatch(() => props.modelValue, value => session.setValue(value && toRaw(value)))\nwatch(() => props.editable, editable => session.setEditable(editable))\nwatch(() => props.metadata, metadata => session.setMetadata(metadata))\n\n// `useEditor` creates the instance in onMounted; announce it once it exists (its chrome registered first, so a host\n// toolbar that receives it through `ready` finds the chrome).\nlet unregister: (() => void) | undefined\nconst stopReady = watch(editor, (instance) => {\n  if (!instance) return\n  unregister = session.register(toRaw(instance))\n  stopReady()\n})\n\nonBeforeUnmount(() => {\n  unregister?.()\n  session.deactivate()\n  editor.value?.destroy()\n})\n\ndefineExpose({ editor, settingsOpen, settingsTab })\n</script>\n\n<template>\n  <template v-if=\"editor\">\n    <div class=\"relative\">\n      <EditorContent :editor=\"editor\" class=\"relative\" />\n    </div>\n    <component :is=\"overlay\" v-for=\"(overlay, index) in overlays\" :key=\"index\" :editor=\"editor\" />\n    <EditorSettingsModal v-if=\"settingsUi === 'internal'\" v-model:open=\"settingsOpen\" v-model:tab=\"settingsTab\" :preset=\"preset\" />\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ;EA0Bd,MAAM,OAAO;;EAWb,MAAM,cAAcA,SAAoB,SAAC,aAAiC;;;;;EAK1E,MAAM,eAAeA,SAAoB,SAAC,cAAkC;EAC5E,MAAM,cAAc,SAAS;GAC3B,IAAI,MAAM,aAAa,QAAQ;EACjC,CAAC;EACD,MAAM,eAAe,SAAS;GAC5B,IAAI,MAAM,YAAY,QAAQ;EAChC,CAAC;EAED,MAAM,EAAE,WAAW;EACnB,MAAM,MAAM,iBAAiB;EAK7B,MAAM,eAAe,IAAI,KAAK;EAC9B,MAAM,cAAc,IAAwB;EAC5C,MAAM,KAAe;GACnB,eAAe,QAAQ;IAErB,IAAI,CAAC,eAAe,QAAQ,GAAG,CAAC,CAAC,QAAQ;IACzC,IAAI,MAAM,eAAe,YAAY;KACnC,KAAK,gBAAgB,GAAG;KACxB;IACF;IACA,IAAI,KAAK,YAAY,QAAQ;IAC7B,aAAa,QAAQ;GACvB;GACA,qBAAqB;IACnB,YAAY,QAAQ,CAAC,YAAY;GACnC;GACA,sBAAsB;IACpB,aAAa,QAAQ,CAAC,aAAa;GACrC;GACA,IAAI,eAAe;IACjB,OAAO,aAAa;GACtB;EACF;EACA,QAAQ,WAAW,EAAE;EAGrB,MAAM,YAAY,SAAS,CAAC,CAAC,SAAS;EACtC,eAAe,IAAI,QAAQ,SAAS;EAIpC,MAAM,UAAU,qBAAqB;GACnC;GACA;GACA;GACA,QAAQ;GACR,oBAAoB;GACpB,iBAAiB,OAAO;GACxB,eAAe,MAAM;GAErB,OAAO,MAAM,cAAc,MAAM,MAAM,UAAU;GACjD,UAAU,MAAM;GAChB,UAAU,MAAM;GAChB,YAAY,MAAM;GAClB,QAAQ,MAAM;GACd,WAAW,MAAM;GACjB,eAAe,MAAM;GACrB,YAAY,MAAM;GAClB,cAAc,MAAM;GACpB,WAAU,YAAW,KAAK,qBAAqB,OAAO;GACtD,mBAAmB,MAAM,SAAS,KAAK,kBAAkB,MAAM,IAAI;GACnE,iBAAgB,UAAS,KAAK,gBAAgB,KAAK;GAEnD,UAAS,aAAY,KAAK,SAAS,QAAkB;EACvD,CAAC;EAED,MAAM,WAAW,QAAQ;EAGzB,QAAQ,SAAS;EAEjB,MAAM,SAAS,UAAU,QAAQ,aAAa;EAE9C,YAAY,MAAM,aAAY,UAAS,QAAQ,SAAS,SAAS,MAAM,KAAK,CAAC,CAAC;EAC9E,YAAY,MAAM,WAAU,aAAY,QAAQ,YAAY,QAAQ,CAAC;EACrE,YAAY,MAAM,WAAU,aAAY,QAAQ,YAAY,QAAQ,CAAC;EAIrE,IAAI;EACJ,MAAM,YAAY,MAAM,SAAS,aAAa;GAC5C,IAAI,CAAC,UAAU;GACf,aAAa,QAAQ,SAAS,MAAM,QAAQ,CAAC;GAC7C,UAAU;EACZ,CAAC;EAED,sBAAsB;GACpB,aAAa;GACb,QAAQ,WAAW;GACnB,OAAO,OAAO,QAAQ;EACxB,CAAC;EAED,SAAa;GAAE;GAAQ;GAAc;EAAY,CAAC;;GAIhC,OAAAC,MAAA,MAAA,KAAhBC,UAAA,GAAAC,mBAMWC,UAAA,EAAA,KAAA,EAAA,GAAA;IALTC,mBAEM,OAFN,YAEM,CADJC,YAAmDL,MAAA,aAAA,GAAA;KAAnC,QAAQA,MAAA,MAAA;KAAQ,OAAM;;KAExCC,UAAA,IAAA,GAAAC,mBAA8FC,UAAA,MAAAG,WAA1CN,MAAA,QAAA,IAAnB,SAAS,UAAK;KAA/C,OAAAC,UAAA,GAAAM,YAA8FC,wBAA9E,OAAO,GAAA;MAAwC,KAAK;MAAQ,QAAQR,MAAA,MAAA;;;IACzD,QAAA,eAAU,cAArCC,UAAA,GAAAM,YAA+HE,aAAA;;KAAjE,MAAM,aAAA;KAAA,iBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,aAAY,QAAA;KAAU,KAAK,YAAA;KAAA,gBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,YAAW,QAAA;KAAG,QAAQT,MAAA,MAAA"}
+{"version":3,"file":"EditorSurface.js","names":["_useModel","_unref","_openBlock","_createElementBlock","_Fragment","_createElementVNode","_createVNode","_renderList","_createBlock","_resolveDynamicComponent","EditorSettingsModal","_createCommentVNode"],"sources":["../../../src/vue/components/EditorSurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AnyExtension, Editor, JSONContent } from '@tiptap/vue-3'\nimport { EditorContent, useEditor } from '@tiptap/vue-3'\nimport { type Component, onBeforeUnmount, provide, ref, toRaw, watch } from 'vue'\nimport { settingsTabsOf } from '../../core/define-editor'\nimport type { EditorUi } from '../../core/editor-ui'\nimport { useEditorContext } from '../context'\nimport { attachNotifier } from '../notify'\nimport { useUiKit } from '../kit/use-ui-kit'\nimport { EDITOR_UI } from '../use-editor-ui'\nimport type { CommandDef } from '../../core/commands'\nimport type { AbilitiesOptions, BlockAction } from '../../core/extension-points'\nimport type { CollaborationSession, EditorPreset } from '../../core/feature'\nimport type { EditorMetadata, MetadataItem } from '../../core/metadata-types'\nimport { createSurfaceSession } from '../../core/surface-session'\nimport { vueSuggestionRenderer } from '../suggestion-renderer'\nimport EditorSettingsModal from './EditorSettingsModal.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  /** The features this editor is made of (`simpleEditor()`, `defineEditor(...)`); fixed at mount, remount (`key`) to change it. */\n  preset: EditorPreset\n  /** Collaborative mode: the Y.Doc is the document. Needs a preset with the collaboration feature; fixed at mount. */\n  collaboration?: CollaborationSession\n  /** Standalone mode (without `collaboration`): TipTap JSON via `v-model`; the editor keeps its own undo history. */\n  modelValue?: JSONContent\n  /** Host lists (`mentions`, `hashtags`, `speakers`, custom) features' suggestions search. */\n  metadata?: EditorMetadata\n  /** Deep-merged into the `Abilities` defaults; read once at setup. */\n  abilities?: Partial<AbilitiesOptions>\n  /** Added after the features' extensions; read once at setup. */\n  extensions?: AnyExtension[]\n  /** Hover actions shown after the features' own; shown by an installed block-UI feature. */\n  blockActions?: BlockAction[]\n  /** Builds the final commands (and with them the `/` menu) from the features' commands; absent = the features' commands. Read once at setup. */\n  commands?: (defaults: CommandDef[]) => CommandDef[]\n  /** Document whose package stores uploads (`backend.assets`, media feature). Read once at setup. */\n  documentId?: string\n  editable?: boolean\n  /** `internal`: the surface owns its settings UI; `external`: it emits `settingsOpen` and the host shows the panel. */\n  settingsUi?: 'internal' | 'external'\n}>(), { editable: true, settingsUi: 'internal' })\n\nconst emit = defineEmits<{\n  'ready': [editor: Editor]\n  'update:modelValue': [content: JSONContent]\n  'metadataCreate': [list: string, item: MetadataItem]\n  /** The JSON handed in (initially or later) does not fit this editor's schema; the last valid document stays. */\n  'contentError': [error: Error]\n  /** `settingsUi: 'external'`: the editor asks the host to open its settings (on `tab` when given). */\n  'settingsOpen': [tab?: string]\n}>()\n\n/** Whether this editor's AI sidebar is open (`toggleSidebar`): hosts bind it (`v-model:sidebar-open`). */\nconst sidebarOpen = defineModel<boolean>('sidebarOpen', { default: false })\n/**\n * Whether this editor's comments margin is open (`toggleComments`, Mod-Shift-m of the comments feature): hosts bind it\n * (`v-model:comments-open`). The AI sidebar and the margin exclude each other: whichever opens last closes the other.\n */\nconst commentsOpen = defineModel<boolean>('commentsOpen', { default: false })\nwatch(sidebarOpen, (open) => {\n  if (open) commentsOpen.value = false\n})\nwatch(commentsOpen, (open) => {\n  if (open) sidebarOpen.value = false\n})\n\nconst { preset } = props\nconst app = useEditorContext()\n\n// The editor's chrome for its subtree (EDITOR_UI) and, registered by editor instance once it exists, for components\n// a host places beside it (EditorToolbar, outline, sidebar).\nconst settingsOpen = ref(false)\nconst settingsTab = ref<string | undefined>()\n// The ⌘K palette (the `core-ui` overlay, when the preset has one) shows while this is true.\nconst paletteOpen = ref(false)\nconst ui: EditorUi = {\n  openSettings: (tab) => {\n    // Nothing to open without a contributed tab.\n    if (!settingsTabsOf(preset, app).length) return\n    if (props.settingsUi === 'external') {\n      emit('settingsOpen', tab)\n      return\n    }\n    if (tab) settingsTab.value = tab\n    settingsOpen.value = true\n  },\n  toggleSidebar: () => {\n    sidebarOpen.value = !sidebarOpen.value\n  },\n  toggleComments: () => {\n    commentsOpen.value = !commentsOpen.value\n  },\n  get commentsOpen() {\n    return commentsOpen.value\n  },\n  togglePalette: () => {\n    paletteOpen.value = !paletteOpen.value\n  },\n  get paletteOpen() {\n    return paletteOpen.value\n  },\n}\nprovide(EDITOR_UI, ui)\n\n// Captured in setup: features raise notices later, outside it.\nconst kitNotify = useUiKit().notifier()\nattachNotifier(app.notify, kitNotify)\n\n// Everything framework-free: mode, context, extensions, content validation, setup lifecycle. The mode is fixed at\n// setup; hosts switch it by remounting (`key`).\nconst session = createSurfaceSession({\n  app,\n  preset,\n  ui,\n  notify: kitNotify,\n  suggestionRenderer: vueSuggestionRenderer,\n  getEditor: () => editor.value,\n  collaboration: props.collaboration,\n  // Raw: a reactive host value would put Vue proxies into node attributes.\n  value: props.modelValue && toRaw(props.modelValue),\n  editable: props.editable,\n  metadata: props.metadata,\n  documentId: props.documentId,\n  abilities: props.abilities,\n  commands: props.commands,\n  extensions: props.extensions,\n  blockActions: props.blockActions,\n  onChange: content => emit('update:modelValue', content),\n  onMetadataCreate: (list, item) => emit('metadataCreate', list, item),\n  onContentError: error => emit('contentError', error),\n  // The registered instance is the one `useEditor` created: the vue-3 `Editor` subclass.\n  onReady: instance => emit('ready', instance as Editor),\n})\n// Descriptors are framework-agnostic (`overlays: unknown[]`); in this Vue surface they are Vue components.\nconst overlays = session.overlays as readonly Component[]\n\n// Setup contributions run during setup (also on the server) and are torn down when the surface unmounts.\nsession.activate()\n\nconst editor = useEditor(session.editorOptions)\n\nwatch(() => props.modelValue, value => session.setValue(value && toRaw(value)))\nwatch(() => props.editable, editable => session.setEditable(editable))\nwatch(() => props.metadata, metadata => session.setMetadata(metadata))\n\n// `useEditor` creates the instance in onMounted; announce it once it exists (its chrome registered first, so a host\n// toolbar that receives it through `ready` finds the chrome).\nlet unregister: (() => void) | undefined\nconst stopReady = watch(editor, (instance) => {\n  if (!instance) return\n  unregister = session.register(toRaw(instance))\n  stopReady()\n})\n\nonBeforeUnmount(() => {\n  unregister?.()\n  session.deactivate()\n  editor.value?.destroy()\n})\n\ndefineExpose({ editor, settingsOpen, settingsTab })\n</script>\n\n<template>\n  <template v-if=\"editor\">\n    <div class=\"relative\">\n      <EditorContent :editor=\"editor\" class=\"relative\" />\n    </div>\n    <component :is=\"overlay\" v-for=\"(overlay, index) in overlays\" :key=\"index\" :editor=\"editor\" />\n    <EditorSettingsModal v-if=\"settingsUi === 'internal'\" v-model:open=\"settingsOpen\" v-model:tab=\"settingsTab\" :editor=\"editor\" />\n  </template>\n</template>\n"],"mappings":"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"}

package/dist/vue/components/EditorSurface.vue.d.ts

@@ -1,6 +1,8 @@
-import { AbilitiesOptions, BlockAction, SlashCommandItem } from "../../core/extension-points.js";
+import { CommandDef } from "../../core/command-types.js";
+import { AbilitiesOptions, BlockAction } from "../../core/extension-points.js";
 import { EditorMetadata, MetadataItem } from "../../core/metadata-types.js";
-import { CollaborationSession, EditorPreset, UploadFn } from "../../core/feature.js";
+import { CollaborationSession, EditorPreset } from "../../core/feature.js";
+import "../../core/commands.js";
 import { AnyExtension, Editor, JSONContent } from "@tiptap/vue-3";
 //#region src/vue/components/EditorSurface.vue.d.ts
 type __VLS_Props = {
@@ -18,12 +20,10 @@ type __VLS_Props = {
   extensions?: AnyExtension[];
   /** Hover actions shown after the features' own; shown by an installed block-UI feature. */
   blockActions?: BlockAction[];
-  /** Builds the `/` menu from the features' commands; absent = the features' commands. Read once at setup. */
-  slashCommands?: (defaults: SlashCommandItem[]) => SlashCommandItem[];
-  /** Document whose package stores uploads (media feature). Read once at setup. */
+  /** Builds the final commands (and with them the `/` menu) from the features' commands; absent = the features' commands. Read once at setup. */
+  commands?: (defaults: CommandDef[]) => CommandDef[];
+  /** Document whose package stores uploads (`backend.assets`, media feature). Read once at setup. */
   documentId?: string;
-  /** Stores an uploaded file and returns its URL (media feature). Read once at setup. */
-  upload?: UploadFn;
   editable?: boolean;
   /** `internal`: the surface owns its settings UI; `external`: it emits `settingsOpen` and the host shows the panel. */
   settingsUi?: 'internal' | 'external';

package/dist/vue/components/EditorToolbar.js

@@ -1,7 +1,5 @@
-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 { useUiKit } from "../kit/use-ui-kit.js";
 import { useEditorContext } from "../context.js";
 import { useEditorI18n } from "../use-editor-i18n.js";
@@ -17,15 +15,12 @@ const _hoisted_2 = {
 };
 /**
 * The toolbar of an editor, placed anywhere on the page. `editor` is the instance it works on (from the surface's
-* `ready` event); the preset registered for that instance supplies the groups, `preset` renders them (disabled) while
-* there is no editor yet. Never reads a global active editor.
+* `ready` event); 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. Never reads a global active editor.
 */
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "EditorToolbar",
-	props: {
-		editor: {},
-		preset: {}
-	},
+	props: { editor: {} },
 	setup(__props) {
 		const props = __props;
 		const { Button: UButton, DropdownMenu: UDropdownMenu, FieldGroup: UFieldGroup, Tooltip: UTooltip } = useUiKit();
@@ -43,38 +38,35 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (!preset) return [];
 			const cached = built.get(preset);
 			if (cached) return cached;
-			const build = () => mergeToolbarGroups(contributions(preset, "toolbar").flatMap((factory) => factory(ctx)));
+			const build = () => toolbarOf(preset, ctx);
 			const groups = instance ? instance.appContext.app.runWithContext(build) : build();
 			built.set(preset, groups);
 			return groups;
 		}
-		groupsOf(props.preset);
+		const NO_EDITOR = {
+			visible: true,
+			enabled: false,
+			active: false
+		};
 		const visibleGroups = computed(() => {
-			const editor = props.editor;
-			return groupsOf(editorEntryOf(editor && toRaw(editor))?.preset ?? props.preset).filter((group) => !editor || !group.visible || group.visible(editor)).map((group) => ({
+			const editor = props.editor && toRaw(props.editor);
+			return groupsOf(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((cmd) => ({
+					cmd,
+					state: editor ? commandState(editor, cmd, "selection") : NO_EDITOR
+				})).filter(({ state }) => state.visible)
 			})).filter(({ items }) => items.length > 0);
 		});
-		const abilities = computed(() => props.editor ? abilitiesAtSelection(props.editor) : /* @__PURE__ */ new Set());
-		function active(item) {
-			return !!props.editor && !!item.active?.(props.editor);
-		}
-		function disabled(item) {
-			const editor = props.editor;
-			if (!editor) return true;
-			if (item.disabled?.(editor)) return true;
-			return !active(item) && !!item.ability && !abilities.value.has(item.ability);
-		}
-		function run(item) {
-			if (props.editor) item.run?.(props.editor);
+		function run(cmd) {
+			if (props.editor && "run" in cmd) cmd.run(props.editor);
 		}
-		function menuOf(item) {
-			return props.editor && item.menu ? item.menu(props.editor) : [];
+		function menuOf(cmd) {
+			return props.editor && "menu" in cmd ? cmd.menu(props.editor) : [];
 		}
 		/** Descriptors are framework-agnostic (`component: unknown`); in this Vue toolbar they are Vue components. */
-		function componentOf(item) {
-			return item.component;
+		function componentOf(cmd) {
+			return "component" in cmd ? cmd.component : void 0;
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
@@ -83,25 +75,25 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"aria-label": unref(t)("toolbar.label")
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleGroups.value, ({ group, items }, gi) => {
 				return openBlock(), createElementBlock(Fragment, { key: group.id }, [gi > 0 ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("v-if", true), createVNode(unref(UFieldGroup), { size: "sm" }, {
-					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(items, (item) => {
-						return openBlock(), createElementBlock(Fragment, { key: item.id }, [componentOf(item) ? (openBlock(), createBlock(resolveDynamicComponent(componentOf(item)), {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(items, ({ cmd, state }) => {
+						return openBlock(), createElementBlock(Fragment, { key: cmd.id }, [componentOf(cmd) ? (openBlock(), createBlock(resolveDynamicComponent(componentOf(cmd)), {
 							key: 0,
 							editor: props.editor
-						}, null, 8, ["editor"])) : item.menu ? (openBlock(), createBlock(unref(UDropdownMenu), {
+						}, null, 8, ["editor"])) : "menu" in cmd ? (openBlock(), createBlock(unref(UDropdownMenu), {
 							key: 1,
-							items: menuOf(item)
+							items: menuOf(cmd)
 						}, {
 							default: withCtx(() => [createVNode(unref(UTooltip), {
-								text: item.label,
-								kbds: item.kbds
+								text: cmd.label,
+								kbds: cmd.kbds
 							}, {
 								default: withCtx(() => [(openBlock(), createBlock(unref(UButton), {
-									key: item.icon,
+									key: cmd.icon,
 									color: "neutral",
 									variant: "ghost",
-									icon: item.icon,
-									"aria-label": item.label,
-									disabled: disabled(item),
+									icon: cmd.icon,
+									"aria-label": cmd.label,
+									disabled: !state.enabled,
 									onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
 								}, null, 8, [
 									"icon",
@@ -113,22 +105,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							_: 2
 						}, 1032, ["items"])) : (openBlock(), createBlock(unref(UTooltip), {
 							key: 2,
-							text: item.label,
-							kbds: item.kbds
+							text: cmd.label,
+							kbds: cmd.kbds
 						}, {
 							default: withCtx(() => [(openBlock(), createBlock(unref(UButton), {
-								key: item.icon,
+								key: cmd.icon,
 								color: "neutral",
 								variant: "ghost",
 								"active-color": "primary",
 								"active-variant": "soft",
-								icon: item.icon,
-								"aria-label": item.label,
-								active: active(item),
-								"aria-pressed": item.active ? active(item) : void 0,
-								disabled: disabled(item),
+								icon: cmd.icon,
+								"aria-label": cmd.label,
+								active: state.active,
+								"aria-pressed": cmd.active ? state.active : void 0,
+								disabled: !state.enabled,
 								onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
-								onClick: ($event) => run(item)
+								onClick: ($event) => run(cmd)
 							}, null, 8, [
 								"icon",
 								"aria-label",