@atlaskit/editor-plugin-table 13.0.4 → 13.0.5
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 +8 -0
- package/dist/cjs/nodeviews/table.js +4 -4
- package/dist/cjs/ui/DragPreview/index.js +1 -1
- package/dist/cjs/ui/FloatingContextualButton/styles.js +1 -1
- package/dist/cjs/ui/FloatingContextualMenu/styles.js +1 -1
- package/dist/cjs/ui/FloatingDragMenu/styles.js +1 -1
- package/dist/cjs/ui/TableFullWidthLabel/index.js +1 -1
- package/dist/cjs/ui/ui-styles.js +1 -1
- package/dist/es2019/nodeviews/table.js +4 -4
- package/dist/es2019/ui/DragPreview/index.js +1 -1
- package/dist/es2019/ui/FloatingContextualButton/styles.js +1 -1
- package/dist/es2019/ui/FloatingContextualMenu/styles.js +3 -3
- package/dist/es2019/ui/FloatingDragMenu/styles.js +2 -2
- package/dist/es2019/ui/TableFullWidthLabel/index.js +1 -1
- package/dist/es2019/ui/ui-styles.js +1 -1
- package/dist/esm/nodeviews/table.js +4 -4
- package/dist/esm/ui/DragPreview/index.js +1 -1
- package/dist/esm/ui/FloatingContextualButton/styles.js +1 -1
- package/dist/esm/ui/FloatingContextualMenu/styles.js +1 -1
- package/dist/esm/ui/FloatingDragMenu/styles.js +1 -1
- package/dist/esm/ui/TableFullWidthLabel/index.js +1 -1
- package/dist/esm/ui/ui-styles.js +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 13.0.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`255837cfba315`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/255837cfba315) -
|
|
8
|
+
Internal changes to how border radius is applied.
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 13.0.4
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -82,7 +82,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
82
82
|
_this.options = props.options;
|
|
83
83
|
_this.getEditorFeatureFlags = props.getEditorFeatureFlags;
|
|
84
84
|
_this.handleRef = function (node) {
|
|
85
|
-
return _this._handleTableRef(node
|
|
85
|
+
return _this._handleTableRef(node);
|
|
86
86
|
};
|
|
87
87
|
return _this;
|
|
88
88
|
}
|
|
@@ -127,7 +127,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
127
127
|
*/
|
|
128
128
|
}, {
|
|
129
129
|
key: "_handleTableRef",
|
|
130
|
-
value: function _handleTableRef(node
|
|
130
|
+
value: function _handleTableRef(node) {
|
|
131
131
|
var _this2 = this;
|
|
132
132
|
var oldIgnoreMutation;
|
|
133
133
|
var selectionBookmark;
|
|
@@ -155,8 +155,8 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
155
155
|
selectionBookmark = this.view.state.selection.getBookmark();
|
|
156
156
|
}
|
|
157
157
|
if (this.dom && (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
158
|
-
this.dom.setAttribute('data-ssr-placeholder', "table-nodeview-".concat(
|
|
159
|
-
this.dom.setAttribute('data-ssr-placeholder-replace', "table-nodeview-".concat(
|
|
158
|
+
this.dom.setAttribute('data-ssr-placeholder', "table-nodeview-".concat(this.node.attrs.localId));
|
|
159
|
+
this.dom.setAttribute('data-ssr-placeholder-replace', "table-nodeview-".concat(this.node.attrs.localId));
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
// Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
|
|
@@ -13,7 +13,7 @@ var _DragInMotionIcon = require("../icons/DragInMotionIcon");
|
|
|
13
13
|
var boxStyles = (0, _primitives.xcss)({
|
|
14
14
|
borderColor: 'color.border.focused',
|
|
15
15
|
borderStyle: 'solid',
|
|
16
|
-
borderRadius: '
|
|
16
|
+
borderRadius: 'radius.small',
|
|
17
17
|
borderWidth: 'border.width.outline',
|
|
18
18
|
backgroundColor: 'color.blanket.selected'
|
|
19
19
|
});
|
|
@@ -18,7 +18,7 @@ var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = func
|
|
|
18
18
|
'> div': _objectSpread({
|
|
19
19
|
// Sits behind button to provide surface-color background
|
|
20
20
|
background: "var(--ds-surface, ".concat(_colors.N20, ")"),
|
|
21
|
-
borderRadius: "var(--ds-
|
|
21
|
+
borderRadius: "var(--ds-radius-small, 3px)",
|
|
22
22
|
display: 'flex',
|
|
23
23
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
24
24
|
height: "".concat(_consts.contextualMenuTriggerSize + 2, "px"),
|
|
@@ -23,5 +23,5 @@ var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellCol
|
|
|
23
23
|
var tablePopupStyles = exports.tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
|
|
24
24
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
25
25
|
) {
|
|
26
|
-
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-
|
|
26
|
+
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
|
|
27
27
|
};
|
|
@@ -23,7 +23,7 @@ var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellCol
|
|
|
23
23
|
|
|
24
24
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
25
25
|
var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyles() {
|
|
26
|
-
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; /* move the submenu down when 'sort increasing/decreasing' appear before background color picker */\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-
|
|
26
|
+
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; /* move the submenu down when 'sort increasing/decreasing' appear before background color picker */\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.TABLE_DRAG_MENU_PADDING_TOP + _consts.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + _consts.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
|
|
27
27
|
};
|
|
28
28
|
|
|
29
29
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
@@ -15,7 +15,7 @@ var tableFullWidthLabelWrapperStyles = (0, _primitives.xcss)({
|
|
|
15
15
|
height: "var(--ds-space-400, 32px)",
|
|
16
16
|
display: 'flex',
|
|
17
17
|
backgroundColor: 'elevation.surface.overlay',
|
|
18
|
-
borderRadius: '
|
|
18
|
+
borderRadius: 'radius.small',
|
|
19
19
|
boxShadow: 'elevation.shadow.overlay',
|
|
20
20
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
21
21
|
lineHeight: 1,
|
package/dist/cjs/ui/ui-styles.js
CHANGED
|
@@ -35,7 +35,7 @@ var InsertMarker = exports.InsertMarker = function InsertMarker(cssString) {
|
|
|
35
35
|
return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t", ";\n\t\t", "\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_MARKER, Marker(), cssString);
|
|
36
36
|
};
|
|
37
37
|
var Button = function Button(cssString) {
|
|
38
|
-
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tborder-radius: ", ";\n\tborder-width: 0px;\n\tdisplay: inline-flex;\n\tmax-width: 100%;\n\ttext-align: center;\n\tmargin: 0px;\n\tpadding: 0px;\n\ttext-decoration: none;\n\ttransition:\n\t\tbackground 0.1s ease-out 0s,\n\t\tbox-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n\toutline: none !important;\n\tcursor: none;\n\n\t> .", " {\n\t\tdisplay: inline-flex;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n\t", "\n"])), "var(--ds-
|
|
38
|
+
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tborder-radius: ", ";\n\tborder-width: 0px;\n\tdisplay: inline-flex;\n\tmax-width: 100%;\n\ttext-align: center;\n\tmargin: 0px;\n\tpadding: 0px;\n\ttext-decoration: none;\n\ttransition:\n\t\tbackground 0.1s ease-out 0s,\n\t\tbox-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n\toutline: none !important;\n\tcursor: none;\n\n\t> .", " {\n\t\tdisplay: inline-flex;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n\t", "\n"])), "var(--ds-radius-small, 3px)", _types.TableCssClassName.CONTROLS_BUTTON_ICON, cssString);
|
|
39
39
|
};
|
|
40
40
|
|
|
41
41
|
// Explicit pixel values required here to ensure classic row controls align correctly
|
|
@@ -62,7 +62,7 @@ export default class TableView extends ReactNodeView {
|
|
|
62
62
|
this.eventDispatcher = props.eventDispatcher;
|
|
63
63
|
this.options = props.options;
|
|
64
64
|
this.getEditorFeatureFlags = props.getEditorFeatureFlags;
|
|
65
|
-
this.handleRef = node => this._handleTableRef(node
|
|
65
|
+
this.handleRef = node => this._handleTableRef(node);
|
|
66
66
|
}
|
|
67
67
|
getContentDOM() {
|
|
68
68
|
var _this$reactComponentP, _this$reactComponentP2, _this$reactComponentP3, _this$reactComponentP4;
|
|
@@ -100,7 +100,7 @@ export default class TableView extends ReactNodeView {
|
|
|
100
100
|
* wasn't at start of node. This prevents duplicate tables and maintains editor state during
|
|
101
101
|
* the DOM manipulation.
|
|
102
102
|
*/
|
|
103
|
-
_handleTableRef(node
|
|
103
|
+
_handleTableRef(node) {
|
|
104
104
|
let oldIgnoreMutation;
|
|
105
105
|
let selectionBookmark;
|
|
106
106
|
let mutationsIgnored = false;
|
|
@@ -127,8 +127,8 @@ export default class TableView extends ReactNodeView {
|
|
|
127
127
|
selectionBookmark = this.view.state.selection.getBookmark();
|
|
128
128
|
}
|
|
129
129
|
if (this.dom && expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
130
|
-
this.dom.setAttribute('data-ssr-placeholder', `table-nodeview-${
|
|
131
|
-
this.dom.setAttribute('data-ssr-placeholder-replace', `table-nodeview-${
|
|
130
|
+
this.dom.setAttribute('data-ssr-placeholder', `table-nodeview-${this.node.attrs.localId}`);
|
|
131
|
+
this.dom.setAttribute('data-ssr-placeholder-replace', `table-nodeview-${this.node.attrs.localId}`);
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
// Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
|
|
@@ -6,7 +6,7 @@ import { DragInMotionIcon } from '../icons/DragInMotionIcon';
|
|
|
6
6
|
const boxStyles = xcss({
|
|
7
7
|
borderColor: 'color.border.focused',
|
|
8
8
|
borderStyle: 'solid',
|
|
9
|
-
borderRadius: '
|
|
9
|
+
borderRadius: 'radius.small',
|
|
10
10
|
borderWidth: 'border.width.outline',
|
|
11
11
|
backgroundColor: 'color.blanket.selected'
|
|
12
12
|
});
|
|
@@ -8,7 +8,7 @@ export const tableFloatingCellButtonStyles = () => css({
|
|
|
8
8
|
'> div': {
|
|
9
9
|
// Sits behind button to provide surface-color background
|
|
10
10
|
background: `var(--ds-surface, ${N20})`,
|
|
11
|
-
borderRadius: "var(--ds-
|
|
11
|
+
borderRadius: "var(--ds-radius-small, 3px)",
|
|
12
12
|
display: 'flex',
|
|
13
13
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
14
14
|
height: `${contextualMenuTriggerSize + 2}px`,
|
|
@@ -14,7 +14,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
|
|
|
14
14
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
15
15
|
) => css`
|
|
16
16
|
.${ClassName.CONTEXTUAL_SUBMENU} {
|
|
17
|
-
border-radius: ${"var(--ds-
|
|
17
|
+
border-radius: ${"var(--ds-radius-small, 3px)"};
|
|
18
18
|
background: ${"var(--ds-surface-overlay, white)"};
|
|
19
19
|
box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
|
|
20
20
|
display: block;
|
|
@@ -35,7 +35,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
|
|
|
35
35
|
content: '';
|
|
36
36
|
display: block;
|
|
37
37
|
border: 1px solid ${tableBackgroundBorderColor};
|
|
38
|
-
border-radius: ${"var(--ds-
|
|
38
|
+
border-radius: ${"var(--ds-radius-small, 3px)"};
|
|
39
39
|
width: 20px;
|
|
40
40
|
height: 20px;
|
|
41
41
|
}
|
|
@@ -55,7 +55,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
|
|
|
55
55
|
content: '';
|
|
56
56
|
display: block;
|
|
57
57
|
border: 1px solid ${tableBackgroundBorderColor};
|
|
58
|
-
border-radius: ${"var(--ds-
|
|
58
|
+
border-radius: ${"var(--ds-radius-small, 3px)"};
|
|
59
59
|
width: 14px;
|
|
60
60
|
height: 14px;
|
|
61
61
|
}
|
|
@@ -14,7 +14,7 @@ export const cellColourPreviewStyles = selectedColor => css({
|
|
|
14
14
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
15
15
|
export const dragMenuBackgroundColorStyles = () => css`
|
|
16
16
|
.${ClassName.DRAG_SUBMENU} {
|
|
17
|
-
border-radius: ${"var(--ds-
|
|
17
|
+
border-radius: ${"var(--ds-radius-small, 3px)"};
|
|
18
18
|
background: ${"var(--ds-surface-overlay, white)"};
|
|
19
19
|
box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
|
|
20
20
|
display: block;
|
|
@@ -35,7 +35,7 @@ export const dragMenuBackgroundColorStyles = () => css`
|
|
|
35
35
|
content: '';
|
|
36
36
|
display: block;
|
|
37
37
|
border: 1px solid ${tableBackgroundBorderColor};
|
|
38
|
-
border-radius: ${"var(--ds-
|
|
38
|
+
border-radius: ${"var(--ds-radius-small, 3px)"};
|
|
39
39
|
width: 14px;
|
|
40
40
|
height: 14px;
|
|
41
41
|
}
|
|
@@ -7,7 +7,7 @@ const tableFullWidthLabelWrapperStyles = xcss({
|
|
|
7
7
|
height: "var(--ds-space-400, 32px)",
|
|
8
8
|
display: 'flex',
|
|
9
9
|
backgroundColor: 'elevation.surface.overlay',
|
|
10
|
-
borderRadius: '
|
|
10
|
+
borderRadius: 'radius.small',
|
|
11
11
|
boxShadow: 'elevation.shadow.overlay',
|
|
12
12
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
13
13
|
lineHeight: 1,
|
|
@@ -33,7 +33,7 @@ export const InsertMarker = cssString => css`
|
|
|
33
33
|
}
|
|
34
34
|
`;
|
|
35
35
|
const Button = cssString => css`
|
|
36
|
-
border-radius: ${"var(--ds-
|
|
36
|
+
border-radius: ${"var(--ds-radius-small, 3px)"};
|
|
37
37
|
border-width: 0px;
|
|
38
38
|
display: inline-flex;
|
|
39
39
|
max-width: 100%;
|
|
@@ -75,7 +75,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
75
75
|
_this.options = props.options;
|
|
76
76
|
_this.getEditorFeatureFlags = props.getEditorFeatureFlags;
|
|
77
77
|
_this.handleRef = function (node) {
|
|
78
|
-
return _this._handleTableRef(node
|
|
78
|
+
return _this._handleTableRef(node);
|
|
79
79
|
};
|
|
80
80
|
return _this;
|
|
81
81
|
}
|
|
@@ -120,7 +120,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
120
120
|
*/
|
|
121
121
|
}, {
|
|
122
122
|
key: "_handleTableRef",
|
|
123
|
-
value: function _handleTableRef(node
|
|
123
|
+
value: function _handleTableRef(node) {
|
|
124
124
|
var _this2 = this;
|
|
125
125
|
var oldIgnoreMutation;
|
|
126
126
|
var selectionBookmark;
|
|
@@ -148,8 +148,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
148
148
|
selectionBookmark = this.view.state.selection.getBookmark();
|
|
149
149
|
}
|
|
150
150
|
if (this.dom && expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
151
|
-
this.dom.setAttribute('data-ssr-placeholder', "table-nodeview-".concat(
|
|
152
|
-
this.dom.setAttribute('data-ssr-placeholder-replace', "table-nodeview-".concat(
|
|
151
|
+
this.dom.setAttribute('data-ssr-placeholder', "table-nodeview-".concat(this.node.attrs.localId));
|
|
152
|
+
this.dom.setAttribute('data-ssr-placeholder-replace', "table-nodeview-".concat(this.node.attrs.localId));
|
|
153
153
|
}
|
|
154
154
|
|
|
155
155
|
// Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
|
|
@@ -6,7 +6,7 @@ import { DragInMotionIcon } from '../icons/DragInMotionIcon';
|
|
|
6
6
|
var boxStyles = xcss({
|
|
7
7
|
borderColor: 'color.border.focused',
|
|
8
8
|
borderStyle: 'solid',
|
|
9
|
-
borderRadius: '
|
|
9
|
+
borderRadius: 'radius.small',
|
|
10
10
|
borderWidth: 'border.width.outline',
|
|
11
11
|
backgroundColor: 'color.blanket.selected'
|
|
12
12
|
});
|
|
@@ -12,7 +12,7 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
|
|
|
12
12
|
'> div': _objectSpread({
|
|
13
13
|
// Sits behind button to provide surface-color background
|
|
14
14
|
background: "var(--ds-surface, ".concat(N20, ")"),
|
|
15
|
-
borderRadius: "var(--ds-
|
|
15
|
+
borderRadius: "var(--ds-radius-small, 3px)",
|
|
16
16
|
display: 'flex',
|
|
17
17
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
18
18
|
height: "".concat(contextualMenuTriggerSize + 2, "px"),
|
|
@@ -17,5 +17,5 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
|
|
|
17
17
|
export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
|
|
18
18
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
19
19
|
) {
|
|
20
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-
|
|
20
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
|
|
21
21
|
};
|
|
@@ -17,7 +17,7 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
|
|
|
17
17
|
|
|
18
18
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
19
19
|
export var dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyles() {
|
|
20
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; /* move the submenu down when 'sort increasing/decreasing' appear before background color picker */\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-
|
|
20
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; /* move the submenu down when 'sort increasing/decreasing' appear before background color picker */\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
@@ -7,7 +7,7 @@ var tableFullWidthLabelWrapperStyles = xcss({
|
|
|
7
7
|
height: "var(--ds-space-400, 32px)",
|
|
8
8
|
display: 'flex',
|
|
9
9
|
backgroundColor: 'elevation.surface.overlay',
|
|
10
|
-
borderRadius: '
|
|
10
|
+
borderRadius: 'radius.small',
|
|
11
11
|
boxShadow: 'elevation.shadow.overlay',
|
|
12
12
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
13
13
|
lineHeight: 1,
|
package/dist/esm/ui/ui-styles.js
CHANGED
|
@@ -28,7 +28,7 @@ export var InsertMarker = function InsertMarker(cssString) {
|
|
|
28
28
|
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t.", " {\n\t\t", ";\n\t\t", "\n\t}\n"])), ClassName.CONTROLS_INSERT_MARKER, Marker(), cssString);
|
|
29
29
|
};
|
|
30
30
|
var Button = function Button(cssString) {
|
|
31
|
-
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tborder-radius: ", ";\n\tborder-width: 0px;\n\tdisplay: inline-flex;\n\tmax-width: 100%;\n\ttext-align: center;\n\tmargin: 0px;\n\tpadding: 0px;\n\ttext-decoration: none;\n\ttransition:\n\t\tbackground 0.1s ease-out 0s,\n\t\tbox-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n\toutline: none !important;\n\tcursor: none;\n\n\t> .", " {\n\t\tdisplay: inline-flex;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n\t", "\n"])), "var(--ds-
|
|
31
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tborder-radius: ", ";\n\tborder-width: 0px;\n\tdisplay: inline-flex;\n\tmax-width: 100%;\n\ttext-align: center;\n\tmargin: 0px;\n\tpadding: 0px;\n\ttext-decoration: none;\n\ttransition:\n\t\tbackground 0.1s ease-out 0s,\n\t\tbox-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n\toutline: none !important;\n\tcursor: none;\n\n\t> .", " {\n\t\tdisplay: inline-flex;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n\t", "\n"])), "var(--ds-radius-small, 3px)", ClassName.CONTROLS_BUTTON_ICON, cssString);
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
// Explicit pixel values required here to ensure classic row controls align correctly
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "13.0.
|
|
3
|
+
"version": "13.0.5",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@atlaskit/editor-plugin-batch-attribute-updates": "^4.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-content-insertion": "^4.0.0",
|
|
39
39
|
"@atlaskit/editor-plugin-editor-viewmode": "^6.0.0",
|
|
40
|
-
"@atlaskit/editor-plugin-extension": "7.0.
|
|
40
|
+
"@atlaskit/editor-plugin-extension": "7.0.2",
|
|
41
41
|
"@atlaskit/editor-plugin-guideline": "^4.0.0",
|
|
42
42
|
"@atlaskit/editor-plugin-interaction": "^6.0.0",
|
|
43
43
|
"@atlaskit/editor-plugin-limited-mode": "^1.0.0",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"@atlaskit/primitives": "^14.12.0",
|
|
58
58
|
"@atlaskit/react-ufo": "^4.5.0",
|
|
59
59
|
"@atlaskit/theme": "^20.0.0",
|
|
60
|
-
"@atlaskit/tmp-editor-statsig": "^12.
|
|
60
|
+
"@atlaskit/tmp-editor-statsig": "^12.2.0",
|
|
61
61
|
"@atlaskit/toggle": "^15.1.0",
|
|
62
62
|
"@atlaskit/tokens": "^6.1.0",
|
|
63
63
|
"@atlaskit/tooltip": "^20.4.0",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"uuid": "^3.1.0"
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
|
-
"@atlaskit/editor-common": "^108.
|
|
73
|
+
"@atlaskit/editor-common": "^108.1.0",
|
|
74
74
|
"react": "^18.2.0",
|
|
75
75
|
"react-dom": "^18.2.0",
|
|
76
76
|
"react-intl-next": "npm:react-intl@^5.18.1"
|