edytor 0.1.0-next.18 → 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.18`, `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/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,21 +37,54 @@ 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;
     /*
-     * 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`). 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.
+     * 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;
-    let lone = null;
+    const lone = (event) => isLonePress(edytor, event);
     /** Where the press landed: the gesture serial, and whether the user went outside. */
     const gesture = (event) => {
         edytor.markUserGesture();
@@ -150,27 +183,29 @@ export const attachFocus = (edytor, node) => {
         on(node.ownerDocument, 'pointerdown', (event) => {
             if (event.isPrimary)
                 compat = true;
-            lone = null;
+            lonePresses.delete(edytor);
             gesture(event);
         }, { capture: true }),
         on(node.ownerDocument, 'mousedown', (event) => {
-            lone = compat || !event.isTrusted || event.button !== 0 ? null : event;
+            const press = !compat && event.isTrusted && event.button === 0;
             compat = false;
-            if (lone)
-                gesture(event);
+            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 (event === lone)
+            if (lone(event))
                 edytor.selection.handleNonNativeEditableBlockChromePointerDown(event);
         }, { capture: true }),
         // The document's capture listener already marked the gesture.
         on(node, 'pointerdown', pressInside),
         on(node, 'mousedown', (event) => {
-            if (event === lone)
+            if (lone(event))
                 pressInside(event);
         }),
         on(node, 'pointerup', (event) => {
@@ -225,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/package.json

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