@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 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, props.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, pmNode) {
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(pmNode.attrs.localId));
159
- this.dom.setAttribute('data-ssr-placeholder-replace', "table-nodeview-".concat(pmNode.attrs.localId));
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: 'border.radius.100',
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-border-radius, 3px)",
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-border-radius, 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-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
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-border-radius, 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-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
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: 'border.radius',
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,
@@ -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-border-radius, 3px)", _types.TableCssClassName.CONTROLS_BUTTON_ICON, 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-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, props.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, pmNode) {
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-${pmNode.attrs.localId}`);
131
- this.dom.setAttribute('data-ssr-placeholder-replace', `table-nodeview-${pmNode.attrs.localId}`);
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: 'border.radius.100',
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-border-radius, 3px)",
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-border-radius, 3px)"};
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-border-radius, 3px)"};
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-border-radius, 3px)"};
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-border-radius, 3px)"};
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-border-radius, 3px)"};
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: 'border.radius',
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-border-radius, 3px)"};
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, props.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, pmNode) {
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(pmNode.attrs.localId));
152
- this.dom.setAttribute('data-ssr-placeholder-replace', "table-nodeview-".concat(pmNode.attrs.localId));
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: 'border.radius.100',
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-border-radius, 3px)",
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-border-radius, 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-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
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-border-radius, 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-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
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: 'border.radius',
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,
@@ -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-border-radius, 3px)", ClassName.CONTROLS_BUTTON_ICON, 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-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",
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.1",
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.1.0",
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.0.0",
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"