edytor 1.0.0-rc.3 → 2.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

@@ -30,4 +30,10 @@ 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>;
+/**
+ * A drag leaving the host (to the page around it, or out of the window):
+ * a file drag's indicator goes. Moving between the host's own elements is
+ * no leave.
+ */
+export declare const onDragLeave: (edytor: Edytor, event: DragEvent) => void;

package/dist/events/onDrop.js

@@ -2,16 +2,20 @@ 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';
+import { viewUploads } from '../session/uploads.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
  * unsupported drags keep the browser's not-allowed affordance and can never
  * produce a native DOM mutation.
  *
- * `Files` is intentionally accepted: file drops route through the plugin
- * `onPaste` hook (the Files → image seam: the image plugin with `upload`
- * claims image files; unclaimed files insert nothing).
+ * `Files` is intentionally accepted (so the browser never opens a dropped
+ * file in place of the page): with the view's uploads (a media plugin given
+ * an `upload`), file drops route through the plugin `onPaste` hook with the
+ * drop indicator's placement (`ViewUploads.drop`: a block per file the kinds
+ * take there; unclaimed files insert nothing); without them a drop carrying
+ * files is ignored, its effect `none`.
  */
 const ACCEPTED_FOREIGN_DROP_TYPES = ['Files', 'text/html', 'text/plain', 'text/uri-list'];
 /**
@@ -44,31 +48,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() &&
@@ -101,7 +97,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))
@@ -119,59 +115,31 @@ 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.
-const insertFromDrop = (edytor, root, event) => {
-    const caret = caretRangeFromPoint(root.ownerDocument, event.clientX, event.clientY);
+// routing as `insertFromPaste`, with the drop point as its declared target
+// range (`caretAtPoint`); files carry the indicator's placement (`at`).
+const insertFromDrop = (edytor, root, event, placement = null) => {
+    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,
+        placement,
         cancelable: true
     });
 };
@@ -189,13 +157,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);
@@ -218,22 +181,33 @@ export const preventUnsupportedDrop = (event, edytor) => {
         drag.dropping = true;
         return insertFromDrop(edytor, root, event);
     }
+    const files = typesOf(event.dataTransfer).includes('Files');
+    // The view's uploads take dropped files (a media plugin given an `upload`); none: ignored.
+    const drop = files ? viewUploads(edytor)?.drop : undefined;
     if (event.type === 'dragover') {
         if (isAcceptedForeignDrop(root, event.dataTransfer)) {
             event.preventDefault();
             event.stopPropagation();
-            if (event.dataTransfer) {
-                event.dataTransfer.dropEffect = 'copy';
-            }
+            // Files show where they land (the block drag's indicator); none in a
+            // read-only view or one without uploads, which takes no file drop (the
+            // browser must not open the file).
+            const shown = drop && !ownsEvent(root, event) && drop.over(event);
+            if (event.dataTransfer)
+                event.dataTransfer.dropEffect = files && (edytor.readonly || !drop) ? 'none' : 'copy';
+            if (drop && !shown)
+                drop.end();
         }
         return;
     }
     const accepted = isAcceptedForeignDrop(root, event.dataTransfer);
+    // Where the files land: the indicator's placement, re-resolved at the drop point.
+    const at = drop && accepted && !ownsEvent(root, event) ? drop.at(event) : null;
+    drop?.end();
     if (accepted && isControlDrop(root, event))
         return;
     event.preventDefault();
     event.stopPropagation();
-    if (!accepted) {
+    if (!accepted || (files && (edytor.readonly || !drop))) {
         return;
     }
     if (ownsEvent(root, event) || isNativeInteractiveControl(event.target)) {
@@ -242,6 +216,18 @@ export const preventUnsupportedDrop = (event, edytor) => {
         return;
     }
     // Mid-composition drops are swallowed: the preview owns the write path.
-    if (edytor && !edytor.isComposing)
-        return insertFromDrop(edytor, root, event);
+    if (!edytor.isComposing)
+        return insertFromDrop(edytor, root, event, at);
+};
+/**
+ * A drag leaving the host (to the page around it, or out of the window):
+ * a file drag's indicator goes. Moving between the host's own elements is
+ * no leave.
+ */
+export const onDragLeave = (edytor, event) => {
+    const root = event.currentTarget;
+    const to = event.relatedTarget;
+    if (to instanceof Node && root.contains(to))
+        return;
+    viewUploads(edytor)?.drop.end();
 };

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

@@ -9,7 +9,7 @@ import { on } from 'svelte/events';
 import { clearDomSelection, getActiveElement, getDomSelection, getDomSelectionSnapshot } from '../selection/domSelection.js';
 import { getYIndex } from '../selection/selection.utils.js';
 import { noSelection } from '../session/selection.js';
-const getEventTimeStamp = (event) => event?.timeStamp || (typeof performance === 'undefined' ? Date.now() : performance.now());
+import { observeInternalDragSources } from './onDrop.js';
 /** The DOM selection has an endpoint inside `node`. */
 export const selectionIsInside = (node) => {
     const selection = getDomSelection(node);
@@ -18,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
@@ -77,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
@@ -127,8 +134,7 @@ export const attachFocus = (edytor, node) => {
     const pressInside = (event) => {
         // A pointer gesture abandons a live composition.
         edytor.composition.abandon();
-        lastPointerDownInsideEditorAt = getEventTimeStamp(event);
-        edytor.selection.clearModelSelectionPreservation();
+        lastPointerDownInsideEditorAt = event.timeStamp;
         const { pointer } = edytor.selection;
         // The margin gesture's press places no caret and starts no text drag.
         if (pointer.claimed)
@@ -147,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) {
-                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) {
+        queueMicrotask(() => {
+            if (getActiveElement(node) !== node)
                 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
@@ -288,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>;