tiptap-extension-global-drag-handle - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

dist/index.js

@@ -9,3 +9,3 @@ import { Extension } from '@tiptap/core';
     const modal = node.closest('[role="dialog"]');
-    if (modal && window.getComputedStyle(modal).transform !== 'none') {
+    if (modal && window.getComputedStyle(modal).transform !== "none") {
         const modalRect = modal.getBoundingClientRect();
@@ -27,10 +27,10 @@ return {
         .elementsFromPoint(coords.x, coords.y)
-        .find((elem) => elem.parentElement?.matches?.('.ProseMirror') ||
+        .find((elem) => elem.parentElement?.matches?.(".ProseMirror") ||
         elem.matches([
-            'li',
-            'p:not(:first-child)',
-            'pre',
-            'blockquote',
-            'h1, h2, h3, h4, h5, h6',
-        ].join(', ')));
+            "li",
+            "p:not(:first-child)",
+            "pre",
+            "blockquote",
+            "h1, h2, h3, h4, h5, h6",
+        ].join(", ")));
 }
@@ -51,3 +51,3 @@ function nodePosAtDOM(node, view, options) {
 function DragHandlePlugin(options) {
-    let listType = '';
+    let listType = "";
     function handleDragStart(event, view) {
@@ -73,3 +73,3 @@ view.focus();
         // Check if nodePos points to the top level node
-        if (nodePos.node().type.name === 'doc')
+        if (nodePos.node().type.name === "doc")
             differentNodeSelected = true;
@@ -82,2 +82,3 @@ else {
         }
+        let selection = view.state.selection;
         if (!differentNodeSelected &&
@@ -87,12 +88,16 @@ diff !== 0 &&
             const endSelection = NodeSelection.create(view.state.doc, to - 1);
-            const multiNodeSelection = TextSelection.create(view.state.doc, draggedNodePos, endSelection.$to.pos);
-            view.dispatch(view.state.tr.setSelection(multiNodeSelection));
+            selection = TextSelection.create(view.state.doc, draggedNodePos, endSelection.$to.pos);
         }
         else {
-            const nodeSelection = NodeSelection.create(view.state.doc, draggedNodePos);
-            view.dispatch(view.state.tr.setSelection(nodeSelection));
+            selection = NodeSelection.create(view.state.doc, draggedNodePos);
+            // select complete table instead of just a row
+            if (selection.node.type.name === "tableRow") {
+                let $pos = view.state.doc.resolve(selection.from);
+                selection = NodeSelection.create(view.state.doc, $pos.before());
+            }
         }
+        view.dispatch(view.state.tr.setSelection(selection));
         // If the selected node is a list item, we need to save the type of the wrapping list e.g. OL or UL
         if (view.state.selection instanceof NodeSelection &&
-            view.state.selection.node.type.name === 'listItem') {
+            view.state.selection.node.type.name === "listItem") {
             listType = node.parentElement.tagName;
@@ -103,5 +108,5 @@ }
         event.dataTransfer.clearData();
-        event.dataTransfer.setData('text/html', dom.innerHTML);
-        event.dataTransfer.setData('text/plain', text);
-        event.dataTransfer.effectAllowed = 'copyMove';
+        event.dataTransfer.setData("text/html", dom.innerHTML);
+        event.dataTransfer.setData("text/plain", text);
+        event.dataTransfer.effectAllowed = "copyMove";
         event.dataTransfer.setDragImage(node, 0, 0);
@@ -113,3 +118,3 @@ view.dragging = { slice, move: event.ctrlKey };
         if (dragHandleElement) {
-            dragHandleElement.classList.add('hide');
+            dragHandleElement.classList.add("hide");
         }
@@ -119,3 +124,3 @@ }
         if (dragHandleElement) {
-            dragHandleElement.classList.remove('hide');
+            dragHandleElement.classList.remove("hide");
         }
@@ -126,11 +131,13 @@ }
         view: (view) => {
-            const handleBySelector = options.dragHandleSelector ? document.querySelector(options.dragHandleSelector) : null;
-            dragHandleElement = handleBySelector ?? document.createElement('div');
+            const handleBySelector = options.dragHandleSelector
+                ? document.querySelector(options.dragHandleSelector)
+                : null;
+            dragHandleElement = handleBySelector ?? document.createElement("div");
             dragHandleElement.draggable = true;
-            dragHandleElement.dataset.dragHandle = '';
-            dragHandleElement.classList.add('drag-handle');
+            dragHandleElement.dataset.dragHandle = "";
+            dragHandleElement.classList.add("drag-handle");
             function onDragHandleDragStart(e) {
                 handleDragStart(e, view);
             }
-            dragHandleElement.addEventListener('dragstart', onDragHandleDragStart);
+            dragHandleElement.addEventListener("dragstart", onDragHandleDragStart);
             function onDragHandleDrag(e) {
@@ -140,9 +147,9 @@ hideDragHandle();
                 if (e.clientY < options.scrollTreshold) {
-                    window.scrollTo({ top: scrollY - 30, behavior: 'smooth' });
+                    window.scrollTo({ top: scrollY - 30, behavior: "smooth" });
                 }
                 else if (window.innerHeight - e.clientY < options.scrollTreshold) {
-                    window.scrollTo({ top: scrollY + 30, behavior: 'smooth' });
+                    window.scrollTo({ top: scrollY + 30, behavior: "smooth" });
                 }
             }
-            dragHandleElement.addEventListener('drag', onDragHandleDrag);
+            dragHandleElement.addEventListener("drag", onDragHandleDrag);
             hideDragHandle();
@@ -157,4 +164,4 @@ if (!handleBySelector) {
                     }
-                    dragHandleElement?.removeEventListener('drag', onDragHandleDrag);
-                    dragHandleElement?.removeEventListener('dragstart', onDragHandleDragStart);
+                    dragHandleElement?.removeEventListener("drag", onDragHandleDrag);
+                    dragHandleElement?.removeEventListener("dragstart", onDragHandleDragStart);
                     dragHandleElement = null;
@@ -174,5 +181,5 @@ },
                     });
-                    const notDragging = node?.closest('.not-draggable');
+                    const notDragging = node?.closest(".not-draggable");
                     if (!(node instanceof Element) ||
-                        node.matches('ul, ol') ||
+                        node.matches("ul, ol") ||
                         notDragging) {
@@ -192,3 +199,3 @@ hideDragHandle();
                     // Li markers
-                    if (node.matches('ul:not([data-type=taskList]) li, ol li')) {
+                    if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
                         rect.left -= options.dragHandleWidth;
@@ -211,6 +218,6 @@ }
                 dragstart: (view) => {
-                    view.dom.classList.add('dragging');
+                    view.dom.classList.add("dragging");
                 },
                 drop: (view, event) => {
-                    view.dom.classList.remove('dragging');
+                    view.dom.classList.remove("dragging");
                     hideDragHandle();
@@ -230,8 +237,8 @@ let droppedNode = null;
                     const resolvedPos = view.state.doc.resolve(dropPos.pos);
-                    const isDroppedInsideList = resolvedPos.parent.type.name === 'listItem';
+                    const isDroppedInsideList = resolvedPos.parent.type.name === "listItem";
                     // If the selected node is a list item and is not dropped inside a list, we need to wrap it inside <ol> tag otherwise ol list items will be transformed into ul list item when dropped
                     if (view.state.selection instanceof NodeSelection &&
-                        view.state.selection.node.type.name === 'listItem' &&
+                        view.state.selection.node.type.name === "listItem" &&
                         !isDroppedInsideList &&
-                        listType == 'OL') {
+                        listType == "OL") {
                         const text = droppedNode.textContent;
@@ -248,3 +255,3 @@ if (!text)
                 dragend: (view) => {
-                    view.dom.classList.remove('dragging');
+                    view.dom.classList.remove("dragging");
                 },
@@ -256,3 +263,3 @@ },
 const GlobalDragHandle = Extension.create({
-    name: 'globalDragHandle',
+    name: "globalDragHandle",
     addOptions() {
@@ -267,3 +274,3 @@ return {
             DragHandlePlugin({
-                pluginKey: 'globalDragHandle',
+                pluginKey: "globalDragHandle",
                 dragHandleWidth: this.options.dragHandleWidth,
@@ -270,0 +277,0 @@ scrollTreshold: this.options.scrollTreshold,

dist/index.umd.js

@@ -10,3 +10,3 @@ (function (global, factory) {
       const modal = node.closest('[role="dialog"]');
-      if (modal && window.getComputedStyle(modal).transform !== 'none') {
+      if (modal && window.getComputedStyle(modal).transform !== "none") {
           const modalRect = modal.getBoundingClientRect();
@@ -28,10 +28,10 @@ return {
           .elementsFromPoint(coords.x, coords.y)
-          .find((elem) => elem.parentElement?.matches?.('.ProseMirror') ||
+          .find((elem) => elem.parentElement?.matches?.(".ProseMirror") ||
           elem.matches([
-              'li',
-              'p:not(:first-child)',
-              'pre',
-              'blockquote',
-              'h1, h2, h3, h4, h5, h6',
-          ].join(', ')));
+              "li",
+              "p:not(:first-child)",
+              "pre",
+              "blockquote",
+              "h1, h2, h3, h4, h5, h6",
+          ].join(", ")));
   }
@@ -52,3 +52,3 @@ function nodePosAtDOM(node, view, options) {
   function DragHandlePlugin(options) {
-      let listType = '';
+      let listType = "";
       function handleDragStart(event, view$1) {
@@ -74,3 +74,3 @@ view$1.focus();
           // Check if nodePos points to the top level node
-          if (nodePos.node().type.name === 'doc')
+          if (nodePos.node().type.name === "doc")
               differentNodeSelected = true;
@@ -83,2 +83,3 @@ else {
           }
+          let selection = view$1.state.selection;
           if (!differentNodeSelected &&
@@ -88,12 +89,16 @@ diff !== 0 &&
               const endSelection = state.NodeSelection.create(view$1.state.doc, to - 1);
-              const multiNodeSelection = state.TextSelection.create(view$1.state.doc, draggedNodePos, endSelection.$to.pos);
-              view$1.dispatch(view$1.state.tr.setSelection(multiNodeSelection));
+              selection = state.TextSelection.create(view$1.state.doc, draggedNodePos, endSelection.$to.pos);
           }
           else {
-              const nodeSelection = state.NodeSelection.create(view$1.state.doc, draggedNodePos);
-              view$1.dispatch(view$1.state.tr.setSelection(nodeSelection));
+              selection = state.NodeSelection.create(view$1.state.doc, draggedNodePos);
+              // select complete table instead of just a row
+              if (selection.node.type.name === "tableRow") {
+                  let $pos = view$1.state.doc.resolve(selection.from);
+                  selection = state.NodeSelection.create(view$1.state.doc, $pos.before());
+              }
           }
+          view$1.dispatch(view$1.state.tr.setSelection(selection));
           // If the selected node is a list item, we need to save the type of the wrapping list e.g. OL or UL
           if (view$1.state.selection instanceof state.NodeSelection &&
-              view$1.state.selection.node.type.name === 'listItem') {
+              view$1.state.selection.node.type.name === "listItem") {
               listType = node.parentElement.tagName;
@@ -104,5 +109,5 @@ }
           event.dataTransfer.clearData();
-          event.dataTransfer.setData('text/html', dom.innerHTML);
-          event.dataTransfer.setData('text/plain', text);
-          event.dataTransfer.effectAllowed = 'copyMove';
+          event.dataTransfer.setData("text/html", dom.innerHTML);
+          event.dataTransfer.setData("text/plain", text);
+          event.dataTransfer.effectAllowed = "copyMove";
           event.dataTransfer.setDragImage(node, 0, 0);
@@ -114,3 +119,3 @@ view$1.dragging = { slice, move: event.ctrlKey };
           if (dragHandleElement) {
-              dragHandleElement.classList.add('hide');
+              dragHandleElement.classList.add("hide");
           }
@@ -120,3 +125,3 @@ }
           if (dragHandleElement) {
-              dragHandleElement.classList.remove('hide');
+              dragHandleElement.classList.remove("hide");
           }
@@ -127,11 +132,13 @@ }
           view: (view) => {
-              const handleBySelector = options.dragHandleSelector ? document.querySelector(options.dragHandleSelector) : null;
-              dragHandleElement = handleBySelector ?? document.createElement('div');
+              const handleBySelector = options.dragHandleSelector
+                  ? document.querySelector(options.dragHandleSelector)
+                  : null;
+              dragHandleElement = handleBySelector ?? document.createElement("div");
               dragHandleElement.draggable = true;
-              dragHandleElement.dataset.dragHandle = '';
-              dragHandleElement.classList.add('drag-handle');
+              dragHandleElement.dataset.dragHandle = "";
+              dragHandleElement.classList.add("drag-handle");
               function onDragHandleDragStart(e) {
                   handleDragStart(e, view);
               }
-              dragHandleElement.addEventListener('dragstart', onDragHandleDragStart);
+              dragHandleElement.addEventListener("dragstart", onDragHandleDragStart);
               function onDragHandleDrag(e) {
@@ -141,9 +148,9 @@ hideDragHandle();
                   if (e.clientY < options.scrollTreshold) {
-                      window.scrollTo({ top: scrollY - 30, behavior: 'smooth' });
+                      window.scrollTo({ top: scrollY - 30, behavior: "smooth" });
                   }
                   else if (window.innerHeight - e.clientY < options.scrollTreshold) {
-                      window.scrollTo({ top: scrollY + 30, behavior: 'smooth' });
+                      window.scrollTo({ top: scrollY + 30, behavior: "smooth" });
                   }
               }
-              dragHandleElement.addEventListener('drag', onDragHandleDrag);
+              dragHandleElement.addEventListener("drag", onDragHandleDrag);
               hideDragHandle();
@@ -158,4 +165,4 @@ if (!handleBySelector) {
                       }
-                      dragHandleElement?.removeEventListener('drag', onDragHandleDrag);
-                      dragHandleElement?.removeEventListener('dragstart', onDragHandleDragStart);
+                      dragHandleElement?.removeEventListener("drag", onDragHandleDrag);
+                      dragHandleElement?.removeEventListener("dragstart", onDragHandleDragStart);
                       dragHandleElement = null;
@@ -175,5 +182,5 @@ },
                       });
-                      const notDragging = node?.closest('.not-draggable');
+                      const notDragging = node?.closest(".not-draggable");
                       if (!(node instanceof Element) ||
-                          node.matches('ul, ol') ||
+                          node.matches("ul, ol") ||
                           notDragging) {
@@ -193,3 +200,3 @@ hideDragHandle();
                       // Li markers
-                      if (node.matches('ul:not([data-type=taskList]) li, ol li')) {
+                      if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
                           rect.left -= options.dragHandleWidth;
@@ -212,6 +219,6 @@ }
                   dragstart: (view) => {
-                      view.dom.classList.add('dragging');
+                      view.dom.classList.add("dragging");
                   },
                   drop: (view, event) => {
-                      view.dom.classList.remove('dragging');
+                      view.dom.classList.remove("dragging");
                       hideDragHandle();
@@ -231,8 +238,8 @@ let droppedNode = null;
                       const resolvedPos = view.state.doc.resolve(dropPos.pos);
-                      const isDroppedInsideList = resolvedPos.parent.type.name === 'listItem';
+                      const isDroppedInsideList = resolvedPos.parent.type.name === "listItem";
                       // If the selected node is a list item and is not dropped inside a list, we need to wrap it inside <ol> tag otherwise ol list items will be transformed into ul list item when dropped
                       if (view.state.selection instanceof state.NodeSelection &&
-                          view.state.selection.node.type.name === 'listItem' &&
+                          view.state.selection.node.type.name === "listItem" &&
                           !isDroppedInsideList &&
-                          listType == 'OL') {
+                          listType == "OL") {
                           const text = droppedNode.textContent;
@@ -249,3 +256,3 @@ if (!text)
                   dragend: (view) => {
-                      view.dom.classList.remove('dragging');
+                      view.dom.classList.remove("dragging");
                   },
@@ -257,3 +264,3 @@ },
   const GlobalDragHandle = core.Extension.create({
-      name: 'globalDragHandle',
+      name: "globalDragHandle",
       addOptions() {
@@ -268,3 +275,3 @@ return {
               DragHandlePlugin({
-                  pluginKey: 'globalDragHandle',
+                  pluginKey: "globalDragHandle",
                   dragHandleWidth: this.options.dragHandleWidth,
@@ -271,0 +278,0 @@ scrollTreshold: this.options.scrollTreshold,

dist/src/index.d.ts

@@ -1,3 +0,3 @@
-import { Extension } from '@tiptap/core';
-import { Plugin } from '@tiptap/pm/state';
+import { Extension } from "@tiptap/core";
+import { Plugin } from "@tiptap/pm/state";
 export interface GlobalDragHandleOptions {
@@ -4,0 +4,0 @@ /**

package.json

 {
   "name": "tiptap-extension-global-drag-handle",
   "description": "drag handle extension for tiptap",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "author": {
@@ -6,0 +6,0 @@ "name": "Niclas Gregor",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

106506

increased by2.51%

Lines of code

836

increased by2.58%

No dependency changes