@atlaskit/editor-plugin-table 17.4.1 → 17.4.3

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/nodeviews/TableContainer.js +10 -7
  3. package/dist/es2019/nodeviews/TableContainer.js +10 -7
  4. package/dist/esm/nodeviews/TableContainer.js +10 -7
  5. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 17.4.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`0f91061590da3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0f91061590da3) -
8
+ Split platform_editor_vc90_transition_fixes_batch_1 into
9
+ platform_editor_vc90_transition_table_border, platform_editor_vc90_transition_expand_icon,
10
+ platform_editor_vc90_transition_mentions, platform_editor_vc90_transition_panel_icon
11
+ - Updated dependencies
12
+
13
+ ## 17.4.2
14
+
15
+ ### Patch Changes
16
+
17
+ - [`7c93170d2ea8a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7c93170d2ea8a) -
18
+ [ux] Set full width for table if in Editor max width mode and table has no width attribute set
19
+ - Updated dependencies
20
+
3
21
  ## 17.4.1
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/nodeviews/TableContainer.js CHANGED
@@ -32,7 +32,7 @@ var InnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
32
32
  node = _ref.node,
33
33
  children = _ref.children,
34
34
  tableWrapperHeight = _ref.tableWrapperHeight;
35
- var bordersReady = (0, _expValEquals.expValEquals)('platform_editor_vc90_transition_fixes_batch_1', 'isEnabled', true) ? tableWrapperHeight !== undefined && tableWrapperHeight > 0 : undefined;
35
+ var bordersReady = (0, _expValEquals.expValEquals)('platform_editor_vc90_transition_table_border', 'isEnabled', true) ? tableWrapperHeight !== undefined && tableWrapperHeight > 0 : undefined;
36
36
  return /*#__PURE__*/_react.default.createElement("div", {
37
37
  ref: ref
38
38
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -150,7 +150,6 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
150
150
  shouldUseIncreasedScalingPercent = _ref4.shouldUseIncreasedScalingPercent,
151
151
  isCommentEditor = _ref4.isCommentEditor,
152
152
  isChromelessEditor = _ref4.isChromelessEditor;
153
- var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
154
153
  var containerRef = (0, _react.useRef)(null);
155
154
  var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
156
155
  var _useState = (0, _react.useState)(false),
@@ -161,7 +160,11 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
161
160
  tableState = _useSharedPluginState2.tableState,
162
161
  editorViewModeState = _useSharedPluginState2.editorViewModeState;
163
162
  var isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
163
+ var isMaxWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isMaxWidthModeEnabled;
164
164
  var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
165
+
166
+ // If the editor is in max width mode and the table has no width, use the max width value rather than the default table value
167
+ var tableWidth = isMaxWidthModeEnabled && !node.attrs.width && (0, _platformFeatureFlags.fg)('platform_editor_max_width_default_width') ? _consts.TABLE_MAX_WIDTH : (0, _nodeWidth.getTableContainerWidth)(node);
165
168
  var updateContainerHeight = (0, _react.useCallback)(function (height) {
166
169
  var _containerRef$current;
167
170
  // current StickyHeader State is not stable to be fetch.
@@ -219,12 +222,12 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
219
222
  var responsiveContainerWidth = 0;
220
223
  var resizeHandleSpacing = 12;
221
224
  var padding = getPadding(containerWidth);
222
- // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
225
+ // When Full width or Max width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
223
226
  // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
224
- // issues when viwport width is less than full width Editor's width. To detect avoid them
227
+ // issues when viwport width is less than full/max width Editor's width. To detect avoid them
225
228
  // we need to use lineLength to defined responsiveWidth instead of containerWidth
226
- // (which does not get updated when Mac setting changes) in Full-width editor.
227
- if (isFullWidthModeEnabled) {
229
+ // (which does not get updated when Mac setting changes) in Full-width/Max-width editor.
230
+ if (isFullWidthModeEnabled || isMaxWidthModeEnabled && (0, _platformFeatureFlags.fg)('platform_editor_max_width_default_width')) {
228
231
  // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
229
232
  // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
230
233
  // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
@@ -266,7 +269,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
266
269
  width: width,
267
270
  maxResizerWidth: maxResizerWidth
268
271
  };
269
- }, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]),
272
+ }, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isMaxWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]),
270
273
  width = _useMemo.width,
271
274
  maxResizerWidth = _useMemo.maxResizerWidth;
272
275
  (0, _react.useEffect)(function () {
package/dist/es2019/nodeviews/TableContainer.js CHANGED
@@ -23,7 +23,7 @@ const InnerContainer = /*#__PURE__*/forwardRef(({
23
23
  children,
24
24
  tableWrapperHeight
25
25
  }, ref) => {
26
- const bordersReady = expValEquals('platform_editor_vc90_transition_fixes_batch_1', 'isEnabled', true) ? tableWrapperHeight !== undefined && tableWrapperHeight > 0 : undefined;
26
+ const bordersReady = expValEquals('platform_editor_vc90_transition_table_border', 'isEnabled', true) ? tableWrapperHeight !== undefined && tableWrapperHeight > 0 : undefined;
27
27
  return /*#__PURE__*/React.createElement("div", {
28
28
  ref: ref
29
29
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -145,7 +145,6 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
145
145
  isCommentEditor,
146
146
  isChromelessEditor
147
147
  }) => {
148
- const tableWidth = getTableContainerWidth(node);
149
148
  const containerRef = useRef(null);
150
149
  const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
151
150
  const [resizing, setIsResizing] = useState(false);
@@ -154,7 +153,11 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
154
153
  editorViewModeState
155
154
  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['table', 'editorViewMode'], selector);
156
155
  const isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
156
+ const isMaxWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isMaxWidthModeEnabled;
157
157
  const mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
158
+
159
+ // If the editor is in max width mode and the table has no width, use the max width value rather than the default table value
160
+ const tableWidth = isMaxWidthModeEnabled && !node.attrs.width && fg('platform_editor_max_width_default_width') ? TABLE_MAX_WIDTH : getTableContainerWidth(node);
158
161
  const updateContainerHeight = useCallback(height => {
159
162
  var _containerRef$current;
160
163
  // current StickyHeader State is not stable to be fetch.
@@ -215,12 +218,12 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
215
218
  let responsiveContainerWidth = 0;
216
219
  const resizeHandleSpacing = 12;
217
220
  const padding = getPadding(containerWidth);
218
- // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
221
+ // When Full width or Max width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
219
222
  // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
220
- // issues when viwport width is less than full width Editor's width. To detect avoid them
223
+ // issues when viwport width is less than full/max width Editor's width. To detect avoid them
221
224
  // we need to use lineLength to defined responsiveWidth instead of containerWidth
222
- // (which does not get updated when Mac setting changes) in Full-width editor.
223
- if (isFullWidthModeEnabled) {
225
+ // (which does not get updated when Mac setting changes) in Full-width/Max-width editor.
226
+ if (isFullWidthModeEnabled || isMaxWidthModeEnabled && fg('platform_editor_max_width_default_width')) {
224
227
  // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
225
228
  // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
226
229
  // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
@@ -262,7 +265,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
262
265
  width,
263
266
  maxResizerWidth
264
267
  };
265
- }, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]);
268
+ }, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isMaxWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]);
266
269
  useEffect(() => {
267
270
  if (!isResizing) {
268
271
  tableWidthRef.current = width;
package/dist/esm/nodeviews/TableContainer.js CHANGED
@@ -23,7 +23,7 @@ var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
23
23
  node = _ref.node,
24
24
  children = _ref.children,
25
25
  tableWrapperHeight = _ref.tableWrapperHeight;
26
- var bordersReady = expValEquals('platform_editor_vc90_transition_fixes_batch_1', 'isEnabled', true) ? tableWrapperHeight !== undefined && tableWrapperHeight > 0 : undefined;
26
+ var bordersReady = expValEquals('platform_editor_vc90_transition_table_border', 'isEnabled', true) ? tableWrapperHeight !== undefined && tableWrapperHeight > 0 : undefined;
27
27
  return /*#__PURE__*/React.createElement("div", {
28
28
  ref: ref
29
29
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -141,7 +141,6 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
141
141
  shouldUseIncreasedScalingPercent = _ref4.shouldUseIncreasedScalingPercent,
142
142
  isCommentEditor = _ref4.isCommentEditor,
143
143
  isChromelessEditor = _ref4.isChromelessEditor;
144
- var tableWidth = getTableContainerWidth(node);
145
144
  var containerRef = useRef(null);
146
145
  var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
147
146
  var _useState = useState(false),
@@ -152,7 +151,11 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
152
151
  tableState = _useSharedPluginState2.tableState,
153
152
  editorViewModeState = _useSharedPluginState2.editorViewModeState;
154
153
  var isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
154
+ var isMaxWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isMaxWidthModeEnabled;
155
155
  var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
156
+
157
+ // If the editor is in max width mode and the table has no width, use the max width value rather than the default table value
158
+ var tableWidth = isMaxWidthModeEnabled && !node.attrs.width && fg('platform_editor_max_width_default_width') ? TABLE_MAX_WIDTH : getTableContainerWidth(node);
156
159
  var updateContainerHeight = useCallback(function (height) {
157
160
  var _containerRef$current;
158
161
  // current StickyHeader State is not stable to be fetch.
@@ -210,12 +213,12 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
210
213
  var responsiveContainerWidth = 0;
211
214
  var resizeHandleSpacing = 12;
212
215
  var padding = getPadding(containerWidth);
213
- // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
216
+ // When Full width or Max width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
214
217
  // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
215
- // issues when viwport width is less than full width Editor's width. To detect avoid them
218
+ // issues when viwport width is less than full/max width Editor's width. To detect avoid them
216
219
  // we need to use lineLength to defined responsiveWidth instead of containerWidth
217
- // (which does not get updated when Mac setting changes) in Full-width editor.
218
- if (isFullWidthModeEnabled) {
220
+ // (which does not get updated when Mac setting changes) in Full-width/Max-width editor.
221
+ if (isFullWidthModeEnabled || isMaxWidthModeEnabled && fg('platform_editor_max_width_default_width')) {
219
222
  // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
220
223
  // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
221
224
  // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
@@ -257,7 +260,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
257
260
  width: width,
258
261
  maxResizerWidth: maxResizerWidth
259
262
  };
260
- }, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]),
263
+ }, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isMaxWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]),
261
264
  width = _useMemo.width,
262
265
  maxResizerWidth = _useMemo.maxResizerWidth;
263
266
  useEffect(function () {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "17.4.1",
3
+ "version": "17.4.3",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -57,7 +57,7 @@
57
57
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
58
58
  "@atlaskit/primitives": "^18.0.0",
59
59
  "@atlaskit/theme": "^22.0.0",
60
- "@atlaskit/tmp-editor-statsig": "^32.6.0",
60
+ "@atlaskit/tmp-editor-statsig": "^32.10.0",
61
61
  "@atlaskit/toggle": "^15.2.0",
62
62
  "@atlaskit/tokens": "^11.0.0",
63
63
  "@atlaskit/tooltip": "^20.14.0",
@@ -70,7 +70,7 @@
70
70
  "uuid": "^3.1.0"
71
71
  },
72
72
  "peerDependencies": {
73
- "@atlaskit/editor-common": "^111.23.0",
73
+ "@atlaskit/editor-common": "^111.24.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"
@@ -177,6 +177,9 @@
177
177
  },
178
178
  "platform_editor_update_table_ref_fix": {
179
179
  "type": "boolean"
180
+ },
181
+ "platform_editor_max_width_default_width": {
182
+ "type": "boolean"
180
183
  }
181
184
  }
182
185
  }