edytor 1.0.0-rc.2 → 1.0.0

package/dist/events/onCopy.js

@@ -1,7 +1,5 @@
 import { createEdytorClipboardFragment, writeEdytorClipboardData } from '../clipboard/clipboard.js';
 import { vetoable } from '../utils.js';
-import { observeInternalDragSources } from './onDrop.js';
-import { observeShiftPasteModifier } from './onPaste.js';
 import { ownsEvent } from './nativeInteractiveControl.js';
 /**
  * Copy (and the first half of cut): the guards, the extensions' `hook`, then
@@ -11,10 +9,8 @@ export const copySelection = (edytor, e, hook) => {
     // A copy or cut in a kind's own control (a bound field, a nested
     // editable island) is the control's: overriding it would put the model
     // selection's fragment on the clipboard, and a cut would delete it (`ownsEvent`).
-    if (edytor.selection.state.isVoidEditableElement || ownsEvent(edytor.node, e))
+    if (edytor.selection.voidField || ownsEvent(edytor.node, e))
         return false;
-    observeInternalDragSources(edytor.node?.getRootNode());
-    observeShiftPasteModifier(edytor.node?.getRootNode());
     const claimed = (plugin) => vetoable((prevent) => plugin[hook]?.({ prevent, e }));
     if (edytor.dispatcher.intercept(claimed, () => e.preventDefault()))
         return false;

package/dist/events/onDrop.d.ts

@@ -1,4 +1,10 @@
 import type { Edytor } from '../edytor.svelte.js';
+/**
+ * The private MIME an editor's own chrome drag (a block handle's, a table
+ * row's or column's grip) tags its payload with, the dragged block's id
+ * (the table's for a column): no view takes it as a foreign drop.
+ */
+export declare const EDYTOR_BLOCK_DRAG_MIME = "application/x-edytor-block-id";
 export declare const observeInternalDragSources: (rootNode: Node | null | undefined) => void;
 /**
  * A `dragstart` in the host over a selected text range (a press inside it,
@@ -24,4 +30,4 @@ export declare const onTextDragEnd: (edytor: Edytor) => undefined;
  *   exception is a foreign drop other than a file on a kind's own control,
  *   which is the control's (`isControlDrop`).
  */
-export declare const preventUnsupportedDrop: (event: DragEvent, edytor?: Edytor) => void | Promise<void>;
+export declare const preventUnsupportedDrop: (event: DragEvent, edytor: Edytor) => void | Promise<void>;

package/dist/events/onDrop.js

@@ -2,7 +2,7 @@ import { isNativeInteractiveControl, ownsEvent } from './nativeInteractiveContro
 import { runOccurrence } from './onBeforeInput.js';
 import { createEdytorClipboardFragment, writeEdytorClipboardData } from '../clipboard/clipboard.js';
 import { endTextDrag, startTextDrag, textDragOf } from '../clipboard/moveText.js';
-import { getDomSelection } from '../selection/domSelection.js';
+import { caretAtPoint, getDomSelection } from '../selection/domSelection.js';
 /**
  * Payloads the editor can consume on drop. Preventing `dragover` is what
  * enables a drop, so it is prevented only for these types — internal and
@@ -14,9 +14,12 @@ import { getDomSelection } from '../selection/domSelection.js';
  * claims image files; unclaimed files insert nothing).
  */
 const ACCEPTED_FOREIGN_DROP_TYPES = ['Files', 'text/html', 'text/plain', 'text/uri-list'];
-// Internal block-move drags (src/lib/plugins/blockHandles/) tag their
-// payload with this private mime type.
-const EDYTOR_BLOCK_DRAG_MIME = 'application/x-edytor-block-id';
+/**
+ * The private MIME an editor's own chrome drag (a block handle's, a table
+ * row's or column's grip) tags its payload with, the dragged block's id
+ * (the table's for a column): no view takes it as a foreign drop.
+ */
+export const EDYTOR_BLOCK_DRAG_MIME = 'application/x-edytor-block-id';
 // `dataTransfer.types` cannot distinguish a foreign text drop from an
 // editor-owned text drag (Chrome exposes text/plain + text/html for both).
 // Track the drag source instead: a `dragstart` inside the editor's root node
@@ -41,31 +44,23 @@ export const observeInternalDragSources = (rootNode) => {
         internalDragSource = null;
     }, true);
 };
-if (typeof document !== 'undefined') {
-    observeInternalDragSources(document);
-}
-const isInternalDrag = (root, dataTransfer) => {
-    if (dataTransfer && Array.from(dataTransfer.types).includes(EDYTOR_BLOCK_DRAG_MIME)) {
-        return true;
-    }
-    return internalDragSource !== null && root.contains(internalDragSource);
-};
+/** The drag started inside the host. */
+const fromHost = (root) => internalDragSource !== null && root.contains(internalDragSource);
+const typesOf = (dataTransfer) => Array.from(dataTransfer?.types ?? []);
 /**
  * A foreign drop on a kind's own control (a field bound to `block.data`, a
  * nested editable island) is the control's (`ownsEvent`): the editor writes
  * nothing and the browser does what the control does with it. Not a file,
  * which the browser would open in place of the page: that one is swallowed.
  */
-const isControlDrop = (root, event) => !Array.from(event.dataTransfer?.types ?? []).includes('Files') && ownsEvent(root, event);
+const isControlDrop = (root, event) => !typesOf(event.dataTransfer).includes('Files') && ownsEvent(root, event);
 /**
  * The view's own text drag: a selected text range dragged from
  * inside the host, the block handles' drags excluded (their payload's MIME).
  */
-const isTextDrag = (edytor, root, dataTransfer) => edytor !== undefined &&
-    textDragOf(edytor) !== undefined &&
-    !Array.from(dataTransfer?.types ?? []).includes(EDYTOR_BLOCK_DRAG_MIME) &&
-    internalDragSource !== null &&
-    root.contains(internalDragSource);
+const isTextDrag = (edytor, root, dataTransfer) => textDragOf(edytor) !== undefined &&
+    !typesOf(dataTransfer).includes(EDYTOR_BLOCK_DRAG_MIME) &&
+    fromHost(root);
 /** Where the view's text drag may land: an editable view, in its text, not a kind's control. */
 const takesTextDrop = (edytor, root, event) => !edytor.readonly &&
     edytor.dispatcher.permits() &&
@@ -98,7 +93,7 @@ export const onTextDragStart = (edytor, event) => {
     const value = edytor.selection.value;
     if (!root || ownsEvent(root, event) || value.kind !== 'text')
         return;
-    if (edytor.selection.state.isCollapsed || edytor.isComposing)
+    if (edytor.selection.projection.isCollapsed || edytor.isComposing)
         return;
     // Only a drag of the selection itself: another draggable in the host drags its own thing.
     if (!startsInSelection(root, event.target))
@@ -116,59 +111,30 @@ export const onTextDragStart = (edytor, event) => {
 };
 /** The drag ended, dropped or not: no text drag. */
 export const onTextDragEnd = (edytor) => endTextDrag(edytor);
+/** A drop from outside (no chrome drag, no drag from the host) of a payload the editor takes. */
 const isAcceptedForeignDrop = (root, dataTransfer) => {
-    if (!dataTransfer || isInternalDrag(root, dataTransfer)) {
-        return false;
-    }
-    return Array.from(dataTransfer.types).some((type) => ACCEPTED_FOREIGN_DROP_TYPES.includes(type));
-};
-// `caretPositionFromPoint` is the spec API (Firefox, Chromium ≥128);
-// `caretRangeFromPoint` is the legacy WebKit/Chromium API. Support both.
-const caretRangeFromPoint = (doc, x, y) => {
-    const position = doc.caretPositionFromPoint?.(x, y);
-    if (position?.offsetNode) {
-        return { container: position.offsetNode, offset: position.offset };
-    }
-    const range = doc.caretRangeFromPoint?.(x, y);
-    if (range) {
-        return { container: range.startContainer, offset: range.startOffset };
-    }
-    return null;
-};
-const createCollapsedStaticRange = (container, offset) => {
-    if (typeof StaticRange === 'function') {
-        try {
-            return new StaticRange({
-                startContainer: container,
-                startOffset: offset,
-                endContainer: container,
-                endOffset: offset
-            });
-        }
-        catch {
-            // Fall through to the structural StaticRange below.
-        }
-    }
-    return {
-        startContainer: container,
-        startOffset: offset,
-        endContainer: container,
-        endOffset: offset,
-        collapsed: true
-    };
+    const types = typesOf(dataTransfer);
+    return (!types.includes(EDYTOR_BLOCK_DRAG_MIME) &&
+        !fromHost(root) &&
+        types.some((type) => ACCEPTED_FOREIGN_DROP_TYPES.includes(type)));
 };
 // Preventing the drop suppresses the browser's own `insertFromDrop`
 // beforeinput, so the accepted payload is the occurrence itself — the same
-// routing as `insertFromPaste`, with the resolved drop point as its declared
-// target range.
+// routing as `insertFromPaste`, with the drop point as its declared target
+// range (`caretAtPoint`).
 const insertFromDrop = (edytor, root, event) => {
-    const caret = caretRangeFromPoint(root.ownerDocument, event.clientX, event.clientY);
+    const at = caretAtPoint(root.ownerDocument, event.clientX, event.clientY);
+    const point = at &&
+        new StaticRange({
+            startContainer: at.node,
+            startOffset: at.offset,
+            endContainer: at.node,
+            endOffset: at.offset
+        });
     return runOccurrence(edytor, {
         inputType: 'insertFromDrop',
         dataTransfer: event.dataTransfer,
-        declared: caret && root.contains(caret.container)
-            ? createCollapsedStaticRange(caret.container, caret.offset)
-            : null,
+        declared: point && root.contains(point.startContainer) ? point : null,
         cancelable: true
     });
 };
@@ -186,13 +152,8 @@ const insertFromDrop = (edytor, root, event) => {
  *   which is the control's (`isControlDrop`).
  */
 export const preventUnsupportedDrop = (event, edytor) => {
+    // Listened on the host.
     const root = event.currentTarget;
-    if (!(root instanceof Element)) {
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-    }
-    observeInternalDragSources(root.getRootNode());
     // The view's own text drag: a move (a copy with Alt) where it may land.
     if (isTextDrag(edytor, root, event.dataTransfer)) {
         const takes = takesTextDrop(edytor, root, event);
@@ -239,6 +200,6 @@ export const preventUnsupportedDrop = (event, edytor) => {
         return;
     }
     // Mid-composition drops are swallowed: the preview owns the write path.
-    if (edytor && !edytor.isComposing)
+    if (!edytor.isComposing)
         return insertFromDrop(edytor, root, event);
 };

package/dist/events/onFocus.d.ts

@@ -2,14 +2,19 @@ import type { Edytor } from '../edytor.svelte.js';
 /** The DOM selection has an endpoint inside `node`. */
 export declare const selectionIsInside: (node: HTMLElement) => boolean;
 /**
- * The editor takes the keys after a pointer gesture on its chrome (a block
- * drop, a column resize, a grip click no menu answers): its host gets the
+ * The editor takes the keys back: after a pointer gesture on its chrome (a
+ * block drop, a column resize, a grip click no menu answers), a menu, panel,
+ * toolbar or field of the chrome giving them back, or `edytor.focus()`. The
+ * one way to focus the host from code: its host gets the
  * focus, without scrolling, as the editor's own focus (`focusin` restores
  * no cached caret and counts no gesture), so Mod+Z, Mod+Shift+Z and the
  * block-selection keys act at once, whatever the selection (a block
  * selection, or none: an undo giving back "no selection" keeps them). The
- * projector stays the only DOM-selection writer. Nothing when the focus is
- * already inside the host, or the view is gone.
+ * caret the browser parks for that focus (at the host's start) is drift,
+ * never adopted, and the value is displayed over it: a key typed right
+ * after lands at the selection, not at the host's start. The projector
+ * stays the only DOM-selection writer. Nothing when the host already has
+ * the focus (a kind's own control inside it does not), or the view is gone.
  */
 export declare const takeKeys: (edytor: Edytor) => void;
 /**

package/dist/events/onFocus.js

@@ -8,7 +8,8 @@
 import { on } from 'svelte/events';
 import { clearDomSelection, getActiveElement, getDomSelection, getDomSelectionSnapshot } from '../selection/domSelection.js';
 import { getYIndex } from '../selection/selection.utils.js';
-const getEventTimeStamp = (event) => event?.timeStamp || (typeof performance === 'undefined' ? Date.now() : performance.now());
+import { noSelection } from '../session/selection.js';
+import { observeInternalDragSources } from './onDrop.js';
 /** The DOM selection has an endpoint inside `node`. */
 export const selectionIsInside = (node) => {
     const selection = getDomSelection(node);
@@ -17,25 +18,30 @@ export const selectionIsInside = (node) => {
             (selection.focusNode && node.contains(selection.focusNode))));
 };
 /**
- * The editor takes the keys after a pointer gesture on its chrome (a block
- * drop, a column resize, a grip click no menu answers): its host gets the
+ * The editor takes the keys back: after a pointer gesture on its chrome (a
+ * block drop, a column resize, a grip click no menu answers), a menu, panel,
+ * toolbar or field of the chrome giving them back, or `edytor.focus()`. The
+ * one way to focus the host from code: its host gets the
  * focus, without scrolling, as the editor's own focus (`focusin` restores
  * no cached caret and counts no gesture), so Mod+Z, Mod+Shift+Z and the
  * block-selection keys act at once, whatever the selection (a block
  * selection, or none: an undo giving back "no selection" keeps them). The
- * projector stays the only DOM-selection writer. Nothing when the focus is
- * already inside the host, or the view is gone.
+ * caret the browser parks for that focus (at the host's start) is drift,
+ * never adopted, and the value is displayed over it: a key typed right
+ * after lands at the selection, not at the host's start. The projector
+ * stays the only DOM-selection writer. Nothing when the host already has
+ * the focus (a kind's own control inside it does not), or the view is gone.
  */
 export const takeKeys = (edytor) => {
     const node = edytor.node;
     if (!node?.isConnected || edytor.destroyed)
         return;
-    const active = getActiveElement(node);
-    if (active instanceof Node && node.contains(active))
+    if (getActiveElement(node) === node)
         return;
     edytor.expectInternalFocus();
     node.focus({ preventScroll: true });
     edytor.projector.parked();
+    edytor.selection.display();
 };
 /*
  * The press: one per primary button press, its `pointerdown`, or a
@@ -76,6 +82,8 @@ export const onPress = (edytor, target, listener, options) => {
     };
 };
 export const attachFocus = (edytor, node) => {
+    // Where the host lives (the document, or a shadow root): its drags' sources.
+    observeInternalDragSources(node.getRootNode());
     let lastPointerDownInsideEditorAt = Number.NEGATIVE_INFINITY;
     /*
      * A primary `pointerdown` arms `compat` until the `mousedown` it is
@@ -90,16 +98,51 @@ export const attachFocus = (edytor, node) => {
         edytor.markUserGesture();
         edytor.lastUserGestureOutsideEditor = Boolean(event.target instanceof Node && !edytor.node?.contains(event.target));
     };
+    /**
+     * A press outside the view and its chrome (the overlay's menus, handles,
+     * toolbar) ends its block selection (`sel.blocks.outside`, Notion): the
+     * selection is none. Shift or Mod keeps it (a marquee from the page's
+     * margin adds to it), and so does an app element marked
+     * `data-edytor-keep-selection` (its own toolbar acting on the blocks).
+     */
+    const pressOutside = (event) => {
+        const { target } = event;
+        if (edytor.selection.value.kind !== 'blocks' || !(target instanceof Node))
+            return;
+        if (edytor.node?.contains(target) || edytor.overlay.layer?.contains(target))
+            return;
+        if (event.shiftKey || event.metaKey || event.ctrlKey)
+            return;
+        const element = target instanceof Element ? target : target.parentElement;
+        if (element?.closest('[data-edytor-keep-selection]'))
+            return;
+        edytor.selection.commit(noSelection);
+    };
+    /**
+     * A press the model answers: on the host's own area, the margin gesture's
+     * (the marquee, `sel.marquee`, which gives a click back); below the last
+     * block, the trailing paragraph; on a block's chrome, its caret.
+     */
+    const placingPress = (event) => {
+        const { pointer } = edytor.selection;
+        if (pointer.marginPress(event))
+            return;
+        if (!pointer.belowPress(event))
+            pointer.chromePress(event);
+    };
     /** A press inside the host (its bubbling phase: an element inside that took it keeps it). */
     const pressInside = (event) => {
         // A pointer gesture abandons a live composition.
         edytor.composition.abandon();
-        lastPointerDownInsideEditorAt = getEventTimeStamp(event);
+        lastPointerDownInsideEditorAt = event.timeStamp;
+        const { pointer } = edytor.selection;
+        // The margin gesture's press places no caret and starts no text drag.
+        if (pointer.claimed)
+            return;
         edytor.projector.pressed();
-        edytor.selection.clearModelSelectionPreservation();
-        edytor.selection.pointer.capture(event);
+        pointer.capture(event);
         edytor.selection.clearInlineBlockSelection();
-        edytor.selection.pointer.collapseBlocksAt(event);
+        pointer.collapseBlocksAt(event);
     };
     const clearNativeSelectionAfterExternalFocus = () => {
         const activeElement = getActiveElement(node);
@@ -110,68 +153,40 @@ export const attachFocus = (edytor, node) => {
             clearDomSelection(node);
         }
     };
-    const restoreCachedSelectionAfterKeyboardFocus = (event) => {
-        if (edytor.readonly || event.target !== node) {
+    /**
+     * A keyboard or programmatic focus returns to the model's selection: the
+     * caret the browser puts at the start for the focus (its focus reset) is
+     * not the user's, so the value is shown again; any other DOM selection of
+     * the host's is the focus's own and adopted.
+     */
+    const restoreAfterKeyboardFocus = (event) => {
+        if (edytor.readonly || event.target !== node)
             return;
-        }
-        if (event.relatedTarget instanceof Node && node.contains(event.relatedTarget)) {
+        if (event.relatedTarget instanceof Node && node.contains(event.relatedTarget))
             return;
-        }
-        if (getEventTimeStamp(event) - lastPointerDownInsideEditorAt < 250) {
+        if (event.timeStamp - lastPointerDownInsideEditorAt < 250)
             return;
-        }
-        const text = edytor.selection.state.startText;
-        if (!text) {
+        if (!edytor.selection.projection.start)
             return;
-        }
-        const offset = edytor.selection.state.yStart;
-        const applyMeaningfulDomSelection = () => {
-            const selection = getDomSelectionSnapshot(node);
-            if (!selection?.anchorNode || !selection.focusNode) {
-                return false;
-            }
-            if (!node.contains(selection.anchorNode) || !node.contains(selection.focusNode)) {
-                return false;
-            }
-            const anchorText = edytor.selection.getTextOfNode(selection.anchorNode);
-            const focusText = edytor.selection.getTextOfNode(selection.focusNode);
-            if (!anchorText || !focusText) {
-                return false;
-            }
-            const isBrowserFocusReset = selection.isCollapsed &&
-                anchorText === edytor.root?.firstEditableText &&
-                getYIndex(anchorText, selection.anchorNode, selection.anchorOffset) === 0;
-            if (isBrowserFocusReset) {
-                return false;
-            }
-            edytor.selection.applySelectionSnapshot(selection);
-            return true;
-        };
-        const restore = () => {
-            if (getActiveElement(node) !== node) {
+        queueMicrotask(() => {
+            if (getActiveElement(node) !== node)
                 return;
-            }
-            if (applyMeaningfulDomSelection()) {
-                return;
-            }
-            const s = edytor.selection.state;
-            // A remote delivery or command may have legitimately moved the
-            // selection since the focus-time capture — the CURRENT state
-            // owns the caret then; writing the cached point would yank it
-            // back to a pre-update position. The cache only wins while the
-            // state still equals it, or when the browser collapsed the
-            // caret to its focus-reset spot (first editable text at 0).
-            if (!s.isCollapsed || !s.startText) {
-                return;
-            }
-            const focusReset = s.startText === edytor.root?.firstEditableText && s.yStart === 0;
-            const [targetText, targetOffset] = focusReset ? [text, offset] : [s.startText, s.yStart];
-            if (!targetText?.node?.isConnected) {
-                return;
-            }
-            edytor.selection.setAtTextOffset(targetText, Math.min(targetOffset, targetText.length));
-        };
-        queueMicrotask(restore);
+            const dom = getDomSelectionSnapshot(node);
+            const { anchorNode, focusNode } = dom ?? {};
+            const text = anchorNode && edytor.selection.getTextOfNode(anchorNode);
+            const own = text &&
+                focusNode &&
+                node.contains(anchorNode) &&
+                node.contains(focusNode) &&
+                edytor.selection.getTextOfNode(focusNode) &&
+                !(dom.isCollapsed &&
+                    text === edytor.root?.firstEditableText &&
+                    getYIndex(text, anchorNode, dom.anchorOffset) === 0);
+            if (own)
+                edytor.selection.applySelectionSnapshot(dom);
+            else
+                edytor.selection.select(edytor.selection.value);
+        });
     };
     return [
         // Any press anywhere disarms pending restores — Firefox can move
@@ -185,6 +200,7 @@ export const attachFocus = (edytor, node) => {
                 compat = true;
             lonePresses.delete(edytor);
             gesture(event);
+            pressOutside(event);
         }, { capture: true }),
         on(node.ownerDocument, 'mousedown', (event) => {
             const press = !compat && event.isTrusted && event.button === 0;
@@ -193,14 +209,18 @@ export const attachFocus = (edytor, node) => {
                 return void lonePresses.delete(edytor);
             lonePresses.set(edytor, event);
             gesture(event);
+            pressOutside(event);
         }, { capture: true }),
-        // A press on a block's non-editable chrome places the caret in its text.
-        on(node, 'pointerdown', edytor.selection.pointer.chromePress, {
+        // A press below the last block goes to the trailing paragraph; one on a
+        // block's non-editable chrome places the caret in its text.
+        on(node, 'pointerdown', placingPress, {
             capture: true
         }),
         on(node, 'mousedown', (event) => {
             if (lone(event))
-                edytor.selection.pointer.chromePress(event);
+                placingPress(event);
+            else
+                edytor.selection.pointer.marginMouse(event);
         }, { capture: true }),
         // The document's capture listener already marked the gesture.
         on(node, 'pointerdown', pressInside),
@@ -246,7 +266,7 @@ export const attachFocus = (edytor, node) => {
                 // A focus from outside (Tab, an app's `focus()`) places the user's caret.
                 edytor.projector.pressed();
             }
-            restoreCachedSelectionAfterKeyboardFocus(event);
+            restoreAfterKeyboardFocus(event);
         }),
         on(node, 'focusout', (event) => {
             // Focus moving to a concrete element outside the editor is the

package/dist/events/onInput.d.ts

@@ -12,9 +12,13 @@ export declare const getCollapsedDomTextSelection: (edytor: Edytor) => {
 } | null;
 export declare const handleNativeLineBreakTextValue: (edytor: Edytor, text: Text, value: string) => Promise<boolean>;
 /**
- * An `input` event. Model-owned drift is repaired here; browser-made text is
- * never adopted here: the mutation queue is the only adopter, so
- * the `input` flushes it — a browser-owned attempt's change is adopted there,
- * once, through the dispatcher — then closes the attempt it belongs to.
+ * An `input` event. Browser-made text is never adopted here: the mutation
+ * queue is the only adopter (a native line break there runs as its
+ * occurrence), so the `input` flushes it — a browser-owned attempt's change
+ * is adopted there, once, through the dispatcher — then closes the attempt it
+ * belongs to. Drift around a model-owned attempt is the observer's to invert;
+ * a restoring attempt (a delete the browser could not be kept from) also
+ * re-renders the text the input landed in and shows its caret again, which
+ * the browser moved.
  */
 export declare function onInput(this: Edytor, event: Event): Promise<void>;