@atlaskit/editor-plugin-block-controls 3.6.0 → 3.7.1

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 (8) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/editor-commands/move-to-layout.js +5 -1
  3. package/dist/cjs/ui/quick-insert-button.js +35 -22
  4. package/dist/es2019/editor-commands/move-to-layout.js +5 -1
  5. package/dist/es2019/ui/quick-insert-button.js +35 -22
  6. package/dist/esm/editor-commands/move-to-layout.js +5 -1
  7. package/dist/esm/ui/quick-insert-button.js +35 -22
  8. package/package.json +7 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 3.7.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#134680](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134680)
8
+ [`e031bb5981334`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e031bb5981334) -
9
+ ED-27127 added tests for type ahead control
10
+ - Updated dependencies
11
+
12
+ ## 3.7.0
13
+
14
+ ### Minor Changes
15
+
16
+ - [#134661](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134661)
17
+ [`78fa52a2a4178`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/78fa52a2a4178) -
18
+ Fix layoutColumn losing breakout mark on re-order
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies
23
+
3
24
  ## 3.6.0
4
25
 
5
26
  ### Minor Changes
package/dist/cjs/editor-commands/move-to-layout.js CHANGED
@@ -271,8 +271,12 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
271
271
  // if not found, get from source node,
272
272
  var breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
273
273
 
274
+ // we don't want to remove marks when moving/re-ordering layoutSection
275
+ var shouldRemoveMarks = !($sourceFrom.node().type === layoutSection && (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true) && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_multi_select_patch_3'));
276
+ var fromContentBeforeBreakoutMarksRemoved = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true) ? tr.doc.slice($sourceFrom.pos, sourceTo).content : $sourceFrom.nodeAfter;
277
+
274
278
  // remove breakout from source content
275
- var fromContentWithoutBreakout = removeBreakoutMarks(tr, $sourceFrom, sourceTo);
279
+ var fromContentWithoutBreakout = shouldRemoveMarks ? removeBreakoutMarks(tr, $sourceFrom, sourceTo) : fromContentBeforeBreakoutMarksRemoved;
276
280
  if (!fromContentWithoutBreakout) {
277
281
  return tr;
278
282
  }
package/dist/cjs/ui/quick-insert-button.js CHANGED
@@ -49,10 +49,22 @@ var buttonStyles = (0, _primitives.xcss)({
49
49
  outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
50
50
  }
51
51
  });
52
+ var disabledStyles = (0, _primitives.xcss)({
53
+ pointerEvents: 'none',
54
+ ':hover': {
55
+ backgroundColor: 'color.background.disabled'
56
+ },
57
+ ':active': {
58
+ backgroundColor: 'color.background.disabled'
59
+ }
60
+ });
52
61
  var containerStaticStyles = (0, _primitives.xcss)({
53
62
  position: 'absolute',
54
63
  zIndex: 'card'
55
64
  });
65
+ var disabledContainerStyles = (0, _primitives.xcss)({
66
+ cursor: 'not-allowed'
67
+ });
56
68
 
57
69
  // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
58
70
 
@@ -64,6 +76,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
64
76
  rootAnchorName = _ref.rootAnchorName,
65
77
  rootNodeType = _ref.rootNodeType;
66
78
  var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
79
+ var isTypeAheadOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isOpen');
67
80
  var _useState = (0, _react.useState)({
68
81
  display: 'none'
69
82
  }),
@@ -193,26 +206,26 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
193
206
  });
194
207
  }
195
208
  }, [api, view.state]);
196
- return (
197
- /*#__PURE__*/
198
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
199
- _react.default.createElement(_primitives.Box, {
200
- style: positionStyles,
201
- xcss: [containerStaticStyles]
202
- }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
203
- position: "top",
204
- content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
205
- description: formatMessage(_messages.blockControlsMessages.insert)
206
- })
207
- }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
208
- type: "button",
209
- "aria-label": formatMessage(_messages.blockControlsMessages.insert),
210
- xcss: [buttonStyles],
211
- onClick: handleQuickInsert,
212
- onMouseDown: handleMouseDown
213
- }, /*#__PURE__*/_react.default.createElement(_add.default, {
214
- label: "add",
215
- color: "var(--ds-icon-subtle, #626F86)"
216
- }))))
217
- );
209
+ return /*#__PURE__*/_react.default.createElement(_primitives.Box
210
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
211
+ , {
212
+ style: positionStyles,
213
+ xcss: [containerStaticStyles, isTypeAheadOpen && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') && disabledContainerStyles]
214
+ }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
215
+ position: "top",
216
+ content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
217
+ description: formatMessage(_messages.blockControlsMessages.insert)
218
+ })
219
+ }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
220
+ testId: "editor-quick-insert-button",
221
+ type: "button",
222
+ "aria-label": formatMessage(_messages.blockControlsMessages.insert),
223
+ xcss: [buttonStyles, isTypeAheadOpen && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') && disabledStyles],
224
+ onClick: handleQuickInsert,
225
+ onMouseDown: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
226
+ isDisabled: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
227
+ }, /*#__PURE__*/_react.default.createElement(_add.default, {
228
+ label: "add",
229
+ color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
230
+ }))));
218
231
  };
package/dist/es2019/editor-commands/move-to-layout.js CHANGED
@@ -263,8 +263,12 @@ export const moveToLayout = api => (from, to, options) => ({
263
263
  // if not found, get from source node,
264
264
  const breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
265
265
 
266
+ // we don't want to remove marks when moving/re-ordering layoutSection
267
+ const shouldRemoveMarks = !($sourceFrom.node().type === layoutSection && editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) && fg('platform_editor_elements_dnd_multi_select_patch_3'));
268
+ const fromContentBeforeBreakoutMarksRemoved = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) ? tr.doc.slice($sourceFrom.pos, sourceTo).content : $sourceFrom.nodeAfter;
269
+
266
270
  // remove breakout from source content
267
- let fromContentWithoutBreakout = removeBreakoutMarks(tr, $sourceFrom, sourceTo);
271
+ let fromContentWithoutBreakout = shouldRemoveMarks ? removeBreakoutMarks(tr, $sourceFrom, sourceTo) : fromContentBeforeBreakoutMarksRemoved;
268
272
  if (!fromContentWithoutBreakout) {
269
273
  return tr;
270
274
  }
package/dist/es2019/ui/quick-insert-button.js CHANGED
@@ -38,10 +38,22 @@ const buttonStyles = xcss({
38
38
  outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
39
39
  }
40
40
  });
41
+ const disabledStyles = xcss({
42
+ pointerEvents: 'none',
43
+ ':hover': {
44
+ backgroundColor: 'color.background.disabled'
45
+ },
46
+ ':active': {
47
+ backgroundColor: 'color.background.disabled'
48
+ }
49
+ });
41
50
  const containerStaticStyles = xcss({
42
51
  position: 'absolute',
43
52
  zIndex: 'card'
44
53
  });
54
+ const disabledContainerStyles = xcss({
55
+ cursor: 'not-allowed'
56
+ });
45
57
 
46
58
  // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
47
59
 
@@ -54,6 +66,7 @@ export const TypeAheadControl = ({
54
66
  rootNodeType
55
67
  }) => {
56
68
  const macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
69
+ const isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
57
70
  const [positionStyles, setPositionStyles] = useState({
58
71
  display: 'none'
59
72
  });
@@ -180,26 +193,26 @@ export const TypeAheadControl = ({
180
193
  });
181
194
  }
182
195
  }, [api, view.state]);
183
- return (
184
- /*#__PURE__*/
185
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
186
- React.createElement(Box, {
187
- style: positionStyles,
188
- xcss: [containerStaticStyles]
189
- }, /*#__PURE__*/React.createElement(Tooltip, {
190
- position: "top",
191
- content: /*#__PURE__*/React.createElement(ToolTipContent, {
192
- description: formatMessage(messages.insert)
193
- })
194
- }, /*#__PURE__*/React.createElement(Pressable, {
195
- type: "button",
196
- "aria-label": formatMessage(messages.insert),
197
- xcss: [buttonStyles],
198
- onClick: handleQuickInsert,
199
- onMouseDown: handleMouseDown
200
- }, /*#__PURE__*/React.createElement(AddIcon, {
201
- label: "add",
202
- color: "var(--ds-icon-subtle, #626F86)"
203
- }))))
204
- );
196
+ return /*#__PURE__*/React.createElement(Box
197
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
198
+ , {
199
+ style: positionStyles,
200
+ xcss: [containerStaticStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledContainerStyles]
201
+ }, /*#__PURE__*/React.createElement(Tooltip, {
202
+ position: "top",
203
+ content: /*#__PURE__*/React.createElement(ToolTipContent, {
204
+ description: formatMessage(messages.insert)
205
+ })
206
+ }, /*#__PURE__*/React.createElement(Pressable, {
207
+ testId: "editor-quick-insert-button",
208
+ type: "button",
209
+ "aria-label": formatMessage(messages.insert),
210
+ xcss: [buttonStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledStyles],
211
+ onClick: handleQuickInsert,
212
+ onMouseDown: fg('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
213
+ isDisabled: fg('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
214
+ }, /*#__PURE__*/React.createElement(AddIcon, {
215
+ label: "add",
216
+ color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
217
+ }))));
205
218
  };
package/dist/esm/editor-commands/move-to-layout.js CHANGED
@@ -265,8 +265,12 @@ export var moveToLayout = function moveToLayout(api) {
265
265
  // if not found, get from source node,
266
266
  var breakoutMode = getBreakoutMode(toNode, breakout) || getBreakoutMode(sourceContent, breakout);
267
267
 
268
+ // we don't want to remove marks when moving/re-ordering layoutSection
269
+ var shouldRemoveMarks = !($sourceFrom.node().type === layoutSection && editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) && fg('platform_editor_elements_dnd_multi_select_patch_3'));
270
+ var fromContentBeforeBreakoutMarksRemoved = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) ? tr.doc.slice($sourceFrom.pos, sourceTo).content : $sourceFrom.nodeAfter;
271
+
268
272
  // remove breakout from source content
269
- var fromContentWithoutBreakout = removeBreakoutMarks(tr, $sourceFrom, sourceTo);
273
+ var fromContentWithoutBreakout = shouldRemoveMarks ? removeBreakoutMarks(tr, $sourceFrom, sourceTo) : fromContentBeforeBreakoutMarksRemoved;
270
274
  if (!fromContentWithoutBreakout) {
271
275
  return tr;
272
276
  }
package/dist/esm/ui/quick-insert-button.js CHANGED
@@ -39,10 +39,22 @@ var buttonStyles = xcss({
39
39
  outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
40
40
  }
41
41
  });
42
+ var disabledStyles = xcss({
43
+ pointerEvents: 'none',
44
+ ':hover': {
45
+ backgroundColor: 'color.background.disabled'
46
+ },
47
+ ':active': {
48
+ backgroundColor: 'color.background.disabled'
49
+ }
50
+ });
42
51
  var containerStaticStyles = xcss({
43
52
  position: 'absolute',
44
53
  zIndex: 'card'
45
54
  });
55
+ var disabledContainerStyles = xcss({
56
+ cursor: 'not-allowed'
57
+ });
46
58
 
47
59
  // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
48
60
 
@@ -54,6 +66,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
54
66
  rootAnchorName = _ref.rootAnchorName,
55
67
  rootNodeType = _ref.rootNodeType;
56
68
  var macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
69
+ var isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
57
70
  var _useState = useState({
58
71
  display: 'none'
59
72
  }),
@@ -183,26 +196,26 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
183
196
  });
184
197
  }
185
198
  }, [api, view.state]);
186
- return (
187
- /*#__PURE__*/
188
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
189
- React.createElement(Box, {
190
- style: positionStyles,
191
- xcss: [containerStaticStyles]
192
- }, /*#__PURE__*/React.createElement(Tooltip, {
193
- position: "top",
194
- content: /*#__PURE__*/React.createElement(ToolTipContent, {
195
- description: formatMessage(messages.insert)
196
- })
197
- }, /*#__PURE__*/React.createElement(Pressable, {
198
- type: "button",
199
- "aria-label": formatMessage(messages.insert),
200
- xcss: [buttonStyles],
201
- onClick: handleQuickInsert,
202
- onMouseDown: handleMouseDown
203
- }, /*#__PURE__*/React.createElement(AddIcon, {
204
- label: "add",
205
- color: "var(--ds-icon-subtle, #626F86)"
206
- }))))
207
- );
199
+ return /*#__PURE__*/React.createElement(Box
200
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
201
+ , {
202
+ style: positionStyles,
203
+ xcss: [containerStaticStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledContainerStyles]
204
+ }, /*#__PURE__*/React.createElement(Tooltip, {
205
+ position: "top",
206
+ content: /*#__PURE__*/React.createElement(ToolTipContent, {
207
+ description: formatMessage(messages.insert)
208
+ })
209
+ }, /*#__PURE__*/React.createElement(Pressable, {
210
+ testId: "editor-quick-insert-button",
211
+ type: "button",
212
+ "aria-label": formatMessage(messages.insert),
213
+ xcss: [buttonStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledStyles],
214
+ onClick: handleQuickInsert,
215
+ onMouseDown: fg('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
216
+ isDisabled: fg('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
217
+ }, /*#__PURE__*/React.createElement(AddIcon, {
218
+ label: "add",
219
+ color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
220
+ }))));
208
221
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "3.6.0",
3
+ "version": "3.7.1",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@atlaskit/adf-schema": "^47.6.0",
36
- "@atlaskit/editor-common": "^102.15.0",
36
+ "@atlaskit/editor-common": "^102.16.0",
37
37
  "@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
39
39
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -46,14 +46,14 @@
46
46
  "@atlaskit/editor-prosemirror": "7.0.0",
47
47
  "@atlaskit/editor-shared-styles": "^3.4.0",
48
48
  "@atlaskit/editor-tables": "^2.9.0",
49
- "@atlaskit/icon": "^25.3.0",
49
+ "@atlaskit/icon": "^25.4.0",
50
50
  "@atlaskit/platform-feature-flags": "^1.1.0",
51
51
  "@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
52
52
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
53
53
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.0.0",
54
54
  "@atlaskit/primitives": "^14.2.0",
55
55
  "@atlaskit/theme": "^18.0.0",
56
- "@atlaskit/tmp-editor-statsig": "^4.5.0",
56
+ "@atlaskit/tmp-editor-statsig": "^4.6.0",
57
57
  "@atlaskit/tokens": "^4.5.0",
58
58
  "@atlaskit/tooltip": "^20.0.0",
59
59
  "@babel/runtime": "^7.0.0",
@@ -164,6 +164,9 @@
164
164
  },
165
165
  "platform_editor_controls_patch_1": {
166
166
  "type": "boolean"
167
+ },
168
+ "platform_editor_elements_dnd_multi_select_patch_3": {
169
+ "type": "boolean"
167
170
  }
168
171
  }
169
172
  }