feat(table module): add table property setting

packages/editor/src/init-default-config/config/hoverbar.ts

@@ -35,6 +35,9 @@ const COMMON_HOVERBAR_KEYS = {
       /** 注册单元格合并 拆分 */
       'mergeTableCell',
       'splitTableCell',
+      /** 注册表格/单元格属性设置 */
+      'setTableProperty',
+      'setTableCellProperty',
     ],
   },
   divider: {

packages/table-module/src/assets/index.less

@@ -118,4 +118,93 @@
   td.active {
     background-color: @toolbar-active-bg-color;
   }
+}
+
+.w-e-modal {
+  .babel-container {
+    span.babel-container-border {
+      display: flex;
+
+      &> * {
+        height: 28px;
+        border: 1px solid var(--w-e-modal-button-border-color);
+        border-radius: 2px;
+      }
+
+      select {
+        width: 114px;
+      }
+
+      > :nth-child(n+2) {
+        margin-left: 8px;
+      }
+
+      input:nth-child(3) {
+        width: 100px;
+      }
+    }
+
+    span.babel-container-background input {
+      height: 28px;
+      border: 1px solid var(--w-e-modal-button-border-color);
+      border-radius: 2px;
+      width: 60px;
+    }
+
+    .color-group {
+      position: relative;
+      width: 28px;
+      height: 28px;
+      border: 1px solid var(--w-e-modal-button-border-color);
+      border-radius: 2px;
+      cursor: pointer;
+
+      .w-e-drop-panel {
+        margin-top: 28px;
+      }
+    }
+
+    .color-group-block {
+      display: block;
+      width: 80%;
+      height: 80%;
+      margin: 10%;
+
+      svg {
+        width: 20px;
+        height: 20px;
+        margin: 1px 0px;
+      }
+    }
+
+    .radio-group {
+      display: inline-block;
+      border: 1px solid var(--w-e-modal-button-border-color);
+      border-radius: 2px;
+      height: 28px;
+      font-size: 0;
+    }
+
+    .radio-item {
+      display: inline-block;
+      margin: 0;
+      font-size: 14px;
+      padding: 5px 10px;
+      height: 26px;
+      cursor: pointer;
+
+      svg {
+        width: 14px;
+        height: 14px;
+      }
+
+      &.is-active {
+        background-color: rgba(0, 166, 255, 0.1);
+
+        svg {
+          fill: rgba(0, 166, 255, 1);
+        }
+      }
+    }
+  }
 }

packages/table-module/src/constants/svg.ts

@@ -48,3 +48,31 @@ export const MERGE_CELL_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>'
+
+// 表格属性
+export const TABLE_PROPERTY_SVG =
+  '<svg viewBox="0 0 20 20"><path d="M8 2v5h4V2h1v5h5v1h-5v4h.021l-.172.351-1.916.28-.151.027c-.287.063-.54.182-.755.341L8 13v5H7v-5H2v-1h5V8H2V7h5V2h1zm4 6H8v4h4V8z" opacity=".6"/><path d="m15.5 11.5 1.323 2.68 2.957.43-2.14 2.085.505 2.946L15.5 18.25l-2.645 1.39.505-2.945-2.14-2.086 2.957-.43L15.5 11.5zM17 1a2 2 0 0 1 2 2v9.475l-.85-.124-.857-1.736a2.048 2.048 0 0 0-.292-.44L17 3H3v14h7.808l.402.392L10.935 19H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h14z"/></svg>'
+
+// 单元格属性
+export const CELL_PROPERTY_SVG =
+  '<svg viewBox="0 0 20 20"><path d="m11.105 18-.17 1H2.5A1.5 1.5 0 0 1 1 17.5v-15A1.5 1.5 0 0 1 2.5 1h15A1.5 1.5 0 0 1 19 2.5v9.975l-.85-.124-.15-.302V8h-5v4h.021l-.172.351-1.916.28-.151.027c-.287.063-.54.182-.755.341L8 13v5h3.105zM2 12h5V8H2v4zm10-4H8v4h4V8zM2 2v5h5V2H2zm0 16h5v-5H2v5zM13 7h5V2h-5v5zM8 2v5h4V2H8z" opacity=".6"/><path d="m15.5 11.5 1.323 2.68 2.957.43-2.14 2.085.505 2.946L15.5 18.25l-2.645 1.39.505-2.945-2.14-2.086 2.957-.43L15.5 11.5zM13 6a1 1 0 0 1 1 1v3.172a2.047 2.047 0 0 0-.293.443l-.858 1.736-1.916.28-.151.027A1.976 1.976 0 0 0 9.315 14H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm-1 2H8v4h4V8z"/></svg>'
+
+// 左对齐
+export const JUSTIFY_LEFT_SVG =
+  '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>'
+
+// 右对齐
+export const JUSTIFY_RIGHT_SVG =
+  '<svg viewBox="0 0 1024 1024"><path d="M972.8 793.6v102.4H256v-102.4h716.8z m0-230.4v102.4H51.2v-102.4h921.6z m0-230.4v102.4H256v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>'
+
+// 居中对齐
+export const JUSTIFY_CENTER_SVG =
+  '<svg viewBox="0 0 1024 1024"><path d="M870.4 793.6v102.4H153.6v-102.4h716.8z m102.4-230.4v102.4H51.2v-102.4h921.6z m-102.4-230.4v102.4H153.6v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>'
+
+// 两端对齐
+export const JUSTIFY_JUSTIFY_SVG =
+  '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m0 192h1024v128H0z m0 192h1024v128H0z m0 192h1024v128H0z m0 192h1024v128H0z"></path></svg>'
+
+// 清空（颜色）
+export const CLEAN_SVG =
+  '<svg viewBox="0 0 1024 1024"><path d="M236.8 128L896 787.2V128H236.8z m614.4 704L192 172.8V832h659.2zM192 64h704c38.4 0 64 25.6 64 64v704c0 38.4-25.6 64-64 64H192c-38.4 0-64-25.6-64-64V128c0-38.4 25.6-64 64-64z"></path></svg>'

packages/table-module/src/locale/en.ts

@@ -5,6 +5,28 @@
 
 export default {
   tableModule: {
+    modal: {
+      border: 'Border',
+      borderWidth: 'Width',
+      bgColor: 'Back color',
+      align: 'Text Align',
+      ok: 'OK',
+    },
+    color: {
+      default: 'Default color',
+      clear: 'Clear back color',
+    },
+    borderStyle: {
+      none: 'None',
+      solid: 'Solid',
+      dotted: 'Dotted',
+      dashed: 'Dashed',
+      double: 'Double',
+      groove: 'Groove',
+      ridge: 'Ridge',
+      inset: 'Inset',
+      outset: 'Outset',
+    },
     deleteCol: 'Delete column',
     deleteRow: 'Delete row',
     deleteTable: 'Delete table',
@@ -15,5 +37,7 @@ export default {
     header: 'Header',
     mergeCell: 'merge cell',
     splitCell: 'split cell',
+    tableProperty: 'Table property',
+    cellProperty: 'Cell property',
   },
 }

packages/table-module/src/locale/zh-CN.ts

@@ -5,6 +5,28 @@
 
 export default {
   tableModule: {
+    modal: {
+      border: '边框',
+      borderWidth: '宽度',
+      bgColor: '背景色',
+      align: '对齐方式',
+      ok: '确定',
+    },
+    color: {
+      default: '默认颜色',
+      clear: '清除背景色',
+    },
+    borderStyle: {
+      none: '无样式',
+      solid: '实线',
+      dotted: '点状虚线',
+      dashed: '虚线',
+      double: '双线',
+      groove: '凹槽边框',
+      ridge: '菱形边框',
+      inset: '凹边框',
+      outset: '凸边框',
+    },
     deleteCol: '删除列',
     deleteRow: '删除行',
     deleteTable: '删除表格',
@@ -15,5 +37,7 @@ export default {
     header: '表头',
     mergeCell: '合并单元格',
     splitCell: '拆分单元格',
+    tableProperty: '表格属性',
+    cellProperty: '单元格属性',
   },
 }

packages/table-module/src/module/custom-types.ts

@@ -6,6 +6,14 @@
 import { Text } from 'slate'
 
 //【注意】需要把自定义的 Element 引入到最外层的 custom-types.d.ts
+export type TableCellProperty = {
+  /** 用于设置单元格属性 */
+  backgroundColor?: string // 背景色
+  borderWidth?: string // 边框宽度
+  borderStyle?: string // 边框样式
+  borderColor?: string // 边框颜色
+  textAlign?: string // 对齐方式
+}
 
 export type TableCellElement = {
   type: 'table-cell'
@@ -17,7 +25,7 @@ export type TableCellElement = {
 
   /** 用于设置单元格的 display 属性 */
   hidden?: boolean
-}
+} & TableCellProperty
 
 export type TableRowElement = {
   type: 'table-row'

packages/table-module/src/module/index.ts

@@ -8,6 +8,9 @@ import withTable from './plugin'
 import { renderTableConf, renderTableRowConf, renderTableCellConf } from './render-elem/index'
 import { tableToHtmlConf, tableRowToHtmlConf, tableCellToHtmlConf } from './elem-to-html'
 import { preParseTableHtmlConf } from './pre-parse-html'
+import { renderStyle } from './render-style'
+import { styleToHtml } from './style-to-html'
+import { parseStyleHtml } from './parse-style-html'
 import { parseCellHtmlConf, parseRowHtmlConf, parseTableHtmlConf } from './parse-elem-html'
 import {
   insertTableMenuConf,
@@ -20,9 +23,14 @@ import {
   tableFullWidthMenuConf,
   mergeTableCellConf,
   splitTableCellConf,
+  setTablePropertyConf,
+  setTableCellPropertyConf,
 } from './menu/index'
 
 const table: Partial<IModuleConf> = {
+  renderStyle,
+  styleToHtml,
+  parseStyleHtml,
   renderElems: [renderTableConf, renderTableRowConf, renderTableCellConf],
   elemsToHtml: [tableToHtmlConf, tableRowToHtmlConf, tableCellToHtmlConf],
   preParseHtml: [preParseTableHtmlConf],
@@ -38,6 +46,8 @@ const table: Partial<IModuleConf> = {
     tableFullWidthMenuConf,
     mergeTableCellConf,
     splitTableCellConf,
+    setTablePropertyConf,
+    setTableCellPropertyConf,
   ],
   editorPlugin: withTable,
 }

packages/table-module/src/module/menu/CellProperty.ts

@@ -0,0 +1,22 @@
+import { Editor } from 'slate'
+import { IButtonMenu, IDomEditor, t } from '@wangeditor-next/core'
+import { CELL_PROPERTY_SVG } from '../../constants/svg'
+import { isOfType } from '../../utils'
+import TableProperty from './TableProperty'
+
+class CellProperty extends TableProperty implements IButtonMenu {
+  readonly title = t('tableModule.cellProperty')
+  readonly iconSvg = CELL_PROPERTY_SVG
+  readonly tag = 'button'
+  readonly showModal = true
+  readonly modalWidth = 300
+
+  getModalContentNode(editor: IDomEditor) {
+    const [node] = Editor.nodes(editor, {
+      match: isOfType(editor, 'td'),
+    })
+    return node
+  }
+}
+
+export default CellProperty