add table cell background (#413)

(cherry picked from commit 96f2411)

packages/easy-email-core/src/blocks/advanced/generateAdvancedTableBlock.tsx

@@ -57,7 +57,7 @@ export function generateAdvancedTableBlock(option: {
             e =>
               `<td rowspan="${e.rowSpan || 1}" colspan="${
                 e.colSpan || 1
-              }" style="${styles.join(';')}">${e.content}</td>`,
+              }" style="${styles.join(';')}; background-color:${e.backgroundColor};">${e.content}</td>`,
           );
           return `<tr style="text-align:${textAlign};font-style:${fontStyle};">${_trString.join(
             '\n',
@@ -81,6 +81,7 @@ export interface IAdvancedTableData {
   content: string;
   colSpan?: number;
   rowSpan?: number;
+  backgroundColor?: string;
 }
 
 export type AdvancedTableBlock = IBlockData<

packages/easy-email-extensions/src/AttributePanel/components/blocks/AdvancedTable/Operation/menu.scss

@@ -1,6 +1,6 @@
 .easy-email-table-operation-menu {
   background-color: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   font-size: 14px;
   z-index: 100;
   overflow: hidden;
@@ -12,7 +12,6 @@
     background-color: #efefef;
   }
 
-
   .easy-email-table-operation-color-picker {
     display: flex;
     align-items: center;
@@ -53,5 +52,63 @@
       font-size: 0;
     }
   }
-}
 
+  .easy-email-table-operation-menu-bg-item {
+    padding: 10px 16px;
+    background-color: #fff;
+    color: #595959;
+
+    > div:nth-child(2) {
+      margin-top: 4px;
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+
+      .arco-input-inner-wrapper {
+        box-shadow: none;
+      }
+      .arco-btn-size-default {
+        padding: 0 12px;
+      }
+
+      .arco-input-group {
+        display: flex;
+        .arco-input-inner-wrapper {
+          flex: 1;
+        }
+        .arco-input-group-addafter {
+          height: 100%;
+          width: auto;
+        }
+      }
+    }
+
+    &-color {
+      height: 28px;
+      width: 28px;
+      flex-shrink: 0;
+      border: 1px solid var(--color-neutral-3, rgb(229, 230, 235));
+      border-right: none;
+      padding: 4px;
+      cursor: pointer;
+      position: relative;
+
+      > div {
+        height: 100%;
+        width: 100%;
+        border: 1px solid var(--color-neutral-3, rgb(229, 230, 235));
+        border-radius: 2px;
+      }
+      input {
+        cursor: pointer;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        opacity: 0;
+      }
+    }
+  }
+}

packages/easy-email-extensions/src/AttributePanel/components/blocks/AdvancedTable/Operation/tableCellBgSelector.tsx

@@ -0,0 +1,74 @@
+import { Input } from '@arco-design/web-react';
+import React, { useEffect } from 'react';
+import { render } from 'react-dom';
+import { useState } from 'react';
+
+interface CellBackgroundSelectorProps {
+  bgColorHandler: (color: string) => void;
+  rootDom: Element;
+}
+
+const CellBackgroundSelector: React.FC<CellBackgroundSelectorProps> = ({
+  bgColorHandler,
+  rootDom,
+}) => {
+  const [color, setColor] = useState('#ffffff');
+
+  useEffect(() => {
+    if (!rootDom) {
+      return;
+    }
+    const observer = new ResizeObserver(e => {
+      setColor('#ffffff');
+    });
+    observer.observe(rootDom);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div
+      onClick={e => e.stopPropagation()}
+      className='easy-email-table-operation-menu-bg-item'
+    >
+      <div>Set Background Color</div>
+      <div>
+        <div className='easy-email-table-operation-menu-bg-item-color'>
+          <div style={{ backgroundColor: color }}></div>
+          <input
+            type='color'
+            value={color}
+            onChange={e => setColor(e.target.value)}
+          />
+        </div>
+        <Input.Search
+          height={28}
+          searchButton='Set'
+          onSearch={() => bgColorHandler(color)}
+          value={color}
+          onKeyDown={e => e.stopPropagation()}
+          onChange={e => setColor(e)}
+        />
+      </div>
+    </div>
+  );
+};
+
+const getCellBackgroundSelectorRoot = (
+  bgColorHandler: CellBackgroundSelectorProps['bgColorHandler'],
+  rootDom: any,
+) => {
+  const node = document.createElement('div');
+
+  render(
+    <CellBackgroundSelector
+      bgColorHandler={bgColorHandler}
+      rootDom={rootDom}
+    />,
+    node,
+  );
+  return node;
+};
+
+export default getCellBackgroundSelectorRoot;

packages/easy-email-extensions/src/AttributePanel/components/blocks/AdvancedTable/Operation/tableMenuConfig.ts

@@ -1,3 +1,4 @@
+import getCellBackgroundSelectorRoot from './tableCellBgSelector';
 import TableOperationMenu from './tableOperationMenu';
 import { IOperationData } from './type';
 
@@ -69,10 +70,7 @@ const MENU_CONFIG = {
             break;
           }
           // pre cell intersect current cell.
-          if (
-            tdLeft > left &&
-            (!tr[index - 1] || (tr[index - 1].right || 0) + 1 === left)
-          ) {
+          if (tdLeft > left && tr[index - 1] && (tr[index - 1].right || 0) + 1 === left) {
             tr.splice(index, 0, { content: '-' } as any);
             break;
           }
@@ -274,6 +272,39 @@ const MENU_CONFIG = {
       _this.changeTableData?.(_this.tableData);
     },
   },
+  setCellBg: {
+    text: 'Set Background',
+    render(tableOperationMenu: TableOperationMenu) {
+      const bgColorHandler = this.handler.bind(tableOperationMenu);
+      const root = getCellBackgroundSelectorRoot(
+        bgColorHandler,
+        tableOperationMenu.domNode,
+      );
+      return root;
+    },
+    handler(color: string) {
+      const _this = this as unknown as TableOperationMenu;
+      const { top, bottom, left, right } = _this.tableIndexBoundary;
+      _this.tableData.forEach(tr => {
+        for (let index = 0; index < tr.length; index++) {
+          const td = tr[index];
+          const tdTop = tr[index].top || 0;
+          const tdBottom = tr[index].bottom || 0;
+          const tdLeft = tr[index].left || 0;
+          const tdRight = tr[index].right || 0;
+
+          if (tdLeft > right) {
+            break;
+          }
+          if (top <= tdTop && bottom >= tdBottom && left <= tdLeft && right >= tdRight) {
+            td.backgroundColor = color;
+          }
+        }
+      });
+      _this.changeTableData?.(_this.tableData);
+      _this.hide();
+    },
+  },
 };
 
 export default MENU_CONFIG;

packages/easy-email-extensions/src/AttributePanel/components/blocks/AdvancedTable/Operation/tableOperationMenu.ts

@@ -99,9 +99,13 @@ export default class TableOperationMenu {
     for (let name in this.menuItems) {
       const itemOption = (this.menuItems as any)[name];
       if (itemOption) {
-        this.domNode.appendChild(this.menuItemCreator(Object.assign({}, itemOption)));
+        this.domNode.appendChild(
+          itemOption.render
+            ? itemOption.render(this)
+            : this.menuItemCreator(Object.assign({}, itemOption)),
+        );
 
-        if (['insertRowDown'].indexOf(name) > -1) {
+        if (['insertRowDown', 'deleteRow'].indexOf(name) > -1) {
           this.domNode.appendChild(dividingCreator());
         }
       }

packages/easy-email-extensions/src/AttributePanel/components/blocks/AdvancedTable/Operation/tableTool.ts

@@ -63,6 +63,8 @@ class TableColumnTool {
     document.body.removeEventListener('click', this.hideBorder, false);
     document.body.removeEventListener('contextmenu', this.hideTableMenu, false);
     document.removeEventListener('keydown', this.hideBorderByKeyDown);
+
+    this.tableMenu?.destroy();
   }
 
   hideBorder = (e: any) => {