@atlaskit/editor-plugin-expand 9.1.15 → 9.1.17

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 (10) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/legacyExpand/nodeviews/index.js +67 -21
  3. package/dist/cjs/singlePlayerExpand/node-views/index.js +63 -18
  4. package/dist/es2019/legacyExpand/nodeviews/index.js +60 -11
  5. package/dist/es2019/singlePlayerExpand/node-views/index.js +58 -10
  6. package/dist/esm/legacyExpand/nodeviews/index.js +67 -21
  7. package/dist/esm/singlePlayerExpand/node-views/index.js +63 -18
  8. package/dist/types/types.d.ts +3 -1
  9. package/dist/types-ts4.5/types.d.ts +3 -1
  10. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-expand
2
2
 
3
+ ## 9.1.17
4
+
5
+ ### Patch Changes
6
+
7
+ - [`f2500fdeca2ee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2500fdeca2ee) -
8
+ Fix Ctrl+Shift+H keyboard shortcut for expand node title drag handles to support keyboard-only and
9
+ screen reader users
10
+ - Updated dependencies
11
+
12
+ ## 9.1.16
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 9.1.15
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/legacyExpand/nodeviews/index.js CHANGED
@@ -178,7 +178,53 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
178
178
  (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
179
179
  });
180
180
  (0, _defineProperty2.default)(this, "handleTitleKeydown", function (event) {
181
- switch ((0, _w3cKeyname.keyName)(event)) {
181
+ // Handle Ctrl+Shift+H to select the expand node for drag handle
182
+ // Note: If changing this implementation in legacyExpand, please also update the implementation in singlePlayerExpand
183
+ if ((0, _expValEquals.expValEquals)('platform_editor_dnd_accessibility_fixes_expand', 'isEnabled', true) && (event.ctrlKey || event.metaKey) && event.shiftKey && (event.key === 'H' || event.key === 'h')) {
184
+ event.preventDefault();
185
+ var pos = _this.getPos();
186
+ if (typeof pos === 'number') {
187
+ // Blur the input first to remove focus from the title
188
+ if (_this.input) {
189
+ _this.input.blur();
190
+ }
191
+ // Use requestAnimationFrame to ensure blur completes before setting selection
192
+ requestAnimationFrame(function () {
193
+ var _this$api3;
194
+ var state = _this.view.state;
195
+ _this.view.focus();
196
+ (_this$api3 = _this.api) === null || _this$api3 === void 0 || _this$api3.core.actions.execute(function (_ref) {
197
+ var tr = _ref.tr;
198
+ tr.setSelection(_state.NodeSelection.create(state.doc, pos));
199
+ // Show the drag handle on the selected expand node
200
+ var node = state.doc.nodeAt(pos);
201
+ if (node) {
202
+ // Find the anchor name from the DOM
203
+ var dom = _this.view.nodeDOM(pos);
204
+ if (dom instanceof HTMLElement) {
205
+ var anchorName = dom.getAttribute('data-node-anchor');
206
+ // Only proceed if we found a valid anchor name
207
+ if (anchorName) {
208
+ var _this$api4;
209
+ var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showDragHandleAt(pos, anchorName, node.type.name, {
210
+ isFocused: true
211
+ });
212
+ if (command) {
213
+ return command({
214
+ tr: tr
215
+ });
216
+ }
217
+ }
218
+ }
219
+ }
220
+ return null;
221
+ });
222
+ });
223
+ }
224
+ return;
225
+ }
226
+ var keyName_result = (0, _w3cKeyname.keyName)(event);
227
+ switch (keyName_result) {
182
228
  case 'Enter':
183
229
  _this.toggleExpand();
184
230
  break;
@@ -242,8 +288,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
242
288
  var state = _this.view.state;
243
289
  var expandNode = _this.node;
244
290
  if (expandNode && (0, _utils.isEmptyNode)(state.schema)(expandNode)) {
245
- var _this$api3;
246
- (0, _commands.deleteExpandAtPos)((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions)(pos, expandNode)(state, _this.view.dispatch);
291
+ var _this$api5;
292
+ (0, _commands.deleteExpandAtPos)((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.analytics) === null || _this$api5 === void 0 ? void 0 : _this$api5.actions)(pos, expandNode)(state, _this.view.dispatch);
247
293
  }
248
294
  });
249
295
  (0, _defineProperty2.default)(this, "toggleExpand", function () {
@@ -252,12 +298,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
252
298
  return;
253
299
  }
254
300
  if (_this.allowInteractiveExpand) {
255
- var _this$api4;
301
+ var _this$api6;
256
302
  var _this$view4 = _this.view,
257
303
  state = _this$view4.state,
258
304
  dispatch = _this$view4.dispatch;
259
305
  (0, _commands.toggleExpandExpanded)({
260
- editorAnalyticsAPI: (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.analytics) === null || _this$api4 === void 0 ? void 0 : _this$api4.actions,
306
+ editorAnalyticsAPI: (_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions,
261
307
  pos: pos,
262
308
  nodeType: _this.node.type,
263
309
  __livePage: _this.__livePage
@@ -409,13 +455,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
409
455
  selectionStart = _this$input6.selectionStart,
410
456
  selectionEnd = _this$input6.selectionEnd;
411
457
  if (selectionStart === selectionEnd && selectionStart === 0) {
412
- var _this$api5;
458
+ var _this$api7;
413
459
  event.preventDefault();
414
460
  var _this$view0 = _this.view,
415
461
  state = _this$view0.state,
416
462
  dispatch = _this$view0.dispatch;
417
463
  _this.view.focus();
418
- var selectionSharedState = ((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.selection) === null || _this$api5 === void 0 ? void 0 : _this$api5.sharedState.currentState()) || {};
464
+ var selectionSharedState = ((_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.selection) === null || _this$api7 === void 0 ? void 0 : _this$api7.sharedState.currentState()) || {};
419
465
  // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
420
466
  // This is a special case where we want to bypass node selection and jump straight to gap cursor
421
467
  if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -466,7 +512,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
466
512
  this.cleanUpEditorDisabledOnChange = cleanUpEditorDisabledOnChange;
467
513
  this.intl = getIntl();
468
514
  var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled)),
469
- dom = _DOMSerializer$render.dom,
515
+ _dom = _DOMSerializer$render.dom,
470
516
  contentDOM = _DOMSerializer$render.contentDOM;
471
517
  this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
472
518
  this.allowInteractiveExpand = allowInteractiveExpand;
@@ -475,7 +521,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
475
521
  this.node = _node;
476
522
  // Ignored via go/ees005
477
523
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
478
- this.dom = dom;
524
+ this.dom = _dom;
479
525
  // Ignored via go/ees005
480
526
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
481
527
  this.contentDOM = contentDOM;
@@ -497,7 +543,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
497
543
  return (0, _createClass2.default)(ExpandNodeView, [{
498
544
  key: "initHandlers",
499
545
  value: function initHandlers() {
500
- var _this$api6,
546
+ var _this$api8,
501
547
  _this2 = this;
502
548
  if (this.dom) {
503
549
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -523,7 +569,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
523
569
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
524
570
  this.icon.addEventListener('keydown', this.handleIconKeyDown);
525
571
  }
526
- if ((_this$api6 = this.api) !== null && _this$api6 !== void 0 && _this$api6.editorDisabled) {
572
+ if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
527
573
  this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
528
574
  var editorDisabled = sharedState.nextSharedState.editorDisabled;
529
575
  if (_this2.input) {
@@ -560,8 +606,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
560
606
  if (!this.icon) {
561
607
  return;
562
608
  }
563
- var _ref = node && node.attrs || this.node.attrs,
564
- __expanded = _ref.__expanded;
609
+ var _ref2 = node && node.attrs || this.node.attrs,
610
+ __expanded = _ref2.__expanded;
565
611
  this.nodeViewPortalProviderAPI.render(function () {
566
612
  return /*#__PURE__*/_react.default.createElement(_ExpandIconButton.ExpandIconButton, {
567
613
  intl: intl,
@@ -682,14 +728,14 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
682
728
  }
683
729
  }]);
684
730
  }();
685
- function _default(_ref2) {
686
- var getIntl = _ref2.getIntl,
687
- isMobile = _ref2.isMobile,
688
- api = _ref2.api,
689
- nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI,
690
- _ref2$allowInteractiv = _ref2.allowInteractiveExpand,
691
- allowInteractiveExpand = _ref2$allowInteractiv === void 0 ? true : _ref2$allowInteractiv,
692
- __livePage = _ref2.__livePage;
731
+ function _default(_ref3) {
732
+ var getIntl = _ref3.getIntl,
733
+ isMobile = _ref3.isMobile,
734
+ api = _ref3.api,
735
+ nodeViewPortalProviderAPI = _ref3.nodeViewPortalProviderAPI,
736
+ _ref3$allowInteractiv = _ref3.allowInteractiveExpand,
737
+ allowInteractiveExpand = _ref3$allowInteractiv === void 0 ? true : _ref3$allowInteractiv,
738
+ __livePage = _ref3.__livePage;
693
739
  return function (node, view, getPos) {
694
740
  var _api$selection;
695
741
  return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage);
package/dist/cjs/singlePlayerExpand/node-views/index.js CHANGED
@@ -32,7 +32,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
32
32
  function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI) {
33
33
  var _this = this,
34
34
  _api$editorDisabled,
35
- _this$api6;
35
+ _this$api8;
36
36
  var allowInteractiveExpand = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
37
37
  var __livePage = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
38
38
  var cleanUpEditorDisabledOnChange = arguments.length > 10 ? arguments[10] : undefined;
@@ -140,6 +140,51 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
140
140
  (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
141
141
  });
142
142
  (0, _defineProperty2.default)(this, "handleTitleKeydown", function (event) {
143
+ // Handle Ctrl+Shift+H to select the expand node for drag handle
144
+ // Note: If changing this implementation in singlePlayer expand, please also update the implementation in legacyExpand
145
+ if ((0, _expValEquals.expValEquals)('platform_editor_dnd_accessibility_fixes_expand', 'isEnabled', true) && (event.ctrlKey || event.metaKey) && event.shiftKey && (event.key === 'H' || event.key === 'h')) {
146
+ event.preventDefault();
147
+ var pos = _this.getPos();
148
+ if (typeof pos === 'number') {
149
+ // Blur the input first to remove focus from the title
150
+ if (_this.input) {
151
+ _this.input.blur();
152
+ }
153
+ // Use requestAnimationFrame to ensure blur completes before setting selection
154
+ requestAnimationFrame(function () {
155
+ var _this$api3;
156
+ var state = _this.view.state;
157
+ _this.view.focus();
158
+ (_this$api3 = _this.api) === null || _this$api3 === void 0 || _this$api3.core.actions.execute(function (_ref) {
159
+ var tr = _ref.tr;
160
+ tr.setSelection(_state.NodeSelection.create(state.doc, pos));
161
+ // Show the drag handle on the selected expand node
162
+ var node = state.doc.nodeAt(pos);
163
+ if (node) {
164
+ // Find the anchor name from the DOM
165
+ var dom = _this.view.nodeDOM(pos);
166
+ if (dom instanceof HTMLElement) {
167
+ var anchorName = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? dom.getAttribute('data-node-anchor') : dom.getAttribute('data-drag-handler-anchor-name');
168
+ // Only proceed if we found a valid anchor name
169
+ if (anchorName) {
170
+ var _this$api4;
171
+ var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showDragHandleAt(pos, anchorName, node.type.name, {
172
+ isFocused: true
173
+ });
174
+ if (command) {
175
+ return command({
176
+ tr: tr
177
+ });
178
+ }
179
+ }
180
+ }
181
+ }
182
+ return null;
183
+ });
184
+ });
185
+ }
186
+ return;
187
+ }
143
188
  switch ((0, _w3cKeyname.keyName)(event)) {
144
189
  case 'Enter':
145
190
  _this.toggleExpand();
@@ -200,8 +245,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
200
245
  return;
201
246
  }
202
247
  if (expandNode && (0, _utils.isEmptyNode)(state.schema)(expandNode)) {
203
- var _this$api3;
204
- (0, _commands.deleteExpand)((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions)(state, _this.view.dispatch);
248
+ var _this$api5;
249
+ (0, _commands.deleteExpand)((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.analytics) === null || _this$api5 === void 0 ? void 0 : _this$api5.actions)(state, _this.view.dispatch);
205
250
  }
206
251
  });
207
252
  (0, _defineProperty2.default)(this, "toggleExpand", function () {
@@ -210,12 +255,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
210
255
  return;
211
256
  }
212
257
  if (_this.allowInteractiveExpand) {
213
- var _this$api4;
258
+ var _this$api6;
214
259
  var _this$view3 = _this.view,
215
260
  state = _this$view3.state,
216
261
  dispatch = _this$view3.dispatch;
217
262
  (0, _commands.toggleExpandExpanded)({
218
- editorAnalyticsAPI: (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.analytics) === null || _this$api4 === void 0 ? void 0 : _this$api4.actions,
263
+ editorAnalyticsAPI: (_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions,
219
264
  pos: pos,
220
265
  node: _this.node
221
266
  })(state, dispatch);
@@ -369,13 +414,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
369
414
  selectionStart = _this$input6.selectionStart,
370
415
  selectionEnd = _this$input6.selectionEnd;
371
416
  if (selectionStart === selectionEnd && selectionStart === 0) {
372
- var _this$api5;
417
+ var _this$api7;
373
418
  event.preventDefault();
374
419
  var _this$view9 = _this.view,
375
420
  state = _this$view9.state,
376
421
  dispatch = _this$view9.dispatch;
377
422
  _this.view.focus();
378
- var selectionSharedState = ((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.selection) === null || _this$api5 === void 0 ? void 0 : _this$api5.sharedState.currentState()) || {};
423
+ var selectionSharedState = ((_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.selection) === null || _this$api7 === void 0 ? void 0 : _this$api7.sharedState.currentState()) || {};
379
424
  // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
380
425
  // This is a special case where we want to bypass node selection and jump straight to gap cursor
381
426
  if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -451,11 +496,11 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
451
496
  this.isExpanded.localId = _node.attrs.localId;
452
497
  }
453
498
  var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _NodeView.toDOM)(_node, this.__livePage, this.intl, api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled)),
454
- dom = _DOMSerializer$render.dom,
499
+ _dom = _DOMSerializer$render.dom,
455
500
  contentDOM = _DOMSerializer$render.contentDOM;
456
501
  // Ignored via go/ees005
457
502
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
458
- this.dom = dom;
503
+ this.dom = _dom;
459
504
  // Ignored via go/ees005
460
505
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
461
506
  this.contentDOM = contentDOM;
@@ -490,7 +535,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
490
535
  // Prevent ProseMirror from getting a focus event (causes weird selection issues).
491
536
  this.titleContainer.addEventListener('focus', this.handleFocus);
492
537
  this.icon.addEventListener('keydown', this.handleIconKeyDown);
493
- if ((_this$api6 = this.api) !== null && _this$api6 !== void 0 && _this$api6.editorDisabled) {
538
+ if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
494
539
  this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
495
540
  var editorDisabled = sharedState.nextSharedState.editorDisabled;
496
541
  if (_this.input) {
@@ -651,14 +696,14 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
651
696
  }
652
697
  }]);
653
698
  }();
654
- function _default(_ref) {
655
- var getIntl = _ref.getIntl,
656
- isMobile = _ref.isMobile,
657
- api = _ref.api,
658
- nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
659
- _ref$allowInteractive = _ref.allowInteractiveExpand,
660
- allowInteractiveExpand = _ref$allowInteractive === void 0 ? true : _ref$allowInteractive,
661
- __livePage = _ref.__livePage;
699
+ function _default(_ref2) {
700
+ var getIntl = _ref2.getIntl,
701
+ isMobile = _ref2.isMobile,
702
+ api = _ref2.api,
703
+ nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI,
704
+ _ref2$allowInteractiv = _ref2.allowInteractiveExpand,
705
+ allowInteractiveExpand = _ref2$allowInteractiv === void 0 ? true : _ref2$allowInteractiv,
706
+ __livePage = _ref2.__livePage;
662
707
  return function (node, view, getPos) {
663
708
  var _api$selection;
664
709
  return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage);
package/dist/es2019/legacyExpand/nodeviews/index.js CHANGED
@@ -164,7 +164,56 @@ export class ExpandNodeView {
164
164
  (_this$decorationClean = this.decorationCleanup) === null || _this$decorationClean === void 0 ? void 0 : _this$decorationClean.call(this);
165
165
  });
166
166
  _defineProperty(this, "handleTitleKeydown", event => {
167
- switch (keyName(event)) {
167
+ // Handle Ctrl+Shift+H to select the expand node for drag handle
168
+ // Note: If changing this implementation in legacyExpand, please also update the implementation in singlePlayerExpand
169
+ if (expValEquals('platform_editor_dnd_accessibility_fixes_expand', 'isEnabled', true) && (event.ctrlKey || event.metaKey) && event.shiftKey && (event.key === 'H' || event.key === 'h')) {
170
+ event.preventDefault();
171
+ const pos = this.getPos();
172
+ if (typeof pos === 'number') {
173
+ // Blur the input first to remove focus from the title
174
+ if (this.input) {
175
+ this.input.blur();
176
+ }
177
+ // Use requestAnimationFrame to ensure blur completes before setting selection
178
+ requestAnimationFrame(() => {
179
+ var _this$api3;
180
+ const {
181
+ state
182
+ } = this.view;
183
+ this.view.focus();
184
+ (_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : _this$api3.core.actions.execute(({
185
+ tr
186
+ }) => {
187
+ tr.setSelection(NodeSelection.create(state.doc, pos));
188
+ // Show the drag handle on the selected expand node
189
+ const node = state.doc.nodeAt(pos);
190
+ if (node) {
191
+ // Find the anchor name from the DOM
192
+ const dom = this.view.nodeDOM(pos);
193
+ if (dom instanceof HTMLElement) {
194
+ const anchorName = dom.getAttribute('data-node-anchor');
195
+ // Only proceed if we found a valid anchor name
196
+ if (anchorName) {
197
+ var _this$api4, _this$api4$blockContr;
198
+ const command = (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$blockContr = _this$api4.blockControls) === null || _this$api4$blockContr === void 0 ? void 0 : _this$api4$blockContr.commands.showDragHandleAt(pos, anchorName, node.type.name, {
199
+ isFocused: true
200
+ });
201
+ if (command) {
202
+ return command({
203
+ tr
204
+ });
205
+ }
206
+ }
207
+ }
208
+ }
209
+ return null;
210
+ });
211
+ });
212
+ }
213
+ return;
214
+ }
215
+ const keyName_result = keyName(event);
216
+ switch (keyName_result) {
168
217
  case 'Enter':
169
218
  this.toggleExpand();
170
219
  break;
@@ -231,8 +280,8 @@ export class ExpandNodeView {
231
280
  } = this.view;
232
281
  const expandNode = this.node;
233
282
  if (expandNode && isEmptyNode(state.schema)(expandNode)) {
234
- var _this$api3, _this$api3$analytics;
235
- deleteExpandAtPos((_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : _this$api3$analytics.actions)(pos, expandNode)(state, this.view.dispatch);
283
+ var _this$api5, _this$api5$analytics;
284
+ deleteExpandAtPos((_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$analytics = _this$api5.analytics) === null || _this$api5$analytics === void 0 ? void 0 : _this$api5$analytics.actions)(pos, expandNode)(state, this.view.dispatch);
236
285
  }
237
286
  });
238
287
  _defineProperty(this, "toggleExpand", () => {
@@ -241,13 +290,13 @@ export class ExpandNodeView {
241
290
  return;
242
291
  }
243
292
  if (this.allowInteractiveExpand) {
244
- var _this$api4, _this$api4$analytics;
293
+ var _this$api6, _this$api6$analytics;
245
294
  const {
246
295
  state,
247
296
  dispatch
248
297
  } = this.view;
249
298
  toggleExpandExpanded({
250
- editorAnalyticsAPI: (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$analytics = _this$api4.analytics) === null || _this$api4$analytics === void 0 ? void 0 : _this$api4$analytics.actions,
299
+ editorAnalyticsAPI: (_this$api6 = this.api) === null || _this$api6 === void 0 ? void 0 : (_this$api6$analytics = _this$api6.analytics) === null || _this$api6$analytics === void 0 ? void 0 : _this$api6$analytics.actions,
251
300
  pos,
252
301
  nodeType: this.node.type,
253
302
  __livePage: this.__livePage
@@ -409,14 +458,14 @@ export class ExpandNodeView {
409
458
  selectionEnd
410
459
  } = this.input;
411
460
  if (selectionStart === selectionEnd && selectionStart === 0) {
412
- var _this$api5, _this$api5$selection;
461
+ var _this$api7, _this$api7$selection;
413
462
  event.preventDefault();
414
463
  const {
415
464
  state,
416
465
  dispatch
417
466
  } = this.view;
418
467
  this.view.focus();
419
- const selectionSharedState = ((_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$selection = _this$api5.selection) === null || _this$api5$selection === void 0 ? void 0 : _this$api5$selection.sharedState.currentState()) || {};
468
+ const selectionSharedState = ((_this$api7 = this.api) === null || _this$api7 === void 0 ? void 0 : (_this$api7$selection = _this$api7.selection) === null || _this$api7$selection === void 0 ? void 0 : _this$api7$selection.sharedState.currentState()) || {};
420
469
  // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
421
470
  // This is a special case where we want to bypass node selection and jump straight to gap cursor
422
471
  if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -469,7 +518,7 @@ export class ExpandNodeView {
469
518
  this.cleanUpEditorDisabledOnChange = cleanUpEditorDisabledOnChange;
470
519
  this.intl = getIntl();
471
520
  const {
472
- dom,
521
+ dom: _dom,
473
522
  contentDOM
474
523
  } = DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, api === null || api === void 0 ? void 0 : (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled$s === void 0 ? void 0 : _api$editorDisabled$s.editorDisabled));
475
524
  this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
@@ -479,7 +528,7 @@ export class ExpandNodeView {
479
528
  this.node = _node;
480
529
  // Ignored via go/ees005
481
530
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
482
- this.dom = dom;
531
+ this.dom = _dom;
483
532
  // Ignored via go/ees005
484
533
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
485
534
  this.contentDOM = contentDOM;
@@ -499,7 +548,7 @@ export class ExpandNodeView {
499
548
  this.initHandlers();
500
549
  }
501
550
  initHandlers() {
502
- var _this$api6;
551
+ var _this$api8;
503
552
  if (this.dom) {
504
553
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
505
554
  this.dom.addEventListener('click', this.handleClick);
@@ -524,7 +573,7 @@ export class ExpandNodeView {
524
573
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
525
574
  this.icon.addEventListener('keydown', this.handleIconKeyDown);
526
575
  }
527
- if ((_this$api6 = this.api) !== null && _this$api6 !== void 0 && _this$api6.editorDisabled) {
576
+ if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
528
577
  this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(sharedState => {
529
578
  const editorDisabled = sharedState.nextSharedState.editorDisabled;
530
579
  if (this.input) {
package/dist/es2019/singlePlayerExpand/node-views/index.js CHANGED
@@ -22,7 +22,7 @@ export class ExpandNodeView {
22
22
  constructor(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand = true, __livePage = false, cleanUpEditorDisabledOnChange, isExpanded = {
23
23
  expanded: false
24
24
  }) {
25
- var _api$editorDisabled, _api$editorDisabled$s, _this$api6;
25
+ var _api$editorDisabled, _api$editorDisabled$s, _this$api8;
26
26
  _defineProperty(this, "allowInteractiveExpand", true);
27
27
  _defineProperty(this, "isMobile", false);
28
28
  _defineProperty(this, "focusTitle", () => {
@@ -125,6 +125,54 @@ export class ExpandNodeView {
125
125
  (_this$decorationClean = this.decorationCleanup) === null || _this$decorationClean === void 0 ? void 0 : _this$decorationClean.call(this);
126
126
  });
127
127
  _defineProperty(this, "handleTitleKeydown", event => {
128
+ // Handle Ctrl+Shift+H to select the expand node for drag handle
129
+ // Note: If changing this implementation in singlePlayer expand, please also update the implementation in legacyExpand
130
+ if (expValEquals('platform_editor_dnd_accessibility_fixes_expand', 'isEnabled', true) && (event.ctrlKey || event.metaKey) && event.shiftKey && (event.key === 'H' || event.key === 'h')) {
131
+ event.preventDefault();
132
+ const pos = this.getPos();
133
+ if (typeof pos === 'number') {
134
+ // Blur the input first to remove focus from the title
135
+ if (this.input) {
136
+ this.input.blur();
137
+ }
138
+ // Use requestAnimationFrame to ensure blur completes before setting selection
139
+ requestAnimationFrame(() => {
140
+ var _this$api3;
141
+ const {
142
+ state
143
+ } = this.view;
144
+ this.view.focus();
145
+ (_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : _this$api3.core.actions.execute(({
146
+ tr
147
+ }) => {
148
+ tr.setSelection(NodeSelection.create(state.doc, pos));
149
+ // Show the drag handle on the selected expand node
150
+ const node = state.doc.nodeAt(pos);
151
+ if (node) {
152
+ // Find the anchor name from the DOM
153
+ const dom = this.view.nodeDOM(pos);
154
+ if (dom instanceof HTMLElement) {
155
+ const anchorName = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? dom.getAttribute('data-node-anchor') : dom.getAttribute('data-drag-handler-anchor-name');
156
+ // Only proceed if we found a valid anchor name
157
+ if (anchorName) {
158
+ var _this$api4, _this$api4$blockContr;
159
+ const command = (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$blockContr = _this$api4.blockControls) === null || _this$api4$blockContr === void 0 ? void 0 : _this$api4$blockContr.commands.showDragHandleAt(pos, anchorName, node.type.name, {
160
+ isFocused: true
161
+ });
162
+ if (command) {
163
+ return command({
164
+ tr
165
+ });
166
+ }
167
+ }
168
+ }
169
+ }
170
+ return null;
171
+ });
172
+ });
173
+ }
174
+ return;
175
+ }
128
176
  switch (keyName(event)) {
129
177
  case 'Enter':
130
178
  this.toggleExpand();
@@ -188,8 +236,8 @@ export class ExpandNodeView {
188
236
  return;
189
237
  }
190
238
  if (expandNode && isEmptyNode(state.schema)(expandNode)) {
191
- var _this$api3, _this$api3$analytics;
192
- deleteExpand((_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : _this$api3$analytics.actions)(state, this.view.dispatch);
239
+ var _this$api5, _this$api5$analytics;
240
+ deleteExpand((_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$analytics = _this$api5.analytics) === null || _this$api5$analytics === void 0 ? void 0 : _this$api5$analytics.actions)(state, this.view.dispatch);
193
241
  }
194
242
  });
195
243
  _defineProperty(this, "toggleExpand", () => {
@@ -198,13 +246,13 @@ export class ExpandNodeView {
198
246
  return;
199
247
  }
200
248
  if (this.allowInteractiveExpand) {
201
- var _this$api4, _this$api4$analytics;
249
+ var _this$api6, _this$api6$analytics;
202
250
  const {
203
251
  state,
204
252
  dispatch
205
253
  } = this.view;
206
254
  toggleExpandExpanded({
207
- editorAnalyticsAPI: (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$analytics = _this$api4.analytics) === null || _this$api4$analytics === void 0 ? void 0 : _this$api4$analytics.actions,
255
+ editorAnalyticsAPI: (_this$api6 = this.api) === null || _this$api6 === void 0 ? void 0 : (_this$api6$analytics = _this$api6.analytics) === null || _this$api6$analytics === void 0 ? void 0 : _this$api6$analytics.actions,
208
256
  pos,
209
257
  node: this.node
210
258
  })(state, dispatch);
@@ -368,14 +416,14 @@ export class ExpandNodeView {
368
416
  selectionEnd
369
417
  } = this.input;
370
418
  if (selectionStart === selectionEnd && selectionStart === 0) {
371
- var _this$api5, _this$api5$selection;
419
+ var _this$api7, _this$api7$selection;
372
420
  event.preventDefault();
373
421
  const {
374
422
  state,
375
423
  dispatch
376
424
  } = this.view;
377
425
  this.view.focus();
378
- const selectionSharedState = ((_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$selection = _this$api5.selection) === null || _this$api5$selection === void 0 ? void 0 : _this$api5$selection.sharedState.currentState()) || {};
426
+ const selectionSharedState = ((_this$api7 = this.api) === null || _this$api7 === void 0 ? void 0 : (_this$api7$selection = _this$api7.selection) === null || _this$api7$selection === void 0 ? void 0 : _this$api7$selection.sharedState.currentState()) || {};
379
427
  // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
380
428
  // This is a special case where we want to bypass node selection and jump straight to gap cursor
381
429
  if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -451,12 +499,12 @@ export class ExpandNodeView {
451
499
  this.isExpanded.localId = _node.attrs.localId;
452
500
  }
453
501
  const {
454
- dom,
502
+ dom: _dom,
455
503
  contentDOM
456
504
  } = DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, api === null || api === void 0 ? void 0 : (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled$s === void 0 ? void 0 : _api$editorDisabled$s.editorDisabled));
457
505
  // Ignored via go/ees005
458
506
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
459
- this.dom = dom;
507
+ this.dom = _dom;
460
508
  // Ignored via go/ees005
461
509
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
462
510
  this.contentDOM = contentDOM;
@@ -491,7 +539,7 @@ export class ExpandNodeView {
491
539
  // Prevent ProseMirror from getting a focus event (causes weird selection issues).
492
540
  this.titleContainer.addEventListener('focus', this.handleFocus);
493
541
  this.icon.addEventListener('keydown', this.handleIconKeyDown);
494
- if ((_this$api6 = this.api) !== null && _this$api6 !== void 0 && _this$api6.editorDisabled) {
542
+ if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
495
543
  this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(sharedState => {
496
544
  const editorDisabled = sharedState.nextSharedState.editorDisabled;
497
545
  if (this.input) {
package/dist/esm/legacyExpand/nodeviews/index.js CHANGED
@@ -171,7 +171,53 @@ export var ExpandNodeView = /*#__PURE__*/function () {
171
171
  (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
172
172
  });
173
173
  _defineProperty(this, "handleTitleKeydown", function (event) {
174
- switch (keyName(event)) {
174
+ // Handle Ctrl+Shift+H to select the expand node for drag handle
175
+ // Note: If changing this implementation in legacyExpand, please also update the implementation in singlePlayerExpand
176
+ if (expValEquals('platform_editor_dnd_accessibility_fixes_expand', 'isEnabled', true) && (event.ctrlKey || event.metaKey) && event.shiftKey && (event.key === 'H' || event.key === 'h')) {
177
+ event.preventDefault();
178
+ var pos = _this.getPos();
179
+ if (typeof pos === 'number') {
180
+ // Blur the input first to remove focus from the title
181
+ if (_this.input) {
182
+ _this.input.blur();
183
+ }
184
+ // Use requestAnimationFrame to ensure blur completes before setting selection
185
+ requestAnimationFrame(function () {
186
+ var _this$api3;
187
+ var state = _this.view.state;
188
+ _this.view.focus();
189
+ (_this$api3 = _this.api) === null || _this$api3 === void 0 || _this$api3.core.actions.execute(function (_ref) {
190
+ var tr = _ref.tr;
191
+ tr.setSelection(NodeSelection.create(state.doc, pos));
192
+ // Show the drag handle on the selected expand node
193
+ var node = state.doc.nodeAt(pos);
194
+ if (node) {
195
+ // Find the anchor name from the DOM
196
+ var dom = _this.view.nodeDOM(pos);
197
+ if (dom instanceof HTMLElement) {
198
+ var anchorName = dom.getAttribute('data-node-anchor');
199
+ // Only proceed if we found a valid anchor name
200
+ if (anchorName) {
201
+ var _this$api4;
202
+ var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showDragHandleAt(pos, anchorName, node.type.name, {
203
+ isFocused: true
204
+ });
205
+ if (command) {
206
+ return command({
207
+ tr: tr
208
+ });
209
+ }
210
+ }
211
+ }
212
+ }
213
+ return null;
214
+ });
215
+ });
216
+ }
217
+ return;
218
+ }
219
+ var keyName_result = keyName(event);
220
+ switch (keyName_result) {
175
221
  case 'Enter':
176
222
  _this.toggleExpand();
177
223
  break;
@@ -235,8 +281,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
235
281
  var state = _this.view.state;
236
282
  var expandNode = _this.node;
237
283
  if (expandNode && isEmptyNode(state.schema)(expandNode)) {
238
- var _this$api3;
239
- deleteExpandAtPos((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions)(pos, expandNode)(state, _this.view.dispatch);
284
+ var _this$api5;
285
+ deleteExpandAtPos((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.analytics) === null || _this$api5 === void 0 ? void 0 : _this$api5.actions)(pos, expandNode)(state, _this.view.dispatch);
240
286
  }
241
287
  });
242
288
  _defineProperty(this, "toggleExpand", function () {
@@ -245,12 +291,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
245
291
  return;
246
292
  }
247
293
  if (_this.allowInteractiveExpand) {
248
- var _this$api4;
294
+ var _this$api6;
249
295
  var _this$view4 = _this.view,
250
296
  state = _this$view4.state,
251
297
  dispatch = _this$view4.dispatch;
252
298
  toggleExpandExpanded({
253
- editorAnalyticsAPI: (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.analytics) === null || _this$api4 === void 0 ? void 0 : _this$api4.actions,
299
+ editorAnalyticsAPI: (_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions,
254
300
  pos: pos,
255
301
  nodeType: _this.node.type,
256
302
  __livePage: _this.__livePage
@@ -402,13 +448,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
402
448
  selectionStart = _this$input6.selectionStart,
403
449
  selectionEnd = _this$input6.selectionEnd;
404
450
  if (selectionStart === selectionEnd && selectionStart === 0) {
405
- var _this$api5;
451
+ var _this$api7;
406
452
  event.preventDefault();
407
453
  var _this$view0 = _this.view,
408
454
  state = _this$view0.state,
409
455
  dispatch = _this$view0.dispatch;
410
456
  _this.view.focus();
411
- var selectionSharedState = ((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.selection) === null || _this$api5 === void 0 ? void 0 : _this$api5.sharedState.currentState()) || {};
457
+ var selectionSharedState = ((_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.selection) === null || _this$api7 === void 0 ? void 0 : _this$api7.sharedState.currentState()) || {};
412
458
  // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
413
459
  // This is a special case where we want to bypass node selection and jump straight to gap cursor
414
460
  if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -459,7 +505,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
459
505
  this.cleanUpEditorDisabledOnChange = cleanUpEditorDisabledOnChange;
460
506
  this.intl = getIntl();
461
507
  var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled)),
462
- dom = _DOMSerializer$render.dom,
508
+ _dom = _DOMSerializer$render.dom,
463
509
  contentDOM = _DOMSerializer$render.contentDOM;
464
510
  this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
465
511
  this.allowInteractiveExpand = allowInteractiveExpand;
@@ -468,7 +514,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
468
514
  this.node = _node;
469
515
  // Ignored via go/ees005
470
516
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
471
- this.dom = dom;
517
+ this.dom = _dom;
472
518
  // Ignored via go/ees005
473
519
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
474
520
  this.contentDOM = contentDOM;
@@ -490,7 +536,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
490
536
  return _createClass(ExpandNodeView, [{
491
537
  key: "initHandlers",
492
538
  value: function initHandlers() {
493
- var _this$api6,
539
+ var _this$api8,
494
540
  _this2 = this;
495
541
  if (this.dom) {
496
542
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -516,7 +562,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
516
562
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
517
563
  this.icon.addEventListener('keydown', this.handleIconKeyDown);
518
564
  }
519
- if ((_this$api6 = this.api) !== null && _this$api6 !== void 0 && _this$api6.editorDisabled) {
565
+ if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
520
566
  this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
521
567
  var editorDisabled = sharedState.nextSharedState.editorDisabled;
522
568
  if (_this2.input) {
@@ -553,8 +599,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
553
599
  if (!this.icon) {
554
600
  return;
555
601
  }
556
- var _ref = node && node.attrs || this.node.attrs,
557
- __expanded = _ref.__expanded;
602
+ var _ref2 = node && node.attrs || this.node.attrs,
603
+ __expanded = _ref2.__expanded;
558
604
  this.nodeViewPortalProviderAPI.render(function () {
559
605
  return /*#__PURE__*/React.createElement(ExpandIconButton, {
560
606
  intl: intl,
@@ -675,14 +721,14 @@ export var ExpandNodeView = /*#__PURE__*/function () {
675
721
  }
676
722
  }]);
677
723
  }();
678
- export default function (_ref2) {
679
- var getIntl = _ref2.getIntl,
680
- isMobile = _ref2.isMobile,
681
- api = _ref2.api,
682
- nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI,
683
- _ref2$allowInteractiv = _ref2.allowInteractiveExpand,
684
- allowInteractiveExpand = _ref2$allowInteractiv === void 0 ? true : _ref2$allowInteractiv,
685
- __livePage = _ref2.__livePage;
724
+ export default function (_ref3) {
725
+ var getIntl = _ref3.getIntl,
726
+ isMobile = _ref3.isMobile,
727
+ api = _ref3.api,
728
+ nodeViewPortalProviderAPI = _ref3.nodeViewPortalProviderAPI,
729
+ _ref3$allowInteractiv = _ref3.allowInteractiveExpand,
730
+ allowInteractiveExpand = _ref3$allowInteractiv === void 0 ? true : _ref3$allowInteractiv,
731
+ __livePage = _ref3.__livePage;
686
732
  return function (node, view, getPos) {
687
733
  var _api$selection;
688
734
  return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage);
package/dist/esm/singlePlayerExpand/node-views/index.js CHANGED
@@ -24,7 +24,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
24
24
  function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI) {
25
25
  var _this = this,
26
26
  _api$editorDisabled,
27
- _this$api6;
27
+ _this$api8;
28
28
  var allowInteractiveExpand = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
29
29
  var __livePage = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
30
30
  var cleanUpEditorDisabledOnChange = arguments.length > 10 ? arguments[10] : undefined;
@@ -132,6 +132,51 @@ export var ExpandNodeView = /*#__PURE__*/function () {
132
132
  (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
133
133
  });
134
134
  _defineProperty(this, "handleTitleKeydown", function (event) {
135
+ // Handle Ctrl+Shift+H to select the expand node for drag handle
136
+ // Note: If changing this implementation in singlePlayer expand, please also update the implementation in legacyExpand
137
+ if (expValEquals('platform_editor_dnd_accessibility_fixes_expand', 'isEnabled', true) && (event.ctrlKey || event.metaKey) && event.shiftKey && (event.key === 'H' || event.key === 'h')) {
138
+ event.preventDefault();
139
+ var pos = _this.getPos();
140
+ if (typeof pos === 'number') {
141
+ // Blur the input first to remove focus from the title
142
+ if (_this.input) {
143
+ _this.input.blur();
144
+ }
145
+ // Use requestAnimationFrame to ensure blur completes before setting selection
146
+ requestAnimationFrame(function () {
147
+ var _this$api3;
148
+ var state = _this.view.state;
149
+ _this.view.focus();
150
+ (_this$api3 = _this.api) === null || _this$api3 === void 0 || _this$api3.core.actions.execute(function (_ref) {
151
+ var tr = _ref.tr;
152
+ tr.setSelection(NodeSelection.create(state.doc, pos));
153
+ // Show the drag handle on the selected expand node
154
+ var node = state.doc.nodeAt(pos);
155
+ if (node) {
156
+ // Find the anchor name from the DOM
157
+ var dom = _this.view.nodeDOM(pos);
158
+ if (dom instanceof HTMLElement) {
159
+ var anchorName = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? dom.getAttribute('data-node-anchor') : dom.getAttribute('data-drag-handler-anchor-name');
160
+ // Only proceed if we found a valid anchor name
161
+ if (anchorName) {
162
+ var _this$api4;
163
+ var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showDragHandleAt(pos, anchorName, node.type.name, {
164
+ isFocused: true
165
+ });
166
+ if (command) {
167
+ return command({
168
+ tr: tr
169
+ });
170
+ }
171
+ }
172
+ }
173
+ }
174
+ return null;
175
+ });
176
+ });
177
+ }
178
+ return;
179
+ }
135
180
  switch (keyName(event)) {
136
181
  case 'Enter':
137
182
  _this.toggleExpand();
@@ -192,8 +237,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
192
237
  return;
193
238
  }
194
239
  if (expandNode && isEmptyNode(state.schema)(expandNode)) {
195
- var _this$api3;
196
- deleteExpand((_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.analytics) === null || _this$api3 === void 0 ? void 0 : _this$api3.actions)(state, _this.view.dispatch);
240
+ var _this$api5;
241
+ deleteExpand((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.analytics) === null || _this$api5 === void 0 ? void 0 : _this$api5.actions)(state, _this.view.dispatch);
197
242
  }
198
243
  });
199
244
  _defineProperty(this, "toggleExpand", function () {
@@ -202,12 +247,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
202
247
  return;
203
248
  }
204
249
  if (_this.allowInteractiveExpand) {
205
- var _this$api4;
250
+ var _this$api6;
206
251
  var _this$view3 = _this.view,
207
252
  state = _this$view3.state,
208
253
  dispatch = _this$view3.dispatch;
209
254
  toggleExpandExpanded({
210
- editorAnalyticsAPI: (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.analytics) === null || _this$api4 === void 0 ? void 0 : _this$api4.actions,
255
+ editorAnalyticsAPI: (_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions,
211
256
  pos: pos,
212
257
  node: _this.node
213
258
  })(state, dispatch);
@@ -361,13 +406,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
361
406
  selectionStart = _this$input6.selectionStart,
362
407
  selectionEnd = _this$input6.selectionEnd;
363
408
  if (selectionStart === selectionEnd && selectionStart === 0) {
364
- var _this$api5;
409
+ var _this$api7;
365
410
  event.preventDefault();
366
411
  var _this$view9 = _this.view,
367
412
  state = _this$view9.state,
368
413
  dispatch = _this$view9.dispatch;
369
414
  _this.view.focus();
370
- var selectionSharedState = ((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.selection) === null || _this$api5 === void 0 ? void 0 : _this$api5.sharedState.currentState()) || {};
415
+ var selectionSharedState = ((_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.selection) === null || _this$api7 === void 0 ? void 0 : _this$api7.sharedState.currentState()) || {};
371
416
  // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
372
417
  // This is a special case where we want to bypass node selection and jump straight to gap cursor
373
418
  if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -443,11 +488,11 @@ export var ExpandNodeView = /*#__PURE__*/function () {
443
488
  this.isExpanded.localId = _node.attrs.localId;
444
489
  }
445
490
  var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled)),
446
- dom = _DOMSerializer$render.dom,
491
+ _dom = _DOMSerializer$render.dom,
447
492
  contentDOM = _DOMSerializer$render.contentDOM;
448
493
  // Ignored via go/ees005
449
494
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
450
- this.dom = dom;
495
+ this.dom = _dom;
451
496
  // Ignored via go/ees005
452
497
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
453
498
  this.contentDOM = contentDOM;
@@ -482,7 +527,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
482
527
  // Prevent ProseMirror from getting a focus event (causes weird selection issues).
483
528
  this.titleContainer.addEventListener('focus', this.handleFocus);
484
529
  this.icon.addEventListener('keydown', this.handleIconKeyDown);
485
- if ((_this$api6 = this.api) !== null && _this$api6 !== void 0 && _this$api6.editorDisabled) {
530
+ if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
486
531
  this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
487
532
  var editorDisabled = sharedState.nextSharedState.editorDisabled;
488
533
  if (_this.input) {
@@ -643,14 +688,14 @@ export var ExpandNodeView = /*#__PURE__*/function () {
643
688
  }
644
689
  }]);
645
690
  }();
646
- export default function (_ref) {
647
- var getIntl = _ref.getIntl,
648
- isMobile = _ref.isMobile,
649
- api = _ref.api,
650
- nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
651
- _ref$allowInteractive = _ref.allowInteractiveExpand,
652
- allowInteractiveExpand = _ref$allowInteractive === void 0 ? true : _ref$allowInteractive,
653
- __livePage = _ref.__livePage;
691
+ export default function (_ref2) {
692
+ var getIntl = _ref2.getIntl,
693
+ isMobile = _ref2.isMobile,
694
+ api = _ref2.api,
695
+ nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI,
696
+ _ref2$allowInteractiv = _ref2.allowInteractiveExpand,
697
+ allowInteractiveExpand = _ref2$allowInteractiv === void 0 ? true : _ref2$allowInteractiv,
698
+ __livePage = _ref2.__livePage;
654
699
  return function (node, view, getPos) {
655
700
  var _api$selection;
656
701
  return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage);
package/dist/types/types.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
2
  import type { EditorAppearance, EditorCommand, LongPressSelectionPluginOptions, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
3
3
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
4
+ import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
4
5
  import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
5
6
  import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
6
7
  import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
@@ -53,7 +54,8 @@ export type ExpandPluginDependencies = [
53
54
  OptionalPlugin<FeatureFlagsPlugin>,
54
55
  OptionalPlugin<EditorViewModePlugin>,
55
56
  OptionalPlugin<BlockMenuPlugin>,
56
- OptionalPlugin<LocalIdPlugin>
57
+ OptionalPlugin<LocalIdPlugin>,
58
+ OptionalPlugin<BlockControlsPlugin>
57
59
  ];
58
60
  export type ExpandPlugin = NextEditorPlugin<'expand', {
59
61
  actions: {
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
2
  import type { EditorAppearance, EditorCommand, LongPressSelectionPluginOptions, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
3
3
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
4
+ import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
4
5
  import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
5
6
  import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
6
7
  import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
@@ -53,7 +54,8 @@ export type ExpandPluginDependencies = [
53
54
  OptionalPlugin<FeatureFlagsPlugin>,
54
55
  OptionalPlugin<EditorViewModePlugin>,
55
56
  OptionalPlugin<BlockMenuPlugin>,
56
- OptionalPlugin<LocalIdPlugin>
57
+ OptionalPlugin<LocalIdPlugin>,
58
+ OptionalPlugin<BlockControlsPlugin>
57
59
  ];
58
60
  export type ExpandPlugin = NextEditorPlugin<'expand', {
59
61
  actions: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-expand",
3
- "version": "9.1.15",
3
+ "version": "9.1.17",
4
4
  "description": "Expand plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,6 +32,7 @@
32
32
  "@atlaskit/adf-schema": "^52.4.0",
33
33
  "@atlaskit/button": "^23.10.0",
34
34
  "@atlaskit/editor-plugin-analytics": "^8.0.0",
35
+ "@atlaskit/editor-plugin-block-controls": "^9.0.0",
35
36
  "@atlaskit/editor-plugin-block-menu": "^7.0.0",
36
37
  "@atlaskit/editor-plugin-decorations": "^8.0.0",
37
38
  "@atlaskit/editor-plugin-editor-disabled": "^8.0.0",
@@ -47,7 +48,7 @@
47
48
  "@atlaskit/icon-lab": "^6.2.0",
48
49
  "@atlaskit/platform-feature-flags": "^1.1.0",
49
50
  "@atlaskit/prosemirror-history": "^0.2.0",
50
- "@atlaskit/tmp-editor-statsig": "^50.0.0",
51
+ "@atlaskit/tmp-editor-statsig": "^51.1.0",
51
52
  "@atlaskit/tokens": "^11.4.0",
52
53
  "@atlaskit/tooltip": "^21.0.0",
53
54
  "@babel/runtime": "^7.0.0",