pref: add a mouse scroll event listener to the table

halo-dev · Jan 16, 2024 · 3cf0d05 · 3cf0d05
1 parent 08db867
commit 3cf0d05
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 34 deletions.
diff --git a/console/packages/editor/src/extensions/table/index.ts b/console/packages/editor/src/extensions/table/index.ts
@@ -5,10 +5,10 @@ import {
   type Range,
   isNodeActive,
 } from "@/tiptap/vue-3";
-import type {
-  Node as ProseMirrorNode,
-  NodeView,
-  EditorState,
+import {
+  type Node as ProseMirrorNode,
+  type NodeView,
+  type EditorState,
 } from "@/tiptap/pm";
 import TableCell from "./table-cell";
 import TableRow from "./table-row";
@@ -104,15 +104,24 @@ class TableView implements NodeView {
 
   contentDOM: HTMLElement;
 
+  containerDOM: HTMLElement;
+
   constructor(node: ProseMirrorNode, cellMinWidth: number) {
     this.node = node;
     this.cellMinWidth = cellMinWidth;
     this.dom = document.createElement("div");
-    this.dom.className = "tableWrapper";
+    this.dom.className = "table-container";
+
+    this.containerDOM = this.dom.appendChild(document.createElement("div"));
+
+    this.containerDOM.className = "tableWrapper";
+    this.containerDOM.addEventListener("wheel", (e) => {
+      return this.handleHorizontalWheel(this.containerDOM, e);
+    });
 
     this.scrollDom = document.createElement("div");
     this.scrollDom.className = "scrollWrapper";
-    this.dom.appendChild(this.scrollDom);
+    this.containerDOM.appendChild(this.scrollDom);
 
     this.table = this.scrollDom.appendChild(document.createElement("table"));
     this.colgroup = this.table.appendChild(document.createElement("colgroup"));
@@ -127,7 +136,6 @@ class TableView implements NodeView {
 
     this.node = node;
     updateColumns(node, this.colgroup, this.table, this.cellMinWidth);
-
     return true;
   }
 
@@ -140,6 +148,16 @@ class TableView implements NodeView {
         this.colgroup.contains(mutation.target))
     );
   }
+
+  handleHorizontalWheel(dom: HTMLElement, event: WheelEvent) {
+    const { scrollWidth, clientWidth } = dom;
+    const hasScrollWidth = scrollWidth > clientWidth;
+    if (hasScrollWidth) {
+      event.stopPropagation();
+      event.preventDefault();
+      dom.scrollBy({ left: event.deltaY });
+    }
+  }
 }
 
 const Table = TiptapTable.extend<ExtensionOptions & TableOptions>({

diff --git a/console/packages/editor/src/styles/table.scss b/console/packages/editor/src/styles/table.scss
@@ -6,6 +6,25 @@
   $tableResizeHandleBgColor: #adf;
 
   .ProseMirror {
+    .table-container {
+      position: relative;
+
+      &.table-right-shadow {
+        &::after {
+          bottom: 15px;
+          background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08));
+          right: 0;
+          content: " ";
+          position: absolute;
+          pointer-events: none;
+          top: 0;
+          width: 8px;
+          z-index: 2;
+          margin-top: 14px;
+        }
+      }
+    }
+
     .tableWrapper {
       position: relative;
       margin: 0.5em 0px;
@@ -18,33 +37,6 @@
           margin-top: -20px;
         }
       }
-
-      &:hover {
-        &::-webkit-scrollbar {
-          display: block;
-          width: 0.5rem;
-          height: 0.5rem;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          border-radius: 1rem;
-          background-color: rgba(50, 50, 50, 0.3);
-        }
-
-        &::-webkit-scrollbar-track {
-          border-radius: 1rem;
-          background-color: rgba(50, 50, 50, 0.1);
-        }
-
-        &::-webkit-scrollbar-thumb:hover {
-          border-radius: 1rem;
-          background-color: rgba(50, 50, 50, 0.5);
-        }
-      }
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
     }
 
     .scrollWrapper {