@atlaskit/editor-plugin-table 22.4.2 → 22.4.3

package/dist/esm/ui/ui-styles.js

@@ -5,6 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import { css } from '@emotion/react';
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 var InsertLine = function InsertLine(cssString) {
@@ -125,10 +126,10 @@ export var columnControlsDecoration = function columnControlsDecoration() {
   return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tdisplay: none;\n\t\t\tcursor: pointer;\n\t\t\tposition: absolute;\n\t\t\twidth: 100%;\n\t\t\tleft: 0;\n\t\t\ttop: -", "px;\n\t\t\theight: ", "px;\n\t\t\t/* floating dot for adding column button */\n\t\t\t&::before {\n\t\t\t\tcontent: ' ';\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\theight: ", "px;\n\t\t\t\twidth: ", "px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tpointer-events: none;\n\t\t\t\ttop: 2px;\n\t\t\t\tright: ", ";\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: ' ';\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* floating dot for adding column button - overriding style on last column to avoid scroll */\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",table\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t}\n\n\t\t\t\t&.", " .", "::after {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\tz-index: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",table\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t\tborder-left: ", "px solid ", ";\n\t\t\t\t\tleft: -", "px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t}\n\n\t\t\t\t&.", " .", "::after {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\tborder-left: ", "px solid ", ";\n\t\t\t\t\tleft: -", "px;\n\t\t\t\t\tz-index: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", "\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",\n\t\t\t.", "\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t.", "::after {\n\t\t\t\t", ";\n\t\t\t}\n\t\t}\n\t"])), ClassName.COLUMN_CONTROLS_DECORATIONS, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor, lineMarkerSize, lineMarkerSize, "var(--ds-space-negative-025, -2px)", columnHeaderButton("\n        border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor, ";\n        border-top: ").concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor, ";\n        border-bottom: ").concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor, ";\n        box-sizing: content-box;\n        height: ").concat(tableToolbarSize - 1, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(), ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), tableCellBorderWidth, tableBorderSelectedColor, tableCellBorderWidth, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor, tableBorderDeleteColor, tableCellBorderWidth, tableBorderDeleteColor, tableCellBorderWidth, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected());
 };
 export var hoveredDeleteButton = function hoveredDeleteButton() {
-  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n\t.", ".", " {\n\t\t.", ", .", ", .", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t}\n\n\t\t.", " > table {\n\t\t\ttd.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t\tth.", " {\n\t\t\t\tbackground-color: unset;\n\t\t\t}\n\t\t\tth.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor, ClassName.SELECTED_CELL, tableCellDeleteColor, ClassName.TABLE_NODE_WRAPPER, ClassName.HOVERED_NO_HIGHLIGHT, tableCellDeleteColor, tableBorderDeleteColor, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_NO_HIGHLIGHT, tableCellDeleteColor, tableBorderDeleteColor);
+  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n\t.", ".", " {\n\t\t.", ", .", ", .", " {\n\t\t\t", "\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t}\n\n\t\t.", " > table {\n\t\t\ttd.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t\tth.", " {\n\t\t\t\tbackground-color: unset;\n\t\t\t}\n\t\t\tth.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(tableBorderDeleteColor, ";"), ClassName.SELECTED_CELL, tableCellDeleteColor, ClassName.TABLE_NODE_WRAPPER, ClassName.HOVERED_NO_HIGHLIGHT, tableCellDeleteColor, tableBorderDeleteColor, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_NO_HIGHLIGHT, tableCellDeleteColor, tableBorderDeleteColor);
 };
 export var hoveredCell = function hoveredCell() {
-  return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor, ClassName.HOVERED_CELL, ClassName.HOVERED_NO_HIGHLIGHT, tableBorderColor);
+  return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\t", "\n\t\t}\n\t\t.", ".", " {\n\t\t\tposition: relative;\n\t\t\t", "\n\t\t}\n\t}\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(tableBorderSelectedColor, ";"), ClassName.HOVERED_CELL, ClassName.HOVERED_NO_HIGHLIGHT, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(tableBorderColor, ";"));
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/types/nodeviews/TableCell.d.ts

@@ -5,8 +5,20 @@ import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import TableNodeView from './TableNodeViewBase';
 export default class TableCell extends TableNodeView<HTMLElement> implements NodeView {
     private delayHandle;
+    /** Cached edge state to avoid redundant DOM writes. */
+    private prevReachesTop;
+    private prevReachesBottom;
+    private prevReachesLeft;
+    private prevReachesRight;
     constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher, editorAnalyticsAPI: EditorAnalyticsAPI | undefined);
     destroy: () => void;
     update(node: PMNode): boolean;
+    /**
+     * Detects whether this cell visually reaches the bottom or right edge of the table
+     * (accounting for rowspan/colspan) and sets data attributes so CSS can apply
+     * rounded corners and transparent borders to merged cells that span to the table edges.
+     */
+    private updateTableEdgeAttrs;
+    private setDataAttr;
     private updateNodeView;
 }

package/dist/types/nodeviews/table.d.ts

@@ -5,7 +5,7 @@ import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags, getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../types';
 import type { Props, TableOptions } from './types';
 type ForwardRef = (node: HTMLElement | null) => void;
@@ -13,6 +13,7 @@ export default class TableView extends ReactNodeView<Props> {
     private table;
     private renderedDOM?;
     private resizeObserver?;
+    private roundedTableEdgeRefreshHandle;
     eventDispatcher?: EventDispatcher;
     getPos: getPosHandlerNode;
     options: TableOptions | undefined;
@@ -32,6 +33,8 @@ export default class TableView extends ReactNodeView<Props> {
     private _handleTableRef;
     setDomAttrs(node: PmNode): void;
     getNode: () => PmNode;
+    private scheduleRoundedTableEdgeRefresh;
+    update(node: PmNode, decorations: ReadonlyArray<Decoration>, innerDecorations?: DecorationSource, validUpdate?: (currentNode: PmNode, newNode: PmNode) => boolean): boolean;
     render(props: Props, forwardRef: ForwardRef): React.JSX.Element;
     private hasHoveredRows;
     viewShouldUpdate(nextNode: PmNode): boolean;

package/dist/types-ts4.5/nodeviews/TableCell.d.ts

@@ -5,8 +5,20 @@ import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import TableNodeView from './TableNodeViewBase';
 export default class TableCell extends TableNodeView<HTMLElement> implements NodeView {
     private delayHandle;
+    /** Cached edge state to avoid redundant DOM writes. */
+    private prevReachesTop;
+    private prevReachesBottom;
+    private prevReachesLeft;
+    private prevReachesRight;
     constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher, editorAnalyticsAPI: EditorAnalyticsAPI | undefined);
     destroy: () => void;
     update(node: PMNode): boolean;
+    /**
+     * Detects whether this cell visually reaches the bottom or right edge of the table
+     * (accounting for rowspan/colspan) and sets data attributes so CSS can apply
+     * rounded corners and transparent borders to merged cells that span to the table edges.
+     */
+    private updateTableEdgeAttrs;
+    private setDataAttr;
     private updateNodeView;
 }

package/dist/types-ts4.5/nodeviews/table.d.ts

@@ -5,7 +5,7 @@ import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags, getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../types';
 import type { Props, TableOptions } from './types';
 type ForwardRef = (node: HTMLElement | null) => void;
@@ -13,6 +13,7 @@ export default class TableView extends ReactNodeView<Props> {
     private table;
     private renderedDOM?;
     private resizeObserver?;
+    private roundedTableEdgeRefreshHandle;
     eventDispatcher?: EventDispatcher;
     getPos: getPosHandlerNode;
     options: TableOptions | undefined;
@@ -32,6 +33,8 @@ export default class TableView extends ReactNodeView<Props> {
     private _handleTableRef;
     setDomAttrs(node: PmNode): void;
     getNode: () => PmNode;
+    private scheduleRoundedTableEdgeRefresh;
+    update(node: PmNode, decorations: ReadonlyArray<Decoration>, innerDecorations?: DecorationSource, validUpdate?: (currentNode: PmNode, newNode: PmNode) => boolean): boolean;
     render(props: Props, forwardRef: ForwardRef): React.JSX.Element;
     private hasHoveredRows;
     viewShouldUpdate(nextNode: PmNode): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "22.4.2",
+	"version": "22.4.3",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"