@widgetic/editor 4.0.10 → 4.0.11

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;

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 {};