@ecsplico/editor 2.1.2 → 3.0.0

package/dist/features/themes/react/SettingsAppearanceTab.js

@@ -36,12 +36,12 @@ function FormField({ label, description, required, small, horizontal, children }
 /** „Darstellung“: the Obsidian theme of the whole app (`appearance.theme`); „Standard“ is the normal look. */
 function SettingsAppearanceTab() {
 	const { settings, update } = useEditorSettings();
-	const { fetch, notify } = useEditorContext();
+	const { backend, notify } = useEditorContext();
 	const { t } = useEditorI18n();
 	const [themes, setThemes] = useState([]);
 	const loadThemes = useCallback(async () => {
-		setThemes(await fetch("/api/editor/themes"));
-	}, [fetch]);
+		setThemes(await backend.themes?.list() ?? []);
+	}, [backend]);
 	useEffect(() => {
 		loadThemes().catch((error) => {
 			console.warn("tiptap-editor: Die Themes konnten nicht geladen werden", error);
@@ -57,14 +57,11 @@ function SettingsAppearanceTab() {
 	const [inputKey, setInputKey] = useState(0);
 	async function upload() {
 		if (!cssFile || uploading) return;
-		const body = new FormData();
-		body.append("css", cssFile);
-		if (manifestFile) body.append("manifest", manifestFile);
 		setUploading(true);
 		try {
-			const record = await fetch("/api/editor/themes", {
-				method: "POST",
-				body
+			const record = await backend.themes.store({
+				css: cssFile,
+				...manifestFile && { manifest: manifestFile }
 			});
 			setCssFile(null);
 			setManifestFile(null);
@@ -94,7 +91,7 @@ function SettingsAppearanceTab() {
 		if (removing) return;
 		setRemoving(record.id);
 		try {
-			await fetch(`/api/editor/themes/${encodeURIComponent(record.id)}`, { method: "DELETE" });
+			await backend.themes.remove(record.id);
 			if (settings.appearance.theme === record.id) setTheme(null);
 			notify({
 				title: t("themes.delete.done", { name: record.name }),

package/dist/features/themes/react/SettingsAppearanceTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsAppearanceTab.js","names":[],"sources":["../../../../src/features/themes/react/SettingsAppearanceTab.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useEffect, useState } from 'react'\nimport { fetchErrorMessage } from '../../../core/fetch-error'\nimport { useEditorContext } from '../../../react/context'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorSettings } from '../../../react/settings'\nimport { SettingsSection } from '../../../react/SettingsSection'\nimport { Badge } from '../../../react/ui/badge'\nimport { Button } from '../../../react/ui/button'\nimport { Input } from '../../../react/ui/input'\nimport { Label } from '../../../react/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../react/ui/select'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport type { ThemeRecord } from '../schema'\n\n/** Radix Select has no `null`/empty value: „Standard“ travels as this sentinel (no theme id can contain underscores). */\nconst STANDARD = '__standard__'\n\n/** A label (+ description) next to or above its control; the counterpart of Nuxt UI's `UFormField`. */\nfunction FormField({ label, description, required, small, horizontal, children }: {\n  label: string\n  description?: string\n  required?: boolean\n  small?: boolean\n  horizontal?: boolean\n  children: ReactNode\n}) {\n  return (\n    <div className={horizontal ? 'flex items-start justify-between gap-4 py-3' : 'flex flex-col gap-1.5'}>\n      <div className={horizontal ? 'min-w-0 flex-1' : undefined}>\n        <Label className={small ? 'text-xs font-medium text-foreground' : 'text-sm font-medium text-foreground'}>\n          {label}\n          {required && <span className=\"ms-0.5 text-destructive\">*</span>}\n        </Label>\n        {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n      </div>\n      {children}\n    </div>\n  )\n}\n\n/** „Darstellung“: the Obsidian theme of the whole app (`appearance.theme`); „Standard“ is the normal look. */\nexport function SettingsAppearanceTab() {\n  const { settings, update } = useEditorSettings()\n  const { fetch, notify } = useEditorContext()\n  const { t } = useEditorI18n()\n\n  const [themes, setThemes] = useState<ThemeRecord[]>([])\n\n  const loadThemes = useCallback(async () => {\n    setThemes(await fetch<ThemeRecord[]>('/api/editor/themes'))\n  }, [fetch])\n\n  useEffect(() => {\n    loadThemes().catch((error: unknown) => {\n      console.warn('tiptap-editor: Die Themes konnten nicht geladen werden', error)\n    })\n  }, [loadThemes])\n\n  const setTheme = (value: string | null) => update((draft) => { draft.appearance.theme = value })\n\n  const [cssFile, setCssFile] = useState<File | null>(null)\n  const [manifestFile, setManifestFile] = useState<File | null>(null)\n  const [uploading, setUploading] = useState(false)\n  /** Bumped after an upload to remount the file inputs (a file input cannot be cleared through its value). */\n  const [inputKey, setInputKey] = useState(0)\n\n  async function upload() {\n    if (!cssFile || uploading) return\n    const body = new FormData()\n    body.append('css', cssFile)\n    if (manifestFile) body.append('manifest', manifestFile)\n    setUploading(true)\n    try {\n      const record = await fetch<ThemeRecord>('/api/editor/themes', { method: 'POST', body })\n      setCssFile(null)\n      setManifestFile(null)\n      setInputKey(key => key + 1)\n      setTheme(record.id)\n      notify({ title: t('themes.upload.done', { name: record.name }), kind: 'success' })\n      try {\n        await loadThemes()\n      }\n      catch (error) {\n        console.warn('tiptap-editor: Die Themes konnten nicht geladen werden', error)\n      }\n    }\n    catch (error) {\n      notify({ title: t('themes.upload.failed'), description: fetchErrorMessage(error), kind: 'error' })\n    }\n    finally {\n      setUploading(false)\n    }\n  }\n\n  const [removing, setRemoving] = useState<string | null>(null)\n\n  async function remove(record: ThemeRecord) {\n    if (removing) return\n    setRemoving(record.id)\n    try {\n      await fetch(`/api/editor/themes/${encodeURIComponent(record.id)}`, { method: 'DELETE' })\n      if (settings.appearance.theme === record.id) setTheme(null)\n      notify({ title: t('themes.delete.done', { name: record.name }), kind: 'success' })\n      try {\n        await loadThemes()\n      }\n      catch (error) {\n        console.warn('tiptap-editor: Die Themes konnten nicht geladen werden', error)\n      }\n    }\n    catch (error) {\n      notify({ title: t('themes.delete.failed'), description: fetchErrorMessage(error), kind: 'error' })\n    }\n    finally {\n      setRemoving(null)\n    }\n  }\n\n  return (\n    <div className=\"flex flex-col gap-8\">\n      <SettingsSection title={t('themes.title')}>\n        <FormField\n          horizontal\n          label={t('themes.select.label')}\n          description={t('themes.select.description')}\n        >\n          <Select value={settings.appearance.theme ?? STANDARD} onValueChange={value => setTheme(value === STANDARD ? null : value)}>\n            <SelectTrigger className=\"w-64\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value={STANDARD}>{t('themes.standard')}</SelectItem>\n              {themes.map(({ id, name, author }) => (\n                <SelectItem key={id} value={id}>{author ? `${name} – ${author}` : name}</SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </FormField>\n\n        <FormField\n          horizontal\n          label={t('themes.upload.label')}\n          description={t('themes.upload.description')}\n        >\n          <form\n            className=\"flex w-64 flex-col gap-2\"\n            onSubmit={(event) => {\n              event.preventDefault()\n              void upload()\n            }}\n          >\n            <FormField label={t('themes.upload.css')} required small>\n              <Input\n                key={`css-${inputKey}`}\n                type=\"file\"\n                accept=\".css,text/css\"\n                className=\"w-full\"\n                disabled={uploading}\n                onChange={event => setCssFile(event.target.files?.[0] ?? null)}\n              />\n            </FormField>\n            <FormField label={t('themes.upload.manifest')} small>\n              <Input\n                key={`manifest-${inputKey}`}\n                type=\"file\"\n                accept=\".json,application/json\"\n                className=\"w-full\"\n                disabled={uploading}\n                onChange={event => setManifestFile(event.target.files?.[0] ?? null)}\n              />\n            </FormField>\n            <Button type=\"submit\" className=\"self-start\" disabled={!cssFile || uploading}>\n              <Icon name={uploading ? 'i-lucide-loader-circle' : 'i-lucide-upload'} className={uploading ? 'animate-spin' : undefined} />\n              {t('themes.upload.submit')}\n            </Button>\n          </form>\n        </FormField>\n      </SettingsSection>\n\n      {themes.length > 0 && (\n        <SettingsSection title={t('themes.library')}>\n          {themes.map(record => (\n            <div key={record.id} className=\"flex items-center gap-3 py-2\">\n              <div className=\"flex min-w-0 flex-1 flex-col\">\n                <span className=\"truncate text-sm font-medium text-foreground\">{record.name}</span>\n                {(record.version || record.author) && (\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {[record.version && t('themes.version', { version: record.version }), record.author && t('themes.byAuthor', { author: record.author })].filter(Boolean).join(' · ')}\n                  </span>\n                )}\n              </div>\n              {record.builtin\n                ? <Badge variant=\"secondary\">{t('themes.builtin')}</Badge>\n                : (\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"text-destructive\"\n                      aria-label={t('themes.delete.label', { name: record.name })}\n                      disabled={removing !== null}\n                      onClick={() => void remove(record)}\n                    >\n                      <Icon name={removing === record.id ? 'i-lucide-loader-circle' : 'i-lucide-trash-2'} className={removing === record.id ? 'animate-spin' : undefined} />\n                    </Button>\n                  )}\n            </div>\n          ))}\n        </SettingsSection>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"SettingsAppearanceTab.js","names":[],"sources":["../../../../src/features/themes/react/SettingsAppearanceTab.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useEffect, useState } from 'react'\nimport { fetchErrorMessage } from '../../../core/fetch-error'\nimport { useEditorContext } from '../../../react/context'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorSettings } from '../../../react/settings'\nimport { SettingsSection } from '../../../react/SettingsSection'\nimport { Badge } from '../../../react/ui/badge'\nimport { Button } from '../../../react/ui/button'\nimport { Input } from '../../../react/ui/input'\nimport { Label } from '../../../react/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../react/ui/select'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport type { ThemeRecord } from '../schema'\n\n/** Radix Select has no `null`/empty value: „Standard“ travels as this sentinel (no theme id can contain underscores). */\nconst STANDARD = '__standard__'\n\n/** A label (+ description) next to or above its control; the counterpart of Nuxt UI's `UFormField`. */\nfunction FormField({ label, description, required, small, horizontal, children }: {\n  label: string\n  description?: string\n  required?: boolean\n  small?: boolean\n  horizontal?: boolean\n  children: ReactNode\n}) {\n  return (\n    <div className={horizontal ? 'flex items-start justify-between gap-4 py-3' : 'flex flex-col gap-1.5'}>\n      <div className={horizontal ? 'min-w-0 flex-1' : undefined}>\n        <Label className={small ? 'text-xs font-medium text-foreground' : 'text-sm font-medium text-foreground'}>\n          {label}\n          {required && <span className=\"ms-0.5 text-destructive\">*</span>}\n        </Label>\n        {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n      </div>\n      {children}\n    </div>\n  )\n}\n\n/** „Darstellung“: the Obsidian theme of the whole app (`appearance.theme`); „Standard“ is the normal look. */\nexport function SettingsAppearanceTab() {\n  const { settings, update } = useEditorSettings()\n  const { backend, notify } = useEditorContext()\n  const { t } = useEditorI18n()\n\n  const [themes, setThemes] = useState<ThemeRecord[]>([])\n\n  const loadThemes = useCallback(async () => {\n    setThemes(await backend.themes?.list() ?? [])\n  }, [backend])\n\n  useEffect(() => {\n    loadThemes().catch((error: unknown) => {\n      console.warn('tiptap-editor: Die Themes konnten nicht geladen werden', error)\n    })\n  }, [loadThemes])\n\n  const setTheme = (value: string | null) => update((draft) => { draft.appearance.theme = value })\n\n  const [cssFile, setCssFile] = useState<File | null>(null)\n  const [manifestFile, setManifestFile] = useState<File | null>(null)\n  const [uploading, setUploading] = useState(false)\n  /** Bumped after an upload to remount the file inputs (a file input cannot be cleared through its value). */\n  const [inputKey, setInputKey] = useState(0)\n\n  async function upload() {\n    if (!cssFile || uploading) return\n    setUploading(true)\n    try {\n      // The themes feature needs the `themes` capability, so the tab is only mounted where the backend has it.\n      const record = await backend.themes!.store({ css: cssFile, ...(manifestFile && { manifest: manifestFile }) })\n      setCssFile(null)\n      setManifestFile(null)\n      setInputKey(key => key + 1)\n      setTheme(record.id)\n      notify({ title: t('themes.upload.done', { name: record.name }), kind: 'success' })\n      try {\n        await loadThemes()\n      }\n      catch (error) {\n        console.warn('tiptap-editor: Die Themes konnten nicht geladen werden', error)\n      }\n    }\n    catch (error) {\n      notify({ title: t('themes.upload.failed'), description: fetchErrorMessage(error), kind: 'error' })\n    }\n    finally {\n      setUploading(false)\n    }\n  }\n\n  const [removing, setRemoving] = useState<string | null>(null)\n\n  async function remove(record: ThemeRecord) {\n    if (removing) return\n    setRemoving(record.id)\n    try {\n      await backend.themes!.remove(record.id)\n      if (settings.appearance.theme === record.id) setTheme(null)\n      notify({ title: t('themes.delete.done', { name: record.name }), kind: 'success' })\n      try {\n        await loadThemes()\n      }\n      catch (error) {\n        console.warn('tiptap-editor: Die Themes konnten nicht geladen werden', error)\n      }\n    }\n    catch (error) {\n      notify({ title: t('themes.delete.failed'), description: fetchErrorMessage(error), kind: 'error' })\n    }\n    finally {\n      setRemoving(null)\n    }\n  }\n\n  return (\n    <div className=\"flex flex-col gap-8\">\n      <SettingsSection title={t('themes.title')}>\n        <FormField\n          horizontal\n          label={t('themes.select.label')}\n          description={t('themes.select.description')}\n        >\n          <Select value={settings.appearance.theme ?? STANDARD} onValueChange={value => setTheme(value === STANDARD ? null : value)}>\n            <SelectTrigger className=\"w-64\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value={STANDARD}>{t('themes.standard')}</SelectItem>\n              {themes.map(({ id, name, author }) => (\n                <SelectItem key={id} value={id}>{author ? `${name} – ${author}` : name}</SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </FormField>\n\n        <FormField\n          horizontal\n          label={t('themes.upload.label')}\n          description={t('themes.upload.description')}\n        >\n          <form\n            className=\"flex w-64 flex-col gap-2\"\n            onSubmit={(event) => {\n              event.preventDefault()\n              void upload()\n            }}\n          >\n            <FormField label={t('themes.upload.css')} required small>\n              <Input\n                key={`css-${inputKey}`}\n                type=\"file\"\n                accept=\".css,text/css\"\n                className=\"w-full\"\n                disabled={uploading}\n                onChange={event => setCssFile(event.target.files?.[0] ?? null)}\n              />\n            </FormField>\n            <FormField label={t('themes.upload.manifest')} small>\n              <Input\n                key={`manifest-${inputKey}`}\n                type=\"file\"\n                accept=\".json,application/json\"\n                className=\"w-full\"\n                disabled={uploading}\n                onChange={event => setManifestFile(event.target.files?.[0] ?? null)}\n              />\n            </FormField>\n            <Button type=\"submit\" className=\"self-start\" disabled={!cssFile || uploading}>\n              <Icon name={uploading ? 'i-lucide-loader-circle' : 'i-lucide-upload'} className={uploading ? 'animate-spin' : undefined} />\n              {t('themes.upload.submit')}\n            </Button>\n          </form>\n        </FormField>\n      </SettingsSection>\n\n      {themes.length > 0 && (\n        <SettingsSection title={t('themes.library')}>\n          {themes.map(record => (\n            <div key={record.id} className=\"flex items-center gap-3 py-2\">\n              <div className=\"flex min-w-0 flex-1 flex-col\">\n                <span className=\"truncate text-sm font-medium text-foreground\">{record.name}</span>\n                {(record.version || record.author) && (\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {[record.version && t('themes.version', { version: record.version }), record.author && t('themes.byAuthor', { author: record.author })].filter(Boolean).join(' · ')}\n                  </span>\n                )}\n              </div>\n              {record.builtin\n                ? <Badge variant=\"secondary\">{t('themes.builtin')}</Badge>\n                : (\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"text-destructive\"\n                      aria-label={t('themes.delete.label', { name: record.name })}\n                      disabled={removing !== null}\n                      onClick={() => void remove(record)}\n                    >\n                      <Icon name={removing === record.id ? 'i-lucide-loader-circle' : 'i-lucide-trash-2'} className={removing === record.id ? 'animate-spin' : undefined} />\n                    </Button>\n                  )}\n            </div>\n          ))}\n        </SettingsSection>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,WAAW;;AAGjB,SAAS,UAAU,EAAE,OAAO,aAAa,UAAU,OAAO,YAAY,YAOnE;CACD,OACE,qBAAC,OAAD;EAAK,WAAW,aAAa,gDAAgD;EAA7E,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,aAAa,mBAAmB,KAAA;GAAhD,UAAA,CACE,qBAAC,OAAD;IAAO,WAAW,QAAQ,wCAAwC;IAAlE,UAAA,CACG,OACA,YAAY,oBAAC,QAAD;KAAM,WAAU;KAA0B,UAAA;IAAO,CAAA,CACzD;GACN,CAAA,GAAA,eAAe,oBAAC,KAAD;IAAG,WAAU;IAAiC,UAAA;GAAe,CAAA,CAC1E;EACJ,CAAA,GAAA,QACE;;AAET;;AAGA,SAAgB,wBAAwB;CACtC,MAAM,EAAE,UAAU,WAAW,kBAAkB;CAC/C,MAAM,EAAE,SAAS,WAAW,iBAAiB;CAC7C,MAAM,EAAE,MAAM,cAAc;CAE5B,MAAM,CAAC,QAAQ,aAAa,SAAwB,CAAC,CAAC;CAEtD,MAAM,aAAa,YAAY,YAAY;EACzC,UAAU,MAAM,QAAQ,QAAQ,KAAK,KAAK,CAAC,CAAC;CAC9C,GAAG,CAAC,OAAO,CAAC;CAEZ,gBAAgB;EACd,WAAW,CAAC,CAAC,OAAO,UAAmB;GACrC,QAAQ,KAAK,0DAA0D,KAAK;EAC9E,CAAC;CACH,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,YAAY,UAAyB,QAAQ,UAAU;EAAE,MAAM,WAAW,QAAQ;CAAM,CAAC;CAE/F,MAAM,CAAC,SAAS,cAAc,SAAsB,IAAI;CACxD,MAAM,CAAC,cAAc,mBAAmB,SAAsB,IAAI;CAClE,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;;CAEhD,MAAM,CAAC,UAAU,eAAe,SAAS,CAAC;CAE1C,eAAe,SAAS;EACtB,IAAI,CAAC,WAAW,WAAW;EAC3B,aAAa,IAAI;EACjB,IAAI;GAEF,MAAM,SAAS,MAAM,QAAQ,OAAQ,MAAM;IAAE,KAAK;IAAS,GAAI,gBAAgB,EAAE,UAAU,aAAa;GAAG,CAAC;GAC5G,WAAW,IAAI;GACf,gBAAgB,IAAI;GACpB,aAAY,QAAO,MAAM,CAAC;GAC1B,SAAS,OAAO,EAAE;GAClB,OAAO;IAAE,OAAO,EAAE,sBAAsB,EAAE,MAAM,OAAO,KAAK,CAAC;IAAG,MAAM;GAAU,CAAC;GACjF,IAAI;IACF,MAAM,WAAW;GACnB,SACO,OAAO;IACZ,QAAQ,KAAK,0DAA0D,KAAK;GAC9E;EACF,SACO,OAAO;GACZ,OAAO;IAAE,OAAO,EAAE,sBAAsB;IAAG,aAAa,kBAAkB,KAAK;IAAG,MAAM;GAAQ,CAAC;EACnG,UACQ;GACN,aAAa,KAAK;EACpB;CACF;CAEA,MAAM,CAAC,UAAU,eAAe,SAAwB,IAAI;CAE5D,eAAe,OAAO,QAAqB;EACzC,IAAI,UAAU;EACd,YAAY,OAAO,EAAE;EACrB,IAAI;GACF,MAAM,QAAQ,OAAQ,OAAO,OAAO,EAAE;GACtC,IAAI,SAAS,WAAW,UAAU,OAAO,IAAI,SAAS,IAAI;GAC1D,OAAO;IAAE,OAAO,EAAE,sBAAsB,EAAE,MAAM,OAAO,KAAK,CAAC;IAAG,MAAM;GAAU,CAAC;GACjF,IAAI;IACF,MAAM,WAAW;GACnB,SACO,OAAO;IACZ,QAAQ,KAAK,0DAA0D,KAAK;GAC9E;EACF,SACO,OAAO;GACZ,OAAO;IAAE,OAAO,EAAE,sBAAsB;IAAG,aAAa,kBAAkB,KAAK;IAAG,MAAM;GAAQ,CAAC;EACnG,UACQ;GACN,YAAY,IAAI;EAClB;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,qBAAC,iBAAD;GAAiB,OAAO,EAAE,cAAc;GAAxC,UAAA,CACE,oBAAC,WAAD;IACE,YAAA;IACA,OAAO,EAAE,qBAAqB;IAC9B,aAAa,EAAE,2BAA2B;IAE1C,UAAA,qBAAC,QAAD;KAAQ,OAAO,SAAS,WAAW,SAAS;KAAU,gBAAe,UAAS,SAAS,UAAU,WAAW,OAAO,KAAK;KAAxH,UAAA,CACE,oBAAC,eAAD;MAAe,WAAU;MACvB,UAAA,oBAAC,aAAD,CAAc,CAAA;KACD,CAAA,GACf,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,YAAD;MAAY,OAAO;MAAW,UAAA,EAAE,iBAAiB;KAAc,CAAA,GAC9D,OAAO,KAAK,EAAE,IAAI,MAAM,aACvB,oBAAC,YAAD;MAAqB,OAAO;MAAK,UAAA,SAAS,GAAG,KAAK,KAAK,WAAW;KAAiB,GAAlE,EAAkE,CACpF,CACY,EAAA,CAAA,CACT;;GACC,CAAA,GAEX,oBAAC,WAAD;IACE,YAAA;IACA,OAAO,EAAE,qBAAqB;IAC9B,aAAa,EAAE,2BAA2B;IAE1C,UAAA,qBAAC,QAAD;KACE,WAAU;KACV,WAAW,UAAU;MACnB,MAAM,eAAe;MACrB,OAAY;KACd;KALF,UAAA;MAOE,oBAAC,WAAD;OAAW,OAAO,EAAE,mBAAmB;OAAG,UAAA;OAAS,OAAA;OACjD,UAAA,oBAAC,OAAD;QAEE,MAAK;QACL,QAAO;QACP,WAAU;QACV,UAAU;QACV,WAAU,UAAS,WAAW,MAAM,OAAO,QAAQ,MAAM,IAAI;OAC9D,GANM,OAAO,UAMb;MACQ,CAAA;MACX,oBAAC,WAAD;OAAW,OAAO,EAAE,wBAAwB;OAAG,OAAA;OAC7C,UAAA,oBAAC,OAAD;QAEE,MAAK;QACL,QAAO;QACP,WAAU;QACV,UAAU;QACV,WAAU,UAAS,gBAAgB,MAAM,OAAO,QAAQ,MAAM,IAAI;OACnE,GANM,YAAY,UAMlB;MACQ,CAAA;MACX,qBAAC,QAAD;OAAQ,MAAK;OAAS,WAAU;OAAa,UAAU,CAAC,WAAW;OAAnE,UAAA,CACE,oBAAC,MAAD;QAAM,MAAM,YAAY,2BAA2B;QAAmB,WAAW,YAAY,iBAAiB,KAAA;OAAY,CAAA,GACzH,EAAE,sBAAsB,CACnB;;KACJ;;GACG,CAAA,CACI;EAEhB,CAAA,GAAA,OAAO,SAAS,KACf,oBAAC,iBAAD;GAAiB,OAAO,EAAE,gBAAgB;GACvC,UAAA,OAAO,KAAI,WACV,qBAAC,OAAD;IAAqB,WAAU;IAA/B,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,QAAD;MAAM,WAAU;MAAgD,UAAA,OAAO;KAAW,CAAA,IAChF,OAAO,WAAW,OAAO,WACzB,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,CAAC,OAAO,WAAW,EAAE,kBAAkB,EAAE,SAAS,OAAO,QAAQ,CAAC,GAAG,OAAO,UAAU,EAAE,mBAAmB,EAAE,QAAQ,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,KAAK;KAC9J,CAAA,CAEL;IACJ,CAAA,GAAA,OAAO,UACJ,oBAAC,OAAD;KAAO,SAAQ;KAAa,UAAA,EAAE,gBAAgB;IAAS,CAAA,IAErD,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,WAAU;KACV,cAAY,EAAE,uBAAuB,EAAE,MAAM,OAAO,KAAK,CAAC;KAC1D,UAAU,aAAa;KACvB,eAAe,KAAK,OAAO,MAAM;KAEjC,UAAA,oBAAC,MAAD;MAAM,MAAM,aAAa,OAAO,KAAK,2BAA2B;MAAoB,WAAW,aAAa,OAAO,KAAK,iBAAiB,KAAA;KAAY,CAAA;IAC/I,CAAA,CAEX;GAvBK,GAAA,OAAO,EAuBZ,CACN;EACc,CAAA,CAEhB;;AAET"}

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

@@ -1,4 +1,5 @@
 import { THEME_ID } from "../../settings/index.js";
+import { ThemeRecord } from "../../core/backend-types.js";
 import { z } from "zod";
 //#region src/features/themes/schema.d.ts
 /** Upper bound for a theme stylesheet (bytes). */
@@ -11,11 +12,6 @@ export declare const themeManifestSchema: z.ZodObject<{
   authorUrl: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
 export type ThemeManifest = z.infer<typeof themeManifestSchema>;
-/** A theme in the shared library; `builtin` themes are seeded by the host and cannot be deleted. */
-export interface ThemeRecord extends ThemeManifest {
-  id: string;
-  builtin: boolean;
-}
 //#endregion
-export { THEME_ID };
+export { THEME_ID, type ThemeRecord };
 //# sourceMappingURL=schema.d.ts.map

package/dist/features/themes/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","names":[],"sources":["../../../src/features/themes/schema.ts"],"sourcesContent":["import { z } from 'zod'\nimport { THEME_ID } from '../../settings'\n\n/** Valid theme id (pattern defined in `settings`, which validates `appearance.theme` with it). */\nexport { THEME_ID }\n\n/** Upper bound for a theme stylesheet (bytes). */\nexport const MAX_THEME_BYTES = 2 * 1024 * 1024\n\n/** The subset of an Obsidian `manifest.json` the editor keeps. */\nexport const themeManifestSchema = z.object({\n  name: z.string().min(1).max(120),\n  version: z.string().max(40).optional(),\n  author: z.string().max(120).optional(),\n  authorUrl: z.string().max(400).optional(),\n})\nexport type ThemeManifest = z.infer<typeof themeManifestSchema>\n\n/** A theme in the shared library; `builtin` themes are seeded by the host and cannot be deleted. */\nexport interface ThemeRecord extends ThemeManifest {\n  id: string\n  builtin: boolean\n}\n"],"mappings":";;;;AAOA,MAAa,kBAAkB;;AAG/B,MAAa,sBAAsB,EAAE,OAAO;CAC1C,MAAM,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,GAAG;CAC/B,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,SAAS;CACrC,QAAQ,EAAE,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,SAAS;CACrC,WAAW,EAAE,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,SAAS;AAC1C,CAAC"}
+{"version":3,"file":"schema.js","names":[],"sources":["../../../src/features/themes/schema.ts"],"sourcesContent":["import { z } from 'zod'\nimport { THEME_ID } from '../../settings'\n\n/** Valid theme id (pattern defined in `settings`, which validates `appearance.theme` with it). */\nexport { THEME_ID }\n\n/** Upper bound for a theme stylesheet (bytes). */\nexport const MAX_THEME_BYTES = 2 * 1024 * 1024\n\n/** The subset of an Obsidian `manifest.json` the editor keeps. */\nexport const themeManifestSchema = z.object({\n  name: z.string().min(1).max(120),\n  version: z.string().max(40).optional(),\n  author: z.string().max(120).optional(),\n  authorUrl: z.string().max(400).optional(),\n})\nexport type ThemeManifest = z.infer<typeof themeManifestSchema>\n\n/** A theme in the shared library (`ThemeManifest` + `id` + `builtin`); defined in core because `EditorBackend` lists them. */\nexport type { ThemeRecord } from '../../core/backend-types'\n"],"mappings":";;;;AAOA,MAAa,kBAAkB;;AAG/B,MAAa,sBAAsB,EAAE,OAAO;CAC1C,MAAM,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,GAAG;CAC/B,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,SAAS;CACrC,QAAQ,EAAE,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,SAAS;CACrC,WAAW,EAAE,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,SAAS;AAC1C,CAAC"}

package/dist/features/themes/theme-runtime.d.ts

@@ -4,7 +4,7 @@ import { FeatureContext } from "../../core/feature.js";
 export declare const THEME_SCOPE_CLASS = "obsidian-theme";
 /**
  * The theme runtime of the app `ctx` belongs to: applies `settings.appearance.theme` (fetches the stylesheet through
- * `ctx.fetch`, scopes it, keeps one `<style data-tiptap-theme>` in the document head, puts `obsidian-theme theme-dark|theme-light`
+ * `ctx.backend.themes`, scopes it, keeps one `<style data-tiptap-theme>` in the document head, puts `obsidian-theme theme-dark|theme-light`
  * on `<html>`) and follows the app's colour mode.
  * Reference-counted per app: the first call starts the runtime, every call returns an idempotent release, the last release
  * stops it (removing the style element and the root classes). Surfaces of one app share a single runtime.

package/dist/features/themes/theme-runtime.js

@@ -51,7 +51,9 @@ function createRuntime(ctx) {
 	async function load(id) {
 		const cached = cache.get(id);
 		if (cached !== void 0) return cached;
-		const css = await ctx.fetch(`/api/editor/themes/${encodeURIComponent(id)}`, { responseType: "text" });
+		const themes = ctx.backend.themes;
+		if (!themes) throw new Error(`@ecsplico/editor: backend "${ctx.backend.name}" has no themes capability`);
+		const css = await themes.css(id);
 		const scoped = scopeThemeCss(css, `.${THEME_SCOPE_CLASS}`);
 		cache.set(id, scoped);
 		return scoped;
@@ -115,7 +117,7 @@ function createRuntime(ctx) {
 }
 /**
 * The theme runtime of the app `ctx` belongs to: applies `settings.appearance.theme` (fetches the stylesheet through
-* `ctx.fetch`, scopes it, keeps one `<style data-tiptap-theme>` in the document head, puts `obsidian-theme theme-dark|theme-light`
+* `ctx.backend.themes`, scopes it, keeps one `<style data-tiptap-theme>` in the document head, puts `obsidian-theme theme-dark|theme-light`
 * on `<html>`) and follows the app's colour mode.
 * Reference-counted per app: the first call starts the runtime, every call returns an idempotent release, the last release
 * stops it (removing the style element and the root classes). Surfaces of one app share a single runtime.

package/dist/features/themes/theme-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-runtime.js","names":[],"sources":["../../../src/features/themes/theme-runtime.ts"],"sourcesContent":["import type { FeatureContext } from '../../core/feature'\nimport { scopeThemeCss } from './scope-css'\n\n/** Class that scopes a theme's rules (`scopeThemeCss`) and the bridge stylesheet; the runtime puts it on `<html>`. */\nexport const THEME_SCOPE_CLASS = 'obsidian-theme'\n\n/** Marks the single `<style>` element in `document.head` that carries the active theme. */\nconst STYLE_ATTRIBUTE = 'data-tiptap-theme'\n\n// One runtime per app (keyed by the app's settings store): every surface of the page shares the style element and the\n// cache. Reference-counted: the last release stops it.\nconst runtimes = new Map<object, { count: number, stop: () => void }>()\n\nconst PREFERS_DARK = '(prefers-color-scheme: dark)'\n\n/** Whether the app is in dark mode: `html.dark` (Nuxt colour mode), `html.light`, else the system preference. */\nfunction readDark(): boolean {\n  if (typeof document === 'undefined') return false\n  const classes = document.documentElement.classList\n  if (classes.contains('dark')) return true\n  if (classes.contains('light')) return false\n  return typeof matchMedia === 'function' && matchMedia(PREFERS_DARK).matches\n}\n\nfunction createRuntime(ctx: FeatureContext): () => void {\n  let dark = readDark()\n  /** The theme whose style is in the document; null = standard look. */\n  let applied: string | null = null\n  const cache = new Map<string, string>()\n  let style: HTMLStyleElement | undefined\n  let latest = 0\n  let teardown: (() => void) | undefined\n  let stopTheme: (() => void) | undefined\n\n  /** `obsidian-theme theme-dark|theme-light` on `<html>` while a theme is applied; none of the three otherwise (standard look). */\n  function applyRootClasses() {\n    if (typeof document === 'undefined') return\n    const root = document.documentElement.classList\n    const on = applied !== null\n    root.toggle(THEME_SCOPE_CLASS, on)\n    root.toggle('theme-dark', on && dark)\n    root.toggle('theme-light', on && !dark)\n  }\n\n  function removeRootClasses() {\n    if (typeof document === 'undefined') return\n    document.documentElement.classList.remove(THEME_SCOPE_CLASS, 'theme-dark', 'theme-light')\n  }\n\n  function removeStyle() {\n    style?.remove()\n    style = undefined\n  }\n\n  function showStyle(css: string) {\n    if (!style) {\n      style = document.createElement('style')\n      style.setAttribute(STYLE_ATTRIBUTE, '')\n      document.head.appendChild(style)\n    }\n    style.textContent = css\n  }\n\n  async function load(id: string): Promise<string> {\n    const cached = cache.get(id)\n    if (cached !== undefined) return cached\n    const css: string = await ctx.fetch(`/api/editor/themes/${encodeURIComponent(id)}`, { responseType: 'text' })\n    const scoped = scopeThemeCss(css, `.${THEME_SCOPE_CLASS}`)\n    cache.set(id, scoped)\n    return scoped\n  }\n\n  async function select(id: string | null) {\n    const ticket = ++latest\n    if (id === null) {\n      removeStyle()\n      applied = null\n      applyRootClasses()\n      return\n    }\n    try {\n      const css = await load(id)\n      if (ticket !== latest) return\n      showStyle(css)\n      applied = id\n      applyRootClasses()\n    }\n    catch (error) {\n      if (ticket !== latest) return\n      // The stored setting stays untouched: the theme may come back (host restored it), the session shows the standard look.\n      console.warn(`tiptap-editor: Theme „${id}“ konnte nicht geladen werden, die Standard-Darstellung wird verwendet`, error)\n      removeStyle()\n      applied = null\n      applyRootClasses()\n    }\n  }\n\n  if (typeof document !== 'undefined') {\n    void select(ctx.settings.get().appearance.theme)\n    let lastTheme = ctx.settings.get().appearance.theme\n    stopTheme = ctx.settings.subscribe((value) => {\n      if (value.appearance.theme === lastTheme) return\n      lastTheme = value.appearance.theme\n      void select(lastTheme)\n    })\n    applyRootClasses()\n    const onDarkChange = () => {\n      const next = readDark()\n      if (next === dark) return\n      dark = next\n      applyRootClasses()\n    }\n    const observer = new MutationObserver(onDarkChange)\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })\n    const media = typeof matchMedia === 'function' ? matchMedia(PREFERS_DARK) : undefined\n    media?.addEventListener('change', onDarkChange)\n    teardown = () => {\n      observer.disconnect()\n      media?.removeEventListener('change', onDarkChange)\n      removeStyle()\n    }\n  }\n\n  return () => {\n    latest++\n    stopTheme?.()\n    teardown?.()\n    removeRootClasses()\n  }\n}\n\n/**\n * The theme runtime of the app `ctx` belongs to: applies `settings.appearance.theme` (fetches the stylesheet through\n * `ctx.fetch`, scopes it, keeps one `<style data-tiptap-theme>` in the document head, puts `obsidian-theme theme-dark|theme-light`\n * on `<html>`) and follows the app's colour mode.\n * Reference-counted per app: the first call starts the runtime, every call returns an idempotent release, the last release\n * stops it (removing the style element and the root classes). Surfaces of one app share a single runtime.\n */\nexport function startObsidianTheme(ctx: FeatureContext): () => void {\n  const key: object = ctx.settings\n  let entry = runtimes.get(key)\n  if (!entry) {\n    entry = { count: 0, stop: createRuntime(ctx) }\n    runtimes.set(key, entry)\n  }\n  entry.count++\n  const held = entry\n  let released = false\n  return () => {\n    if (released) return\n    released = true\n    if (--held.count > 0) return\n    held.stop()\n    if (runtimes.get(key) === held) runtimes.delete(key)\n  }\n}\n"],"mappings":";;;AAIA,MAAa,oBAAoB;;AAGjC,MAAM,kBAAkB;AAIxB,MAAM,2BAAW,IAAI,IAAiD;AAEtE,MAAM,eAAe;;AAGrB,SAAS,WAAoB;CAC3B,IAAI,OAAO,aAAa,aAAa,OAAO;CAC5C,MAAM,UAAU,SAAS,gBAAgB;CACzC,IAAI,QAAQ,SAAS,MAAM,GAAG,OAAO;CACrC,IAAI,QAAQ,SAAS,OAAO,GAAG,OAAO;CACtC,OAAO,OAAO,eAAe,cAAc,WAAW,YAAY,CAAC,CAAC;AACtE;AAEA,SAAS,cAAc,KAAiC;CACtD,IAAI,OAAO,SAAS;;CAEpB,IAAI,UAAyB;CAC7B,MAAM,wBAAQ,IAAI,IAAoB;CACtC,IAAI;CACJ,IAAI,SAAS;CACb,IAAI;CACJ,IAAI;;CAGJ,SAAS,mBAAmB;EAC1B,IAAI,OAAO,aAAa,aAAa;EACrC,MAAM,OAAO,SAAS,gBAAgB;EACtC,MAAM,KAAK,YAAY;EACvB,KAAK,OAAO,mBAAmB,EAAE;EACjC,KAAK,OAAO,cAAc,MAAM,IAAI;EACpC,KAAK,OAAO,eAAe,MAAM,CAAC,IAAI;CACxC;CAEA,SAAS,oBAAoB;EAC3B,IAAI,OAAO,aAAa,aAAa;EACrC,SAAS,gBAAgB,UAAU,OAAO,mBAAmB,cAAc,aAAa;CAC1F;CAEA,SAAS,cAAc;EACrB,OAAO,OAAO;EACd,QAAQ,KAAA;CACV;CAEA,SAAS,UAAU,KAAa;EAC9B,IAAI,CAAC,OAAO;GACV,QAAQ,SAAS,cAAc,OAAO;GACtC,MAAM,aAAa,iBAAiB,EAAE;GACtC,SAAS,KAAK,YAAY,KAAK;EACjC;EACA,MAAM,cAAc;CACtB;CAEA,eAAe,KAAK,IAA6B;EAC/C,MAAM,SAAS,MAAM,IAAI,EAAE;EAC3B,IAAI,WAAW,KAAA,GAAW,OAAO;EACjC,MAAM,MAAc,MAAM,IAAI,MAAM,sBAAsB,mBAAmB,EAAE,KAAK,EAAE,cAAc,OAAO,CAAC;EAC5G,MAAM,SAAS,cAAc,KAAK,IAAI,mBAAmB;EACzD,MAAM,IAAI,IAAI,MAAM;EACpB,OAAO;CACT;CAEA,eAAe,OAAO,IAAmB;EACvC,MAAM,SAAS,EAAE;EACjB,IAAI,OAAO,MAAM;GACf,YAAY;GACZ,UAAU;GACV,iBAAiB;GACjB;EACF;EACA,IAAI;GACF,MAAM,MAAM,MAAM,KAAK,EAAE;GACzB,IAAI,WAAW,QAAQ;GACvB,UAAU,GAAG;GACb,UAAU;GACV,iBAAiB;EACnB,SACO,OAAO;GACZ,IAAI,WAAW,QAAQ;GAEvB,QAAQ,KAAK,yBAAyB,GAAG,yEAAyE,KAAK;GACvH,YAAY;GACZ,UAAU;GACV,iBAAiB;EACnB;CACF;CAEA,IAAI,OAAO,aAAa,aAAa;EACnC,OAAY,IAAI,SAAS,IAAI,CAAC,CAAC,WAAW,KAAK;EAC/C,IAAI,YAAY,IAAI,SAAS,IAAI,CAAC,CAAC,WAAW;EAC9C,YAAY,IAAI,SAAS,WAAW,UAAU;GAC5C,IAAI,MAAM,WAAW,UAAU,WAAW;GAC1C,YAAY,MAAM,WAAW;GAC7B,OAAY,SAAS;EACvB,CAAC;EACD,iBAAiB;EACjB,MAAM,qBAAqB;GACzB,MAAM,OAAO,SAAS;GACtB,IAAI,SAAS,MAAM;GACnB,OAAO;GACP,iBAAiB;EACnB;EACA,MAAM,WAAW,IAAI,iBAAiB,YAAY;EAClD,SAAS,QAAQ,SAAS,iBAAiB;GAAE,YAAY;GAAM,iBAAiB,CAAC,OAAO;EAAE,CAAC;EAC3F,MAAM,QAAQ,OAAO,eAAe,aAAa,WAAW,YAAY,IAAI,KAAA;EAC5E,OAAO,iBAAiB,UAAU,YAAY;EAC9C,iBAAiB;GACf,SAAS,WAAW;GACpB,OAAO,oBAAoB,UAAU,YAAY;GACjD,YAAY;EACd;CACF;CAEA,aAAa;EACX;EACA,YAAY;EACZ,WAAW;EACX,kBAAkB;CACpB;AACF;;;;;;;;AASA,SAAgB,mBAAmB,KAAiC;CAClE,MAAM,MAAc,IAAI;CACxB,IAAI,QAAQ,SAAS,IAAI,GAAG;CAC5B,IAAI,CAAC,OAAO;EACV,QAAQ;GAAE,OAAO;GAAG,MAAM,cAAc,GAAG;EAAE;EAC7C,SAAS,IAAI,KAAK,KAAK;CACzB;CACA,MAAM;CACN,MAAM,OAAO;CACb,IAAI,WAAW;CACf,aAAa;EACX,IAAI,UAAU;EACd,WAAW;EACX,IAAI,EAAE,KAAK,QAAQ,GAAG;EACtB,KAAK,KAAK;EACV,IAAI,SAAS,IAAI,GAAG,MAAM,MAAM,SAAS,OAAO,GAAG;CACrD;AACF"}
+{"version":3,"file":"theme-runtime.js","names":[],"sources":["../../../src/features/themes/theme-runtime.ts"],"sourcesContent":["import type { FeatureContext } from '../../core/feature'\nimport { scopeThemeCss } from './scope-css'\n\n/** Class that scopes a theme's rules (`scopeThemeCss`) and the bridge stylesheet; the runtime puts it on `<html>`. */\nexport const THEME_SCOPE_CLASS = 'obsidian-theme'\n\n/** Marks the single `<style>` element in `document.head` that carries the active theme. */\nconst STYLE_ATTRIBUTE = 'data-tiptap-theme'\n\n// One runtime per app (keyed by the app's settings store): every surface of the page shares the style element and the\n// cache. Reference-counted: the last release stops it.\nconst runtimes = new Map<object, { count: number, stop: () => void }>()\n\nconst PREFERS_DARK = '(prefers-color-scheme: dark)'\n\n/** Whether the app is in dark mode: `html.dark` (Nuxt colour mode), `html.light`, else the system preference. */\nfunction readDark(): boolean {\n  if (typeof document === 'undefined') return false\n  const classes = document.documentElement.classList\n  if (classes.contains('dark')) return true\n  if (classes.contains('light')) return false\n  return typeof matchMedia === 'function' && matchMedia(PREFERS_DARK).matches\n}\n\nfunction createRuntime(ctx: FeatureContext): () => void {\n  let dark = readDark()\n  /** The theme whose style is in the document; null = standard look. */\n  let applied: string | null = null\n  const cache = new Map<string, string>()\n  let style: HTMLStyleElement | undefined\n  let latest = 0\n  let teardown: (() => void) | undefined\n  let stopTheme: (() => void) | undefined\n\n  /** `obsidian-theme theme-dark|theme-light` on `<html>` while a theme is applied; none of the three otherwise (standard look). */\n  function applyRootClasses() {\n    if (typeof document === 'undefined') return\n    const root = document.documentElement.classList\n    const on = applied !== null\n    root.toggle(THEME_SCOPE_CLASS, on)\n    root.toggle('theme-dark', on && dark)\n    root.toggle('theme-light', on && !dark)\n  }\n\n  function removeRootClasses() {\n    if (typeof document === 'undefined') return\n    document.documentElement.classList.remove(THEME_SCOPE_CLASS, 'theme-dark', 'theme-light')\n  }\n\n  function removeStyle() {\n    style?.remove()\n    style = undefined\n  }\n\n  function showStyle(css: string) {\n    if (!style) {\n      style = document.createElement('style')\n      style.setAttribute(STYLE_ATTRIBUTE, '')\n      document.head.appendChild(style)\n    }\n    style.textContent = css\n  }\n\n  async function load(id: string): Promise<string> {\n    const cached = cache.get(id)\n    if (cached !== undefined) return cached\n    const themes = ctx.backend.themes\n    if (!themes) throw new Error(`@ecsplico/editor: backend \"${ctx.backend.name}\" has no themes capability`)\n    const css = await themes.css(id)\n    const scoped = scopeThemeCss(css, `.${THEME_SCOPE_CLASS}`)\n    cache.set(id, scoped)\n    return scoped\n  }\n\n  async function select(id: string | null) {\n    const ticket = ++latest\n    if (id === null) {\n      removeStyle()\n      applied = null\n      applyRootClasses()\n      return\n    }\n    try {\n      const css = await load(id)\n      if (ticket !== latest) return\n      showStyle(css)\n      applied = id\n      applyRootClasses()\n    }\n    catch (error) {\n      if (ticket !== latest) return\n      // The stored setting stays untouched: the theme may come back (host restored it), the session shows the standard look.\n      console.warn(`tiptap-editor: Theme „${id}“ konnte nicht geladen werden, die Standard-Darstellung wird verwendet`, error)\n      removeStyle()\n      applied = null\n      applyRootClasses()\n    }\n  }\n\n  if (typeof document !== 'undefined') {\n    void select(ctx.settings.get().appearance.theme)\n    let lastTheme = ctx.settings.get().appearance.theme\n    stopTheme = ctx.settings.subscribe((value) => {\n      if (value.appearance.theme === lastTheme) return\n      lastTheme = value.appearance.theme\n      void select(lastTheme)\n    })\n    applyRootClasses()\n    const onDarkChange = () => {\n      const next = readDark()\n      if (next === dark) return\n      dark = next\n      applyRootClasses()\n    }\n    const observer = new MutationObserver(onDarkChange)\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })\n    const media = typeof matchMedia === 'function' ? matchMedia(PREFERS_DARK) : undefined\n    media?.addEventListener('change', onDarkChange)\n    teardown = () => {\n      observer.disconnect()\n      media?.removeEventListener('change', onDarkChange)\n      removeStyle()\n    }\n  }\n\n  return () => {\n    latest++\n    stopTheme?.()\n    teardown?.()\n    removeRootClasses()\n  }\n}\n\n/**\n * The theme runtime of the app `ctx` belongs to: applies `settings.appearance.theme` (fetches the stylesheet through\n * `ctx.backend.themes`, scopes it, keeps one `<style data-tiptap-theme>` in the document head, puts `obsidian-theme theme-dark|theme-light`\n * on `<html>`) and follows the app's colour mode.\n * Reference-counted per app: the first call starts the runtime, every call returns an idempotent release, the last release\n * stops it (removing the style element and the root classes). Surfaces of one app share a single runtime.\n */\nexport function startObsidianTheme(ctx: FeatureContext): () => void {\n  const key: object = ctx.settings\n  let entry = runtimes.get(key)\n  if (!entry) {\n    entry = { count: 0, stop: createRuntime(ctx) }\n    runtimes.set(key, entry)\n  }\n  entry.count++\n  const held = entry\n  let released = false\n  return () => {\n    if (released) return\n    released = true\n    if (--held.count > 0) return\n    held.stop()\n    if (runtimes.get(key) === held) runtimes.delete(key)\n  }\n}\n"],"mappings":"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"}

package/dist/features/transcript/TranscriptSegmentView.js

@@ -1,8 +1,9 @@
 import { metadataOf } from "../../core/metadata.js";
 import { METADATA_LIST } from "../../core/metadata-types.js";
+import { formatSegmentTime } from "./segment-node.js";
 import { useEditorI18n } from "../../vue/use-editor-i18n.js";
 import _sfc_main$1 from "../../vue/components/SuggestionList.js";
-import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, openBlock, ref, unref, useTemplateRef, watch, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, openBlock, ref, toDisplayString, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 import { NodeViewContent, NodeViewWrapper, nodeViewProps } from "@tiptap/vue-3";
 //#region src/features/transcript/TranscriptSegmentView.vue
 const _hoisted_1 = { class: "grid grid-cols-[5.5rem_1fr] items-start gap-2" };
@@ -18,6 +19,7 @@ const _hoisted_3 = [
 	"aria-expanded",
 	"readonly"
 ];
+const _hoisted_4 = ["title", "aria-label"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "TranscriptSegmentView",
 	props: nodeViewProps,
@@ -125,39 +127,57 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				props.editor.commands.focus(props.getPos() + props.node.nodeSize - 1);
 			}
 		}
+		/** Seeks and plays the source recording of the enclosing Baustein (a no-op without the composites feature or a source). */
+		function seek() {
+			const start = props.node.attrs.start;
+			const pos = props.getPos();
+			if (typeof start === "number" && pos !== void 0) props.editor.commands.seekSource?.(pos, start);
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(NodeViewWrapper), {
 				class: normalizeClass(["transcript-segment my-2", { "is-selected rounded-md ring-1 ring-[var(--sk-primary)]": _ctx.selected }]),
 				"data-type": "transcript-segment",
 				"data-id": _ctx.node.attrs.id || void 0
 			}, {
-				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("input", {
-					value: draft.value,
-					title: draft.value || void 0,
-					placeholder: unref(t)("transcript.speaker"),
-					"aria-label": unref(t)("transcript.speaker"),
-					autocomplete: "off",
-					role: "combobox",
-					"aria-expanded": open.value && items.value.length > 0,
-					readonly: readonly.value,
-					class: "w-full truncate 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)]",
-					onFocus,
-					onBlur,
-					onMousedown: _cache[0] || (_cache[0] = ($event) => openList("")),
-					onInput,
-					onKeydown: onKeyDown
-				}, null, 40, _hoisted_3), open.value && items.value.length ? (openBlock(), createBlock(_sfc_main$1, {
-					key: 0,
-					ref_key: "list",
-					ref: list,
-					class: "absolute top-full left-0 z-50 mt-1",
-					items: items.value,
-					display: (item) => ({ label: item.label }),
-					command: pick,
-					loading: false,
-					"loading-text": "",
-					"empty-text": ""
-				}, null, 8, ["items", "display"])) : createCommentVNode("v-if", true)]), createVNode(unref(NodeViewContent), { class: "transcript-segment__text" })])]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
+					createElementVNode("input", {
+						value: draft.value,
+						title: draft.value || void 0,
+						placeholder: unref(t)("transcript.speaker"),
+						"aria-label": unref(t)("transcript.speaker"),
+						autocomplete: "off",
+						role: "combobox",
+						"aria-expanded": open.value && items.value.length > 0,
+						readonly: readonly.value,
+						class: "w-full truncate 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)]",
+						onFocus,
+						onBlur,
+						onMousedown: _cache[0] || (_cache[0] = ($event) => openList("")),
+						onInput,
+						onKeydown: onKeyDown
+					}, null, 40, _hoisted_3),
+					_ctx.node.attrs.start != null ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "transcript-segment__time block rounded px-1 text-xs tabular-nums text-[var(--sk-muted)] hover:text-[var(--sk-primary)] hover:underline",
+						title: unref(t)("transcript.seek", { time: unref(formatSegmentTime)(_ctx.node.attrs.start) }),
+						"aria-label": unref(t)("transcript.seek", { time: unref(formatSegmentTime)(_ctx.node.attrs.start) }),
+						onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+						onClick: seek
+					}, toDisplayString(unref(formatSegmentTime)(_ctx.node.attrs.start)), 41, _hoisted_4)) : createCommentVNode("v-if", true),
+					open.value && items.value.length ? (openBlock(), createBlock(_sfc_main$1, {
+						key: 1,
+						ref_key: "list",
+						ref: list,
+						class: "absolute top-full left-0 z-50 mt-1",
+						items: items.value,
+						display: (item) => ({ label: item.label }),
+						command: pick,
+						loading: false,
+						"loading-text": "",
+						"empty-text": ""
+					}, null, 8, ["items", "display"])) : createCommentVNode("v-if", true)
+				]), createVNode(unref(NodeViewContent), { class: "transcript-segment__text" })])]),
 				_: 1
 			}, 8, ["class", "data-id"]);
 		};

package/dist/features/transcript/TranscriptSegmentView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TranscriptSegmentView.js","names":["selected","node","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createElementVNode","SuggestionList","_createCommentVNode","_createVNode"],"sources":["../../../src/features/transcript/TranscriptSegmentView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { NodeViewContent, NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'\nimport { computed, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'\nimport { METADATA_LIST, type MetadataItem, metadataOf } from '../../core'\nimport SuggestionList from '../../vue/components/SuggestionList.vue'\nimport { useEditorI18n } from '../../vue/use-editor-i18n'\n\nconst props = defineProps(nodeViewProps)\nconst { t } = useEditorI18n()\n\nconst speaker = computed(() => String(props.node.attrs.speaker ?? ''))\n// Typed text is a draft until committed (blur, Enter, picking a suggestion): one undo step per name, and the\n// speaker list is only extended with whole names, not with every prefix typed on the way.\nconst draft = ref(speaker.value)\nconst focused = ref(false)\nwatch(speaker, (value) => {\n  if (!focused.value) draft.value = value\n})\n// `editor.isEditable` is not reactive, so a read-only editor is detected when the input gets focus.\nconst readonly = ref(false)\n\nconst open = ref(false)\nconst items = ref<MetadataItem[]>([])\nconst list = useTemplateRef<InstanceType<typeof SuggestionList>>('list')\n\n// Same loading as the composite tags: 150 ms after typing pauses, a newer search aborts the older one (sources may be remote).\nlet timer: ReturnType<typeof setTimeout> | undefined\nlet pending: AbortController | undefined\nfunction scheduleSearch(query: string) {\n  clearTimeout(timer)\n  timer = setTimeout(async () => {\n    pending?.abort()\n    const controller = pending = new AbortController()\n    try {\n      const found = await metadataOf(props.editor).search(METADATA_LIST.speakers, { query, editor: props.editor, signal: controller.signal })\n      if (!controller.signal.aborted) items.value = found.filter(item => item.label.trim())\n    }\n    catch (error) {\n      if (!controller.signal.aborted) console.warn('Sprecher-Vorschläge konnten nicht geladen werden', error)\n    }\n  }, 150)\n}\nonBeforeUnmount(() => {\n  clearTimeout(timer)\n  pending?.abort()\n})\n\nfunction openList(query: string) {\n  if (!props.editor.isEditable) return\n  open.value = true\n  scheduleSearch(query)\n}\n\nfunction closeList() {\n  open.value = false\n  clearTimeout(timer)\n  pending?.abort()\n}\n\nfunction onFocus() {\n  focused.value = true\n  readonly.value = !props.editor.isEditable\n}\n\nfunction onInput(e: Event) {\n  draft.value = (e.target as HTMLInputElement).value\n  openList(draft.value)\n}\n\n/** Writes the draft to the node; a name the speaker list does not know yet is added to it (reported via `metadataCreate`). */\nasync function commit(name = draft.value.trim()) {\n  draft.value = name\n  if (readonly.value || name === speaker.value) return\n  // Searched before the node changes: `search` calls the source synchronously, so a list derived from the document\n  // (the default `speakers`) does not already contain the name just typed here.\n  const found = name ? metadataOf(props.editor).search(METADATA_LIST.speakers, { query: name, editor: props.editor }) : null\n  props.updateAttributes({ speaker: name })\n  if (!found) return\n  if (!(await found).some(item => item.label.toLowerCase() === name.toLowerCase())) {\n    metadataOf(props.editor).create(METADATA_LIST.speakers, { id: name, label: name })\n  }\n}\n\nfunction pick(item: unknown) {\n  closeList()\n  void commit((item as MetadataItem).label)\n}\n\nfunction onBlur() {\n  focused.value = false\n  closeList()\n  void commit()\n}\n\n/** The speaker field of the segment `step` places before/after this one (document order), if any. */\nfunction neighbourField(input: HTMLInputElement, step: -1 | 1): HTMLInputElement | undefined {\n  const fields = [...props.editor.view.dom.querySelectorAll<HTMLInputElement>('.transcript-segment__speaker input')]\n  return fields[fields.indexOf(input) + step]\n}\n\n// An open list takes ArrowUp/ArrowDown/Enter/Tab; otherwise ArrowUp/ArrowDown move to the neighbouring segment's\n// speaker and Enter continues in this segment's text.\nfunction onKeyDown(e: KeyboardEvent) {\n  if (open.value && items.value.length && list.value?.onKeyDown(e)) {\n    e.preventDefault()\n    return\n  }\n  const input = e.target as HTMLInputElement\n  if (e.key === 'Escape' && open.value) {\n    e.preventDefault()\n    closeList()\n  }\n  else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n    const next = neighbourField(input, e.key === 'ArrowUp' ? -1 : 1)\n    if (!next) return\n    e.preventDefault()\n    next.focus()\n    next.setSelectionRange(next.value.length, next.value.length)\n  }\n  else if (e.key === 'Enter') {\n    e.preventDefault()\n    input.blur()\n    props.editor.commands.focus(props.getPos()! + props.node.nodeSize - 1)\n  }\n}\n</script>\n\n<template>\n  <NodeViewWrapper\n    :class=\"['transcript-segment my-2', { 'is-selected rounded-md ring-1 ring-[var(--sk-primary)]': selected }]\"\n    data-type=\"transcript-segment\"\n    :data-id=\"node.attrs.id || undefined\"\n  >\n    <div class=\"grid grid-cols-[5.5rem_1fr] items-start gap-2\">\n      <div class=\"transcript-segment__speaker relative pt-0.5\" contenteditable=\"false\">\n        <input\n          :value=\"draft\"\n          :title=\"draft || undefined\"\n          :placeholder=\"t('transcript.speaker')\"\n          :aria-label=\"t('transcript.speaker')\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          :aria-expanded=\"open && items.length > 0\"\n          :readonly=\"readonly\"\n          class=\"w-full truncate 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          @focus=\"onFocus\"\n          @blur=\"onBlur\"\n          @mousedown=\"openList('')\"\n          @input=\"onInput\"\n          @keydown=\"onKeyDown\"\n        >\n        <SuggestionList\n          v-if=\"open && items.length\"\n          ref=\"list\"\n          class=\"absolute top-full left-0 z-50 mt-1\"\n          :items=\"items\"\n          :display=\"item => ({ label: (item as MetadataItem).label })\"\n          :command=\"pick\"\n          :loading=\"false\"\n          loading-text=\"\"\n          empty-text=\"\"\n        />\n      </div>\n      <NodeViewContent class=\"transcript-segment__text\" />\n    </div>\n  </NodeViewWrapper>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EACd,MAAM,EAAE,MAAM,cAAc;EAE5B,MAAM,UAAU,eAAe,OAAO,MAAM,KAAK,MAAM,WAAW,EAAE,CAAC;EAGrE,MAAM,QAAQ,IAAI,QAAQ,KAAK;EAC/B,MAAM,UAAU,IAAI,KAAK;EACzB,MAAM,UAAU,UAAU;GACxB,IAAI,CAAC,QAAQ,OAAO,MAAM,QAAQ;EACpC,CAAC;EAED,MAAM,WAAW,IAAI,KAAK;EAE1B,MAAM,OAAO,IAAI,KAAK;EACtB,MAAM,QAAQ,IAAoB,CAAC,CAAC;EACpC,MAAM,OAAO,eAAoD,MAAM;EAGvE,IAAI;EACJ,IAAI;EACJ,SAAS,eAAe,OAAe;GACrC,aAAa,KAAK;GAClB,QAAQ,WAAW,YAAY;IAC7B,SAAS,MAAM;IACf,MAAM,aAAa,UAAU,IAAI,gBAAgB;IACjD,IAAI;KACF,MAAM,QAAQ,MAAM,WAAW,MAAM,MAAM,CAAC,CAAC,OAAO,cAAc,UAAU;MAAE;MAAO,QAAQ,MAAM;MAAQ,QAAQ,WAAW;KAAO,CAAC;KACtI,IAAI,CAAC,WAAW,OAAO,SAAS,MAAM,QAAQ,MAAM,QAAO,SAAQ,KAAK,MAAM,KAAK,CAAC;IACtF,SACO,OAAO;KACZ,IAAI,CAAC,WAAW,OAAO,SAAS,QAAQ,KAAK,oDAAoD,KAAK;IACxG;GACF,GAAG,GAAG;EACR;EACA,sBAAsB;GACpB,aAAa,KAAK;GAClB,SAAS,MAAM;EACjB,CAAC;EAED,SAAS,SAAS,OAAe;GAC/B,IAAI,CAAC,MAAM,OAAO,YAAY;GAC9B,KAAK,QAAQ;GACb,eAAe,KAAK;EACtB;EAEA,SAAS,YAAY;GACnB,KAAK,QAAQ;GACb,aAAa,KAAK;GAClB,SAAS,MAAM;EACjB;EAEA,SAAS,UAAU;GACjB,QAAQ,QAAQ;GAChB,SAAS,QAAQ,CAAC,MAAM,OAAO;EACjC;EAEA,SAAS,QAAQ,GAAU;GACzB,MAAM,QAAS,EAAE,OAA4B;GAC7C,SAAS,MAAM,KAAK;EACtB;;EAGA,eAAe,OAAO,OAAO,MAAM,MAAM,KAAK,GAAG;GAC/C,MAAM,QAAQ;GACd,IAAI,SAAS,SAAS,SAAS,QAAQ,OAAO;GAG9C,MAAM,QAAQ,OAAO,WAAW,MAAM,MAAM,CAAC,CAAC,OAAO,cAAc,UAAU;IAAE,OAAO;IAAM,QAAQ,MAAM;GAAO,CAAC,IAAI;GACtH,MAAM,iBAAiB,EAAE,SAAS,KAAK,CAAC;GACxC,IAAI,CAAC,OAAO;GACZ,IAAI,EAAE,MAAM,MAAA,CAAO,MAAK,SAAQ,KAAK,MAAM,YAAY,MAAM,KAAK,YAAY,CAAC,GAC7E,WAAW,MAAM,MAAM,CAAC,CAAC,OAAO,cAAc,UAAU;IAAE,IAAI;IAAM,OAAO;GAAK,CAAC;EAErF;EAEA,SAAS,KAAK,MAAe;GAC3B,UAAU;GACV,OAAa,KAAsB,KAAK;EAC1C;EAEA,SAAS,SAAS;GAChB,QAAQ,QAAQ;GAChB,UAAU;GACV,OAAY;EACd;;EAGA,SAAS,eAAe,OAAyB,MAA4C;GAC3F,MAAM,SAAS,CAAC,GAAG,MAAM,OAAO,KAAK,IAAI,iBAAmC,oCAAoC,CAAC;GACjH,OAAO,OAAO,OAAO,QAAQ,KAAK,IAAI;EACxC;EAIA,SAAS,UAAU,GAAkB;GACnC,IAAI,KAAK,SAAS,MAAM,MAAM,UAAU,KAAK,OAAO,UAAU,CAAC,GAAG;IAChE,EAAE,eAAe;IACjB;GACF;GACA,MAAM,QAAQ,EAAE;GAChB,IAAI,EAAE,QAAQ,YAAY,KAAK,OAAO;IACpC,EAAE,eAAe;IACjB,UAAU;GACZ,OACK,IAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;IACrD,MAAM,OAAO,eAAe,OAAO,EAAE,QAAQ,YAAY,KAAK,CAAC;IAC/D,IAAI,CAAC,MAAM;IACX,EAAE,eAAe;IACjB,KAAK,MAAM;IACX,KAAK,kBAAkB,KAAK,MAAM,QAAQ,KAAK,MAAM,MAAM;GAC7D,OACK,IAAI,EAAE,QAAQ,SAAS;IAC1B,EAAE,eAAe;IACjB,MAAM,KAAK;IACX,MAAM,OAAO,SAAS,MAAM,MAAM,OAAO,IAAK,MAAM,KAAK,WAAW,CAAC;GACvE;EACF;;GAIE,OAAAE,UAAA,GAAAC,YAqCkBC,MAAA,eAAA,GAAA;IApCf,OAAKC,eAAA,CAAA,2BAAA,EAAA,0DAA0FL,KAAAA,SAAQ,CAAA,CAAA;IACxG,aAAU;IACT,WAASC,KAAAA,KAAK,MAAM,MAAM,KAAA;;IAE3B,SAAAK,cA+BM,CA/BNC,mBA+BM,OA/BN,YA+BM,CA9BJA,mBA4BM,OA5BN,YA4BM,CA3BJA,mBAeC,SAAA;KAdE,OAAO,MAAA;KACP,OAAO,MAAA,SAAS,KAAA;KAChB,aAAaH,MAAA,CAAA,CAAC,CAAA,oBAAA;KACd,cAAYA,MAAA,CAAA,CAAC,CAAA,oBAAA;KACd,cAAa;KACb,MAAK;KACJ,iBAAe,KAAA,SAAQ,MAAA,MAAM,SAAM;KACnC,UAAU,SAAA;KACX,OAAM;KACE;KACD;KACN,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,SAAQ,EAAA;KACZ;KACP,WAAS;IAGJ,GAAA,MAAA,IAAA,UAAA,GAAA,KAAA,SAAQ,MAAA,MAAM,UADtBF,UAAA,GAAAC,YAUEK,aAAA;;KARI,SAAA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAO,MAAA;KACP,UAAS,UAAI,EAAA,OAAe,KAAsB,MAAK;KACvD,SAAS;KACT,SAAS;KACV,gBAAa;KACb,cAAW;IAGf,GAAA,MAAA,GAAA,CAAA,SAAA,SAAA,CAAA,KAAAC,mBAAA,QAAA,IAAA,CAAA,CAAA,GAAAC,YAAoDN,MAAA,eAAA,GAAA,EAAnC,OAAM,2BAA0B,CAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"TranscriptSegmentView.js","names":["selected","node","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createElementVNode","_createElementBlock","_withModifiers","_toDisplayString","_createCommentVNode","SuggestionList","_createVNode"],"sources":["../../../src/features/transcript/TranscriptSegmentView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { NodeViewContent, NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'\nimport { computed, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'\nimport { METADATA_LIST, type MetadataItem, metadataOf } from '../../core'\nimport SuggestionList from '../../vue/components/SuggestionList.vue'\nimport { useEditorI18n } from '../../vue/use-editor-i18n'\nimport { formatSegmentTime } from './segment-node'\n\nconst props = defineProps(nodeViewProps)\nconst { t } = useEditorI18n()\n\nconst speaker = computed(() => String(props.node.attrs.speaker ?? ''))\n// Typed text is a draft until committed (blur, Enter, picking a suggestion): one undo step per name, and the\n// speaker list is only extended with whole names, not with every prefix typed on the way.\nconst draft = ref(speaker.value)\nconst focused = ref(false)\nwatch(speaker, (value) => {\n  if (!focused.value) draft.value = value\n})\n// `editor.isEditable` is not reactive, so a read-only editor is detected when the input gets focus.\nconst readonly = ref(false)\n\nconst open = ref(false)\nconst items = ref<MetadataItem[]>([])\nconst list = useTemplateRef<InstanceType<typeof SuggestionList>>('list')\n\n// Same loading as the composite tags: 150 ms after typing pauses, a newer search aborts the older one (sources may be remote).\nlet timer: ReturnType<typeof setTimeout> | undefined\nlet pending: AbortController | undefined\nfunction scheduleSearch(query: string) {\n  clearTimeout(timer)\n  timer = setTimeout(async () => {\n    pending?.abort()\n    const controller = pending = new AbortController()\n    try {\n      const found = await metadataOf(props.editor).search(METADATA_LIST.speakers, { query, editor: props.editor, signal: controller.signal })\n      if (!controller.signal.aborted) items.value = found.filter(item => item.label.trim())\n    }\n    catch (error) {\n      if (!controller.signal.aborted) console.warn('Sprecher-Vorschläge konnten nicht geladen werden', error)\n    }\n  }, 150)\n}\nonBeforeUnmount(() => {\n  clearTimeout(timer)\n  pending?.abort()\n})\n\nfunction openList(query: string) {\n  if (!props.editor.isEditable) return\n  open.value = true\n  scheduleSearch(query)\n}\n\nfunction closeList() {\n  open.value = false\n  clearTimeout(timer)\n  pending?.abort()\n}\n\nfunction onFocus() {\n  focused.value = true\n  readonly.value = !props.editor.isEditable\n}\n\nfunction onInput(e: Event) {\n  draft.value = (e.target as HTMLInputElement).value\n  openList(draft.value)\n}\n\n/** Writes the draft to the node; a name the speaker list does not know yet is added to it (reported via `metadataCreate`). */\nasync function commit(name = draft.value.trim()) {\n  draft.value = name\n  if (readonly.value || name === speaker.value) return\n  // Searched before the node changes: `search` calls the source synchronously, so a list derived from the document\n  // (the default `speakers`) does not already contain the name just typed here.\n  const found = name ? metadataOf(props.editor).search(METADATA_LIST.speakers, { query: name, editor: props.editor }) : null\n  props.updateAttributes({ speaker: name })\n  if (!found) return\n  if (!(await found).some(item => item.label.toLowerCase() === name.toLowerCase())) {\n    metadataOf(props.editor).create(METADATA_LIST.speakers, { id: name, label: name })\n  }\n}\n\nfunction pick(item: unknown) {\n  closeList()\n  void commit((item as MetadataItem).label)\n}\n\nfunction onBlur() {\n  focused.value = false\n  closeList()\n  void commit()\n}\n\n/** The speaker field of the segment `step` places before/after this one (document order), if any. */\nfunction neighbourField(input: HTMLInputElement, step: -1 | 1): HTMLInputElement | undefined {\n  const fields = [...props.editor.view.dom.querySelectorAll<HTMLInputElement>('.transcript-segment__speaker input')]\n  return fields[fields.indexOf(input) + step]\n}\n\n// An open list takes ArrowUp/ArrowDown/Enter/Tab; otherwise ArrowUp/ArrowDown move to the neighbouring segment's\n// speaker and Enter continues in this segment's text.\nfunction onKeyDown(e: KeyboardEvent) {\n  if (open.value && items.value.length && list.value?.onKeyDown(e)) {\n    e.preventDefault()\n    return\n  }\n  const input = e.target as HTMLInputElement\n  if (e.key === 'Escape' && open.value) {\n    e.preventDefault()\n    closeList()\n  }\n  else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n    const next = neighbourField(input, e.key === 'ArrowUp' ? -1 : 1)\n    if (!next) return\n    e.preventDefault()\n    next.focus()\n    next.setSelectionRange(next.value.length, next.value.length)\n  }\n  else if (e.key === 'Enter') {\n    e.preventDefault()\n    input.blur()\n    props.editor.commands.focus(props.getPos()! + props.node.nodeSize - 1)\n  }\n}\n\n/** Seeks and plays the source recording of the enclosing Baustein (a no-op without the composites feature or a source). */\nfunction seek() {\n  const start = props.node.attrs.start\n  const pos = props.getPos()\n  // `seekSource` is contributed by the composites feature; without it the editor has no command and the click does nothing.\n  if (typeof start === 'number' && pos !== undefined) props.editor.commands.seekSource?.(pos, start)\n}\n</script>\n\n<template>\n  <NodeViewWrapper\n    :class=\"['transcript-segment my-2', { 'is-selected rounded-md ring-1 ring-[var(--sk-primary)]': selected }]\"\n    data-type=\"transcript-segment\"\n    :data-id=\"node.attrs.id || undefined\"\n  >\n    <div class=\"grid grid-cols-[5.5rem_1fr] items-start gap-2\">\n      <div class=\"transcript-segment__speaker relative pt-0.5\" contenteditable=\"false\">\n        <input\n          :value=\"draft\"\n          :title=\"draft || undefined\"\n          :placeholder=\"t('transcript.speaker')\"\n          :aria-label=\"t('transcript.speaker')\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          :aria-expanded=\"open && items.length > 0\"\n          :readonly=\"readonly\"\n          class=\"w-full truncate 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          @focus=\"onFocus\"\n          @blur=\"onBlur\"\n          @mousedown=\"openList('')\"\n          @input=\"onInput\"\n          @keydown=\"onKeyDown\"\n        >\n        <button\n          v-if=\"node.attrs.start != null\"\n          type=\"button\"\n          class=\"transcript-segment__time block rounded px-1 text-xs tabular-nums text-[var(--sk-muted)] hover:text-[var(--sk-primary)] hover:underline\"\n          :title=\"t('transcript.seek', { time: formatSegmentTime(node.attrs.start) })\"\n          :aria-label=\"t('transcript.seek', { time: formatSegmentTime(node.attrs.start) })\"\n          @mousedown.prevent\n          @click=\"seek\"\n        >\n          {{ formatSegmentTime(node.attrs.start) }}\n        </button>\n        <SuggestionList\n          v-if=\"open && items.length\"\n          ref=\"list\"\n          class=\"absolute top-full left-0 z-50 mt-1\"\n          :items=\"items\"\n          :display=\"item => ({ label: (item as MetadataItem).label })\"\n          :command=\"pick\"\n          :loading=\"false\"\n          loading-text=\"\"\n          empty-text=\"\"\n        />\n      </div>\n      <NodeViewContent class=\"transcript-segment__text\" />\n    </div>\n  </NodeViewWrapper>\n</template>\n"],"mappings":"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"}

package/dist/features/transcript/feature.js

@@ -1,8 +1,9 @@
 import { ABILITY } from "../../core/schema/abilities.js";
 import { filterMetadataItems } from "../../core/metadata.js";
-import { commandItem } from "../../core/toolbar.js";
+import { command } from "../../core/commands.js";
 import { speakersIn } from "./speakers.js";
 import { TranscriptSegmentNode } from "./segment-node.js";
+import { transcriptSchemaExtensions } from "./schema.js";
 import { speakerConversions } from "./convert.js";
 import { segmentSpeakerLines } from "./segment.js";
 //#region src/features/transcript/feature.ts
@@ -26,25 +27,26 @@ function transcriptFeatureCore(ui) {
 	const TranscriptSegment = transcriptSegment(ui.nodeViews);
 	return {
 		id: "transcript",
+		dimension: "content",
+		schemaExtensions: transcriptSchemaExtensions,
 		extensions: () => [TranscriptSegment],
-		toolbar: (ctx) => [{
-			id: "inserts",
-			order: 50,
-			items: [commandItem({
-				id: "speaker",
-				order: 10,
-				icon: "i-lucide-speech",
-				label: ctx.t("transcript.toolbar.speaker"),
-				kbds: [
-					"meta",
-					"shift",
-					"s"
-				],
-				ability: ABILITY.transcript,
-				command: (c) => c.toggleTranscriptSegment(),
-				isActive: (e) => e.isActive("transcriptSegment")
-			})]
-		}],
+		commands: (ctx) => [command({
+			id: "speaker",
+			toolbar: {
+				group: "inserts",
+				order: 10
+			},
+			icon: "i-lucide-speech",
+			label: ctx.t("transcript.toolbar.speaker"),
+			kbds: [
+				"meta",
+				"shift",
+				"s"
+			],
+			ability: ABILITY.transcript,
+			command: (c) => c.toggleTranscriptSegment(),
+			active: (e) => e.isActive("transcriptSegment")
+		})],
 		metadataDefaults: () => ({ speakers: ({ query, editor }) => filterMetadataItems(speakersIn(editor.state.doc).map((s) => ({
 			id: s,
 			label: s

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

@@ -1 +1 @@
-{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/transcript/feature.ts"],"sourcesContent":["import type { NodeViewRenderer } from '@tiptap/core'\nimport type { EditorFeature } from '../../core'\nimport { commandItem, filterMetadataItems } from '../../core'\nimport { ABILITY } from '../../core/schema'\nimport { speakerConversions } from './convert'\nimport { segmentSpeakerLines } from './segment'\nimport { TranscriptSegmentNode } from './segment-node'\nimport { speakersIn } from './speakers'\n\n/** What a framework binding supplies to the transcript feature: the node view of the speaker segment. */\nexport interface TranscriptUi {\n  nodeViews: {\n    transcriptSegment: NodeViewRenderer\n  }\n}\n\n/**\n * The speaker segment node with the node view of a framework binding (`VueNodeViewRenderer(TranscriptSegmentView)`,\n * `ReactNodeViewRenderer(TranscriptSegmentView)`). TipTap's default `NodeView.stopEvent` already hands INPUT events to\n * the speaker field, not ProseMirror.\n */\nexport function transcriptSegment(nodeViews: TranscriptUi['nodeViews']) {\n  return TranscriptSegmentNode.extend({\n    // Explicit return type: keeps the declaration independent of the framework view's inferred types.\n    addNodeView(): NodeViewRenderer {\n      return nodeViews.transcriptSegment\n    },\n  })\n}\n\n/**\n * Speaker segments: the node with its speaker field, the „Sprecherblock“ toolbar button (Mod-Shift-S), the conversion\n * into speaker lines and a built-in `speakers` list (speakers already in the document, no backend). Contributes the\n * `segment` stage: `**Name:** text` lines of imported or AI-written Markdown become segments. The only framework part is\n * the node view (`ui.nodeViews`), so the descriptor carries no component slot.\n */\nexport function transcriptFeatureCore(ui: TranscriptUi): EditorFeature<never> {\n  const TranscriptSegment = transcriptSegment(ui.nodeViews)\n  return {\n    id: 'transcript',\n    extensions: () => [TranscriptSegment],\n    toolbar: ctx => [{\n      id: 'inserts',\n      order: 50,\n      items: [\n        commandItem({\n          id: 'speaker',\n          order: 10,\n          icon: 'i-lucide-speech',\n          label: ctx.t('transcript.toolbar.speaker'),\n          kbds: ['meta', 'shift', 's'],\n          ability: ABILITY.transcript,\n          command: c => c.toggleTranscriptSegment(),\n          isActive: e => e.isActive('transcriptSegment'),\n        }),\n      ],\n    }],\n    metadataDefaults: () => ({\n      speakers: ({ query, editor }) => filterMetadataItems(speakersIn(editor.state.doc).map(s => ({ id: s, label: s })), query),\n    }),\n    conversions: [speakerConversions],\n    blocks: { segment: segmentSpeakerLines },\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,kBAAkB,WAAsC;CACtE,OAAO,sBAAsB,OAAO,EAElC,cAAgC;EAC9B,OAAO,UAAU;CACnB,EACF,CAAC;AACH;;;;;;;AAQA,SAAgB,sBAAsB,IAAwC;CAC5E,MAAM,oBAAoB,kBAAkB,GAAG,SAAS;CACxD,OAAO;EACL,IAAI;EACJ,kBAAkB,CAAC,iBAAiB;EACpC,UAAS,QAAO,CAAC;GACf,IAAI;GACJ,OAAO;GACP,OAAO,CACL,YAAY;IACV,IAAI;IACJ,OAAO;IACP,MAAM;IACN,OAAO,IAAI,EAAE,4BAA4B;IACzC,MAAM;KAAC;KAAQ;KAAS;IAAG;IAC3B,SAAS,QAAQ;IACjB,UAAS,MAAK,EAAE,wBAAwB;IACxC,WAAU,MAAK,EAAE,SAAS,mBAAmB;GAC/C,CAAC,CACH;EACF,CAAC;EACD,yBAAyB,EACvB,WAAW,EAAE,OAAO,aAAa,oBAAoB,WAAW,OAAO,MAAM,GAAG,CAAC,CAAC,KAAI,OAAM;GAAE,IAAI;GAAG,OAAO;EAAE,EAAE,GAAG,KAAK,EAC1H;EACA,aAAa,CAAC,kBAAkB;EAChC,QAAQ,EAAE,SAAS,oBAAoB;CACzC;AACF"}
+{"version":3,"file":"feature.js","names":[],"sources":["../../../src/features/transcript/feature.ts"],"sourcesContent":["import type { NodeViewRenderer } from '@tiptap/core'\nimport type { EditorFeature } from '../../core'\nimport { command, filterMetadataItems } from '../../core'\nimport { ABILITY } from '../../core/schema'\nimport { speakerConversions } from './convert'\nimport { segmentSpeakerLines } from './segment'\nimport { transcriptSchemaExtensions } from './schema'\nimport { TranscriptSegmentNode } from './segment-node'\nimport { speakersIn } from './speakers'\n\n/** What a framework binding supplies to the transcript feature: the node view of the speaker segment. */\nexport interface TranscriptUi {\n  nodeViews: {\n    transcriptSegment: NodeViewRenderer\n  }\n}\n\n/**\n * The speaker segment node with the node view of a framework binding (`VueNodeViewRenderer(TranscriptSegmentView)`,\n * `ReactNodeViewRenderer(TranscriptSegmentView)`). TipTap's default `NodeView.stopEvent` already hands INPUT events to\n * the speaker field, not ProseMirror.\n */\nexport function transcriptSegment(nodeViews: TranscriptUi['nodeViews']) {\n  return TranscriptSegmentNode.extend({\n    // Explicit return type: keeps the declaration independent of the framework view's inferred types.\n    addNodeView(): NodeViewRenderer {\n      return nodeViews.transcriptSegment\n    },\n  })\n}\n\n/**\n * Speaker segments: the node with its speaker field, the „Sprecherblock“ toolbar button (Mod-Shift-S), the conversion\n * into speaker lines and a built-in `speakers` list (speakers already in the document, no backend). Contributes the\n * `segment` stage: `**Name:** text` lines of imported or AI-written Markdown become segments. The only framework part is\n * the node view (`ui.nodeViews`), so the descriptor carries no component slot.\n */\nexport function transcriptFeatureCore(ui: TranscriptUi): EditorFeature<never> {\n  const TranscriptSegment = transcriptSegment(ui.nodeViews)\n  return {\n    id: 'transcript',\n    dimension: 'content',\n    schemaExtensions: transcriptSchemaExtensions,\n    extensions: () => [TranscriptSegment],\n    commands: ctx => [\n      command({\n        id: 'speaker',\n        toolbar: { group: 'inserts', order: 10 },\n        icon: 'i-lucide-speech',\n        label: ctx.t('transcript.toolbar.speaker'),\n        kbds: ['meta', 'shift', 's'],\n        ability: ABILITY.transcript,\n        command: c => c.toggleTranscriptSegment(),\n        active: e => e.isActive('transcriptSegment'),\n      }),\n    ],\n    metadataDefaults: () => ({\n      speakers: ({ query, editor }) => filterMetadataItems(speakersIn(editor.state.doc).map(s => ({ id: s, label: s })), query),\n    }),\n    conversions: [speakerConversions],\n    blocks: { segment: segmentSpeakerLines },\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,SAAgB,kBAAkB,WAAsC;CACtE,OAAO,sBAAsB,OAAO,EAElC,cAAgC;EAC9B,OAAO,UAAU;CACnB,EACF,CAAC;AACH;;;;;;;AAQA,SAAgB,sBAAsB,IAAwC;CAC5E,MAAM,oBAAoB,kBAAkB,GAAG,SAAS;CACxD,OAAO;EACL,IAAI;EACJ,WAAW;EACX,kBAAkB;EAClB,kBAAkB,CAAC,iBAAiB;EACpC,WAAU,QAAO,CACf,QAAQ;GACN,IAAI;GACJ,SAAS;IAAE,OAAO;IAAW,OAAO;GAAG;GACvC,MAAM;GACN,OAAO,IAAI,EAAE,4BAA4B;GACzC,MAAM;IAAC;IAAQ;IAAS;GAAG;GAC3B,SAAS,QAAQ;GACjB,UAAS,MAAK,EAAE,wBAAwB;GACxC,SAAQ,MAAK,EAAE,SAAS,mBAAmB;EAC7C,CAAC,CACH;EACA,yBAAyB,EACvB,WAAW,EAAE,OAAO,aAAa,oBAAoB,WAAW,OAAO,MAAM,GAAG,CAAC,CAAC,KAAI,OAAM;GAAE,IAAI;GAAG,OAAO;EAAE,EAAE,GAAG,KAAK,EAC1H;EACA,aAAa,CAAC,kBAAkB;EAChC,QAAQ,EAAE,SAAS,oBAAoB;CACzC;AACF"}

package/dist/features/transcript/react/TranscriptSegmentView.js

@@ -1,5 +1,6 @@
 import { metadataOf } from "../../../core/metadata.js";
 import { METADATA_LIST } from "../../../core/metadata-types.js";
+import { formatSegmentTime } from "../segment-node.js";
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { cn } from "../../../react/ui/utils.js";
 import { SuggestionList } from "../../../react/suggestion-renderer.js";
@@ -99,6 +100,12 @@ function TranscriptSegmentView({ node, editor, selected, updateAttributes, getPo
 			editor.commands.focus(getPos() + node.nodeSize - 1);
 		}
 	};
+	/** Seeks and plays the source recording of the enclosing Baustein (a no-op without the composites feature or a source). */
+	const seek = () => {
+		const start = node.attrs.start;
+		const pos = getPos();
+		if (typeof start === "number" && pos !== void 0) editor.commands.seekSource?.(pos, start);
+	};
 	return /* @__PURE__ */ jsx(NodeViewWrapper, {
 		className: cn("transcript-segment my-2", selected && "is-selected rounded-md ring-1 ring-primary"),
 		"data-type": "transcript-segment",
@@ -108,43 +115,55 @@ function TranscriptSegmentView({ node, editor, selected, updateAttributes, getPo
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "transcript-segment__speaker relative pt-0.5",
 				contentEditable: false,
-				children: [/* @__PURE__ */ jsx("input", {
-					value: draft,
-					title: draft || void 0,
-					placeholder: t("transcript.speaker"),
-					"aria-label": t("transcript.speaker"),
-					autoComplete: "off",
-					role: "combobox",
-					"aria-expanded": open && items.length > 0,
-					readOnly: readonly,
-					className: "w-full truncate rounded bg-transparent px-1 text-sm text-muted-foreground outline-none placeholder:text-muted-foreground/60 focus:bg-muted focus:text-foreground",
-					onFocus: () => {
-						focused.current = true;
-						setReadonly(!editor.isEditable);
-					},
-					onBlur: () => {
-						focused.current = false;
-						closeList();
-						commit();
-					},
-					onMouseDown: () => openList(""),
-					onChange: (e) => {
-						setDraft(e.target.value);
-						openList(e.target.value);
-					},
-					onKeyDown
-				}), open && items.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: "absolute top-full left-0 z-50 mt-1",
-					children: /* @__PURE__ */ jsx(SuggestionList, {
-						ref: list,
-						items,
-						display: displayItem,
-						command: pick,
-						loading: false,
-						loadingText: "",
-						emptyText: ""
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						value: draft,
+						title: draft || void 0,
+						placeholder: t("transcript.speaker"),
+						"aria-label": t("transcript.speaker"),
+						autoComplete: "off",
+						role: "combobox",
+						"aria-expanded": open && items.length > 0,
+						readOnly: readonly,
+						className: "w-full truncate rounded bg-transparent px-1 text-sm text-muted-foreground outline-none placeholder:text-muted-foreground/60 focus:bg-muted focus:text-foreground",
+						onFocus: () => {
+							focused.current = true;
+							setReadonly(!editor.isEditable);
+						},
+						onBlur: () => {
+							focused.current = false;
+							closeList();
+							commit();
+						},
+						onMouseDown: () => openList(""),
+						onChange: (e) => {
+							setDraft(e.target.value);
+							openList(e.target.value);
+						},
+						onKeyDown
+					}),
+					node.attrs.start != null && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "transcript-segment__time block rounded px-1 text-xs tabular-nums text-muted-foreground hover:text-primary hover:underline",
+						title: t("transcript.seek", { time: formatSegmentTime(node.attrs.start) }),
+						"aria-label": t("transcript.seek", { time: formatSegmentTime(node.attrs.start) }),
+						onMouseDown: (e) => e.preventDefault(),
+						onClick: seek,
+						children: formatSegmentTime(node.attrs.start)
+					}),
+					open && items.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "absolute top-full left-0 z-50 mt-1",
+						children: /* @__PURE__ */ jsx(SuggestionList, {
+							ref: list,
+							items,
+							display: displayItem,
+							command: pick,
+							loading: false,
+							loadingText: "",
+							emptyText: ""
+						})
 					})
-				})]
+				]
 			}), /* @__PURE__ */ jsx(NodeViewContent, { className: "transcript-segment__text" })]
 		})
 	});