@atlaskit/editor-plugin-table 13.0.3 → 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 +16 -0
- package/dist/cjs/nodeviews/table.js +6 -6
- 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 +6 -6
- 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 +6 -6
- 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,21 @@
|
|
|
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
|
+
|
|
11
|
+
## 13.0.4
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`bb5564f5dadab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bb5564f5dadab) -
|
|
16
|
+
fix table local id type error
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 13.0.3
|
|
4
20
|
|
|
5
21
|
### 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;
|
|
@@ -154,9 +154,9 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
154
154
|
if (this.view.state.selection.visible) {
|
|
155
155
|
selectionBookmark = this.view.state.selection.getBookmark();
|
|
156
156
|
}
|
|
157
|
-
if ((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(
|
|
157
|
+
if (this.dom && (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
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.
|
|
@@ -195,7 +195,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
195
195
|
_this$options4,
|
|
196
196
|
_this$getEditorFeatur2;
|
|
197
197
|
if (!this.table) {
|
|
198
|
-
return;
|
|
198
|
+
return; // width / attribute application to actual table will happen later when table is set
|
|
199
199
|
}
|
|
200
200
|
var attrs = tableAttributes(node);
|
|
201
201
|
Object.keys(attrs).forEach(function (attr) {
|
|
@@ -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;
|
|
@@ -126,9 +126,9 @@ export default class TableView extends ReactNodeView {
|
|
|
126
126
|
if (this.view.state.selection.visible) {
|
|
127
127
|
selectionBookmark = this.view.state.selection.getBookmark();
|
|
128
128
|
}
|
|
129
|
-
if (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-${
|
|
129
|
+
if (this.dom && expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
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.
|
|
@@ -162,7 +162,7 @@ export default class TableView extends ReactNodeView {
|
|
|
162
162
|
setDomAttrs(node) {
|
|
163
163
|
var _this$options3, _this$options4, _this$getEditorFeatur2;
|
|
164
164
|
if (!this.table) {
|
|
165
|
-
return;
|
|
165
|
+
return; // width / attribute application to actual table will happen later when table is set
|
|
166
166
|
}
|
|
167
167
|
const attrs = tableAttributes(node);
|
|
168
168
|
Object.keys(attrs).forEach(attr => {
|
|
@@ -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;
|
|
@@ -147,9 +147,9 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
147
147
|
if (this.view.state.selection.visible) {
|
|
148
148
|
selectionBookmark = this.view.state.selection.getBookmark();
|
|
149
149
|
}
|
|
150
|
-
if (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(
|
|
150
|
+
if (this.dom && expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
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.
|
|
@@ -188,7 +188,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
188
188
|
_this$options4,
|
|
189
189
|
_this$getEditorFeatur2;
|
|
190
190
|
if (!this.table) {
|
|
191
|
-
return;
|
|
191
|
+
return; // width / attribute application to actual table will happen later when table is set
|
|
192
192
|
}
|
|
193
193
|
var attrs = tableAttributes(node);
|
|
194
194
|
Object.keys(attrs).forEach(function (attr) {
|
|
@@ -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"
|