edytor 0.1.0-next.28 → 0.1.0-next.30

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.28`, `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.30`, `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/plugins/blockHandles/BlockHandleController.svelte.js

@@ -120,27 +120,6 @@ const backdrop = (document) => {
     node.setAttribute('aria-hidden', 'true');
     return node;
 };
-/** How many blocks move: the badge on the drag preview and the drop indicator. */
-const countBadge = (document, count) => {
-    const badge = document.createElement('span');
-    badge.dataset.edytorDragCount = 'true';
-    badge.textContent = String(count);
-    Object.assign(badge.style, {
-        position: 'absolute',
-        top: '-8px',
-        right: '-8px',
-        minWidth: '18px',
-        height: '18px',
-        padding: '0 5px',
-        boxSizing: 'border-box',
-        borderRadius: '9px',
-        background: 'rgb(35, 131, 226)',
-        color: 'white',
-        font: '600 11px/18px system-ui, sans-serif',
-        textAlign: 'center'
-    });
-    return badge;
-};
 export class BlockHandleController {
     edytor;
     options;
@@ -367,9 +346,7 @@ export class BlockHandleController {
                 const root = this.edytor.node;
                 const nodes = group.flatMap((moved) => (moved.node ? [moved.node] : []));
                 if (nativeSetDragImage && root && nodes.length) {
-                    const count = group.length;
-                    const badge = count > 1 ? countBadge(element.ownerDocument, count) : undefined;
-                    const preview = dragPreview(root, nodes, location.current.input, badge);
+                    const preview = dragPreview(root, nodes, location.current.input);
                     setCustomNativeDragPreview({
                         nativeSetDragImage,
                         getOffset: preview.offset,
@@ -1047,13 +1024,9 @@ export class BlockHandleController {
             overlay.dataset.blocked = 'true';
         overlay.setAttribute('aria-hidden', 'true');
         const count = this.group.length;
-        if (count > 1) {
-            // The count sits in the gutter at the bar's start, where the handles are.
+        // How many blocks move, as data only: the bar shows no badge.
+        if (count > 1)
             overlay.dataset.count = String(count);
-            const badge = countBadge(document, count);
-            Object.assign(badge.style, { top: `${BAR / 2 - 9}px`, right: 'auto', left: '-26px' });
-            overlay.append(badge);
-        }
         const color = document.defaultView
             ?.getComputedStyle(placement.node)
             .getPropertyValue('--edytor-drop-indicator-color')

package/dist/plugins/blockHandles/dragPreview.d.ts

@@ -21,13 +21,13 @@ export type DragPreview = {
 /**
  * The ghost of `nodes` (the dragged blocks' elements, in document order),
  * grabbed at `pointer`: a copy of each block laid out at its own width (the
- * widest of them; the editor's content width when none is laid out), scaled by `SCALE` from its top left, cut at `MAX_HEIGHT`, and a
- * count badge when more than one block moves (the one addition). No card,
- * background, shadow, opacity or fade: the blocks' own look. The pointer
+ * widest of them; the editor's content width when none is laid out), scaled by `SCALE` from its top left, cut at `MAX_HEIGHT`.
+ * Nothing is added (no card, background, shadow, opacity, fade or count
+ * badge): the blocks' own look. The pointer
  * keeps its place on the first block (a handle is left of it: a transparent
  * gutter keeps the offset positive, which every browser supports).
  */
 export declare const dragPreview: (root: HTMLElement, nodes: HTMLElement[], pointer: {
     clientX: number;
     clientY: number;
-}, badge?: HTMLElement) => DragPreview;
+}) => DragPreview;

package/dist/plugins/blockHandles/dragPreview.js

@@ -158,13 +158,13 @@ const contentWidth = (root) => {
 /**
  * The ghost of `nodes` (the dragged blocks' elements, in document order),
  * grabbed at `pointer`: a copy of each block laid out at its own width (the
- * widest of them; the editor's content width when none is laid out), scaled by `SCALE` from its top left, cut at `MAX_HEIGHT`, and a
- * count badge when more than one block moves (the one addition). No card,
- * background, shadow, opacity or fade: the blocks' own look. The pointer
+ * widest of them; the editor's content width when none is laid out), scaled by `SCALE` from its top left, cut at `MAX_HEIGHT`.
+ * Nothing is added (no card, background, shadow, opacity, fade or count
+ * badge): the blocks' own look. The pointer
  * keeps its place on the first block (a handle is left of it: a transparent
  * gutter keeps the offset positive, which every browser supports).
  */
-export const dragPreview = (root, nodes, pointer, badge) => {
+export const dragPreview = (root, nodes, pointer) => {
     const { ownerDocument: document } = root;
     const first = nodes[0]?.getBoundingClientRect();
     const dx = first ? pointer.clientX - first.left : 0;
@@ -201,10 +201,6 @@ export const dragPreview = (root, nodes, pointer, badge) => {
         overflow: 'hidden'
     });
     box.append(scaled);
-    if (badge) {
-        Object.assign(badge.style, { top: '4px', right: '4px' });
-        box.append(badge);
-    }
     const element = document.createElement('div');
     element.dataset.edytorDragPreview = 'true';
     element.dataset.count = String(nodes.length);

package/package.json

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