@heartlandone/vega 2.74.0-RTE-table-preview → 2.75.0-RTE-table-preview

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/merge-cells-button-slimmer.js

@@ -0,0 +1,117 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { TableSettingButtonSlimmer } from './table-setting-button-slimmer.abstract';
+import { DomNodeSubjectObserverFactory } from '../../../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
+import { TableSettingType } from '../../../setting-event-handlers/setting-event-handler.abstract';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { MergeCellsOperationType } from '../../../setting-event-handlers/merge-cells-operation';
+import { getAdjacentCell, isRectangularSelection } from '../../../utils/utils';
+import { SplitCellOperationType } from '../../../setting-event-handlers/split-cell-operation';
+/**
+ * Slimmer dedicated to building the merge cells button.
+ */
+export class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'rte-table-merge-cells',
+      title: 'Merge cells',
+      showArrowIcon: true,
+    });
+    this.handleDropdownItemClick = (input) => {
+      if (Object.values(SplitCellOperationType).includes(input.detail)) {
+        this.emitClickEvent([TableSettingType.SPLIT_CELL, input.detail]);
+        return;
+      }
+      this.emitClickEvent([TableSettingType.MERGE_CELLS, input.detail]);
+    };
+    this.handleDropdownVisibilityChange = ({ eventName }) => {
+      this.isMergeCellsDropdownOpen = eventName.toLocaleLowerCase().indexOf('show') >= 0;
+    };
+  }
+  renderBtnWrapper(renderBtn) {
+    return (h("vega-dropdown", { isScreenPosition: true, minWidth: 150, trigger: "click", ref: (el) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);
+      } },
+      renderBtn(),
+      this.renderActionList()));
+  }
+  isSelected() {
+    return this.isMergeCellsDropdownOpen;
+  }
+  isDisabled() {
+    if (this.selectedCells.length === 0) {
+      return true;
+    }
+    const hasTableCell = this.selectedCells.some((item) => item.type === 'table-cell');
+    const hasTableHeadCell = this.selectedCells.some((item) => item.type === 'table-head-cell');
+    if (hasTableCell && hasTableHeadCell) {
+      return true;
+    }
+    return !isRectangularSelection(this.selectedCells);
+  }
+  handleClick() {
+    this.isMergeCellsDropdownOpen = true;
+  }
+  /**
+   * Render the action list.
+   *
+   * @returns {HTMLElement} The action list element.
+   */
+  renderActionList() {
+    const disabledMap = this.getMergeDirectionDisabledMap();
+    return (h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELLS }, "Merge cells"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_UP, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_UP] }, "Merge cell up"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_RIGHT, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_RIGHT] }, "Merge cell right"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_DOWN, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_DOWN] }, "Merge cell down"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_LEFT, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_LEFT] }, "Merge cell left"),
+      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_VERTICALLY, disabled: !this.selectSingleCell() }, "Split cell vertically"),
+      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_HORIZONTALLY, disabled: !this.selectSingleCell() }, "Split cell horizontally")));
+  }
+  selectSingleCell() {
+    return this.selectedCells.length === 1;
+  }
+  getMergeDirectionDisabledMap() {
+    if (this.selectedCells.length !== 1) {
+      return {
+        [MergeCellsOperationType.MERGE_CELL_UP]: true,
+        [MergeCellsOperationType.MERGE_CELL_RIGHT]: true,
+        [MergeCellsOperationType.MERGE_CELL_DOWN]: true,
+        [MergeCellsOperationType.MERGE_CELL_LEFT]: true,
+      };
+    }
+    const cell = this.selectedCells[0];
+    const row = cell.parent;
+    const table = row.parent;
+    const rowIndex = table.children.indexOf(row);
+    const cellIndex = row.children.indexOf(cell);
+    const isFirstRow = rowIndex === 0;
+    const isLastRow = rowIndex === table.children.length - 1;
+    const isFirstCol = cellIndex === 0;
+    const isLastCol = cellIndex === row.children.length - 1;
+    const getDisabledForDirection = (direction, isOnEdge) => {
+      if (isOnEdge) {
+        return true;
+      }
+      const adjacentCell = getAdjacentCell(cell, direction);
+      return !adjacentCell || !isRectangularSelection([cell, adjacentCell]);
+    };
+    return {
+      [MergeCellsOperationType.MERGE_CELL_UP]: getDisabledForDirection(MergeCellsOperationType.MERGE_CELL_UP, isFirstRow),
+      [MergeCellsOperationType.MERGE_CELL_RIGHT]: getDisabledForDirection(MergeCellsOperationType.MERGE_CELL_RIGHT, isLastCol),
+      [MergeCellsOperationType.MERGE_CELL_DOWN]: getDisabledForDirection(MergeCellsOperationType.MERGE_CELL_DOWN, isLastRow),
+      [MergeCellsOperationType.MERGE_CELL_LEFT]: getDisabledForDirection(MergeCellsOperationType.MERGE_CELL_LEFT, isFirstCol),
+    };
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], MergeCellsButtonSlimmer.prototype, "isMergeCellsDropdownOpen", void 0);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/row-button-slimmer.js

@@ -75,10 +75,12 @@ export class RowButtonSlimmer extends TableSettingButtonSlimmer {
     const selectedRows = this.getSelectedRows();
     if (selectedRows.length) {
       const table = getParentBlockByType(selectedRows[0], RTETableBlock);
-      const allRows = table.children
-        .filter((block) => block instanceof RTETableHeadBlock || block instanceof RTETableBodyBlock)
-        .flatMap((item) => item.children);
-      flag = selectedRows.length === allRows.length;
+      if (table) {
+        const allRows = table.children
+          .filter((block) => block instanceof RTETableHeadBlock || block instanceof RTETableBodyBlock)
+          .flatMap((item) => item.children);
+        flag = selectedRows.length === allRows.length;
+      }
     }
     return flag;
   }

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/vega-rich-text-table-setting-renderer.js

@@ -9,7 +9,7 @@ import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 const buttonList = [
   'rte-table-column',
   'rte-table-row',
-  // 'rte-table-merge-cells',
+  'rte-table-merge-cells',
   'rte-table-properties',
   'rte-table-cell-properties',
   'rte-table-caption',
@@ -24,6 +24,8 @@ export class VegaRichTextTableSettingRenderer extends VegaSlimmer {
         return this.columnButtonSlimmer.render();
       case 'rte-table-row':
         return this.rowButtonSlimmer.render();
+      case 'rte-table-merge-cells':
+        return this.mergeCellsButtonSlimmer.render();
       case 'rte-table-properties':
         return this.tablePropertiesButtonSlimmer.render();
       case 'rte-table-cell-properties':
@@ -48,3 +50,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaRichTextTableSettingRenderer.prototype, "cellPropertiesButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTableSettingRenderer.prototype, "mergeCellsButtonSlimmer", void 0);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/vega-rich-text-table-setting.js

@@ -21,10 +21,11 @@ import { CellPropertiesButtonSlimmer } from './slimmers/renderers/cell-propertie
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaInternalRTEExtensionTableCellSelectionChange } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { isArrayEqual } from '../../../../../utils/array';
+import { MergeCellsButtonSlimmer } from './slimmers/renderers/merge-cells-button-slimmer';
 /**
  * Table setting popover renderer for managing table operations.
  *
- * @vegaVersion 2.74.0-RTE-table-preview
+ * @vegaVersion 2.75.0-RTE-table-preview
  */
 export class VegaRichTextTableSetting {
   constructor() {
@@ -37,17 +38,19 @@ export class VegaRichTextTableSetting {
     this.tablePropertiesButtonSlimmer = new TablePropertiesButtonSlimmer();
     this.rowButtonSlimmer = new RowButtonSlimmer();
     this.cellPropertiesButtonSlimmer = new CellPropertiesButtonSlimmer();
+    this.mergeCellsButtonSlimmer = new MergeCellsButtonSlimmer();
     this.isColumnDropdownOpen = false;
+    this.isMergeCellsDropdownOpen = false;
     /**
      * Indicates whether the current table already has a caption.
      *
-     * @vegaVersion 2.74.0-RTE-table-preview
+     * @vegaVersion 2.75.0-RTE-table-preview
      */
     this.hasCaption = false;
     /**
      * The selected cells in the table.
      *
-     * @vegaVersion 2.74.0-RTE-table-preview
+     * @vegaVersion 2.75.0-RTE-table-preview
      */
     this.selectedCells = [];
   }
@@ -94,7 +97,7 @@ export class VegaRichTextTableSetting {
       "docs": {
         "tags": [{
             "name": "vegaVersion",
-            "text": "2.74.0-RTE-table-preview"
+            "text": "2.75.0-RTE-table-preview"
           }],
         "text": "Indicates whether the current table already has a caption."
       },
@@ -120,7 +123,7 @@ export class VegaRichTextTableSetting {
       "docs": {
         "tags": [{
             "name": "vegaVersion",
-            "text": "2.74.0-RTE-table-preview"
+            "text": "2.75.0-RTE-table-preview"
           }],
         "text": "The selected cells in the table."
       },
@@ -143,14 +146,15 @@ export class VegaRichTextTableSetting {
       "docs": {
         "tags": [{
             "name": "vegaVersion",
-            "text": "2.74.0-RTE-table-preview"
+            "text": "2.75.0-RTE-table-preview"
           }],
         "text": "Specifies the target table element for the table setting."
       }
     }
   }; }
   static get states() { return {
-    "isColumnDropdownOpen": {}
+    "isColumnDropdownOpen": {},
+    "isMergeCellsDropdownOpen": {}
   }; }
   static get events() { return [{
       "method": "vegaClick",
@@ -161,7 +165,7 @@ export class VegaRichTextTableSetting {
       "docs": {
         "tags": [{
             "name": "vegaVersion",
-            "text": "2.74.0-RTE-table-preview"
+            "text": "2.75.0-RTE-table-preview"
           }],
         "text": ""
       },
@@ -207,6 +211,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextTableSetting.prototype, "cellPropertiesButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "mergeCellsButtonSlimmer", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaRichTextTableSetting.prototype, "connectedCallback", null);

package/dist/collection/components/vega-rich-text-editor/test/extensions/table/annotation-handler/table-annotation-handler.test.js

@@ -1,5 +1,6 @@
 import { TableAnnotationHandler } from '../../../../extensions/table/annotation-handler/table-annotation-handler';
 import { RTETableBlock } from '../../../../extensions/table/dto/table-block';
+import { setBorder } from './table-cell-annotation-handler.test';
 describe('TableAnnotationHandler', () => {
   let handler;
   beforeEach(() => {
@@ -22,25 +23,11 @@ describe('TableAnnotationHandler', () => {
     });
     it('should extract background color from inline style', () => {
       const element = document.createElement('table');
-      element.style.backgroundColor = 'rgb(255, 0, 0)';
+      element.style.backgroundColor = 'rgb(252, 252, 252)';
       const result = handler.handle(element);
       expect(result).toEqual({
         table: {
-          backgroundColor: 'rgb(255, 0, 0)',
-        },
-      });
-    });
-    it('should extract border from inline style', () => {
-      const element = document.createElement('table');
-      element.style.border = 'solid 2px #000';
-      const result = handler.handle(element);
-      expect(result).toEqual({
-        table: {
-          border: {
-            style: 'solid',
-            width: '2px',
-            color: '#000',
-          },
+          backgroundColor: 'white',
         },
       });
     });
@@ -48,14 +35,14 @@ describe('TableAnnotationHandler', () => {
       const element = document.createElement('table');
       element.style.borderStyle = 'dashed';
       element.style.borderWidth = '1px';
-      element.style.borderColor = '#ddd';
+      element.style.borderColor = 'rgb(4, 4, 28)';
       const result = handler.handle(element);
       expect(result).toEqual({
         table: {
           border: {
             style: 'dashed',
             width: '1px',
-            color: '#ddd',
+            color: 'black',
           },
         },
       });
@@ -185,7 +172,7 @@ describe('TableAnnotationHandler', () => {
       const element = document.createElement('table');
       element.style.backgroundColor = 'white';
       element.style.width = '100%';
-      element.style.border = 'solid 1px #ddd';
+      setBorder(element, 'solid 1px rgb(4, 4, 28)');
       element.classList.add('v-rte--extension-table-align-center');
       const result = handler.handle(element);
       expect(result).toEqual({
@@ -194,7 +181,7 @@ describe('TableAnnotationHandler', () => {
           border: {
             style: 'solid',
             width: '1px',
-            color: '#ddd',
+            color: 'black',
           },
           width: '100%',
           alignment: 'center',
@@ -203,14 +190,14 @@ describe('TableAnnotationHandler', () => {
     });
     it('should handle border with rgb color', () => {
       const element = document.createElement('table');
-      element.style.border = 'solid 1px rgb(0, 0, 0)';
+      setBorder(element, 'solid 1px rgb(4, 4, 28)');
       const result = handler.handle(element);
       expect(result).toEqual({
         table: {
           border: {
             style: 'solid',
             width: '1px',
-            color: 'rgb(0, 0, 0)',
+            color: 'black',
           },
         },
       });
@@ -218,31 +205,55 @@ describe('TableAnnotationHandler', () => {
     describe('edge cases', () => {
       it('should handle invalid border string gracefully', () => {
         const element = document.createElement('table');
-        element.style.border = 'invalid';
+        setBorder(element, 'invalid-border-value');
         const result = handler.handle(element);
-        expect(result).toEqual({});
+        expect(result).toEqual({
+          table: {
+            border: {
+              style: 'invalid-border-value',
+              width: '',
+              color: '',
+            },
+          },
+        });
       });
       it('should handle border with only 2 parts', () => {
         const element = document.createElement('table');
-        element.style.border = 'solid 1px';
+        setBorder(element, 'solid 1px');
         const result = handler.handle(element);
-        expect(result).toEqual({});
+        expect(result).toEqual({
+          table: {
+            border: {
+              style: 'solid',
+              width: '1px',
+              color: '',
+            },
+          },
+        });
       });
       it('should handle border with only spaces', () => {
         const element = document.createElement('table');
-        element.style.border = '   ';
+        setBorder(element, '   ');
         const result = handler.handle(element);
         expect(result).toEqual({});
       });
       it('should handle border with single word', () => {
         const element = document.createElement('table');
-        element.style.border = 'solid';
+        setBorder(element, 'dashed');
         const result = handler.handle(element);
-        expect(result).toEqual({});
+        expect(result).toEqual({
+          table: {
+            border: {
+              style: 'dashed',
+              width: '',
+              color: '',
+            },
+          },
+        });
       });
       it('should handle empty border string', () => {
         const element = document.createElement('table');
-        element.style.border = '';
+        setBorder(element, '');
         const result = handler.handle(element);
         expect(result).toEqual({});
       });
@@ -272,22 +283,6 @@ describe('TableAnnotationHandler', () => {
           },
         });
       });
-      it('should extract border from borderTop properties when general properties are not set', () => {
-        const element = document.createElement('table');
-        element.style.borderTopStyle = 'ridge';
-        element.style.borderTopWidth = '5px';
-        element.style.borderTopColor = '#666';
-        const result = handler.handle(element);
-        expect(result).toEqual({
-          table: {
-            border: {
-              style: 'ridge',
-              width: '5px',
-              color: '#666',
-            },
-          },
-        });
-      });
     });
   });
 });

package/dist/collection/components/vega-rich-text-editor/test/extensions/table/annotation-handler/table-cell-annotation-handler.test.js

@@ -1,5 +1,18 @@
 import { TableCellAnnotationHandler } from '../../../../extensions/table/annotation-handler/table-cell-annotation-handler';
 import { RTETableCellBlock } from '../../../../extensions/table/dto/table-cell-block';
+/**
+ * Helper function to set border shorthand property in jsdom.
+ * jsdom doesn't automatically decompose shorthand properties like real browsers do.
+ *
+ * @param {HTMLElement} element - Element to set border on.
+ * @param {string} border - Border shorthand value (e.g., 'dashed 2px black').
+ */
+export function setBorder(element, border) {
+  const parts = border.trim().split(/\s+/);
+  element.style.borderStyle = parts[0];
+  element.style.borderWidth = parts[1];
+  element.style.borderColor = parts.splice(2).join(' ');
+}
 describe('TableCellAnnotationHandler', () => {
   let handler;
   beforeEach(() => {
@@ -22,11 +35,11 @@ describe('TableCellAnnotationHandler', () => {
     });
     it('should extract background color from inline style', () => {
       const element = document.createElement('td');
-      element.style.backgroundColor = 'rgb(255, 255, 0)';
+      element.style.backgroundColor = 'rgb(252, 252, 252)';
       const result = handler.handle(element);
       expect(result).toEqual({
         tableCell: {
-          backgroundColor: 'rgb(255, 255, 0)',
+          backgroundColor: 'white',
         },
       });
     });
@@ -40,32 +53,18 @@ describe('TableCellAnnotationHandler', () => {
         },
       });
     });
-    it('should extract border from inline style', () => {
-      const element = document.createElement('td');
-      element.style.border = 'dashed 2px #333';
-      const result = handler.handle(element);
-      expect(result).toEqual({
-        tableCell: {
-          border: {
-            style: 'dashed',
-            width: '2px',
-            color: '#333',
-          },
-        },
-      });
-    });
     it('should extract border from individual properties', () => {
       const element = document.createElement('td');
       element.style.borderStyle = 'dotted';
       element.style.borderWidth = '3px';
-      element.style.borderColor = '#999';
+      element.style.borderColor = 'rgb(252, 252, 252)';
       const result = handler.handle(element);
       expect(result).toEqual({
         tableCell: {
           border: {
             style: 'dotted',
             width: '3px',
-            color: '#999',
+            color: 'white',
           },
         },
       });
@@ -165,21 +164,21 @@ describe('TableCellAnnotationHandler', () => {
     });
     it('should extract multiple annotations', () => {
       const element = document.createElement('td');
-      element.style.backgroundColor = '#f0f0f0';
+      element.style.backgroundColor = 'rgb(252, 252, 252)';
       element.style.padding = '8px 12px';
-      element.style.border = 'solid 1px #ddd';
+      setBorder(element, 'solid 1px rgb(4, 4, 28)');
       element.style.width = '250px';
       element.style.textAlign = 'left';
       element.style.verticalAlign = 'middle';
       const result = handler.handle(element);
       expect(result).toEqual({
         tableCell: {
-          backgroundColor: '#f0f0f0',
+          backgroundColor: 'white',
           padding: '8px 12px',
           border: {
             style: 'solid',
             width: '1px',
-            color: '#ddd',
+            color: 'black',
           },
           width: '250px',
           textAlign: 'left',
@@ -189,14 +188,28 @@ describe('TableCellAnnotationHandler', () => {
     });
     it('should handle border with rgb color', () => {
       const element = document.createElement('td');
-      element.style.border = 'solid 2px rgb(100, 100, 100)';
+      setBorder(element, 'solid 2px rgb(4, 4, 28)');
       const result = handler.handle(element);
       expect(result).toEqual({
         tableCell: {
           border: {
             style: 'solid',
             width: '2px',
-            color: 'rgb(100, 100, 100)',
+            color: 'black',
+          },
+        },
+      });
+    });
+    it('should handle border with initial value', () => {
+      const element = document.createElement('td');
+      setBorder(element, 'initial initial initial');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          border: {
+            style: '',
+            width: '',
+            color: '',
           },
         },
       });
@@ -243,50 +256,58 @@ describe('TableCellAnnotationHandler', () => {
         });
       });
     });
-    it('should extract border from borderTop properties when general properties are not set', () => {
-      const element = document.createElement('td');
-      element.style.borderTopStyle = 'dotted';
-      element.style.borderTopWidth = '3px';
-      element.style.borderTopColor = '#999';
-      const result = handler.handle(element);
-      expect(result).toEqual({
-        tableCell: {
-          border: {
-            style: 'dotted',
-            width: '3px',
-            color: '#999',
-          },
-        },
-      });
-    });
     describe('border edge cases', () => {
       it('should handle invalid border string gracefully', () => {
         const element = document.createElement('td');
-        element.style.border = 'invalid';
+        setBorder(element, 'invalid-border-value');
         const result = handler.handle(element);
-        expect(result).toEqual({});
+        expect(result).toEqual({
+          tableCell: {
+            border: {
+              style: 'invalid-border-value',
+              width: '',
+              color: '',
+            },
+          },
+        });
       });
       it('should handle border with only 2 parts', () => {
         const element = document.createElement('td');
-        element.style.border = 'solid 2px';
+        setBorder(element, 'dashed 2px');
         const result = handler.handle(element);
-        expect(result).toEqual({});
+        expect(result).toEqual({
+          tableCell: {
+            border: {
+              style: 'dashed',
+              width: '2px',
+              color: '',
+            },
+          },
+        });
       });
       it('should handle border with only spaces', () => {
         const element = document.createElement('td');
-        element.style.border = '   ';
+        setBorder(element, '   ');
         const result = handler.handle(element);
         expect(result).toEqual({});
       });
       it('should handle border with single word', () => {
         const element = document.createElement('td');
-        element.style.border = 'dashed';
+        setBorder(element, 'dashed');
         const result = handler.handle(element);
-        expect(result).toEqual({});
+        expect(result).toEqual({
+          tableCell: {
+            border: {
+              style: 'dashed',
+              width: '',
+              color: '',
+            },
+          },
+        });
       });
       it('should handle empty border string', () => {
         const element = document.createElement('td');
-        element.style.border = '';
+        setBorder(element, '');
         const result = handler.handle(element);
         expect(result).toEqual({});
       });