@atlaskit/editor-plugin-table 24.6.1 → 25.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +40 -0
- package/dist/cjs/entry-points/types.js +0 -6
- package/dist/cjs/nodeviews/TableCell.js +23 -1
- package/dist/cjs/nodeviews/rounded-table-edges.js +74 -11
- package/dist/cjs/nodeviews/table.js +0 -7
- package/dist/cjs/types/index.js +2 -6
- package/dist/cjs/ui/TableFloatingControls/index.js +1 -17
- package/dist/cjs/ui/common-styles.js +4 -5
- package/dist/cjs/ui/consts.js +1 -3
- package/dist/cjs/ui/ui-styles.js +12 -18
- package/dist/es2019/entry-points/types.js +1 -1
- package/dist/es2019/nodeviews/TableCell.js +23 -1
- package/dist/es2019/nodeviews/rounded-table-edges.js +72 -10
- package/dist/es2019/nodeviews/table.js +0 -7
- package/dist/es2019/types/index.js +0 -5
- package/dist/es2019/ui/TableFloatingControls/index.js +1 -17
- package/dist/es2019/ui/common-styles.js +3 -60
- package/dist/es2019/ui/consts.js +0 -2
- package/dist/es2019/ui/ui-styles.js +3 -57
- package/dist/esm/entry-points/types.js +1 -1
- package/dist/esm/nodeviews/TableCell.js +23 -1
- package/dist/esm/nodeviews/rounded-table-edges.js +73 -10
- package/dist/esm/nodeviews/table.js +0 -7
- package/dist/esm/types/index.js +0 -5
- package/dist/esm/ui/TableFloatingControls/index.js +1 -17
- package/dist/esm/ui/common-styles.js +6 -7
- package/dist/esm/ui/consts.js +0 -2
- package/dist/esm/ui/ui-styles.js +14 -20
- package/dist/types/entry-points/types.d.ts +1 -1
- package/dist/types/nodeviews/rounded-table-edges.d.ts +16 -0
- package/dist/types/types/index.d.ts +0 -9
- package/dist/types/ui/consts.d.ts +0 -2
- package/dist/types/ui/ui-styles.d.ts +0 -2
- package/package.json +17 -20
- package/dist/cjs/nodeviews/OverflowShadowsObserver.js +0 -132
- package/dist/cjs/nodeviews/update-overflow-shadows.js +0 -16
- package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -118
- package/dist/cjs/ui/TableFloatingControls/CornerControls/types.js +0 -5
- package/dist/es2019/nodeviews/OverflowShadowsObserver.js +0 -112
- package/dist/es2019/nodeviews/update-overflow-shadows.js +0 -10
- package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -126
- package/dist/es2019/ui/TableFloatingControls/CornerControls/types.js +0 -1
- package/dist/esm/nodeviews/OverflowShadowsObserver.js +0 -125
- package/dist/esm/nodeviews/update-overflow-shadows.js +0 -10
- package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js +0 -109
- package/dist/esm/ui/TableFloatingControls/CornerControls/types.js +0 -1
- package/dist/types/nodeviews/OverflowShadowsObserver.d.ts +0 -26
- package/dist/types/nodeviews/__mocks__/OverflowShadowsObserver.d.ts +0 -9
- package/dist/types/nodeviews/__mocks__/OverridableMock.d.ts +0 -9
- package/dist/types/nodeviews/update-overflow-shadows.d.ts +0 -1
- package/dist/types/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts +0 -15
- package/dist/types/ui/TableFloatingControls/CornerControls/types.d.ts +0 -11
package/dist/esm/ui/ui-styles.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
|
|
3
3
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
|
|
4
4
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
5
|
import { css } from '@emotion/react';
|
|
6
|
-
import { tableCellBorderWidth
|
|
7
|
-
import {
|
|
6
|
+
import { tableCellBorderWidth } from '@atlaskit/editor-common/styles';
|
|
7
|
+
import { akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
|
|
8
8
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
9
9
|
import { TableCssClassName as ClassName } from '../types';
|
|
10
|
-
import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize,
|
|
10
|
+
import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
|
|
11
11
|
var InsertLine = function InsertLine(cssString) {
|
|
12
12
|
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tbackground: ", ";\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t\t", "\n\t}\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor, akEditorUnitZIndex, cssString);
|
|
13
13
|
};
|
|
@@ -81,12 +81,6 @@ export var columnControlsLineMarker = function columnControlsLineMarker() {
|
|
|
81
81
|
export var DeleteButton = function DeleteButton() {
|
|
82
82
|
return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t.", ", .", " {\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat(tableCellSelectedDeleteIconBackground, ";\n color: ").concat(tableCellSelectedDeleteIconColor, ";\n ")), ClassName.CONTROLS_DELETE_BUTTON, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor);
|
|
83
83
|
};
|
|
84
|
-
export var OverflowShadow = function OverflowShadow() {
|
|
85
|
-
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t.", ", .", " {\n\t\tdisplay: block;\n\t\theight: calc(100% - ", "px);\n\t\tposition: absolute;\n\t\tpointer-events: none;\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\tbackground:\n\t\t\tlinear-gradient(to left, transparent 0, ", " 140%),\n\t\t\tlinear-gradient(\n\t\t\t\tto right,\n\t\t\t\t", " 0px,\n\t\t\t\ttransparent 1px\n\t\t\t);\n\t\tleft: 0px;\n\t}\n\t.", "[data-number-column='true'] > :not(.", ").", " {\n\t\tleft: ", "px;\n\t}\n\t.", " {\n\t\tbackground:\n\t\t\tlinear-gradient(to right, transparent 0, ", " 140%),\n\t\t\tlinear-gradient(to left, ", " 0px, transparent 1px);\n\t\tleft: calc(100% - ", "px);\n\t}\n\t.", " {\n\t\t.", " {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\t}\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop, tableMarginTop, akEditorShadowZIndex, tableOverflowShadowWidthWide, ClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, #1E1F2129)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, #1E1F2129)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", tableOverflowShadowWidthWide, ClassName.WITH_CONTROLS, ClassName.TABLE_LEFT_SHADOW, tableBorderColor);
|
|
86
|
-
};
|
|
87
|
-
export var OverflowShadowLessPadding = function OverflowShadowLessPadding(tableOverflowShadowWidth) {
|
|
88
|
-
return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t.", ", .", " {\n\t\twidth: ", "px;\n\t}\n\n\t.", " {\n\t\tleft: 6px;\n\t}\n\t.", ".", " {\n\t\tleft: 8px;\n\t}\n\n\t.", " {\n\t\tleft: calc(100% - 6px);\n\t}\n\t.", ".", " {\n\t\tleft: calc(100% - 16px);\n\t}\n"])), ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_CHROMELESS);
|
|
89
|
-
};
|
|
90
84
|
var columnHeaderButton = function columnHeaderButton(cssString) {
|
|
91
85
|
return css({
|
|
92
86
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -114,34 +108,34 @@ var columnHeaderButtonSelected = function columnHeaderButtonSelected() {
|
|
|
114
108
|
});
|
|
115
109
|
};
|
|
116
110
|
var getFloatingDotOverrides = function getFloatingDotOverrides() {
|
|
117
|
-
return css(
|
|
111
|
+
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\ttr\n\t\t\tth:last-child\n\t\t\t.", "::before,\n\t\t\ttr\n\t\t\ttd:last-child\n\t\t\t.", "::before {\n\t\t\tcontent: '';\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: ", "px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t\ttop: ", ";\n\t\t\tright: 0px;\n\t\t}\n\t"])), ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor, lineMarkerSize, lineMarkerSize, "var(--ds-space-025, 2px)");
|
|
118
112
|
};
|
|
119
113
|
export var floatingColumnControls = function floatingColumnControls() {
|
|
120
|
-
return css(
|
|
114
|
+
return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tbox-sizing: border-box;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\n\t\t\t.", " {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tbox-sizing: border-box;\n\n\t\t\t.", " {\n\t\t\t\tdisplay: grid;\n\t\t\t\tjustify-items: center;\n\t\t\t}\n\t\t}\n\t"])), ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER);
|
|
121
115
|
};
|
|
122
116
|
export var rowControlsWrapperDotStyle = function rowControlsWrapperDotStyle() {
|
|
123
|
-
return css(
|
|
117
|
+
return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n\t\t/* override for DnD controls */\n\t\tdiv.", ">.", "::after {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tdiv.", ">.", "::after {\n\t\t\tcontent: ' ';\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: ", "px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t\ttop: -", "px;\n\t\t\tright: -1px;\n\t\t}\n\t"])), ClassName.WITH_CONTROLS, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor, lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth);
|
|
124
118
|
};
|
|
125
119
|
export var columnControlsDecoration = function columnControlsDecoration() {
|
|
126
|
-
return css(
|
|
120
|
+
return css(_templateObject14 || (_templateObject14 = _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());
|
|
127
121
|
};
|
|
128
122
|
export var hoveredDeleteButton = function hoveredDeleteButton() {
|
|
129
|
-
return css(
|
|
123
|
+
return css(_templateObject15 || (_templateObject15 = _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);
|
|
130
124
|
};
|
|
131
125
|
export var hoveredCell = function hoveredCell() {
|
|
132
|
-
return css(
|
|
126
|
+
return css(_templateObject16 || (_templateObject16 = _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, ";"));
|
|
133
127
|
};
|
|
134
128
|
|
|
135
129
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
136
|
-
export var hoveredWarningCell = css(
|
|
130
|
+
export var hoveredWarningCell = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\ttd.", " {\n\t\t\tbackground-color: ", " !important; /* We need to override the background-color added to the cell */\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_WARNING, "var(--ds-background-warning, #FFF5DB)", "var(--ds-border-warning, #E06C00)");
|
|
137
131
|
|
|
138
132
|
// Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
|
|
139
133
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
140
134
|
var resizeLineStyles = function resizeLineStyles() {
|
|
141
|
-
return css(
|
|
135
|
+
return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n\t\tth.", "::before, td.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\tth.", "::before,\n\t\t\ttd.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t/* Styles when drag and drop is disabled - will be removed */\n\t\ttd.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\tth.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tleft: ", ";\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + ", "px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t\ttop: -", "px;\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\tth.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tright: -1px;\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + ", "px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t\ttop: -", "px;\n\t\t}\n\t"])), ClassName.WITH_DRAG_RESIZE_LINE, ClassName.WITH_DRAG_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN, ClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor, columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor, columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth);
|
|
142
136
|
};
|
|
143
137
|
export var resizeHandle = function resizeHandle() {
|
|
144
|
-
return css(
|
|
138
|
+
return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n\t.", " {\n\t\t.", " {\n\t\t\tbackground-color: transparent;\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: -", "px;\n\t\t\tcursor: col-resize;\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\ttr\n\t\t\tth:last-child\n\t\t\t.", ",\n\t\t\ttr\n\t\t\ttd:last-child\n\t\t\t.", " {\n\t\t\tbackground-color: transparent;\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tcursor: col-resize;\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\n\t\ttable\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after,\n\t /* Styles when drag and drop is disabled - will be removed */\n\t\ttable\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after {\n\t\t\ttop: -", "px;\n\t\t\theight: calc(100% + ", "px);\n\t\t}\n\t}\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, ClassName.RESIZE_HANDLE_DECORATION, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, resizeLineStyles(), ClassName.WITH_DRAG_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_DRAG_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);
|
|
145
139
|
};
|
|
146
140
|
|
|
147
141
|
// Drag and Drop: drop target insert line
|
|
@@ -179,5 +173,5 @@ var insertLineInactiveColor = css({
|
|
|
179
173
|
// or column drag
|
|
180
174
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
181
175
|
export var insertLine = function insertLine() {
|
|
182
|
-
return css(
|
|
176
|
+
return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n\t.", " {\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\t}\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, tableCellBorderWidth, insertLineActiveColor, ClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, tableCellBorderWidth, insertLineInactiveColor, ClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineActiveColor, ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineInactiveColor, ClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", tableCellBorderWidth, insertLineActiveColor, ClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", tableCellBorderWidth, insertLineInactiveColor, ClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, ClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, tableCellBorderWidth, insertLineActiveColor, ClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, tableCellBorderWidth, insertLineInactiveColor, ClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, ClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, ClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, ClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, ClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, ClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, ClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor);
|
|
183
177
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { RESIZE_HANDLE_AREA_DECORATION_GAP,
|
|
1
|
+
export { RESIZE_HANDLE_AREA_DECORATION_GAP, TableCssClassName, TableDecorations, } from '../types/index';
|
|
2
2
|
export type { ActiveTableMenu, AlignmentOptions, Cell, CellColumnPositioning, CellHoverMeta, CellTransform, ColumnResizingPluginAction, ColumnResizingPluginState, DraggableBehaviour, DraggableData, DraggableSourceData, DraggableTargetData, DraggableType, HandleTypes, InsertRowMethods, InsertRowOptions, InvalidNodeAttr, MessageDescriptor, PermittedLayoutsDescriptor, PluginConfig, PluginInjectionAPI, PluginInjectionAPIWithA11y, ReportInvalidNodeAttrs, RowInsertPosition, TableDirection, TablePluginAction, TablePluginState, TableSharedState, TableSharedStateInternal, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState, WidthToWidest, } from '../types/index';
|
|
@@ -1,4 +1,19 @@
|
|
|
1
1
|
import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
|
|
2
|
+
type RoundedTableCellEdgeState = {
|
|
3
|
+
reachesBottom: boolean;
|
|
4
|
+
reachesLeft: boolean;
|
|
5
|
+
reachesRight: boolean;
|
|
6
|
+
reachesTop: boolean;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Returns the rounded-edge membership for a cell offset.
|
|
10
|
+
*
|
|
11
|
+
* The first lookup for a table scans only the TableMap's four borders and caches edge cells.
|
|
12
|
+
* Interior cells have no cache entry and require no DOM attributes. Subsequent cell nodeview
|
|
13
|
+
* constructors perform an O(1) lookup. The cache is keyed by the immutable table node, so
|
|
14
|
+
* structural document changes naturally create a fresh entry.
|
|
15
|
+
*/
|
|
16
|
+
export declare const getRoundedTableCellEdgeState: (tableNode: PmNode, cellOffset: number) => RoundedTableCellEdgeState | undefined;
|
|
2
17
|
/**
|
|
3
18
|
* Keeps a table's rounded-corner edge attributes in sync as its shape changes.
|
|
4
19
|
*
|
|
@@ -24,3 +39,4 @@ export declare class RoundedTableEdges {
|
|
|
24
39
|
destroy(): void;
|
|
25
40
|
private scheduleRefresh;
|
|
26
41
|
}
|
|
42
|
+
export {};
|
|
@@ -434,24 +434,19 @@ export declare const TableCssClassName: {
|
|
|
434
434
|
TABLE_HEADER_CELL: 'pm-table-header-content-wrap';
|
|
435
435
|
TABLE_HEADER_CELL_WRAPPER: 'pm-table-header-content-wrap';
|
|
436
436
|
TABLE_LEFT_BORDER: 'pm-table-left-border';
|
|
437
|
-
TABLE_LEFT_SHADOW: 'pm-table-with-left-shadow';
|
|
438
437
|
TABLE_NODE_WRAPPER: 'pm-table-wrapper';
|
|
439
438
|
TABLE_NODE_WRAPPER_NO_OVERFLOW: 'pm-table-wrapper-no-overflow';
|
|
440
439
|
TABLE_RESIZER_CONTAINER: 'pm-table-resizer-container';
|
|
441
440
|
TABLE_RIGHT_BORDER: 'pm-table-right-border';
|
|
442
|
-
TABLE_RIGHT_SHADOW: 'pm-table-with-right-shadow';
|
|
443
441
|
TABLE_ROW_CONTROLS_WRAPPER: 'pm-table-row-controls-wrapper';
|
|
444
442
|
TABLE_SCROLL_INLINE_SHADOW: 'pm-table-scroll-inline-shadow';
|
|
445
443
|
TABLE_SELECTED: string;
|
|
446
|
-
TABLE_SHADOW_SENTINEL_LEFT: 'pm-table-shadow-sentinel-left';
|
|
447
|
-
TABLE_SHADOW_SENTINEL_RIGHT: 'pm-table-shadow-sentinel-right';
|
|
448
444
|
TABLE_STICKY: string;
|
|
449
445
|
TABLE_STICKY_SCROLLBAR_CONTAINER: 'pm-table-sticky-scrollbar-container';
|
|
450
446
|
TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: 'pm-table-sticky-scrollbar-sentinel-bottom';
|
|
451
447
|
TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: 'pm-table-sticky-scrollbar-sentinel-top';
|
|
452
448
|
TABLE_STICKY_SENTINEL_BOTTOM: 'pm-table-sticky-sentinel-bottom';
|
|
453
449
|
TABLE_STICKY_SENTINEL_TOP: 'pm-table-sticky-sentinel-top';
|
|
454
|
-
TABLE_STICKY_SHADOW: 'pm-table-sticky-shadow';
|
|
455
450
|
TABLE_STICKY_WRAPPER: 'pm-table-sticky-wrapper';
|
|
456
451
|
TABLE_VIEW_CONTENT_WRAP: 'tableView-content-wrap';
|
|
457
452
|
TOP_LEFT_CELL: string;
|
|
@@ -487,10 +482,6 @@ export interface ToolbarMenuState {
|
|
|
487
482
|
export interface ToolbarMenuContext {
|
|
488
483
|
formatMessage: IntlShape['formatMessage'];
|
|
489
484
|
}
|
|
490
|
-
export declare enum ShadowEvent {
|
|
491
|
-
SHOW_BEFORE_SHADOW = "showBeforeShadow",
|
|
492
|
-
SHOW_AFTER_SHADOW = "showAfterShadow"
|
|
493
|
-
}
|
|
494
485
|
export type ReportInvalidNodeAttrs = (invalidNodeAttrs: InvalidNodeAttr) => void;
|
|
495
486
|
export type InvalidNodeAttr = {
|
|
496
487
|
attribute: string;
|
|
@@ -45,8 +45,6 @@ export declare const contextualMenuDropdownWidthDnD = 250;
|
|
|
45
45
|
export declare const stickyRowZIndex: number;
|
|
46
46
|
export declare const stickyRowOffsetTop = 8;
|
|
47
47
|
export declare const stickyHeaderBorderBottomWidth = 1;
|
|
48
|
-
export declare const tableOverflowShadowWidth = 8;
|
|
49
|
-
export declare const tableOverflowShadowWidthWide = 32;
|
|
50
48
|
export declare const tablePopupMenuFitHeight = 188;
|
|
51
49
|
export declare const tableColumnControlsHeight = 24;
|
|
52
50
|
export declare const nativeStickyHeaderZIndex: number;
|
|
@@ -9,8 +9,6 @@ export declare const insertColumnButtonWrapper: () => SerializedStyles;
|
|
|
9
9
|
export declare const insertRowButtonWrapper: () => SerializedStyles;
|
|
10
10
|
export declare const columnControlsLineMarker: () => SerializedStyles;
|
|
11
11
|
export declare const DeleteButton: () => SerializedStyles;
|
|
12
|
-
export declare const OverflowShadow: () => SerializedStyles;
|
|
13
|
-
export declare const OverflowShadowLessPadding: (tableOverflowShadowWidth: number) => SerializedStyles;
|
|
14
12
|
export declare const floatingColumnControls: () => SerializedStyles;
|
|
15
13
|
export declare const rowControlsWrapperDotStyle: () => SerializedStyles;
|
|
16
14
|
export declare const columnControlsDecoration: () => SerializedStyles;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "25.0.1",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -24,20 +24,20 @@
|
|
|
24
24
|
"@atlaskit/button": "^25.0.0",
|
|
25
25
|
"@atlaskit/custom-steps": "^1.0.0",
|
|
26
26
|
"@atlaskit/editor-palette": "^3.4.0",
|
|
27
|
-
"@atlaskit/editor-plugin-accessibility-utils": "^
|
|
28
|
-
"@atlaskit/editor-plugin-analytics": "^
|
|
29
|
-
"@atlaskit/editor-plugin-batch-attribute-updates": "^
|
|
30
|
-
"@atlaskit/editor-plugin-content-insertion": "^
|
|
31
|
-
"@atlaskit/editor-plugin-editor-viewmode": "^
|
|
32
|
-
"@atlaskit/editor-plugin-extension": "
|
|
33
|
-
"@atlaskit/editor-plugin-guideline": "^
|
|
34
|
-
"@atlaskit/editor-plugin-interaction": "^
|
|
35
|
-
"@atlaskit/editor-plugin-limited-mode": "^
|
|
36
|
-
"@atlaskit/editor-plugin-selection": "^
|
|
37
|
-
"@atlaskit/editor-plugin-toolbar": "^
|
|
38
|
-
"@atlaskit/editor-plugin-ui-control-registry": "^
|
|
39
|
-
"@atlaskit/editor-plugin-user-intent": "^
|
|
40
|
-
"@atlaskit/editor-plugin-width": "^
|
|
27
|
+
"@atlaskit/editor-plugin-accessibility-utils": "^13.0.0",
|
|
28
|
+
"@atlaskit/editor-plugin-analytics": "^13.0.0",
|
|
29
|
+
"@atlaskit/editor-plugin-batch-attribute-updates": "^13.0.0",
|
|
30
|
+
"@atlaskit/editor-plugin-content-insertion": "^13.0.0",
|
|
31
|
+
"@atlaskit/editor-plugin-editor-viewmode": "^15.0.0",
|
|
32
|
+
"@atlaskit/editor-plugin-extension": "16.0.1",
|
|
33
|
+
"@atlaskit/editor-plugin-guideline": "^13.0.0",
|
|
34
|
+
"@atlaskit/editor-plugin-interaction": "^24.0.0",
|
|
35
|
+
"@atlaskit/editor-plugin-limited-mode": "^10.0.0",
|
|
36
|
+
"@atlaskit/editor-plugin-selection": "^13.0.0",
|
|
37
|
+
"@atlaskit/editor-plugin-toolbar": "^10.0.0",
|
|
38
|
+
"@atlaskit/editor-plugin-ui-control-registry": "^7.0.0",
|
|
39
|
+
"@atlaskit/editor-plugin-user-intent": "^11.0.0",
|
|
40
|
+
"@atlaskit/editor-plugin-width": "^14.0.0",
|
|
41
41
|
"@atlaskit/editor-prosemirror": "^8.0.0",
|
|
42
42
|
"@atlaskit/editor-shared-styles": "^4.0.0",
|
|
43
43
|
"@atlaskit/editor-tables": "^3.0.0",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
|
|
54
54
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
|
|
55
55
|
"@atlaskit/primitives": "^22.2.0",
|
|
56
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
56
|
+
"@atlaskit/tmp-editor-statsig": "^138.0.0",
|
|
57
57
|
"@atlaskit/toggle": "^17.1.0",
|
|
58
58
|
"@atlaskit/tokens": "^16.3.0",
|
|
59
59
|
"@atlaskit/tooltip": "^24.0.0",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"uuid": "^3.1.0"
|
|
69
69
|
},
|
|
70
70
|
"peerDependencies": {
|
|
71
|
-
"@atlaskit/editor-common": "^
|
|
71
|
+
"@atlaskit/editor-common": "^117.0.0",
|
|
72
72
|
"react": "^18.2.0 || ^19.2.0",
|
|
73
73
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
74
74
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
@@ -107,9 +107,6 @@
|
|
|
107
107
|
"platform_editor_paste_full_table_inside_empty_cell": {
|
|
108
108
|
"type": "boolean"
|
|
109
109
|
},
|
|
110
|
-
"platform_editor_nested_dnd_styles_changes": {
|
|
111
|
-
"type": "boolean"
|
|
112
|
-
},
|
|
113
110
|
"platform_editor_tables_table_selector": {
|
|
114
111
|
"type": "boolean"
|
|
115
112
|
},
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.OverflowShadowsObserver = void 0;
|
|
8
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
var _rafSchd = _interopRequireDefault(require("raf-schd"));
|
|
12
|
-
var _types = require("../types");
|
|
13
|
-
var _updateOverflowShadows = require("./update-overflow-shadows");
|
|
14
|
-
var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/function () {
|
|
15
|
-
// updateShadowState is a method to update shadow key
|
|
16
|
-
function OverflowShadowsObserver(updateShadowState, _table, wrapper) {
|
|
17
|
-
var _this = this;
|
|
18
|
-
(0, _classCallCheck2.default)(this, OverflowShadowsObserver);
|
|
19
|
-
(0, _defineProperty2.default)(this, "leftShadowSentinel", null);
|
|
20
|
-
(0, _defineProperty2.default)(this, "rightShadowSentinel", null);
|
|
21
|
-
(0, _defineProperty2.default)(this, "shadowsObserved", false);
|
|
22
|
-
(0, _defineProperty2.default)(this, "isSticky", false);
|
|
23
|
-
(0, _defineProperty2.default)(this, "stickyRowHeight", 0);
|
|
24
|
-
(0, _defineProperty2.default)(this, "init", function () {
|
|
25
|
-
var table = _this.table;
|
|
26
|
-
if (!_this.wrapper || !table) {
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
if (!_this.tableIntersectionObserver) {
|
|
30
|
-
var intersectonOnbserverCallback = function intersectonOnbserverCallback(entry) {
|
|
31
|
-
if (entry.target !== _this.leftShadowSentinel && entry.target !== _this.rightShadowSentinel) {
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
|
-
_this.updateStickyShadowsHeightIfChanged();
|
|
35
|
-
_this.updateShadowState(_this.leftShadowSentinel === entry.target ? _types.ShadowEvent.SHOW_BEFORE_SHADOW : _types.ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
|
|
36
|
-
};
|
|
37
|
-
_this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
|
|
38
|
-
entries.forEach(function (entry) {
|
|
39
|
-
return intersectonOnbserverCallback(entry);
|
|
40
|
-
});
|
|
41
|
-
}, {
|
|
42
|
-
threshold: [0, 1],
|
|
43
|
-
root: _this.wrapper,
|
|
44
|
-
rootMargin: '0px'
|
|
45
|
-
});
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
(0, _defineProperty2.default)(this, "observeShadowSentinels", function (isSticky) {
|
|
50
|
-
var _this$table, _this$table2;
|
|
51
|
-
if (_this.isSticky === isSticky) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
_this.isSticky = !!isSticky;
|
|
55
|
-
|
|
56
|
-
// reset height
|
|
57
|
-
_this.stickyRowHeight = 0;
|
|
58
|
-
// update sticky shadows
|
|
59
|
-
_this.updateStickyShadowsHeightIfChanged();
|
|
60
|
-
_this.leftShadowSentinel = (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(".".concat(_types.TableCssClassName.TABLE_SHADOW_SENTINEL_LEFT));
|
|
61
|
-
_this.rightShadowSentinel = (_this$table2 = _this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(".".concat(_types.TableCssClassName.TABLE_SHADOW_SENTINEL_RIGHT));
|
|
62
|
-
if (_this.tableIntersectionObserver && _this.leftShadowSentinel && _this.rightShadowSentinel && !_this.shadowsObserved) {
|
|
63
|
-
_this.tableIntersectionObserver.disconnect();
|
|
64
|
-
_this.tableIntersectionObserver.observe(_this.leftShadowSentinel);
|
|
65
|
-
_this.tableIntersectionObserver.observe(_this.rightShadowSentinel);
|
|
66
|
-
_this.shadowsObserved = true;
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
/**
|
|
70
|
-
* Takes a heightStyle if it can be computed in a less expensive manner,
|
|
71
|
-
* e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
|
|
72
|
-
* reading it from sticky cell
|
|
73
|
-
*/
|
|
74
|
-
(0, _defineProperty2.default)(this, "updateStickyShadows", (0, _rafSchd.default)(function (stickyRowHeight) {
|
|
75
|
-
var _this$wrapper;
|
|
76
|
-
if (!_this.isSticky) {
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
|
-
var stickyCell = _this.getStickyCell();
|
|
80
|
-
if (!stickyCell || !((_this$wrapper = _this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// Reflow Warning! - stickyCell.clientHeight
|
|
85
|
-
var newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
|
|
86
|
-
if (newStickyRowHeight !== _this.stickyRowHeight) {
|
|
87
|
-
var _this$wrapper2, _this$wrapper3;
|
|
88
|
-
_this.stickyRowHeight = newStickyRowHeight;
|
|
89
|
-
var heightStyleOrCompute = "".concat(newStickyRowHeight, "px");
|
|
90
|
-
// Use getElementsByClassName here for a live node list to capture
|
|
91
|
-
// sticky shadows
|
|
92
|
-
var liveRightShadows = (_this$wrapper2 = _this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
|
|
93
|
-
var liveLeftShadows = (_this$wrapper3 = _this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
|
|
94
|
-
(0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveLeftShadows);
|
|
95
|
-
(0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveRightShadows);
|
|
96
|
-
}
|
|
97
|
-
}));
|
|
98
|
-
this.updateShadowState = updateShadowState;
|
|
99
|
-
this.table = _table;
|
|
100
|
-
this.wrapper = wrapper;
|
|
101
|
-
this.init();
|
|
102
|
-
}
|
|
103
|
-
return (0, _createClass2.default)(OverflowShadowsObserver, [{
|
|
104
|
-
key: "updateStickyShadowsHeightIfChanged",
|
|
105
|
-
value: function updateStickyShadowsHeightIfChanged() {
|
|
106
|
-
if (!this.isSticky) {
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
var stickyCell = this.getStickyCell();
|
|
110
|
-
if (!stickyCell) {
|
|
111
|
-
return;
|
|
112
|
-
}
|
|
113
|
-
this.updateStickyShadows();
|
|
114
|
-
}
|
|
115
|
-
}, {
|
|
116
|
-
key: "getStickyCell",
|
|
117
|
-
value: function getStickyCell() {
|
|
118
|
-
var _this$wrapper4;
|
|
119
|
-
var stickyRow = (_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.querySelector('tr.sticky');
|
|
120
|
-
var stickyCell = stickyRow && stickyRow.firstElementChild;
|
|
121
|
-
return stickyCell;
|
|
122
|
-
}
|
|
123
|
-
}, {
|
|
124
|
-
key: "dispose",
|
|
125
|
-
value: function dispose() {
|
|
126
|
-
if (this.tableIntersectionObserver) {
|
|
127
|
-
this.tableIntersectionObserver.disconnect();
|
|
128
|
-
this.tableIntersectionObserver = undefined;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}]);
|
|
132
|
-
}();
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.updateShadowListForStickyStyles = void 0;
|
|
7
|
-
var _types = require("../types");
|
|
8
|
-
var updateShadowListForStickyStyles = exports.updateShadowListForStickyStyles = function updateShadowListForStickyStyles(heightStyle, shadows) {
|
|
9
|
-
Array.from(shadows).forEach(function (shadow) {
|
|
10
|
-
if (shadow.classList.contains(_types.TableCssClassName.TABLE_STICKY_SHADOW)) {
|
|
11
|
-
if (shadow instanceof HTMLElement && shadow.style.height !== heightStyle) {
|
|
12
|
-
shadow.style.height = heightStyle;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
};
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.DragCornerControlsWithSelection = exports.DragCornerControls = void 0;
|
|
9
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
-
var _reactIntl = require("react-intl");
|
|
12
|
-
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
13
|
-
var _messages = require("@atlaskit/editor-common/messages");
|
|
14
|
-
var _utils = require("@atlaskit/editor-tables/utils");
|
|
15
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
16
|
-
var _commands = require("../../../pm-plugins/commands");
|
|
17
|
-
var _types = require("../../../types");
|
|
18
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
19
|
-
var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
|
|
20
|
-
var editorView = _ref.editorView,
|
|
21
|
-
isInDanger = _ref.isInDanger,
|
|
22
|
-
isResizing = _ref.isResizing,
|
|
23
|
-
formatMessage = _ref.intl.formatMessage;
|
|
24
|
-
var handleOnClick = function handleOnClick() {
|
|
25
|
-
var state = editorView.state,
|
|
26
|
-
dispatch = editorView.dispatch;
|
|
27
|
-
dispatch((0, _utils.selectTable)(state.tr).setMeta('addToHistory', false));
|
|
28
|
-
};
|
|
29
|
-
var handleMouseOut = function handleMouseOut() {
|
|
30
|
-
var state = editorView.state,
|
|
31
|
-
dispatch = editorView.dispatch;
|
|
32
|
-
(0, _commands.clearHoverSelection)()(state, dispatch);
|
|
33
|
-
};
|
|
34
|
-
var isActive = (0, _react.useMemo)(function () {
|
|
35
|
-
var selection = editorView.state.selection;
|
|
36
|
-
var table = (0, _utils.findTable)(selection);
|
|
37
|
-
if (!table) {
|
|
38
|
-
return false;
|
|
39
|
-
}
|
|
40
|
-
return (0, _utils.isTableSelected)(selection);
|
|
41
|
-
}, [editorView.state]);
|
|
42
|
-
if (isResizing) {
|
|
43
|
-
return null;
|
|
44
|
-
}
|
|
45
|
-
return /*#__PURE__*/_react.default.createElement("button", {
|
|
46
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
47
|
-
className: (0, _classnames.default)(_types.TableCssClassName.DRAG_CORNER_BUTTON, {
|
|
48
|
-
active: isActive,
|
|
49
|
-
danger: isActive && isInDanger
|
|
50
|
-
}),
|
|
51
|
-
"aria-label": formatMessage(_messages.tableMessages.cornerControl),
|
|
52
|
-
type: "button",
|
|
53
|
-
onClick: handleOnClick,
|
|
54
|
-
onMouseOut: handleMouseOut,
|
|
55
|
-
onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
|
|
56
|
-
contentEditable: false
|
|
57
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
58
|
-
className: _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER
|
|
59
|
-
}));
|
|
60
|
-
};
|
|
61
|
-
var DragCornerControlsComponentWithSelection = function DragCornerControlsComponentWithSelection(_ref2) {
|
|
62
|
-
var editorView = _ref2.editorView,
|
|
63
|
-
isInDanger = _ref2.isInDanger,
|
|
64
|
-
isResizing = _ref2.isResizing,
|
|
65
|
-
formatMessage = _ref2.intl.formatMessage,
|
|
66
|
-
api = _ref2.api;
|
|
67
|
-
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
|
|
68
|
-
var _states$selectionStat;
|
|
69
|
-
return {
|
|
70
|
-
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
|
|
71
|
-
};
|
|
72
|
-
}),
|
|
73
|
-
selection = _useSharedPluginState.selection;
|
|
74
|
-
var handleOnClick = function handleOnClick() {
|
|
75
|
-
var state = editorView.state,
|
|
76
|
-
dispatch = editorView.dispatch;
|
|
77
|
-
dispatch((0, _utils.selectTable)(state.tr).setMeta('addToHistory', false));
|
|
78
|
-
};
|
|
79
|
-
var handleMouseOut = function handleMouseOut() {
|
|
80
|
-
var state = editorView.state,
|
|
81
|
-
dispatch = editorView.dispatch;
|
|
82
|
-
(0, _commands.clearHoverSelection)()(state, dispatch);
|
|
83
|
-
};
|
|
84
|
-
var isActive = (0, _react.useMemo)(function () {
|
|
85
|
-
if (!selection) {
|
|
86
|
-
return;
|
|
87
|
-
}
|
|
88
|
-
var table = (0, _utils.findTable)(selection);
|
|
89
|
-
if (!table) {
|
|
90
|
-
return false;
|
|
91
|
-
}
|
|
92
|
-
return (0, _utils.isTableSelected)(selection);
|
|
93
|
-
}, [selection]);
|
|
94
|
-
if (isResizing) {
|
|
95
|
-
return null;
|
|
96
|
-
}
|
|
97
|
-
return /*#__PURE__*/_react.default.createElement("button", {
|
|
98
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
99
|
-
className: (0, _classnames.default)(_types.TableCssClassName.DRAG_CORNER_BUTTON, {
|
|
100
|
-
active: isActive,
|
|
101
|
-
danger: isActive && isInDanger
|
|
102
|
-
}),
|
|
103
|
-
"aria-label": formatMessage(_messages.tableMessages.cornerControl),
|
|
104
|
-
type: "button",
|
|
105
|
-
onClick: handleOnClick,
|
|
106
|
-
onMouseOut: handleMouseOut,
|
|
107
|
-
onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
|
|
108
|
-
contentEditable: false
|
|
109
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
110
|
-
className: _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER
|
|
111
|
-
}));
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
115
|
-
var DragCornerControlsWithSelection = exports.DragCornerControlsWithSelection = (0, _reactIntl.injectIntl)(DragCornerControlsComponentWithSelection);
|
|
116
|
-
|
|
117
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
118
|
-
var DragCornerControls = exports.DragCornerControls = (0, _reactIntl.injectIntl)(DragCornerControlsComponent);
|