@ecsplico/editor 2.1.1 → 3.0.0

package/dist/features/media/components/FileView.js

@@ -1,7 +1,7 @@
 import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
 import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
 import { formatBytes } from "../upload.js";
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, withCtx } from "vue";
 import { NodeViewWrapper, nodeViewProps } from "@tiptap/vue-3";
 //#region src/features/media/components/FileView.vue
 const _hoisted_1 = {
@@ -25,11 +25,20 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const { Button: UButton, Icon: UIcon } = useUiKit();
 		const { t } = useEditorI18n();
+		const reveal = ref(null);
+		function onRevealPage(event) {
+			const detail = event.detail;
+			if (typeof detail === "number" && detail > 0) reveal.value = {
+				page: detail,
+				n: (reveal.value?.n ?? 0) + 1
+			};
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(NodeViewWrapper), {
 				as: "figure",
 				class: normalizeClass(["media-block flex flex-col gap-1", { "is-selected": _ctx.selected }]),
-				"data-id": _ctx.node.attrs.id || void 0
+				"data-id": _ctx.node.attrs.id || void 0,
+				onSkRevealPage: onRevealPage
 			}, {
 				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
 					createVNode(unref(UIcon), {
@@ -56,8 +65,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						variant: "soft"
 					}, null, 8, ["href", "label"])
 				]), _ctx.node.attrs.mimeType === "application/pdf" && _ctx.node.attrs.src ? (openBlock(), createElementBlock("object", {
-					key: 0,
-					data: _ctx.node.attrs.src,
+					key: reveal.value?.n ?? 0,
+					data: reveal.value ? `${_ctx.node.attrs.src}#page=${reveal.value.page}` : _ctx.node.attrs.src,
 					type: "application/pdf",
 					contenteditable: "false",
 					class: "mt-2 h-[480px] w-full rounded-md border border-[var(--sk-border)]"

package/dist/features/media/components/FileView.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileView.js","names":["selected","node","editor","updateAttributes","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createElementVNode","_createVNode","_createElementBlock","_toDisplayString","_createCommentVNode"],"sources":["../../../../src/features/media/components/FileView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport { formatBytes } from '../upload'\n\ndefineProps(nodeViewProps)\n\nconst { Button: UButton, Icon: UIcon } = useUiKit()\nconst { t } = useEditorI18n()\n</script>\n\n<template>\n  <NodeViewWrapper\n    as=\"figure\"\n    :class=\"['media-block flex flex-col gap-1', { 'is-selected': selected }]\"\n    :data-id=\"node.attrs.id || undefined\"\n  >\n    <div class=\"flex items-center gap-2\" contenteditable=\"false\">\n      <UIcon\n        :name=\"node.attrs.mimeType === 'application/pdf' ? 'i-lucide-file-text' : 'i-lucide-file'\"\n        class=\"size-5 shrink-0 text-[var(--sk-muted)]\"\n      />\n      <input\n        :value=\"node.attrs.title\"\n        :placeholder=\"t('media.view.fileName')\"\n        :aria-label=\"t('media.view.fileName')\"\n        autocomplete=\"off\"\n        :readonly=\"!editor.isEditable\"\n        class=\"min-w-0 flex-1 rounded bg-transparent px-1 text-sm text-[var(--sk-muted)] outline-none placeholder:text-[var(--sk-fg-dimmed)] focus:bg-[color-mix(in_oklab,var(--sk-bg-accented)_50%,transparent)] focus:text-[var(--sk-fg-highlighted)]\"\n        @input=\"updateAttributes({ title: ($event.target as HTMLInputElement).value })\"\n      >\n      <span v-if=\"node.attrs.size\" class=\"shrink-0 text-xs text-[var(--sk-fg-dimmed)]\">{{ formatBytes(node.attrs.size) }}</span>\n      <UButton\n        :href=\"node.attrs.src\"\n        target=\"_blank\"\n        :label=\"t('media.view.open')\"\n        icon=\"i-lucide-external-link\"\n        size=\"xs\"\n        color=\"neutral\"\n        variant=\"soft\"\n      />\n    </div>\n    <object\n      v-if=\"node.attrs.mimeType === 'application/pdf' && node.attrs.src\"\n      :data=\"node.attrs.src\"\n      type=\"application/pdf\"\n      contenteditable=\"false\"\n      class=\"mt-2 h-[480px] w-full rounded-md border border-[var(--sk-border)]\"\n    />\n  </NodeViewWrapper>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,EAAE,QAAQ,SAAS,MAAM,UAAU,SAAS;EAClD,MAAM,EAAE,MAAM,cAAc;;GAI1B,OAAAI,UAAA,GAAAC,YAqCkBC,MAAA,eAAA,GAAA;IApChB,IAAG;IACF,OAAKC,eAAA,CAAA,mCAAA,EAAA,eAAuDP,KAAAA,SAAQ,CAAA,CAAA;IACpE,WAASC,KAAAA,KAAK,MAAM,MAAM,KAAA;;IAE3B,SAAAO,cAwBM,CAxBNC,mBAwBM,OAxBN,YAwBM;KAvBJC,YAGEJ,MAAA,KAAA,GAAA;MAFC,MAAML,KAAAA,KAAK,MAAM,aAAQ,oBAAA,uBAAA;MAC1B,OAAM;;KAERQ,mBAQC,SAAA;MAPE,OAAOR,KAAAA,KAAK,MAAM;MAClB,aAAaK,MAAA,CAAA,CAAC,CAAA,qBAAA;MACd,cAAYA,MAAA,CAAA,CAAC,CAAA,qBAAA;MACd,cAAa;MACZ,UAAQ,CAAGJ,KAAAA,OAAO;MACnB,OAAM;MACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEC,KAAAA,iBAAgB,EAAA,OAAW,OAAO,OAA4B,MAAK,CAAA;;KAEjEF,KAAAA,KAAK,MAAM,QAAvBG,UAAA,GAAAO,mBAA0H,QAA1H,YAA0HC,gBAAtCN,MAAA,WAAA,CAAW,CAACL,KAAAA,KAAK,MAAM,IAAI,CAAA,GAAA,CAAA,KAAAY,mBAAA,QAAA,IAAA;KAC/GH,YAQEJ,MAAA,OAAA,GAAA;MAPC,MAAML,KAAAA,KAAK,MAAM;MAClB,QAAO;MACN,OAAOK,MAAA,CAAA,CAAC,CAAA,iBAAA;MACT,MAAK;MACL,MAAK;MACL,OAAM;MACN,SAAQ;;IAIJL,CAAAA,GAAAA,KAAAA,KAAK,MAAM,aAAQ,qBAA0BA,KAAAA,KAAK,MAAM,OADhEG,UAAA,GAAAO,mBAME,UAAA;;KAJC,MAAMV,KAAAA,KAAK,MAAM;KAClB,MAAK;KACL,iBAAgB;KAChB,OAAM"}
+{"version":3,"file":"FileView.js","names":["selected","node","editor","updateAttributes","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createElementVNode","_createVNode","_createElementBlock","_toDisplayString","_createCommentVNode"],"sources":["../../../../src/features/media/components/FileView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'\nimport { ref } from 'vue'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport { formatBytes } from '../upload'\n\ndefineProps(nodeViewProps)\n\nconst { Button: UButton, Icon: UIcon } = useUiKit()\nconst { t } = useEditorI18n()\n\n// Page the PDF viewer was asked to open at (`revealSource`, locator „S. 3“). `n` counts the requests: the viewer is\n// remounted on every one, so asking for the same page again jumps back after the user scrolled away.\nconst reveal = ref<{ page: number, n: number } | null>(null)\nfunction onRevealPage(event: Event) {\n  const detail = (event as CustomEvent<unknown>).detail\n  if (typeof detail === 'number' && detail > 0) reveal.value = { page: detail, n: (reveal.value?.n ?? 0) + 1 }\n}\n</script>\n\n<template>\n  <NodeViewWrapper\n    as=\"figure\"\n    :class=\"['media-block flex flex-col gap-1', { 'is-selected': selected }]\"\n    :data-id=\"node.attrs.id || undefined\"\n    @sk-reveal-page=\"onRevealPage\"\n  >\n    <div class=\"flex items-center gap-2\" contenteditable=\"false\">\n      <UIcon\n        :name=\"node.attrs.mimeType === 'application/pdf' ? 'i-lucide-file-text' : 'i-lucide-file'\"\n        class=\"size-5 shrink-0 text-[var(--sk-muted)]\"\n      />\n      <input\n        :value=\"node.attrs.title\"\n        :placeholder=\"t('media.view.fileName')\"\n        :aria-label=\"t('media.view.fileName')\"\n        autocomplete=\"off\"\n        :readonly=\"!editor.isEditable\"\n        class=\"min-w-0 flex-1 rounded bg-transparent px-1 text-sm text-[var(--sk-muted)] outline-none placeholder:text-[var(--sk-fg-dimmed)] focus:bg-[color-mix(in_oklab,var(--sk-bg-accented)_50%,transparent)] focus:text-[var(--sk-fg-highlighted)]\"\n        @input=\"updateAttributes({ title: ($event.target as HTMLInputElement).value })\"\n      >\n      <span v-if=\"node.attrs.size\" class=\"shrink-0 text-xs text-[var(--sk-fg-dimmed)]\">{{ formatBytes(node.attrs.size) }}</span>\n      <UButton\n        :href=\"node.attrs.src\"\n        target=\"_blank\"\n        :label=\"t('media.view.open')\"\n        icon=\"i-lucide-external-link\"\n        size=\"xs\"\n        color=\"neutral\"\n        variant=\"soft\"\n      />\n    </div>\n    <object\n      v-if=\"node.attrs.mimeType === 'application/pdf' && node.attrs.src\"\n      :key=\"reveal?.n ?? 0\"\n      :data=\"reveal ? `${node.attrs.src}#page=${reveal.page}` : node.attrs.src\"\n      type=\"application/pdf\"\n      contenteditable=\"false\"\n      class=\"mt-2 h-[480px] w-full rounded-md border border-[var(--sk-border)]\"\n    />\n  </NodeViewWrapper>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EASA,MAAM,EAAE,QAAQ,SAAS,MAAM,UAAU,SAAS;EAClD,MAAM,EAAE,MAAM,cAAc;EAI5B,MAAM,SAAS,IAAwC,IAAI;EAC3D,SAAS,aAAa,OAAc;GAClC,MAAM,SAAU,MAA+B;GAC/C,IAAI,OAAO,WAAW,YAAY,SAAS,GAAG,OAAO,QAAQ;IAAE,MAAM;IAAQ,IAAI,OAAO,OAAO,KAAK,KAAK;GAAE;EAC7G;;GAIE,OAAAI,UAAA,GAAAC,YAuCkBC,MAAA,eAAA,GAAA;IAtChB,IAAG;IACF,OAAKC,eAAA,CAAA,mCAAA,EAAA,eAAuDP,KAAAA,SAAQ,CAAA,CAAA;IACpE,WAASC,KAAAA,KAAK,MAAM,MAAM,KAAA;IAC1B,gBAAgB;;IAEjB,SAAAO,cAwBM,CAxBNC,mBAwBM,OAxBN,YAwBM;KAvBJC,YAGEJ,MAAA,KAAA,GAAA;MAFC,MAAML,KAAAA,KAAK,MAAM,aAAQ,oBAAA,uBAAA;MAC1B,OAAM;;KAERQ,mBAQC,SAAA;MAPE,OAAOR,KAAAA,KAAK,MAAM;MAClB,aAAaK,MAAA,CAAA,CAAC,CAAA,qBAAA;MACd,cAAYA,MAAA,CAAA,CAAC,CAAA,qBAAA;MACd,cAAa;MACZ,UAAQ,CAAGJ,KAAAA,OAAO;MACnB,OAAM;MACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEC,KAAAA,iBAAgB,EAAA,OAAW,OAAO,OAA4B,MAAK,CAAA;;KAEjEF,KAAAA,KAAK,MAAM,QAAvBG,UAAA,GAAAO,mBAA0H,QAA1H,YAA0HC,gBAAtCN,MAAA,WAAA,CAAW,CAACL,KAAAA,KAAK,MAAM,IAAI,CAAA,GAAA,CAAA,KAAAY,mBAAA,QAAA,IAAA;KAC/GH,YAQEJ,MAAA,OAAA,GAAA;MAPC,MAAML,KAAAA,KAAK,MAAM;MAClB,QAAO;MACN,OAAOK,MAAA,CAAA,CAAC,CAAA,iBAAA;MACT,MAAK;MACL,MAAK;MACL,OAAM;MACN,SAAQ;;IAIJL,CAAAA,GAAAA,KAAAA,KAAK,MAAM,aAAQ,qBAA0BA,KAAAA,KAAK,MAAM,OADhEG,UAAA,GAAAO,mBAOE,UAAA;KALC,KAAK,OAAA,OAAQ,KAAC;KACd,MAAM,OAAA,QAAM,GAAMV,KAAAA,KAAK,MAAM,IAAG,QAAS,OAAA,MAAO,SAASA,KAAAA,KAAK,MAAM;KACrE,MAAK;KACL,iBAAgB;KAChB,OAAM"}

package/dist/features/media/feature.d.ts

@@ -10,12 +10,12 @@ export interface MediaUi<C> {
   nodeViews: MediaNodeViews;
 }
 /**
- * Image, audio, video and file blocks with their views, upload (the surface's `upload` prop, else the document's asset
- * endpoint), drop/paste of files, the audio recorder, and the toolbar and `/` entries that open the file picker or
+ * Image, audio, video and file blocks with their views, upload (`backend.assets`, filed under the surface's `documentId`),
+ * drop/paste of files, the audio recorder, and the toolbar and `/` entries that open the file picker or
  * recorder. Files import through the pipeline: text and Markdown files are parsed into blocks, everything else is
  * uploaded; the `wrapImport` stage (identity by default) may wrap the blocks, which are then inserted as they are.
  * Import problems reach the user through the surface's notice seam (`ctx.notify`).
- * Needs a backend (or an `upload` function) only when a file is uploaded.
+ * Needs a backend with the `assets` capability.
  */
 export declare function mediaFeatureCore<C>(ui: MediaUi<C>): EditorFeature<C>;
 //#endregion

package/dist/features/media/feature.js

@@ -1,9 +1,8 @@
 import { ABILITY } from "../../core/schema/abilities.js";
-import { acceptFor } from "./schema.js";
+import { ImageNode, acceptFor, mediaSchemaExtensions } from "./schema.js";
 import { Media, openAudioRecorder, pickFiles, uploadOf } from "./upload.js";
 import { fileImport } from "./file-import.js";
 import { mediaBlocks } from "./node-views.js";
-import { Image } from "@tiptap/extension-image";
 import { FileHandler } from "@tiptap/extension-file-handler";
 //#region src/features/media/feature.ts
 const PICKERS = [
@@ -27,21 +26,24 @@ const PICKERS = [
 	}
 ];
 /**
-* Image, audio, video and file blocks with their views, upload (the surface's `upload` prop, else the document's asset
-* endpoint), drop/paste of files, the audio recorder, and the toolbar and `/` entries that open the file picker or
+* Image, audio, video and file blocks with their views, upload (`backend.assets`, filed under the surface's `documentId`),
+* drop/paste of files, the audio recorder, and the toolbar and `/` entries that open the file picker or
 * recorder. Files import through the pipeline: text and Markdown files are parsed into blocks, everything else is
 * uploaded; the `wrapImport` stage (identity by default) may wrap the blocks, which are then inserted as they are.
 * Import problems reach the user through the surface's notice seam (`ctx.notify`).
-* Needs a backend (or an `upload` function) only when a file is uploaded.
+* Needs a backend with the `assets` capability.
 */
 function mediaFeatureCore(ui) {
 	const { AudioBlock, VideoBlock, FileBlock } = mediaBlocks(ui.nodeViews);
 	return {
 		id: "media",
+		dimension: "content",
+		backend: ["assets"],
+		schemaExtensions: mediaSchemaExtensions,
 		extensions: (ctx) => {
 			const { importFiles } = fileImport(ctx.notify, ctx.t);
 			return [
-				Image,
+				ImageNode,
 				AudioBlock,
 				VideoBlock,
 				FileBlock,
@@ -56,35 +58,26 @@ function mediaFeatureCore(ui) {
 				})
 			];
 		},
-		toolbar: (ctx) => [{
-			id: "inserts",
-			order: 50,
-			items: [...PICKERS.map((picker, index) => ({
-				id: picker.id,
-				order: 20 + index * 10,
-				icon: picker.icon,
-				label: ctx.t(picker.labelKey),
-				ability: ABILITY.media,
-				run: (editor) => void pickAndImport(editor, acceptFor(picker.kind))
-			})), {
-				id: "aufnahme",
-				order: 50,
-				icon: "i-lucide-mic",
-				label: ctx.t("media.toolbar.record"),
-				ability: ABILITY.record,
-				run: openAudioRecorder
-			}]
-		}],
-		slashCommands: (ctx) => [...PICKERS.map((picker) => ({
+		commands: (ctx) => [...PICKERS.map((picker, index) => ({
 			id: picker.id,
-			label: ctx.t(picker.labelKey),
+			toolbar: {
+				group: "inserts",
+				order: 20 + index * 10
+			},
+			slash: {},
 			icon: picker.icon,
+			label: ctx.t(picker.labelKey),
 			ability: ABILITY.media,
 			run: (editor) => void pickAndImport(editor, acceptFor(picker.kind), editor.state.selection.from)
 		})), {
 			id: "aufnahme",
-			label: ctx.t("media.slash.record"),
+			toolbar: {
+				group: "inserts",
+				order: 50
+			},
+			slash: {},
 			icon: "i-lucide-mic",
+			label: ctx.t("media.slash.record"),
 			ability: ABILITY.record,
 			run: openAudioRecorder
 		}],

package/dist/features/media/feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/media/feature.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { FileHandler } from '@tiptap/extension-file-handler'\nimport { Image } from '@tiptap/extension-image'\nimport type { EditorFeature, SlashCommandItem, ToolbarItem } from '../../core'\nimport { ABILITY } from '../../core/schema'\nimport type { MessageKey } from '../../i18n'\nimport { fileImport } from './file-import'\nimport { type MediaNodeViews, mediaBlocks } from './node-views'\nimport { acceptFor, type MediaKind } from './schema'\nimport { Media, openAudioRecorder, pickFiles, uploadOf } from './upload'\n\n/** What a framework binding supplies to the media feature. */\nexport interface MediaUi<C> {\n  /** The „Audio aufnehmen“ modal; mounted as an overlay, opened by `openAudioRecorder(editor)`. */\n  recorderModal: C\n  /** The audio, video and file block views of the framework. */\n  nodeViews: MediaNodeViews\n}\n\nconst PICKERS: readonly { id: string, labelKey: MessageKey, icon: string, kind: MediaKind }[] = [\n  { id: 'bild', labelKey: 'media.picker.image', icon: 'i-lucide-image', kind: 'image' },\n  { id: 'audio', labelKey: 'media.picker.audio', icon: 'i-lucide-file-audio', kind: 'audio' },\n  { id: 'video', labelKey: 'media.picker.video', icon: 'i-lucide-video', kind: 'video' },\n]\n\n/**\n * Image, audio, video and file blocks with their views, upload (the surface's `upload` prop, else the document's asset\n * endpoint), drop/paste of files, the audio recorder, and the toolbar and `/` entries that open the file picker or\n * recorder. Files import through the pipeline: text and Markdown files are parsed into blocks, everything else is\n * uploaded; the `wrapImport` stage (identity by default) may wrap the blocks, which are then inserted as they are.\n * Import problems reach the user through the surface's notice seam (`ctx.notify`).\n * Needs a backend (or an `upload` function) only when a file is uploaded.\n */\nexport function mediaFeatureCore<C>(ui: MediaUi<C>): EditorFeature<C> {\n  const { AudioBlock, VideoBlock, FileBlock } = mediaBlocks(ui.nodeViews)\n  return {\n    id: 'media',\n    extensions: (ctx) => {\n      const { importFiles } = fileImport(ctx.notify, ctx.t)\n      return [\n        Image,\n        AudioBlock,\n        VideoBlock,\n        FileBlock,\n        Media.configure({ upload: uploadOf(ctx), importFiles }),\n        FileHandler.configure({\n          consumePasteEvent: true,\n          onDrop: (editor, files, pos) => importFiles(editor, files, pos),\n          onPaste: (editor, files) => importFiles(editor, files),\n        }),\n      ]\n    },\n    toolbar: ctx => [{\n      id: 'inserts',\n      order: 50,\n      items: [\n        ...PICKERS.map((picker, index): ToolbarItem<C> => ({\n          id: picker.id,\n          order: 20 + index * 10,\n          icon: picker.icon,\n          label: ctx.t(picker.labelKey),\n          ability: ABILITY.media,\n          run: editor => void pickAndImport(editor, acceptFor(picker.kind)),\n        })),\n        { id: 'aufnahme', order: 50, icon: 'i-lucide-mic', label: ctx.t('media.toolbar.record'), ability: ABILITY.record, run: openAudioRecorder },\n      ],\n    }],\n    slashCommands: (ctx): SlashCommandItem[] => [\n      ...PICKERS.map((picker): SlashCommandItem => ({\n        id: picker.id,\n        label: ctx.t(picker.labelKey),\n        icon: picker.icon,\n        ability: ABILITY.media,\n        run: editor => void pickAndImport(editor, acceptFor(picker.kind), editor.state.selection.from),\n      })),\n      { id: 'aufnahme', label: ctx.t('media.slash.record'), icon: 'i-lucide-mic', ability: ABILITY.record, run: openAudioRecorder },\n    ],\n    overlays: [ui.recorderModal],\n  }\n}\n\nasync function pickAndImport(editor: Editor, accept: string, pos?: number): Promise<void> {\n  const files = await pickFiles(accept)\n  if (files.length && !editor.isDestroyed) await editor.storage.media.importFiles(editor, files, pos)\n}\n"],"mappings":";;;;;;;;AAmBA,MAAM,UAA0F;CAC9F;EAAE,IAAI;EAAQ,UAAU;EAAsB,MAAM;EAAkB,MAAM;CAAQ;CACpF;EAAE,IAAI;EAAS,UAAU;EAAsB,MAAM;EAAuB,MAAM;CAAQ;CAC1F;EAAE,IAAI;EAAS,UAAU;EAAsB,MAAM;EAAkB,MAAM;CAAQ;AACvF;;;;;;;;;AAUA,SAAgB,iBAAoB,IAAkC;CACpE,MAAM,EAAE,YAAY,YAAY,cAAc,YAAY,GAAG,SAAS;CACtE,OAAO;EACL,IAAI;EACJ,aAAa,QAAQ;GACnB,MAAM,EAAE,gBAAgB,WAAW,IAAI,QAAQ,IAAI,CAAC;GACpD,OAAO;IACL;IACA;IACA;IACA;IACA,MAAM,UAAU;KAAE,QAAQ,SAAS,GAAG;KAAG;IAAY,CAAC;IACtD,YAAY,UAAU;KACpB,mBAAmB;KACnB,SAAS,QAAQ,OAAO,QAAQ,YAAY,QAAQ,OAAO,GAAG;KAC9D,UAAU,QAAQ,UAAU,YAAY,QAAQ,KAAK;IACvD,CAAC;GACH;EACF;EACA,UAAS,QAAO,CAAC;GACf,IAAI;GACJ,OAAO;GACP,OAAO,CACL,GAAG,QAAQ,KAAK,QAAQ,WAA2B;IACjD,IAAI,OAAO;IACX,OAAO,KAAK,QAAQ;IACpB,MAAM,OAAO;IACb,OAAO,IAAI,EAAE,OAAO,QAAQ;IAC5B,SAAS,QAAQ;IACjB,MAAK,WAAU,KAAK,cAAc,QAAQ,UAAU,OAAO,IAAI,CAAC;GAClE,EAAE,GACF;IAAE,IAAI;IAAY,OAAO;IAAI,MAAM;IAAgB,OAAO,IAAI,EAAE,sBAAsB;IAAG,SAAS,QAAQ;IAAQ,KAAK;GAAkB,CAC3I;EACF,CAAC;EACD,gBAAgB,QAA4B,CAC1C,GAAG,QAAQ,KAAK,YAA8B;GAC5C,IAAI,OAAO;GACX,OAAO,IAAI,EAAE,OAAO,QAAQ;GAC5B,MAAM,OAAO;GACb,SAAS,QAAQ;GACjB,MAAK,WAAU,KAAK,cAAc,QAAQ,UAAU,OAAO,IAAI,GAAG,OAAO,MAAM,UAAU,IAAI;EAC/F,EAAE,GACF;GAAE,IAAI;GAAY,OAAO,IAAI,EAAE,oBAAoB;GAAG,MAAM;GAAgB,SAAS,QAAQ;GAAQ,KAAK;EAAkB,CAC9H;EACA,UAAU,CAAC,GAAG,aAAa;CAC7B;AACF;AAEA,eAAe,cAAc,QAAgB,QAAgB,KAA6B;CACxF,MAAM,QAAQ,MAAM,UAAU,MAAM;CACpC,IAAI,MAAM,UAAU,CAAC,OAAO,aAAa,MAAM,OAAO,QAAQ,MAAM,YAAY,QAAQ,OAAO,GAAG;AACpG"}
+{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/media/feature.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { FileHandler } from '@tiptap/extension-file-handler'\nimport type { CommandDef, EditorFeature } from '../../core'\nimport { ABILITY } from '../../core/schema'\nimport type { MessageKey } from '../../i18n'\nimport { fileImport } from './file-import'\nimport { type MediaNodeViews, mediaBlocks } from './node-views'\nimport { acceptFor, ImageNode, mediaSchemaExtensions, type MediaKind } from './schema'\nimport { Media, openAudioRecorder, pickFiles, uploadOf } from './upload'\n\n/** What a framework binding supplies to the media feature. */\nexport interface MediaUi<C> {\n  /** The „Audio aufnehmen“ modal; mounted as an overlay, opened by `openAudioRecorder(editor)`. */\n  recorderModal: C\n  /** The audio, video and file block views of the framework. */\n  nodeViews: MediaNodeViews\n}\n\nconst PICKERS: readonly { id: string, labelKey: MessageKey, icon: string, kind: MediaKind }[] = [\n  { id: 'bild', labelKey: 'media.picker.image', icon: 'i-lucide-image', kind: 'image' },\n  { id: 'audio', labelKey: 'media.picker.audio', icon: 'i-lucide-file-audio', kind: 'audio' },\n  { id: 'video', labelKey: 'media.picker.video', icon: 'i-lucide-video', kind: 'video' },\n]\n\n/**\n * Image, audio, video and file blocks with their views, upload (`backend.assets`, filed under the surface's `documentId`),\n * drop/paste of files, the audio recorder, and the toolbar and `/` entries that open the file picker or\n * recorder. Files import through the pipeline: text and Markdown files are parsed into blocks, everything else is\n * uploaded; the `wrapImport` stage (identity by default) may wrap the blocks, which are then inserted as they are.\n * Import problems reach the user through the surface's notice seam (`ctx.notify`).\n * Needs a backend with the `assets` capability.\n */\nexport function mediaFeatureCore<C>(ui: MediaUi<C>): EditorFeature<C> {\n  const { AudioBlock, VideoBlock, FileBlock } = mediaBlocks(ui.nodeViews)\n  return {\n    id: 'media',\n    dimension: 'content',\n    backend: ['assets'],\n    schemaExtensions: mediaSchemaExtensions,\n    extensions: (ctx) => {\n      const { importFiles } = fileImport(ctx.notify, ctx.t)\n      return [\n        ImageNode,\n        AudioBlock,\n        VideoBlock,\n        FileBlock,\n        Media.configure({ upload: uploadOf(ctx), importFiles }),\n        FileHandler.configure({\n          consumePasteEvent: true,\n          onDrop: (editor, files, pos) => importFiles(editor, files, pos),\n          onPaste: (editor, files) => importFiles(editor, files),\n        }),\n      ]\n    },\n    commands: (ctx): CommandDef<C>[] => [\n      ...PICKERS.map((picker, index): CommandDef<C> => ({\n        id: picker.id,\n        toolbar: { group: 'inserts', order: 20 + index * 10 },\n        slash: {},\n        icon: picker.icon,\n        label: ctx.t(picker.labelKey),\n        ability: ABILITY.media,\n        // The caret at the click: the picker takes a while and the document may change meanwhile.\n        run: editor => void pickAndImport(editor, acceptFor(picker.kind), editor.state.selection.from),\n      })),\n      { id: 'aufnahme', toolbar: { group: 'inserts', order: 50 }, slash: {}, icon: 'i-lucide-mic', label: ctx.t('media.slash.record'), ability: ABILITY.record, run: openAudioRecorder },\n    ],\n    overlays: [ui.recorderModal],\n  }\n}\n\nasync function pickAndImport(editor: Editor, accept: string, pos?: number): Promise<void> {\n  const files = await pickFiles(accept)\n  if (files.length && !editor.isDestroyed) await editor.storage.media.importFiles(editor, files, pos)\n}\n"],"mappings":";;;;;;;AAkBA,MAAM,UAA0F;CAC9F;EAAE,IAAI;EAAQ,UAAU;EAAsB,MAAM;EAAkB,MAAM;CAAQ;CACpF;EAAE,IAAI;EAAS,UAAU;EAAsB,MAAM;EAAuB,MAAM;CAAQ;CAC1F;EAAE,IAAI;EAAS,UAAU;EAAsB,MAAM;EAAkB,MAAM;CAAQ;AACvF;;;;;;;;;AAUA,SAAgB,iBAAoB,IAAkC;CACpE,MAAM,EAAE,YAAY,YAAY,cAAc,YAAY,GAAG,SAAS;CACtE,OAAO;EACL,IAAI;EACJ,WAAW;EACX,SAAS,CAAC,QAAQ;EAClB,kBAAkB;EAClB,aAAa,QAAQ;GACnB,MAAM,EAAE,gBAAgB,WAAW,IAAI,QAAQ,IAAI,CAAC;GACpD,OAAO;IACL;IACA;IACA;IACA;IACA,MAAM,UAAU;KAAE,QAAQ,SAAS,GAAG;KAAG;IAAY,CAAC;IACtD,YAAY,UAAU;KACpB,mBAAmB;KACnB,SAAS,QAAQ,OAAO,QAAQ,YAAY,QAAQ,OAAO,GAAG;KAC9D,UAAU,QAAQ,UAAU,YAAY,QAAQ,KAAK;IACvD,CAAC;GACH;EACF;EACA,WAAW,QAAyB,CAClC,GAAG,QAAQ,KAAK,QAAQ,WAA0B;GAChD,IAAI,OAAO;GACX,SAAS;IAAE,OAAO;IAAW,OAAO,KAAK,QAAQ;GAAG;GACpD,OAAO,CAAC;GACR,MAAM,OAAO;GACb,OAAO,IAAI,EAAE,OAAO,QAAQ;GAC5B,SAAS,QAAQ;GAEjB,MAAK,WAAU,KAAK,cAAc,QAAQ,UAAU,OAAO,IAAI,GAAG,OAAO,MAAM,UAAU,IAAI;EAC/F,EAAE,GACF;GAAE,IAAI;GAAY,SAAS;IAAE,OAAO;IAAW,OAAO;GAAG;GAAG,OAAO,CAAC;GAAG,MAAM;GAAgB,OAAO,IAAI,EAAE,oBAAoB;GAAG,SAAS,QAAQ;GAAQ,KAAK;EAAkB,CACnL;EACA,UAAU,CAAC,GAAG,aAAa;CAC7B;AACF;AAEA,eAAe,cAAc,QAAgB,QAAgB,KAA6B;CACxF,MAAM,QAAQ,MAAM,UAAU,MAAM;CACpC,IAAI,MAAM,UAAU,CAAC,OAAO,aAAa,MAAM,OAAO,QAAQ,MAAM,YAAY,QAAQ,OAAO,GAAG;AACpG"}

package/dist/features/media/file-import.js

@@ -19,8 +19,8 @@ async function blocksOf(editor, file) {
 		const blocks = structureBlocks(editor, parseBlocks(editor, await file.text()).blocks);
 		return blocks.length ? blocks : [{ type: "paragraph" }];
 	}
-	const { url } = await editor.storage.media.upload(file);
-	return [mediaNodeFor(file, url) ?? fileNodeFor(file, url)];
+	const { url, sha256 } = await editor.storage.media.upload(file);
+	return [mediaNodeFor(file, url, sha256) ?? fileNodeFor(file, url, sha256)];
 }
 /**
 * Imports files into the editor. Text and Markdown files are parsed through the editor's block pipeline into blocks;

package/dist/features/media/file-import.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-import.js","names":[],"sources":["../../../src/features/media/file-import.ts"],"sourcesContent":["import type { Editor, JSONContent } from '@tiptap/core'\nimport type { Translate } from '../../i18n'\nimport { captureRange, fetchErrorMessage, type Notifier, parseBlocks, releaseRanges, resolveRange, structureBlocks, wrapImportBlocks } from '../../core'\nimport { mediaMime } from './schema'\nimport { fileNodeFor, type ImportFilesFn, mediaNodeFor } from './upload'\n\n/** Text files are read into the document, bigger ones are refused. */\nexport const MAX_TEXT_BYTES = 2 * 1024 * 1024\n/** Browsers report `''` (or something else) as the type of `.md` files, so the name decides too. */\nconst TEXT_EXTENSION = /\\.(md|markdown|txt)$/i\n\n/** Whether `file` is imported as text (parsed Markdown) rather than uploaded. */\nexport function isTextFile(file: File): boolean {\n  const mime = mediaMime(file.type)\n  return mime === 'text/markdown' || mime === 'text/plain' || TEXT_EXTENSION.test(file.name)\n}\n\n/** Blocks for `file`: its text parsed through the editor's block pipeline (parse, normalize, segment, structure), or the uploaded media/file block. */\nasync function blocksOf(editor: Editor, file: File): Promise<JSONContent[]> {\n  if (isTextFile(file)) {\n    const blocks = structureBlocks(editor, parseBlocks(editor, await file.text()).blocks)\n    return blocks.length ? blocks : [{ type: 'paragraph' }]\n  }\n  const { url } = await editor.storage.media.upload(file)\n  return [mediaNodeFor(file, url) ?? fileNodeFor(file, url)]\n}\n\n/**\n * Imports files into the editor. Text and Markdown files are parsed through the editor's block pipeline into blocks;\n * all other files are uploaded through `editor.storage.media.upload` and appear as their media or file block. The\n * blocks go through the pipeline's `wrapImport` stage (identity unless an installed feature wraps imports) and are\n * inserted as they are. Problems (an oversized text file, a failed upload) are reported through `notify` and the file\n * is skipped. Framework-free: the Vue and React bindings pass their notifier and translator (`useFileImport()`), the feature passes `ctx.notify` and `ctx.t`.\n */\nexport function fileImport(notify: Notifier, t: Translate): { importFiles: ImportFilesFn } {\n  // Sequential so files land in selection order; a failed file is reported and skipped. A drop position is anchored,\n  // since uploads take a while and the document may change meanwhile; later files follow the first one, because\n  // `insertContentAt` leaves the selection right after what it inserted. Resolves whether every file was imported.\n  async function importFiles(editor: Editor, files: File[] | FileList, pos?: number): Promise<boolean> {\n    let anchor = pos === undefined ? null : captureRange(editor, { from: pos, to: pos })\n    let allImported = true\n    try {\n      for (const file of Array.from(files)) {\n        if (isTextFile(file) && file.size > MAX_TEXT_BYTES) {\n          notify({ title: t('media.import.tooLarge.title'), description: t('media.import.tooLarge.description', { name: file.name }), kind: 'error' })\n          allImported = false\n          continue\n        }\n        try {\n          const blocks = wrapImportBlocks(editor, file, await blocksOf(editor, file))\n          if (editor.isDestroyed) return false\n          const at = (anchor && resolveRange(editor.state, anchor)?.from) ?? editor.state.selection.to\n          editor.chain().focus().insertContentAt(at, blocks).run()\n          if (anchor) releaseRanges(editor, [anchor])\n          anchor = null\n        }\n        catch (error) {\n          notify({ title: t('media.import.failed'), description: fetchErrorMessage(error), kind: 'error' })\n          allImported = false\n        }\n      }\n    }\n    finally {\n      if (anchor) releaseRanges(editor, [anchor])\n    }\n    return allImported\n  }\n\n  return { importFiles }\n}\n"],"mappings":";;;;;;;AAOA,MAAa,iBAAiB;;AAE9B,MAAM,iBAAiB;;AAGvB,SAAgB,WAAW,MAAqB;CAC9C,MAAM,OAAO,UAAU,KAAK,IAAI;CAChC,OAAO,SAAS,mBAAmB,SAAS,gBAAgB,eAAe,KAAK,KAAK,IAAI;AAC3F;;AAGA,eAAe,SAAS,QAAgB,MAAoC;CAC1E,IAAI,WAAW,IAAI,GAAG;EACpB,MAAM,SAAS,gBAAgB,QAAQ,YAAY,QAAQ,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM;EACpF,OAAO,OAAO,SAAS,SAAS,CAAC,EAAE,MAAM,YAAY,CAAC;CACxD;CACA,MAAM,EAAE,QAAQ,MAAM,OAAO,QAAQ,MAAM,OAAO,IAAI;CACtD,OAAO,CAAC,aAAa,MAAM,GAAG,KAAK,YAAY,MAAM,GAAG,CAAC;AAC3D;;;;;;;;AASA,SAAgB,WAAW,QAAkB,GAA8C;CAIzF,eAAe,YAAY,QAAgB,OAA0B,KAAgC;EACnG,IAAI,SAAS,QAAQ,KAAA,IAAY,OAAO,aAAa,QAAQ;GAAE,MAAM;GAAK,IAAI;EAAI,CAAC;EACnF,IAAI,cAAc;EAClB,IAAI;GACF,KAAK,MAAM,QAAQ,MAAM,KAAK,KAAK,GAAG;IACpC,IAAI,WAAW,IAAI,KAAK,KAAK,OAAA,SAAuB;KAClD,OAAO;MAAE,OAAO,EAAE,6BAA6B;MAAG,aAAa,EAAE,qCAAqC,EAAE,MAAM,KAAK,KAAK,CAAC;MAAG,MAAM;KAAQ,CAAC;KAC3I,cAAc;KACd;IACF;IACA,IAAI;KACF,MAAM,SAAS,iBAAiB,QAAQ,MAAM,MAAM,SAAS,QAAQ,IAAI,CAAC;KAC1E,IAAI,OAAO,aAAa,OAAO;KAC/B,MAAM,MAAM,UAAU,aAAa,OAAO,OAAO,MAAM,CAAC,EAAE,SAAS,OAAO,MAAM,UAAU;KAC1F,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,gBAAgB,IAAI,MAAM,CAAC,CAAC,IAAI;KACvD,IAAI,QAAQ,cAAc,QAAQ,CAAC,MAAM,CAAC;KAC1C,SAAS;IACX,SACO,OAAO;KACZ,OAAO;MAAE,OAAO,EAAE,qBAAqB;MAAG,aAAa,kBAAkB,KAAK;MAAG,MAAM;KAAQ,CAAC;KAChG,cAAc;IAChB;GACF;EACF,UACQ;GACN,IAAI,QAAQ,cAAc,QAAQ,CAAC,MAAM,CAAC;EAC5C;EACA,OAAO;CACT;CAEA,OAAO,EAAE,YAAY;AACvB"}
+{"version":3,"file":"file-import.js","names":[],"sources":["../../../src/features/media/file-import.ts"],"sourcesContent":["import type { Editor, JSONContent } from '@tiptap/core'\nimport type { Translate } from '../../i18n'\nimport { captureRange, fetchErrorMessage, type Notifier, parseBlocks, releaseRanges, resolveRange, structureBlocks, wrapImportBlocks } from '../../core'\nimport { mediaMime } from './schema'\nimport { fileNodeFor, type ImportFilesFn, mediaNodeFor } from './upload'\n\n/** Text files are read into the document, bigger ones are refused. */\nexport const MAX_TEXT_BYTES = 2 * 1024 * 1024\n/** Browsers report `''` (or something else) as the type of `.md` files, so the name decides too. */\nconst TEXT_EXTENSION = /\\.(md|markdown|txt)$/i\n\n/** Whether `file` is imported as text (parsed Markdown) rather than uploaded. */\nexport function isTextFile(file: File): boolean {\n  const mime = mediaMime(file.type)\n  return mime === 'text/markdown' || mime === 'text/plain' || TEXT_EXTENSION.test(file.name)\n}\n\n/** Blocks for `file`: its text parsed through the editor's block pipeline (parse, normalize, segment, structure), or the uploaded media/file block. */\nasync function blocksOf(editor: Editor, file: File): Promise<JSONContent[]> {\n  if (isTextFile(file)) {\n    const blocks = structureBlocks(editor, parseBlocks(editor, await file.text()).blocks)\n    return blocks.length ? blocks : [{ type: 'paragraph' }]\n  }\n  const { url, sha256 } = await editor.storage.media.upload(file)\n  return [mediaNodeFor(file, url, sha256) ?? fileNodeFor(file, url, sha256)]\n}\n\n/**\n * Imports files into the editor. Text and Markdown files are parsed through the editor's block pipeline into blocks;\n * all other files are uploaded through `editor.storage.media.upload` and appear as their media or file block. The\n * blocks go through the pipeline's `wrapImport` stage (identity unless an installed feature wraps imports) and are\n * inserted as they are. Problems (an oversized text file, a failed upload) are reported through `notify` and the file\n * is skipped. Framework-free: the Vue and React bindings pass their notifier and translator (`useFileImport()`), the feature passes `ctx.notify` and `ctx.t`.\n */\nexport function fileImport(notify: Notifier, t: Translate): { importFiles: ImportFilesFn } {\n  // Sequential so files land in selection order; a failed file is reported and skipped. A drop position is anchored,\n  // since uploads take a while and the document may change meanwhile; later files follow the first one, because\n  // `insertContentAt` leaves the selection right after what it inserted. Resolves whether every file was imported.\n  async function importFiles(editor: Editor, files: File[] | FileList, pos?: number): Promise<boolean> {\n    let anchor = pos === undefined ? null : captureRange(editor, { from: pos, to: pos })\n    let allImported = true\n    try {\n      for (const file of Array.from(files)) {\n        if (isTextFile(file) && file.size > MAX_TEXT_BYTES) {\n          notify({ title: t('media.import.tooLarge.title'), description: t('media.import.tooLarge.description', { name: file.name }), kind: 'error' })\n          allImported = false\n          continue\n        }\n        try {\n          const blocks = wrapImportBlocks(editor, file, await blocksOf(editor, file))\n          if (editor.isDestroyed) return false\n          const at = (anchor && resolveRange(editor.state, anchor)?.from) ?? editor.state.selection.to\n          editor.chain().focus().insertContentAt(at, blocks).run()\n          if (anchor) releaseRanges(editor, [anchor])\n          anchor = null\n        }\n        catch (error) {\n          notify({ title: t('media.import.failed'), description: fetchErrorMessage(error), kind: 'error' })\n          allImported = false\n        }\n      }\n    }\n    finally {\n      if (anchor) releaseRanges(editor, [anchor])\n    }\n    return allImported\n  }\n\n  return { importFiles }\n}\n"],"mappings":";;;;;;;AAOA,MAAa,iBAAiB;;AAE9B,MAAM,iBAAiB;;AAGvB,SAAgB,WAAW,MAAqB;CAC9C,MAAM,OAAO,UAAU,KAAK,IAAI;CAChC,OAAO,SAAS,mBAAmB,SAAS,gBAAgB,eAAe,KAAK,KAAK,IAAI;AAC3F;;AAGA,eAAe,SAAS,QAAgB,MAAoC;CAC1E,IAAI,WAAW,IAAI,GAAG;EACpB,MAAM,SAAS,gBAAgB,QAAQ,YAAY,QAAQ,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM;EACpF,OAAO,OAAO,SAAS,SAAS,CAAC,EAAE,MAAM,YAAY,CAAC;CACxD;CACA,MAAM,EAAE,KAAK,WAAW,MAAM,OAAO,QAAQ,MAAM,OAAO,IAAI;CAC9D,OAAO,CAAC,aAAa,MAAM,KAAK,MAAM,KAAK,YAAY,MAAM,KAAK,MAAM,CAAC;AAC3E;;;;;;;;AASA,SAAgB,WAAW,QAAkB,GAA8C;CAIzF,eAAe,YAAY,QAAgB,OAA0B,KAAgC;EACnG,IAAI,SAAS,QAAQ,KAAA,IAAY,OAAO,aAAa,QAAQ;GAAE,MAAM;GAAK,IAAI;EAAI,CAAC;EACnF,IAAI,cAAc;EAClB,IAAI;GACF,KAAK,MAAM,QAAQ,MAAM,KAAK,KAAK,GAAG;IACpC,IAAI,WAAW,IAAI,KAAK,KAAK,OAAA,SAAuB;KAClD,OAAO;MAAE,OAAO,EAAE,6BAA6B;MAAG,aAAa,EAAE,qCAAqC,EAAE,MAAM,KAAK,KAAK,CAAC;MAAG,MAAM;KAAQ,CAAC;KAC3I,cAAc;KACd;IACF;IACA,IAAI;KACF,MAAM,SAAS,iBAAiB,QAAQ,MAAM,MAAM,SAAS,QAAQ,IAAI,CAAC;KAC1E,IAAI,OAAO,aAAa,OAAO;KAC/B,MAAM,MAAM,UAAU,aAAa,OAAO,OAAO,MAAM,CAAC,EAAE,SAAS,OAAO,MAAM,UAAU;KAC1F,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,gBAAgB,IAAI,MAAM,CAAC,CAAC,IAAI;KACvD,IAAI,QAAQ,cAAc,QAAQ,CAAC,MAAM,CAAC;KAC1C,SAAS;IACX,SACO,OAAO;KACZ,OAAO;MAAE,OAAO,EAAE,qBAAqB;MAAG,aAAa,kBAAkB,KAAK;MAAG,MAAM;KAAQ,CAAC;KAChG,cAAc;IAChB;GACF;EACF,UACQ;GACN,IAAI,QAAQ,cAAc,QAAQ,CAAC,MAAM,CAAC;EAC5C;EACA,OAAO;CACT;CAEA,OAAO,EAAE,YAAY;AACvB"}

package/dist/features/media/index.d.ts

@@ -1,7 +1,7 @@
 import { MAX_MEDIA_BYTES, MEDIA_TYPES, MediaKind, acceptFor, mediaKindOf, mediaMime } from "./schema.js";
 import { AudioRecorder, AudioRecorderState, AudioRecorderStatus, createAudioRecorder } from "./audio-recorder.js";
-import { AUDIO_RECORDER_OPEN, ImportFilesFn, Media, fileNodeFor, formatBytes, mediaNodeFor, openAudioRecorder, pickFiles, postUpload, uploadOf } from "./upload.js";
+import { AUDIO_RECORDER_OPEN, ImportFilesFn, Media, fileNodeFor, formatBytes, mediaNodeFor, openAudioRecorder, pickFiles, uploadOf } from "./upload.js";
 import { MAX_TEXT_BYTES, fileImport, isTextFile } from "./file-import.js";
 import { MediaNodeViews, mediaBlocks, playerOptions } from "./node-views.js";
 import { MediaUi, mediaFeatureCore } from "./feature.js";
-export { AUDIO_RECORDER_OPEN, type AudioRecorder, type AudioRecorderState, type AudioRecorderStatus, type ImportFilesFn, MAX_MEDIA_BYTES, MAX_TEXT_BYTES, MEDIA_TYPES, Media, type MediaKind, type MediaNodeViews, type MediaUi, acceptFor, createAudioRecorder, fileImport, fileNodeFor, formatBytes, isTextFile, mediaBlocks, mediaFeatureCore, mediaKindOf, mediaMime, mediaNodeFor, openAudioRecorder, pickFiles, playerOptions, postUpload, uploadOf };
+export { AUDIO_RECORDER_OPEN, type AudioRecorder, type AudioRecorderState, type AudioRecorderStatus, type ImportFilesFn, MAX_MEDIA_BYTES, MAX_TEXT_BYTES, MEDIA_TYPES, Media, type MediaKind, type MediaNodeViews, type MediaUi, acceptFor, createAudioRecorder, fileImport, fileNodeFor, formatBytes, isTextFile, mediaBlocks, mediaFeatureCore, mediaKindOf, mediaMime, mediaNodeFor, openAudioRecorder, pickFiles, playerOptions, uploadOf };

package/dist/features/media/index.js

@@ -1,7 +1,7 @@
 import { MAX_MEDIA_BYTES, MEDIA_TYPES, acceptFor, mediaKindOf, mediaMime } from "./schema.js";
 import { createAudioRecorder } from "./audio-recorder.js";
-import { AUDIO_RECORDER_OPEN, Media, fileNodeFor, formatBytes, mediaNodeFor, openAudioRecorder, pickFiles, postUpload, uploadOf } from "./upload.js";
+import { AUDIO_RECORDER_OPEN, Media, fileNodeFor, formatBytes, mediaNodeFor, openAudioRecorder, pickFiles, uploadOf } from "./upload.js";
 import { MAX_TEXT_BYTES, fileImport, isTextFile } from "./file-import.js";
 import { mediaBlocks, playerOptions } from "./node-views.js";
 import { mediaFeatureCore } from "./feature.js";
-export { AUDIO_RECORDER_OPEN, MAX_MEDIA_BYTES, MAX_TEXT_BYTES, MEDIA_TYPES, Media, acceptFor, createAudioRecorder, fileImport, fileNodeFor, formatBytes, isTextFile, mediaBlocks, mediaFeatureCore, mediaKindOf, mediaMime, mediaNodeFor, openAudioRecorder, pickFiles, playerOptions, postUpload, uploadOf };
+export { AUDIO_RECORDER_OPEN, MAX_MEDIA_BYTES, MAX_TEXT_BYTES, MEDIA_TYPES, Media, acceptFor, createAudioRecorder, fileImport, fileNodeFor, formatBytes, isTextFile, mediaBlocks, mediaFeatureCore, mediaKindOf, mediaMime, mediaNodeFor, openAudioRecorder, pickFiles, playerOptions, uploadOf };

package/dist/features/media/react/FileView.js

@@ -4,6 +4,7 @@ import { Icon } from "../../../react/Icon.js";
 import { Button } from "../../../react/ui/button.js";
 import { formatBytes } from "../upload.js";
 import { TitleField } from "./TitleField.js";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NodeViewWrapper } from "@tiptap/react";
 //#region src/features/media/react/FileView.tsx
@@ -11,7 +12,23 @@ import { NodeViewWrapper } from "@tiptap/react";
 function FileView({ node, selected, editor, updateAttributes }) {
 	const { t } = useEditorI18n();
 	const isPdf = node.attrs.mimeType === "application/pdf";
+	const [reveal, setReveal] = useState(null);
+	const figure = useRef(null);
+	useEffect(() => {
+		const el = figure.current;
+		if (!el) return;
+		const onReveal = (event) => {
+			const detail = event.detail;
+			if (typeof detail === "number" && detail > 0) setReveal((prev) => ({
+				page: detail,
+				n: (prev?.n ?? 0) + 1
+			}));
+		};
+		el.addEventListener("sk-reveal-page", onReveal);
+		return () => el.removeEventListener("sk-reveal-page", onReveal);
+	}, []);
 	return /* @__PURE__ */ jsxs(NodeViewWrapper, {
+		ref: figure,
 		as: "figure",
 		className: cn("media-block flex flex-col gap-1", selected && "is-selected"),
 		"data-id": node.attrs.id || void 0,
@@ -48,11 +65,11 @@ function FileView({ node, selected, editor, updateAttributes }) {
 				})
 			]
 		}), isPdf && node.attrs.src ? /* @__PURE__ */ jsx("object", {
-			data: node.attrs.src,
+			data: reveal ? `${node.attrs.src}#page=${reveal.page}` : node.attrs.src,
 			type: "application/pdf",
 			contentEditable: false,
 			className: "mt-2 h-[480px] w-full rounded-md border border-border"
-		}) : null]
+		}, reveal?.n ?? 0) : null]
 	});
 }
 //#endregion

package/dist/features/media/react/FileView.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileView.js","names":[],"sources":["../../../../src/features/media/react/FileView.tsx"],"sourcesContent":["import { NodeViewWrapper, type NodeViewProps } from '@tiptap/react'\nimport { Icon } from '../../../react/Icon'\nimport { Button } from '../../../react/ui/button'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { formatBytes } from '../upload'\nimport { TitleField } from './TitleField'\n\n/** The file block: icon, name field, size and „Öffnen“ link; PDFs are embedded below. */\nexport function FileView({ node, selected, editor, updateAttributes }: NodeViewProps) {\n  const { t } = useEditorI18n()\n  const isPdf = node.attrs.mimeType === 'application/pdf'\n  return (\n    <NodeViewWrapper\n      as=\"figure\"\n      className={cn('media-block flex flex-col gap-1', selected && 'is-selected')}\n      data-id={node.attrs.id || undefined}\n    >\n      <div className=\"flex items-center gap-2\" contentEditable={false}>\n        <Icon name={isPdf ? 'i-lucide-file-text' : 'i-lucide-file'} className=\"size-5 text-muted-foreground\" />\n        <TitleField\n          value={node.attrs.title}\n          placeholder={t('media.view.fileName')}\n          label={t('media.view.fileName')}\n          readOnly={!editor.isEditable}\n          className=\"min-w-0 flex-1\"\n          onChange={title => updateAttributes({ title })}\n        />\n        {node.attrs.size ? <span className=\"shrink-0 text-xs text-muted-foreground/60\">{formatBytes(node.attrs.size)}</span> : null}\n        <Button asChild size=\"xs\" variant=\"secondary\">\n          <a href={node.attrs.src} target=\"_blank\" rel=\"noopener noreferrer\">\n            <Icon name=\"i-lucide-external-link\" />\n            {t('media.view.open')}\n          </a>\n        </Button>\n      </div>\n      {isPdf && node.attrs.src\n        ? <object data={node.attrs.src} type=\"application/pdf\" contentEditable={false} className=\"mt-2 h-[480px] w-full rounded-md border border-border\" />\n        : null}\n    </NodeViewWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,SAAS,EAAE,MAAM,UAAU,QAAQ,oBAAmC;CACpF,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,QAAQ,KAAK,MAAM,aAAa;CACtC,OACE,qBAAC,iBAAD;EACE,IAAG;EACH,WAAW,GAAG,mCAAmC,YAAY,aAAa;EAC1E,WAAS,KAAK,MAAM,MAAM,KAAA;EAH5B,UAAA,CAKE,qBAAC,OAAD;GAAK,WAAU;GAA0B,iBAAiB;GAA1D,UAAA;IACE,oBAAC,MAAD;KAAM,MAAM,QAAQ,uBAAuB;KAAiB,WAAU;IAAgC,CAAA;IACtG,oBAAC,YAAD;KACE,OAAO,KAAK,MAAM;KAClB,aAAa,EAAE,qBAAqB;KACpC,OAAO,EAAE,qBAAqB;KAC9B,UAAU,CAAC,OAAO;KAClB,WAAU;KACV,WAAU,UAAS,iBAAiB,EAAE,MAAM,CAAC;IAC9C,CAAA;IACA,KAAK,MAAM,OAAO,oBAAC,QAAD;KAAM,WAAU;KAA6C,UAAA,YAAY,KAAK,MAAM,IAAI;IAAQ,CAAA,IAAI;IACvH,oBAAC,QAAD;KAAQ,SAAA;KAAQ,MAAK;KAAK,SAAQ;KAChC,UAAA,qBAAC,KAAD;MAAG,MAAM,KAAK,MAAM;MAAK,QAAO;MAAS,KAAI;MAA7C,UAAA,CACE,oBAAC,MAAD,EAAM,MAAK,yBAA0B,CAAA,GACpC,EAAE,iBAAiB,CACnB;;IACG,CAAA;GACL;EACJ,CAAA,GAAA,SAAS,KAAK,MAAM,MACjB,oBAAC,UAAD;GAAQ,MAAM,KAAK,MAAM;GAAK,MAAK;GAAkB,iBAAiB;GAAO,WAAU;EAAyD,CAAA,IAChJ,IACW;;AAErB"}
+{"version":3,"file":"FileView.js","names":[],"sources":["../../../../src/features/media/react/FileView.tsx"],"sourcesContent":["import { NodeViewWrapper, type NodeViewProps } from '@tiptap/react'\nimport { useEffect, useRef, useState } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { Button } from '../../../react/ui/button'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { formatBytes } from '../upload'\nimport { TitleField } from './TitleField'\n\n/** The file block: icon, name field, size and „Öffnen“ link; PDFs are embedded below. */\nexport function FileView({ node, selected, editor, updateAttributes }: NodeViewProps) {\n  const { t } = useEditorI18n()\n  const isPdf = node.attrs.mimeType === 'application/pdf'\n  // Page the PDF viewer was asked to open at (`revealSource`, locator „S. 3“). `n` counts the requests: the viewer is\n  // remounted on every one, so asking for the same page again jumps back after the user scrolled away.\n  const [reveal, setReveal] = useState<{ page: number, n: number } | null>(null)\n  const figure = useRef<HTMLElement>(null)\n  useEffect(() => {\n    const el = figure.current\n    if (!el) return\n    const onReveal = (event: Event) => {\n      const detail = (event as CustomEvent<unknown>).detail\n      if (typeof detail === 'number' && detail > 0) setReveal(prev => ({ page: detail, n: (prev?.n ?? 0) + 1 }))\n    }\n    // Event name of `revealSource` in features/composites/reveal-source.ts (media must not import composites).\n    el.addEventListener('sk-reveal-page', onReveal)\n    return () => el.removeEventListener('sk-reveal-page', onReveal)\n  }, [])\n\n  return (\n    <NodeViewWrapper\n      ref={figure}\n      as=\"figure\"\n      className={cn('media-block flex flex-col gap-1', selected && 'is-selected')}\n      data-id={node.attrs.id || undefined}\n    >\n      <div className=\"flex items-center gap-2\" contentEditable={false}>\n        <Icon name={isPdf ? 'i-lucide-file-text' : 'i-lucide-file'} className=\"size-5 text-muted-foreground\" />\n        <TitleField\n          value={node.attrs.title}\n          placeholder={t('media.view.fileName')}\n          label={t('media.view.fileName')}\n          readOnly={!editor.isEditable}\n          className=\"min-w-0 flex-1\"\n          onChange={title => updateAttributes({ title })}\n        />\n        {node.attrs.size ? <span className=\"shrink-0 text-xs text-muted-foreground/60\">{formatBytes(node.attrs.size)}</span> : null}\n        <Button asChild size=\"xs\" variant=\"secondary\">\n          <a href={node.attrs.src} target=\"_blank\" rel=\"noopener noreferrer\">\n            <Icon name=\"i-lucide-external-link\" />\n            {t('media.view.open')}\n          </a>\n        </Button>\n      </div>\n      {isPdf && node.attrs.src\n        ? <object key={reveal?.n ?? 0} data={reveal ? `${node.attrs.src}#page=${reveal.page}` : node.attrs.src} type=\"application/pdf\" contentEditable={false} className=\"mt-2 h-[480px] w-full rounded-md border border-border\" />\n        : null}\n    </NodeViewWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,SAAS,EAAE,MAAM,UAAU,QAAQ,oBAAmC;CACpF,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,QAAQ,KAAK,MAAM,aAAa;CAGtC,MAAM,CAAC,QAAQ,aAAa,SAA6C,IAAI;CAC7E,MAAM,SAAS,OAAoB,IAAI;CACvC,gBAAgB;EACd,MAAM,KAAK,OAAO;EAClB,IAAI,CAAC,IAAI;EACT,MAAM,YAAY,UAAiB;GACjC,MAAM,SAAU,MAA+B;GAC/C,IAAI,OAAO,WAAW,YAAY,SAAS,GAAG,WAAU,UAAS;IAAE,MAAM;IAAQ,IAAI,MAAM,KAAK,KAAK;GAAE,EAAE;EAC3G;EAEA,GAAG,iBAAiB,kBAAkB,QAAQ;EAC9C,aAAa,GAAG,oBAAoB,kBAAkB,QAAQ;CAChE,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,iBAAD;EACE,KAAK;EACL,IAAG;EACH,WAAW,GAAG,mCAAmC,YAAY,aAAa;EAC1E,WAAS,KAAK,MAAM,MAAM,KAAA;EAJ5B,UAAA,CAME,qBAAC,OAAD;GAAK,WAAU;GAA0B,iBAAiB;GAA1D,UAAA;IACE,oBAAC,MAAD;KAAM,MAAM,QAAQ,uBAAuB;KAAiB,WAAU;IAAgC,CAAA;IACtG,oBAAC,YAAD;KACE,OAAO,KAAK,MAAM;KAClB,aAAa,EAAE,qBAAqB;KACpC,OAAO,EAAE,qBAAqB;KAC9B,UAAU,CAAC,OAAO;KAClB,WAAU;KACV,WAAU,UAAS,iBAAiB,EAAE,MAAM,CAAC;IAC9C,CAAA;IACA,KAAK,MAAM,OAAO,oBAAC,QAAD;KAAM,WAAU;KAA6C,UAAA,YAAY,KAAK,MAAM,IAAI;IAAQ,CAAA,IAAI;IACvH,oBAAC,QAAD;KAAQ,SAAA;KAAQ,MAAK;KAAK,SAAQ;KAChC,UAAA,qBAAC,KAAD;MAAG,MAAM,KAAK,MAAM;MAAK,QAAO;MAAS,KAAI;MAA7C,UAAA,CACE,oBAAC,MAAD,EAAM,MAAK,yBAA0B,CAAA,GACpC,EAAE,iBAAiB,CACnB;;IACG,CAAA;GACL;EACJ,CAAA,GAAA,SAAS,KAAK,MAAM,MACjB,oBAAC,UAAD;GAA6B,MAAM,SAAS,GAAG,KAAK,MAAM,IAAI,QAAQ,OAAO,SAAS,KAAK,MAAM;GAAK,MAAK;GAAkB,iBAAiB;GAAO,WAAU;EAAyD,GAA3M,QAAQ,KAAK,CAA8L,IACxN,IACW;;AAErB"}

package/dist/features/media/schema.d.ts

@@ -3,6 +3,12 @@ import { AnyExtension, Node } from "@tiptap/core";
 //#region src/features/media/schema.d.ts
 /** The media nodes (image, audio, video, file) of the document schema. */
 export declare const mediaSchemaExtensions: () => AnyExtension[];
+/**
+ * The image node with a `hash` attribute. Markdown: `![alt](src "title")`, followed by ` <!-- {"hash":"…"} -->` when the
+ * block has a hash; only that form is claimed by `imageBlockTokenizer` (a block-level token that still yields an `image`
+ * token), a plain image keeps the stock inline parse.
+ */
+export declare const ImageNode: Node<import("@tiptap/extension-image").ImageOptions, any>;
 export type MediaKind = 'image' | 'audio' | 'video' | 'file';
 /** Uploadable MIME types → file extension on disk and media kind. `<uuid>.<ext>` asset names derive from this. */
 export declare const MEDIA_TYPES: Readonly<Record<string, {
@@ -22,6 +28,7 @@ export interface MediaAttrs {
   src: string;
   title?: string;
   mimeType?: string;
+  hash?: string | null;
 }
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -51,6 +58,7 @@ export interface FileAttrs {
   title?: string;
   mimeType?: string;
   size?: number;
+  hash?: string | null;
 }
 /** A generic uploaded file (PDF, office document, …) that has no player: shown as a card with an open button. */
 export declare const FileNode: Node<any, any>;

package/dist/features/media/schema.js

@@ -3,13 +3,97 @@ import { ASSET_DOCUMENT_ID, ASSET_NAME, SCRATCH_DOCUMENT_ID, assetRefOf, assetUr
 import { Node, mergeAttributes } from "@tiptap/core";
 import { Image } from "@tiptap/extension-image";
 //#region src/features/media/schema.ts
+/** SHA-256 (hex) of the uploaded bytes, kept on media blocks so derived content can tell when its source changed; null when unknown (memory backend, older documents). */
+const hashAttribute = {
+	default: null,
+	parseHTML: (el) => el.getAttribute("data-hash"),
+	renderHTML: (attrs) => attrs.hash ? { "data-hash": attrs.hash } : {}
+};
 /** The media nodes (image, audio, video, file) of the document schema. */
 const mediaSchemaExtensions = () => [
-	Image,
+	ImageNode,
 	AudioNode,
 	VideoNode,
 	FileNode
 ];
+/**
+* The image node with a `hash` attribute. Markdown: `![alt](src "title")`, followed by ` <!-- {"hash":"…"} -->` when the
+* block has a hash; only that form is claimed by `imageBlockTokenizer` (a block-level token that still yields an `image`
+* token), a plain image keeps the stock inline parse.
+*/
+const ImageNode = Image.extend({
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			hash: hashAttribute
+		};
+	},
+	markdownTokenizer: {
+		name: "imageBlock",
+		level: "block",
+		start: (src) => src.search(new RegExp(IMAGE_BLOCK_PATTERN, "m")),
+		tokenize: (src) => {
+			const match = new RegExp(IMAGE_BLOCK_PATTERN).exec(src);
+			if (!match) return void 0;
+			return {
+				type: "image",
+				raw: match[0],
+				text: match[1] ?? "",
+				href: match[2] ?? "",
+				title: match[3],
+				attrs: parseAttrComment(match[4])
+			};
+		}
+	},
+	parseMarkdown: (token, helpers) => helpers.createNode("image", {
+		src: token.href,
+		title: token.title,
+		alt: token.text,
+		hash: typeof token.attrs?.hash === "string" ? token.attrs.hash : null
+	}),
+	renderMarkdown: (node) => {
+		const { src = "", alt = "", title = "" } = node.attrs ?? {};
+		return `![${alt}](${src}${title ? ` "${title}"` : ""})${attrComment({ hash: node.attrs?.hash })}`;
+	}
+});
+const ATTR_COMMENT_PATTERN = "(?: <!-- (\\{.*?\\}) -->)?[ \\t]*(?:\\n|$)";
+const IMAGE_BLOCK_PATTERN = `^!\\[([^\\]\\n]*)\\]\\(([^)\\s]*)(?: "([^"\\n]*)")?\\) <!-- (\\{.*?\\}) -->[ \\t]*(?:\\n|$)`;
+/** ` <!-- {"hash":"…"} -->` for the attributes that are set (empty string when none); `>` is escaped so the JSON cannot end the comment. */
+function attrComment(attrs) {
+	const set = Object.fromEntries(Object.entries(attrs).filter(([, value]) => value !== null && value !== void 0 && value !== "" && value !== 0));
+	return Object.keys(set).length ? ` <!-- ${JSON.stringify(set).replace(/>/g, "\\u003e")} -->` : "";
+}
+/** The attributes of an `attrComment`; empty for a missing or malformed one. */
+function parseAttrComment(json) {
+	if (!json) return {};
+	try {
+		const value = JSON.parse(json);
+		return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+	} catch {
+		return {};
+	}
+}
+/** Block tokenizer for `[<label>: title](src)` lines of one media node; `labels` are the accepted labels (regex alternatives). */
+function mediaTokenizer(name, labels) {
+	const pattern = `^\\[(?:${labels})(?:: ((?:\\\\.|[^\\]\\\\\\n])*))?\\]\\(([^)\\s]*)\\)${ATTR_COMMENT_PATTERN}`;
+	return {
+		name,
+		level: "block",
+		start: (src) => src.search(new RegExp(pattern, "m")),
+		tokenize: (src) => {
+			const match = new RegExp(pattern).exec(src);
+			if (!match) return void 0;
+			return {
+				type: name,
+				raw: match[0],
+				title: (match[1] ?? "").replace(/\\(.)/g, "$1"),
+				href: match[2] ?? "",
+				attrs: parseAttrComment(match[3])
+			};
+		}
+	};
+}
+const stringAttr = (value) => typeof value === "string" ? value : "";
 /** Uploadable MIME types → file extension on disk and media kind. `<uuid>.<ext>` asset names derive from this. */
 const MEDIA_TYPES = {
 	"image/png": {
@@ -97,11 +181,25 @@ const mediaAttributes = {
 		default: "",
 		parseHTML: (el) => el.getAttribute("data-mime") ?? "",
 		renderHTML: (attrs) => ({ "data-mime": attrs.mimeType })
-	}
+	},
+	hash: hashAttribute
 };
-/** Markdown export (AI context, `getMarkdown()`): a link labelled with the kind and, when there is one, the title. */
-function mediaMarkdown(label, title, src) {
-	return `[${title ? `${label}: ${String(title).replace(/[[\]\\]/g, "\\$&")}` : label}](${String(src ?? "")})`;
+/** Markdown export (AI context, `getMarkdown()`, source mode): a link labelled with the kind and, when there is one, the title; `extra` and the hash go into the trailing attribute comment. */
+function mediaMarkdown(label, attrs, extra) {
+	const title = attrs?.title;
+	return `[${title ? `${label}: ${String(title).replace(/[[\]\\]/g, "\\$&")}` : label}](${String(attrs?.src ?? "")})${attrComment({
+		...extra,
+		hash: attrs?.hash
+	})}`;
+}
+/** Node attributes of an audio/video Markdown token. */
+function mediaAttrsOfToken(token) {
+	return {
+		src: token.href,
+		title: token.title,
+		mimeType: stringAttr(token.attrs?.mimeType),
+		hash: stringAttr(token.attrs?.hash) || null
+	};
 }
 const AudioNode = Node.create({
 	name: "audio",
@@ -115,7 +213,9 @@ const AudioNode = Node.create({
 		controls: "true",
 		preload: "metadata"
 	})],
-	renderMarkdown: (node) => mediaMarkdown("Audio", node.attrs?.title || "Aufnahme", node.attrs?.src),
+	markdownTokenizer: mediaTokenizer("audio", "Audio"),
+	parseMarkdown: (token, helpers) => helpers.createNode("audio", mediaAttrsOfToken(token)),
+	renderMarkdown: (node) => mediaMarkdown("Audio", node.attrs, { mimeType: node.attrs?.mimeType }),
 	addCommands() {
 		return { insertAudio: (attrs) => ({ commands }) => commands.insertContent({
 			type: this.name,
@@ -135,7 +235,9 @@ const VideoNode = Node.create({
 		controls: "true",
 		preload: "metadata"
 	})],
-	renderMarkdown: (node) => mediaMarkdown("Video", node.attrs?.title, node.attrs?.src),
+	markdownTokenizer: mediaTokenizer("video", "Video"),
+	parseMarkdown: (token, helpers) => helpers.createNode("video", mediaAttrsOfToken(token)),
+	renderMarkdown: (node) => mediaMarkdown("Video", node.attrs, { mimeType: node.attrs?.mimeType }),
 	addCommands() {
 		return { insertVideo: (attrs) => ({ commands }) => commands.insertContent({
 			type: this.name,
@@ -166,7 +268,8 @@ const FileNode = Node.create({
 		size: {
 			default: 0,
 			parseHTML: (el) => Number(el.getAttribute("data-size")) || 0
-		}
+		},
+		hash: hashAttribute
 	}),
 	parseHTML: () => [{ tag: "a[data-type=\"file\"]" }],
 	renderHTML: ({ node }) => [
@@ -176,11 +279,23 @@ const FileNode = Node.create({
 			"href": node.attrs.src,
 			"download": node.attrs.title,
 			"data-mime": node.attrs.mimeType,
-			"data-size": String(node.attrs.size)
+			"data-size": String(node.attrs.size),
+			...node.attrs.hash ? { "data-hash": node.attrs.hash } : {}
 		},
 		node.attrs.title || "Datei"
 	],
-	renderMarkdown: (node) => `[Datei: ${String(node.attrs?.title || "Datei").replace(/[[\]\\]/g, "\\$&")}](${String(node.attrs?.src ?? "")})`,
+	markdownTokenizer: mediaTokenizer("file", "Datei|File"),
+	parseMarkdown: (token, helpers) => helpers.createNode("file", {
+		src: token.href,
+		title: token.title,
+		mimeType: stringAttr(token.attrs?.mimeType),
+		size: typeof token.attrs?.size === "number" ? token.attrs.size : 0,
+		hash: stringAttr(token.attrs?.hash) || null
+	}),
+	renderMarkdown: (node) => mediaMarkdown("Datei", node.attrs, {
+		mimeType: node.attrs?.mimeType,
+		size: node.attrs?.size
+	}),
 	addCommands() {
 		return { insertFile: (attrs) => ({ commands }) => commands.insertContent({
 			type: this.name,
@@ -189,6 +304,6 @@ const FileNode = Node.create({
 	}
 });
 //#endregion
-export { ASSET_DOCUMENT_ID, ASSET_NAME, AudioNode, FileNode, MAX_MEDIA_BYTES, MEDIA_TYPES, SCRATCH_DOCUMENT_ID, VideoNode, acceptFor, assetRefOf, assetUrl, mediaKindOf, mediaMime, mediaSchemaExtensions };
+export { ASSET_DOCUMENT_ID, ASSET_NAME, AudioNode, FileNode, ImageNode, MAX_MEDIA_BYTES, MEDIA_TYPES, SCRATCH_DOCUMENT_ID, VideoNode, acceptFor, assetRefOf, assetUrl, mediaKindOf, mediaMime, mediaSchemaExtensions };
 
 //# sourceMappingURL=schema.js.map