@atlaskit/editor-plugin-insert-block 23.0.4 → 23.0.6

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-insert-block
2
2
 
3
+ ## 23.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 23.0.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [`6a4ce5b236e6b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a4ce5b236e6b) -
14
+ [ux] Expose the emoji content identifier in shared state and pass it to toolbar emoji pickers so
15
+ Confluence comments can use AI emoji generation behind `confluence_ai_generated_emojis`.
16
+ - Updated dependencies
17
+
3
18
  ## 23.0.4
4
19
 
5
20
  ### Patch Changes
@@ -217,7 +217,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
217
217
  return plugin;
218
218
  };
219
219
  var selector = function selector(states) {
220
- var _states$mediaState, _states$mediaState2, _states$insertBlockSt, _states$typeAheadStat, _states$mentionState, _states$mentionState2, _states$dateState, _states$placeholderTe, _states$connectivityS, _states$imageUploadSt, _states$blockTypeStat, _states$hyperlinkStat, _states$hyperlinkStat2;
220
+ var _states$mediaState, _states$mediaState2, _states$insertBlockSt, _states$typeAheadStat, _states$mentionState, _states$mentionState2, _states$dateState, _states$placeholderTe, _states$connectivityS, _states$imageUploadSt, _states$blockTypeStat, _states$hyperlinkStat, _states$hyperlinkStat2, _states$emojiState;
221
221
  return {
222
222
  showMediaPicker: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.showMediaPicker,
223
223
  mediaAllowsUploads: (_states$mediaState2 = states.mediaState) === null || _states$mediaState2 === void 0 ? void 0 : _states$mediaState2.allowsUploads,
@@ -231,7 +231,8 @@ var selector = function selector(states) {
231
231
  imageUploadEnabled: (_states$imageUploadSt = states.imageUploadState) === null || _states$imageUploadSt === void 0 ? void 0 : _states$imageUploadSt.enabled,
232
232
  availableWrapperBlockTypes: (_states$blockTypeStat = states.blockTypeState) === null || _states$blockTypeStat === void 0 ? void 0 : _states$blockTypeStat.availableWrapperBlockTypes,
233
233
  canInsertLink: (_states$hyperlinkStat = states.hyperlinkState) === null || _states$hyperlinkStat === void 0 ? void 0 : _states$hyperlinkStat.canInsertLink,
234
- activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark
234
+ activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark,
235
+ emojiContentId: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.contentId
235
236
  };
236
237
  };
237
238
  function ToolbarInsertBlockWithInjectionApi(_ref4) {
@@ -263,7 +264,8 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
263
264
  imageUploadEnabled = _useSharedPluginState.imageUploadEnabled,
264
265
  availableWrapperBlockTypes = _useSharedPluginState.availableWrapperBlockTypes,
265
266
  canInsertLink = _useSharedPluginState.canInsertLink,
266
- activeLinkMark = _useSharedPluginState.activeLinkMark;
267
+ activeLinkMark = _useSharedPluginState.activeLinkMark,
268
+ emojiContentId = _useSharedPluginState.emojiContentId;
267
269
  var emojiProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'emoji.emojiProviderPromise');
268
270
  var onShowMediaPicker = function onShowMediaPicker(mountInfo) {
269
271
  var _pluginInjectionApi$m, _pluginInjectionApi$c, _pluginInjectionApi$m2;
@@ -273,6 +275,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
273
275
  pluginInjectionApi !== null && pluginInjectionApi !== void 0 && (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) !== null && _pluginInjectionApi$m !== void 0 && _pluginInjectionApi$m.commands.showMediaInsertPopup ? pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m2 = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : _pluginInjectionApi$m2.commands.showMediaInsertPopup(mountInfo)) : showMediaPicker();
274
276
  };
275
277
  return /*#__PURE__*/_react.default.createElement(_ToolbarInsertBlock.default, {
278
+ emojiContentId: emojiContentId,
276
279
  showElementBrowser: showElementBrowser || false,
277
280
  pluginInjectionApi: pluginInjectionApi,
278
281
  buttons: buttons,
@@ -601,6 +601,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
601
601
  focusTrap: true,
602
602
  zIndex: _editorSharedStyles.akEditorMenuZIndex
603
603
  }, (0, _react2.jsx)(EmojiPickerWithListeners, {
604
+ contentId: this.props.emojiContentId,
604
605
  emojiProvider: emojiProvider,
605
606
  onSelection: this.handleSelectedEmoji,
606
607
  handleClickOutside: this.handleEmojiClickOutside,
@@ -25,12 +25,14 @@ var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
25
25
  popupsBoundariesElement = _useToolbarUI.popupsBoundariesElement,
26
26
  popupsScrollableElement = _useToolbarUI.popupsScrollableElement;
27
27
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['emoji', 'typeAhead'], function (states) {
28
- var _states$emojiState, _states$typeAheadStat;
28
+ var _states$emojiState, _states$emojiState2, _states$typeAheadStat;
29
29
  return {
30
- emojiProviderPromise: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.emojiProviderPromise,
30
+ contentId: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.contentId,
31
+ emojiProviderPromise: (_states$emojiState2 = states.emojiState) === null || _states$emojiState2 === void 0 ? void 0 : _states$emojiState2.emojiProviderPromise,
31
32
  isTypeAheadAllowed: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isAllowed
32
33
  };
33
34
  }),
35
+ contentId = _useSharedPluginState.contentId,
34
36
  emojiProviderPromise = _useSharedPluginState.emojiProviderPromise,
35
37
  isTypeAheadAllowed = _useSharedPluginState.isTypeAheadAllowed;
36
38
  var emojiPickerPopup = (0, _useEmojiPickerPopup.useEmojiPickerPopup)({
@@ -41,6 +43,7 @@ var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
41
43
  return null;
42
44
  }
43
45
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.EmojiPickerPopup, {
46
+ contentId: contentId,
44
47
  isOpen: emojiPickerPopup.isOpen,
45
48
  targetRef: emojiButtonRef,
46
49
  emojiProvider: emojiProviderPromise,
@@ -67,6 +67,7 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
67
67
  buttonRef: insertButtonRef
68
68
  });
69
69
  var showMediaPicker = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.showMediaPicker');
70
+ var emojiContentId = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.contentId');
70
71
  var _useInsertButtonState = (0, _useInsertButtonState2.useInsertButtonState)({
71
72
  api: api,
72
73
  breakpoint: breakpoint,
@@ -223,6 +224,7 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
223
224
  pluginInjectionApi: api,
224
225
  isFullPageAppearance: isFullPageAppearance
225
226
  })), emojiProvider && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.EmojiPickerPopup, {
227
+ contentId: emojiContentId,
226
228
  isOpen: emojiPickerPopup.isOpen,
227
229
  targetRef: insertButtonRef,
228
230
  emojiProvider: Promise.resolve(emojiProvider),
@@ -13,6 +13,7 @@ var _picker = require("@atlaskit/emoji/picker");
13
13
  var EmojiPicker = function EmojiPicker(props) {
14
14
  var setOutsideClickTargetRef = _react.default.useContext(_uiReact.OutsideClickTargetRefContext);
15
15
  return /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
16
+ contentId: props.contentId,
16
17
  onPickerRef: setOutsideClickTargetRef,
17
18
  emojiProvider: props.emojiProvider,
18
19
  onSelection: props.onSelection
@@ -20,7 +21,8 @@ var EmojiPicker = function EmojiPicker(props) {
20
21
  };
21
22
  var EmojiPickerWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(EmojiPicker);
22
23
  var EmojiPickerPopup = exports.EmojiPickerPopup = function EmojiPickerPopup(_ref) {
23
- var isOpen = _ref.isOpen,
24
+ var contentId = _ref.contentId,
25
+ isOpen = _ref.isOpen,
24
26
  targetRef = _ref.targetRef,
25
27
  emojiProvider = _ref.emojiProvider,
26
28
  onSelection = _ref.onSelection,
@@ -47,6 +49,7 @@ var EmojiPickerPopup = exports.EmojiPickerPopup = function EmojiPickerPopup(_ref
47
49
  focusTrap: true,
48
50
  zIndex: _editorSharedStyles.akEditorMenuZIndex
49
51
  }, /*#__PURE__*/_react.default.createElement(EmojiPickerWithListeners, {
52
+ contentId: contentId,
50
53
  emojiProvider: emojiProvider,
51
54
  onSelection: onSelection,
52
55
  handleClickOutside: onClickOutside,
@@ -199,7 +199,7 @@ export const insertBlockPlugin = ({
199
199
  return plugin;
200
200
  };
201
201
  const selector = states => {
202
- var _states$mediaState, _states$mediaState2, _states$insertBlockSt, _states$typeAheadStat, _states$mentionState, _states$mentionState2, _states$dateState, _states$placeholderTe, _states$connectivityS, _states$imageUploadSt, _states$blockTypeStat, _states$hyperlinkStat, _states$hyperlinkStat2;
202
+ var _states$mediaState, _states$mediaState2, _states$insertBlockSt, _states$typeAheadStat, _states$mentionState, _states$mentionState2, _states$dateState, _states$placeholderTe, _states$connectivityS, _states$imageUploadSt, _states$blockTypeStat, _states$hyperlinkStat, _states$hyperlinkStat2, _states$emojiState;
203
203
  return {
204
204
  showMediaPicker: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.showMediaPicker,
205
205
  mediaAllowsUploads: (_states$mediaState2 = states.mediaState) === null || _states$mediaState2 === void 0 ? void 0 : _states$mediaState2.allowsUploads,
@@ -213,7 +213,8 @@ const selector = states => {
213
213
  imageUploadEnabled: (_states$imageUploadSt = states.imageUploadState) === null || _states$imageUploadSt === void 0 ? void 0 : _states$imageUploadSt.enabled,
214
214
  availableWrapperBlockTypes: (_states$blockTypeStat = states.blockTypeState) === null || _states$blockTypeStat === void 0 ? void 0 : _states$blockTypeStat.availableWrapperBlockTypes,
215
215
  canInsertLink: (_states$hyperlinkStat = states.hyperlinkState) === null || _states$hyperlinkStat === void 0 ? void 0 : _states$hyperlinkStat.canInsertLink,
216
- activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark
216
+ activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark,
217
+ emojiContentId: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.contentId
217
218
  };
218
219
  };
219
220
  function ToolbarInsertBlockWithInjectionApi({
@@ -246,7 +247,8 @@ function ToolbarInsertBlockWithInjectionApi({
246
247
  imageUploadEnabled,
247
248
  availableWrapperBlockTypes,
248
249
  canInsertLink,
249
- activeLinkMark
250
+ activeLinkMark,
251
+ emojiContentId
250
252
  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity'], selector);
251
253
  const emojiProvider = useSharedPluginStateSelector(pluginInjectionApi, 'emoji.emojiProviderPromise');
252
254
  const onShowMediaPicker = mountInfo => {
@@ -257,6 +259,7 @@ function ToolbarInsertBlockWithInjectionApi({
257
259
  pluginInjectionApi !== null && pluginInjectionApi !== void 0 && (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) !== null && _pluginInjectionApi$m !== void 0 && _pluginInjectionApi$m.commands.showMediaInsertPopup ? pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m2 = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : _pluginInjectionApi$m2.commands.showMediaInsertPopup(mountInfo)) : showMediaPicker();
258
260
  };
259
261
  return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
262
+ emojiContentId: emojiContentId,
260
263
  showElementBrowser: showElementBrowser || false,
261
264
  pluginInjectionApi: pluginInjectionApi,
262
265
  buttons: buttons,
@@ -670,6 +670,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
670
670
  focusTrap: true,
671
671
  zIndex: akEditorMenuZIndex
672
672
  }, jsx(EmojiPickerWithListeners, {
673
+ contentId: this.props.emojiContentId,
673
674
  emojiProvider: emojiProvider,
674
675
  onSelection: this.handleSelectedEmoji,
675
676
  handleClickOutside: this.handleEmojiClickOutside,
@@ -20,12 +20,14 @@ export const EmojiButton = ({
20
20
  popupsScrollableElement
21
21
  } = useToolbarUI();
22
22
  const {
23
+ contentId,
23
24
  emojiProviderPromise,
24
25
  isTypeAheadAllowed
25
26
  } = useSharedPluginStateWithSelector(api, ['emoji', 'typeAhead'], states => {
26
- var _states$emojiState, _states$typeAheadStat;
27
+ var _states$emojiState, _states$emojiState2, _states$typeAheadStat;
27
28
  return {
28
- emojiProviderPromise: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.emojiProviderPromise,
29
+ contentId: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.contentId,
30
+ emojiProviderPromise: (_states$emojiState2 = states.emojiState) === null || _states$emojiState2 === void 0 ? void 0 : _states$emojiState2.emojiProviderPromise,
29
31
  isTypeAheadAllowed: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isAllowed
30
32
  };
31
33
  });
@@ -37,6 +39,7 @@ export const EmojiButton = ({
37
39
  return null;
38
40
  }
39
41
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerPopup, {
42
+ contentId: contentId,
40
43
  isOpen: emojiPickerPopup.isOpen,
41
44
  targetRef: emojiButtonRef,
42
45
  emojiProvider: emojiProviderPromise,
@@ -57,6 +57,7 @@ export const InsertButton = ({
57
57
  buttonRef: insertButtonRef
58
58
  });
59
59
  const showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
60
+ const emojiContentId = useSharedPluginStateSelector(api, 'emoji.contentId');
60
61
  const {
61
62
  dropdownItems,
62
63
  emojiProvider,
@@ -216,6 +217,7 @@ export const InsertButton = ({
216
217
  pluginInjectionApi: api,
217
218
  isFullPageAppearance: isFullPageAppearance
218
219
  })), emojiProvider && /*#__PURE__*/React.createElement(EmojiPickerPopup, {
220
+ contentId: emojiContentId,
219
221
  isOpen: emojiPickerPopup.isOpen,
220
222
  targetRef: insertButtonRef,
221
223
  emojiProvider: Promise.resolve(emojiProvider),
@@ -6,6 +6,7 @@ import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
6
6
  const EmojiPicker = props => {
7
7
  const setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
8
8
  return /*#__PURE__*/React.createElement(AkEmojiPicker, {
9
+ contentId: props.contentId,
9
10
  onPickerRef: setOutsideClickTargetRef,
10
11
  emojiProvider: props.emojiProvider,
11
12
  onSelection: props.onSelection
@@ -13,6 +14,7 @@ const EmojiPicker = props => {
13
14
  };
14
15
  const EmojiPickerWithListeners = withOuterListeners(EmojiPicker);
15
16
  export const EmojiPickerPopup = ({
17
+ contentId,
16
18
  isOpen,
17
19
  targetRef,
18
20
  emojiProvider,
@@ -41,6 +43,7 @@ export const EmojiPickerPopup = ({
41
43
  focusTrap: true,
42
44
  zIndex: akEditorMenuZIndex
43
45
  }, /*#__PURE__*/React.createElement(EmojiPickerWithListeners, {
46
+ contentId: contentId,
44
47
  emojiProvider: emojiProvider,
45
48
  onSelection: onSelection,
46
49
  handleClickOutside: onClickOutside,
@@ -207,7 +207,7 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
207
207
  return plugin;
208
208
  };
209
209
  var selector = function selector(states) {
210
- var _states$mediaState, _states$mediaState2, _states$insertBlockSt, _states$typeAheadStat, _states$mentionState, _states$mentionState2, _states$dateState, _states$placeholderTe, _states$connectivityS, _states$imageUploadSt, _states$blockTypeStat, _states$hyperlinkStat, _states$hyperlinkStat2;
210
+ var _states$mediaState, _states$mediaState2, _states$insertBlockSt, _states$typeAheadStat, _states$mentionState, _states$mentionState2, _states$dateState, _states$placeholderTe, _states$connectivityS, _states$imageUploadSt, _states$blockTypeStat, _states$hyperlinkStat, _states$hyperlinkStat2, _states$emojiState;
211
211
  return {
212
212
  showMediaPicker: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.showMediaPicker,
213
213
  mediaAllowsUploads: (_states$mediaState2 = states.mediaState) === null || _states$mediaState2 === void 0 ? void 0 : _states$mediaState2.allowsUploads,
@@ -221,7 +221,8 @@ var selector = function selector(states) {
221
221
  imageUploadEnabled: (_states$imageUploadSt = states.imageUploadState) === null || _states$imageUploadSt === void 0 ? void 0 : _states$imageUploadSt.enabled,
222
222
  availableWrapperBlockTypes: (_states$blockTypeStat = states.blockTypeState) === null || _states$blockTypeStat === void 0 ? void 0 : _states$blockTypeStat.availableWrapperBlockTypes,
223
223
  canInsertLink: (_states$hyperlinkStat = states.hyperlinkState) === null || _states$hyperlinkStat === void 0 ? void 0 : _states$hyperlinkStat.canInsertLink,
224
- activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark
224
+ activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark,
225
+ emojiContentId: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.contentId
225
226
  };
226
227
  };
227
228
  function ToolbarInsertBlockWithInjectionApi(_ref4) {
@@ -253,7 +254,8 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
253
254
  imageUploadEnabled = _useSharedPluginState.imageUploadEnabled,
254
255
  availableWrapperBlockTypes = _useSharedPluginState.availableWrapperBlockTypes,
255
256
  canInsertLink = _useSharedPluginState.canInsertLink,
256
- activeLinkMark = _useSharedPluginState.activeLinkMark;
257
+ activeLinkMark = _useSharedPluginState.activeLinkMark,
258
+ emojiContentId = _useSharedPluginState.emojiContentId;
257
259
  var emojiProvider = useSharedPluginStateSelector(pluginInjectionApi, 'emoji.emojiProviderPromise');
258
260
  var onShowMediaPicker = function onShowMediaPicker(mountInfo) {
259
261
  var _pluginInjectionApi$m, _pluginInjectionApi$c, _pluginInjectionApi$m2;
@@ -263,6 +265,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
263
265
  pluginInjectionApi !== null && pluginInjectionApi !== void 0 && (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) !== null && _pluginInjectionApi$m !== void 0 && _pluginInjectionApi$m.commands.showMediaInsertPopup ? pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m2 = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : _pluginInjectionApi$m2.commands.showMediaInsertPopup(mountInfo)) : showMediaPicker();
264
266
  };
265
267
  return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
268
+ emojiContentId: emojiContentId,
266
269
  showElementBrowser: showElementBrowser || false,
267
270
  pluginInjectionApi: pluginInjectionApi,
268
271
  buttons: buttons,
@@ -596,6 +596,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
596
596
  focusTrap: true,
597
597
  zIndex: akEditorMenuZIndex
598
598
  }, jsx(EmojiPickerWithListeners, {
599
+ contentId: this.props.emojiContentId,
599
600
  emojiProvider: emojiProvider,
600
601
  onSelection: this.handleSelectedEmoji,
601
602
  handleClickOutside: this.handleEmojiClickOutside,
@@ -17,12 +17,14 @@ export var EmojiButton = function EmojiButton(_ref) {
17
17
  popupsBoundariesElement = _useToolbarUI.popupsBoundariesElement,
18
18
  popupsScrollableElement = _useToolbarUI.popupsScrollableElement;
19
19
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['emoji', 'typeAhead'], function (states) {
20
- var _states$emojiState, _states$typeAheadStat;
20
+ var _states$emojiState, _states$emojiState2, _states$typeAheadStat;
21
21
  return {
22
- emojiProviderPromise: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.emojiProviderPromise,
22
+ contentId: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.contentId,
23
+ emojiProviderPromise: (_states$emojiState2 = states.emojiState) === null || _states$emojiState2 === void 0 ? void 0 : _states$emojiState2.emojiProviderPromise,
23
24
  isTypeAheadAllowed: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isAllowed
24
25
  };
25
26
  }),
27
+ contentId = _useSharedPluginState.contentId,
26
28
  emojiProviderPromise = _useSharedPluginState.emojiProviderPromise,
27
29
  isTypeAheadAllowed = _useSharedPluginState.isTypeAheadAllowed;
28
30
  var emojiPickerPopup = useEmojiPickerPopup({
@@ -33,6 +35,7 @@ export var EmojiButton = function EmojiButton(_ref) {
33
35
  return null;
34
36
  }
35
37
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerPopup, {
38
+ contentId: contentId,
36
39
  isOpen: emojiPickerPopup.isOpen,
37
40
  targetRef: emojiButtonRef,
38
41
  emojiProvider: emojiProviderPromise,
@@ -59,6 +59,7 @@ export var InsertButton = function InsertButton(_ref) {
59
59
  buttonRef: insertButtonRef
60
60
  });
61
61
  var showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
62
+ var emojiContentId = useSharedPluginStateSelector(api, 'emoji.contentId');
62
63
  var _useInsertButtonState = useInsertButtonState({
63
64
  api: api,
64
65
  breakpoint: breakpoint,
@@ -215,6 +216,7 @@ export var InsertButton = function InsertButton(_ref) {
215
216
  pluginInjectionApi: api,
216
217
  isFullPageAppearance: isFullPageAppearance
217
218
  })), emojiProvider && /*#__PURE__*/React.createElement(EmojiPickerPopup, {
219
+ contentId: emojiContentId,
218
220
  isOpen: emojiPickerPopup.isOpen,
219
221
  targetRef: insertButtonRef,
220
222
  emojiProvider: Promise.resolve(emojiProvider),
@@ -6,6 +6,7 @@ import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
6
6
  var EmojiPicker = function EmojiPicker(props) {
7
7
  var setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
8
8
  return /*#__PURE__*/React.createElement(AkEmojiPicker, {
9
+ contentId: props.contentId,
9
10
  onPickerRef: setOutsideClickTargetRef,
10
11
  emojiProvider: props.emojiProvider,
11
12
  onSelection: props.onSelection
@@ -13,7 +14,8 @@ var EmojiPicker = function EmojiPicker(props) {
13
14
  };
14
15
  var EmojiPickerWithListeners = withOuterListeners(EmojiPicker);
15
16
  export var EmojiPickerPopup = function EmojiPickerPopup(_ref) {
16
- var isOpen = _ref.isOpen,
17
+ var contentId = _ref.contentId,
18
+ isOpen = _ref.isOpen,
17
19
  targetRef = _ref.targetRef,
18
20
  emojiProvider = _ref.emojiProvider,
19
21
  onSelection = _ref.onSelection,
@@ -40,6 +42,7 @@ export var EmojiPickerPopup = function EmojiPickerPopup(_ref) {
40
42
  focusTrap: true,
41
43
  zIndex: akEditorMenuZIndex
42
44
  }, /*#__PURE__*/React.createElement(EmojiPickerWithListeners, {
45
+ contentId: contentId,
43
46
  emojiProvider: emojiProvider,
44
47
  onSelection: onSelection,
45
48
  handleClickOutside: onClickOutside,
@@ -95,7 +95,8 @@ export interface InsertBlockPluginOptions {
95
95
  * Configure which toolbar buttons should be visible
96
96
  * @default undefined - shows all available buttons (current behaviour)
97
97
  *
98
- * Only applies when platform_editor_toolbar_aifc is enabled
98
+ * Only respected when the editor configuration includes `toolbarPlugin` from
99
+ * `@atlaskit/editor-plugin-toolbar`.
99
100
  */
100
101
  toolbarButtons?: ToolbarInsertBlockButtonsConfig;
101
102
  /**
@@ -103,7 +104,8 @@ export interface InsertBlockPluginOptions {
103
104
  * and only show the plus button
104
105
  * @default undefined Shows the insert block buttons and the plus button
105
106
  *
106
- * Only applies when platform_editor_toolbar_aifc is enabled
107
+ * Only respected when the editor configuration includes `toolbarPlugin` from
108
+ * `@atlaskit/editor-plugin-toolbar`.
107
109
  *
108
110
  * @warning Use {@link toolbarButtons} instead to configure the insert block toolbar buttons
109
111
  * @see https://product-fabric.atlassian.net/browse/ED-29426
@@ -18,6 +18,7 @@ export interface Props {
18
18
  editorActions?: EditorActions;
19
19
  editorAppearance?: EditorAppearance;
20
20
  editorView: EditorView;
21
+ emojiContentId?: string;
21
22
  emojiDisabled?: boolean;
22
23
  emojiProvider?: Promise<EmojiProvider>;
23
24
  expandEnabled?: boolean;
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import type { EmojiId, EmojiProvider } from '@atlaskit/emoji/types';
3
3
  interface EmojiPickerPopupProps {
4
+ contentId?: string;
4
5
  emojiProvider?: Promise<EmojiProvider>;
5
6
  isOpen: boolean;
6
7
  onClickOutside: (e: MouseEvent) => void;
@@ -12,5 +13,5 @@ interface EmojiPickerPopupProps {
12
13
  popupsScrollableElement?: HTMLElement;
13
14
  targetRef: React.RefObject<HTMLElement>;
14
15
  }
15
- export declare const EmojiPickerPopup: ({ isOpen, targetRef, emojiProvider, onSelection, onClickOutside, onEscapeKeydown, onUnmount, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: EmojiPickerPopupProps) => React.JSX.Element | null;
16
+ export declare const EmojiPickerPopup: ({ contentId, isOpen, targetRef, emojiProvider, onSelection, onClickOutside, onEscapeKeydown, onUnmount, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: EmojiPickerPopupProps) => React.JSX.Element | null;
16
17
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-insert-block",
3
- "version": "23.0.4",
3
+ "version": "23.0.6",
4
4
  "description": "Insert block plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -28,7 +28,7 @@
28
28
  "@atlaskit/editor-plugin-code-block": "^24.0.0",
29
29
  "@atlaskit/editor-plugin-connectivity": "^22.0.0",
30
30
  "@atlaskit/editor-plugin-date": "^24.0.0",
31
- "@atlaskit/editor-plugin-emoji": "^23.0.0",
31
+ "@atlaskit/editor-plugin-emoji": "^23.1.0",
32
32
  "@atlaskit/editor-plugin-expand": "^23.0.0",
33
33
  "@atlaskit/editor-plugin-extension": "^25.0.0",
34
34
  "@atlaskit/editor-plugin-feature-flags": "^21.0.0",
@@ -62,7 +62,7 @@
62
62
  "@atlaskit/platform-feature-flags": "^2.2.0",
63
63
  "@atlaskit/primitives": "^22.5.0",
64
64
  "@atlaskit/textfield": "^10.2.0",
65
- "@atlaskit/tmp-editor-statsig": "^213.0.0",
65
+ "@atlaskit/tmp-editor-statsig": "^215.0.0",
66
66
  "@atlaskit/tokens": "^20.1.0",
67
67
  "@babel/runtime": "^7.0.0",
68
68
  "@emotion/react": "^11.7.1",
@@ -72,7 +72,7 @@
72
72
  "react-virtualized": "^9.22.6"
73
73
  },
74
74
  "peerDependencies": {
75
- "@atlaskit/editor-common": "^126.2.0",
75
+ "@atlaskit/editor-common": "^126.3.0",
76
76
  "react": "^18.2.0 || ^19.2.0",
77
77
  "react-dom": "^18.2.0 || ^19.2.0",
78
78
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"