@ecsplico/editor 0.0.0-stage → 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"AudioRecorderModal.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createElementVNode","_createElementBlock","_toDisplayString","_createCommentVNode","_normalizeClass","_createTextVNode","_createVNode"],"sources":["../../../../src/features/media/components/AudioRecorderModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Editor, EditorEvents } from '@tiptap/vue-3'\nimport { computed, onBeforeUnmount, ref, shallowRef } from 'vue'\nimport { captureRange, type DocAnchor, fetchErrorMessage, releaseRanges, resolveRange } from '../../../core'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport { useNotifier } from '../../../vue/use-notifier'\nimport { useAudioRecorder } from '../use-audio-recorder'\nimport { AUDIO_RECORDER_OPEN } from '../upload'\n\n/**\n * „Audio aufnehmen“, opened by `openAudioRecorder(editor)` (toolbar „Aufnahme“): records in the browser and imports the\n * file through `importFiles` (upload, wrapped by the pipeline's `wrapImport` stage) where the caret was when the modal opened.\n * Nothing enters the (possibly shared) document before the upload succeeded.\n */\nconst props = defineProps<{ editor: Editor }>()\n\nconst { Button: UButton, Modal: UModal } = useUiKit()\nconst { t } = useEditorI18n()\nconst notify = useNotifier(() => props.editor)\nconst { state, seconds, start, stop, cancel } = useAudioRecorder()\nconst open = ref(false)\n/** Stopping, uploading and inserting a recording. */\nconst inserting = ref(false)\n/** The recording once stopped; kept after a failed upload so „Erneut hochladen“ can retry it. */\nconst recorded = shallowRef<File | null>(null)\nlet anchor: DocAnchor | null = null\n\nconst notice = computed(() => {\n  if (state.value === 'denied') return t('media.recorder.denied')\n  if (state.value === 'unsupported') return t('media.recorder.unsupported')\n  return null\n})\nconst clock = computed(() => `${String(Math.floor(seconds.value / 60)).padStart(2, '0')}:${String(seconds.value % 60).padStart(2, '0')}`)\n\nfunction onTransaction({ transaction }: EditorEvents['transaction']) {\n  if (!transaction.getMeta(AUDIO_RECORDER_OPEN) || open.value || !props.editor.isEditable) return\n  const { head } = props.editor.state.selection\n  anchor = captureRange(props.editor, { from: head, to: head })\n  open.value = true\n}\nprops.editor.on('transaction', onTransaction)\n\nasync function record() {\n  try {\n    await start()\n  } catch (error) {\n    notify({ title: t('media.recorder.failed'), description: fetchErrorMessage(error), kind: 'error' })\n  }\n}\n\nasync function insert() {\n  if (inserting.value) return\n  inserting.value = true\n  try {\n    const file = recorded.value ?? await stop()\n    if (!file) return\n    recorded.value = file\n    const pos = anchor ? resolveRange(props.editor.state, anchor)?.from : undefined\n    // `importFiles` toasts its own failures; the modal stays open with the recording so the upload can be retried.\n    if (!await props.editor.storage.media.importFiles(props.editor, [file], pos)) return\n    if (!props.editor.isDestroyed) close()\n  } catch (error) {\n    notify({ title: t('media.recorder.failed'), description: fetchErrorMessage(error), kind: 'error' })\n  } finally {\n    inserting.value = false\n  }\n}\n\n/** Ends the flow: discards a running or unsent recording and releases the caret anchor. */\nfunction close() {\n  cancel()\n  recorded.value = null\n  if (anchor) releaseRanges(props.editor, [anchor])\n  anchor = null\n  open.value = false\n}\n\nonBeforeUnmount(() => {\n  props.editor.off('transaction', onTransaction)\n  if (anchor) releaseRanges(props.editor, [anchor])\n})\n</script>\n\n<template>\n  <UModal\n    :open=\"open\"\n    :title=\"t('media.recorder.title')\"\n    :dismissible=\"!inserting\"\n    :close=\"{ disabled: inserting }\"\n    @update:open=\"(value: boolean) => { if (!value) close() }\"\n  >\n    <template #body>\n      <div class=\"flex flex-col items-center gap-3 py-2\">\n        <p v-if=\"notice\" class=\"text-sm text-[var(--sk-danger)]\">\n          {{ notice }}\n        </p>\n        <div\n          class=\"flex items-center gap-2 font-mono text-3xl tabular-nums\"\n          :class=\"state === 'recording' ? 'text-[var(--sk-fg-highlighted)]' : 'text-[var(--sk-muted)]'\"\n          role=\"timer\"\n          :aria-label=\"t('media.recorder.duration')\"\n        >\n          <span v-if=\"state === 'recording'\" class=\"size-2.5 animate-pulse rounded-full bg-[var(--sk-danger)]\" />\n          {{ clock }}\n        </div>\n      </div>\n    </template>\n    <template #footer>\n      <div class=\"flex w-full justify-end gap-2\">\n        <UButton :label=\"t('media.recorder.cancel')\" color=\"neutral\" variant=\"ghost\" :disabled=\"inserting\" @click=\"close\" />\n        <UButton\n          v-if=\"state === 'recording' || inserting\"\n          :label=\"t('media.recorder.stopInsert')\"\n          icon=\"i-lucide-square\"\n          :loading=\"inserting\"\n          @click=\"insert\"\n        />\n        <UButton v-else-if=\"recorded\" :label=\"t('media.recorder.retry')\" icon=\"i-lucide-upload\" @click=\"insert\" />\n        <UButton v-else :label=\"t('media.recorder.start')\" icon=\"i-lucide-mic\" :disabled=\"state === 'unsupported'\" @click=\"record\" />\n      </div>\n    </template>\n  </UModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAEd,MAAM,EAAE,QAAQ,SAAS,OAAO,WAAW,SAAS;EACpD,MAAM,EAAE,MAAM,cAAc;EAC5B,MAAM,SAAS,kBAAkB,MAAM,MAAM;EAC7C,MAAM,EAAE,OAAO,SAAS,OAAO,MAAM,WAAW,iBAAiB;EACjE,MAAM,OAAO,IAAI,KAAK;;EAEtB,MAAM,YAAY,IAAI,KAAK;;EAE3B,MAAM,WAAW,WAAwB,IAAI;EAC7C,IAAI,SAA2B;EAE/B,MAAM,SAAS,eAAe;GAC5B,IAAI,MAAM,UAAU,UAAU,OAAO,EAAE,uBAAuB;GAC9D,IAAI,MAAM,UAAU,eAAe,OAAO,EAAE,4BAA4B;GACxE,OAAO;EACT,CAAC;EACD,MAAM,QAAQ,eAAe,GAAG,OAAO,KAAK,MAAM,QAAQ,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,QAAQ,QAAQ,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,GAAG;EAExI,SAAS,cAAc,EAAE,eAA4C;GACnE,IAAI,CAAC,YAAY,QAAA,mBAA2B,KAAK,KAAK,SAAS,CAAC,MAAM,OAAO,YAAY;GACzF,MAAM,EAAE,SAAS,MAAM,OAAO,MAAM;GACpC,SAAS,aAAa,MAAM,QAAQ;IAAE,MAAM;IAAM,IAAI;GAAK,CAAC;GAC5D,KAAK,QAAQ;EACf;EACA,MAAM,OAAO,GAAG,eAAe,aAAa;EAE5C,eAAe,SAAS;GACtB,IAAI;IACF,MAAM,MAAM;GACd,SAAS,OAAO;IACd,OAAO;KAAE,OAAO,EAAE,uBAAuB;KAAG,aAAa,kBAAkB,KAAK;KAAG,MAAM;IAAQ,CAAC;GACpG;EACF;EAEA,eAAe,SAAS;GACtB,IAAI,UAAU,OAAO;GACrB,UAAU,QAAQ;GAClB,IAAI;IACF,MAAM,OAAO,SAAS,SAAS,MAAM,KAAK;IAC1C,IAAI,CAAC,MAAM;IACX,SAAS,QAAQ;IACjB,MAAM,MAAM,SAAS,aAAa,MAAM,OAAO,OAAO,MAAM,CAAC,EAAE,OAAO,KAAA;IAEtE,IAAI,CAAC,MAAM,MAAM,OAAO,QAAQ,MAAM,YAAY,MAAM,QAAQ,CAAC,IAAI,GAAG,GAAG,GAAG;IAC9E,IAAI,CAAC,MAAM,OAAO,aAAa,MAAM;GACvC,SAAS,OAAO;IACd,OAAO;KAAE,OAAO,EAAE,uBAAuB;KAAG,aAAa,kBAAkB,KAAK;KAAG,MAAM;IAAQ,CAAC;GACpG,UAAU;IACR,UAAU,QAAQ;GACpB;EACF;;EAGA,SAAS,QAAQ;GACf,OAAO;GACP,SAAS,QAAQ;GACjB,IAAI,QAAQ,cAAc,MAAM,QAAQ,CAAC,MAAM,CAAC;GAChD,SAAS;GACT,KAAK,QAAQ;EACf;EAEA,sBAAsB;GACpB,MAAM,OAAO,IAAI,eAAe,aAAa;GAC7C,IAAI,QAAQ,cAAc,MAAM,QAAQ,CAAC,MAAM,CAAC;EAClD,CAAC;;GAIC,OAAAA,UAAA,GAAAC,YAqCSC,MAAA,MAAA,GAAA;IApCN,MAAM,KAAA;IACN,OAAOA,MAAA,CAAA,CAAC,CAAA,sBAAA;IACR,aAAW,CAAG,UAAA;IACd,OAAK,EAAA,UAAc,UAAA,MAAS;IAC5B,iBAAW,OAAA,OAAA,OAAA,MAAG,UAAc;KAAA,IAAA,CAAY,OAAO,MAAK;IAAA;;IAE1C,MAAIC,cAcP,CAbNC,mBAaM,OAbN,YAaM,CAZK,OAAA,SAATJ,UAAA,GAAAK,mBAEI,KAFJ,YAEIC,gBADC,OAAA,KAAM,GAAA,CAAA,KAAAC,mBAAA,QAAA,IAAA,GAEXH,mBAQM,OAAA;KAPJ,OAAKI,eAAA,CAAC,2DACEN,MAAA,KAAA,MAAK,cAAA,oCAAA,wBAAA,CAAA;KACb,MAAK;KACJ,cAAYA,MAAA,CAAA,CAAC,CAAA,yBAAA;IAEF,GAAA,CAAAA,MAAA,KAAA,MAAK,eAAjBF,UAAA,GAAAK,mBAAuG,QAAvG,UAAuG,KAAAE,mBAAA,QAAA,IAAA,GAAAE,gBAAA,MACvGH,gBAAG,MAAA,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA,CAAA,CAAA,CAAA,CAAA;IAIH,QAAMH,cAYT,CAXNC,mBAWM,OAXN,YAWM,CAVJM,YAAoHR,MAAA,OAAA,GAAA;KAA1G,OAAOA,MAAA,CAAA,CAAC,CAAA,uBAAA;KAA2B,OAAM;KAAU,SAAQ;KAAS,UAAU,UAAA;KAAY,SAAO;IAEnG,GAAA,MAAA,GAAA,CAAA,SAAA,UAAA,CAAA,GAAAA,MAAA,KAAA,MAAK,eAAoB,UAAA,SADjCF,UAAA,GAAAC,YAMEC,MAAA,OAAA,GAAA;;KAJC,OAAOA,MAAA,CAAA,CAAC,CAAA,2BAAA;KACT,MAAK;KACJ,SAAS,UAAA;KACT,SAAO;IAEU,GAAA,MAAA,GAAA,CAAA,SAAA,SAAA,CAAA,KAAA,SAAA,SAApBF,UAAA,GAAAC,YAA0GC,MAAA,OAAA,GAAA;;KAA3E,OAAOA,MAAA,CAAA,CAAC,CAAA,sBAAA;KAA0B,MAAK;KAAmB,SAAO;IAChG,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,MAAAF,UAAA,GAAAC,YAA6HC,MAAA,OAAA,GAAA;;KAA5G,OAAOA,MAAA,CAAA,CAAC,CAAA,sBAAA;KAA0B,MAAK;KAAgB,UAAUA,MAAA,KAAA,MAAK;KAAqB,SAAO"}

package/dist/features/media/components/AudioRecorderModal.vue.d.ts

@@ -0,0 +1,15 @@
+import { Editor } from "@tiptap/vue-3";
+//#region src/features/media/components/AudioRecorderModal.vue.d.ts
+/**
+ * „Audio aufnehmen“, opened by `openAudioRecorder(editor)` (toolbar „Aufnahme“): records in the browser and imports the
+ * file through `importFiles` (upload, wrapped by the pipeline's `wrapImport` stage) where the caret was when the modal opened.
+ * Nothing enters the (possibly shared) document before the upload succeeded.
+ */
+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=AudioRecorderModal.vue.d.ts.map

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

@@ -0,0 +1,46 @@
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { createBlock, createElementVNode, defineComponent, normalizeClass, openBlock, unref, withCtx } from "vue";
+import { NodeViewWrapper, nodeViewProps } from "@tiptap/vue-3";
+//#region src/features/media/components/AudioView.vue
+const _hoisted_1 = ["src"];
+const _hoisted_2 = [
+	"value",
+	"placeholder",
+	"aria-label",
+	"readonly"
+];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "AudioView",
+	props: nodeViewProps,
+	setup(__props) {
+		const { t } = useEditorI18n();
+		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
+			}, {
+				default: withCtx(() => [createElementVNode("audio", {
+					controls: "",
+					preload: "metadata",
+					src: _ctx.node.attrs.src,
+					class: "w-full"
+				}, null, 8, _hoisted_1), createElementVNode("input", {
+					value: _ctx.node.attrs.title,
+					contenteditable: "false",
+					placeholder: unref(t)("media.view.title"),
+					"aria-label": unref(t)("media.view.title"),
+					autocomplete: "off",
+					readonly: !_ctx.editor.isEditable,
+					class: "w-full 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)]",
+					onInput: _cache[0] || (_cache[0] = ($event) => _ctx.updateAttributes({ title: $event.target.value }))
+				}, null, 40, _hoisted_2)]),
+				_: 1
+			}, 8, ["class", "data-id"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=AudioView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AudioView.js","names":["selected","node","editor","updateAttributes","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createElementVNode"],"sources":["../../../../src/features/media/components/AudioView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\n\ndefineProps(nodeViewProps)\n\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    <audio controls preload=\"metadata\" :src=\"node.attrs.src\" class=\"w-full\" />\n    <input\n      :value=\"node.attrs.title\"\n      contenteditable=\"false\"\n      :placeholder=\"t('media.view.title')\"\n      :aria-label=\"t('media.view.title')\"\n      autocomplete=\"off\"\n      :readonly=\"!editor.isEditable\"\n      class=\"w-full 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  </NodeViewWrapper>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAMA,MAAM,EAAE,MAAM,cAAc;;GAI1B,OAAAI,UAAA,GAAAC,YAgBkBC,MAAA,eAAA,GAAA;IAfhB,IAAG;IACF,OAAKC,eAAA,CAAA,mCAAA,EAAA,eAAuDP,KAAAA,SAAQ,CAAA,CAAA;IACpE,WAASC,KAAAA,KAAK,MAAM,MAAM,KAAA;;IAE3B,SAAAO,cAA0E,CAA1EC,mBAA0E,SAAA;KAAnE,UAAA;KAAS,SAAQ;KAAY,KAAKR,KAAAA,KAAK,MAAM;KAAK,OAAM;IAC/D,GAAA,MAAA,GAAA,UAAA,GAAAQ,mBASC,SAAA;KARE,OAAOR,KAAAA,KAAK,MAAM;KACnB,iBAAgB;KACf,aAAaK,MAAA,CAAA,CAAC,CAAA,kBAAA;KACd,cAAYA,MAAA,CAAA,CAAC,CAAA,kBAAA;KACd,cAAa;KACZ,UAAQ,CAAGJ,KAAAA,OAAO;KACnB,OAAM;KACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEC,KAAAA,iBAAgB,EAAA,OAAW,OAAO,OAA4B,MAAK,CAAA"}

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

@@ -0,0 +1,73 @@
+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 { NodeViewWrapper, nodeViewProps } from "@tiptap/vue-3";
+//#region src/features/media/components/FileView.vue
+const _hoisted_1 = {
+	class: "flex items-center gap-2",
+	contenteditable: "false"
+};
+const _hoisted_2 = [
+	"value",
+	"placeholder",
+	"aria-label",
+	"readonly"
+];
+const _hoisted_3 = {
+	key: 0,
+	class: "shrink-0 text-xs text-[var(--sk-fg-dimmed)]"
+};
+const _hoisted_4 = ["data"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "FileView",
+	props: nodeViewProps,
+	setup(__props) {
+		const { Button: UButton, Icon: UIcon } = useUiKit();
+		const { t } = useEditorI18n();
+		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
+			}, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
+					createVNode(unref(UIcon), {
+						name: _ctx.node.attrs.mimeType === "application/pdf" ? "i-lucide-file-text" : "i-lucide-file",
+						class: "size-5 shrink-0 text-[var(--sk-muted)]"
+					}, null, 8, ["name"]),
+					createElementVNode("input", {
+						value: _ctx.node.attrs.title,
+						placeholder: unref(t)("media.view.fileName"),
+						"aria-label": unref(t)("media.view.fileName"),
+						autocomplete: "off",
+						readonly: !_ctx.editor.isEditable,
+						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)]",
+						onInput: _cache[0] || (_cache[0] = ($event) => _ctx.updateAttributes({ title: $event.target.value }))
+					}, null, 40, _hoisted_2),
+					_ctx.node.attrs.size ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(formatBytes)(_ctx.node.attrs.size)), 1)) : createCommentVNode("v-if", true),
+					createVNode(unref(UButton), {
+						href: _ctx.node.attrs.src,
+						target: "_blank",
+						label: unref(t)("media.view.open"),
+						icon: "i-lucide-external-link",
+						size: "xs",
+						color: "neutral",
+						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,
+					type: "application/pdf",
+					contenteditable: "false",
+					class: "mt-2 h-[480px] w-full rounded-md border border-[var(--sk-border)]"
+				}, null, 8, _hoisted_4)) : createCommentVNode("v-if", true)]),
+				_: 1
+			}, 8, ["class", "data-id"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=FileView.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,47 @@
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { createBlock, createElementVNode, defineComponent, normalizeClass, openBlock, unref, withCtx } from "vue";
+import { NodeViewWrapper, nodeViewProps } from "@tiptap/vue-3";
+//#region src/features/media/components/VideoView.vue
+const _hoisted_1 = ["src"];
+const _hoisted_2 = [
+	"value",
+	"placeholder",
+	"aria-label",
+	"readonly"
+];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "VideoView",
+	props: nodeViewProps,
+	setup(__props) {
+		const { t } = useEditorI18n();
+		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
+			}, {
+				default: withCtx(() => [createElementVNode("video", {
+					controls: "",
+					preload: "metadata",
+					playsinline: "",
+					src: _ctx.node.attrs.src,
+					class: "max-w-full rounded-md"
+				}, null, 8, _hoisted_1), createElementVNode("input", {
+					value: _ctx.node.attrs.title,
+					contenteditable: "false",
+					placeholder: unref(t)("media.view.title"),
+					"aria-label": unref(t)("media.view.title"),
+					autocomplete: "off",
+					readonly: !_ctx.editor.isEditable,
+					class: "w-full 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)]",
+					onInput: _cache[0] || (_cache[0] = ($event) => _ctx.updateAttributes({ title: $event.target.value }))
+				}, null, 40, _hoisted_2)]),
+				_: 1
+			}, 8, ["class", "data-id"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=VideoView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoView.js","names":["selected","node","editor","updateAttributes","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createElementVNode"],"sources":["../../../../src/features/media/components/VideoView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\n\ndefineProps(nodeViewProps)\n\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    <video controls preload=\"metadata\" playsinline :src=\"node.attrs.src\" class=\"max-w-full rounded-md\" />\n    <input\n      :value=\"node.attrs.title\"\n      contenteditable=\"false\"\n      :placeholder=\"t('media.view.title')\"\n      :aria-label=\"t('media.view.title')\"\n      autocomplete=\"off\"\n      :readonly=\"!editor.isEditable\"\n      class=\"w-full 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  </NodeViewWrapper>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAMA,MAAM,EAAE,MAAM,cAAc;;GAI1B,OAAAI,UAAA,GAAAC,YAgBkBC,MAAA,eAAA,GAAA;IAfhB,IAAG;IACF,OAAKC,eAAA,CAAA,mCAAA,EAAA,eAAuDP,KAAAA,SAAQ,CAAA,CAAA;IACpE,WAASC,KAAAA,KAAK,MAAM,MAAM,KAAA;;IAE3B,SAAAO,cAAqG,CAArGC,mBAAqG,SAAA;KAA9F,UAAA;KAAS,SAAQ;KAAW,aAAA;KAAa,KAAKR,KAAAA,KAAK,MAAM;KAAK,OAAM;IAC3E,GAAA,MAAA,GAAA,UAAA,GAAAQ,mBASC,SAAA;KARE,OAAOR,KAAAA,KAAK,MAAM;KACnB,iBAAgB;KACf,aAAaK,MAAA,CAAA,CAAC,CAAA,kBAAA;KACd,cAAYA,MAAA,CAAA,CAAC,CAAA,kBAAA;KACd,cAAa;KACZ,UAAQ,CAAGJ,KAAAA,OAAO;KACnB,OAAM;KACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEC,KAAAA,iBAAgB,EAAA,OAAW,OAAO,OAA4B,MAAK,CAAA"}

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

@@ -0,0 +1,22 @@
+import { EditorFeature } from "../../core/feature.js";
+import "../../core/index.js";
+import { MediaNodeViews } from "./node-views.js";
+//#region src/features/media/feature.d.ts
+/** What a framework binding supplies to the media feature. */
+export interface MediaUi<C> {
+  /** The „Audio aufnehmen“ modal; mounted as an overlay, opened by `openAudioRecorder(editor)`. */
+  recorderModal: C;
+  /** The audio, video and file block views of the framework. */
+  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
+ * 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.
+ */
+export declare function mediaFeatureCore<C>(ui: MediaUi<C>): EditorFeature<C>;
+//#endregion
+//# sourceMappingURL=feature.d.ts.map

package/dist/features/media/feature.js

@@ -0,0 +1,101 @@
+import { ABILITY } from "../../core/schema/abilities.js";
+import { acceptFor } 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 = [
+	{
+		id: "bild",
+		labelKey: "media.picker.image",
+		icon: "i-lucide-image",
+		kind: "image"
+	},
+	{
+		id: "audio",
+		labelKey: "media.picker.audio",
+		icon: "i-lucide-file-audio",
+		kind: "audio"
+	},
+	{
+		id: "video",
+		labelKey: "media.picker.video",
+		icon: "i-lucide-video",
+		kind: "video"
+	}
+];
+/**
+* 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
+* 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.
+*/
+function mediaFeatureCore(ui) {
+	const { AudioBlock, VideoBlock, FileBlock } = mediaBlocks(ui.nodeViews);
+	return {
+		id: "media",
+		extensions: (ctx) => {
+			const { importFiles } = fileImport(ctx.notify, ctx.t);
+			return [
+				Image,
+				AudioBlock,
+				VideoBlock,
+				FileBlock,
+				Media.configure({
+					upload: uploadOf(ctx),
+					importFiles
+				}),
+				FileHandler.configure({
+					consumePasteEvent: true,
+					onDrop: (editor, files, pos) => importFiles(editor, files, pos),
+					onPaste: (editor, files) => importFiles(editor, files)
+				})
+			];
+		},
+		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) => ({
+			id: picker.id,
+			label: ctx.t(picker.labelKey),
+			icon: picker.icon,
+			ability: ABILITY.media,
+			run: (editor) => void pickAndImport(editor, acceptFor(picker.kind), editor.state.selection.from)
+		})), {
+			id: "aufnahme",
+			label: ctx.t("media.slash.record"),
+			icon: "i-lucide-mic",
+			ability: ABILITY.record,
+			run: openAudioRecorder
+		}],
+		overlays: [ui.recorderModal]
+	};
+}
+async function pickAndImport(editor, accept, pos) {
+	const files = await pickFiles(accept);
+	if (files.length && !editor.isDestroyed) await editor.storage.media.importFiles(editor, files, pos);
+}
+//#endregion
+export { mediaFeatureCore };
+
+//# sourceMappingURL=feature.js.map

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

@@ -0,0 +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"}

package/dist/features/media/file-import.d.ts

@@ -0,0 +1,21 @@
+import { Translate } from "../../i18n/index.js";
+import { Notifier } from "../../core/notify.js";
+import "../../core/index.js";
+import { ImportFilesFn } from "./upload.js";
+//#region src/features/media/file-import.d.ts
+/** Text files are read into the document, bigger ones are refused. */
+export declare const MAX_TEXT_BYTES: number;
+/** Whether `file` is imported as text (parsed Markdown) rather than uploaded. */
+export declare function isTextFile(file: File): boolean;
+/**
+ * Imports files into the editor. Text and Markdown files are parsed through the editor's block pipeline into blocks;
+ * all other files are uploaded through `editor.storage.media.upload` and appear as their media or file block. The
+ * blocks go through the pipeline's `wrapImport` stage (identity unless an installed feature wraps imports) and are
+ * inserted as they are. Problems (an oversized text file, a failed upload) are reported through `notify` and the file
+ * is skipped. Framework-free: the Vue and React bindings pass their notifier and translator (`useFileImport()`), the feature passes `ctx.notify` and `ctx.t`.
+ */
+export declare function fileImport(notify: Notifier, t: Translate): {
+  importFiles: ImportFilesFn;
+};
+//#endregion
+//# sourceMappingURL=file-import.d.ts.map

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

@@ -0,0 +1,76 @@
+import { parseBlocks, structureBlocks, wrapImportBlocks } from "../../core/pipeline.js";
+import { captureRange, releaseRanges, resolveRange } from "../../core/doc-anchors.js";
+import { fetchErrorMessage } from "../../core/fetch-error.js";
+import { mediaMime } from "./schema.js";
+import { fileNodeFor, mediaNodeFor } from "./upload.js";
+//#region src/features/media/file-import.ts
+/** Text files are read into the document, bigger ones are refused. */
+const MAX_TEXT_BYTES = 2097152;
+/** Browsers report `''` (or something else) as the type of `.md` files, so the name decides too. */
+const TEXT_EXTENSION = /\.(md|markdown|txt)$/i;
+/** Whether `file` is imported as text (parsed Markdown) rather than uploaded. */
+function isTextFile(file) {
+	const mime = mediaMime(file.type);
+	return mime === "text/markdown" || mime === "text/plain" || TEXT_EXTENSION.test(file.name);
+}
+/** Blocks for `file`: its text parsed through the editor's block pipeline (parse, normalize, segment, structure), or the uploaded media/file block. */
+async function blocksOf(editor, file) {
+	if (isTextFile(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)];
+}
+/**
+* Imports files into the editor. Text and Markdown files are parsed through the editor's block pipeline into blocks;
+* all other files are uploaded through `editor.storage.media.upload` and appear as their media or file block. The
+* blocks go through the pipeline's `wrapImport` stage (identity unless an installed feature wraps imports) and are
+* inserted as they are. Problems (an oversized text file, a failed upload) are reported through `notify` and the file
+* is skipped. Framework-free: the Vue and React bindings pass their notifier and translator (`useFileImport()`), the feature passes `ctx.notify` and `ctx.t`.
+*/
+function fileImport(notify, t) {
+	async function importFiles(editor, files, pos) {
+		let anchor = pos === void 0 ? null : captureRange(editor, {
+			from: pos,
+			to: pos
+		});
+		let allImported = true;
+		try {
+			for (const file of Array.from(files)) {
+				if (isTextFile(file) && file.size > 2097152) {
+					notify({
+						title: t("media.import.tooLarge.title"),
+						description: t("media.import.tooLarge.description", { name: file.name }),
+						kind: "error"
+					});
+					allImported = false;
+					continue;
+				}
+				try {
+					const blocks = wrapImportBlocks(editor, file, await blocksOf(editor, file));
+					if (editor.isDestroyed) return false;
+					const at = (anchor && resolveRange(editor.state, anchor)?.from) ?? editor.state.selection.to;
+					editor.chain().focus().insertContentAt(at, blocks).run();
+					if (anchor) releaseRanges(editor, [anchor]);
+					anchor = null;
+				} catch (error) {
+					notify({
+						title: t("media.import.failed"),
+						description: fetchErrorMessage(error),
+						kind: "error"
+					});
+					allImported = false;
+				}
+			}
+		} finally {
+			if (anchor) releaseRanges(editor, [anchor]);
+		}
+		return allImported;
+	}
+	return { importFiles };
+}
+//#endregion
+export { MAX_TEXT_BYTES, fileImport, isTextFile };
+
+//# sourceMappingURL=file-import.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,7 @@
+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 { MAX_TEXT_BYTES, fileImport, isTextFile } from "./file-import.js";
+import { MediaNodeViews, mediaBlocks, playerOptions } from "./node-views.js";
+import { MediaUi, mediaFeatureCore } from "./feature.js";
+import { MAX_MEDIA_BYTES, MEDIA_TYPES, MediaKind, acceptFor, mediaKindOf, mediaMime } from "./schema.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 };

package/dist/features/media/index.js

@@ -0,0 +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 { 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 };

package/dist/features/media/node-views.d.ts

@@ -0,0 +1,28 @@
+import { NodeViewRenderer } from "@tiptap/core";
+//#region src/features/media/node-views.d.ts
+/** The node view renderers a framework binding supplies for the three blocks. */
+export interface MediaNodeViews {
+  audio: NodeViewRenderer;
+  video: NodeViewRenderer;
+  file: NodeViewRenderer;
+}
+/**
+ * Renderer options of the three media blocks (`VueNodeViewRenderer(view, playerOptions)`,
+ * `ReactNodeViewRenderer(view, playerOptions)`): the player and the title field get their own events, drags and drops
+ * excepted; elsewhere on the block ProseMirror selects and drags it as usual. The default `stopEvent` hands a mousedown
+ * on the player to ProseMirror, which makes the block draggable for that gesture, so dragging the seek bar or volume
+ * slider would drag the block instead.
+ */
+export declare const playerOptions: {
+  stopEvent: ({ event }: {
+    event: Event;
+  }) => boolean;
+};
+/** The audio, video and file nodes of the schema with the views of a framework binding. */
+export declare function mediaBlocks(nodeViews: MediaNodeViews): {
+  AudioBlock: import("@tiptap/core").Node<any, any>;
+  VideoBlock: import("@tiptap/core").Node<any, any>;
+  FileBlock: import("@tiptap/core").Node<any, any>;
+};
+//#endregion
+//# sourceMappingURL=node-views.d.ts.map

package/dist/features/media/node-views.js

@@ -0,0 +1,28 @@
+import { AudioNode, FileNode, VideoNode } from "./schema.js";
+//#region src/features/media/node-views.ts
+/**
+* Renderer options of the three media blocks (`VueNodeViewRenderer(view, playerOptions)`,
+* `ReactNodeViewRenderer(view, playerOptions)`): the player and the title field get their own events, drags and drops
+* excepted; elsewhere on the block ProseMirror selects and drags it as usual. The default `stopEvent` hands a mousedown
+* on the player to ProseMirror, which makes the block draggable for that gesture, so dragging the seek bar or volume
+* slider would drag the block instead.
+*/
+const playerOptions = { stopEvent: ({ event }) => event.target instanceof Element && !!event.target.closest("audio, video, input") && !event.type.startsWith("drag") && event.type !== "drop" };
+/** The audio, video and file nodes of the schema with the views of a framework binding. */
+function mediaBlocks(nodeViews) {
+	return {
+		AudioBlock: AudioNode.extend({ addNodeView() {
+			return nodeViews.audio;
+		} }),
+		VideoBlock: VideoNode.extend({ addNodeView() {
+			return nodeViews.video;
+		} }),
+		FileBlock: FileNode.extend({ addNodeView() {
+			return nodeViews.file;
+		} })
+	};
+}
+//#endregion
+export { mediaBlocks, playerOptions };
+
+//# sourceMappingURL=node-views.js.map

package/dist/features/media/node-views.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-views.js","names":[],"sources":["../../../src/features/media/node-views.ts"],"sourcesContent":["import type { NodeViewRenderer } from '@tiptap/core'\nimport { AudioNode, FileNode, VideoNode } from './schema'\n\n/** The node view renderers a framework binding supplies for the three blocks. */\nexport interface MediaNodeViews {\n  audio: NodeViewRenderer\n  video: NodeViewRenderer\n  file: NodeViewRenderer\n}\n\n/**\n * Renderer options of the three media blocks (`VueNodeViewRenderer(view, playerOptions)`,\n * `ReactNodeViewRenderer(view, playerOptions)`): the player and the title field get their own events, drags and drops\n * excepted; elsewhere on the block ProseMirror selects and drags it as usual. The default `stopEvent` hands a mousedown\n * on the player to ProseMirror, which makes the block draggable for that gesture, so dragging the seek bar or volume\n * slider would drag the block instead.\n */\nexport const playerOptions = {\n  stopEvent: ({ event }: { event: Event }): boolean => event.target instanceof Element\n    && !!event.target.closest('audio, video, input')\n    && !event.type.startsWith('drag')\n    && event.type !== 'drop',\n}\n\n/** The audio, video and file nodes of the schema with the views of a framework binding. */\nexport function mediaBlocks(nodeViews: MediaNodeViews) {\n  return {\n    // Explicit return types: the declarations stay independent of the framework views' inferred types.\n    AudioBlock: AudioNode.extend({\n      addNodeView(): NodeViewRenderer {\n        return nodeViews.audio\n      },\n    }),\n    VideoBlock: VideoNode.extend({\n      addNodeView(): NodeViewRenderer {\n        return nodeViews.video\n      },\n    }),\n    // Same event handling as the players: the title field keeps its own events, drags and drops excepted.\n    FileBlock: FileNode.extend({\n      addNodeView(): NodeViewRenderer {\n        return nodeViews.file\n      },\n    }),\n  }\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,gBAAgB,EAC3B,YAAY,EAAE,YAAuC,MAAM,kBAAkB,WACxE,CAAC,CAAC,MAAM,OAAO,QAAQ,qBAAqB,KAC5C,CAAC,MAAM,KAAK,WAAW,MAAM,KAC7B,MAAM,SAAS,OACtB;;AAGA,SAAgB,YAAY,WAA2B;CACrD,OAAO;EAEL,YAAY,UAAU,OAAO,EAC3B,cAAgC;GAC9B,OAAO,UAAU;EACnB,EACF,CAAC;EACD,YAAY,UAAU,OAAO,EAC3B,cAAgC;GAC9B,OAAO,UAAU;EACnB,EACF,CAAC;EAED,WAAW,SAAS,OAAO,EACzB,cAAgC;GAC9B,OAAO,UAAU;EACnB,EACF,CAAC;CACH;AACF"}

package/dist/features/media/react/AudioRecorderModal.d.ts

@@ -0,0 +1,12 @@
+import { Editor } from "@tiptap/core";
+//#region src/features/media/react/AudioRecorderModal.d.ts
+/**
+ * „Audio aufnehmen“, opened by `openAudioRecorder(editor)` (toolbar „Aufnahme“): records in the browser and imports the
+ * file through `importFiles` (upload, wrapped by the pipeline's `wrapImport` stage) where the caret was when the modal opened.
+ * Nothing enters the (possibly shared) document before the upload succeeded.
+ */
+export declare function AudioRecorderModal({ editor }: {
+  editor: Editor;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=AudioRecorderModal.d.ts.map