edytor 0.1.0-next.17 → 0.1.0-next.18

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.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.
 
 ## 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.js

@@ -39,6 +39,35 @@ export const takeKeys = (edytor) => {
 };
 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.
+     */
+    let compat = false;
+    let lone = null;
+    /** 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 +141,37 @@ 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;
+            lone = null;
+            gesture(event);
+        }, { capture: true }),
+        on(node.ownerDocument, 'mousedown', (event) => {
+            lone = compat || !event.isTrusted || event.button !== 0 ? null : event;
+            compat = false;
+            if (lone)
+                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)
+                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 (event === lone)
+                pressInside(event);
         }),
         on(node, 'pointerup', (event) => {
             edytor.markUserGesture();

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.18",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/beynar/edytor.git"