@widgetic/editor 4.0.9 → 4.0.11

package/dist/composition/compositionHelpers.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Pure helpers for editing a composition: reading what the API sends, merging it with the widget's schemas, and
+ * turning the editor's values into what the widget's preview page understands.
+ *
+ * They hold no state and touch no browser API, so they behave the same wherever the editor runs: in Widgetic's
+ * own site and in a partner's page. They were written for the site's composition page and moved here unchanged in
+ * behavior, so the site and an embedded editor read and write a composition in exactly the same way (see
+ * `tests/composition-helpers.test.mjs`, which pins what they do).
+ *
+ * "Schema" is the widget's description of what can be edited. Its shape is the producer's (the API's), so the
+ * helpers read it loosely and keep unknown fields as they are.
+ */
+/** A JSON object whose fields are not known to the editor. */
+export type JsonRecord = Record<string, unknown>;
+/**
+ * The payload of an API answer. The API wraps what it returns as `{ success, data }`; code that already holds the
+ * payload (or an older, unwrapped answer) passes through unchanged.
+ */
+export declare function unwrapApiData<T = any>(response: unknown): T;
+/** The widget a composition is made of, or `''` when the record does not name one. */
+export declare function compositionWidgetId(composition: JsonRecord | null | undefined): string;
+/** The project a composition is filed in, or `null` when it is in none. */
+export declare function compositionRecordProjectId(composition: JsonRecord | null | undefined): string | null;
+/**
+ * The design schema as the editor draws it: a list of component groups, or `null` when there is nothing to edit.
+ * A schema with several groups becomes ONE group (the editor draws a single design tab) holding all their
+ * components; the first group names it.
+ */
+export declare function normalizeDesignSchemaFromApiResponse(designResponse: unknown): any;
+/**
+ * Gives a design schema that has a title font but no subtitle font a subtitle font beside the title's (a copy of
+ * it), so widgets that read `subtitleFont` can be edited. A schema that already has one, or has no title font to
+ * copy, is returned as it is.
+ */
+export declare function ensureSubtitleFontInDesignSchema(schema: unknown): unknown;
+/** The content schema as the editor draws it, or `null` when there is none. */
+export declare function normalizeContentSchemaFromApiResponse(contentResponse: unknown): any;
+/**
+ * The design values as the widget's preview page reads them: every value a string. A font becomes the CSS family
+ * (`"Roboto", sans-serif`) plus `<name>Family`, `<name>Weight` and `<name>Style`; a `{ value }` option becomes its
+ * value; an aspect ratio is written as a CSS ratio.
+ */
+export declare function flattenDesignValuesForPreview(design: JsonRecord): Record<string, string>;
+/** The default of every generic content property the schema declares, by property name. */
+export declare function extractContentDefaultsFromSchema(schema: unknown): JsonRecord;
+/** The saved content values, with the schema's defaults filled in for whatever was never saved. Saved values win. */
+export declare function mergeMissingContentValues(existing: JsonRecord, schema: unknown): JsonRecord;
+/** The flat content values (not the items) out of what a composition saved as its `content`. */
+export declare function extractContentValuesFromCompositionRaw(rawContent: JsonRecord): JsonRecord;
+/** The content items (the repeated entries: slides, rows, cards…) out of what a composition saved as its `content`. */
+export declare function extractContentItemsFromCompositionRaw(rawContent: JsonRecord): any[];
+/** The content items as the widget's preview page reads them: flat, with each property's value on the item itself. */
+export declare function flattenContentItemsForPreview(items: any[]): any[];
+/** The content items as the `items` map the props editor starts from: flat items by id. */
+export declare function contentItemsToEditorValueMap(items: any[]): Record<string, Record<string, unknown>>;
+/**
+ * The content items the composition holds, with the schema's definitions attached. The composition decides which
+ * items there are and in which order: the user can delete the items the widget starts with and drag them into another
+ * order, and that must still be so after the items have been through here (they used to come back in the schema's
+ * order, with the deleted ones among them). An item the schema lists carries the schema's definition and its saved
+ * values; one it does not list is shaped like the schema's template item. With no saved items (a composition nobody
+ * has edited yet) the schema's own are used; with no schema items the saved ones are returned as they are.
+ */
+export declare function mergeContentItemsWithSchema(savedItems: any[], schemaItems: any[]): any[];
+/** The content schema the props editor is given: the widget's, with the composition's items merged into it. */
+export declare function buildPropsEditorContentSchema(schema: any, items: any[]): any;
+/** A design with a title font but no subtitle font gets the title's as its subtitle font. */
+export declare function seedMissingFontFaces(design: JsonRecord): JsonRecord;
+/** The embed settings a composition saved, or `{}` when it saved none. */
+export declare function getCompositionEmbedSettings(composition: JsonRecord): JsonRecord;
+/** A size saved as text or number ("800", 800, "800px") as a positive whole number; anything else is the fallback. */
+export declare function parseEmbedDimension(value: unknown, fallback: number): number;

package/dist/composition/compositionHelpers.js

@@ -0,0 +1,403 @@
+/**
+ * Pure helpers for editing a composition: reading what the API sends, merging it with the widget's schemas, and
+ * turning the editor's values into what the widget's preview page understands.
+ *
+ * They hold no state and touch no browser API, so they behave the same wherever the editor runs: in Widgetic's
+ * own site and in a partner's page. They were written for the site's composition page and moved here unchanged in
+ * behavior, so the site and an embedded editor read and write a composition in exactly the same way (see
+ * `tests/composition-helpers.test.mjs`, which pins what they do).
+ *
+ * "Schema" is the widget's description of what can be edited. Its shape is the producer's (the API's), so the
+ * helpers read it loosely and keep unknown fields as they are.
+ */
+/** The font family a font value falls back to in the preview when it names none. */
+const DEFAULT_PREVIEW_FONT_FAMILY = 'Inter';
+/**
+ * The payload of an API answer. The API wraps what it returns as `{ success, data }`; code that already holds the
+ * payload (or an older, unwrapped answer) passes through unchanged.
+ */
+export function unwrapApiData(response) {
+    if (response && typeof response === 'object' && 'data' in response) {
+        return (response.data ?? response);
+    }
+    return response;
+}
+/** The widget a composition is made of, or `''` when the record does not name one. */
+export function compositionWidgetId(composition) {
+    if (!composition)
+        return '';
+    const id = composition.widgetId ?? composition.widget_id;
+    return typeof id === 'string' ? id : '';
+}
+/** The project a composition is filed in, or `null` when it is in none. */
+export function compositionRecordProjectId(composition) {
+    if (!composition)
+        return null;
+    const projectId = composition.projectId ?? composition.project_id;
+    return typeof projectId === 'string' && projectId ? projectId : null;
+}
+/**
+ * The design schema as the editor draws it: a list of component groups, or `null` when there is nothing to edit.
+ * A schema with several groups becomes ONE group (the editor draws a single design tab) holding all their
+ * components; the first group names it.
+ */
+export function normalizeDesignSchemaFromApiResponse(designResponse) {
+    if (!designResponse)
+        return null;
+    const payload = designResponse?.data ?? designResponse;
+    if (!payload || typeof payload !== 'object')
+        return null;
+    if (Array.isArray(payload))
+        return payload;
+    const record = payload;
+    const groups = record.componentGroups ?? record.component_groups;
+    if (Array.isArray(groups)) {
+        if (groups.length > 1) {
+            const mergedComponents = groups.flatMap((group) => group.components || []);
+            return [
+                { name: groups[0]?.name || 'Design', components: mergedComponents }
+            ];
+        }
+        return groups;
+    }
+    return null;
+}
+/**
+ * Gives a design schema that has a title font but no subtitle font a subtitle font beside the title's (a copy of
+ * it), so widgets that read `subtitleFont` can be edited. A schema that already has one, or has no title font to
+ * copy, is returned as it is.
+ */
+export function ensureSubtitleFontInDesignSchema(schema) {
+    if (!schema)
+        return schema;
+    try {
+        const clone = structuredClone(schema);
+        const groups = Array.isArray(clone) ? clone : clone.componentGroups;
+        if (!Array.isArray(groups) || groups.length === 0)
+            return schema;
+        const allProps = groups.flatMap((group) => (group.components || []).flatMap((component) => component.properties || []));
+        const hasSubtitle = allProps.some((prop) => /subtitleFont|captionFont/i.test(String(prop?.name || prop?.id || '')));
+        if (hasSubtitle)
+            return clone;
+        const titleProp = allProps.find((prop) => {
+            const key = String(prop?.name || prop?.id || '');
+            const type = String(prop?.inputController?.type || '').toLowerCase();
+            return type === 'font' && /titleFont|^font$/i.test(key);
+        });
+        if (!titleProp || typeof titleProp !== 'object')
+            return clone;
+        const firstComponent = groups[0]?.components?.[0];
+        if (!firstComponent)
+            return clone;
+        firstComponent.properties = Array.isArray(firstComponent.properties)
+            ? firstComponent.properties
+            : [];
+        const subtitleProp = {
+            ...structuredClone(titleProp),
+            id: 'subtitleFont',
+            name: 'subtitleFont',
+            description: 'Subtitle Font'
+        };
+        const titleIndex = firstComponent.properties.findIndex((prop) => (prop?.name || prop?.id) ===
+            (titleProp.name ||
+                titleProp.id));
+        if (titleIndex >= 0)
+            firstComponent.properties.splice(titleIndex + 1, 0, subtitleProp);
+        else
+            firstComponent.properties.push(subtitleProp);
+        return clone;
+    }
+    catch (error) {
+        console.warn('[CompositionEditor] The subtitle font could not be added to the design schema:', error);
+        return schema;
+    }
+}
+/** The content schema as the editor draws it, or `null` when there is none. */
+export function normalizeContentSchemaFromApiResponse(contentResponse) {
+    if (!contentResponse)
+        return null;
+    const payload = contentResponse?.data ?? contentResponse;
+    return payload && typeof payload === 'object' ? payload : null;
+}
+/** A font weight name ("Bold Italic", "600") as the CSS weight and style a page needs. Unknown names are 400/normal. */
+function parseFontFace(weight) {
+    const raw = String(weight || 'Regular');
+    const cssStyle = /italic|oblique/i.test(raw) ? 'italic' : 'normal';
+    const name = raw
+        .toLowerCase()
+        .replace(/italic|oblique/g, '')
+        .replace(/[\s_-]/g, '');
+    const table = {
+        thin: '100',
+        hairline: '100',
+        extralight: '200',
+        ultralight: '200',
+        light: '300',
+        regular: '400',
+        normal: '400',
+        '': '400',
+        medium: '500',
+        semibold: '600',
+        demibold: '600',
+        bold: '700',
+        extrabold: '800',
+        ultrabold: '800',
+        black: '900',
+        heavy: '900'
+    };
+    if (/^\d{3}$/.test(name))
+        return { cssWeight: name, cssStyle };
+    return { cssWeight: table[name] || '400', cssStyle };
+}
+/** An aspect ratio the way a stylesheet writes it ("landscape", "16:9" → "4/3", "16/9"). Unknown values stay as they are. */
+function mapAspectRatioToCss(raw) {
+    const key = raw.trim().toLowerCase();
+    const table = {
+        square: '1/1',
+        '1:1': '1/1',
+        '1/1': '1/1',
+        landscape: '4/3',
+        '4:3': '4/3',
+        '4/3': '4/3',
+        wide: '16/9',
+        '16:9': '16/9',
+        '16/9': '16/9',
+        portrait: '3/4',
+        '3:4': '3/4',
+        '3/4': '3/4'
+    };
+    return table[key] || raw;
+}
+/**
+ * The design values as the widget's preview page reads them: every value a string. A font becomes the CSS family
+ * (`"Roboto", sans-serif`) plus `<name>Family`, `<name>Weight` and `<name>Style`; a `{ value }` option becomes its
+ * value; an aspect ratio is written as a CSS ratio.
+ */
+export function flattenDesignValuesForPreview(design) {
+    const out = {};
+    for (const [key, value] of Object.entries(design || {})) {
+        if (value && typeof value === 'object' && 'family' in value) {
+            const font = value;
+            const family = String(font.family || DEFAULT_PREVIEW_FONT_FAMILY);
+            const face = parseFontFace(font.weight);
+            out[key] = `"${family}", sans-serif`;
+            out[`${key}Family`] = family;
+            out[`${key}Weight`] = face.cssWeight;
+            out[`${key}Style`] = face.cssStyle;
+            continue;
+        }
+        if (value && typeof value === 'object' && 'value' in value) {
+            out[key] = mapAspectRatioToCss(String(value.value ?? ''));
+            continue;
+        }
+        if (typeof value === 'string') {
+            out[key] = /aspect/i.test(key) ? mapAspectRatioToCss(value) : value;
+            continue;
+        }
+        if (value == null)
+            continue;
+        out[key] = String(value);
+    }
+    return out;
+}
+/** The default of every generic content property the schema declares, by property name. */
+export function extractContentDefaultsFromSchema(schema) {
+    const values = {};
+    if (!schema || typeof schema !== 'object')
+        return values;
+    const record = schema;
+    const props = record.genericContent?.properties ?? record.data?.genericContent?.properties ?? [];
+    if (!Array.isArray(props))
+        return values;
+    for (const prop of props) {
+        const p = prop;
+        const name = p?.name || p?.id;
+        if (name && p.defaultValue !== undefined && p.defaultValue !== null) {
+            values[name] = p.defaultValue;
+        }
+    }
+    return values;
+}
+/** The saved content values, with the schema's defaults filled in for whatever was never saved. Saved values win. */
+export function mergeMissingContentValues(existing, schema) {
+    return { ...extractContentDefaultsFromSchema(schema), ...existing };
+}
+/** The flat content values (not the items) out of what a composition saved as its `content`. */
+export function extractContentValuesFromCompositionRaw(rawContent) {
+    const nested = rawContent.content;
+    if (nested && typeof nested === 'object' && !Array.isArray(nested)) {
+        const { items: _items, contentItemsSnapshot: _snapshot, contentItems: _contentItems, content_items: _contentItemsSnake, ...flatContent } = nested;
+        return flatContent;
+    }
+    return (rawContent.content ?? {});
+}
+/** The content items (the repeated entries: slides, rows, cards…) out of what a composition saved as its `content`. */
+export function extractContentItemsFromCompositionRaw(rawContent) {
+    if (Array.isArray(rawContent.contentItems))
+        return [...rawContent.contentItems];
+    if (Array.isArray(rawContent.content_items))
+        return [...rawContent.content_items];
+    const nested = rawContent.content;
+    if (nested && typeof nested === 'object' && !Array.isArray(nested)) {
+        const nestedContent = nested;
+        if (Array.isArray(nestedContent.contentItemsSnapshot)) {
+            return [...nestedContent.contentItemsSnapshot];
+        }
+        if (Array.isArray(nestedContent.contentItems)) {
+            return [...nestedContent.contentItems];
+        }
+        if (Array.isArray(nestedContent.content_items)) {
+            return [...nestedContent.content_items];
+        }
+        const itemsMap = nestedContent.items;
+        if (itemsMap && typeof itemsMap === 'object' && !Array.isArray(itemsMap)) {
+            return Object.entries(itemsMap).map(([id, item]) => ({
+                id,
+                ...(typeof item === 'object' && item !== null ? item : {})
+            }));
+        }
+    }
+    return [];
+}
+/** A picked file or picture is stored as `{ url, … }`; the preview wants only its address. */
+function unwrapContentMediaValue(raw) {
+    if (raw && typeof raw === 'object' && 'url' in raw) {
+        return raw.url ?? '';
+    }
+    return raw;
+}
+/** The first candidate that holds something (not undefined, null or an empty string), as its plain value; else `''`. */
+function pickLiveContentValue(...candidates) {
+    for (const candidate of candidates) {
+        const unwrapped = unwrapContentMediaValue(candidate);
+        if (unwrapped === undefined || unwrapped === null || unwrapped === '')
+            continue;
+        return unwrapped;
+    }
+    return '';
+}
+/** The content items as the widget's preview page reads them: flat, with each property's value on the item itself. */
+export function flattenContentItemsForPreview(items) {
+    return items.map((item) => {
+        if (!item || typeof item !== 'object')
+            return item;
+        const flat = { id: item.id, title: item.title };
+        for (const [key, value] of Object.entries(item)) {
+            if (key === 'properties' || key === 'inputController' || key === 'id' || key === 'title')
+                continue;
+            const unwrapped = unwrapContentMediaValue(value);
+            if (unwrapped === undefined)
+                continue;
+            flat[key] = unwrapped;
+        }
+        const props = item.properties;
+        if (Array.isArray(props)) {
+            for (const prop of props) {
+                const name = prop?.name || prop?.id;
+                if (!name)
+                    continue;
+                if (flat[name] !== undefined && flat[name] !== '')
+                    continue;
+                const picked = pickLiveContentValue(prop.value, prop.defaultValue);
+                if (picked !== '')
+                    flat[name] = picked;
+            }
+        }
+        return flat;
+    });
+}
+/** The content items as the `items` map the props editor starts from: flat items by id. */
+export function contentItemsToEditorValueMap(items) {
+    const map = {};
+    for (const item of flattenContentItemsForPreview(items || [])) {
+        if (!item?.id)
+            continue;
+        map[String(item.id)] = item;
+    }
+    return map;
+}
+function contentItemHasProperties(item) {
+    return Array.isArray(item?.properties) && item.properties.length > 0;
+}
+/** Gives a saved item the schema's property definitions, holding the item's own value for each. */
+function attachSchemaProperties(item, template) {
+    if (!item || typeof item !== 'object')
+        return item;
+    const templateHasProps = contentItemHasProperties(template);
+    if (!contentItemHasProperties(item) && !templateHasProps)
+        return item;
+    const sourceProperties = contentItemHasProperties(item)
+        ? item.properties
+        : structuredClone(template.properties);
+    const nextProperties = sourceProperties.map((prop) => {
+        const key = prop.id || prop.name;
+        const hasOwn = key != null && Object.prototype.hasOwnProperty.call(item, key);
+        const incoming = hasOwn ? item[key] : undefined;
+        const picked = hasOwn
+            ? (unwrapContentMediaValue(incoming) ?? '')
+            : pickLiveContentValue(prop.value, prop.defaultValue);
+        return {
+            ...prop,
+            value: picked
+        };
+    });
+    return {
+        ...(templateHasProps ? structuredClone(template) : {}),
+        ...item,
+        id: item.id,
+        title: item.title || template?.title,
+        properties: nextProperties
+    };
+}
+/**
+ * The content items the composition holds, with the schema's definitions attached. The composition decides which
+ * items there are and in which order: the user can delete the items the widget starts with and drag them into another
+ * order, and that must still be so after the items have been through here (they used to come back in the schema's
+ * order, with the deleted ones among them). An item the schema lists carries the schema's definition and its saved
+ * values; one it does not list is shaped like the schema's template item. With no saved items (a composition nobody
+ * has edited yet) the schema's own are used; with no schema items the saved ones are returned as they are.
+ */
+export function mergeContentItemsWithSchema(savedItems, schemaItems) {
+    if (!Array.isArray(schemaItems) || schemaItems.length === 0) {
+        return Array.isArray(savedItems) ? [...savedItems] : [];
+    }
+    if (!Array.isArray(savedItems) || savedItems.length === 0) {
+        return structuredClone(schemaItems);
+    }
+    const template = schemaItems.find(contentItemHasProperties) || schemaItems[0];
+    const schemaItemsById = new Map(schemaItems.map((schemaItem) => [schemaItem.id, schemaItem]));
+    return savedItems.map((savedItem) => {
+        const schemaItem = schemaItemsById.get(savedItem?.id);
+        if (!schemaItem)
+            return attachSchemaProperties(savedItem, template);
+        const clonedSchema = structuredClone(schemaItem);
+        return attachSchemaProperties({ ...clonedSchema, ...savedItem }, clonedSchema);
+    });
+}
+/** The content schema the props editor is given: the widget's, with the composition's items merged into it. */
+export function buildPropsEditorContentSchema(schema, items) {
+    if (!schema)
+        return null;
+    const cloned = structuredClone(schema);
+    const schemaItems = Array.isArray(cloned.contentItems) ? cloned.contentItems : [];
+    cloned.contentItems = mergeContentItemsWithSchema(items ?? [], schemaItems);
+    return cloned;
+}
+/** A design with a title font but no subtitle font gets the title's as its subtitle font. */
+export function seedMissingFontFaces(design) {
+    const next = { ...design };
+    if (!next.subtitleFont && next.titleFont) {
+        next.subtitleFont = next.titleFont;
+    }
+    return next;
+}
+/** The embed settings a composition saved, or `{}` when it saved none. */
+export function getCompositionEmbedSettings(composition) {
+    const settings = composition.embedSettings ?? composition.embed_settings;
+    return settings && typeof settings === 'object' ? settings : {};
+}
+/** A size saved as text or number ("800", 800, "800px") as a positive whole number; anything else is the fallback. */
+export function parseEmbedDimension(value, fallback) {
+    const parsed = parseInt(String(value ?? ''), 10);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}

package/dist/index.d.ts

@@ -5,3 +5,6 @@ export { default as WidgetPreview } from './components/WidgetPreview.svelte';
 export { setFileBrowserUploadConfig } from '@widgetic/file-browser';
 export { setGoogleFontsApiKey, getGoogleFontsKey } from './config';
 export { default as EmbedEditor } from './components/editors/EmbedEditor.svelte';
+export { default as CompositionEditorApp } from './components/editors/CompositionEditorApp.svelte';
+export { CompositionApiError, createCompositionApi, type CompositionApi, type CompositionApiOptions, type CompositionPreviewInfo, type SaveCompositionBody, type TokenReason } from './composition/compositionApi.js';
+export { failureMessage, type CompositionEditorEvent, type CompositionEditorState, type DeviceView, type EditorFailure } from './composition/compositionEditorController.js';

package/dist/index.js

@@ -8,3 +8,7 @@ export { setFileBrowserUploadConfig } from '@widgetic/file-browser';
 export { setGoogleFontsApiKey, getGoogleFontsKey } from './config';
 // Embed Editor
 export { default as EmbedEditor } from './components/editors/EmbedEditor.svelte';
+// Composition Editor: one Widgetic composition, loaded, edited beside a live preview, and saved through the API.
+export { default as CompositionEditorApp } from './components/editors/CompositionEditorApp.svelte';
+export { CompositionApiError, createCompositionApi } from './composition/compositionApi.js';
+export { failureMessage } from './composition/compositionEditorController.js';

package/dist/mediaLibraryContext.d.ts

@@ -0,0 +1,10 @@
+import type { MediaLibraryProvider } from '@widgetic/file-browser';
+/** Gives the current media library, or `undefined` for the File Browser's own (Widgetic account) storage. */
+export type MediaLibraryGetter = () => MediaLibraryProvider | undefined;
+/** Called while an editor component is being created: everything below it can reach the library with {@link useEditorMediaLibrary}. */
+export declare function provideEditorMediaLibrary(getMediaLibrary: MediaLibraryGetter): void;
+/**
+ * Called while a component is being created. Gives the function that tells which media library the editor above it was
+ * given. Outside an editor (a control used on its own) it always gives `undefined`, as the File Browser did before.
+ */
+export declare function useEditorMediaLibrary(): MediaLibraryGetter;

package/dist/mediaLibraryContext.js

@@ -0,0 +1,30 @@
+/**
+ * Hands the File Browser's media library from the editor down to the file controls inside it.
+ *
+ * `PropsEditor` is given a `mediaLibrary` (a partner's own storage, for instance). The file control
+ * (`BrowserInputController`) sits several components below it and is created from a schema, so passing the library
+ * as a prop through every layer would mean threading it through the controller renderer too. A Svelte context
+ * reaches it directly, and stays separate for each editor on a page.
+ *
+ * What is stored is a function that reads the editor's `mediaLibrary` prop, not the library itself.
+ */
+import { getContext, setContext } from 'svelte';
+const MEDIA_LIBRARY_CONTEXT_KEY = Symbol.for('widgetic.editor.mediaLibrary');
+/** Called while an editor component is being created: everything below it can reach the library with {@link useEditorMediaLibrary}. */
+export function provideEditorMediaLibrary(getMediaLibrary) {
+    setContext(MEDIA_LIBRARY_CONTEXT_KEY, getMediaLibrary);
+}
+/**
+ * Called while a component is being created. Gives the function that tells which media library the editor above it was
+ * given. Outside an editor (a control used on its own) it always gives `undefined`, as the File Browser did before.
+ */
+export function useEditorMediaLibrary() {
+    try {
+        return getContext(MEDIA_LIBRARY_CONTEXT_KEY) ?? (() => undefined);
+    }
+    catch (error) {
+        // getContext only works while a component is being created; anywhere else there is no editor above to ask.
+        console.warn('[editor] useEditorMediaLibrary was called outside a component; using the default media library', error);
+        return () => undefined;
+    }
+}

package/dist/utils/FontManager.d.ts

@@ -32,6 +32,8 @@ declare class FontManager {
     private static readonly WAIT_TIME;
     private static instance;
     private loadedFonts;
+    private addedHeadElements;
+    private pageWasReleased;
     private observers;
     private scrollTimeout;
     private apiKey;
@@ -49,9 +51,6 @@ declare class FontManager {
     private static readonly CACHE_KEY;
     private static readonly CACHE_DURATION;
     private static readonly LOADED_FONTS_KEY;
-    private static readonly LEGACY_CACHE_KEY;
-    private static readonly LEGACY_LOADED_FONTS_KEY;
-    private static readonly CACHE_CONTROL;
     private visibleFonts;
     private static initialPreloadComplete;
     private static preloadPromise;
@@ -106,7 +105,7 @@ declare class FontManager {
      */
     getPreInitializedObserver(): IntersectionObserver | null;
     /**
-     * Loads previously cached fonts from the durable L1 store (legacy localStorage fallback)
+     * Loads previously cached fonts from the durable L1 store
      */
     private loadCachedFonts;
     /**
@@ -121,6 +120,23 @@ declare class FontManager {
      * Checks if a font is available in Google Fonts
      */
     private isGoogleFont;
+    /**
+     * Puts an element in the page's <head> and remembers it, so that it can be taken away again
+     * ({@link removeAddedHeadElements}): the editor can be on somebody else's page, which it should leave as it found it.
+     */
+    private addToHead;
+    /**
+     * Takes out of the page's <head> everything this manager put there (the stylesheets of the fonts, their preload
+     * hints and the connection hint), and forgets which fonts were loaded, because they are not any more. The next
+     * font to be asked for puts its stylesheet back. The page's own links are never touched: only what was added here
+     * is removed.
+     */
+    removeAddedHeadElements(): void;
+    /**
+     * Leaves the page as the editor found it as far as fonts go. Meant for when the editor is taken away; does nothing
+     * if no font was ever asked for.
+     */
+    static releasePageResources(): void;
     /**
      * Inserts a font stylesheet into the document
      * @param family - Font family name
@@ -161,7 +177,7 @@ declare class FontManager {
      */
     private saveFontListToCache;
     /**
-     * Gets font list from the durable L1 cache (legacy localStorage fallback)
+     * Gets font list from the durable L1 cache
      */
     private getFontListFromCache;
     /**