@widgetic/editor 4.0.10 → 4.1.0

package/dist/utils/itemReorder.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Reordering a list of items by dragging a handle.
+ *
+ * This replaces @shopify/draggable, which cannot work inside a shadow root (the editor runs in one when it is a
+ * module on a customer's page):
+ *  - it listens on the `document`, where every event that comes from inside a shadow root has the shadow host as its
+ *    target, so it never finds the list it was given and no drag ever starts;
+ *  - the events it makes itself do not leave the shadow root, so its own listeners on the `document` never hear them;
+ *  - it adds classes to the page's `<body>`, switches text selection off on it, appends its floating copy of the item
+ *    to it, and leaves a screen reader region in it that stays after the editor is gone.
+ *
+ * This one listens on the list itself, keeps hold of the pointer with pointer capture (so the drag carries on over the
+ * preview frame and outside the editor), works out where an item would be dropped from where the items are on the
+ * screen, and leaves the page it runs in alone. It never moves the items itself: the list changes only when the
+ * caller changes the data the list is drawn from, in `onReorder`.
+ */
+/** How far (px) the pointer must move from where it was pressed before the press counts as a drag and not a click. */
+export declare const DRAG_START_DISTANCE_PX = 4;
+/** The height (px) of the copy of the item that follows the pointer. */
+export declare const MIRROR_HEIGHT_PX = 56;
+/** How close (px) to the top or bottom edge of the scrolling area the pointer must be for the area to start scrolling. */
+export declare const EDGE_SCROLL_ZONE_PX = 56;
+/** The most (px) the scrolling area moves in one frame, reached when the pointer is at or beyond the edge. */
+export declare const EDGE_SCROLL_MAX_STEP_PX = 18;
+/** The classes put on the list and its items while one is dragged; the editor's stylesheet draws them. */
+export declare const REORDER_CLASSES: {
+    /** On the list for as long as an item is being dragged. */
+    readonly list: "is-reordering";
+    /** On the item being dragged. */
+    readonly source: "is-reorder-source";
+    /** On the item the dragged one would be dropped in front of. */
+    readonly dropBefore: "is-reorder-drop-before";
+    /** On the last item, when the dragged one would be dropped behind it. */
+    readonly dropAfter: "is-reorder-drop-after";
+    /** On the floating copy of the dragged item. */
+    readonly mirror: "reorder-mirror";
+};
+/** The top and height of an item on the screen. */
+export interface VerticalBox {
+    top: number;
+    height: number;
+}
+/**
+ * Where a dragged item ends up when it is dropped with the pointer at `pointerY`: its index in the list once it has
+ * been taken out and put back. `otherItems` are the boxes of the items on the screen without the dragged one. The
+ * dragged item goes after every item whose middle is above the pointer.
+ */
+export declare function dropIndexForPointer(otherItems: readonly VerticalBox[], pointerY: number): number;
+/**
+ * How far (px) to scroll the area that holds the list in this frame: upwards (negative) when the pointer is in the
+ * top `zone` of the area or above it, downwards (positive) in the bottom `zone` or below it, faster the nearer the
+ * edge, and 0 anywhere else.
+ */
+export declare function edgeScrollStep(areaTop: number, areaBottom: number, pointerY: number, zone?: number, maxStep?: number): number;
+/**
+ * A copy of `items` with the item at `oldIndex` moved to `newIndex` (its index in the copy). When either index is not
+ * a place in the list, the copy keeps the original order.
+ */
+export declare function moveListItem<ItemType>(items: readonly ItemType[], oldIndex: number, newIndex: number): ItemType[];
+/** What `reorderableList` needs to know about the list. */
+export interface ItemReorderOptions {
+    /** CSS selector of one item. Items are direct children of the list. */
+    itemSelector: string;
+    /** CSS selector of the part of an item that starts a drag when it is pressed. */
+    handleSelector: string;
+    /** The drag began (the pointer moved far enough from where it was pressed). The list is not changed yet. */
+    onDragStart?: (drag: {
+        item: HTMLElement;
+        index: number;
+    }) => void;
+    /** The item was dropped at another place in the list. Change the data the list is drawn from here. */
+    onReorder: (move: {
+        item: HTMLElement;
+        oldIndex: number;
+        newIndex: number;
+    }) => void;
+    /** The drag is over: dropped (`reordered` tells if the order changed), cancelled with Escape, or the list went away. */
+    onDragEnd?: (outcome: {
+        reordered: boolean;
+    }) => void;
+}
+/**
+ * Svelte action that makes the direct children of a list reorderable by dragging their handle:
+ * `<div use:reorderableList={{ itemSelector, handleSelector, onReorder }}>`.
+ */
+export declare function reorderableList(list: HTMLElement, initialOptions: ItemReorderOptions): {
+    /** Svelte calls this when the options change; the callbacks of the new options are the ones used from then on. */
+    update(nextOptions: ItemReorderOptions): void;
+    destroy(): void;
+};

package/dist/utils/itemReorder.js

@@ -0,0 +1,354 @@
+/**
+ * Reordering a list of items by dragging a handle.
+ *
+ * This replaces @shopify/draggable, which cannot work inside a shadow root (the editor runs in one when it is a
+ * module on a customer's page):
+ *  - it listens on the `document`, where every event that comes from inside a shadow root has the shadow host as its
+ *    target, so it never finds the list it was given and no drag ever starts;
+ *  - the events it makes itself do not leave the shadow root, so its own listeners on the `document` never hear them;
+ *  - it adds classes to the page's `<body>`, switches text selection off on it, appends its floating copy of the item
+ *    to it, and leaves a screen reader region in it that stays after the editor is gone.
+ *
+ * This one listens on the list itself, keeps hold of the pointer with pointer capture (so the drag carries on over the
+ * preview frame and outside the editor), works out where an item would be dropped from where the items are on the
+ * screen, and leaves the page it runs in alone. It never moves the items itself: the list changes only when the
+ * caller changes the data the list is drawn from, in `onReorder`.
+ */
+import { acquirePortalHost, releasePortalHost } from './shadowDom';
+/** How far (px) the pointer must move from where it was pressed before the press counts as a drag and not a click. */
+export const DRAG_START_DISTANCE_PX = 4;
+/** The height (px) of the copy of the item that follows the pointer. */
+export const MIRROR_HEIGHT_PX = 56;
+/** How close (px) to the top or bottom edge of the scrolling area the pointer must be for the area to start scrolling. */
+export const EDGE_SCROLL_ZONE_PX = 56;
+/** The most (px) the scrolling area moves in one frame, reached when the pointer is at or beyond the edge. */
+export const EDGE_SCROLL_MAX_STEP_PX = 18;
+/** How long (ms) a click right after a drag is ignored, so letting go of the handle does not also open the item. */
+const CLICK_AFTER_DRAG_GRACE_MS = 50;
+/** The id of the layer, in the popover layer of the tree the list is in, that the floating copy of the item is drawn in. */
+const MIRROR_LAYER_ID = 'widgetic-reorder-mirror-layer';
+/** The classes put on the list and its items while one is dragged; the editor's stylesheet draws them. */
+export const REORDER_CLASSES = {
+    /** On the list for as long as an item is being dragged. */
+    list: 'is-reordering',
+    /** On the item being dragged. */
+    source: 'is-reorder-source',
+    /** On the item the dragged one would be dropped in front of. */
+    dropBefore: 'is-reorder-drop-before',
+    /** On the last item, when the dragged one would be dropped behind it. */
+    dropAfter: 'is-reorder-drop-after',
+    /** On the floating copy of the dragged item. */
+    mirror: 'reorder-mirror'
+};
+/**
+ * Where a dragged item ends up when it is dropped with the pointer at `pointerY`: its index in the list once it has
+ * been taken out and put back. `otherItems` are the boxes of the items on the screen without the dragged one. The
+ * dragged item goes after every item whose middle is above the pointer.
+ */
+export function dropIndexForPointer(otherItems, pointerY) {
+    let dropIndex = 0;
+    for (const box of otherItems) {
+        if (box.top + box.height / 2 < pointerY)
+            dropIndex += 1;
+    }
+    return dropIndex;
+}
+/**
+ * How far (px) to scroll the area that holds the list in this frame: upwards (negative) when the pointer is in the
+ * top `zone` of the area or above it, downwards (positive) in the bottom `zone` or below it, faster the nearer the
+ * edge, and 0 anywhere else.
+ */
+export function edgeScrollStep(areaTop, areaBottom, pointerY, zone = EDGE_SCROLL_ZONE_PX, maxStep = EDGE_SCROLL_MAX_STEP_PX) {
+    if (!(zone > 0))
+        return 0;
+    const depthIntoTopZone = areaTop + zone - pointerY;
+    if (depthIntoTopZone > 0)
+        return -Math.round(maxStep * Math.min(1, depthIntoTopZone / zone)) || 0;
+    const depthIntoBottomZone = pointerY - (areaBottom - zone);
+    if (depthIntoBottomZone > 0)
+        return Math.round(maxStep * Math.min(1, depthIntoBottomZone / zone)) || 0;
+    return 0;
+}
+/**
+ * A copy of `items` with the item at `oldIndex` moved to `newIndex` (its index in the copy). When either index is not
+ * a place in the list, the copy keeps the original order.
+ */
+export function moveListItem(items, oldIndex, newIndex) {
+    const reordered = [...items];
+    const isPlaceInList = (index) => Number.isInteger(index) && index >= 0 && index < items.length;
+    if (!isPlaceInList(oldIndex) || !isPlaceInList(newIndex))
+        return reordered;
+    const [movedItem] = reordered.splice(oldIndex, 1);
+    reordered.splice(newIndex, 0, movedItem);
+    return reordered;
+}
+/** The nearest ancestor that scrolls vertically, looking out of shadow roots too; `null` when the page itself scrolls. */
+function findScrollingAncestor(start) {
+    let current = start.parentNode;
+    while (current) {
+        if (current instanceof HTMLElement) {
+            const { overflowY } = getComputedStyle(current);
+            if ((overflowY === 'auto' || overflowY === 'scroll') && current.scrollHeight > current.clientHeight) {
+                return current;
+            }
+        }
+        current = current.parentNode ?? (current instanceof ShadowRoot ? current.host : null);
+    }
+    return null;
+}
+/**
+ * Svelte action that makes the direct children of a list reorderable by dragging their handle:
+ * `<div use:reorderableList={{ itemSelector, handleSelector, onReorder }}>`.
+ */
+export function reorderableList(list, initialOptions) {
+    let options = initialOptions;
+    let press = null;
+    const view = list.ownerDocument.defaultView ?? window;
+    /** Runs a callback of the caller; one that throws must not leave a drag half done. */
+    function runCallback(name, callback) {
+        try {
+            callback();
+        }
+        catch (error) {
+            console.error(`[itemReorder] The ${name} callback failed:`, error);
+        }
+    }
+    function currentItems() {
+        return Array.from(list.children).filter((child) => child instanceof HTMLElement && child.matches(options.itemSelector));
+    }
+    /** The copy of the item that follows the pointer, drawn in the popover layer so no ancestor can clip it. */
+    function createMirror(current, itemBox) {
+        const mirrorLayer = acquirePortalHost(list, MIRROR_LAYER_ID);
+        if (!mirrorLayer)
+            return;
+        const mirror = current.item.cloneNode(true);
+        mirror.classList.add(REORDER_CLASSES.mirror, 'widgetic-colors', 'widgetic-radius');
+        // The copy is only a picture: no ids that clash with the real item's, nothing to focus or press.
+        mirror.removeAttribute('data-id');
+        mirror.querySelectorAll('[id]').forEach((element) => element.removeAttribute('id'));
+        mirror.setAttribute('aria-hidden', 'true');
+        mirror.setAttribute('inert', '');
+        Object.assign(mirror.style, {
+            position: 'fixed',
+            left: '0',
+            top: '0',
+            width: `${itemBox.width}px`,
+            height: `${MIRROR_HEIGHT_PX}px`,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            zIndex: '1000'
+        });
+        mirrorLayer.appendChild(mirror);
+        current.mirror = mirror;
+        current.mirrorLayer = mirrorLayer;
+    }
+    function positionMirror(current) {
+        if (!current.mirror)
+            return;
+        const left = current.lastX - current.grabOffsetX;
+        const top = current.lastY - MIRROR_HEIGHT_PX / 2;
+        current.mirror.style.transform = `translate3d(${Math.round(left)}px, ${Math.round(top)}px, 0)`;
+    }
+    /** Works out where the item would be dropped, and draws a line there. */
+    function updateDropTarget(current) {
+        const items = currentItems();
+        const otherItems = items.filter((item) => item !== current.item);
+        const boxes = otherItems.map((item) => {
+            const { top, height } = item.getBoundingClientRect();
+            return { top, height };
+        });
+        current.dropIndex = dropIndexForPointer(boxes, current.lastY);
+        for (const item of items) {
+            item.classList.remove(REORDER_CLASSES.dropBefore, REORDER_CLASSES.dropAfter);
+        }
+        if (otherItems.length === 0 || current.dropIndex === current.sourceIndex)
+            return;
+        if (current.dropIndex < otherItems.length) {
+            otherItems[current.dropIndex].classList.add(REORDER_CLASSES.dropBefore);
+        }
+        else {
+            otherItems[otherItems.length - 1].classList.add(REORDER_CLASSES.dropAfter);
+        }
+    }
+    /** Scrolls the area that holds the list while the pointer is near its top or bottom edge. Runs every frame of a drag. */
+    function scrollNearEdges() {
+        const current = press;
+        if (!current?.dragging)
+            return;
+        try {
+            const area = current.scroller
+                ? current.scroller.getBoundingClientRect()
+                : { top: 0, bottom: view.innerHeight };
+            const step = edgeScrollStep(area.top, area.bottom, current.lastY);
+            if (step !== 0) {
+                if (current.scroller)
+                    current.scroller.scrollTop += step;
+                else
+                    view.scrollBy(0, step);
+                updateDropTarget(current);
+            }
+        }
+        catch (error) {
+            console.warn('[itemReorder] Could not scroll while dragging:', error);
+        }
+        current.scrollFrame = view.requestAnimationFrame(scrollNearEdges);
+    }
+    function beginDragging(current) {
+        current.dragging = true;
+        current.sourceIndex = currentItems().indexOf(current.item);
+        current.dropIndex = current.sourceIndex;
+        const itemBox = current.item.getBoundingClientRect();
+        current.grabOffsetX = Math.min(Math.max(current.startX - itemBox.left, 0), itemBox.width);
+        current.scroller = findScrollingAncestor(list);
+        // The copy is made first, so it does not carry the "this is the one being dragged" class.
+        createMirror(current, itemBox);
+        list.classList.add(REORDER_CLASSES.list);
+        current.item.classList.add(REORDER_CLASSES.source);
+        runCallback('onDragStart', () => options.onDragStart?.({ item: current.item, index: current.sourceIndex }));
+        current.scrollFrame = view.requestAnimationFrame(scrollNearEdges);
+    }
+    /** Lets a click right after a drag pass unseen: it would open or close the item the handle belongs to. */
+    function ignoreClickAfterDrag() {
+        const ignore = (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+        };
+        list.addEventListener('click', ignore, { capture: true, once: true });
+        view.setTimeout(() => list.removeEventListener('click', ignore, { capture: true }), CLICK_AFTER_DRAG_GRACE_MS);
+    }
+    /** Ends the press, whether the item was dropped or the drag was cancelled, and puts everything back the way it was. */
+    function endPress(outcome) {
+        const current = press;
+        if (!current)
+            return;
+        // First of all: whatever happens below, this press is over and nothing can end it a second time.
+        press = null;
+        view.removeEventListener('pointermove', handlePointerMove);
+        view.removeEventListener('pointerup', handlePointerUp);
+        view.removeEventListener('pointercancel', handlePointerCancel);
+        view.removeEventListener('keydown', handleKeyDown, true);
+        if (current.scrollFrame !== null)
+            view.cancelAnimationFrame(current.scrollFrame);
+        try {
+            current.handle.releasePointerCapture(current.pointerId);
+        }
+        catch {
+            // The pointer was not captured any more (the handle left the page, or the browser let go): nothing to release.
+        }
+        if (!current.dragging)
+            return;
+        list.classList.remove(REORDER_CLASSES.list);
+        current.item.classList.remove(REORDER_CLASSES.source);
+        for (const item of currentItems()) {
+            item.classList.remove(REORDER_CLASSES.dropBefore, REORDER_CLASSES.dropAfter);
+        }
+        current.mirror?.remove();
+        releasePortalHost(current.mirrorLayer);
+        const hasMoved = outcome === 'dropped' && current.dropIndex !== current.sourceIndex;
+        ignoreClickAfterDrag();
+        if (hasMoved) {
+            runCallback('onReorder', () => options.onReorder({
+                item: current.item,
+                oldIndex: current.sourceIndex,
+                newIndex: current.dropIndex
+            }));
+        }
+        runCallback('onDragEnd', () => options.onDragEnd?.({ reordered: hasMoved }));
+    }
+    function handlePointerDown(event) {
+        try {
+            // One press at a time: a second finger or a second button does not start another drag.
+            if (press || event.button !== 0 || !event.isPrimary)
+                return;
+            const target = event.target;
+            if (!(target instanceof Element))
+                return;
+            const handle = target.closest(options.handleSelector);
+            if (!(handle instanceof HTMLElement) || !list.contains(handle))
+                return;
+            const item = handle.closest(options.itemSelector);
+            if (!(item instanceof HTMLElement) || item.parentElement !== list)
+                return;
+            press = {
+                pointerId: event.pointerId,
+                startX: event.clientX,
+                startY: event.clientY,
+                lastX: event.clientX,
+                lastY: event.clientY,
+                item,
+                handle,
+                dragging: false,
+                sourceIndex: -1,
+                dropIndex: -1,
+                grabOffsetX: 0,
+                mirror: null,
+                mirrorLayer: null,
+                scroller: null,
+                scrollFrame: null
+            };
+            // Keep getting this pointer wherever it goes: over the preview frame, outside the editor, outside the window.
+            try {
+                handle.setPointerCapture(event.pointerId);
+            }
+            catch (captureError) {
+                console.warn('[itemReorder] Could not capture the pointer; the drag stops at the edge of the page:', captureError);
+            }
+            view.addEventListener('pointermove', handlePointerMove);
+            view.addEventListener('pointerup', handlePointerUp);
+            view.addEventListener('pointercancel', handlePointerCancel);
+            view.addEventListener('keydown', handleKeyDown, true);
+        }
+        catch (error) {
+            console.error('[itemReorder] Could not start the press:', error);
+            endPress('cancelled');
+        }
+    }
+    function handlePointerMove(event) {
+        const current = press;
+        if (!current || event.pointerId !== current.pointerId)
+            return;
+        try {
+            current.lastX = event.clientX;
+            current.lastY = event.clientY;
+            if (!current.dragging) {
+                const distance = Math.hypot(event.clientX - current.startX, event.clientY - current.startY);
+                if (distance < DRAG_START_DISTANCE_PX)
+                    return;
+                beginDragging(current);
+            }
+            positionMirror(current);
+            updateDropTarget(current);
+        }
+        catch (error) {
+            console.error('[itemReorder] Could not follow the pointer:', error);
+            endPress('cancelled');
+        }
+    }
+    function handlePointerUp(event) {
+        if (!press || event.pointerId !== press.pointerId)
+            return;
+        endPress('dropped');
+    }
+    function handlePointerCancel(event) {
+        if (!press || event.pointerId !== press.pointerId)
+            return;
+        endPress('cancelled');
+    }
+    function handleKeyDown(event) {
+        if (event.key !== 'Escape' || !press)
+            return;
+        event.preventDefault();
+        endPress('cancelled');
+    }
+    list.addEventListener('pointerdown', handlePointerDown);
+    return {
+        /** Svelte calls this when the options change; the callbacks of the new options are the ones used from then on. */
+        update(nextOptions) {
+            options = nextOptions;
+        },
+        destroy() {
+            list.removeEventListener('pointerdown', handlePointerDown);
+            endPress('cancelled');
+        }
+    };
+}

package/dist/utils/recentColors.js

@@ -1,9 +1,11 @@
+import { readEditorStorageValue, writeEditorStorageValue } from './editorStorage';
+// Stored in the editor's own corner of localStorage (see editorStorage.ts), not under a key the customer's page may use.
 const STORAGE_KEY = 'recentColors';
 const MAX_COLORS = 12;
 export const recentColorsUtil = {
     getRecentColors() {
         try {
-            const stored = localStorage.getItem(STORAGE_KEY);
+            const stored = readEditorStorageValue(STORAGE_KEY);
             return stored ? JSON.parse(stored) : [];
         }
         catch (error) {
@@ -51,7 +53,7 @@ export const recentColorsUtil = {
             // Trim to max size
             colors = colors.slice(0, MAX_COLORS);
             // Save to localStorage
-            localStorage.setItem(STORAGE_KEY, JSON.stringify(colors));
+            writeEditorStorageValue(STORAGE_KEY, JSON.stringify(colors));
             // console.log('Final colors list:', colors);
             return colors;
         }

package/dist/utils/richTextPreview.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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}
+ */
+/** A piece of rich text: a plain text, or an element with the few things the preview keeps of it. */
+export type PreviewNode = string | PreviewElement;
+export interface PreviewElement {
+    /** The tag name in lower case, as the HTML parser reports it. */
+    tag: string;
+    /** The element's style, as the browser reads it: `[property, value]`, property in lower case (`font-size`). */
+    declarations: Array<[property: string, value: string]>;
+    /** The element's `data-text-style` attribute, or null when it has none. */
+    textStyle: string | null;
+    children: PreviewNode[];
+}
+/** Whether one style declaration may go into the preview. */
+export declare function isAllowedDeclaration(property: string, value: string): boolean;
+/** HTML for `{@html}` from the description of a rich text. Everything in it is escaped or on the lists above. */
+export declare function renderPreviewNodes(nodes: PreviewNode[]): string;
+/**
+ * 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 declare function parseRichText(html: string): PreviewNode[];
+/**
+ * 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 declare function createPreviewHtml(text: string): string;