@atlaskit/editor-plugin-expand 1.4.1 → 1.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 (17) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/legacyExpand/nodeviews/index.js +11 -5
  3. package/dist/cjs/singlePlayerExpand/node-views/index.js +19 -11
  4. package/dist/cjs/singlePlayerExpand/ui/NodeView.js +1 -5
  5. package/dist/es2019/legacyExpand/nodeviews/index.js +11 -5
  6. package/dist/es2019/singlePlayerExpand/node-views/index.js +17 -9
  7. package/dist/es2019/singlePlayerExpand/ui/NodeView.js +1 -5
  8. package/dist/esm/legacyExpand/nodeviews/index.js +11 -5
  9. package/dist/esm/singlePlayerExpand/node-views/index.js +19 -11
  10. package/dist/esm/singlePlayerExpand/ui/NodeView.js +1 -5
  11. package/dist/types/legacyExpand/nodeviews/index.d.ts +1 -0
  12. package/dist/types/singlePlayerExpand/node-views/index.d.ts +2 -1
  13. package/dist/types/singlePlayerExpand/ui/NodeView.d.ts +1 -1
  14. package/dist/types-ts4.5/legacyExpand/nodeviews/index.d.ts +1 -0
  15. package/dist/types-ts4.5/singlePlayerExpand/node-views/index.d.ts +2 -1
  16. package/dist/types-ts4.5/singlePlayerExpand/ui/NodeView.d.ts +1 -1
  17. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-expand
2
2
 
3
+ ## 1.4.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#92468](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92468) [`515df766c29c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/515df766c29c) - [ux] [ED-23066] Re-render expand toggle icon when the class name is updated so that the aria-expanded attribute gets updated to match.
8
+
9
+ ## 1.4.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [#91886](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91886) [`5c0443e007d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c0443e007d9) - [ux] Fix bug where selection marker shows when focussing on the expand title with the keyboard.
14
+
3
15
  ## 1.4.1
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/legacyExpand/nodeviews/index.js CHANGED
@@ -67,7 +67,6 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
67
67
  (0, _defineProperty2.default)(this, "isMobile", false);
68
68
  (0, _defineProperty2.default)(this, "focusTitle", function () {
69
69
  if (_this.input) {
70
- var _this$api;
71
70
  var _this$view = _this.view,
72
71
  state = _this$view.state,
73
72
  dispatch = _this$view.dispatch;
@@ -83,7 +82,6 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
83
82
  if (typeof pos === 'number') {
84
83
  (0, _commands.setSelectionInsideExpand)(pos)(state, dispatch, _this.view);
85
84
  }
86
- _this.decorationCleanup = (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.selectionMarker) === null || _this$api === void 0 || (_this$api = _this$api.actions) === null || _this$api === void 0 ? void 0 : _this$api.hideDecoration();
87
85
  _this.input.focus();
88
86
  }
89
87
  });
@@ -109,7 +107,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
109
107
  state = _this$view2.state,
110
108
  dispatch = _this$view2.dispatch;
111
109
  if ((0, _utils.closestElement)(target, ".".concat(_styles.expandClassNames.icon))) {
112
- var _this$api2;
110
+ var _this$api;
113
111
  if (!_this.allowInteractiveExpand) {
114
112
  return;
115
113
  }
@@ -121,7 +119,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
121
119
  _this.view.dom.blur();
122
120
  }
123
121
  (0, _commands.toggleExpandExpanded)({
124
- editorAnalyticsAPI: (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions,
122
+ editorAnalyticsAPI: (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions,
125
123
  pos: pos,
126
124
  nodeType: _this.node.type,
127
125
  __livePage: _this.__livePage
@@ -156,7 +154,11 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
156
154
  (0, _defineProperty2.default)(this, "handleFocus", function (event) {
157
155
  event.stopImmediatePropagation();
158
156
  });
159
- (0, _defineProperty2.default)(this, "handleBlur", function (event) {
157
+ (0, _defineProperty2.default)(this, "handleInputFocus", function () {
158
+ var _this$api2;
159
+ _this.decorationCleanup = (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.selectionMarker) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.actions) === null || _this$api2 === void 0 ? void 0 : _this$api2.hideDecoration();
160
+ });
161
+ (0, _defineProperty2.default)(this, "handleBlur", function () {
160
162
  var _this$decorationClean;
161
163
  (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
162
164
  });
@@ -399,6 +401,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
399
401
  this.input.addEventListener('keydown', this.handleTitleKeydown);
400
402
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
401
403
  this.input.addEventListener('blur', this.handleBlur);
404
+ // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
405
+ this.input.addEventListener('focus', this.handleInputFocus);
402
406
  }
403
407
  if (this.titleContainer) {
404
408
  // If the user interacts in our title bar (either toggle or input)
@@ -490,6 +494,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
490
494
  this.input.removeEventListener('keydown', this.handleTitleKeydown);
491
495
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
492
496
  this.input.removeEventListener('blur', this.handleBlur);
497
+ // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
498
+ this.input.removeEventListener('focus', this.handleInputFocus);
493
499
  }
494
500
  if (this.titleContainer) {
495
501
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
package/dist/cjs/singlePlayerExpand/node-views/index.js CHANGED
@@ -21,7 +21,8 @@ var _commands = require("../commands");
21
21
  var _NodeView = require("../ui/NodeView");
22
22
  var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
23
23
  function ExpandNodeView(node, view, getPos, getIntl, isMobile, selectNearNode, api) {
24
- var _this = this;
24
+ var _this = this,
25
+ _expandedState$get;
25
26
  var allowInteractiveExpand = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
26
27
  var __livePage = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
27
28
  (0, _classCallCheck2.default)(this, ExpandNodeView);
@@ -29,7 +30,6 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
29
30
  (0, _defineProperty2.default)(this, "isMobile", false);
30
31
  (0, _defineProperty2.default)(this, "focusTitle", function () {
31
32
  if (_this.input) {
32
- var _this$api;
33
33
  var _this$view = _this.view,
34
34
  state = _this$view.state,
35
35
  dispatch = _this$view.dispatch;
@@ -45,7 +45,6 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
45
45
  if (typeof pos === 'number') {
46
46
  (0, _commands.setSelectionInsideExpand)(pos)(state, dispatch, _this.view);
47
47
  }
48
- _this.decorationCleanup = (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.selectionMarker) === null || _this$api === void 0 || (_this$api = _this$api.actions) === null || _this$api === void 0 ? void 0 : _this$api.hideDecoration();
49
48
  _this.input.focus();
50
49
  }
51
50
  });
@@ -68,7 +67,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
68
67
  }
69
68
  var target = event.target;
70
69
  if ((0, _utils.closestElement)(target, ".".concat(_styles.expandClassNames.icon))) {
71
- var _this$api2;
70
+ var _this$api;
72
71
  if (!_this.allowInteractiveExpand) {
73
72
  return;
74
73
  }
@@ -80,11 +79,11 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
80
79
  _this.view.dom.blur();
81
80
  }
82
81
  (0, _commands.toggleExpandExpanded)({
83
- editorAnalyticsAPI: (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions,
82
+ editorAnalyticsAPI: (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions,
84
83
  pos: pos,
85
84
  node: _this.node
86
85
  })(_this.view.state, _this.view.dispatch);
87
- _this.updateExpandClassName();
86
+ _this.updateExpandToggleIcon();
88
87
  return;
89
88
  }
90
89
  if (target === _this.input) {
@@ -114,7 +113,11 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
114
113
  (0, _defineProperty2.default)(this, "handleFocus", function (event) {
115
114
  event.stopImmediatePropagation();
116
115
  });
117
- (0, _defineProperty2.default)(this, "handleBlur", function (event) {
116
+ (0, _defineProperty2.default)(this, "handleInputFocus", function () {
117
+ var _this$api2;
118
+ _this.decorationCleanup = (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.selectionMarker) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.actions) === null || _this$api2 === void 0 ? void 0 : _this$api2.hideDecoration();
119
+ });
120
+ (0, _defineProperty2.default)(this, "handleBlur", function () {
118
121
  var _this$decorationClean;
119
122
  (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
120
123
  });
@@ -173,7 +176,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
173
176
  pos: pos,
174
177
  node: _this.node
175
178
  })(state, dispatch);
176
- _this.updateExpandClassName();
179
+ _this.updateExpandToggleIcon();
177
180
  }
178
181
  });
179
182
  (0, _defineProperty2.default)(this, "moveToOutsideOfTitle", function (event) {
@@ -332,10 +335,10 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
332
335
  this.icon = this.dom.querySelector(".".concat(_styles.expandClassNames.icon));
333
336
  this.input = this.dom.querySelector(".".concat(_styles.expandClassNames.titleInput));
334
337
  this.titleContainer = this.dom.querySelector(".".concat(_styles.expandClassNames.titleContainer));
335
- (0, _NodeView.renderIcon)(this.icon, this.allowInteractiveExpand, this.intl);
336
338
  if (!_expand.expandedState.has(this.node)) {
337
339
  _expand.expandedState.set(this.node, false);
338
340
  }
341
+ (0, _NodeView.renderIcon)(this.icon, this.allowInteractiveExpand, (_expandedState$get = _expand.expandedState.get(this.node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
339
342
  if (!this.input || !this.titleContainer || !this.icon) {
340
343
  return;
341
344
  }
@@ -346,6 +349,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
346
349
  this.dom.addEventListener('input', this.handleInput);
347
350
  this.input.addEventListener('keydown', this.handleTitleKeydown);
348
351
  this.input.addEventListener('blur', this.handleBlur);
352
+ this.input.addEventListener('focus', this.handleInputFocus);
349
353
  // If the user interacts in our title bar (either toggle or input)
350
354
  // Prevent ProseMirror from getting a focus event (causes weird selection issues).
351
355
  this.titleContainer.addEventListener('focus', this.handleFocus);
@@ -397,11 +401,14 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
397
401
  return false;
398
402
  }
399
403
  }, {
400
- key: "updateExpandClassName",
401
- value: function updateExpandClassName() {
404
+ key: "updateExpandToggleIcon",
405
+ value: function updateExpandToggleIcon() {
402
406
  var expanded = _expand.expandedState.get(this.node) ? _expand.expandedState.get(this.node) : false;
403
407
  if (this.dom && expanded !== undefined) {
408
+ var _expandedState$get2;
404
409
  this.dom.className = (0, _NodeView.buildExpandClassName)(this.node.type.name, expanded);
410
+ // Re-render the icon to update the aria-expanded attribute
411
+ (0, _NodeView.renderIcon)(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = _expand.expandedState.get(this.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
405
412
  }
406
413
  }
407
414
  }, {
@@ -415,6 +422,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
415
422
  this.dom.removeEventListener('input', this.handleInput);
416
423
  this.input.removeEventListener('keydown', this.handleTitleKeydown);
417
424
  this.input.removeEventListener('blur', this.handleBlur);
425
+ this.input.removeEventListener('focus', this.handleInputFocus);
418
426
  this.titleContainer.removeEventListener('focus', this.handleFocus);
419
427
  this.icon.removeEventListener('keydown', this.handleIconKeyDown);
420
428
  (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
package/dist/cjs/singlePlayerExpand/ui/NodeView.js CHANGED
@@ -48,14 +48,10 @@ var toDOM = exports.toDOM = function toDOM(node, __livePage, intl) {
48
48
  'class': _styles.expandClassNames.content
49
49
  }, 0]];
50
50
  };
51
- var renderIcon = exports.renderIcon = function renderIcon(icon, allowInteractiveExpand, intl, node) {
51
+ var renderIcon = exports.renderIcon = function renderIcon(icon, allowInteractiveExpand, expanded, intl) {
52
52
  if (!icon) {
53
53
  return;
54
54
  }
55
- var expanded = node ? _expand.expandedState.get(node) : true;
56
- if (expanded === undefined) {
57
- expanded = false;
58
- }
59
55
  _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_ExpandButton.ExpandButton, {
60
56
  intl: intl,
61
57
  allowInteractiveExpand: allowInteractiveExpand,
package/dist/es2019/legacyExpand/nodeviews/index.js CHANGED
@@ -51,7 +51,6 @@ export class ExpandNodeView {
51
51
  _defineProperty(this, "isMobile", false);
52
52
  _defineProperty(this, "focusTitle", () => {
53
53
  if (this.input) {
54
- var _this$api, _this$api$selectionMa, _this$api$selectionMa2;
55
54
  const {
56
55
  state,
57
56
  dispatch
@@ -68,7 +67,6 @@ export class ExpandNodeView {
68
67
  if (typeof pos === 'number') {
69
68
  setSelectionInsideExpand(pos)(state, dispatch, this.view);
70
69
  }
71
- this.decorationCleanup = (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$selectionMa = _this$api.selectionMarker) === null || _this$api$selectionMa === void 0 ? void 0 : (_this$api$selectionMa2 = _this$api$selectionMa.actions) === null || _this$api$selectionMa2 === void 0 ? void 0 : _this$api$selectionMa2.hideDecoration();
72
70
  this.input.focus();
73
71
  }
74
72
  });
@@ -95,7 +93,7 @@ export class ExpandNodeView {
95
93
  dispatch
96
94
  } = this.view;
97
95
  if (closestElement(target, `.${expandClassNames.icon}`)) {
98
- var _this$api2, _this$api2$analytics;
96
+ var _this$api, _this$api$analytics;
99
97
  if (!this.allowInteractiveExpand) {
100
98
  return;
101
99
  }
@@ -107,7 +105,7 @@ export class ExpandNodeView {
107
105
  this.view.dom.blur();
108
106
  }
109
107
  toggleExpandExpanded({
110
- editorAnalyticsAPI: (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions,
108
+ editorAnalyticsAPI: (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$analytics = _this$api.analytics) === null || _this$api$analytics === void 0 ? void 0 : _this$api$analytics.actions,
111
109
  pos,
112
110
  nodeType: this.node.type,
113
111
  __livePage: this.__livePage
@@ -143,7 +141,11 @@ export class ExpandNodeView {
143
141
  _defineProperty(this, "handleFocus", event => {
144
142
  event.stopImmediatePropagation();
145
143
  });
146
- _defineProperty(this, "handleBlur", event => {
144
+ _defineProperty(this, "handleInputFocus", () => {
145
+ var _this$api2, _this$api2$selectionM, _this$api2$selectionM2;
146
+ this.decorationCleanup = (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$selectionM = _this$api2.selectionMarker) === null || _this$api2$selectionM === void 0 ? void 0 : (_this$api2$selectionM2 = _this$api2$selectionM.actions) === null || _this$api2$selectionM2 === void 0 ? void 0 : _this$api2$selectionM2.hideDecoration();
147
+ });
148
+ _defineProperty(this, "handleBlur", () => {
147
149
  var _this$decorationClean;
148
150
  (_this$decorationClean = this.decorationCleanup) === null || _this$decorationClean === void 0 ? void 0 : _this$decorationClean.call(this);
149
151
  });
@@ -398,6 +400,8 @@ export class ExpandNodeView {
398
400
  this.input.addEventListener('keydown', this.handleTitleKeydown);
399
401
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
400
402
  this.input.addEventListener('blur', this.handleBlur);
403
+ // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
404
+ this.input.addEventListener('focus', this.handleInputFocus);
401
405
  }
402
406
  if (this.titleContainer) {
403
407
  // If the user interacts in our title bar (either toggle or input)
@@ -479,6 +483,8 @@ export class ExpandNodeView {
479
483
  this.input.removeEventListener('keydown', this.handleTitleKeydown);
480
484
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
481
485
  this.input.removeEventListener('blur', this.handleBlur);
486
+ // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
487
+ this.input.removeEventListener('focus', this.handleInputFocus);
482
488
  }
483
489
  if (this.titleContainer) {
484
490
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
package/dist/es2019/singlePlayerExpand/node-views/index.js CHANGED
@@ -11,11 +11,11 @@ import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExp
11
11
  import { buildExpandClassName, renderIcon, toDOM } from '../ui/NodeView';
12
12
  export class ExpandNodeView {
13
13
  constructor(node, view, getPos, getIntl, isMobile, selectNearNode, api, allowInteractiveExpand = true, __livePage = false) {
14
+ var _expandedState$get;
14
15
  _defineProperty(this, "allowInteractiveExpand", true);
15
16
  _defineProperty(this, "isMobile", false);
16
17
  _defineProperty(this, "focusTitle", () => {
17
18
  if (this.input) {
18
- var _this$api, _this$api$selectionMa, _this$api$selectionMa2;
19
19
  const {
20
20
  state,
21
21
  dispatch
@@ -32,7 +32,6 @@ export class ExpandNodeView {
32
32
  if (typeof pos === 'number') {
33
33
  setSelectionInsideExpand(pos)(state, dispatch, this.view);
34
34
  }
35
- this.decorationCleanup = (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$selectionMa = _this$api.selectionMarker) === null || _this$api$selectionMa === void 0 ? void 0 : (_this$api$selectionMa2 = _this$api$selectionMa.actions) === null || _this$api$selectionMa2 === void 0 ? void 0 : _this$api$selectionMa2.hideDecoration();
36
35
  this.input.focus();
37
36
  }
38
37
  });
@@ -55,7 +54,7 @@ export class ExpandNodeView {
55
54
  }
56
55
  const target = event.target;
57
56
  if (closestElement(target, `.${expandClassNames.icon}`)) {
58
- var _this$api2, _this$api2$analytics;
57
+ var _this$api, _this$api$analytics;
59
58
  if (!this.allowInteractiveExpand) {
60
59
  return;
61
60
  }
@@ -67,11 +66,11 @@ export class ExpandNodeView {
67
66
  this.view.dom.blur();
68
67
  }
69
68
  toggleExpandExpanded({
70
- editorAnalyticsAPI: (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions,
69
+ editorAnalyticsAPI: (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$analytics = _this$api.analytics) === null || _this$api$analytics === void 0 ? void 0 : _this$api$analytics.actions,
71
70
  pos,
72
71
  node: this.node
73
72
  })(this.view.state, this.view.dispatch);
74
- this.updateExpandClassName();
73
+ this.updateExpandToggleIcon();
75
74
  return;
76
75
  }
77
76
  if (target === this.input) {
@@ -102,7 +101,11 @@ export class ExpandNodeView {
102
101
  _defineProperty(this, "handleFocus", event => {
103
102
  event.stopImmediatePropagation();
104
103
  });
105
- _defineProperty(this, "handleBlur", event => {
104
+ _defineProperty(this, "handleInputFocus", () => {
105
+ var _this$api2, _this$api2$selectionM, _this$api2$selectionM2;
106
+ this.decorationCleanup = (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$selectionM = _this$api2.selectionMarker) === null || _this$api2$selectionM === void 0 ? void 0 : (_this$api2$selectionM2 = _this$api2$selectionM.actions) === null || _this$api2$selectionM2 === void 0 ? void 0 : _this$api2$selectionM2.hideDecoration();
107
+ });
108
+ _defineProperty(this, "handleBlur", () => {
106
109
  var _this$decorationClean;
107
110
  (_this$decorationClean = this.decorationCleanup) === null || _this$decorationClean === void 0 ? void 0 : _this$decorationClean.call(this);
108
111
  });
@@ -165,7 +168,7 @@ export class ExpandNodeView {
165
168
  pos,
166
169
  node: this.node
167
170
  })(state, dispatch);
168
- this.updateExpandClassName();
171
+ this.updateExpandToggleIcon();
169
172
  }
170
173
  });
171
174
  _defineProperty(this, "moveToOutsideOfTitle", event => {
@@ -334,10 +337,10 @@ export class ExpandNodeView {
334
337
  this.icon = this.dom.querySelector(`.${expandClassNames.icon}`);
335
338
  this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
336
339
  this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
337
- renderIcon(this.icon, this.allowInteractiveExpand, this.intl);
338
340
  if (!expandedState.has(this.node)) {
339
341
  expandedState.set(this.node, false);
340
342
  }
343
+ renderIcon(this.icon, this.allowInteractiveExpand, (_expandedState$get = expandedState.get(this.node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
341
344
  if (!this.input || !this.titleContainer || !this.icon) {
342
345
  return;
343
346
  }
@@ -348,6 +351,7 @@ export class ExpandNodeView {
348
351
  this.dom.addEventListener('input', this.handleInput);
349
352
  this.input.addEventListener('keydown', this.handleTitleKeydown);
350
353
  this.input.addEventListener('blur', this.handleBlur);
354
+ this.input.addEventListener('focus', this.handleInputFocus);
351
355
  // If the user interacts in our title bar (either toggle or input)
352
356
  // Prevent ProseMirror from getting a focus event (causes weird selection issues).
353
357
  this.titleContainer.addEventListener('focus', this.handleFocus);
@@ -391,10 +395,13 @@ export class ExpandNodeView {
391
395
  }
392
396
  return false;
393
397
  }
394
- updateExpandClassName() {
398
+ updateExpandToggleIcon() {
395
399
  const expanded = expandedState.get(this.node) ? expandedState.get(this.node) : false;
396
400
  if (this.dom && expanded !== undefined) {
401
+ var _expandedState$get2;
397
402
  this.dom.className = buildExpandClassName(this.node.type.name, expanded);
403
+ // Re-render the icon to update the aria-expanded attribute
404
+ renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = expandedState.get(this.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
398
405
  }
399
406
  }
400
407
  destroy() {
@@ -406,6 +413,7 @@ export class ExpandNodeView {
406
413
  this.dom.removeEventListener('input', this.handleInput);
407
414
  this.input.removeEventListener('keydown', this.handleTitleKeydown);
408
415
  this.input.removeEventListener('blur', this.handleBlur);
416
+ this.input.removeEventListener('focus', this.handleInputFocus);
409
417
  this.titleContainer.removeEventListener('focus', this.handleFocus);
410
418
  this.icon.removeEventListener('keydown', this.handleIconKeyDown);
411
419
  (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 ? void 0 : _this$decorationClean2.call(this);
package/dist/es2019/singlePlayerExpand/ui/NodeView.js CHANGED
@@ -41,14 +41,10 @@ export const toDOM = (node, __livePage, intl) => {
41
41
  'class': expandClassNames.content
42
42
  }, 0]];
43
43
  };
44
- export const renderIcon = (icon, allowInteractiveExpand, intl, node) => {
44
+ export const renderIcon = (icon, allowInteractiveExpand, expanded, intl) => {
45
45
  if (!icon) {
46
46
  return;
47
47
  }
48
- let expanded = node ? expandedState.get(node) : true;
49
- if (expanded === undefined) {
50
- expanded = false;
51
- }
52
48
  ReactDOM.render( /*#__PURE__*/React.createElement(ExpandButton, {
53
49
  intl: intl,
54
50
  allowInteractiveExpand: allowInteractiveExpand,
package/dist/esm/legacyExpand/nodeviews/index.js CHANGED
@@ -59,7 +59,6 @@ export var ExpandNodeView = /*#__PURE__*/function () {
59
59
  _defineProperty(this, "isMobile", false);
60
60
  _defineProperty(this, "focusTitle", function () {
61
61
  if (_this.input) {
62
- var _this$api;
63
62
  var _this$view = _this.view,
64
63
  state = _this$view.state,
65
64
  dispatch = _this$view.dispatch;
@@ -75,7 +74,6 @@ export var ExpandNodeView = /*#__PURE__*/function () {
75
74
  if (typeof pos === 'number') {
76
75
  setSelectionInsideExpand(pos)(state, dispatch, _this.view);
77
76
  }
78
- _this.decorationCleanup = (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.selectionMarker) === null || _this$api === void 0 || (_this$api = _this$api.actions) === null || _this$api === void 0 ? void 0 : _this$api.hideDecoration();
79
77
  _this.input.focus();
80
78
  }
81
79
  });
@@ -101,7 +99,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
101
99
  state = _this$view2.state,
102
100
  dispatch = _this$view2.dispatch;
103
101
  if (closestElement(target, ".".concat(expandClassNames.icon))) {
104
- var _this$api2;
102
+ var _this$api;
105
103
  if (!_this.allowInteractiveExpand) {
106
104
  return;
107
105
  }
@@ -113,7 +111,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
113
111
  _this.view.dom.blur();
114
112
  }
115
113
  toggleExpandExpanded({
116
- editorAnalyticsAPI: (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions,
114
+ editorAnalyticsAPI: (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions,
117
115
  pos: pos,
118
116
  nodeType: _this.node.type,
119
117
  __livePage: _this.__livePage
@@ -148,7 +146,11 @@ export var ExpandNodeView = /*#__PURE__*/function () {
148
146
  _defineProperty(this, "handleFocus", function (event) {
149
147
  event.stopImmediatePropagation();
150
148
  });
151
- _defineProperty(this, "handleBlur", function (event) {
149
+ _defineProperty(this, "handleInputFocus", function () {
150
+ var _this$api2;
151
+ _this.decorationCleanup = (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.selectionMarker) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.actions) === null || _this$api2 === void 0 ? void 0 : _this$api2.hideDecoration();
152
+ });
153
+ _defineProperty(this, "handleBlur", function () {
152
154
  var _this$decorationClean;
153
155
  (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
154
156
  });
@@ -391,6 +393,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
391
393
  this.input.addEventListener('keydown', this.handleTitleKeydown);
392
394
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
393
395
  this.input.addEventListener('blur', this.handleBlur);
396
+ // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
397
+ this.input.addEventListener('focus', this.handleInputFocus);
394
398
  }
395
399
  if (this.titleContainer) {
396
400
  // If the user interacts in our title bar (either toggle or input)
@@ -482,6 +486,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
482
486
  this.input.removeEventListener('keydown', this.handleTitleKeydown);
483
487
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
484
488
  this.input.removeEventListener('blur', this.handleBlur);
489
+ // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
490
+ this.input.removeEventListener('focus', this.handleInputFocus);
485
491
  }
486
492
  if (this.titleContainer) {
487
493
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
package/dist/esm/singlePlayerExpand/node-views/index.js CHANGED
@@ -13,7 +13,8 @@ import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExp
13
13
  import { buildExpandClassName, renderIcon, toDOM } from '../ui/NodeView';
14
14
  export var ExpandNodeView = /*#__PURE__*/function () {
15
15
  function ExpandNodeView(node, view, getPos, getIntl, isMobile, selectNearNode, api) {
16
- var _this = this;
16
+ var _this = this,
17
+ _expandedState$get;
17
18
  var allowInteractiveExpand = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
18
19
  var __livePage = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
19
20
  _classCallCheck(this, ExpandNodeView);
@@ -21,7 +22,6 @@ export var ExpandNodeView = /*#__PURE__*/function () {
21
22
  _defineProperty(this, "isMobile", false);
22
23
  _defineProperty(this, "focusTitle", function () {
23
24
  if (_this.input) {
24
- var _this$api;
25
25
  var _this$view = _this.view,
26
26
  state = _this$view.state,
27
27
  dispatch = _this$view.dispatch;
@@ -37,7 +37,6 @@ export var ExpandNodeView = /*#__PURE__*/function () {
37
37
  if (typeof pos === 'number') {
38
38
  setSelectionInsideExpand(pos)(state, dispatch, _this.view);
39
39
  }
40
- _this.decorationCleanup = (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.selectionMarker) === null || _this$api === void 0 || (_this$api = _this$api.actions) === null || _this$api === void 0 ? void 0 : _this$api.hideDecoration();
41
40
  _this.input.focus();
42
41
  }
43
42
  });
@@ -60,7 +59,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
60
59
  }
61
60
  var target = event.target;
62
61
  if (closestElement(target, ".".concat(expandClassNames.icon))) {
63
- var _this$api2;
62
+ var _this$api;
64
63
  if (!_this.allowInteractiveExpand) {
65
64
  return;
66
65
  }
@@ -72,11 +71,11 @@ export var ExpandNodeView = /*#__PURE__*/function () {
72
71
  _this.view.dom.blur();
73
72
  }
74
73
  toggleExpandExpanded({
75
- editorAnalyticsAPI: (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions,
74
+ editorAnalyticsAPI: (_this$api = _this.api) === null || _this$api === void 0 || (_this$api = _this$api.analytics) === null || _this$api === void 0 ? void 0 : _this$api.actions,
76
75
  pos: pos,
77
76
  node: _this.node
78
77
  })(_this.view.state, _this.view.dispatch);
79
- _this.updateExpandClassName();
78
+ _this.updateExpandToggleIcon();
80
79
  return;
81
80
  }
82
81
  if (target === _this.input) {
@@ -106,7 +105,11 @@ export var ExpandNodeView = /*#__PURE__*/function () {
106
105
  _defineProperty(this, "handleFocus", function (event) {
107
106
  event.stopImmediatePropagation();
108
107
  });
109
- _defineProperty(this, "handleBlur", function (event) {
108
+ _defineProperty(this, "handleInputFocus", function () {
109
+ var _this$api2;
110
+ _this.decorationCleanup = (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.selectionMarker) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.actions) === null || _this$api2 === void 0 ? void 0 : _this$api2.hideDecoration();
111
+ });
112
+ _defineProperty(this, "handleBlur", function () {
110
113
  var _this$decorationClean;
111
114
  (_this$decorationClean = _this.decorationCleanup) === null || _this$decorationClean === void 0 || _this$decorationClean.call(_this);
112
115
  });
@@ -165,7 +168,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
165
168
  pos: pos,
166
169
  node: _this.node
167
170
  })(state, dispatch);
168
- _this.updateExpandClassName();
171
+ _this.updateExpandToggleIcon();
169
172
  }
170
173
  });
171
174
  _defineProperty(this, "moveToOutsideOfTitle", function (event) {
@@ -324,10 +327,10 @@ export var ExpandNodeView = /*#__PURE__*/function () {
324
327
  this.icon = this.dom.querySelector(".".concat(expandClassNames.icon));
325
328
  this.input = this.dom.querySelector(".".concat(expandClassNames.titleInput));
326
329
  this.titleContainer = this.dom.querySelector(".".concat(expandClassNames.titleContainer));
327
- renderIcon(this.icon, this.allowInteractiveExpand, this.intl);
328
330
  if (!expandedState.has(this.node)) {
329
331
  expandedState.set(this.node, false);
330
332
  }
333
+ renderIcon(this.icon, this.allowInteractiveExpand, (_expandedState$get = expandedState.get(this.node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
331
334
  if (!this.input || !this.titleContainer || !this.icon) {
332
335
  return;
333
336
  }
@@ -338,6 +341,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
338
341
  this.dom.addEventListener('input', this.handleInput);
339
342
  this.input.addEventListener('keydown', this.handleTitleKeydown);
340
343
  this.input.addEventListener('blur', this.handleBlur);
344
+ this.input.addEventListener('focus', this.handleInputFocus);
341
345
  // If the user interacts in our title bar (either toggle or input)
342
346
  // Prevent ProseMirror from getting a focus event (causes weird selection issues).
343
347
  this.titleContainer.addEventListener('focus', this.handleFocus);
@@ -389,11 +393,14 @@ export var ExpandNodeView = /*#__PURE__*/function () {
389
393
  return false;
390
394
  }
391
395
  }, {
392
- key: "updateExpandClassName",
393
- value: function updateExpandClassName() {
396
+ key: "updateExpandToggleIcon",
397
+ value: function updateExpandToggleIcon() {
394
398
  var expanded = expandedState.get(this.node) ? expandedState.get(this.node) : false;
395
399
  if (this.dom && expanded !== undefined) {
400
+ var _expandedState$get2;
396
401
  this.dom.className = buildExpandClassName(this.node.type.name, expanded);
402
+ // Re-render the icon to update the aria-expanded attribute
403
+ renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get2 = expandedState.get(this.node)) !== null && _expandedState$get2 !== void 0 ? _expandedState$get2 : false, this.intl);
397
404
  }
398
405
  }
399
406
  }, {
@@ -407,6 +414,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
407
414
  this.dom.removeEventListener('input', this.handleInput);
408
415
  this.input.removeEventListener('keydown', this.handleTitleKeydown);
409
416
  this.input.removeEventListener('blur', this.handleBlur);
417
+ this.input.removeEventListener('focus', this.handleInputFocus);
410
418
  this.titleContainer.removeEventListener('focus', this.handleFocus);
411
419
  this.icon.removeEventListener('keydown', this.handleIconKeyDown);
412
420
  (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
package/dist/esm/singlePlayerExpand/ui/NodeView.js CHANGED
@@ -41,14 +41,10 @@ export var toDOM = function toDOM(node, __livePage, intl) {
41
41
  'class': expandClassNames.content
42
42
  }, 0]];
43
43
  };
44
- export var renderIcon = function renderIcon(icon, allowInteractiveExpand, intl, node) {
44
+ export var renderIcon = function renderIcon(icon, allowInteractiveExpand, expanded, intl) {
45
45
  if (!icon) {
46
46
  return;
47
47
  }
48
- var expanded = node ? expandedState.get(node) : true;
49
- if (expanded === undefined) {
50
- expanded = false;
51
- }
52
48
  ReactDOM.render( /*#__PURE__*/React.createElement(ExpandButton, {
53
49
  intl: intl,
54
50
  allowInteractiveExpand: allowInteractiveExpand,
package/dist/types/legacyExpand/nodeviews/index.d.ts CHANGED
@@ -29,6 +29,7 @@ export declare class ExpandNodeView implements NodeView {
29
29
  private handleClick;
30
30
  private handleInput;
31
31
  private handleFocus;
32
+ private handleInputFocus;
32
33
  private handleBlur;
33
34
  private handleTitleKeydown;
34
35
  private deleteExpand;
package/dist/types/singlePlayerExpand/node-views/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export declare class ExpandNodeView implements NodeView {
27
27
  private handleClick;
28
28
  private handleInput;
29
29
  private handleFocus;
30
+ private handleInputFocus;
30
31
  private handleBlur;
31
32
  private handleTitleKeydown;
32
33
  private deleteEmptyExpand;
@@ -43,7 +44,7 @@ export declare class ExpandNodeView implements NodeView {
43
44
  target: Element;
44
45
  }): boolean;
45
46
  update(node: PmNode, _decorations: readonly Decoration[]): boolean;
46
- updateExpandClassName(): void;
47
+ updateExpandToggleIcon(): void;
47
48
  destroy(): void;
48
49
  }
49
50
  export default function ({ getIntl, isMobile, api, allowInteractiveExpand, __livePage, }: {
package/dist/types/singlePlayerExpand/ui/NodeView.d.ts CHANGED
@@ -2,4 +2,4 @@ import type { IntlShape } from 'react-intl-next';
2
2
  import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
3
3
  export declare const buildExpandClassName: (type: string, expanded: boolean) => string;
4
4
  export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape) => DOMOutputSpec;
5
- export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, intl?: IntlShape, node?: PmNode) => void;
5
+ export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, expanded: boolean, intl?: IntlShape) => void;
package/dist/types-ts4.5/legacyExpand/nodeviews/index.d.ts CHANGED
@@ -29,6 +29,7 @@ export declare class ExpandNodeView implements NodeView {
29
29
  private handleClick;
30
30
  private handleInput;
31
31
  private handleFocus;
32
+ private handleInputFocus;
32
33
  private handleBlur;
33
34
  private handleTitleKeydown;
34
35
  private deleteExpand;
package/dist/types-ts4.5/singlePlayerExpand/node-views/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export declare class ExpandNodeView implements NodeView {
27
27
  private handleClick;
28
28
  private handleInput;
29
29
  private handleFocus;
30
+ private handleInputFocus;
30
31
  private handleBlur;
31
32
  private handleTitleKeydown;
32
33
  private deleteEmptyExpand;
@@ -43,7 +44,7 @@ export declare class ExpandNodeView implements NodeView {
43
44
  target: Element;
44
45
  }): boolean;
45
46
  update(node: PmNode, _decorations: readonly Decoration[]): boolean;
46
- updateExpandClassName(): void;
47
+ updateExpandToggleIcon(): void;
47
48
  destroy(): void;
48
49
  }
49
50
  export default function ({ getIntl, isMobile, api, allowInteractiveExpand, __livePage, }: {
package/dist/types-ts4.5/singlePlayerExpand/ui/NodeView.d.ts CHANGED
@@ -2,4 +2,4 @@ import type { IntlShape } from 'react-intl-next';
2
2
  import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
3
3
  export declare const buildExpandClassName: (type: string, expanded: boolean) => string;
4
4
  export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape) => DOMOutputSpec;
5
- export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, intl?: IntlShape, node?: PmNode) => void;
5
+ export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, expanded: boolean, intl?: IntlShape) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-expand",
3
- "version": "1.4.1",
3
+ "version": "1.4.3",
4
4
  "description": "Expand plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,7 +35,7 @@
35
35
  "dependencies": {
36
36
  "@atlaskit/adf-schema": "^35.9.0",
37
37
  "@atlaskit/button": "^17.12.0",
38
- "@atlaskit/editor-common": "^78.29.0",
38
+ "@atlaskit/editor-common": "^78.30.0",
39
39
  "@atlaskit/editor-plugin-analytics": "^1.0.0",
40
40
  "@atlaskit/editor-plugin-decorations": "^1.0.0",
41
41
  "@atlaskit/editor-plugin-selection": "^1.1.0",