@atlaskit/editor-plugin-insert-block 2.4.1 → 2.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/ToolbarInsertBlock/index.js +15 -13
  3. package/dist/es2019/ui/ToolbarInsertBlock/index.js +18 -17
  4. package/dist/esm/ui/ToolbarInsertBlock/index.js +15 -13
  5. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-insert-block
2
2
 
3
+ ## 2.4.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#156556](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156556)
8
+ [`fa4db989cfa70`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fa4db989cfa70) -
9
+ [HOT-112603] Reduce memory leak footage by using WeakRef to store HTML element
10
+
3
11
  ## 2.4.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/ui/ToolbarInsertBlock/index.js CHANGED
@@ -125,7 +125,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
125
125
  });
126
126
  if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
127
127
  var _ref2;
128
- (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || _ref2.focus();
128
+ (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || (_ref2 = _ref2.deref()) === null || _ref2 === void 0 || _ref2.focus();
129
129
  }
130
130
  });
131
131
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleEmojiPicker", function () {
@@ -154,7 +154,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
154
154
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEmojiPressEscape", function () {
155
155
  var _this$emojiButtonRef;
156
156
  _this.toggleEmojiPicker(_analytics.INPUT_METHOD.KEYBOARD);
157
- (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
157
+ (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || (_this$emojiButtonRef = _this$emojiButtonRef.deref()) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
158
158
  });
159
159
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEmojiClickOutside", function (e) {
160
160
  // Ignore click events for detached elements.
@@ -172,22 +172,22 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
172
172
  }
173
173
  switch (buttonName) {
174
174
  case 'emoji':
175
- _this.emojiButtonRef = ref;
175
+ _this.emojiButtonRef = new WeakRef(ref);
176
176
  break;
177
177
  case 'media':
178
- _this.mediaButtonRef = ref;
178
+ _this.mediaButtonRef = new WeakRef(ref);
179
179
  break;
180
180
  }
181
181
  };
182
182
  });
183
183
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handlePlusButtonRef", function (ref) {
184
184
  if (ref) {
185
- _this.plusButtonRef = ref;
185
+ _this.plusButtonRef = new WeakRef(ref);
186
186
  }
187
187
  });
188
188
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDropDownButtonRef", function (ref) {
189
189
  if (ref) {
190
- _this.dropdownButtonRef = ref;
190
+ _this.dropdownButtonRef = new WeakRef(ref);
191
191
  }
192
192
  });
193
193
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleTableSelector", function () {
@@ -365,10 +365,11 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
365
365
  onShowMediaPicker = _this$props5.onShowMediaPicker,
366
366
  dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
367
367
  if (onShowMediaPicker) {
368
- var _this$props$popupsMou;
369
- var args = _this.mediaButtonRef ? {
370
- ref: _this.mediaButtonRef,
371
- mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : _this.mediaButtonRef
368
+ var _this$mediaButtonRef, _this$props$popupsMou;
369
+ var ref = (_this$mediaButtonRef = _this.mediaButtonRef) === null || _this$mediaButtonRef === void 0 ? void 0 : _this$mediaButtonRef.deref();
370
+ var args = ref ? {
371
+ ref: ref,
372
+ mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : ref
372
373
  } : undefined;
373
374
  onShowMediaPicker(args);
374
375
  if (dispatchAnalyticsEvent) {
@@ -555,7 +556,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
555
556
  bubbles: true,
556
557
  key: 'ArrowDown'
557
558
  });
558
- (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
559
+ (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || (_this$dropdownButtonR = _this$dropdownButtonR.deref()) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
559
560
  this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
560
561
  isOpenedByKeyboard: false
561
562
  }));
@@ -598,7 +599,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
598
599
  });
599
600
  };
600
601
  return (0, _react2.jsx)(_ui.Popup, {
601
- target: ref,
602
+ target: ref.deref(),
602
603
  fitHeight: 350,
603
604
  fitWidth: 350,
604
605
  offset: [0, 3],
@@ -671,6 +672,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
671
672
  _tableSelectorButton5,
672
673
  _tableSelectorButton6,
673
674
  _this$props$isDisable,
675
+ _this$plusButtonRef,
674
676
  _this$props$pluginInj3;
675
677
  var _this$state2 = this.state,
676
678
  buttons = _this$state2.buttons,
@@ -788,7 +790,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
788
790
  spacing: this.props.isReducedSpacing ? 'none' : 'default',
789
791
  label: this.props.intl.formatMessage(_messages.messages.insertMenu),
790
792
  open: (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
791
- plusButtonRef: this.plusButtonRef,
793
+ plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
792
794
  items: this.state.dropdownItems,
793
795
  onRef: this.handleDropDownButtonRef,
794
796
  onPlusButtonRef: this.handlePlusButtonRef,
package/dist/es2019/ui/ToolbarInsertBlock/index.js CHANGED
@@ -126,8 +126,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
126
126
  isPlusMenuOpen: !isPlusMenuOpen
127
127
  });
128
128
  if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
129
- var _ref;
130
- (_ref = this.plusButtonRef || this.dropdownButtonRef) === null || _ref === void 0 ? void 0 : _ref.focus();
129
+ var _ref, _ref$deref;
130
+ (_ref = this.plusButtonRef || this.dropdownButtonRef) === null || _ref === void 0 ? void 0 : (_ref$deref = _ref.deref()) === null || _ref$deref === void 0 ? void 0 : _ref$deref.focus();
131
131
  }
132
132
  });
133
133
  _defineProperty(this, "toggleEmojiPicker", (inputMethod = INPUT_METHOD.TOOLBAR) => {
@@ -153,9 +153,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
153
153
  });
154
154
  });
155
155
  _defineProperty(this, "handleEmojiPressEscape", () => {
156
- var _this$emojiButtonRef;
156
+ var _this$emojiButtonRef, _this$emojiButtonRef$;
157
157
  this.toggleEmojiPicker(INPUT_METHOD.KEYBOARD);
158
- (_this$emojiButtonRef = this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 ? void 0 : _this$emojiButtonRef.focus();
158
+ (_this$emojiButtonRef = this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 ? void 0 : (_this$emojiButtonRef$ = _this$emojiButtonRef.deref()) === null || _this$emojiButtonRef$ === void 0 ? void 0 : _this$emojiButtonRef$.focus();
159
159
  });
160
160
  _defineProperty(this, "handleEmojiClickOutside", e => {
161
161
  // Ignore click events for detached elements.
@@ -172,21 +172,21 @@ export class ToolbarInsertBlock extends React.PureComponent {
172
172
  }
173
173
  switch (buttonName) {
174
174
  case 'emoji':
175
- this.emojiButtonRef = ref;
175
+ this.emojiButtonRef = new WeakRef(ref);
176
176
  break;
177
177
  case 'media':
178
- this.mediaButtonRef = ref;
178
+ this.mediaButtonRef = new WeakRef(ref);
179
179
  break;
180
180
  }
181
181
  });
182
182
  _defineProperty(this, "handlePlusButtonRef", ref => {
183
183
  if (ref) {
184
- this.plusButtonRef = ref;
184
+ this.plusButtonRef = new WeakRef(ref);
185
185
  }
186
186
  });
187
187
  _defineProperty(this, "handleDropDownButtonRef", ref => {
188
188
  if (ref) {
189
- this.dropdownButtonRef = ref;
189
+ this.dropdownButtonRef = new WeakRef(ref);
190
190
  }
191
191
  });
192
192
  _defineProperty(this, "toggleTableSelector", (inputMethod = INPUT_METHOD.TOOLBAR) => {
@@ -379,10 +379,11 @@ export class ToolbarInsertBlock extends React.PureComponent {
379
379
  dispatchAnalyticsEvent
380
380
  } = this.props;
381
381
  if (onShowMediaPicker) {
382
- var _this$props$popupsMou;
383
- const args = this.mediaButtonRef ? {
384
- ref: this.mediaButtonRef,
385
- mountPoint: (_this$props$popupsMou = this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : this.mediaButtonRef
382
+ var _this$mediaButtonRef, _this$props$popupsMou;
383
+ const ref = (_this$mediaButtonRef = this.mediaButtonRef) === null || _this$mediaButtonRef === void 0 ? void 0 : _this$mediaButtonRef.deref();
384
+ const args = ref ? {
385
+ ref,
386
+ mountPoint: (_this$props$popupsMou = this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : ref
386
387
  } : undefined;
387
388
  onShowMediaPicker(args);
388
389
  if (dispatchAnalyticsEvent) {
@@ -607,12 +608,12 @@ export class ToolbarInsertBlock extends React.PureComponent {
607
608
  });
608
609
  }
609
610
  if (this.state.isOpenedByKeyboard) {
610
- var _this$dropdownButtonR;
611
+ var _this$dropdownButtonR, _this$dropdownButtonR2;
611
612
  const downArrowEvent = new KeyboardEvent('keydown', {
612
613
  bubbles: true,
613
614
  key: 'ArrowDown'
614
615
  });
615
- (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 ? void 0 : _this$dropdownButtonR.dispatchEvent(downArrowEvent);
616
+ (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 ? void 0 : (_this$dropdownButtonR2 = _this$dropdownButtonR.deref()) === null || _this$dropdownButtonR2 === void 0 ? void 0 : _this$dropdownButtonR2.dispatchEvent(downArrowEvent);
616
617
  this.setState({
617
618
  ...this.state,
618
619
  isOpenedByKeyboard: false
@@ -658,7 +659,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
658
659
  });
659
660
  };
660
661
  return jsx(Popup, {
661
- target: ref,
662
+ target: ref.deref(),
662
663
  fitHeight: 350,
663
664
  fitWidth: 350,
664
665
  offset: [0, 3],
@@ -714,7 +715,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
714
715
  });
715
716
  }
716
717
  render() {
717
- var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$pluginInj7;
718
+ var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$plusButtonRef, _this$props$pluginInj7;
718
719
  const {
719
720
  buttons,
720
721
  dropdownItems,
@@ -822,7 +823,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
822
823
  spacing: this.props.isReducedSpacing ? 'none' : 'default',
823
824
  label: this.props.intl.formatMessage(messages.insertMenu),
824
825
  open: editorExperiment('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
825
- plusButtonRef: this.plusButtonRef,
826
+ plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
826
827
  items: this.state.dropdownItems,
827
828
  onRef: this.handleDropDownButtonRef,
828
829
  onPlusButtonRef: this.handlePlusButtonRef,
package/dist/esm/ui/ToolbarInsertBlock/index.js CHANGED
@@ -116,7 +116,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
116
116
  });
117
117
  if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
118
118
  var _ref2;
119
- (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || _ref2.focus();
119
+ (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || (_ref2 = _ref2.deref()) === null || _ref2 === void 0 || _ref2.focus();
120
120
  }
121
121
  });
122
122
  _defineProperty(_assertThisInitialized(_this), "toggleEmojiPicker", function () {
@@ -145,7 +145,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
145
145
  _defineProperty(_assertThisInitialized(_this), "handleEmojiPressEscape", function () {
146
146
  var _this$emojiButtonRef;
147
147
  _this.toggleEmojiPicker(INPUT_METHOD.KEYBOARD);
148
- (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
148
+ (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || (_this$emojiButtonRef = _this$emojiButtonRef.deref()) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
149
149
  });
150
150
  _defineProperty(_assertThisInitialized(_this), "handleEmojiClickOutside", function (e) {
151
151
  // Ignore click events for detached elements.
@@ -163,22 +163,22 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
163
163
  }
164
164
  switch (buttonName) {
165
165
  case 'emoji':
166
- _this.emojiButtonRef = ref;
166
+ _this.emojiButtonRef = new WeakRef(ref);
167
167
  break;
168
168
  case 'media':
169
- _this.mediaButtonRef = ref;
169
+ _this.mediaButtonRef = new WeakRef(ref);
170
170
  break;
171
171
  }
172
172
  };
173
173
  });
174
174
  _defineProperty(_assertThisInitialized(_this), "handlePlusButtonRef", function (ref) {
175
175
  if (ref) {
176
- _this.plusButtonRef = ref;
176
+ _this.plusButtonRef = new WeakRef(ref);
177
177
  }
178
178
  });
179
179
  _defineProperty(_assertThisInitialized(_this), "handleDropDownButtonRef", function (ref) {
180
180
  if (ref) {
181
- _this.dropdownButtonRef = ref;
181
+ _this.dropdownButtonRef = new WeakRef(ref);
182
182
  }
183
183
  });
184
184
  _defineProperty(_assertThisInitialized(_this), "toggleTableSelector", function () {
@@ -356,10 +356,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
356
356
  onShowMediaPicker = _this$props5.onShowMediaPicker,
357
357
  dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
358
358
  if (onShowMediaPicker) {
359
- var _this$props$popupsMou;
360
- var args = _this.mediaButtonRef ? {
361
- ref: _this.mediaButtonRef,
362
- mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : _this.mediaButtonRef
359
+ var _this$mediaButtonRef, _this$props$popupsMou;
360
+ var ref = (_this$mediaButtonRef = _this.mediaButtonRef) === null || _this$mediaButtonRef === void 0 ? void 0 : _this$mediaButtonRef.deref();
361
+ var args = ref ? {
362
+ ref: ref,
363
+ mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : ref
363
364
  } : undefined;
364
365
  onShowMediaPicker(args);
365
366
  if (dispatchAnalyticsEvent) {
@@ -546,7 +547,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
546
547
  bubbles: true,
547
548
  key: 'ArrowDown'
548
549
  });
549
- (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
550
+ (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || (_this$dropdownButtonR = _this$dropdownButtonR.deref()) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
550
551
  this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
551
552
  isOpenedByKeyboard: false
552
553
  }));
@@ -589,7 +590,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
589
590
  });
590
591
  };
591
592
  return jsx(Popup, {
592
- target: ref,
593
+ target: ref.deref(),
593
594
  fitHeight: 350,
594
595
  fitWidth: 350,
595
596
  offset: [0, 3],
@@ -662,6 +663,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
662
663
  _tableSelectorButton5,
663
664
  _tableSelectorButton6,
664
665
  _this$props$isDisable,
666
+ _this$plusButtonRef,
665
667
  _this$props$pluginInj3;
666
668
  var _this$state2 = this.state,
667
669
  buttons = _this$state2.buttons,
@@ -779,7 +781,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
779
781
  spacing: this.props.isReducedSpacing ? 'none' : 'default',
780
782
  label: this.props.intl.formatMessage(messages.insertMenu),
781
783
  open: editorExperiment('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
782
- plusButtonRef: this.plusButtonRef,
784
+ plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
783
785
  items: this.state.dropdownItems,
784
786
  onRef: this.handleDropDownButtonRef,
785
787
  onPlusButtonRef: this.handlePlusButtonRef,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-insert-block",
3
- "version": "2.4.1",
3
+ "version": "2.4.2",
4
4
  "description": "Insert block plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/button": "^20.3.0",
35
- "@atlaskit/editor-common": "^94.2.0",
35
+ "@atlaskit/editor-common": "^94.3.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.10.0",
37
37
  "@atlaskit/editor-plugin-block-type": "^3.16.0",
38
38
  "@atlaskit/editor-plugin-code-block": "^3.5.0",
@@ -65,7 +65,7 @@
65
65
  "@atlaskit/platform-feature-flags": "^0.3.0",
66
66
  "@atlaskit/primitives": "^12.2.0",
67
67
  "@atlaskit/theme": "^14.0.0",
68
- "@atlaskit/tmp-editor-statsig": "^2.8.0",
68
+ "@atlaskit/tmp-editor-statsig": "^2.9.0",
69
69
  "@atlaskit/tokens": "^2.0.0",
70
70
  "@atlaskit/tooltip": "18.8.5",
71
71
  "@babel/runtime": "^7.0.0",