edytor 1.0.0-rc.2 → 1.0.0

package/dist/selection/domSelection.js

@@ -1,130 +1,78 @@
-const hasSelectionApi = (root) => typeof root.getSelection === 'function';
-const isShadowRoot = (root) => typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot;
-const getOwnerDocument = (node) => node?.ownerDocument ?? (typeof document === 'undefined' ? null : document);
-const getDocumentSelection = (node) => {
-    const ownerDocument = getOwnerDocument(node);
-    return ownerDocument?.defaultView?.getSelection?.() ?? ownerDocument?.getSelection?.() ?? null;
-};
-export const getDomSelection = (node) => {
+const ownerOf = (node) => node?.ownerDocument ?? (typeof document === 'undefined' ? null : document);
+/** The shadow root holding `node`, if any. */
+const shadowOf = (node) => {
     const root = node?.getRootNode();
-    if (isShadowRoot(root) && hasSelectionApi(root)) {
-        const selection = root.getSelection();
-        if (selection) {
-            return selection;
-        }
-    }
-    return getDocumentSelection(node);
-};
-export const getActiveElement = (node) => {
-    const root = node?.getRootNode();
-    if (isShadowRoot(root)) {
-        return root.activeElement ?? getOwnerDocument(node)?.activeElement ?? null;
-    }
-    return getOwnerDocument(node)?.activeElement ?? null;
+    return typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot ? root : null;
 };
+const documentSelection = (node) => ownerOf(node)?.getSelection() ?? null;
+export const getDomSelection = (node) => shadowOf(node)?.getSelection?.() ?? documentSelection(node);
+export const getActiveElement = (node) => shadowOf(node)?.activeElement ?? ownerOf(node)?.activeElement ?? null;
 export const clearDomSelection = (node) => {
     getDomSelection(node)?.removeAllRanges();
 };
-export const createDomRange = (node) => {
-    const ownerDocument = getOwnerDocument(node);
-    if (!ownerDocument) {
-        throw new Error('Cannot create a DOM range without an owner document');
-    }
-    return ownerDocument.createRange();
+/**
+ * The caret point under (`x`, `y`): `caretPositionFromPoint` (Firefox,
+ * Chromium 128, Safari 26.2), else `caretRangeFromPoint` (the supported
+ * Chromium and Safari before those).
+ */
+export const caretAtPoint = (doc, x, y) => {
+    const at = doc;
+    const position = at.caretPositionFromPoint?.(x, y);
+    if (position?.offsetNode)
+        return { node: position.offsetNode, offset: position.offset };
+    const range = at.caretRangeFromPoint?.(x, y);
+    return range ? { node: range.startContainer, offset: range.startOffset } : null;
 };
-const isSelectionCollapsed = (selection) => selection.anchorNode === selection.focusNode && selection.anchorOffset === selection.focusOffset;
-const createDomSelectionSnapshot = (selection) => ({
-    anchorNode: selection.anchorNode,
-    anchorOffset: selection.anchorOffset,
-    direction: selection.direction,
-    focusNode: selection.focusNode,
-    focusOffset: selection.focusOffset,
-    isCollapsed: isSelectionCollapsed(selection),
-    rangeCount: selection.rangeCount,
-    getRangeAt: (index) => selection.getRangeAt(index),
-    nativeSelection: selection,
-    toString: () => selection.toString(),
-    type: selection.type
-});
-export const createDomSelectionSnapshotFromRange = (range, nativeSelection = null) => ({
+/** A range in `node`'s document (a node always has one). */
+export const createDomRange = (node) => ownerOf(node).createRange();
+/** A snapshot of one range, forward. */
+export const createDomSelectionSnapshotFromRange = (range) => ({
     anchorNode: range.startContainer,
     anchorOffset: range.startOffset,
-    direction: 'forward',
     focusNode: range.endContainer,
     focusOffset: range.endOffset,
     isCollapsed: range.collapsed,
     rangeCount: 1,
-    getRangeAt: (index) => {
-        if (index !== 0) {
-            throw new Error(`Selection range ${index} is unavailable`);
-        }
-        return range;
-    },
-    nativeSelection,
-    toString: () => range.toString(),
-    type: range.collapsed ? 'Caret' : 'Range'
+    getRangeAt: () => range
 });
-const createRangeFromStaticRange = (staticRange) => {
-    const range = createDomRange(staticRange.startContainer);
-    range.setStart(staticRange.startContainer, staticRange.startOffset);
-    range.setEnd(staticRange.endContainer, staticRange.endOffset);
-    return range;
-};
-const isNodeInside = (root, target) => root === target || root.contains(target);
-const getContainedRanges = (selection, container) => {
+/**
+ * A snapshot of `selection`. Several ranges inside `container` are read as
+ * their bounding range, and the DOM is canonicalized to it too, so what the
+ * user sees matches what the model derives (the editor has no multi-range
+ * model); one is read alone.
+ */
+const snapshotOf = (selection, container) => {
     const ranges = [];
-    for (let index = 0; index < selection.rangeCount; index++) {
+    for (let index = 0; selection.rangeCount > 1 && index < selection.rangeCount; index++) {
         const range = selection.getRangeAt(index);
         if (!container ||
-            (isNodeInside(container, range.startContainer) && isNodeInside(container, range.endContainer))) {
+            (container.contains(range.startContainer) && container.contains(range.endContainer)))
             ranges.push(range);
-        }
-    }
-    return ranges;
-};
-const createDomSelectionSnapshotFromMultiRange = (selection, container) => {
-    if (selection.rangeCount <= 1) {
-        return null;
-    }
-    const ranges = getContainedRanges(selection, container);
-    if (ranges.length === 0) {
-        return null;
     }
-    if (ranges.length === 1) {
-        return createDomSelectionSnapshotFromRange(ranges[0], selection);
-    }
-    let firstRange = ranges[0];
-    let lastRange = ranges[0];
-    for (const range of ranges.slice(1)) {
-        if (range.compareBoundaryPoints(Range.START_TO_START, firstRange) < 0) {
-            firstRange = range;
-        }
-        if (range.compareBoundaryPoints(Range.END_TO_END, lastRange) > 0) {
-            lastRange = range;
-        }
-    }
-    const combinedRange = createDomRange(firstRange.startContainer);
-    combinedRange.setStart(firstRange.startContainer, firstRange.startOffset);
-    combinedRange.setEnd(lastRange.endContainer, lastRange.endOffset);
-    // Not just a read: a multi-range selection is canonicalized to its
-    // bounding range in the DOM too, so what the user sees matches the
-    // snapshot the model derives (the editor has no multi-range model).
-    selection.removeAllRanges();
-    selection.addRange(combinedRange);
-    return createDomSelectionSnapshotFromRange(combinedRange, selection);
-};
-const getComposedRangeSnapshot = (root, selection) => {
-    if (typeof selection?.getComposedRanges !== 'function') {
-        return null;
-    }
-    const [staticRange] = selection.getComposedRanges({ shadowRoots: [root] });
-    if (!staticRange ||
-        !root.contains(staticRange.startContainer) ||
-        !root.contains(staticRange.endContainer)) {
-        return null;
-    }
-    const range = createRangeFromStaticRange(staticRange);
-    return createDomSelectionSnapshotFromRange(range, selection);
+    if (ranges.length === 1)
+        return createDomSelectionSnapshotFromRange(ranges[0]);
+    if (ranges.length > 1) {
+        const [first, last] = ranges.reduce(([first, last], range) => [
+            range.compareBoundaryPoints(Range.START_TO_START, first) < 0 ? range : first,
+            range.compareBoundaryPoints(Range.END_TO_END, last) > 0 ? range : last
+        ], [ranges[0], ranges[0]]);
+        const bounds = createDomRange(first.startContainer);
+        bounds.setStart(first.startContainer, first.startOffset);
+        bounds.setEnd(last.endContainer, last.endOffset);
+        selection.removeAllRanges();
+        selection.addRange(bounds);
+        return createDomSelectionSnapshotFromRange(bounds);
+    }
+    const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
+    return {
+        anchorNode,
+        anchorOffset,
+        focusNode,
+        focusOffset,
+        isCollapsed: anchorNode === focusNode && anchorOffset === focusOffset,
+        rangeCount: selection.rangeCount,
+        getRangeAt: (index) => selection.getRangeAt(index)
+    };
 };
 /**
  * Scroll the caret into view after a programmatic selection write.
@@ -144,87 +92,66 @@ const getComposedRangeSnapshot = (root, selection) => {
  *   `block:'nearest'` otherwise still nudges scroll containers.
  */
 export const scrollCaretIntoView = (root) => {
-    if (!root) {
-        return;
-    }
-    const selection = getDomSelection(root);
+    const selection = root && getDomSelection(root);
     const focusNode = selection?.focusNode;
-    if (!selection || !focusNode || selection.rangeCount === 0 || !root.contains(focusNode)) {
+    if (!selection || !focusNode || selection.rangeCount === 0 || !root.contains(focusNode))
         return;
-    }
-    const activeElement = getActiveElement(root);
-    if (activeElement !== root && !(activeElement && root.contains(activeElement))) {
+    const active = getActiveElement(root);
+    if (!active || !root.contains(active))
         return;
-    }
-    // Collapse a scratch range at the FOCUS endpoint so a backward range
-    // scrolls to the moving edge, and collapsed carets get the exact
-    // caret box rather than the element box. The offset is clamped — a
-    // foreign DOM mutation can leave the selection pointing past a
-    // shrunken node, and `setStart` throws on out-of-bounds offsets.
-    const caretRange = createDomRange(focusNode);
-    const maxOffset = focusNode instanceof Element ? focusNode.childNodes.length : (focusNode.nodeValue?.length ?? 0);
-    caretRange.setStart(focusNode, Math.min(selection.focusOffset, maxOffset));
-    caretRange.collapse(true);
     const element = focusNode instanceof Element ? focusNode : focusNode.parentElement;
-    if (!element) {
+    if (!element)
         return;
-    }
-    // Optional-chained: non-layout environments (jsdom) don't implement
-    // range rects — the element box is the fallback in real browsers too
-    // when the caret rect comes back empty.
-    const caretRect = caretRange.getBoundingClientRect?.() ?? null;
-    const box = caretRect && (caretRect.top !== 0 || caretRect.bottom !== 0)
-        ? caretRect
-        : element.getBoundingClientRect();
-    const view = element.ownerDocument.defaultView;
-    const viewportHeight = view?.innerHeight ?? element.ownerDocument.documentElement.clientHeight;
-    const viewportWidth = view?.innerWidth ?? element.ownerDocument.documentElement.clientWidth;
-    const insideViewport = box.top >= 0 && box.bottom <= viewportHeight && box.left >= 0 && box.right <= viewportWidth;
-    // The viewport check alone is not enough — an `overflow:auto/scroll/
-    // hidden` ancestor clips the caret while it stays inside the window
-    // viewport (the common "editor inside a scrollable pane" case). Walk
-    // the ancestor chain; any scrollable clip counts as out-of-view.
-    let clippedByScroller = false;
-    if (insideViewport && view?.getComputedStyle) {
-        for (let ancestor = element.parentElement; ancestor && ancestor !== element.ownerDocument.documentElement; ancestor = ancestor.parentElement) {
-            const style = view.getComputedStyle(ancestor);
-            const overflow = `${style.overflow} ${style.overflowX} ${style.overflowY}`;
-            if (!/(auto|scroll|hidden)/.test(overflow)) {
-                continue;
-            }
-            const rect = ancestor.getBoundingClientRect();
-            if (box.top < rect.top ||
-                box.bottom > rect.bottom ||
-                box.left < rect.left ||
-                box.right > rect.right) {
-                clippedByScroller = true;
-                break;
-            }
-        }
-    }
-    if (insideViewport && !clippedByScroller) {
-        return;
-    }
-    element.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+    // A scratch range collapsed at the FOCUS endpoint: a backward range
+    // scrolls to the moving edge, a caret gets its exact box. The offset is
+    // clamped — a foreign DOM mutation can leave the selection past a
+    // shrunken node, and `setStart` throws out of bounds.
+    const caret = createDomRange(focusNode);
+    const max = focusNode instanceof Element ? focusNode.childNodes.length : (focusNode.nodeValue?.length ?? 0);
+    caret.setStart(focusNode, Math.min(selection.focusOffset, max));
+    caret.collapse(true);
+    // Optional-chained: jsdom has no range rects; an empty caret rect reads
+    // the element's box, in real browsers too.
+    const rect = caret.getBoundingClientRect?.();
+    const box = rect && (rect.top !== 0 || rect.bottom !== 0) ? rect : element.getBoundingClientRect();
+    const clips = (r) => box.top < r.top || box.bottom > r.bottom || box.left < r.left || box.right > r.right;
+    const document = element.ownerDocument;
+    const view = document.defaultView;
+    const { clientWidth, clientHeight } = document.documentElement;
+    // The viewport clips it, or a scrolling ancestor does while it stays in
+    // the window (the "editor inside a scrollable pane" case).
+    let clipped = clips({
+        top: 0,
+        left: 0,
+        bottom: view?.innerHeight ?? clientHeight,
+        right: view?.innerWidth ?? clientWidth
+    });
+    for (let ancestor = element.parentElement; !clipped && view?.getComputedStyle && ancestor && ancestor !== document.documentElement; ancestor = ancestor.parentElement) {
+        const { overflow, overflowX, overflowY } = view.getComputedStyle(ancestor);
+        clipped =
+            /(auto|scroll|hidden)/.test(`${overflow} ${overflowX} ${overflowY}`) &&
+                clips(ancestor.getBoundingClientRect());
+    }
+    if (clipped)
+        element.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
 };
 export const getDomSelectionSnapshot = (node) => {
-    const root = node?.getRootNode();
-    const documentSelection = getDocumentSelection(node);
-    if (isShadowRoot(root)) {
-        if (hasSelectionApi(root)) {
-            const shadowSelection = root.getSelection();
-            if (shadowSelection?.anchorNode) {
-                return (createDomSelectionSnapshotFromMultiRange(shadowSelection, node) ??
-                    createDomSelectionSnapshot(shadowSelection));
-            }
-        }
-        const composedSnapshot = getComposedRangeSnapshot(root, documentSelection);
-        if (composedSnapshot) {
-            return composedSnapshot;
+    const root = shadowOf(node);
+    const selection = documentSelection(node);
+    if (root) {
+        const own = root.getSelection?.();
+        if (own?.anchorNode)
+            return snapshotOf(own, node);
+        // A selection inside a shadow root the document only reports composed.
+        const [composed] = selection?.getComposedRanges?.({ shadowRoots: [root] }) ?? [];
+        if (composed &&
+            root.contains(composed.startContainer) &&
+            root.contains(composed.endContainer)) {
+            const range = createDomRange(composed.startContainer);
+            range.setStart(composed.startContainer, composed.startOffset);
+            range.setEnd(composed.endContainer, composed.endOffset);
+            return createDomSelectionSnapshotFromRange(range);
         }
     }
-    return documentSelection
-        ? (createDomSelectionSnapshotFromMultiRange(documentSelection, node) ??
-            createDomSelectionSnapshot(documentSelection))
-        : null;
+    return selection && snapshotOf(selection, node);
 };

package/dist/selection/pointer.svelte.d.ts

@@ -1,3 +1,11 @@
+/**
+ * The selection under a pointer (`selection.pointer`): a press and its drag
+ * (`dragStart`, the drag's release, a normalization it held back), a press
+ * on a block's non-editable chrome, a triple click, a drag across columns
+ * (`acrossColumns`), a drag over inline atoms and `selectstart` on chrome.
+ * It writes the selection only through the selection's own writers; the
+ * selection's DOM adoption reads `dragging` and `across` and asks `hold()`.
+ */
 import type { Text } from '../text/text.svelte.js';
 import type { EdytorSelection } from './selection.svelte.js';
 /** A text point under the pointer, with where the pointer was. */
@@ -7,6 +15,10 @@ export type PointerTextPoint = {
     clientX: number;
     clientY: number;
 };
+/** Where a press was, and its modifiers: what a margin click reads at its release. */
+export type MarginPoint = Pick<MouseEvent, 'clientX' | 'clientY' | 'shiftKey' | 'altKey' | 'metaKey' | 'ctrlKey'>;
+/** A gesture a press in the host's own area starts: answers whether it takes the press. */
+export type MarginClaim = (event: MouseEvent) => boolean;
 export declare class SelectionPointer {
     #private;
     private readonly selection;
@@ -19,14 +31,4 @@ export declare class SelectionPointer {
     get across(): boolean;
     /** A normalization the drag holds back until its release. */
     hold: () => void;
-    private insideText;
-    private chromeBlock;
-    /** The text point under the pointer, if any. */
-    pointAt: (clientX: number, clientY: number) => {
-        text: Text;
-        offset: number;
-        clientX: number;
-        clientY: number;
-    } | null;
-    offsetAt: (text: Text, clientX: number, clientY: number) => number;
 }