edytor 0.1.0-next.17 → 0.1.0-next.19

package/README.md

@@ -15,7 +15,7 @@
 
 Edytor aims to be for Svelte what Slate.js is for React: a heavily customizable editor with an API to build any kind of collaborative rich text editor.
 
-> **Work in progress.** Edytor is a pre-release (`0.1.0-next.17`, `edytor@next` on npm) and not ready for production; the API changes between releases without a compatibility layer. The untagged `edytor@0.0.11` on npm predates the current API. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
+> **Work in progress.** Edytor is a pre-release (`0.1.0-next.19`, `edytor@next` on npm) and not ready for production; the API changes between releases without a compatibility layer. The untagged `edytor@0.0.11` on npm predates the current API. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
 
 ## Features
 

package/dist/components/Edytor.svelte

@@ -323,18 +323,13 @@
 
 	const nonNativeEditableBlockChromeSelection = (node: HTMLElement) => {
 		const { selection } = edytor;
-		const pointerdown = (event: PointerEvent) =>
-			selection.handleNonNativeEditableBlockChromePointerDown(event);
-		node.addEventListener('pointerdown', pointerdown, true);
 		// `selectstart` is the only event fired before a drag-selection
 		// begins — the guard keeps one from starting on non-editable
-		// chrome (markers, void/island chrome, plugin UI).
+		// chrome (markers, void/island chrome, plugin UI). A press on that
+		// chrome is the press's (`events/onFocus.ts`).
 		node.addEventListener('selectstart', selection.onSelectStart);
 		return {
-			destroy: () => {
-				node.removeEventListener('pointerdown', pointerdown, true);
-				node.removeEventListener('selectstart', selection.onSelectStart);
-			}
+			destroy: () => node.removeEventListener('selectstart', selection.onSelectStart)
 		};
 	};
 </script>

package/dist/events/onFocus.d.ts

@@ -12,4 +12,20 @@ export declare const selectionIsInside: (node: HTMLElement) => boolean;
  * already inside the host, or the view is gone.
  */
 export declare const takeKeys: (edytor: Edytor) => void;
+/**
+ * Whether `event` is the press of a primary `mousedown` no `pointerdown`
+ * came before (WebKit's first press after a drag). Asked during the
+ * event's dispatch, after the document's capture phase saw it: by a
+ * listener the view's attach installs later (a plugin's `onEdytorAttached`)
+ * or by an element's own (bubbling, target phase), such as the chrome in the
+ * overlay, which starts from it as from a `pointerdown`.
+ */
+export declare const isLonePress: (edytor: Edytor, event: MouseEvent) => boolean;
+/**
+ * Every press on `target` (`isLonePress`): its `pointerdown`, or the lone
+ * `mousedown` standing for a missing one, never both for one press. For a
+ * listener installed after the view's attach (a plugin's press outside its
+ * menu). Answers the teardown.
+ */
+export declare const onPress: (edytor: Edytor, target: EventTarget, listener: (event: MouseEvent) => void, options?: boolean | AddEventListenerOptions) => () => void;
 export declare const attachFocus: (edytor: Edytor, node: HTMLElement) => (() => void)[];

package/dist/events/onFocus.js

@@ -37,8 +37,70 @@ export const takeKeys = (edytor) => {
     node.focus({ preventScroll: true });
     edytor.projector.parked();
 };
+/*
+ * The press: one per primary button press, its `pointerdown`, or a
+ * `mousedown` no `pointerdown` came before. WebKit fires no `pointercancel`
+ * at a native `dragstart` (a block handle's drag) and, believing the button
+ * still down, no `pointerdown` for the next press, only its `mousedown`
+ * (WebKit bugs 202287, 222632, 279749): that primary `mousedown` is the
+ * press (lone). `attachFocus` classifies each `mousedown` of its view's
+ * document at the capture phase, first of the view's listeners; the lone one
+ * of each view is kept here, read by `isLonePress` and `onPress`.
+ */
+const lonePresses = new WeakMap();
+/**
+ * Whether `event` is the press of a primary `mousedown` no `pointerdown`
+ * came before (WebKit's first press after a drag). Asked during the
+ * event's dispatch, after the document's capture phase saw it: by a
+ * listener the view's attach installs later (a plugin's `onEdytorAttached`)
+ * or by an element's own (bubbling, target phase), such as the chrome in the
+ * overlay, which starts from it as from a `pointerdown`.
+ */
+export const isLonePress = (edytor, event) => lonePresses.get(edytor) === event;
+/**
+ * Every press on `target` (`isLonePress`): its `pointerdown`, or the lone
+ * `mousedown` standing for a missing one, never both for one press. For a
+ * listener installed after the view's attach (a plugin's press outside its
+ * menu). Answers the teardown.
+ */
+export const onPress = (edytor, target, listener, options) => {
+    const lone = (event) => {
+        if (isLonePress(edytor, event))
+            listener(event);
+    };
+    target.addEventListener('pointerdown', listener, options);
+    target.addEventListener('mousedown', lone, options);
+    return () => {
+        target.removeEventListener('pointerdown', listener, options);
+        target.removeEventListener('mousedown', lone, options);
+    };
+};
 export const attachFocus = (edytor, node) => {
     let lastPointerDownInsideEditorAt = Number.NEGATIVE_INFINITY;
+    /*
+     * A primary `pointerdown` arms `compat` until the `mousedown` it is
+     * followed by (before or after its release, a touch's comes after), so a
+     * pair counts once. Only the browser's own `mousedown` stands for a
+     * missing press; a script's is none (`lonePresses`).
+     */
+    let compat = false;
+    const lone = (event) => isLonePress(edytor, event);
+    /** Where the press landed: the gesture serial, and whether the user went outside. */
+    const gesture = (event) => {
+        edytor.markUserGesture();
+        edytor.lastUserGestureOutsideEditor = Boolean(event.target instanceof Node && !edytor.node?.contains(event.target));
+    };
+    /** 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 (D-7).
+        edytor.composition.abandon();
+        lastPointerDownInsideEditorAt = getEventTimeStamp(event);
+        edytor.projector.pressed();
+        edytor.selection.clearModelSelectionPreservation();
+        edytor.selection.capturePointerDragStart(event);
+        edytor.selection.clearInlineBlockSelection();
+        edytor.selection.collapseSelectedBlocksAtPointer(event);
+    };
     const clearNativeSelectionAfterExternalFocus = () => {
         const activeElement = getActiveElement(node);
         if (activeElement instanceof Node && node.contains(activeElement)) {
@@ -112,26 +174,39 @@ export const attachFocus = (edytor, node) => {
         queueMicrotask(restore);
     };
     return [
-        // Any pointerdown anywhere disarms pending restores — Firefox
-        // can move the DOM selection on outside clicks without
-        // blurring the editor, so node-local marking is not enough. The
-        // target also records where the gesture landed: an outside
-        // pointerdown means the current focus/selection is user-owned
-        // until an inside gesture or focusin returns it.
+        // Any press anywhere disarms pending restores — Firefox can move
+        // the DOM selection on outside clicks without blurring the editor,
+        // so node-local marking is not enough. The target also records
+        // where the gesture landed: an outside press means the current
+        // focus/selection is user-owned until an inside gesture or focusin
+        // returns it.
         on(node.ownerDocument, 'pointerdown', (event) => {
-            edytor.markUserGesture();
-            edytor.lastUserGestureOutsideEditor = Boolean(event.target instanceof Node && !edytor.node?.contains(event.target));
+            if (event.isPrimary)
+                compat = true;
+            lonePresses.delete(edytor);
+            gesture(event);
+        }, { capture: true }),
+        on(node.ownerDocument, 'mousedown', (event) => {
+            const press = !compat && event.isTrusted && event.button === 0;
+            compat = false;
+            if (!press)
+                return void lonePresses.delete(edytor);
+            lonePresses.set(edytor, event);
+            gesture(event);
+        }, { capture: true }),
+        // A press on a block's non-editable chrome places the caret in its text.
+        on(node, 'pointerdown', edytor.selection.handleNonNativeEditableBlockChromePointerDown, {
+            capture: true
+        }),
+        on(node, 'mousedown', (event) => {
+            if (lone(event))
+                edytor.selection.handleNonNativeEditableBlockChromePointerDown(event);
         }, { capture: true }),
         // The document's capture listener already marked the gesture.
-        on(node, 'pointerdown', (event) => {
-            // A pointer gesture abandons a live composition (D-7).
-            edytor.composition.abandon();
-            lastPointerDownInsideEditorAt = getEventTimeStamp(event);
-            edytor.projector.pressed();
-            edytor.selection.clearModelSelectionPreservation();
-            edytor.selection.capturePointerDragStart(event);
-            edytor.selection.clearInlineBlockSelection();
-            edytor.selection.collapseSelectedBlocksAtPointer(event);
+        on(node, 'pointerdown', pressInside),
+        on(node, 'mousedown', (event) => {
+            if (lone(event))
+                pressInside(event);
         }),
         on(node, 'pointerup', (event) => {
             edytor.markUserGesture();
@@ -185,6 +260,7 @@ export const attachFocus = (edytor, node) => {
             // Focus leaving abandons a live composition: the browser committed what it shows.
             edytor.composition.abandon();
             setTimeout(clearNativeSelectionAfterExternalFocus);
-        })
+        }),
+        () => void lonePresses.delete(edytor)
     ];
 };

package/dist/plugins/blockMenu/blockMenuPlugin.js

@@ -1,4 +1,5 @@
 import { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from '../blockHandles/BlockHandleController.svelte.js';
+import { onPress } from '../../events/onFocus.js';
 import { getSelectedBlocksInDocumentOrder } from '../../selection/replaceSelection.js';
 import BlockMenu from './BlockMenu.svelte';
 import { BlockMenuController } from './BlockMenuController.svelte.js';
@@ -103,12 +104,13 @@ export const createBlockMenuPlugin = (options = {}) => (edytor) => {
             const add = () => controller.close(false);
             node.addEventListener(BLOCK_ACTIVATE_EVENT, activate);
             node.addEventListener(BLOCK_ADD_EVENT, add);
-            node.ownerDocument.addEventListener('pointerdown', outside, true);
+            // Every press, WebKit's lone `mousedown` after a drag too (`onPress`).
+            const offPress = onPress(edytor, node.ownerDocument, outside, true);
             const unmount = edytor.overlay.mount(BlockMenu, { controller, menu: options.menu }, 'edytor-block-menu-host', 70, place);
             return () => {
                 node.removeEventListener(BLOCK_ACTIVATE_EVENT, activate);
                 node.removeEventListener(BLOCK_ADD_EVENT, add);
-                node.ownerDocument.removeEventListener('pointerdown', outside, true);
+                offPress();
                 unmount();
             };
         }

package/dist/plugins/columns/ColumnResize.svelte

@@ -33,7 +33,7 @@
 				data-dragging={resize.drag ? 'true' : undefined}
 				data-selecting={resize.selecting ? 'true' : undefined}
 				onpointerdown={(event) => resize.start(event, strip)}
-				onmousedown={(event) => event.preventDefault()}
+				onmousedown={(event) => resize.mousedown(event, strip)}
 			></div>
 		{/each}
 	{/if}

package/dist/plugins/columns/resize.svelte.d.ts

@@ -93,8 +93,20 @@ export declare class ColumnResize {
     private gaps;
     /** The left column's width at the drag's pointer, held to the minimum on both sides. */
     private widthAt;
-    /** Press on `strip`: the drag starts, nothing is written until the release. */
-    start: (event: PointerEvent, strip: Strip) => void;
+    /**
+     * A `mousedown` on `strip`: no native selection starts there; the press
+     * itself when no `pointerdown` came before it (`isLonePress`: WebKit's
+     * first press after a block drag), which starts the drag as one would.
+     */
+    mousedown: (event: MouseEvent, strip: Strip) => void;
+    /**
+     * Press on `strip`: the drag starts, nothing is written until the release.
+     * A `pointerdown` tracks its pointer (captured, on the document); a lone
+     * `mousedown` (`mousedown`) tracks the mouse on the window, its
+     * `mousemove`s and its `mouseup`, with the same preview, minimum, Escape
+     * and release.
+     */
+    start: (event: PointerEvent | MouseEvent, strip: Strip) => void;
     /**
      * The view turned readonly (or the document read-only): a drag in progress
      * ends at once, its preview dropped, nothing written (its release would be

package/dist/plugins/columns/resize.svelte.js

@@ -1,4 +1,4 @@
-import { takeKeys } from '../../events/onFocus.js';
+import { isLonePress, takeKeys } from '../../events/onFocus.js';
 import { bandOf, gapBefore } from './gaps.js';
 import { stacks } from './stacking.js';
 /** The guide line's width (the hover guide's and the drag's). */
@@ -141,7 +141,23 @@ export class ColumnResize {
         const hi = Math.max(sum - min, width);
         return Math.min(hi, Math.max(lo, width + at - from));
     }
-    /** Press on `strip`: the drag starts, nothing is written until the release. */
+    /**
+     * A `mousedown` on `strip`: no native selection starts there; the press
+     * itself when no `pointerdown` came before it (`isLonePress`: WebKit's
+     * first press after a block drag), which starts the drag as one would.
+     */
+    mousedown = (event, strip) => {
+        event.preventDefault();
+        if (isLonePress(this.edytor, event))
+            this.start(event, strip);
+    };
+    /**
+     * Press on `strip`: the drag starts, nothing is written until the release.
+     * A `pointerdown` tracks its pointer (captured, on the document); a lone
+     * `mousedown` (`mousedown`) tracks the mouse on the window, its
+     * `mousemove`s and its `mouseup`, with the same preview, minimum, Escape
+     * and release.
+     */
     start = (event, strip) => {
         const { edytor } = this;
         if (event.button !== 0 || edytor.readonly || this.drag)
@@ -155,7 +171,9 @@ export class ColumnResize {
         event.preventDefault();
         event.stopPropagation();
         const target = event.currentTarget;
-        target?.setPointerCapture?.(event.pointerId);
+        const pointer = event.type === 'pointerdown';
+        if (pointer)
+            target?.setPointerCapture?.(event.pointerId);
         this.drag = {
             strip,
             left,
@@ -171,6 +189,8 @@ export class ColumnResize {
             height: box.height
         };
         const document = target?.ownerDocument ?? edytor.node?.ownerDocument;
+        const tracked = pointer ? document : document?.defaultView;
+        const [moves, ups] = pointer ? ['pointermove', 'pointerup'] : ['mousemove', 'mouseup'];
         const move = (moved) => {
             if (!this.drag)
                 return;
@@ -181,16 +201,16 @@ export class ColumnResize {
             edytor.overlay.invalidate();
         };
         const end = (ended) => {
-            document?.removeEventListener('pointermove', move);
-            document?.removeEventListener('pointerup', end);
-            document?.removeEventListener('pointercancel', end);
+            tracked?.removeEventListener(moves, move);
+            tracked?.removeEventListener(ups, end);
+            tracked?.removeEventListener('pointercancel', end);
             document?.removeEventListener('keydown', escape, true);
             const drag = this.drag;
             this.drag = null;
             this.guide = null;
             this.#cancel = null;
             edytor.overlay.invalidate();
-            if (drag && ended.type === 'pointerup') {
+            if (drag && ended.type === ups) {
                 drag.at = ended.clientX;
                 this.release(drag);
                 // The editor holds the keys after the release (Notion: Mod+Z right after).
@@ -207,9 +227,10 @@ export class ColumnResize {
             end(key);
         };
         this.#cancel = () => end(new Event('cancel'));
-        document?.addEventListener('pointermove', move);
-        document?.addEventListener('pointerup', end);
-        document?.addEventListener('pointercancel', end);
+        tracked?.addEventListener(moves, move);
+        tracked?.addEventListener(ups, end);
+        if (pointer)
+            tracked?.addEventListener('pointercancel', end);
         document?.addEventListener('keydown', escape, true);
         edytor.overlay.invalidate();
     };

package/dist/plugins/slashMenu/slashMenuPlugin.js

@@ -1,4 +1,5 @@
 import { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from '../blockHandles/BlockHandleController.svelte.js';
+import { onPress } from '../../events/onFocus.js';
 import SlashMenu from './SlashMenu.svelte';
 import { SlashMenuController } from './SlashMenuController.svelte.js';
 /** The slash menu, with your own markup through `menu` or `item` snippets. */
@@ -90,12 +91,13 @@ export const createSlashMenuPlugin = (options = {}) => (edytor) => {
             };
             node.addEventListener(BLOCK_ADD_EVENT, offer);
             node.addEventListener(BLOCK_ACTIVATE_EVENT, activate);
-            node.ownerDocument.addEventListener('pointerdown', outside, true);
+            // Every press, WebKit's lone `mousedown` after a drag too (`onPress`).
+            const offPress = onPress(edytor, node.ownerDocument, outside, true);
             const unmount = edytor.overlay.mount(SlashMenu, { controller, menu: options.menu, item: options.item }, 'edytor-slash-menu-host', 50, positionMenu);
             return () => {
                 node.removeEventListener(BLOCK_ADD_EVENT, offer);
                 node.removeEventListener(BLOCK_ACTIVATE_EVENT, activate);
-                node.ownerDocument.removeEventListener('pointerdown', outside, true);
+                offPress();
                 unmount();
             };
         }

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

@@ -166,7 +166,7 @@ export declare class EdytorSelection {
     private isInsideEditableText;
     private getNonNativeEditableIslandBlock;
     private getNonNativeEditableBlockChromeBlock;
-    handleNonNativeEditableBlockChromePointerDown: (event: PointerEvent) => void;
+    handleNonNativeEditableBlockChromePointerDown: (event: MouseEvent) => void;
     private normalizeTextRangePoints;
     init: () => void;
     /**
@@ -179,7 +179,7 @@ export declare class EdytorSelection {
     private getTextPointFromClientPoint;
     private getTextOffsetFromClientPoint;
     setTextSelectionFromPointer: (text: Text, clientX: number, clientY: number) => void;
-    capturePointerDragStart: (event: PointerEvent) => void;
+    capturePointerDragStart: (event: MouseEvent) => void;
     clearPointerDragStart: () => void;
     /**
      * The block selection value over which the DOM caret was put — a primary
@@ -191,7 +191,7 @@ export declare class EdytorSelection {
      * when the block selection shows no DOM range (for the paste's own keys).
      */
     placedOver: SelectionValue | null;
-    collapseSelectedBlocksAtPointer: (event: PointerEvent) => void;
+    collapseSelectedBlocksAtPointer: (event: MouseEvent) => void;
     restoreInlineAtomDragRange: (event: PointerEvent) => void;
     /**
      * `selectstart` is the only event fired before a drag-selection begins.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "edytor",
-	"version": "0.1.0-next.17",
+	"version": "0.1.0-next.19",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/beynar/edytor.git"