@widgetic/editor 4.0.10 → 4.1.0

package/dist/utils/FontManager.js

@@ -79,6 +79,11 @@ class FontManager {
     static instance = null;
     // Track loaded and pending fonts to prevent duplicates
     loadedFonts = new Set();
+    // What this manager added to the page's <head>, to take away again when the editor leaves the page
+    addedHeadElements = new Set();
+    // True from the moment the editor leaves the page until a new one asks for the manager: a stylesheet that was still
+    // on its way is not added to a page the editor is no longer on
+    pageWasReleased = false;
     // Map of intersection observers keyed by container ID
     observers = new Map();
     // Debounce timer for scroll events
@@ -105,11 +110,9 @@ class FontManager {
     // Controls how long we keep the font list in the durable L1 store
     static CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours
     static LOADED_FONTS_KEY = 'fonts.loaded';
-    // Legacy localStorage keys read once for migration
-    static LEGACY_CACHE_KEY = 'google_fonts_cache';
-    static LEGACY_LOADED_FONTS_KEY = 'loaded_fonts_cache';
-    // Controls how long browsers should cache the actual font files and stylesheets
-    static CACHE_CONTROL = 'public, max-age=31536000'; // 1 year
+    // The old localStorage copies (`google_fonts_cache`, `loaded_fonts_cache`) are no longer read or removed: the editor
+    // runs in customers' pages, whose own localStorage keys it must not touch, and the durable store above has been the
+    // source for long enough that the worst case is one fresh download of the catalog.
     // Add new property to store visible fonts
     visibleFonts = new Set();
     static initialPreloadComplete = false;
@@ -257,6 +260,8 @@ class FontManager {
             FontManager.instance.apiKey = trimmedKey;
             FontManager.instance.catalogFetchPromise = null;
         }
+        // An editor that asks for the manager is on the page: its fonts may be added again
+        FontManager.instance.pageWasReleased = false;
         // Always await in-flight init — concurrent callers used to return mid-initialize.
         if (FontManager.initializationPromise) {
             await FontManager.initializationPromise;
@@ -370,24 +375,11 @@ class FontManager {
         return this.preInitializedObservers.get('default') || null;
     }
     /**
-     * Loads previously cached fonts from the durable L1 store (legacy localStorage fallback)
+     * Loads previously cached fonts from the durable L1 store
      */
     async loadCachedFonts() {
         try {
-            let cachedLoadedFonts = await readKvValue(FontManager.LOADED_FONTS_KEY);
-            if (!cachedLoadedFonts) {
-                const legacyRaw = localStorage.getItem(FontManager.LEGACY_LOADED_FONTS_KEY);
-                if (legacyRaw) {
-                    try {
-                        cachedLoadedFonts = JSON.parse(legacyRaw);
-                        await writeKvValue(FontManager.LOADED_FONTS_KEY, cachedLoadedFonts);
-                    }
-                    catch {
-                        /* ignore malformed legacy data */
-                    }
-                    localStorage.removeItem(FontManager.LEGACY_LOADED_FONTS_KEY);
-                }
-            }
+            const cachedLoadedFonts = await readKvValue(FontManager.LOADED_FONTS_KEY);
             if (cachedLoadedFonts && Array.isArray(cachedLoadedFonts)) {
                 // Only load the first fonts initially
                 const initialFonts = cachedLoadedFonts.slice(0, FontManager.initialFontNumber);
@@ -420,18 +412,10 @@ class FontManager {
         try {
             const fontsToCache = Array.from(this.loadedFonts);
             void writeKvValue(FontManager.LOADED_FONTS_KEY, fontsToCache);
-            // Add cache control headers for font files
-            const styleSheets = document.querySelectorAll('link[href*="fonts.googleapis.com"]');
-            styleSheets.forEach(sheet => {
-                if (sheet instanceof HTMLLinkElement) {
-                    sheet.setAttribute('crossorigin', 'anonymous');
-                    // Add cache control header through meta tag since we can't directly set headers
-                    const meta = document.createElement('meta');
-                    meta.setAttribute('http-equiv', 'Cache-Control');
-                    meta.setAttribute('content', FontManager.CACHE_CONTROL);
-                    document.head.appendChild(meta);
-                }
-            });
+            // (This used to go through every Google Fonts stylesheet link of the page, the page's own included, to set
+            // `crossorigin` on it and to add a <meta http-equiv="Cache-Control"> to the page's head for each one. A stylesheet
+            // that has been fetched is not fetched again because of an attribute, no browser reads that meta, and both were
+            // changes to a page that is not the editor's, so they are gone.)
         }
         catch (error) {
             console.error('❌ [FontManager] Error saving loaded fonts:', error);
@@ -465,6 +449,42 @@ class FontManager {
         }
         return this.completeFontList.some(font => font.family.toLowerCase() === family.toLowerCase());
     }
+    /**
+     * 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.
+     */
+    addToHead(element) {
+        // The editor has left the page (a font that was on its way arrives late): nothing is added to it any more
+        if (this.pageWasReleased)
+            return;
+        document.head.appendChild(element);
+        this.addedHeadElements.add(element);
+    }
+    /**
+     * 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() {
+        try {
+            this.pageWasReleased = true;
+            for (const element of this.addedHeadElements)
+                element.remove();
+            this.addedHeadElements.clear();
+            this.loadedFonts.clear();
+        }
+        catch (error) {
+            console.error('❌ [FontManager] Error removing the font stylesheets from the page:', error);
+        }
+    }
+    /**
+     * 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() {
+        FontManager.instance?.removeAddedHeadElements();
+    }
     /**
      * Inserts a font stylesheet into the document
      * @param family - Font family name
@@ -487,7 +507,7 @@ class FontManager {
                 preconnect.rel = 'preconnect';
                 preconnect.href = 'https://fonts.gstatic.com';
                 preconnect.crossOrigin = 'anonymous';
-                document.head.appendChild(preconnect);
+                this.addToHead(preconnect);
             }
             // Build URL based on whether we want subset or full font
             const baseUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@400&display=swap`;
@@ -504,15 +524,10 @@ class FontManager {
                 link.setAttribute('data-full-font', 'true');
             }
             // Add to document
-            document.head.appendChild(link);
-            // Add preload hint with correct attributes after stylesheet
-            const preloadLink = document.createElement('link');
-            preloadLink.rel = 'preload';
-            preloadLink.as = 'style'; // Changed from 'font' to 'style'
-            preloadLink.href = finalUrl;
-            preloadLink.crossOrigin = 'anonymous';
-            preloadLink.setAttribute('onload', "this.onload=null;this.rel='stylesheet'");
-            document.head.appendChild(preloadLink);
+            this.addToHead(link);
+            // (A preload hint for the same address used to follow here, with an `onload` attribute that turned it into a
+            // second stylesheet. It added nothing to the stylesheet link above, and a page with a strict Content Security
+            // Policy blocks and reports that inline handler, so it is gone.)
             // Wait for stylesheet to load
             await new Promise((resolve, reject) => {
                 link.onload = () => resolve();
@@ -662,23 +677,11 @@ class FontManager {
         }
     }
     /**
-     * Gets font list from the durable L1 cache (legacy localStorage fallback)
+     * Gets font list from the durable L1 cache
      */
     async getFontListFromCache() {
         try {
-            let cache = await readKvValue(FontManager.CACHE_KEY, FontManager.CACHE_DURATION);
-            if (!cache) {
-                const legacyRaw = localStorage.getItem(FontManager.LEGACY_CACHE_KEY);
-                if (legacyRaw) {
-                    try {
-                        cache = JSON.parse(legacyRaw);
-                    }
-                    catch {
-                        /* ignore malformed legacy data */
-                    }
-                    localStorage.removeItem(FontManager.LEGACY_CACHE_KEY);
-                }
-            }
+            const cache = await readKvValue(FontManager.CACHE_KEY, FontManager.CACHE_DURATION);
             if (!cache)
                 return null;
             // Check if cache is expired
@@ -1040,12 +1043,8 @@ class FontManager {
             fontFace: false
         };
         try {
-            // Check the durable loaded-fonts registry (legacy localStorage fallback)
-            let cachedFonts = await readKvValue(FontManager.LOADED_FONTS_KEY);
-            if (!cachedFonts) {
-                const legacyRaw = localStorage.getItem(FontManager.LEGACY_LOADED_FONTS_KEY);
-                cachedFonts = legacyRaw ? JSON.parse(legacyRaw) : [];
-            }
+            // Check the durable loaded-fonts registry
+            const cachedFonts = await readKvValue(FontManager.LOADED_FONTS_KEY);
             const loadedFonts = Array.isArray(cachedFonts) ? cachedFonts : [];
             const isCached = loadedFonts.includes(family);
             // Check if stylesheet exists in DOM
@@ -1072,12 +1071,8 @@ class FontManager {
      */
     async getBrowserCachedFonts() {
         try {
-            // Get fonts from the durable loaded-fonts registry (legacy fallback)
+            // Get fonts from the durable loaded-fonts registry
             let cachedFonts = await readKvValue(FontManager.LOADED_FONTS_KEY);
-            if (!cachedFonts) {
-                const legacyRaw = localStorage.getItem(FontManager.LEGACY_LOADED_FONTS_KEY);
-                cachedFonts = legacyRaw ? JSON.parse(legacyRaw) : [];
-            }
             cachedFonts = Array.isArray(cachedFonts) ? cachedFonts : [];
             // console.log('📦 [FontManager] Fonts in durable registry:', cachedFonts);
             // Verify each font has its stylesheet in the DOM

package/dist/utils/VectorManager.d.ts

@@ -35,7 +35,6 @@ declare class VectorManager {
     private initialVectorsLoaded;
     private allVectorsLoaded;
     private cachedVectorList;
-    private static readonly CACHE_KEY;
     private static readonly CACHE_DURATION;
     private static readonly LOADED_VECTORS_KEY;
     private static readonly CACHE_CONTROL;

package/dist/utils/VectorManager.js

@@ -1,4 +1,5 @@
 import { vectorUtils, vectorCategories } from "./vectorUtils";
+import { readEditorStorageValue, writeEditorStorageValue } from "./editorStorage";
 class VectorManager {
     // Debug configuration
     static DEBUG_MODE = false;
@@ -17,9 +18,11 @@ class VectorManager {
     allVectorsLoaded = false;
     cachedVectorList = [];
     // Cache configuration
-    static CACHE_KEY = 'svg_vectors_cache';
+    // (The vector list used to be kept in localStorage under `svg_vectors_cache`; that key is no longer read or removed,
+    // because the editor runs in customers' pages whose own keys it must not touch.)
     // Controls how long we keep the vector list in browser's localStorage
     static CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours
+    // Stored in the editor's own corner of localStorage (see editorStorage.ts), not under a key the customer's page may use.
     static LOADED_VECTORS_KEY = 'loaded_vectors_cache';
     // Controls how long browsers should cache the actual vector files
     static CACHE_CONTROL = 'public, max-age=31536000'; // 1 year
@@ -218,7 +221,7 @@ class VectorManager {
      */
     async getBrowserCachedVectors() {
         try {
-            const cachedVectorsList = localStorage.getItem(VectorManager.LOADED_VECTORS_KEY);
+            const cachedVectorsList = readEditorStorageValue(VectorManager.LOADED_VECTORS_KEY);
             const cachedVectors = cachedVectorsList ? JSON.parse(cachedVectorsList) : [];
             // console.log('📦 [VectorManager] Vectors in localStorage:', cachedVectors);
             // Verify each vector exists in the DOM/cache
@@ -247,9 +250,9 @@ class VectorManager {
     saveLoadedVectors() {
         try {
             const vectorsToCache = Array.from(this.loadedVectors);
-            localStorage.setItem(VectorManager.LOADED_VECTORS_KEY, JSON.stringify(vectorsToCache));
+            writeEditorStorageValue(VectorManager.LOADED_VECTORS_KEY, JSON.stringify(vectorsToCache));
             // Verify the save operation
-            const savedData = localStorage.getItem(VectorManager.LOADED_VECTORS_KEY);
+            const savedData = readEditorStorageValue(VectorManager.LOADED_VECTORS_KEY);
             // console.log('💾 [VectorManager] Vector cache status:', {
             //   savedVectors: vectorsToCache,
             //   verifiedCache: savedData ? JSON.parse(savedData) : null,
@@ -306,13 +309,8 @@ class VectorManager {
      * Saves vector list to cache (avoids writing 1.2MB JSON to localStorage)
      */
     saveVectorListToCache(vectors) {
-        try {
-            // Remove legacy large JSON from localStorage if present to free storage quota
-            localStorage.removeItem(VectorManager.CACHE_KEY);
-        }
-        catch (error) {
-            // Ignore storage errors
-        }
+        // Nothing to save: the list is not written to localStorage. (This used to remove the large legacy JSON that an
+        // earlier version stored under `svg_vectors_cache`; the editor no longer touches keys it did not prefix itself.)
     }
     /**
      * Verifies if a vector is actually cached in the browser
@@ -326,7 +324,7 @@ class VectorManager {
         };
         try {
             // Check if vector is in localStorage
-            const cachedVectors = localStorage.getItem(VectorManager.LOADED_VECTORS_KEY);
+            const cachedVectors = readEditorStorageValue(VectorManager.LOADED_VECTORS_KEY);
             const loadedVectors = cachedVectors ? JSON.parse(cachedVectors) : [];
             const isCached = loadedVectors.includes(name);
             // Find vector URL

package/dist/utils/dockPlacement.d.ts

@@ -0,0 +1,12 @@
+import type { TextDirection } from '@widgetic/design-system/components/textDirection';
+/**
+ * The `left` (in pixels, from the left edge of the editor's area) of a box that starts `startLeft` from the left edge of a
+ * left to right screen and is `width` wide, on the screen as it is read.
+ *
+ * On a left to right screen it is `startLeft` itself. On a right to left screen it is the box in the mirror: the box starts
+ * the same distance from the right edge, so what sat left of the middle sits right of it, with the same gap.
+ *
+ * The settings editor and the preview float over the editor's area and are put in place in pixels, because they can be
+ * dragged and resized. The mirror is made here, once, when they are docked, so nothing else about them has to know the direction.
+ */
+export declare function leftOnThisScreen(direction: TextDirection, startLeft: number, width: number, areaWidth: number): number;

package/dist/utils/dockPlacement.js

@@ -0,0 +1,13 @@
+/**
+ * The `left` (in pixels, from the left edge of the editor's area) of a box that starts `startLeft` from the left edge of a
+ * left to right screen and is `width` wide, on the screen as it is read.
+ *
+ * On a left to right screen it is `startLeft` itself. On a right to left screen it is the box in the mirror: the box starts
+ * the same distance from the right edge, so what sat left of the middle sits right of it, with the same gap.
+ *
+ * The settings editor and the preview float over the editor's area and are put in place in pixels, because they can be
+ * dragged and resized. The mirror is made here, once, when they are docked, so nothing else about them has to know the direction.
+ */
+export function leftOnThisScreen(direction, startLeft, width, areaWidth) {
+    return direction === 'rtl' ? areaWidth - startLeft - width : startLeft;
+}

package/dist/utils/editorStorage.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The editor's own corner of the browser's localStorage.
+ *
+ * The editor can run inside a customer's page, and a page shares its localStorage with everything on it. A key such as
+ * `recentColors` or `recent_fonts` is as likely to be the customer's own as the editor's: reading it would take the
+ * customer's data for the editor's, writing it would overwrite theirs. So every key the editor uses starts with
+ * `widgetic:editor:`, and the editor only reads, writes and removes keys that do.
+ *
+ * Storage can also be unavailable (a browser setting, a private window, a frame without storage access) or full. None
+ * of that may stop the editor, so a failure is reported once and the call answers as if nothing were stored.
+ */
+export declare const EDITOR_STORAGE_PREFIX = "widgetic:editor:";
+/** What was stored under `key`, or null when nothing was (or storage is not usable). */
+export declare function readEditorStorageValue(key: string): string | null;
+/** Stores `value` under `key`. Answers whether it was stored. */
+export declare function writeEditorStorageValue(key: string, value: string): boolean;
+/** Forgets what was stored under `key`. */
+export declare function removeEditorStorageValue(key: string): void;
+/**
+ * Forgets everything the editor stored under a key that begins with `keyStart`, and nothing else: the customer's keys
+ * stay, even those with the same text in them. Answers how many were forgotten.
+ */
+export declare function removeEditorStorageValuesStartingWith(keyStart: string): number;

package/dist/utils/editorStorage.js

@@ -0,0 +1,95 @@
+/**
+ * The editor's own corner of the browser's localStorage.
+ *
+ * The editor can run inside a customer's page, and a page shares its localStorage with everything on it. A key such as
+ * `recentColors` or `recent_fonts` is as likely to be the customer's own as the editor's: reading it would take the
+ * customer's data for the editor's, writing it would overwrite theirs. So every key the editor uses starts with
+ * `widgetic:editor:`, and the editor only reads, writes and removes keys that do.
+ *
+ * Storage can also be unavailable (a browser setting, a private window, a frame without storage access) or full. None
+ * of that may stop the editor, so a failure is reported once and the call answers as if nothing were stored.
+ */
+export const EDITOR_STORAGE_PREFIX = 'widgetic:editor:';
+/** The kinds of failure already reported, so that each is reported once however often it happens. */
+const reportedFailures = new Set();
+function reportFailureOnce(kind, error) {
+    if (reportedFailures.has(kind))
+        return;
+    reportedFailures.add(kind);
+    console.warn(`[editorStorage] The browser's storage is not usable (${kind}); the editor goes on without it:`, error);
+}
+/** The browser's localStorage, or nothing where there is none (a server) or where the browser refuses access to it. */
+function getBrowserStorage() {
+    try {
+        return typeof localStorage === 'undefined' ? null : localStorage;
+    }
+    catch (error) {
+        // Even looking at `localStorage` throws when the browser blocks storage for the page.
+        reportFailureOnce('blocked', error);
+        return null;
+    }
+}
+/** What was stored under `key`, or null when nothing was (or storage is not usable). */
+export function readEditorStorageValue(key) {
+    const storage = getBrowserStorage();
+    if (!storage)
+        return null;
+    try {
+        return storage.getItem(EDITOR_STORAGE_PREFIX + key);
+    }
+    catch (error) {
+        reportFailureOnce('read', error);
+        return null;
+    }
+}
+/** Stores `value` under `key`. Answers whether it was stored. */
+export function writeEditorStorageValue(key, value) {
+    const storage = getBrowserStorage();
+    if (!storage)
+        return false;
+    try {
+        storage.setItem(EDITOR_STORAGE_PREFIX + key, value);
+        return true;
+    }
+    catch (error) {
+        reportFailureOnce('write', error);
+        return false;
+    }
+}
+/** Forgets what was stored under `key`. */
+export function removeEditorStorageValue(key) {
+    const storage = getBrowserStorage();
+    if (!storage)
+        return;
+    try {
+        storage.removeItem(EDITOR_STORAGE_PREFIX + key);
+    }
+    catch (error) {
+        reportFailureOnce('remove', error);
+    }
+}
+/**
+ * Forgets everything the editor stored under a key that begins with `keyStart`, and nothing else: the customer's keys
+ * stay, even those with the same text in them. Answers how many were forgotten.
+ */
+export function removeEditorStorageValuesStartingWith(keyStart) {
+    const storage = getBrowserStorage();
+    if (!storage)
+        return 0;
+    try {
+        const fullKeyStart = EDITOR_STORAGE_PREFIX + keyStart;
+        // Collected first: removing a key while walking the keys would skip the one that moves into its place.
+        const keysToRemove = [];
+        for (let index = 0; index < storage.length; index += 1) {
+            const key = storage.key(index);
+            if (key !== null && key.startsWith(fullKeyStart))
+                keysToRemove.push(key);
+        }
+        keysToRemove.forEach((key) => storage.removeItem(key));
+        return keysToRemove.length;
+    }
+    catch (error) {
+        reportFailureOnce('remove', error);
+        return 0;
+    }
+}

package/dist/utils/fieldDirection.d.ts

@@ -0,0 +1,13 @@
+import { type TextDirection } from '@widgetic/design-system/components/textDirection';
+/**
+ * The `dir` of the value of a single-line field on a screen that is read in `screenDirection`:
+ * - an address (an email, a link): left to right on a right to left screen, nothing on a left to right one;
+ * - text a person types: read by its own first letter on a right to left screen (`auto`), nothing on a left to right one.
+ *   While the field is empty there is no first letter, and `auto` then reads left to right even on a right to left screen,
+ *   which would put the hint of the field (and the caret) at its left edge: an empty field takes the direction of the screen.
+ *
+ * A left to right screen is written no attribute at all, as it always was.
+ *
+ * @param hasValue Whether anything is typed in the field yet (default: yes).
+ */
+export declare function directionOfFieldValue(fieldType: string | undefined, screenDirection: TextDirection, hasValue?: boolean): 'auto' | 'ltr' | undefined;

package/dist/utils/fieldDirection.js

@@ -0,0 +1,25 @@
+import { dirForUserText } from '@widgetic/design-system/components/textDirection';
+/**
+ * The kinds of field whose value is an address, which is read left to right on every screen.
+ *
+ * The `type` a field is given is the name of its kind in the schema (`textInput` for a plain text field, `email`, `url`), not
+ * an HTML type, so only these two are addresses and everything else is text a person types. (A first version took `text` for
+ * the only text and read every field of a schema as an address: what a visitor typed in Arabic was set from the left.)
+ */
+const ADDRESS_FIELD_TYPES = new Set(['email', 'url']);
+/**
+ * The `dir` of the value of a single-line field on a screen that is read in `screenDirection`:
+ * - an address (an email, a link): left to right on a right to left screen, nothing on a left to right one;
+ * - text a person types: read by its own first letter on a right to left screen (`auto`), nothing on a left to right one.
+ *   While the field is empty there is no first letter, and `auto` then reads left to right even on a right to left screen,
+ *   which would put the hint of the field (and the caret) at its left edge: an empty field takes the direction of the screen.
+ *
+ * A left to right screen is written no attribute at all, as it always was.
+ *
+ * @param hasValue Whether anything is typed in the field yet (default: yes).
+ */
+export function directionOfFieldValue(fieldType, screenDirection, hasValue = true) {
+    if (fieldType && ADDRESS_FIELD_TYPES.has(fieldType.toLowerCase()))
+        return screenDirection === 'rtl' ? 'ltr' : undefined;
+    return hasValue ? dirForUserText(screenDirection) : undefined;
+}

package/dist/utils/fontUtils.js

@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { readEditorStorageValue, writeEditorStorageValue } from './editorStorage';
 // Define our category types with proper typing
 export const fontCategories = {
     // Google Fonts categories to our categories mapping
@@ -69,6 +70,7 @@ export const fontCategories = {
         return inferredCategory;
     }
 };
+// Stored in the editor's own corner of localStorage (see editorStorage.ts), not under a key the customer's page may use.
 const RECENT_FONTS_KEY = 'recent_fonts';
 const MAX_RECENT_FONTS = 3;
 // Add store for recent fonts
@@ -76,7 +78,7 @@ export const recentFontsStore = writable([]);
 export const fontUtils = {
     getRecentFonts() {
         try {
-            const stored = localStorage.getItem(RECENT_FONTS_KEY);
+            const stored = readEditorStorageValue(RECENT_FONTS_KEY);
             return stored ? JSON.parse(stored) : [];
         }
         catch (error) {
@@ -95,7 +97,7 @@ export const fontUtils = {
                 },
                 ...filteredFonts
             ].slice(0, MAX_RECENT_FONTS);
-            localStorage.setItem(RECENT_FONTS_KEY, JSON.stringify(newRecentFonts));
+            writeEditorStorageValue(RECENT_FONTS_KEY, JSON.stringify(newRecentFonts));
             recentFontsStore.set(newRecentFonts);
             return newRecentFonts;
         }
@@ -108,7 +110,7 @@ export const fontUtils = {
         try {
             const recentFonts = this.getRecentFonts();
             const filteredFonts = recentFonts.filter(f => f.family !== family);
-            localStorage.setItem(RECENT_FONTS_KEY, JSON.stringify(filteredFonts));
+            writeEditorStorageValue(RECENT_FONTS_KEY, JSON.stringify(filteredFonts));
             return filteredFonts;
         }
         catch (error) {

package/dist/utils/htmlSafety.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Text from outside the editor (a file's name, a font's name, a label in a widget's schema, what a person typed) must
+ * never reach the page as markup or as style rules. The editor can run inside a customer's own page, where a name like
+ * `x" onerror="steal()` that breaks out of an attribute runs with the customer page's rights.
+ *
+ * Svelte's `{text}` and `attribute={value}` already escape for HTML. These helpers are for the places that build HTML
+ * as a string for `{@html ...}`, where nothing is escaped unless it is done here, on every piece, as it goes in, and
+ * for the places that put a name into a CSS rule, where HTML escaping does not help at all.
+ */
+/** `text` as it must be written between tags or inside a quoted attribute value. Anything but text becomes its string. */
+export declare function escapeHtml(text: unknown): string;
+/**
+ * `text` as a quoted CSS string (`'Open Sans'`), whatever it contains. A font family name goes into a rule like
+ * `font-family: 'Open Sans', sans-serif`; a name such as `x'; background: url(//evil/a)` would otherwise end the string
+ * and add rules of its own, and escaping it for HTML does not stop that (the HTML parser turns `'` back into the
+ * quote). Backslashes and single quotes are escaped; line breaks and other control characters, which end a CSS string,
+ * become spaces. The name still reaches the browser as the same name, so it matches the font that was loaded under it.
+ *
+ * When the result goes into an HTML attribute, escape it for HTML as well (`escapeHtml(cssQuotedString(name))`).
+ */
+export declare function cssQuotedString(text: unknown): string;

package/dist/utils/htmlSafety.js

@@ -0,0 +1,38 @@
+/**
+ * Text from outside the editor (a file's name, a font's name, a label in a widget's schema, what a person typed) must
+ * never reach the page as markup or as style rules. The editor can run inside a customer's own page, where a name like
+ * `x" onerror="steal()` that breaks out of an attribute runs with the customer page's rights.
+ *
+ * Svelte's `{text}` and `attribute={value}` already escape for HTML. These helpers are for the places that build HTML
+ * as a string for `{@html ...}`, where nothing is escaped unless it is done here, on every piece, as it goes in, and
+ * for the places that put a name into a CSS rule, where HTML escaping does not help at all.
+ */
+const HTML_ESCAPES = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+};
+/** `text` as it must be written between tags or inside a quoted attribute value. Anything but text becomes its string. */
+export function escapeHtml(text) {
+    if (text === null || text === undefined)
+        return '';
+    return String(text).replace(/[&<>"']/g, (character) => HTML_ESCAPES[character]);
+}
+/**
+ * `text` as a quoted CSS string (`'Open Sans'`), whatever it contains. A font family name goes into a rule like
+ * `font-family: 'Open Sans', sans-serif`; a name such as `x'; background: url(//evil/a)` would otherwise end the string
+ * and add rules of its own, and escaping it for HTML does not stop that (the HTML parser turns `&#39;` back into the
+ * quote). Backslashes and single quotes are escaped; line breaks and other control characters, which end a CSS string,
+ * become spaces. The name still reaches the browser as the same name, so it matches the font that was loaded under it.
+ *
+ * When the result goes into an HTML attribute, escape it for HTML as well (`escapeHtml(cssQuotedString(name))`).
+ */
+export function cssQuotedString(text) {
+    const cleaned = String(text ?? '')
+        // eslint-disable-next-line no-control-regex
+        .replace(/[\u0000-\u001f\u007f\u2028\u2029]/g, ' ')
+        .replace(/[\\']/g, '\\$&');
+    return `'${cleaned}'`;
+}