feat: Table add merge / split cell

cycleccc · Jul 9, 2024 · 26250fa · 26250fa
1 parent dac7bbc
commit 26250fa
Show file tree

Hide file tree

Showing 30 changed files with 1,499 additions and 168 deletions.
diff --git a/packages/basic-modules/src/modules/image/render-elem.tsx b/packages/basic-modules/src/modules/image/render-elem.tsx
@@ -33,7 +33,8 @@ function renderContainer(
 
   const style: any = {}
   if (width) style.width = width
-  if (height) style.height = height
+  /** 不强制设置高度 */
+  // if (height) style.height = height
 
   const containerId = genContainerId(editor, elemNode)
 
@@ -60,6 +61,7 @@ function renderResizeContainer(
   let originalX = 0
   let originalWith = 0
   let originalHeight = 0
+  let maxWidth = 0 // 最大宽度
   let revers = false // 是否反转。如向右拖拽 right-top 需增加宽度（非反转），但向右拖拽 left-top 则需要减少宽度（反转）
   let $container: Dom7Array | null = null
 
@@ -72,11 +74,12 @@ function renderResizeContainer(
   /**
    * 初始化。监听事件，记录原始数据
    */
-  function init(clientX: number) {
+  function init(clientX: number, parentNodeWidth: number) {
     $container = getContainerElem()
 
     // 记录当前 x 坐标值
     originalX = clientX
+    maxWidth = parentNodeWidth
 
     // 记录 img 原始宽高
     const $img = $container.find('img')
@@ -104,12 +107,17 @@ function renderResizeContainer(
     const newWidth = originalWith + gap
     const newHeight = originalHeight * (newWidth / originalWith) // 根据 width ，按比例计算 height
 
+    /**
+     * 图片有左右3px margin
+     */
+    if (newWidth > maxWidth - 6) return // 超过最大宽度，不处理
+
     // 实时修改 img 宽高 -【注意】这里只修改 DOM ，mouseup 时再统一不修改 node
     if ($container == null) return
     if (newWidth <= 15 || newHeight <= 15) return // 最小就是 15px
 
     $container.css('width', `${newWidth}px`)
-    $container.css('height', `${newHeight}px`)
+    // $container.css('height', `${newHeight}px`)
   }, 100)
 
   function onMouseup(e: Event) {
@@ -118,14 +126,14 @@ function renderResizeContainer(
 
     if ($container == null) return
     const newWidth = $container.width().toFixed(2)
-    const newHeight = $container.height().toFixed(2)
+    // const newHeight = $container.height().toFixed(2)
 
     // 修改 node
     const props: Partial<ImageElement> = {
       style: {
         ...(elemNode as ImageElement).style,
         width: `${newWidth}px`,
-        height: `${newHeight}px`,
+        // height: `${newHeight}px`,
       },
     }
     Transforms.setNodes(editor, props, { at: DomEditor.findPath(editor, elemNode) })
@@ -136,7 +144,7 @@ function renderResizeContainer(
 
   const style: any = {}
   if (width) style.width = width
-  if (height) style.height = height
+  // if (height) style.height = height
   // style.boxShadow = '0 0 0 1px #B4D5FF' // 自定义 selected 样式，因为有拖拽触手
 
   return (
@@ -157,7 +165,21 @@ function renderResizeContainer(
           if ($target.hasClass('left-top') || $target.hasClass('left-bottom')) {
             revers = true // 反转。向右拖拽，减少宽度
           }
-          init(e.clientX) // 初始化
+
+          // 获取 image 父容器宽度
+          const parentNode = DomEditor.getParentNode(editor, elemNode)
+          if (parentNode == null) return
+          const parentNodeDom = DomEditor.toDOMNode(editor, parentNode)
+          const rect = parentNodeDom.getBoundingClientRect()
+          // 获取元素的计算样式
+          const style = window.getComputedStyle(parentNodeDom)
+          // 获取左右 padding 和 border 的宽度
+          const paddingLeft = parseFloat(style.paddingLeft)
+          const paddingRight = parseFloat(style.paddingRight)
+          const borderLeft = parseFloat(style.borderLeftWidth)
+          const borderRight = parseFloat(style.borderRightWidth)
+
+          init(e.clientX, rect.width - paddingLeft - paddingRight - borderLeft - borderRight) // 初始化
         },
       }}
     >
@@ -177,7 +199,7 @@ function renderImage(elemNode: SlateElement, children: VNode[] | null, editor: I
   const { width = '', height = '' } = style
   const selected = DomEditor.isNodeSelected(editor, elemNode) // 图片是否选中
 
-  const imageStyle: any = {}
+  const imageStyle: any = { maxWidth: '100%' }
   if (width) imageStyle.width = '100%'
   if (height) imageStyle.height = '100%'
 

diff --git a/packages/editor/src/init-default-config/config/hoverbar.ts b/packages/editor/src/init-default-config/config/hoverbar.ts
@@ -32,6 +32,9 @@ const COMMON_HOVERBAR_KEYS = {
       'insertTableCol',
       'deleteTableCol',
       'deleteTable',
+      /** 注册单元格合并 拆分 */
+      'mergeTableCell',
+      'splitTableCell',
     ],
   },
   divider: {

diff --git a/packages/table-module/package.json b/packages/table-module/package.json
@@ -42,10 +42,11 @@
   "peerDependencies": {
     "@wangeditor-next/core": "1.x",
     "dom7": "^3.0.0",
+    "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "nanoid": "^3.2.0",
     "slate": "^0.72.0",
     "snabbdom": "^3.1.0"
   }
-}
+}
diff --git a/packages/table-module/src/assets/index.less b/packages/table-module/src/assets/index.less
@@ -8,23 +8,84 @@
     padding: 10px;
     border-radius: 5px;
     margin-top: 10px;
+    position: relative;
   }
 
   table {
     border-collapse: collapse;
+    table-layout: fixed;
 
-    td,th {
+    td,
+    th {
       border: 1px solid @textarea-border-color;
       padding: 3px 5px;
       min-width: 30px;
       text-align: left;
       line-height: 1.5;
+      /* 强制换行，table column 宽度必须拖动增大 */
+      overflow: hidden;
+      overflow-wrap: break-word;
+      word-break: break-all;
+      white-space: pre-wrap;
     }
+
     th {
       background-color: @textarea-slight-bg-color;
       text-align: center;
       font-weight: bold;
     }
+
+    /* 选区拖影 */
+    td.w-e-selected,
+    th.w-e-selected {
+      background-color: rgba(20, 86, 240, 0.18);
+    }
+  }
+
+  /* 干掉 Chrome 默认选区样式*/
+  table.table-selection-none *::selection {
+    background: none;
+  }
+
+  /* 拖动 Style */
+  .column-resizer {
+    position: absolute;
+    display: flex;
+    top: 10px;
+    left: 11px;
+    width: 0;
+    height: 0;
+    z-index: 1;
+
+    .column-resizer-item {
+      position: relative;
+    }
+  }
+
+  .resizer-line-hotzone {
+    cursor: col-resize;
+    position: absolute;
+    width: 10px;
+    right: -3px;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .2s ease, visibility .2s ease;
+
+    .resizer-line {
+      height: 100%;
+      width: 2px;
+      margin-left: 5px;
+      background: rgba(20, 86, 240, 0.8);
+      user-select: none;
+    }
+  }
+
+  .resizer-line-hotzone.visible {
+    visibility: visible;
+  }
+
+  .resizer-line-hotzone.highlight {
+    opacity: 1;
   }
 }
 
@@ -35,6 +96,15 @@
 
   table {
     border-collapse: collapse;
+    table-layout: fixed;
+  }
+
+  th,
+  td {
+    overflow: hidden;
+    overflow-wrap: break-word;
+    word-break: break-all;
+    white-space: pre-wrap;
   }
 
   td {
@@ -44,7 +114,8 @@
     height: 15px;
     cursor: pointer;
   }
+
   td.active {
     background-color: @toolbar-active-bg-color;
   }
-}
+}
diff --git a/packages/table-module/src/constants/svg.ts b/packages/table-module/src/constants/svg.ts
@@ -40,3 +40,12 @@ export const TABLE_HEADER_SVG =
 // 宽度
 export const FULL_WIDTH_SVG =
   '<svg viewBox="0 0 1228 1024"><path d="M862.514337 563.200461H404.581995v121.753478a13.311987 13.311987 0 0 1-6.655993 11.468789 10.23999 10.23999 0 0 1-12.083188-1.433599l-204.799795-179.199821a13.721586 13.721586 0 0 1 0-20.479979l204.799795-179.302221a10.23999 10.23999 0 0 1 12.185588-1.535998 13.209587 13.209587 0 0 1 6.553593 11.673588v115.097485h457.932342V319.693504a11.571188 11.571188 0 0 1 18.841582-10.239989l204.799795 179.19982a13.721586 13.721586 0 0 1 0 20.47998l-204.799795 179.199821a10.23999 10.23999 0 0 1-12.185588 1.535998 13.311987 13.311987 0 0 1-6.655994-11.571188V563.200461zM136.499064 14.951409v993.893406a15.257585 15.257585 0 0 1-15.155185 15.052785H15.155185A15.155185 15.155185 0 0 1 0 1008.844815V14.951409a15.257585 15.257585 0 0 1 15.155185-15.052785h106.086294a15.155185 15.155185 0 0 1 15.257585 15.155185zM1228.798771 14.951409v993.893406a15.257585 15.257585 0 0 1-15.155185 15.052785h-106.188693a15.155185 15.155185 0 0 1-15.155185-15.052785V14.951409a15.257585 15.257585 0 0 1 15.155185-15.052785h106.086293A15.155185 15.155185 0 0 1 1228.798771 15.053809z"></path></svg>'
+
+// 合并单元格
+export const MERGE_CELL_SVG =
+  '<svg viewBox="0 0 1024 1024"><path d="M482.2 508.4 331.3 389c-3-2.4-7.3-.2-7.3 3.6V478H184V184h204v128c0 2.2 1.8 4 4 4h60c2.2 0 4-1.8 4-4V144c0-15.5-12.5-28-28-28H144c-15.5 0-28 12.5-28 28v736c0 15.5 12.5 28 28 28h284c15.5 0 28-12.5 28-28V712c0-2.2-1.8-4-4-4h-60c-2.2 0-4 1.8-4 4v128H184V546h140v85.4c0 3.8 4.4 6 7.3 3.6l150.9-119.4c2.4-1.8 2.4-5.4 0-7.2zM880 116H596c-15.5 0-28 12.5-28 28v168c0 2.2 1.8 4 4 4h60c2.2 0 4-1.8 4-4V184h204v294H700v-85.4c0-3.8-4.3-6-7.3-3.6l-151 119.4c-2.3 1.8-2.3 5.3 0 7.1l151 119.5c2.9 2.3 7.3.2 7.3-3.6V546h140v294H636V712c0-2.2-1.8-4-4-4h-60c-2.2 0-4 1.8-4 4v168c0 15.5 12.5 28 28 28h284c15.5 0 28-12.5 28-28V144c0-15.5-12.5-28-28-28z"/></svg>'
+
+// 拆分单元格
+export const SPLIT_CELL_SVG =
+  '<svg viewBox="0 0 1024 1024"><path d="M362.667 494.933v53.334l25.6-25.6zm0-241.066L460.8 352V78.933H57.6v98.134h305.067zm0 535.466v57.6H57.6v98.134h403.2V691.2zM661.333 494.933v53.334l-25.6-25.6zm0-241.066L563.2 352V78.933h403.2v98.134H661.333zm0 535.466v57.6H966.4v98.134H563.2V691.2z"/><path d="M753.067 341.333 693.333 281.6 512 460.8 330.667 281.6l-59.734 59.733 181.334 181.334L270.933 704l59.734 59.733L512 582.4l181.333 181.333L753.067 704 571.733 522.667z"/></svg>'
+
diff --git a/packages/table-module/src/locale/en.ts b/packages/table-module/src/locale/en.ts
@@ -13,5 +13,7 @@ export default {
     insertRow: 'Insert row',
     insertTable: 'Insert table',
     header: 'Header',
+    mergeCell: 'merge cell',
+    splitCell: 'solit cell',
   },
 }
diff --git a/packages/table-module/src/locale/zh-CN.ts b/packages/table-module/src/locale/zh-CN.ts
@@ -13,5 +13,7 @@ export default {
     insertRow: '插入行',
     insertTable: '插入表格',
     header: '表头',
+    mergeCell: '合并单元格',
+    splitCell: '拆分单元格',
   },
 }