@widgetic/editor 4.0.10 → 4.1.0

package/dist/i18n/language.d.ts

@@ -0,0 +1,228 @@
+import { SHAD_EDITOR_MESSAGES } from '@widgetic/design-system/shad-editor';
+export type { EditorCatalogs, EditorLanguage, EditorLanguageHandle } from './languageKit.js';
+/**
+ * The language of an editor on a page. The editor has two packages inside it (the File Browser that picks a file, and
+ * the rich text editor of the text boxes), each with its own catalog; a page gives ONE flat `messages` object and the
+ * editor hands each package the keys that are its own. See `languageKit.ts` for how, and for what a test can swap.
+ */
+/** The catalogs of the editor and of the packages inside it. A key belongs to one of them. */
+export declare const EDITOR_CATALOGS: {
+    readonly editor: {
+        readonly 'editor.app.loading': "Loading editor…";
+        readonly 'editor.app.tryAgain': "Try again";
+        readonly 'editor.app.retry': "Retry";
+        readonly 'editor.failure.widgetNotPublished': "Publish the widget before editing a composition.";
+        readonly 'editor.failure.sessionEndedWhileSaving': "Your session has ended, so your changes could not be saved. Reload the page to continue.";
+        readonly 'editor.failure.sessionEnded': "Your session has ended. Reload the page to continue.";
+        readonly 'editor.failure.compositionNotFound': "This composition could not be found.";
+        readonly 'editor.failure.noAccess': "You do not have access to this composition.";
+        readonly 'editor.failure.noWidget': "This composition has no widget.";
+        readonly 'editor.failure.widgetNotFound': "The widget this composition is made with could not be found.";
+        readonly 'editor.failure.saveNeedsConnection': "Your changes could not be saved. Check the connection and try again.";
+        readonly 'editor.failure.loadNeedsConnection': "The editor could not be loaded. Check the connection and try again.";
+        readonly 'editor.failure.saveFailed': "Your changes could not be saved.";
+        readonly 'editor.failure.loadFailed': "The editor could not be loaded.";
+        readonly 'editor.failure.settingsLoadFailed': "The editor settings could not be loaded. Try again.";
+        readonly 'editor.failure.noSettings': "No editable settings found. Generate and publish the widget first.";
+        readonly 'editor.failure.errorCode': "Error code: {code}";
+        readonly 'editor.props.title': "Edit Properties";
+        readonly 'editor.props.designTab': "Design";
+        readonly 'editor.props.contentTab': "Content";
+        readonly 'editor.props.contentCard': "Content";
+        readonly 'editor.props.save': "Save";
+        readonly 'editor.props.saving': "Saving";
+        readonly 'editor.props.noConfiguration': "No schema configuration available";
+        readonly 'editor.props.noDesignSchema': "No design schema available";
+        readonly 'editor.props.noSchemaData': "No schema data available";
+        readonly 'editor.props.noComponents': "No components defined in schema";
+        readonly 'editor.props.noProperties': "No properties available";
+        readonly 'editor.props.addItem': "Add new";
+        readonly 'editor.props.deleteItem': "Delete item";
+        readonly 'editor.embed.title': "Edit Options";
+        readonly 'editor.embed.loading': "Loading...";
+        readonly 'editor.embed.noCode': "No embed code available";
+        readonly 'editor.embed.codeHeader': "Embed code";
+        readonly 'editor.embed.headerArea': "Embed code header area";
+        readonly 'editor.embed.readMore': "Read more about embedding";
+        readonly 'editor.embed.copy': "Copy to clipboard";
+        readonly 'editor.embed.copied': "Copied to clipboard";
+        readonly 'editor.embed.copiedHint': "Paste it anywhere on your site.";
+        readonly 'editor.embed.copiedDone': "Content copied successfully.";
+        readonly 'editor.embed.copyFailed': "Copy failed";
+        readonly 'editor.embed.copyFailedHint': "Please try manual selection";
+        readonly 'editor.preview.title': "Preview";
+        readonly 'editor.preview.dragHandle': "Drag preview";
+        readonly 'editor.preview.desktop': "Desktop preview";
+        readonly 'editor.preview.mobile': "Mobile preview";
+        readonly 'editor.preview.widthShort': "W";
+        readonly 'editor.preview.heightShort': "H";
+        readonly 'editor.preview.noUrl': "no URL";
+        readonly 'editor.preview.copyUrl': "Copy URL";
+        readonly 'editor.preview.refresh': "Refresh preview";
+        readonly 'editor.preview.fitToPanel': "Fit preview to panel";
+        readonly 'editor.preview.mobileViewport': "Mobile viewport";
+        readonly 'editor.preview.desktopViewport': "Desktop viewport (full window)";
+        readonly 'editor.preview.openInNewTab': "Open in new tab";
+        readonly 'editor.preview.newTab': "↗ New tab";
+        readonly 'editor.preview.selectWidget': "Select a widget to preview";
+        readonly 'editor.preview.widgetName': "Widget";
+        readonly 'editor.preview.notPublished': "Not published yet";
+        readonly 'editor.preview.publishToPreview': "Publish the widget in Widget Creator to preview it here.";
+        readonly 'editor.preview.frameTitle': "Widget preview";
+        readonly 'editor.preview.frameTitleNamed': "Widget preview – {name}";
+        readonly 'editor.preview.unavailable': "Preview Unavailable";
+        readonly 'editor.preview.loadFailedPreview': "Failed to load widget preview.";
+        readonly 'editor.preview.retry': "Retry";
+        readonly 'editor.preview.retryBuild': "Retry Build";
+        readonly 'editor.preview.retryPreview': "Retry Preview";
+        readonly 'editor.preview.fixErrors': "Fix Errors";
+        readonly 'editor.preview.viewErrors': "View Errors";
+        readonly 'editor.preview.runtimeError': "Widget runtime error";
+        readonly 'editor.preview.compilationErrors': "Code Has Compilation Errors";
+        readonly 'editor.preview.compilationErrorsDetail': "The generated code has syntax or compilation errors (HTTP {status}).";
+        readonly 'editor.preview.noCodeYet': "No Code Generated Yet";
+        readonly 'editor.preview.noPreview': "No Preview Available";
+        readonly 'editor.preview.building': "Building Preview...";
+        readonly 'editor.preview.loadingWidget': "Loading widget…";
+        readonly 'editor.preview.loadingPreview': "Loading Preview…";
+        readonly 'editor.preview.checkingWidget': "Checking widget on Worker…";
+        readonly 'editor.preview.applyingSettings': "Applying composition settings…";
+        readonly 'editor.preview.connecting': "Connecting to the widget preview…";
+        readonly 'editor.preview.generatingCode': "Generating code…";
+        readonly 'editor.list.recentlyUsed': "Recently used";
+        readonly 'editor.list.more': "More";
+        readonly 'editor.list.searchResults': "Search results";
+        readonly 'editor.list.loadingMore': "Loading more items...";
+        readonly 'editor.list.deleteItem': "Delete";
+        readonly 'editor.category.all': "All";
+        readonly 'editor.category.mine': "Mine";
+        readonly 'editor.category.sansSerif': "Sans Serif";
+        readonly 'editor.category.serif': "Serif";
+        readonly 'editor.category.script': "Script";
+        readonly 'editor.category.other': "Other";
+        readonly 'editor.category.icons': "Icons";
+        readonly 'editor.category.emojis': "Emojis";
+        readonly 'editor.category.clipart': "Clipart";
+        readonly 'editor.font.select': "Select font...";
+        readonly 'editor.font.title': "Fonts";
+        readonly 'editor.font.search': "Search fonts...";
+        readonly 'editor.font.list': "Font list";
+        readonly 'editor.font.loading': "Loading fonts";
+        readonly 'editor.font.noneFound': "No fonts found";
+        readonly 'editor.font.noneAvailable': "No fonts available";
+        readonly 'editor.font.remove': "Remove font";
+        readonly 'editor.font.weight': "Font Weight";
+        readonly 'editor.font.weightList': "Font weights";
+        readonly 'editor.fontWeight.withItalic': "{weight} Italic";
+        readonly 'editor.fontWeight.italic': "Italic";
+        readonly 'editor.fontWeight.thin': "Thin";
+        readonly 'editor.fontWeight.extraLight': "ExtraLight";
+        readonly 'editor.fontWeight.light': "Light";
+        readonly 'editor.fontWeight.regular': "Regular";
+        readonly 'editor.fontWeight.medium': "Medium";
+        readonly 'editor.fontWeight.semiBold': "SemiBold";
+        readonly 'editor.fontWeight.bold': "Bold";
+        readonly 'editor.fontWeight.extraBold': "ExtraBold";
+        readonly 'editor.fontWeight.black': "Black";
+        readonly 'editor.vector.select': "Select vector...";
+        readonly 'editor.vector.title': "Vectors";
+        readonly 'editor.vector.search': "Search vectors...";
+        readonly 'editor.vector.list': "Vector list";
+        readonly 'editor.vector.noneFound': "No vectors found";
+        readonly 'editor.vector.noneAvailable': "No vectors available";
+        readonly 'editor.file.useFile': "Use file";
+        readonly 'editor.file.useImage': "Use image";
+        readonly 'editor.file.useVideo': "Use video";
+        readonly 'editor.file.useAudio': "Use audio";
+        readonly 'editor.file.useDocument': "Use document";
+        readonly 'editor.file.addFile': "Add file...";
+        readonly 'editor.file.addImage': "Add image...";
+        readonly 'editor.file.addVideo': "Add video...";
+        readonly 'editor.file.addAudio': "Add audio...";
+        readonly 'editor.file.addDocument': "Add docs...";
+        readonly 'editor.file.play': "Play";
+        readonly 'editor.file.pause': "Pause";
+        readonly 'editor.file.notFound': "File not found";
+        readonly 'editor.file.emptyFolder': "Empty folder";
+        readonly 'editor.file.clear': "Clear file";
+        readonly 'editor.file.dialogTitle': "Select file";
+        readonly 'editor.file.closeDialog': "Close file browser";
+        readonly 'editor.color.noRecent': "No recent colors";
+        readonly 'editor.color.picker': "Color picker";
+        readonly 'editor.date.pick': "Pick a date";
+        readonly 'editor.date.pickRange': "Pick a date range";
+        readonly 'editor.date.invalid': "Invalid date";
+        readonly 'editor.date.selectMonth': "Select month";
+        readonly 'editor.date.selectYear': "Select year";
+        readonly 'editor.date.calendarLabel': "Date";
+        readonly 'editor.date.rangeCalendarLabel': "Date range";
+        readonly 'editor.date.previousMonth': "Previous month";
+        readonly 'editor.date.nextMonth': "Next month";
+        readonly 'editor.dateField.dayHint': "DD";
+        readonly 'editor.dateField.monthHint': "MM";
+        readonly 'editor.dateField.yearHint': "YYYY";
+        readonly 'editor.dateField.dayLabel': "Day input";
+        readonly 'editor.dateField.monthLabel': "Month input";
+        readonly 'editor.dateField.yearLabel': "Year input";
+        readonly 'editor.dropdown.select': "Select an option";
+        readonly 'editor.switch.off': "Off";
+        readonly 'editor.switch.on': "On";
+        readonly 'editor.tags.add': "Add tag...";
+        readonly 'editor.position.x': "X:";
+        readonly 'editor.position.y': "Y:";
+        readonly 'editor.fixedPosition.set': "Set position to {position}";
+        readonly 'editor.fixedPosition.topLeft': "top-left";
+        readonly 'editor.fixedPosition.topCenter': "top-center";
+        readonly 'editor.fixedPosition.topRight': "top-right";
+        readonly 'editor.fixedPosition.centerLeft': "center-left";
+        readonly 'editor.fixedPosition.centerCenter': "center-center";
+        readonly 'editor.fixedPosition.centerRight': "center-right";
+        readonly 'editor.fixedPosition.bottomLeft': "bottom-left";
+        readonly 'editor.fixedPosition.bottomCenter': "bottom-center";
+        readonly 'editor.fixedPosition.bottomRight': "bottom-right";
+        readonly 'editor.corners.group': "Corner radius";
+        readonly 'editor.corners.topLeft': "Top left corner radius";
+        readonly 'editor.corners.topRight': "Top right corner radius";
+        readonly 'editor.corners.bottomLeft': "Bottom left corner radius";
+        readonly 'editor.corners.bottomRight': "Bottom right corner radius";
+        readonly 'editor.corners.lock': "Lock corner radius values";
+        readonly 'editor.corners.unlock': "Unlock corner radius values";
+        readonly 'editor.textArea.toolbar': "Text formatting toolbar";
+        readonly 'editor.textArea.toggleBold': "Toggle bold";
+        readonly 'editor.textArea.toggleItalic': "Toggle italic";
+        readonly 'editor.textArea.toggleUnderline': "Toggle underline";
+        readonly 'editor.textArea.toggleLink': "Toggle link";
+        readonly 'editor.textArea.text': "Text";
+        readonly 'editor.textArea.paragraph': "Paragraph";
+        readonly 'editor.textArea.heading1': "H1";
+        readonly 'editor.textArea.heading2': "H2";
+        readonly 'editor.textArea.heading3': "H3";
+        readonly 'editor.textArea.bulletList': "Bullet List";
+        readonly 'editor.textArea.numberedList': "Numbered List";
+        readonly 'editor.textArea.checkList': "Check List";
+        readonly 'editor.textArea.textStyles': "Text styles";
+        readonly 'editor.textArea.listStyles': "List styles";
+        readonly 'editor.textArea.enterUrl': "Enter URL";
+        readonly 'editor.schema.subtitleFont': "Subtitle Font";
+    };
+    readonly fileBrowser: any;
+    readonly shadEditor: any;
+};
+/** Every message of the editor and of the packages inside it, as one catalog: what a page's `messages` may have a key of. */
+export declare const ALL_EDITOR_MESSAGES: Readonly<Record<string, string>>;
+/**
+ * Checks a page's `messages` against all the editor's catalogs without showing anything: a key that does not exist (with
+ * the nearest real one), a value that is not text, a template that does not parse, or one that asks for a value the message
+ * is never given. An empty list means every message will be used. For a test or a build step of the page.
+ */
+export declare const checkEditorMessages: (messages: SHAD_EDITOR_MESSAGES) => SHAD_EDITOR_MESSAGES[];
+/**
+ * Called by the root component of an editor while it is created, so everything inside it speaks the page's language.
+ * The context belongs to one root component, so two editors on a page can speak two languages.
+ */
+export declare const provideEditorLanguage: (initial: SHAD_EDITOR_MESSAGES) => import("./languageKit.js").EditorLanguageHandle;
+/**
+ * Called by a part of the editor while it is created. Gives its words as stores, so a part that is already on the screen
+ * changes when the page sets the language again. Outside an editor (a control used on its own) it speaks English.
+ */
+export declare const useEditorLanguage: () => import("./languageKit.js").EditorLanguage;

package/dist/i18n/language.js

@@ -0,0 +1,34 @@
+import { SHAD_EDITOR_MESSAGES } from '@widgetic/design-system/shad-editor';
+import { FILE_BROWSER_MESSAGES } from '@widgetic/file-browser';
+import { EDITOR_MESSAGES } from './messages.js';
+import { createEditorLanguageKit } from './languageKit.js';
+/**
+ * The language of an editor on a page. The editor has two packages inside it (the File Browser that picks a file, and
+ * the rich text editor of the text boxes), each with its own catalog; a page gives ONE flat `messages` object and the
+ * editor hands each package the keys that are its own. See `languageKit.ts` for how, and for what a test can swap.
+ */
+/** The catalogs of the editor and of the packages inside it. A key belongs to one of them. */
+export const EDITOR_CATALOGS = {
+    editor: EDITOR_MESSAGES,
+    fileBrowser: FILE_BROWSER_MESSAGES,
+    shadEditor: SHAD_EDITOR_MESSAGES
+};
+const editorLanguageKit = createEditorLanguageKit({ catalogs: EDITOR_CATALOGS });
+/** Every message of the editor and of the packages inside it, as one catalog: what a page's `messages` may have a key of. */
+export const ALL_EDITOR_MESSAGES = editorLanguageKit.allMessages;
+/**
+ * Checks a page's `messages` against all the editor's catalogs without showing anything: a key that does not exist (with
+ * the nearest real one), a value that is not text, a template that does not parse, or one that asks for a value the message
+ * is never given. An empty list means every message will be used. For a test or a build step of the page.
+ */
+export const checkEditorMessages = editorLanguageKit.checkMessages;
+/**
+ * Called by the root component of an editor while it is created, so everything inside it speaks the page's language.
+ * The context belongs to one root component, so two editors on a page can speak two languages.
+ */
+export const provideEditorLanguage = editorLanguageKit.provideLanguage;
+/**
+ * Called by a part of the editor while it is created. Gives its words as stores, so a part that is already on the screen
+ * changes when the page sets the language again. Outside an editor (a control used on its own) it speaks English.
+ */
+export const useEditorLanguage = editorLanguageKit.useLanguage;

package/dist/i18n/languageKit.d.ts

@@ -0,0 +1,54 @@
+import { type Readable } from 'svelte/store';
+import { type I18nContext, type I18nSettings, type MessageOverrides, type MessageProblem, type SvelteContextApi } from '@widgetic/design-system/i18n';
+import type { EditorMessageKey } from './messages.js';
+/**
+ * The language of an editor on a page, shared with every part of it through Svelte's component context.
+ *
+ * The editor has two packages inside it (the File Browser that picks a file, and the rich text editor of the text boxes),
+ * and each speaks from its own catalog. A page does not have to know that: it gives ONE flat `messages` object, and this
+ * hands each package the keys that are its own.
+ *
+ * It is made from the catalogs, in a function, so a test can make one from catalogs of its own and with stand-ins for
+ * Svelte's context (the packages inside the editor are Svelte components, which a test in Node cannot load). The editor
+ * makes the one it uses in `language.ts`.
+ */
+/** The catalogs of the editor and of the packages inside it. A key belongs to one of them. */
+export interface EditorCatalogs {
+    editor: Readonly<Record<EditorMessageKey, string>>;
+    fileBrowser: Readonly<Record<string, string>>;
+    shadEditor: Readonly<Record<string, string>>;
+}
+/** What the screens of the editor read their words from. */
+export interface EditorLanguage extends I18nContext<EditorMessageKey> {
+    /** What the File Browser inside the editor is given: the page's language and the keys that are the File Browser's. */
+    fileBrowser: Readable<I18nSettings>;
+    /** What the rich text editor inside the editor is given: the page's language and the keys that are its own. */
+    shadEditor: Readable<I18nSettings>;
+}
+/** What `provideEditorLanguage` gives back to the component that called it. */
+export interface EditorLanguageHandle extends EditorLanguage {
+    /** Changes the language every part below speaks. Cheap to call on every change of the props. */
+    update(settings: I18nSettings): void;
+}
+export interface EditorLanguageKitOptions {
+    catalogs: EditorCatalogs;
+    /** Stand-ins for Svelte's `getContext` and `setContext`; tests only. */
+    contextApi?: SvelteContextApi;
+    /** Where the warnings go; tests only. */
+    logger?: Pick<Console, 'warn'>;
+}
+export interface EditorLanguageKit {
+    /** Every message of the editor and of the packages inside it, as one catalog: what a page's `messages` may have a key of. */
+    allMessages: Readonly<Record<string, string>>;
+    /**
+     * Checks a page's `messages` against all the editor's catalogs without showing anything: a key that does not exist
+     * (with the nearest real one), a value that is not text, a template that does not parse, or one that asks for a value
+     * the message is never given. An empty list means every message will be used. For a test or a build step of the page.
+     */
+    checkMessages(messages: MessageOverrides): MessageProblem[];
+    /** Called by the root component of an editor while it is created, so everything inside it speaks the page's language. */
+    provideLanguage(initial: I18nSettings): EditorLanguageHandle;
+    /** Called by a part of the editor while it is created. Outside an editor it speaks English. */
+    useLanguage(): EditorLanguage;
+}
+export declare function createEditorLanguageKit(options: EditorLanguageKitOptions): EditorLanguageKit;

package/dist/i18n/languageKit.js

@@ -0,0 +1,102 @@
+import { getContext, setContext } from 'svelte';
+import { readable, writable } from 'svelte/store';
+import { createI18n, describeMessageProblem, findMessageProblems, splitMessages } from '@widgetic/design-system/i18n';
+/** How many different problems the console is told about, so a page that keeps changing its messages cannot fill memory. */
+const MAX_REPORTED_KEYS = 200;
+/** Two settings are the same language when they have the same locale and the same words. */
+function signatureOf(settings) {
+    try {
+        return JSON.stringify([settings.locale ?? null, settings.messages ?? null]);
+    }
+    catch {
+        // Not serializable (a cycle, a BigInt): treat it as new every time rather than guess.
+        return `${Math.random()}`;
+    }
+}
+/** What the packages inside the editor are told when no editor above chose a language: nothing. */
+const NOTHING_CHOSEN = readable({});
+export function createEditorLanguageKit(options) {
+    const { catalogs } = options;
+    const api = options.contextApi ?? { getContext, setContext };
+    const logger = options.logger ?? console;
+    // The context belongs to one root component, so two editors on a page can speak two languages. The key is shared by
+    // every copy of the package, like the media library's.
+    const contextKey = Symbol.for('widgetic.editor.language');
+    const allMessages = {
+        ...catalogs.fileBrowser,
+        ...catalogs.shadEditor,
+        ...catalogs.editor
+    };
+    const editorWords = createI18n({
+        catalog: catalogs.editor,
+        label: 'Editor',
+        contextApi: options.contextApi
+    });
+    /** What a part speaks when no editor above it chose a language: English, with nothing to tell the packages inside. */
+    const englishLanguage = Object.freeze({
+        t: readable(editorWords.translateEnglish),
+        locale: readable('en'),
+        fileBrowser: NOTHING_CHOSEN,
+        shadEditor: NOTHING_CHOSEN
+    });
+    const reportedKeys = new Set();
+    /** Says a key of the page's `messages` that no catalog has, once per page however often the language is set. */
+    function reportUnclaimedKeys(unclaimed) {
+        if (Object.keys(unclaimed).length === 0)
+            return;
+        for (const problem of findMessageProblems(allMessages, unclaimed)) {
+            const text = describeMessageProblem(problem);
+            if (reportedKeys.has(text) || reportedKeys.size >= MAX_REPORTED_KEYS)
+                continue;
+            reportedKeys.add(text);
+            logger.warn(`[Editor] ${text}`);
+        }
+    }
+    const slicesOf = (settings) => splitMessages(settings.messages, catalogs);
+    function provideLanguage(initial) {
+        const first = slicesOf(initial);
+        // The editor's own translator hears only the editor's keys: a key of the File Browser is not "unknown" to it.
+        const translator = editorWords.provideI18n({ locale: initial.locale, messages: first.slices.editor });
+        const fileBrowser = writable({ locale: initial.locale, messages: first.slices.fileBrowser });
+        const shadEditor = writable({ locale: initial.locale, messages: first.slices.shadEditor });
+        reportUnclaimedKeys(first.unclaimed);
+        const language = {
+            t: translator.t,
+            locale: translator.locale,
+            fileBrowser: { subscribe: fileBrowser.subscribe },
+            shadEditor: { subscribe: shadEditor.subscribe }
+        };
+        api.setContext(contextKey, language);
+        let lastSignature = signatureOf(initial);
+        return {
+            ...language,
+            update(next) {
+                // Setting the same language again would rebuild every message for nothing.
+                const signature = signatureOf(next);
+                if (signature === lastSignature)
+                    return;
+                lastSignature = signature;
+                const nextSlices = slicesOf(next);
+                translator.update({ locale: next.locale, messages: nextSlices.slices.editor });
+                fileBrowser.set({ locale: next.locale, messages: nextSlices.slices.fileBrowser });
+                shadEditor.set({ locale: next.locale, messages: nextSlices.slices.shadEditor });
+                reportUnclaimedKeys(nextSlices.unclaimed);
+            }
+        };
+    }
+    function useLanguage() {
+        try {
+            return api.getContext(contextKey) ?? englishLanguage;
+        }
+        catch {
+            // getContext only works while a component is being created; anywhere else there is no editor above to ask.
+            return englishLanguage;
+        }
+    }
+    return {
+        allMessages,
+        checkMessages: (messages) => findMessageProblems(allMessages, messages),
+        provideLanguage,
+        useLanguage
+    };
+}