@widgetic/editor 4.0.10 → 4.0.11

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;