fix(YfmTable): fix button display while dragging (#854)

Author: d3m1d0v

src/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd-ghost.ts

@@ -212,15 +212,18 @@ export class YfmTableDnDGhost {
         const button = target.closest('.g-button');
         if (!button) return null;
 
+        const container = button.ownerDocument.createElement('div');
+        container.classList.add('g-md-yfm-table-dnd-ghost-button');
+
         const rect = button.getBoundingClientRect();
-        const cloned = button.cloneNode(true) as HTMLElement;
+        const cloned = container.appendChild(button.cloneNode(true) as HTMLElement);
 
         removeIdAttributes(cloned);
         cloned.style.cursor = '';
-        cloned.classList.add('g-md-yfm-table-dnd-ghost-button');
+        cloned.style.pointerEvents = 'none';
 
         return {
-            domElement: cloned,
+            domElement: container,
             shiftX: rect.left - this._x,
             shiftY: rect.top - this._y,
         };

src/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.scss

@@ -11,7 +11,7 @@
 }
 
 .yfm.g-md-yfm-table-dnd-ghost,
-.g-button.g-md-yfm-table-dnd-ghost-button {
+.g-md-yfm-table-dnd-ghost-button {
     position: fixed;
 
     cursor: grabbing;
@@ -32,7 +32,7 @@
     }
 }
 
-.g-button.g-md-yfm-table-dnd-ghost-button {
+.g-md-yfm-table-dnd-ghost-button {
     --g-button-background-color-hover: var(--g-color-base-background);
     --g-button-background-color: var(--g-color-base-background);
     --g-button-border-color: var(--g-color-line-brand);