@widgetic/editor 4.0.10 → 4.1.0

package/dist/utils/richTextPreview.js

@@ -0,0 +1,207 @@
+/**
+ * The compact preview of a rich text (what the text area control shows before it is opened): the text with its bold,
+ * italic, underline, colours and so on, in a few lines.
+ *
+ * The rich text is HTML that somebody typed or pasted, so it is not trusted. The preview used to be made by copying
+ * the HTML it was given, tag by tag, into a string for `{@html}`: a text that said `<img src=x onerror=...>` came
+ * out as a real `<img>` that ran its script in the page the editor is on. It is now made from a description of the text
+ * (the `PreviewNode`s below), and everything that goes into the string is either escaped or comes from a short list of
+ * what is allowed: some tags, a few style properties with plain values, one class per marker.
+ *
+ *   html text --parseRichText (the browser's own parser, which runs nothing)--> PreviewNode[]
+ *             --renderPreviewNodes (plain string work, no browser needed)-->    HTML that is safe for {@html}
+ */
+import { escapeHtml } from './htmlSafety';
+/** Elements that are shown as they are (their formatting is the point of the preview). */
+const KEPT_TAGS = new Set([
+    'a',
+    'b',
+    'code',
+    'del',
+    'em',
+    'i',
+    'ins',
+    'li',
+    'mark',
+    'ol',
+    's',
+    'small',
+    'span',
+    'strike',
+    'strong',
+    'sub',
+    'sup',
+    'u',
+    'ul'
+]);
+/** Elements whose content is not text to show at all: nothing of them, not even their text, reaches the preview. */
+const DROPPED_TAGS = new Set([
+    'applet',
+    'audio',
+    'canvas',
+    'embed',
+    'frame',
+    'frameset',
+    'iframe',
+    'img',
+    'link',
+    'math',
+    'meta',
+    'noscript',
+    'object',
+    'script',
+    'style',
+    'svg',
+    'template',
+    'textarea',
+    'title',
+    'video'
+]);
+/** The style properties a text can carry into the preview. */
+const ALLOWED_STYLE_PROPERTIES = new Set([
+    'background-color',
+    'color',
+    'font-family',
+    'font-size',
+    'font-style',
+    'font-weight',
+    'letter-spacing',
+    'line-height',
+    'text-decoration',
+    'text-decoration-color',
+    'text-decoration-line',
+    'text-transform'
+]);
+/** Functions that may appear in a style value (colours and arithmetic); `url(...)`, `expression(...)`... may not. */
+const ALLOWED_STYLE_FUNCTIONS = new Set([
+    'calc',
+    'clamp',
+    'hsl',
+    'hsla',
+    'max',
+    'min',
+    'rgb',
+    'rgba',
+    'var'
+]);
+const MAX_STYLE_VALUE_LENGTH = 200;
+/** Letters, digits, spaces and the punctuation of colours, sizes and font lists. No `;`, `{`, `}`, `<`, `>`, `\`, `@`. */
+const SAFE_STYLE_CHARACTERS = /^[\p{L}\p{N} #%.,+\-_'"()/*]*$/u;
+/** A value for the preview's `data-text-style` attribute: a short name such as `heading-1`. */
+const TEXT_STYLE_NAME = /^[A-Za-z0-9_-]{1,40}$/;
+/** Whether one style declaration may go into the preview. */
+export function isAllowedDeclaration(property, value) {
+    if (!ALLOWED_STYLE_PROPERTIES.has(property))
+        return false;
+    if (value.length === 0 || value.length > MAX_STYLE_VALUE_LENGTH)
+        return false;
+    if (!SAFE_STYLE_CHARACTERS.test(value))
+        return false;
+    // Comments can hide the words below from the checks that follow; an escape can spell them.
+    if (value.includes('/*') || value.includes('*/'))
+        return false;
+    for (const call of value.matchAll(/([A-Za-z-]+)\s*\(/g)) {
+        if (!ALLOWED_STYLE_FUNCTIONS.has(call[1].toLowerCase()))
+            return false;
+    }
+    return true;
+}
+/** The `style` attribute value (already escaped for an attribute) for the declarations that are allowed, or ''. */
+function styleAttribute(declarations) {
+    const allowed = declarations.filter(([property, value]) => isAllowedDeclaration(property, value));
+    if (allowed.length === 0)
+        return '';
+    const colour = allowed.find(([property]) => property === 'color');
+    const parts = allowed.map(([property, value]) => `${property}: ${value}`);
+    // The preview's own stylesheet reads the text colour from --color.
+    if (colour)
+        parts.unshift(`--color: ${colour[1]}`);
+    return escapeHtml(`${parts.join('; ')};`);
+}
+function renderNode(node) {
+    if (typeof node === 'string')
+        return escapeHtml(node);
+    const tag = node.tag.toLowerCase();
+    if (DROPPED_TAGS.has(tag))
+        return '';
+    const children = node.children.map(renderNode).join('');
+    // Line breaks and paragraphs become spaces: the preview is a few lines of running text.
+    if (tag === 'br')
+        return ' ';
+    if (tag === 'p' || tag === 'div')
+        return `${children} `;
+    const isHeading = /^h[1-4]$/.test(tag);
+    if (!isHeading && !KEPT_TAGS.has(tag))
+        return children;
+    const classes = [];
+    const textStyle = node.textStyle !== null && TEXT_STYLE_NAME.test(node.textStyle) ? node.textStyle : null;
+    if (textStyle !== null)
+        classes.push('preserve-color');
+    if (isHeading)
+        classes.push('tiptap-heading');
+    const style = styleAttribute(node.declarations);
+    const outputTag = isHeading ? 'span' : tag;
+    let startTag = `<${outputTag}`;
+    if (style !== '')
+        startTag += ` style="${style}"`;
+    if (textStyle !== null)
+        startTag += ` data-text-style="${escapeHtml(textStyle)}"`;
+    if (classes.length > 0)
+        startTag += ` class="${classes.join(' ')}"`;
+    return `${startTag}>${children}</${outputTag}>`;
+}
+/** HTML for `{@html}` from the description of a rich text. Everything in it is escaped or on the lists above. */
+export function renderPreviewNodes(nodes) {
+    return nodes.map(renderNode).join('').trim();
+}
+// ---- From the browser ---------------------------------------------------------------------------------------------
+function toPreviewNode(node) {
+    if (node.nodeType === Node.TEXT_NODE)
+        return node.textContent ?? '';
+    if (node.nodeType !== Node.ELEMENT_NODE)
+        return null;
+    const element = node;
+    const declarations = [];
+    // The browser reads the style the way it would apply it: what it cannot read is already gone.
+    const style = element.style;
+    if (style) {
+        for (let index = 0; index < style.length; index += 1) {
+            const property = style.item(index);
+            declarations.push([property, style.getPropertyValue(property)]);
+        }
+    }
+    return {
+        tag: element.tagName.toLowerCase(),
+        declarations,
+        textStyle: element.getAttribute('data-text-style'),
+        children: Array.from(element.childNodes)
+            .map(toPreviewNode)
+            .filter((child) => child !== null)
+    };
+}
+/**
+ * Reads rich text with the browser's HTML parser. A document made by `DOMParser` has no page behind it: scripts do
+ * not run, pictures are not fetched, event handlers never fire.
+ */
+export function parseRichText(html) {
+    const document = new DOMParser().parseFromString(html, 'text/html');
+    return Array.from(document.body.childNodes)
+        .map(toPreviewNode)
+        .filter((node) => node !== null);
+}
+/**
+ * The preview of a rich text, as HTML that is safe for `{@html}`. A text that arrives written out as entities
+ * (`&lt;strong&gt;...`) is read as the markup it spells, as it always has been.
+ */
+export function createPreviewHtml(text) {
+    if (!text)
+        return '';
+    let html = text;
+    if (!html.includes('<') && html.includes('&lt;')) {
+        // A detached <textarea> only decodes entities: nothing in it is parsed as markup or run.
+        const decoder = document.createElement('textarea');
+        decoder.innerHTML = html;
+        html = decoder.value;
+    }
+    return renderPreviewNodes(parseRichText(html));
+}

package/dist/utils/scrollActivity.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Something that wants to know the user is scrolling (the help tooltips hide while the panel moves under them).
+ *
+ * Every control used to put its own three listeners on the window and the document, which is hundreds of global
+ * listeners on a customer's page and a pass over every control for each wheel tick. The listeners are shared now:
+ * one set per tree (the page, or the shadow root of a module), however many controls ask.
+ */
+type ScrollActivityListener = () => void;
+/**
+ * Calls `listener` whenever the user scrolls in the tree `anchor` lives in: the page scrolling, a panel scrolling, a
+ * wheel turning or a finger moving. Gives back the function that stops it; call that when the control goes away.
+ */
+export declare function onScrollActivity(anchor: Node | null | undefined, listener: ScrollActivityListener): () => void;
+export {};

package/dist/utils/scrollActivity.js

@@ -0,0 +1,63 @@
+import { listenForScroll } from './shadowDom';
+/** The shared listeners of each tree, found by the tree's root node (the document or a shadow root). */
+const sharedListenersByTree = new Map();
+/** The node that stands for the tree `anchor` lives in. */
+function treeKeyOf(anchor) {
+    if (typeof document === 'undefined')
+        return null;
+    try {
+        const rootNode = anchor?.getRootNode?.();
+        // A node that is not in a page (yet) has no tree of its own: the page's listeners are the ones it wants.
+        return rootNode && rootNode.nodeType === 11 ? rootNode : document;
+    }
+    catch (error) {
+        console.warn('[scrollActivity] Could not tell which tree the control is in:', error);
+        return document;
+    }
+}
+/**
+ * Calls `listener` whenever the user scrolls in the tree `anchor` lives in: the page scrolling, a panel scrolling, a
+ * wheel turning or a finger moving. Gives back the function that stops it; call that when the control goes away.
+ */
+export function onScrollActivity(anchor, listener) {
+    const treeKey = treeKeyOf(anchor);
+    if (!treeKey)
+        return () => { };
+    let shared = sharedListenersByTree.get(treeKey);
+    if (!shared) {
+        const listeners = new Set();
+        const tellEveryone = () => {
+            // Copied, because a listener may stop listening while it is being told.
+            for (const interested of [...listeners]) {
+                try {
+                    interested();
+                }
+                catch (error) {
+                    console.error('[scrollActivity] A scroll listener failed:', error);
+                }
+            }
+        };
+        const stopScroll = listenForScroll(anchor, tellEveryone, { passive: true });
+        // The wheel and a finger moving leave a shadow root, so the document hears about them in either tree.
+        document.addEventListener('wheel', tellEveryone, { capture: true, passive: true });
+        document.addEventListener('touchmove', tellEveryone, { capture: true, passive: true });
+        shared = {
+            listeners,
+            stop: () => {
+                stopScroll();
+                document.removeEventListener('wheel', tellEveryone, true);
+                document.removeEventListener('touchmove', tellEveryone, true);
+            }
+        };
+        sharedListenersByTree.set(treeKey, shared);
+    }
+    const sharedForThisTree = shared;
+    sharedForThisTree.listeners.add(listener);
+    return () => {
+        sharedForThisTree.listeners.delete(listener);
+        if (sharedForThisTree.listeners.size === 0 && sharedListenersByTree.get(treeKey) === sharedForThisTree) {
+            sharedForThisTree.stop();
+            sharedListenersByTree.delete(treeKey);
+        }
+    };
+}

package/dist/utils/shadowDom.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Finding things on the page when the editor can be inside a shadow root.
+ *
+ * The editor also runs inside a module on a customer's page, in a shadow root. `document.querySelector(...)` and
+ * `document.getElementById(...)` only look at the page's own tree and never inside a shadow root, so code that looks
+ * something up that way finds nothing there (or, worse, finds something of the customer's page). `node.getRootNode()`
+ * is the tree a node lives in: the shadow root inside a module, the document on a normal page. These helpers look
+ * there.
+ */
+/** What a document and a shadow root have in common, which is all these helpers need of either. */
+export interface SearchableTree {
+    readonly nodeType: number;
+    querySelector(selector: string): Element | null;
+    querySelectorAll(selector: string): ArrayLike<Element>;
+    getElementById(id: string): HTMLElement | null;
+    appendChild<NodeType extends Node>(node: NodeType): NodeType;
+}
+/**
+ * The tree a node lives in: the shadow root it is inside, or the document. A node that is not on a page yet, or no
+ * node at all, gives the document (and nothing when there is no document, as when rendering on a server).
+ */
+export declare function treeOf(anchor: Node | null | undefined): SearchableTree | null;
+/** `document.querySelector(selector)`, but in the tree `anchor` lives in. */
+export declare function queryInTreeOf(anchor: Node | null | undefined, selector: string): Element | null;
+/** `document.querySelectorAll(selector)` as a list, but in the tree `anchor` lives in. */
+export declare function queryAllInTreeOf(anchor: Node | null | undefined, selector: string): Element[];
+/**
+ * Whether an event happened inside `element`. Heard on the document or the window, an event that started inside a
+ * shadow root has the shadow root's host as its target, so `element.contains(event.target)` is false for everything
+ * inside the editor; the event's path still lists the elements it really went through. (Call it while the event is
+ * being handled: the path is gone once handling is over.)
+ */
+export declare function isEventInside(event: Event, element: Node | null | undefined): boolean;
+/**
+ * The element that has the keyboard focus in the tree `anchor` lives in. `document.activeElement` is the module's
+ * host element for anything focused inside a shadow root, which is never one of the editor's fields.
+ */
+export declare function activeElementIn(anchor: Node | null | undefined): Element | null;
+/**
+ * Calls `handler` when something scrolls and gives back the function that stops it. A scroll is not an event that
+ * leaves a shadow root, so a listener on the window only hears about the page being scrolled; to hear about the
+ * editor's own panels scrolling the listener goes on the shadow root too. Both are listened to while the event goes
+ * down (capture), as a scroll does not bubble.
+ */
+export declare function listenForScroll(anchor: Node | null | undefined, handler: (event: Event) => void, { passive }?: {
+    passive?: boolean;
+}): () => void;
+/**
+ * The layer a popover is drawn in when it must sit above everything else, found or made in the tree `anchor` lives in
+ * and shared by every component that asks for the same `id`. On a page it is a node at the end of the body; inside a
+ * module it is a node in the module's portal layer (or, failing that, in the shadow root), never in the customer's
+ * body. Give it back with `releasePortalHost` when the component goes away.
+ */
+export declare function acquirePortalHost(anchor: Node | null | undefined, id: string, zIndex?: string): HTMLElement | null;
+/** Gives a layer from `acquirePortalHost` back; the last one to give it back removes it from the page. */
+export declare function releasePortalHost(host: HTMLElement | null | undefined): void;
+/** What `lockPointerStyle` can be asked to do besides showing a cursor. */
+export interface PointerStyleOptions {
+    /** Also stop text from being selected as the pointer moves. On unless told otherwise. */
+    blockTextSelection?: boolean;
+}
+/**
+ * Shows `cursor` for as long as a drag or a resize lasts (and, unless told otherwise, stops text from being selected as
+ * the pointer moves). Gives back the function that puts back what was there before; it puts it back once, however
+ * often it is called, so it can be called from every way a gesture can end.
+ */
+export declare function lockPointerStyle(anchor: EventTarget | null | undefined, cursor: string, { blockTextSelection }?: PointerStyleOptions): () => void;

package/dist/utils/shadowDom.js

@@ -0,0 +1,211 @@
+/**
+ * Finding things on the page when the editor can be inside a shadow root.
+ *
+ * The editor also runs inside a module on a customer's page, in a shadow root. `document.querySelector(...)` and
+ * `document.getElementById(...)` only look at the page's own tree and never inside a shadow root, so code that looks
+ * something up that way finds nothing there (or, worse, finds something of the customer's page). `node.getRootNode()`
+ * is the tree a node lives in: the shadow root inside a module, the document on a normal page. These helpers look
+ * there.
+ */
+const DOCUMENT_NODE = 9;
+const DOCUMENT_FRAGMENT_NODE = 11;
+/**
+ * The class of the layer a module keeps inside its shadow root for menus, dialogs and popovers. It is set by the
+ * module (ui-sdk/modules/src/shared/shadowMount.ts); this file only finds it.
+ */
+const MODULE_PORTAL_LAYER_SELECTOR = '.widgetic-ui-portal';
+/**
+ * The tree a node lives in: the shadow root it is inside, or the document. A node that is not on a page yet, or no
+ * node at all, gives the document (and nothing when there is no document, as when rendering on a server).
+ */
+export function treeOf(anchor) {
+    try {
+        const rootNode = anchor?.getRootNode?.();
+        if (rootNode &&
+            (rootNode.nodeType === DOCUMENT_NODE || rootNode.nodeType === DOCUMENT_FRAGMENT_NODE)) {
+            return rootNode;
+        }
+    }
+    catch (error) {
+        console.warn('[shadowDom] Could not tell which tree a node is in, using the document:', error);
+    }
+    return typeof document === 'undefined' ? null : document;
+}
+/** `document.querySelector(selector)`, but in the tree `anchor` lives in. */
+export function queryInTreeOf(anchor, selector) {
+    try {
+        return treeOf(anchor)?.querySelector(selector) ?? null;
+    }
+    catch (error) {
+        console.warn(`[shadowDom] Could not search for "${selector}":`, error);
+        return null;
+    }
+}
+/** `document.querySelectorAll(selector)` as a list, but in the tree `anchor` lives in. */
+export function queryAllInTreeOf(anchor, selector) {
+    try {
+        return Array.from(treeOf(anchor)?.querySelectorAll(selector) ?? []);
+    }
+    catch (error) {
+        console.warn(`[shadowDom] Could not search for "${selector}":`, error);
+        return [];
+    }
+}
+/**
+ * Whether an event happened inside `element`. Heard on the document or the window, an event that started inside a
+ * shadow root has the shadow root's host as its target, so `element.contains(event.target)` is false for everything
+ * inside the editor; the event's path still lists the elements it really went through. (Call it while the event is
+ * being handled: the path is gone once handling is over.)
+ */
+export function isEventInside(event, element) {
+    if (!element)
+        return false;
+    try {
+        const path = event.composedPath?.();
+        if (path && path.length > 0)
+            return path.includes(element);
+        return element.contains(event.target);
+    }
+    catch (error) {
+        console.warn('[shadowDom] Could not tell where an event happened:', error);
+        return false;
+    }
+}
+/**
+ * The element that has the keyboard focus in the tree `anchor` lives in. `document.activeElement` is the module's
+ * host element for anything focused inside a shadow root, which is never one of the editor's fields.
+ */
+export function activeElementIn(anchor) {
+    try {
+        const rootNode = anchor?.getRootNode?.();
+        if (rootNode && (rootNode.nodeType === DOCUMENT_NODE || rootNode.nodeType === DOCUMENT_FRAGMENT_NODE)) {
+            return rootNode.activeElement ?? null;
+        }
+    }
+    catch (error) {
+        console.warn('[shadowDom] Could not tell which element has the focus:', error);
+    }
+    return typeof document === 'undefined' ? null : document.activeElement;
+}
+/**
+ * Calls `handler` when something scrolls and gives back the function that stops it. A scroll is not an event that
+ * leaves a shadow root, so a listener on the window only hears about the page being scrolled; to hear about the
+ * editor's own panels scrolling the listener goes on the shadow root too. Both are listened to while the event goes
+ * down (capture), as a scroll does not bubble.
+ */
+export function listenForScroll(anchor, handler, { passive = false } = {}) {
+    const targets = [];
+    if (typeof window !== 'undefined')
+        targets.push(window);
+    try {
+        const rootNode = anchor?.getRootNode?.();
+        if (rootNode?.nodeType === DOCUMENT_FRAGMENT_NODE)
+            targets.push(rootNode);
+    }
+    catch (error) {
+        console.warn('[shadowDom] Could not tell which tree to listen for scrolling in:', error);
+    }
+    for (const target of targets)
+        target.addEventListener('scroll', handler, { capture: true, passive });
+    return () => {
+        for (const target of targets)
+            target.removeEventListener('scroll', handler, true);
+    };
+}
+/** How many components use each popover layer, so the last one to leave can remove it. */
+const portalHostUsers = new WeakMap();
+/** The layers made here (a layer found already in place belongs to whoever made it). */
+const portalHostsMadeHere = new WeakSet();
+/**
+ * The layer a popover is drawn in when it must sit above everything else, found or made in the tree `anchor` lives in
+ * and shared by every component that asks for the same `id`. On a page it is a node at the end of the body; inside a
+ * module it is a node in the module's portal layer (or, failing that, in the shadow root), never in the customer's
+ * body. Give it back with `releasePortalHost` when the component goes away.
+ */
+export function acquirePortalHost(anchor, id, zIndex = '100000000') {
+    try {
+        const tree = treeOf(anchor);
+        if (!tree)
+            return null;
+        let host = tree.getElementById(id);
+        if (!host) {
+            host = document.createElement('div');
+            host.id = id;
+            host.style.position = 'relative';
+            host.style.zIndex = zIndex;
+            const parent = tree.nodeType === DOCUMENT_FRAGMENT_NODE
+                ? (tree.querySelector(MODULE_PORTAL_LAYER_SELECTOR) ?? tree)
+                : document.body;
+            parent.appendChild(host);
+            portalHostsMadeHere.add(host);
+        }
+        portalHostUsers.set(host, (portalHostUsers.get(host) ?? 0) + 1);
+        return host;
+    }
+    catch (error) {
+        console.error(`[shadowDom] Could not make the "${id}" layer for popovers:`, error);
+        return null;
+    }
+}
+/** Gives a layer from `acquirePortalHost` back; the last one to give it back removes it from the page. */
+export function releasePortalHost(host) {
+    if (!host)
+        return;
+    try {
+        const remaining = (portalHostUsers.get(host) ?? 1) - 1;
+        if (remaining > 0) {
+            portalHostUsers.set(host, remaining);
+            return;
+        }
+        portalHostUsers.delete(host);
+        if (portalHostsMadeHere.has(host)) {
+            portalHostsMadeHere.delete(host);
+            host.remove();
+        }
+    }
+    catch (error) {
+        console.error('[shadowDom] Could not remove the layer for popovers:', error);
+    }
+}
+/**
+ * The element a drag or a resize shows its cursor on: the host of the shadow root `anchor` lives in (the module the
+ * editor is in), or the page's body when it is not in a shadow root. The body of a customer's page is not the editor's
+ * to change, and an editor that sets a cursor there and then clears it also deletes the cursor the page had set.
+ */
+function pointerStyleElementOf(anchor) {
+    const rootNode = anchor?.getRootNode?.();
+    if (rootNode?.nodeType === DOCUMENT_FRAGMENT_NODE && rootNode.host) {
+        return rootNode.host;
+    }
+    return typeof document === 'undefined' ? null : document.body;
+}
+/**
+ * Shows `cursor` for as long as a drag or a resize lasts (and, unless told otherwise, stops text from being selected as
+ * the pointer moves). Gives back the function that puts back what was there before; it puts it back once, however
+ * often it is called, so it can be called from every way a gesture can end.
+ */
+export function lockPointerStyle(anchor, cursor, { blockTextSelection = true } = {}) {
+    try {
+        const styledElement = pointerStyleElementOf(anchor);
+        if (!styledElement)
+            return () => { };
+        const previousCursor = styledElement.style.cursor;
+        const previousUserSelect = styledElement.style.userSelect;
+        styledElement.style.cursor = cursor;
+        if (blockTextSelection)
+            styledElement.style.userSelect = 'none';
+        let isRestored = false;
+        return () => {
+            if (isRestored)
+                return;
+            isRestored = true;
+            styledElement.style.cursor = previousCursor;
+            if (blockTextSelection)
+                styledElement.style.userSelect = previousUserSelect;
+        };
+    }
+    catch (error) {
+        console.error('[shadowDom] Could not change the pointer for the drag:', error);
+        return () => { };
+    }
+}

package/dist/utils/vectorUtils.js

@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { readEditorStorageValue, writeEditorStorageValue } from './editorStorage';
 export const vectorCategories = {
     map: {
         'icons': 'Icons',
@@ -22,13 +23,14 @@ export const vectorCategories = {
         return 'Icons'; // Default category
     }
 };
+// Stored in the editor's own corner of localStorage (see editorStorage.ts), not under a key the customer's page may use.
 const RECENT_VECTORS_KEY = 'recent_vectors';
 const MAX_RECENT_VECTORS = 3;
 export const recentVectorsStore = writable([]);
 export const vectorUtils = {
     getRecentVectors() {
         try {
-            const stored = localStorage.getItem(RECENT_VECTORS_KEY);
+            const stored = readEditorStorageValue(RECENT_VECTORS_KEY);
             return stored ? JSON.parse(stored) : [];
         }
         catch (error) {
@@ -47,7 +49,7 @@ export const vectorUtils = {
                 },
                 ...filteredVectors
             ].slice(0, MAX_RECENT_VECTORS);
-            localStorage.setItem(RECENT_VECTORS_KEY, JSON.stringify(newRecentVectors));
+            writeEditorStorageValue(RECENT_VECTORS_KEY, JSON.stringify(newRecentVectors));
             recentVectorsStore.set(newRecentVectors);
             return newRecentVectors;
         }
@@ -60,7 +62,7 @@ export const vectorUtils = {
         try {
             const recentVectors = this.getRecentVectors();
             const filteredVectors = recentVectors.filter(v => v.name !== name);
-            localStorage.setItem(RECENT_VECTORS_KEY, JSON.stringify(filteredVectors));
+            writeEditorStorageValue(RECENT_VECTORS_KEY, JSON.stringify(filteredVectors));
             return filteredVectors;
         }
         catch (error) {

package/dist/utils/visibilityCondition.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Decides, from the condition a widget's schema gives a control (`autoplay === true`), whether the control is shown.
+ *
+ * The condition is text that comes with a widget, written by whoever made the widget, and the editor can run inside
+ * a customer's own page. So it is never handed to `eval` or `new Function`: that would run the widget author's code
+ * with the rights of the customer's page (its cookies, its logged-in visitor, its API calls), and it fails outright
+ * under a Content-Security-Policy that does not allow `'unsafe-eval'`. It is read here instead, by a small parser for
+ * the part of JavaScript a condition is made of:
+ *
+ *   - values: numbers, 'strings' and "strings", true, false, null, undefined, and [lists];
+ *   - the settings the condition depends on, by name (`autoplay`), with `.name` and `[key]` to look inside them;
+ *   - comparisons (`===` `!==` `==` `!=` `<` `<=` `>` `>=`), `&&`, `||`, `??`, `!`, `+ - * / %`, `a ? b : c`, brackets;
+ *   - the methods `includes`, `indexOf`, `startsWith`, `endsWith`, `toLowerCase`, `toUpperCase` and `trim`.
+ *
+ * It can read the values it is given and nothing else: no globals (`window`, `document`, `Function`), no other call,
+ * no assignment, no template string, no `constructor` or `__proto__`.
+ */
+/** The current value of each setting a condition may name. */
+export type ConditionValues = Record<string, unknown>;
+/** A condition that cannot be read or cannot be worked out. */
+export declare class ConditionError extends Error {
+    constructor(message: string);
+}
+/** Longer than any real condition; a limit so that a hostile schema cannot make the editor work for long. */
+export declare const MAX_CONDITION_LENGTH = 1000;
+/** How deeply brackets, lists, `!`s and `?:` may be nested; a limit that keeps the parser from running out of stack. */
+export declare const MAX_CONDITION_DEPTH = 40;
+/**
+ * Works out a condition from the values of the settings it names, the way JavaScript would.
+ *
+ * @throws {ConditionError} when the condition cannot be read, names something that is not in `values`, or cannot be
+ *   worked out (looking inside a setting that has no value, say).
+ */
+export declare function evaluateCondition(condition: string, values: ConditionValues): unknown;
+/**
+ * Whether a control whose condition is `condition` is shown. A condition the editor cannot use (it is not valid, or
+ * names a setting it does not depend on) keeps the control shown: a mistake in a widget's schema must not hide one of
+ * its settings for good. The problem is reported in the console, once per condition.
+ */
+export declare function conditionHolds(condition: string, values: ConditionValues): boolean;