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

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

@@ -0,0 +1,15 @@
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+/**
+ * Renders a logic control block in the rich text editor.
+ */
+export class RTETableHeadRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('thead', {
+      key: renderData.id,
+      ref: this.useRef(renderData),
+    });
+  }
+}

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

@@ -0,0 +1,149 @@
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+import styles from '../table-block-styles.css';
+import { DeleteTableBlockAction } from '../actions/delete-table-block-action';
+import { TableSettingPopoverRenderer } from './table-setting-popover-renderer';
+import { RTETableExtensionAnnotationTypeEnum } from '../annotations/table-annotation';
+import { TableDynamicPopoverRenderer } from './table-dynamic-popover-renderer';
+import changeManager from '../../../../../helpers/change-manager/change-manager';
+import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalRTEExtensionTableCellsSelectionAnchor } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/**
+ * Renderer for the RTETableBlock.
+ */
+export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
+  constructor() {
+    super(...arguments);
+    this.extensionContext = null;
+    this.popoverRenders = [];
+  }
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData, rteContext) {
+    const tableSettingPopoverRenderer = new TableSettingPopoverRenderer();
+    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(this.tableColorSchema);
+    this.injectExtensionContextToRenderers(this.extensionContext, [
+      tableDynamicPopoverRenderer,
+      tableSettingPopoverRenderer,
+    ]);
+    let tableRef;
+    const table = this.renderTable(h, renderData, (ref) => (tableRef = ref));
+    const tableSettingPopover = tableSettingPopoverRenderer.render(h, renderData, () => tableRef, tableDynamicPopoverRenderer);
+    const tableDynamicPopover = tableDynamicPopoverRenderer.render(h, () => tableRef, renderData);
+    const tableAnnotation = renderData.getAnnotationByType(RTETableExtensionAnnotationTypeEnum.TABLE);
+    const children = rteContext.editable
+      ? [
+        h('vega-rich-text-table-selection-widget', {
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          onVegaRemove: (e) => {
+            e.stopPropagation();
+            this.handleTableRemove(renderData, tableRef);
+          },
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          onClick: (event) => tableSettingPopoverRenderer.handleTableClick(event, tableRef),
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          onMouseLeave: () => {
+            tableSettingPopoverRenderer.syncSelectedCells();
+          },
+        }, [table, tableSettingPopover, tableDynamicPopover]),
+      ]
+      : [table];
+    const containerStyle = {};
+    if (tableAnnotation) {
+      const tableStyle = tableAnnotation.renderStyle();
+      containerStyle.width = tableStyle.width;
+      containerStyle.margin = tableStyle.margin;
+    }
+    const result = h('div', {
+      class: 'v-rte--extension-table-container',
+      style: Object.assign({}, containerStyle),
+    }, children);
+    /**
+     * The getter for the children container.
+     *
+     * @returns {VegaRTERenderResult} - The children container render result.
+     */
+    result.childrenContainerGetter = () => table;
+    return result;
+  }
+  /**
+   * @inheritDoc
+   */
+  injectRTEScopeStyles() {
+    return styles;
+  }
+  /**
+   * Injects the RTE extension context.
+   *
+   * @param {RTETableExtensionContext} context - The RTE extension context.
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+    this.injectExtensionContextToRenderers(context, this.popoverRenders);
+  }
+  /**
+   * Updates the table color schema.
+   *
+   * @param {RTETableColorSchema[]} colors - The new table color schema.
+   */
+  updateTableColorSchema(colors) {
+    this.tableColorSchema = colors;
+  }
+  /**
+   * Renders the table element.
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {RTETableBlock} renderData - The table block to render.
+   * @param {(ref: HTMLElement) => HTMLElement} setTableRef - Set table ref to tableRef
+   * @returns {VegaRTERenderResult} - The rendered table element.
+   */
+  renderTable(h, renderData, setTableRef) {
+    var _a;
+    return h('table', Object.assign(Object.assign({ key: renderData.id }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(), class: renderData.getClasses(), 
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (ref) => {
+        this.useRef(renderData)(ref);
+        setTableRef(ref);
+      } }));
+  }
+  /**
+   * Handles the removal of the table block.
+   *
+   * @param {RTETableBlock} renderData - The table block to remove.
+   * @param {HTMLElement} tableRef - The element that can triggered the table popover open.
+   */
+  handleTableRemove(renderData, tableRef) {
+    renderData.parent.apply(new DeleteTableBlockAction(renderData));
+    this.destroySelectionAnchor(tableRef);
+  }
+  /**
+   * Notifies and clears the multi-cell selection anchor associated with the given table reference.
+   *
+   * @param {HTMLElement} tableRef - The table trigger element used to locate the rich text content container.
+   */
+  destroySelectionAnchor(tableRef) {
+    const container = tableRef.closest('.rich-text-content');
+    if (container) {
+      const selectionAnchorRef = container.querySelector('.rte-table-selection-popover-anchor');
+      if (selectionAnchorRef) {
+        changeManager.notify(DomNodeSubjectFactory.getSubject(selectionAnchorRef, VegaInternalRTEExtensionTableCellsSelectionAnchor), {
+          host: selectionAnchorRef,
+        });
+      }
+    }
+  }
+  /**
+   * Injects the RTE extension context to the given popover renderers.
+   *
+   * @param {Nullable<RTETableExtensionContext>} context - The RTE extension context.
+   * @param {(TableDynamicPopoverRenderer| TableSettingPopoverRenderer)[]} popoverRenderers - The popover renderers.
+   */
+  injectExtensionContextToRenderers(context, popoverRenderers) {
+    this.popoverRenders = popoverRenderers;
+    if (context) {
+      popoverRenderers.forEach((renderer) => {
+        renderer.injectRTEExtensionContext(context);
+      });
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+/**
+ * Renders a logic control block in the rich text editor.
+ */
+export class RTETableRowBlockRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('tr', {
+      key: renderData.id,
+      ref: this.useRef(renderData),
+    });
+  }
+}

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

@@ -0,0 +1,148 @@
+import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalPopoverUpdateTarget } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { TableSettingType, } from '../setting-event-handlers/setting-event-handler.abstract';
+import { RowOperationEventHandler } from '../setting-event-handlers/row-operation';
+import { CaptionOperationEventHandler } from '../setting-event-handlers/caption-operation';
+import { ColumnOperationEventHandler } from '../setting-event-handlers/column-operation';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+/**
+ * Centralizes the popover rendering and interaction logic for table settings.
+ */
+export class TableSettingPopoverRenderer {
+  constructor() {
+    this.settingHandlers = [
+      new RowOperationEventHandler(),
+      new CaptionOperationEventHandler(),
+      new ColumnOperationEventHandler(),
+    ];
+    /**
+     * Show table setting popover when table is clicked.
+     * Only the popover belonging to the nearest table will be shown,
+     * which avoids outer tables showing their popover when an inner (nested) table is clicked.
+     *
+     * @param {MouseEvent} event - The MouseEvent that triggered the table action
+     * @param {HTMLElement} trigger - The element that can triggered the popover open.
+     */
+    this.handleTableClick = (event, trigger) => {
+      const target = event.target;
+      const ownTrigger = target.closest('table');
+      if (trigger !== ownTrigger) {
+        void this.popoverRef.hide();
+        void this.tableDynamicPopover.hide();
+        return;
+      }
+      void this.tableDynamicPopover.hide();
+      if (!this.popoverShow) {
+        remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), ownTrigger);
+        void this.popoverRef.show();
+      }
+    };
+    /**
+     * Sync the selected cells from the table selection to the table setting component.
+     */
+    this.syncSelectedCells = () => {
+      if (this.tableSettingRef) {
+        const selectedCells = this.getTableSelectedCells();
+        this.tableSettingRef.selectedCells = selectedCells;
+      }
+    };
+    /**
+     * Receive setting menu click events.
+     *
+     * @param {CustomEvent<Array<string>>} event - The custom event emitted from the setting menu.
+     */
+    this.handleSettingMenuClick = (event) => {
+      const handler = this.settingHandlers.find((handler) => handler.canHandle(event.detail));
+      if (handler) {
+        handler.execute(event.detail, this.extensionContext, this.tableData);
+        if (event.detail[0] === TableSettingType.CAPTION) {
+          this.updateTableSettingCaption();
+        }
+      }
+      if (event.detail[0] === TableSettingType.TABLE || event.detail[0] === TableSettingType.CELL) {
+        void this.popoverRef.hide();
+        void this.tableDynamicPopover.show(event.detail[0]);
+      }
+    };
+    /**
+     * Handles the popover show event to sync the selected table cells to the table setting component.
+     */
+    this.handleTableSettingPopoverShow = () => {
+      this.syncSelectedCells();
+      this.popoverShow = true;
+    };
+  }
+  /**
+   * Injects the RTE extension context.
+   *
+   * @param {RTETableExtensionContext} context - The RTE extension context.
+   */
+  injectRTEExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Render the popover host and inject the table-setting component with refs wired up.
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {RTETableBlock} renderData - The table block to render.
+   * @param {() => HTMLElement} getTableRef - Current table DOM reference
+   * @param {TableDynamicPopoverRenderer} tableDynamicPopover - Renderer used to show
+   *  the secondary table popover (for example, table-properties-specific settings).
+   * @returns {VegaRTERenderResult} The rendered popover structure.
+   */
+  render(h, renderData, getTableRef, tableDynamicPopover) {
+    this.tableData = renderData;
+    this.tableDynamicPopover = tableDynamicPopover;
+    return h('vega-popover', {
+      trigger: 'click',
+      isScreenPosition: true,
+      class: 'rte-table-setting-popover',
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (popover) => {
+        this.popoverRef = popover;
+        if (this.popoverRef) {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverShow, this.handleTableSettingPopoverShow);
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => (this.popoverShow = false));
+        }
+      },
+    }, [
+      h('div', { slot: 'popover' }, [
+        h('vega-rich-text-table-setting', {
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          ref: (ref) => {
+            this.tableSettingRef = ref;
+            if (ref) {
+              ref.target = getTableRef();
+            }
+          },
+          selectedCells: this.getTableSelectedCells(),
+          onVegaClick: this.handleSettingMenuClick,
+        }),
+      ]),
+    ]);
+  }
+  /**
+   * Updates the table setting component caption state to match the given table data.
+   */
+  updateTableSettingCaption() {
+    const hasCaption = this.tableData.hasCaption();
+    if (this.tableSettingRef && this.tableSettingRef.hasCaption !== hasCaption) {
+      this.tableSettingRef.hasCaption = hasCaption;
+    }
+  }
+  /**
+   * Collects and returns the currently selected table cells.
+   *
+   * @returns {RTETableCellBlock[]} The array of currently selected table cell blocks.
+   */
+  getTableSelectedCells() {
+    let selectedCells = [];
+    if (this.extensionContext && this.extensionContext.tableSelection) {
+      const { tableSelection } = this.extensionContext;
+      selectedCells = tableSelection.getSelectedCells();
+    }
+    return selectedCells;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/caption-operation.js

@@ -0,0 +1,78 @@
+import { SettingEventHandler, TableSettingType } from './setting-event-handler.abstract';
+import { RTETableCaptionBlock } from '../dto/table-caption-block';
+import { TableCaptionAction } from '../actions/table-caption-action';
+import { generateUUID } from '../../../../../utils/misc';
+/**
+ * Event handler for row operations in a table.
+ */
+export class CaptionOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.CAPTION;
+  }
+  /**
+   * Toggle caption state for the target table block when the caption menu item is clicked.
+   *
+   * @param {Array<string>} action - Table setting payload, e.g. ['CAPTION', 'rte-table-caption'].
+   * @param {RTEExtensionContext} _extensionContext - Current editor extension context (unused here).
+   * @param {RTETableBlock} tableBlock - Table block that owns the caption.
+   */
+  execute(action, _extensionContext, tableBlock) {
+    const shouldEnable = action[1] === 'rte-table-caption';
+    const toggleAction = new TableCaptionAction(shouldEnable);
+    const existingCaption = tableBlock.getCaption();
+    if (shouldEnable) {
+      const hydratedCaption = existingCaption && existingCaption.isNotEmpty()
+        ? existingCaption
+        : this.createCaptionBlock(existingCaption === null || existingCaption === void 0 ? void 0 : existingCaption.id);
+      if (!existingCaption || hydratedCaption !== existingCaption) {
+        tableBlock.setCaption(hydratedCaption);
+      }
+      toggleAction.nextFocusNode = hydratedCaption.getLastNode();
+    }
+    else {
+      if (existingCaption) {
+        tableBlock.setCaption(null);
+        toggleAction.nextFocusNode = tableBlock.getFirstNode();
+      }
+    }
+    this.syncCursorPosition(tableBlock, toggleAction.nextFocusNode);
+  }
+  /**
+   * Applies a cursor update action so the editor focuses on the resolved node.
+   *
+   * @param {RTETableBlock} block - Table block currently being toggled.
+   * @param {Nullable<RTENode>} focusNode - Target node that should receive the caret.
+   */
+  syncCursorPosition(block, focusNode) {
+    super.syncCursorPosition(block, focusNode);
+  }
+  /**
+   * Build a fresh caption block with a default paragraph + placeholder text.
+   *
+   * @param {string} id - table-caption id
+   * @returns {RTETableCaptionBlock} Newly created caption DTO ready for rendering.
+   */
+  createCaptionBlock(id) {
+    const captionData = {
+      id: id !== null && id !== void 0 ? id : generateUUID(),
+      type: 'table-caption',
+      children: [
+        {
+          id: generateUUID(),
+          type: 'paragraph',
+          nodes: [
+            {
+              id: generateUUID(),
+              type: 'text',
+              text: '',
+            },
+          ],
+        },
+      ],
+    };
+    return RTETableCaptionBlock.from(captionData);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/cell-properties-cancel-event-handler.js

@@ -0,0 +1,17 @@
+import { CellPropertiesEventHandler } from './cell-properties';
+/**
+ * Cancel Event handler for the cell properties.
+ */
+export class CellPropertiesCancelEventHandler extends CellPropertiesEventHandler {
+  /**
+   * Cancel cell properties changes
+   *
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   * @param {Record<string, RTETablePropertiesType>} data - The origin of the properties.
+   * @param {RTENode} focusNode - The focus node.
+   */
+  handle(extensionContext, data, focusNode) {
+    this.applyProperties(extensionContext, data, true);
+    this.updateCursorPosition(extensionContext, focusNode);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/cell-properties-change-event-handler.js

@@ -0,0 +1,15 @@
+import { CellPropertiesEventHandler } from './cell-properties';
+/**
+ * Change Event handler for the cell properties.
+ */
+export class CellPropertiesChangeEventHandler extends CellPropertiesEventHandler {
+  /**
+   * Update the cell properties based on the provided data.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   * @param {Record<string, RTETablePropertiesType>} data - The origin of the properties.
+   */
+  handle(extensionContext, data) {
+    this.applyProperties(extensionContext, data, false);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/cell-properties-save-event-handler.js

@@ -0,0 +1,19 @@
+import { CellPropertiesEventHandler } from './cell-properties';
+/**
+ * Save Event handler for the cell properties.
+ */
+export class CellPropertiesSaveEventHandler extends CellPropertiesEventHandler {
+  /**
+   * Commit the cell properties changes
+   *
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   * @param {Record<string, RTETablePropertiesType>} _data - The origin of the properties.
+   * @param {RTENode} focusNode - The focus node.
+   */
+  handle(extensionContext, _data, focusNode) {
+    if (extensionContext && extensionContext.host) {
+      extensionContext.flushValue(extensionContext.host.value);
+      this.updateCursorPosition(extensionContext, focusNode);
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/cell-properties.js

@@ -0,0 +1,131 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { cleanObject } from '../../../../../utils/object';
+import { parseToPixelString } from '../../../../../utils/pixel';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { RTETableCellAnnotationsAction } from '../actions/table-cell-annotations-action';
+import { RTETableHeadCellAnnotationsAction } from '../actions/table-head-cell-annotations-action';
+import { RTETableExtensionAnnotationTypeEnum } from '../annotations/table-annotation';
+import { RTETableCellAnnotation } from '../annotations/table-cell-annotation';
+import { RTETableHeadCellBlock } from '../dto/table-head-cell-block';
+/**
+ * Event handler for cell properties in a table.
+ */
+export class CellPropertiesEventHandler {
+  /**
+   * Get the style collection from the selected table cells.
+   *
+   * @param {RTETableCellBlock[]} selectedCells - The selected table cells to merge styles from
+   * @returns {TableCellStylePropertiesMap} The merged styles object containing only common style properties
+   */
+  static getStyleCollectionFromCell(selectedCells) {
+    return selectedCells.reduce((accumulator, cell) => {
+      const annotation = cell.getAnnotationByType(RTETableExtensionAnnotationTypeEnum.CELL);
+      const _a = annotation.toJSON().tableCell, { border } = _a, restProps = __rest(_a, ["border"]);
+      const formattedBorder = {};
+      if (border) {
+        formattedBorder.borderStyle = border.style;
+        formattedBorder.borderColor = border.color;
+        formattedBorder.borderWidth = border.width;
+      }
+      accumulator[cell.id] = cleanObject(Object.assign(Object.assign({}, restProps), formattedBorder));
+      return accumulator;
+    }, {});
+  }
+  /**
+   * Convert the style collection prop to a form field value by merging styles.
+   *
+   * @param {TableCellStylePropertiesMap} styleMap - The default value prop.
+   * @returns {RTETablePropertiesType} The merged form field value.
+   */
+  static convertStyleMapToFormField(styleMap) {
+    const styleCollection = {};
+    for (const id in styleMap) {
+      const style = styleMap[id];
+      for (const key in style) {
+        if (styleCollection[key]) {
+          styleCollection[key].push(style[key]);
+        }
+        else {
+          styleCollection[key] = [style[key]];
+        }
+      }
+    }
+    const defaultValueSize = Object.keys(styleMap).length;
+    const mergedStyles = {};
+    for (const key in styleCollection) {
+      const styleValues = styleCollection[key];
+      const uniqueValues = new Set(styleValues);
+      if (styleValues.length === defaultValueSize && uniqueValues.size === 1) {
+        mergedStyles[key] = styleValues[0];
+      }
+    }
+    return Object.assign({ borderColor: RTETableCellAnnotation.DEFAULT_BORDER.color, borderStyle: RTETableCellAnnotation.DEFAULT_BORDER.style, borderWidth: RTETableCellAnnotation.DEFAULT_BORDER.width, textAlign: RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN, verticalAlign: RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN }, mergedStyles);
+  }
+  /**
+   * Apply the given properties to the selected cells
+   *
+   * @param {RTETableExtensionContext} extensionContext The extensionContext
+   * @param {Record<string, RTETablePropertiesType>} properties - The properties to apply
+   * @param {boolean} isFlushable - Whether the action is flushable
+   */
+  applyProperties(extensionContext, properties, isFlushable) {
+    const selectedCells = extensionContext.tableSelection.getSelectedCells();
+    selectedCells.forEach((cell) => {
+      const originalStyles = properties[cell.id];
+      if (originalStyles) {
+        const annotation = this.convertToVegaTableCellAnnotation(Object.assign({}, originalStyles));
+        this.applyAnnotation(cell, annotation, isFlushable);
+      }
+    });
+  }
+  /**
+   * Update the rich text editor cursor position
+   *
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   * @param {Nullable<RTENode>} focusNode - The node to focus on.
+   */
+  updateCursorPosition(extensionContext, focusNode) {
+    if (extensionContext && focusNode) {
+      extensionContext.host.value.apply(new UpdateCursorPositionAction(focusNode, 0));
+    }
+  }
+  /**
+   * Convert RTETablePropertiesType to VegaRTETableCellAnnotation
+   *
+   * @param {RTETablePropertiesType} originalStyles - The original style properties
+   * @returns {VegaRTETableCellAnnotation} The converted VegaRTETableCellAnnotation
+   */
+  convertToVegaTableCellAnnotation(originalStyles) {
+    const { borderStyle, borderWidth, borderColor } = originalStyles, restStyles = __rest(originalStyles, ["borderStyle", "borderWidth", "borderColor"]);
+    const border = {
+      style: borderStyle || RTETableCellAnnotation.DEFAULT_BORDER.style,
+      width: parseToPixelString(borderWidth || RTETableCellAnnotation.DEFAULT_BORDER.width),
+      color: borderColor || RTETableCellAnnotation.DEFAULT_BORDER.color,
+    };
+    return Object.assign(Object.assign({}, restStyles), { padding: restStyles.padding ? parseToPixelString(restStyles.padding) : '', width: restStyles.width ? parseToPixelString(restStyles.width) : '', height: restStyles.height ? parseToPixelString(restStyles.height) : '', border });
+  }
+  /**
+   * Apply the given annotation to the specified table cell
+   *
+   * @param {RTETableCellBlock} cell - The table cell to apply the annotation to
+   * @param {VegaRTETableCellAnnotation} annotation - The annotation to apply
+   * @param {boolean} isFlushable - Whether the action is flushable
+   */
+  applyAnnotation(cell, annotation, isFlushable) {
+    const action = cell instanceof RTETableHeadCellBlock
+      ? new RTETableHeadCellAnnotationsAction(annotation)
+      : new RTETableCellAnnotationsAction(annotation);
+    action.isFlushable = isFlushable;
+    cell.apply(action);
+  }
+}