@atlaskit/editor-plugin-table 1.1.4 → 1.2.0
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 +21 -0
- package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +7 -0
- package/dist/cjs/plugins/table/toolbar.js +3 -2
- package/dist/cjs/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js +4 -1
- package/dist/cjs/plugins/table/ui/common-styles.js +1 -1
- package/dist/cjs/plugins/table/ui/messages.js +5 -0
- package/dist/cjs/plugins/table/ui/ui-styles.js +2 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +7 -0
- package/dist/es2019/plugins/table/toolbar.js +3 -2
- package/dist/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js +5 -2
- package/dist/es2019/plugins/table/ui/common-styles.js +9 -3
- package/dist/es2019/plugins/table/ui/messages.js +5 -0
- package/dist/es2019/plugins/table/ui/ui-styles.js +8 -4
- package/dist/es2019/version.json +1 -1
- package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +7 -0
- package/dist/esm/plugins/table/toolbar.js +3 -2
- package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js +5 -2
- package/dist/esm/plugins/table/ui/common-styles.js +1 -1
- package/dist/esm/plugins/table/ui/messages.js +5 -0
- package/dist/esm/plugins/table/ui/ui-styles.js +3 -3
- package/dist/esm/version.json +1 -1
- package/dist/types/plugins/table/index.d.ts +3 -1
- package/dist/types/plugins/table/ui/messages.d.ts +5 -0
- package/package.json +6 -6
- package/report.api.md +3 -2
- package/src/__tests__/integration/__fixtures__/large-table-with-sticky-header.ts +2311 -0
- package/src/__tests__/integration/delete-last-column-in-full-width.ts +1 -1
- package/src/__tests__/integration/floating-toolbar.ts +1 -1
- package/src/__tests__/integration/sticky-header.ts +160 -0
- package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-column-menu-item-visual-hints-should-be-added-to-the-table-column-on-hover-1-snap.png +2 -2
- package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-visual-hints-should-be-added-to-the-table-row-on-hover-1-snap.png +2 -2
- package/src/__tests__/visual-regression/__image_snapshots__/index-ts-snapshot-test-table-numbered-list-should-not-overflow-table-cell-when-there-are-more-than-100-ordered-list-items-3-snap.png +2 -2
- package/src/plugins/table/index.tsx +3 -2
- package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts +7 -2
- package/src/plugins/table/toolbar.tsx +6 -2
- package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx +8 -2
- package/src/plugins/table/ui/common-styles.ts +9 -3
- package/src/plugins/table/ui/messages.ts +5 -0
- package/src/plugins/table/ui/ui-styles.ts +8 -4
|
@@ -49,5 +49,10 @@ export default defineMessages({
|
|
|
49
49
|
id: 'fabric.editor.extension.deleteElementTitle',
|
|
50
50
|
defaultMessage: 'Delete element',
|
|
51
51
|
description: 'Title text for confirm modal when deleting an extension linked to a data consumer.'
|
|
52
|
+
},
|
|
53
|
+
unnamedSource: {
|
|
54
|
+
id: 'fabric.editor.extension.sourceNoTitledName',
|
|
55
|
+
defaultMessage: 'this element',
|
|
56
|
+
description: 'The current element without preset name been selected'
|
|
52
57
|
}
|
|
53
58
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
2
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
|
-
import { tableCellBorderWidth,
|
|
4
|
+
import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
|
|
5
5
|
import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
|
|
6
6
|
import { N40A, B300, N300, R300, N20A, N60A, N0, Y50, Y200 } from '@atlaskit/theme/colors';
|
|
7
7
|
import { tableToolbarColor, tableBorderColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, lineMarkerSize, columnControlsDecorationHeight, columnControlsZIndex, columnControlsSelectedZIndex, resizeHandlerAreaWidth, resizeLineWidth, resizeHandlerZIndex, tableToolbarSize, tableInsertColumnButtonSize, tableDeleteButtonSize } from './consts';
|
|
@@ -41,14 +41,14 @@ export var columnControlsLineMarker = function columnControlsLineMarker(props) {
|
|
|
41
41
|
};
|
|
42
42
|
export var DeleteButton = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n .", " {\n ", "\n }\n }\n\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\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("var(--ds-background-neutral, ".concat(N20A, ")"), ";\n color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n ")), ClassName.CONTROLS_DELETE_BUTTON, "var(--ds-background-danger-bold, ".concat(R300, ")"), "var(--ds-icon-inverse, white)");
|
|
43
43
|
export var OverflowShadow = function OverflowShadow(props) {
|
|
44
|
-
return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: 8px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", " 100%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n transparent 0,\n ", " 100%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n left: calc(100% + 2px);\n }\n .", " {\n .", ", .", " {\n height: calc(100% - ", "px);\n top: ", "px;\n }\n .", " {\n border-left: 1px solid ", ";\n }\n }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop
|
|
44
|
+
return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: 8px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", " 100%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n transparent 0,\n ", " 100%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n left: calc(100% + 2px);\n }\n .", " {\n z-index: 0;\n }\n .", " {\n .", ", .", " {\n height: calc(100% - ", "px);\n top: ", "px;\n }\n .", " {\n border-left: 1px solid ", ";\n }\n }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop, tableMarginTop, akEditorShadowZIndex, ClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", ClassName.TABLE_COLUMN_CONTROLS_DECORATIONS, ClassName.WITH_CONTROLS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTopWithControl, tableMarginTopWithControl, ClassName.TABLE_LEFT_SHADOW, tableBorderColor(props));
|
|
45
45
|
};
|
|
46
46
|
var columnHeaderButton = function columnHeaderButton(props, cssString) {
|
|
47
47
|
return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n background: ", ";\n border: 1px solid ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n\n ", "\n"])), tableToolbarColor(props), tableBorderColor(props), cssString);
|
|
48
48
|
};
|
|
49
49
|
var columnHeaderButtonSelected = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(N0, ")"), "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), tableBorderSelectedColor, columnControlsSelectedZIndex);
|
|
50
50
|
export var columnControlsDecoration = function columnControlsDecoration(props) {
|
|
51
|
-
return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: calc(100% + ", "px);\n left: -1px;\n top: -", "px;\n height: ", "px;\n\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n div.", ">.", "::after {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: -", "px;\n right: -1px;\n }\n\n .", " .", " {\n display: block;\n }\n\n table\n tr:first-of-type\n td.", ",\n table\n tr:first-of-type\n th.", " {\n &.", ",\n &.", ",\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border: 1px solid ", ";\n border-bottom: none;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n"])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor(props), lineMarkerSize, lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n border-bottom: none;\n height: ").concat(tableToolbarSize, "px;\n width: 100%;\n position: absolute;\n top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(columnControlsZIndex, ";\n ")), ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor(props), lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
|
|
51
|
+
return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: calc(100% + ", "px);\n left: -1px;\n top: -", "px;\n height: ", "px;\n z-index: 0;\n\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n div.", ">.", "::after {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: -", "px;\n right: -1px;\n }\n\n .", " .", " {\n display: block;\n }\n\n table\n tr:first-of-type\n td.", ",\n table\n tr:first-of-type\n th.", " {\n &.", ",\n &.", ",\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border: 1px solid ", ";\n border-bottom: none;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n"])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor(props), lineMarkerSize, lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n border-bottom: none;\n height: ").concat(tableToolbarSize, "px;\n width: 100%;\n position: absolute;\n top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(columnControlsZIndex, ";\n ")), ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor(props), lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
|
|
52
52
|
};
|
|
53
53
|
export var hoveredDeleteButton = css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n .", ".", " {\n .", ",\n .", ",\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n }\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor, ClassName.SELECTED_CELL, tableCellDeleteColor);
|
|
54
54
|
export var hoveredCell = css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n :not(.", ")\n .", ":not(.", ") {\n .", " {\n position: relative;\n border: 1px solid ", ";\n }\n }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor);
|
package/dist/esm/version.json
CHANGED
|
@@ -12,5 +12,7 @@ interface TablePluginOptions {
|
|
|
12
12
|
editorSelectionAPI?: EditorSelectionAPI;
|
|
13
13
|
getEditorFeatureFlags?: GetEditorFeatureFlags;
|
|
14
14
|
}
|
|
15
|
-
declare const tablesPlugin: NextEditorPlugin<'table',
|
|
15
|
+
declare const tablesPlugin: NextEditorPlugin<'table', {
|
|
16
|
+
pluginConfiguration: TablePluginOptions | undefined;
|
|
17
|
+
}>;
|
|
16
18
|
export default tablesPlugin;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -18,14 +18,14 @@
|
|
|
18
18
|
"releaseModel": "scheduled"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@atlaskit/adf-schema": "^25.
|
|
22
|
-
"@atlaskit/editor-common": "^72.
|
|
21
|
+
"@atlaskit/adf-schema": "^25.3.0",
|
|
22
|
+
"@atlaskit/editor-common": "^72.5.0",
|
|
23
23
|
"@atlaskit/editor-shared-styles": "^2.3.0",
|
|
24
24
|
"@atlaskit/editor-tables": "^2.2.0",
|
|
25
25
|
"@atlaskit/icon": "^21.11.0",
|
|
26
26
|
"@atlaskit/theme": "^12.1.0",
|
|
27
27
|
"@atlaskit/tokens": "^1.2.0",
|
|
28
|
-
"@atlaskit/tooltip": "^17.
|
|
28
|
+
"@atlaskit/tooltip": "^17.7.0",
|
|
29
29
|
"@babel/runtime": "^7.0.0",
|
|
30
30
|
"@emotion/react": "^11.7.1",
|
|
31
31
|
"@types/prosemirror-state": "^1.2.0",
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@atlaskit/analytics-next": "^9.0.0",
|
|
53
53
|
"@atlaskit/button": "^16.5.0",
|
|
54
|
-
"@atlaskit/editor-core": "^
|
|
54
|
+
"@atlaskit/editor-core": "^180.1.0",
|
|
55
55
|
"@atlaskit/editor-test-helpers": "^18.0.0",
|
|
56
|
-
"@atlaskit/link-provider": "^1.
|
|
56
|
+
"@atlaskit/link-provider": "^1.5.0",
|
|
57
57
|
"@atlaskit/logo": "^13.11.0",
|
|
58
58
|
"@atlaskit/media-integration-test-helpers": "^2.6.0",
|
|
59
59
|
"@atlaskit/synchrony-test-helpers": "^2.3.0",
|
package/report.api.md
CHANGED
|
@@ -95,8 +95,9 @@ interface TablePluginOptions {
|
|
|
95
95
|
// @public (undocumented)
|
|
96
96
|
export const tablesPlugin: NextEditorPlugin<
|
|
97
97
|
'table',
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
{
|
|
99
|
+
pluginConfiguration: TablePluginOptions | undefined;
|
|
100
|
+
}
|
|
100
101
|
>;
|
|
101
102
|
|
|
102
103
|
// (No @packageDocumentation comment for this package)
|