@widgetic/editor 4.0.10 → 4.1.0

package/dist/composition/compositionHelpers.d.ts

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ *
+ * `description` is what the new font is called on the screen: the editor's own word, so the page's language can give it.
+ */
+export declare function ensureSubtitleFontInDesignSchema(schema: unknown, description?: string): 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,405 @@
+/**
+ * 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.
+ *
+ * `description` is what the new font is called on the screen: the editor's own word, so the page's language can give it.
+ */
+export function ensureSubtitleFontInDesignSchema(schema, description = 'Subtitle Font') {
+    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
+        };
+        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/i18n/index.d.ts

@@ -0,0 +1,4 @@
+export { EDITOR_MESSAGES, type EditorMessageKey } from './messages.js';
+export { ALL_EDITOR_MESSAGES, EDITOR_CATALOGS, checkEditorMessages, provideEditorLanguage, useEditorLanguage, type EditorLanguage, type EditorLanguageHandle } from './language.js';
+export { translateEnglish } from './translate.js';
+export { categoryLabel, fixedPositionLabel, fontWeightLabel } from './labels.js';

package/dist/i18n/index.js

@@ -0,0 +1,4 @@
+export { EDITOR_MESSAGES } from './messages.js';
+export { ALL_EDITOR_MESSAGES, EDITOR_CATALOGS, checkEditorMessages, provideEditorLanguage, useEditorLanguage } from './language.js';
+export { translateEnglish } from './translate.js';
+export { categoryLabel, fixedPositionLabel, fontWeightLabel } from './labels.js';

package/dist/i18n/labels.d.ts

@@ -0,0 +1,15 @@
+import type { Translate } from '@widgetic/design-system/i18n';
+import type { EditorMessageKey } from './messages.js';
+/**
+ * Some things the editor keeps by an English name (the tab "Sans Serif" that was last open, the weight "Bold Italic" that
+ * is saved with a font) and shows to a person by a name in their language. The name that is kept does not change with the
+ * language: these functions only turn it into what is shown, and show a name they do not know as it is.
+ */
+type Translator = Translate<EditorMessageKey>;
+/** The tab of a list of fonts or vectors, by the name the list keeps it under ("Sans Serif"). */
+export declare function categoryLabel(category: string, t: Translator): string;
+/** A weight of a font, by the name that is saved ("Bold", "Medium Italic", "Italic"). A name the editor does not know is shown as it is. */
+export declare function fontWeightLabel(weight: string, t: Translator): string;
+/** The name of one of the nine places on a screen, by the name the widget keeps it under ("top-left"). */
+export declare function fixedPositionLabel(position: string, t: Translator): string;
+export {};

package/dist/i18n/labels.js

@@ -0,0 +1,57 @@
+/** `own[name]`, only when `name` is the table's own entry (a weight called "constructor" is not a method of the table). */
+function ownEntry(table, name) {
+    return Object.prototype.hasOwnProperty.call(table, name) ? table[name] : undefined;
+}
+const CATEGORY_KEYS = {
+    All: 'editor.category.all',
+    Mine: 'editor.category.mine',
+    'Sans Serif': 'editor.category.sansSerif',
+    Serif: 'editor.category.serif',
+    Script: 'editor.category.script',
+    Other: 'editor.category.other',
+    Icons: 'editor.category.icons',
+    Emojis: 'editor.category.emojis',
+    Clipart: 'editor.category.clipart'
+};
+/** The tab of a list of fonts or vectors, by the name the list keeps it under ("Sans Serif"). */
+export function categoryLabel(category, t) {
+    const key = ownEntry(CATEGORY_KEYS, category);
+    return key ? t(key) : category;
+}
+const WEIGHT_KEYS = {
+    Thin: 'editor.fontWeight.thin',
+    ExtraLight: 'editor.fontWeight.extraLight',
+    Light: 'editor.fontWeight.light',
+    Regular: 'editor.fontWeight.regular',
+    Medium: 'editor.fontWeight.medium',
+    SemiBold: 'editor.fontWeight.semiBold',
+    Bold: 'editor.fontWeight.bold',
+    ExtraBold: 'editor.fontWeight.extraBold',
+    Black: 'editor.fontWeight.black'
+};
+/** A weight of a font, by the name that is saved ("Bold", "Medium Italic", "Italic"). A name the editor does not know is shown as it is. */
+export function fontWeightLabel(weight, t) {
+    if (weight === 'Italic')
+        return t('editor.fontWeight.italic');
+    const italic = /^(\S+) Italic$/.exec(weight);
+    const baseKey = ownEntry(WEIGHT_KEYS, italic ? italic[1] : weight);
+    if (!baseKey)
+        return weight;
+    return italic ? t('editor.fontWeight.withItalic', { weight: t(baseKey) }) : t(baseKey);
+}
+const POSITION_KEYS = {
+    'top-left': 'editor.fixedPosition.topLeft',
+    'top-center': 'editor.fixedPosition.topCenter',
+    'top-right': 'editor.fixedPosition.topRight',
+    'center-left': 'editor.fixedPosition.centerLeft',
+    'center-center': 'editor.fixedPosition.centerCenter',
+    'center-right': 'editor.fixedPosition.centerRight',
+    'bottom-left': 'editor.fixedPosition.bottomLeft',
+    'bottom-center': 'editor.fixedPosition.bottomCenter',
+    'bottom-right': 'editor.fixedPosition.bottomRight'
+};
+/** The name of one of the nine places on a screen, by the name the widget keeps it under ("top-left"). */
+export function fixedPositionLabel(position, t) {
+    const key = ownEntry(POSITION_KEYS, position);
+    return key ? t(key) : position;
+}