@atlaskit/editor-plugin-insert-block 3.2.5 → 3.2.7

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
+ ## 3.2.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [#152768](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152768)
8
+ [`2e80bc703b181`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2e80bc703b181) -
9
+ [ED-27555] Migrate to useSharedPluginStateSelector for insert-block, layout, loom plugins
10
+ - Updated dependencies
11
+
12
+ ## 3.2.6
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 3.2.5
4
19
 
5
20
  ### Patch Changes
@@ -12,6 +12,7 @@ var _elementBrowser = require("@atlaskit/editor-common/element-browser");
12
12
  var _hooks = require("@atlaskit/editor-common/hooks");
13
13
  var _providerFactory = require("@atlaskit/editor-common/provider-factory");
14
14
  var _types = require("@atlaskit/editor-common/types");
15
+ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
15
16
  var _consts = require("@atlaskit/editor-plugin-block-type/consts");
16
17
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
18
  var _toggleInsertBlock = require("./pm-plugins/toggleInsertBlock");
@@ -196,8 +197,69 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
196
197
  };
197
198
  return plugin;
198
199
  };
200
+ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
201
+ var emojiProviderSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.emojiProvider');
202
+ var showMediaPicker = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.showMediaPicker');
203
+ var mediaAllowsUploads = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowsUploads');
204
+ var showElementBrowser = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'insertBlock.showElementBrowser');
205
+ var isTypeAheadAllowed = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isAllowed');
206
+ var mentionProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'mention.mentionProvider');
207
+ var canInsertMention = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'mention.canInsertMention');
208
+ var dateEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'date.isInitialised');
209
+ var placeholderTextAllowInserting = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'placeholderText.allowInserting');
210
+ var connectivityMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
211
+ var imageUploadEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'imageUpload.enabled');
212
+ var availableWrapperBlockTypes = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.availableWrapperBlockTypes');
213
+ var canInsertLink = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'hyperlink.canInsertLink');
214
+ var activeLinkMark = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'hyperlink.activeLinkMark');
215
+ return {
216
+ emojiProviderSelector: emojiProviderSelector,
217
+ showMediaPicker: showMediaPicker,
218
+ mediaAllowsUploads: mediaAllowsUploads,
219
+ showElementBrowser: showElementBrowser,
220
+ isTypeAheadAllowed: isTypeAheadAllowed,
221
+ mentionProvider: mentionProvider,
222
+ canInsertMention: canInsertMention,
223
+ dateEnabled: dateEnabled,
224
+ placeholderTextAllowInserting: placeholderTextAllowInserting,
225
+ connectivityMode: connectivityMode,
226
+ imageUploadEnabled: imageUploadEnabled,
227
+ availableWrapperBlockTypes: availableWrapperBlockTypes,
228
+ canInsertLink: canInsertLink,
229
+ activeLinkMark: activeLinkMark
230
+ };
231
+ }, function (api) {
232
+ var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']),
233
+ dateState = _useSharedPluginState.dateState,
234
+ hyperlinkState = _useSharedPluginState.hyperlinkState,
235
+ imageUploadState = _useSharedPluginState.imageUploadState,
236
+ mentionState = _useSharedPluginState.mentionState,
237
+ emojiState = _useSharedPluginState.emojiState,
238
+ blockTypeState = _useSharedPluginState.blockTypeState,
239
+ mediaState = _useSharedPluginState.mediaState,
240
+ typeAheadState = _useSharedPluginState.typeAheadState,
241
+ placeholderTextState = _useSharedPluginState.placeholderTextState,
242
+ insertBlockState = _useSharedPluginState.insertBlockState,
243
+ connectivityState = _useSharedPluginState.connectivityState;
244
+ return {
245
+ emojiProviderSelector: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
246
+ showMediaPicker: mediaState === null || mediaState === void 0 ? void 0 : mediaState.showMediaPicker,
247
+ mediaAllowsUploads: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads,
248
+ showElementBrowser: insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser,
249
+ isTypeAheadAllowed: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed,
250
+ mentionProvider: mentionState === null || mentionState === void 0 ? void 0 : mentionState.mentionProvider,
251
+ canInsertMention: mentionState === null || mentionState === void 0 ? void 0 : mentionState.canInsertMention,
252
+ dateEnabled: dateState === null || dateState === void 0 ? void 0 : dateState.isInitialised,
253
+ placeholderTextAllowInserting: placeholderTextState === null || placeholderTextState === void 0 ? void 0 : placeholderTextState.allowInserting,
254
+ connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode,
255
+ imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
256
+ availableWrapperBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableWrapperBlockTypes,
257
+ canInsertLink: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.canInsertLink,
258
+ activeLinkMark: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.activeLinkMark
259
+ };
260
+ });
199
261
  function ToolbarInsertBlockWithInjectionApi(_ref4) {
200
- var _ref5, _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
262
+ var _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
201
263
  var editorView = _ref4.editorView,
202
264
  editorActions = _ref4.editorActions,
203
265
  dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent,
@@ -213,64 +275,67 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
213
275
  options = _ref4.options,
214
276
  appearance = _ref4.appearance;
215
277
  var buttons = toolbarSizeToButtons(toolbarSize, appearance);
216
- var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']),
217
- dateState = _useSharedPluginState.dateState,
218
- hyperlinkState = _useSharedPluginState.hyperlinkState,
219
- imageUploadState = _useSharedPluginState.imageUploadState,
220
- mentionState = _useSharedPluginState.mentionState,
221
- emojiState = _useSharedPluginState.emojiState,
222
- blockTypeState = _useSharedPluginState.blockTypeState,
223
- mediaState = _useSharedPluginState.mediaState,
224
- typeAheadState = _useSharedPluginState.typeAheadState,
225
- placeholderTextState = _useSharedPluginState.placeholderTextState,
226
- insertBlockState = _useSharedPluginState.insertBlockState,
227
- connectivityState = _useSharedPluginState.connectivityState;
278
+ var _useSharedState = useSharedState(pluginInjectionApi),
279
+ emojiProviderSelector = _useSharedState.emojiProviderSelector,
280
+ showMediaPicker = _useSharedState.showMediaPicker,
281
+ mediaAllowsUploads = _useSharedState.mediaAllowsUploads,
282
+ showElementBrowser = _useSharedState.showElementBrowser,
283
+ isTypeAheadAllowed = _useSharedState.isTypeAheadAllowed,
284
+ mentionProvider = _useSharedState.mentionProvider,
285
+ canInsertMention = _useSharedState.canInsertMention,
286
+ dateEnabled = _useSharedState.dateEnabled,
287
+ placeholderTextAllowInserting = _useSharedState.placeholderTextAllowInserting,
288
+ connectivityMode = _useSharedState.connectivityMode,
289
+ imageUploadEnabled = _useSharedState.imageUploadEnabled,
290
+ availableWrapperBlockTypes = _useSharedState.availableWrapperBlockTypes,
291
+ canInsertLink = _useSharedState.canInsertLink,
292
+ activeLinkMark = _useSharedState.activeLinkMark;
228
293
  var getEmojiProvider = function getEmojiProvider() {
229
- if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
230
- return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
294
+ if (emojiProviderSelector) {
295
+ return Promise.resolve(emojiProviderSelector);
231
296
  }
232
297
  };
233
298
  var emojiProvider = getEmojiProvider();
234
299
  var onShowMediaPicker = function onShowMediaPicker(mountInfo) {
235
- if (!mediaState) {
300
+ if (!showMediaPicker) {
236
301
  return;
237
302
  }
238
303
  if ((0, _platformFeatureFlags.fg)('platform_editor_add_media_from_url_rollout')) {
239
304
  var _pluginInjectionApi$c, _pluginInjectionApi$m;
240
305
  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup(mountInfo));
241
306
  } else {
242
- mediaState.showMediaPicker();
307
+ showMediaPicker();
243
308
  }
244
309
  };
245
310
  return /*#__PURE__*/_react.default.createElement(_ToolbarInsertBlock.default, {
246
- showElementBrowser: (insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser) || false,
311
+ showElementBrowser: showElementBrowser || false,
247
312
  pluginInjectionApi: pluginInjectionApi,
248
313
  buttons: buttons,
249
314
  isReducedSpacing: isToolbarReducedSpacing,
250
315
  isDisabled: disabled,
251
- isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
316
+ isTypeAheadAllowed: Boolean(isTypeAheadAllowed),
252
317
  editorView: editorView,
253
318
  tableSupported: !!editorView.state.schema.nodes.table,
254
319
  tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
255
320
  actionSupported: !!editorView.state.schema.nodes.taskItem,
256
- mentionsSupported: !!(mentionState && mentionState.mentionProvider),
257
- mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
321
+ mentionsSupported: !!mentionProvider,
322
+ mentionsDisabled: !canInsertMention,
258
323
  decisionSupported: !!editorView.state.schema.nodes.decisionItem,
259
- dateEnabled: !!dateState,
260
- placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
324
+ dateEnabled: !!dateEnabled,
325
+ placeholderTextEnabled: !!placeholderTextAllowInserting,
261
326
  layoutSectionEnabled: Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.layout),
262
327
  expandEnabled: !!options.allowExpand,
263
- mediaUploadsEnabled: (_ref5 = mediaState && mediaState.allowsUploads) !== null && _ref5 !== void 0 ? _ref5 : undefined,
328
+ mediaUploadsEnabled: mediaAllowsUploads !== null && mediaAllowsUploads !== void 0 ? mediaAllowsUploads : undefined,
264
329
  onShowMediaPicker: onShowMediaPicker,
265
- mediaSupported: !!mediaState,
266
- isEditorOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline',
330
+ mediaSupported: mediaAllowsUploads !== undefined,
331
+ isEditorOffline: connectivityMode === 'offline',
267
332
  imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.imageUpload),
268
- imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
333
+ imageUploadEnabled: imageUploadEnabled,
269
334
  handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$i = pluginInjectionApi.imageUpload) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.actions.startUpload,
270
- availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
271
- linkSupported: !!hyperlinkState,
272
- linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
273
- emojiDisabled: !emojiState || !emojiProvider,
335
+ availableWrapperBlockTypes: availableWrapperBlockTypes,
336
+ linkSupported: canInsertLink !== undefined,
337
+ linkDisabled: !canInsertLink || !!activeLinkMark,
338
+ emojiDisabled: !emojiProvider,
274
339
  emojiProvider: emojiProvider,
275
340
  nativeStatusSupported: options.nativeStatusSupported,
276
341
  horizontalRuleEnabled: options.horizontalRuleEnabled,
@@ -18,6 +18,7 @@ var _elementBrowser = require("@atlaskit/editor-common/element-browser");
18
18
  var _hooks = require("@atlaskit/editor-common/hooks");
19
19
  var _quickInsert = require("@atlaskit/editor-common/quick-insert");
20
20
  var _uiReact = require("@atlaskit/editor-common/ui-react");
21
+ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
21
22
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
22
23
  var _theme = require("@atlaskit/theme");
23
24
  var _colors = require("@atlaskit/theme/colors");
@@ -28,6 +29,18 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
28
29
  * @jsx jsx
29
30
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
30
31
  var DEFAULT_HEIGHT = exports.DEFAULT_HEIGHT = 560;
32
+ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
33
+ var connectivityMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
34
+ return {
35
+ connectivityMode: connectivityMode
36
+ };
37
+ }, function (api) {
38
+ var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['connectivity']),
39
+ connectivityState = _useSharedPluginState.connectivityState;
40
+ return {
41
+ connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode
42
+ };
43
+ });
31
44
  var InsertMenu = function InsertMenu(_ref) {
32
45
  var _pluginInjectionApi$q6, _pluginInjectionApi$q7;
33
46
  var editorView = _ref.editorView,
@@ -102,8 +115,8 @@ var InsertMenu = function InsertMenu(_ref) {
102
115
  }
103
116
  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item, _analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
104
117
  }, [editorView, toggleVisiblity, pluginInjectionApi]);
105
- var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['connectivity']),
106
- connectivityState = _useSharedPluginState.connectivityState;
118
+ var _useSharedState = useSharedState(pluginInjectionApi),
119
+ connectivityMode = _useSharedState.connectivityMode;
107
120
  var getItems = (0, _react.useCallback)(function (query, category) {
108
121
  var result;
109
122
  /**
@@ -118,7 +131,7 @@ var InsertMenu = function InsertMenu(_ref) {
118
131
  query: query,
119
132
  category: category
120
133
  })) === null || _pluginInjectionApi$q3 === void 0 ? void 0 : _pluginInjectionApi$q3.map(function (item) {
121
- return (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline' && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
134
+ return connectivityMode === 'offline' && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
122
135
  isDisabled: true
123
136
  }) : item;
124
137
  })) !== null && _pluginInjectionApi$q2 !== void 0 ? _pluginInjectionApi$q2 : [];
@@ -128,7 +141,7 @@ var InsertMenu = function InsertMenu(_ref) {
128
141
  category: category,
129
142
  featuredItems: true
130
143
  })) === null || _pluginInjectionApi$q5 === void 0 ? void 0 : _pluginInjectionApi$q5.map(function (item) {
131
- return (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline' && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
144
+ return connectivityMode === 'offline' && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
132
145
  isDisabled: true
133
146
  }) : item;
134
147
  })) !== null && _pluginInjectionApi$q4 !== void 0 ? _pluginInjectionApi$q4 : [];
@@ -136,7 +149,7 @@ var InsertMenu = function InsertMenu(_ref) {
136
149
  }
137
150
  setItemCount(result.length);
138
151
  return result;
139
- }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions, quickInsertDropdownItems, connectivityState]);
152
+ }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions, quickInsertDropdownItems, connectivityMode]);
140
153
  var emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 || (_pluginInjectionApi$q7 = _pluginInjectionApi$q7.sharedState.currentState()) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.emptyStateHandler;
141
154
  var onViewMore = (0, _react.useCallback)(function () {
142
155
  var _pluginInjectionApi$c, _pluginInjectionApi$q8;
@@ -9,10 +9,34 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
9
9
  var _react = require("react");
10
10
  var _reactIntlNext = require("react-intl-next");
11
11
  var _hooks = require("@atlaskit/editor-common/hooks");
12
+ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
12
13
  var _createItems = require("../ToolbarInsertBlock/create-items");
13
- var useInsertMenuRailItems = exports.useInsertMenuRailItems = function useInsertMenuRailItems(editorView, options, api) {
14
- var _useIntl = (0, _reactIntlNext.useIntl)(),
15
- formatMessage = _useIntl.formatMessage;
14
+ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
15
+ var dateEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'date.isInitialised');
16
+ var canInsertLink = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'hyperlink.canInsertLink');
17
+ var activeLinkMark = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'hyperlink.activeLinkMark');
18
+ var isTypeAheadAllowed = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isAllowed');
19
+ var availableWrapperBlockTypes = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.availableWrapperBlockTypes');
20
+ var imageUploadEnabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'imageUpload.enabled');
21
+ var placeholderTextAllowInserting = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'placeholderText.allowInserting');
22
+ var emojiProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.emojiProvider');
23
+ var mentionProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'mention.mentionProvider');
24
+ var canInsertMention = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'mention.canInsertMention');
25
+ var mediaAllowsUploads = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.allowsUploads');
26
+ return {
27
+ dateEnabled: dateEnabled,
28
+ canInsertLink: canInsertLink,
29
+ activeLinkMark: activeLinkMark,
30
+ isTypeAheadAllowed: isTypeAheadAllowed,
31
+ availableWrapperBlockTypes: availableWrapperBlockTypes,
32
+ imageUploadEnabled: imageUploadEnabled,
33
+ placeholderTextAllowInserting: placeholderTextAllowInserting,
34
+ emojiProvider: emojiProvider,
35
+ mentionProvider: mentionProvider,
36
+ canInsertMention: canInsertMention,
37
+ mediaAllowsUploads: mediaAllowsUploads
38
+ };
39
+ }, function (api) {
16
40
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']),
17
41
  dateState = _useSharedPluginState.dateState,
18
42
  hyperlinkState = _useSharedPluginState.hyperlinkState,
@@ -23,32 +47,60 @@ var useInsertMenuRailItems = exports.useInsertMenuRailItems = function useInsert
23
47
  mediaState = _useSharedPluginState.mediaState,
24
48
  typeAheadState = _useSharedPluginState.typeAheadState,
25
49
  placeholderTextState = _useSharedPluginState.placeholderTextState;
50
+ return {
51
+ dateEnabled: dateState === null || dateState === void 0 ? void 0 : dateState.isInitialised,
52
+ canInsertLink: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.canInsertLink,
53
+ activeLinkMark: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.activeLinkMark,
54
+ isTypeAheadAllowed: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed,
55
+ availableWrapperBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableWrapperBlockTypes,
56
+ imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
57
+ placeholderTextAllowInserting: placeholderTextState === null || placeholderTextState === void 0 ? void 0 : placeholderTextState.allowInserting,
58
+ emojiProvider: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
59
+ mentionProvider: mentionState === null || mentionState === void 0 ? void 0 : mentionState.mentionProvider,
60
+ canInsertMention: mentionState === null || mentionState === void 0 ? void 0 : mentionState.canInsertMention,
61
+ mediaAllowsUploads: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads
62
+ };
63
+ });
64
+ var useInsertMenuRailItems = exports.useInsertMenuRailItems = function useInsertMenuRailItems(editorView, options, api) {
65
+ var _useIntl = (0, _reactIntlNext.useIntl)(),
66
+ formatMessage = _useIntl.formatMessage;
67
+ var _useSharedState = useSharedState(api),
68
+ dateEnabled = _useSharedState.dateEnabled,
69
+ canInsertLink = _useSharedState.canInsertLink,
70
+ activeLinkMark = _useSharedState.activeLinkMark,
71
+ isTypeAheadAllowed = _useSharedState.isTypeAheadAllowed,
72
+ availableWrapperBlockTypes = _useSharedState.availableWrapperBlockTypes,
73
+ imageUploadEnabled = _useSharedState.imageUploadEnabled,
74
+ placeholderTextAllowInserting = _useSharedState.placeholderTextAllowInserting,
75
+ emojiProvider = _useSharedState.emojiProvider,
76
+ mentionProvider = _useSharedState.mentionProvider,
77
+ canInsertMention = _useSharedState.canInsertMention,
78
+ mediaAllowsUploads = _useSharedState.mediaAllowsUploads;
26
79
  var _useMemo = (0, _react.useMemo)(function () {
27
- var _ref;
28
80
  return (0, _createItems.createItems)({
29
- isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
81
+ isTypeAheadAllowed: Boolean(isTypeAheadAllowed),
30
82
  tableSupported: !!editorView.state.schema.nodes.table,
31
83
  tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
32
- mediaUploadsEnabled: (_ref = mediaState && mediaState.allowsUploads) !== null && _ref !== void 0 ? _ref : undefined,
33
- mediaSupported: !!mediaState,
84
+ mediaUploadsEnabled: mediaAllowsUploads !== null && mediaAllowsUploads !== void 0 ? mediaAllowsUploads : undefined,
85
+ mediaSupported: mediaAllowsUploads !== undefined,
34
86
  imageUploadSupported: !!(api !== null && api !== void 0 && api.imageUpload),
35
- imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
36
- mentionsSupported: !!(mentionState && mentionState.mentionProvider),
37
- mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
87
+ imageUploadEnabled: imageUploadEnabled,
88
+ mentionsSupported: !!mentionProvider,
89
+ mentionsDisabled: !canInsertMention,
38
90
  actionSupported: !!editorView.state.schema.nodes.taskItem,
39
91
  decisionSupported: !!editorView.state.schema.nodes.decisionItem,
40
- linkSupported: !!hyperlinkState,
41
- linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
42
- emojiDisabled: !emojiState || !emojiState.emojiProvider,
92
+ linkSupported: canInsertLink !== undefined,
93
+ linkDisabled: !canInsertLink || !!activeLinkMark,
94
+ emojiDisabled: !emojiProvider,
43
95
  nativeStatusSupported: options.nativeStatusSupported,
44
- dateEnabled: !!dateState,
45
- placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
96
+ dateEnabled: !!dateEnabled,
97
+ placeholderTextEnabled: placeholderTextAllowInserting,
46
98
  horizontalRuleEnabled: options.horizontalRuleEnabled,
47
99
  layoutSectionEnabled: Boolean(api === null || api === void 0 ? void 0 : api.layout),
48
100
  expandEnabled: !!options.allowExpand,
49
101
  showElementBrowserLink: options.showElementBrowserLink,
50
- emojiProvider: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
51
- availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
102
+ emojiProvider: emojiProvider,
103
+ availableWrapperBlockTypes: availableWrapperBlockTypes,
52
104
  insertMenuItems: options.insertMenuItems,
53
105
  schema: editorView.state.schema,
54
106
  // numberOfButtons controls what items are returned and eventually display in the insert menu - but it relies on the main toolbar width which
@@ -57,7 +109,7 @@ var useInsertMenuRailItems = exports.useInsertMenuRailItems = function useInsert
57
109
  formatMessage: formatMessage,
58
110
  isNewMenuEnabled: true
59
111
  });
60
- }, [api === null || api === void 0 ? void 0 : api.imageUpload, api === null || api === void 0 ? void 0 : api.layout, blockTypeState, dateState, editorView.state.schema, emojiState, formatMessage, hyperlinkState, imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled, mediaState, mentionState, options.allowExpand, options.horizontalRuleEnabled, options.insertMenuItems, options.nativeStatusSupported, options.showElementBrowserLink, options.tableSelectorSupported, placeholderTextState, typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed]),
112
+ }, [activeLinkMark, api === null || api === void 0 ? void 0 : api.imageUpload, api === null || api === void 0 ? void 0 : api.layout, availableWrapperBlockTypes, canInsertLink, canInsertMention, dateEnabled, editorView.state.schema, emojiProvider, formatMessage, imageUploadEnabled, isTypeAheadAllowed, mediaAllowsUploads, mentionProvider, options.allowExpand, options.horizontalRuleEnabled, options.insertMenuItems, options.nativeStatusSupported, options.showElementBrowserLink, options.tableSelectorSupported, placeholderTextAllowInserting]),
61
113
  _useMemo2 = (0, _slicedToArray2.default)(_useMemo, 2),
62
114
  _ = _useMemo2[0],
63
115
  dropdownItems = _useMemo2[1];
@@ -1,9 +1,10 @@
1
1
  import React, { useEffect } from 'react';
2
2
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
3
  import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
4
- import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
4
+ import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
5
5
  import { WithProviders } from '@atlaskit/editor-common/provider-factory';
6
6
  import { ToolbarSize } from '@atlaskit/editor-common/types';
7
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
7
8
  import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
8
9
  import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { toggleInsertBlockPmKey, toggleInsertBlockPmPlugin } from './pm-plugins/toggleInsertBlock';
@@ -179,6 +180,68 @@ export const insertBlockPlugin = ({
179
180
  };
180
181
  return plugin;
181
182
  };
183
+ const useSharedState = sharedPluginStateHookMigratorFactory(api => {
184
+ const emojiProviderSelector = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
185
+ const showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
186
+ const mediaAllowsUploads = useSharedPluginStateSelector(api, 'media.allowsUploads');
187
+ const showElementBrowser = useSharedPluginStateSelector(api, 'insertBlock.showElementBrowser');
188
+ const isTypeAheadAllowed = useSharedPluginStateSelector(api, 'typeAhead.isAllowed');
189
+ const mentionProvider = useSharedPluginStateSelector(api, 'mention.mentionProvider');
190
+ const canInsertMention = useSharedPluginStateSelector(api, 'mention.canInsertMention');
191
+ const dateEnabled = useSharedPluginStateSelector(api, 'date.isInitialised');
192
+ const placeholderTextAllowInserting = useSharedPluginStateSelector(api, 'placeholderText.allowInserting');
193
+ const connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
194
+ const imageUploadEnabled = useSharedPluginStateSelector(api, 'imageUpload.enabled');
195
+ const availableWrapperBlockTypes = useSharedPluginStateSelector(api, 'blockType.availableWrapperBlockTypes');
196
+ const canInsertLink = useSharedPluginStateSelector(api, 'hyperlink.canInsertLink');
197
+ const activeLinkMark = useSharedPluginStateSelector(api, 'hyperlink.activeLinkMark');
198
+ return {
199
+ emojiProviderSelector,
200
+ showMediaPicker,
201
+ mediaAllowsUploads,
202
+ showElementBrowser,
203
+ isTypeAheadAllowed,
204
+ mentionProvider,
205
+ canInsertMention,
206
+ dateEnabled,
207
+ placeholderTextAllowInserting,
208
+ connectivityMode,
209
+ imageUploadEnabled,
210
+ availableWrapperBlockTypes,
211
+ canInsertLink,
212
+ activeLinkMark
213
+ };
214
+ }, api => {
215
+ const {
216
+ dateState,
217
+ hyperlinkState,
218
+ imageUploadState,
219
+ mentionState,
220
+ emojiState,
221
+ blockTypeState,
222
+ mediaState,
223
+ typeAheadState,
224
+ placeholderTextState,
225
+ insertBlockState,
226
+ connectivityState
227
+ } = useSharedPluginState(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']);
228
+ return {
229
+ emojiProviderSelector: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
230
+ showMediaPicker: mediaState === null || mediaState === void 0 ? void 0 : mediaState.showMediaPicker,
231
+ mediaAllowsUploads: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads,
232
+ showElementBrowser: insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser,
233
+ isTypeAheadAllowed: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed,
234
+ mentionProvider: mentionState === null || mentionState === void 0 ? void 0 : mentionState.mentionProvider,
235
+ canInsertMention: mentionState === null || mentionState === void 0 ? void 0 : mentionState.canInsertMention,
236
+ dateEnabled: dateState === null || dateState === void 0 ? void 0 : dateState.isInitialised,
237
+ placeholderTextAllowInserting: placeholderTextState === null || placeholderTextState === void 0 ? void 0 : placeholderTextState.allowInserting,
238
+ connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode,
239
+ imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
240
+ availableWrapperBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableWrapperBlockTypes,
241
+ canInsertLink: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.canInsertLink,
242
+ activeLinkMark: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.activeLinkMark
243
+ };
244
+ });
182
245
  function ToolbarInsertBlockWithInjectionApi({
183
246
  editorView,
184
247
  editorActions,
@@ -195,67 +258,70 @@ function ToolbarInsertBlockWithInjectionApi({
195
258
  options,
196
259
  appearance
197
260
  }) {
198
- var _ref, _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
261
+ var _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
199
262
  const buttons = toolbarSizeToButtons(toolbarSize, appearance);
200
263
  const {
201
- dateState,
202
- hyperlinkState,
203
- imageUploadState,
204
- mentionState,
205
- emojiState,
206
- blockTypeState,
207
- mediaState,
208
- typeAheadState,
209
- placeholderTextState,
210
- insertBlockState,
211
- connectivityState
212
- } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']);
264
+ emojiProviderSelector,
265
+ showMediaPicker,
266
+ mediaAllowsUploads,
267
+ showElementBrowser,
268
+ isTypeAheadAllowed,
269
+ mentionProvider,
270
+ canInsertMention,
271
+ dateEnabled,
272
+ placeholderTextAllowInserting,
273
+ connectivityMode,
274
+ imageUploadEnabled,
275
+ availableWrapperBlockTypes,
276
+ canInsertLink,
277
+ activeLinkMark
278
+ } = useSharedState(pluginInjectionApi);
213
279
  const getEmojiProvider = () => {
214
- if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
215
- return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
280
+ if (emojiProviderSelector) {
281
+ return Promise.resolve(emojiProviderSelector);
216
282
  }
217
283
  };
218
284
  const emojiProvider = getEmojiProvider();
219
285
  const onShowMediaPicker = mountInfo => {
220
- if (!mediaState) {
286
+ if (!showMediaPicker) {
221
287
  return;
222
288
  }
223
289
  if (fg('platform_editor_add_media_from_url_rollout')) {
224
290
  var _pluginInjectionApi$c, _pluginInjectionApi$m;
225
291
  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$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup(mountInfo));
226
292
  } else {
227
- mediaState.showMediaPicker();
293
+ showMediaPicker();
228
294
  }
229
295
  };
230
296
  return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
231
- showElementBrowser: (insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser) || false,
297
+ showElementBrowser: showElementBrowser || false,
232
298
  pluginInjectionApi: pluginInjectionApi,
233
299
  buttons: buttons,
234
300
  isReducedSpacing: isToolbarReducedSpacing,
235
301
  isDisabled: disabled,
236
- isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
302
+ isTypeAheadAllowed: Boolean(isTypeAheadAllowed),
237
303
  editorView: editorView,
238
304
  tableSupported: !!editorView.state.schema.nodes.table,
239
305
  tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
240
306
  actionSupported: !!editorView.state.schema.nodes.taskItem,
241
- mentionsSupported: !!(mentionState && mentionState.mentionProvider),
242
- mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
307
+ mentionsSupported: !!mentionProvider,
308
+ mentionsDisabled: !canInsertMention,
243
309
  decisionSupported: !!editorView.state.schema.nodes.decisionItem,
244
- dateEnabled: !!dateState,
245
- placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
310
+ dateEnabled: !!dateEnabled,
311
+ placeholderTextEnabled: !!placeholderTextAllowInserting,
246
312
  layoutSectionEnabled: Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.layout),
247
313
  expandEnabled: !!options.allowExpand,
248
- mediaUploadsEnabled: (_ref = mediaState && mediaState.allowsUploads) !== null && _ref !== void 0 ? _ref : undefined,
314
+ mediaUploadsEnabled: mediaAllowsUploads !== null && mediaAllowsUploads !== void 0 ? mediaAllowsUploads : undefined,
249
315
  onShowMediaPicker: onShowMediaPicker,
250
- mediaSupported: !!mediaState,
251
- isEditorOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline',
316
+ mediaSupported: mediaAllowsUploads !== undefined,
317
+ isEditorOffline: connectivityMode === 'offline',
252
318
  imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.imageUpload),
253
- imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
319
+ imageUploadEnabled: imageUploadEnabled,
254
320
  handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$i = pluginInjectionApi.imageUpload) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.actions.startUpload,
255
- availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
256
- linkSupported: !!hyperlinkState,
257
- linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
258
- emojiDisabled: !emojiState || !emojiProvider,
321
+ availableWrapperBlockTypes: availableWrapperBlockTypes,
322
+ linkSupported: canInsertLink !== undefined,
323
+ linkDisabled: !canInsertLink || !!activeLinkMark,
324
+ emojiDisabled: !emojiProvider,
259
325
  emojiProvider: emojiProvider,
260
326
  nativeStatusSupported: options.nativeStatusSupported,
261
327
  horizontalRuleEnabled: options.horizontalRuleEnabled,
@@ -11,13 +11,27 @@ import { css, jsx } from '@emotion/react';
11
11
  import { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
12
12
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
13
13
  import { ELEMENT_ITEM_HEIGHT, ElementBrowser } from '@atlaskit/editor-common/element-browser';
14
- import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
14
+ import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
15
15
  import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
16
16
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
17
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
17
18
  import { fg } from '@atlaskit/platform-feature-flags';
18
19
  import { borderRadius } from '@atlaskit/theme';
19
20
  import { N0, N30A, N60A } from '@atlaskit/theme/colors';
20
21
  export const DEFAULT_HEIGHT = 560;
22
+ const useSharedState = sharedPluginStateHookMigratorFactory(api => {
23
+ const connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
24
+ return {
25
+ connectivityMode
26
+ };
27
+ }, api => {
28
+ const {
29
+ connectivityState
30
+ } = useSharedPluginState(api, ['connectivity']);
31
+ return {
32
+ connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode
33
+ };
34
+ });
21
35
  const InsertMenu = ({
22
36
  editorView,
23
37
  dropdownItems,
@@ -80,8 +94,8 @@ const InsertMenu = ({
80
94
  pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.actions.insertItem(item, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
81
95
  }, [editorView, toggleVisiblity, pluginInjectionApi]);
82
96
  const {
83
- connectivityState
84
- } = useSharedPluginState(pluginInjectionApi, ['connectivity']);
97
+ connectivityMode
98
+ } = useSharedState(pluginInjectionApi);
85
99
  const getItems = useCallback((query, category) => {
86
100
  let result;
87
101
  /**
@@ -95,7 +109,7 @@ const InsertMenu = ({
95
109
  result = (_pluginInjectionApi$q2 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q3 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q3 === void 0 ? void 0 : (_pluginInjectionApi$q4 = _pluginInjectionApi$q3.actions.getSuggestions({
96
110
  query,
97
111
  category
98
- })) === null || _pluginInjectionApi$q4 === void 0 ? void 0 : _pluginInjectionApi$q4.map(item => (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline' && item.isDisabledOffline ? {
112
+ })) === null || _pluginInjectionApi$q4 === void 0 ? void 0 : _pluginInjectionApi$q4.map(item => connectivityMode === 'offline' && item.isDisabledOffline ? {
99
113
  ...item,
100
114
  isDisabled: true
101
115
  } : item)) !== null && _pluginInjectionApi$q2 !== void 0 ? _pluginInjectionApi$q2 : [];
@@ -104,7 +118,7 @@ const InsertMenu = ({
104
118
  const featuredQuickInsertSuggestions = (_pluginInjectionApi$q5 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : (_pluginInjectionApi$q7 = _pluginInjectionApi$q6.actions.getSuggestions({
105
119
  category,
106
120
  featuredItems: true
107
- })) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.map(item => (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline' && item.isDisabledOffline ? {
121
+ })) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.map(item => connectivityMode === 'offline' && item.isDisabledOffline ? {
108
122
  ...item,
109
123
  isDisabled: true
110
124
  } : item)) !== null && _pluginInjectionApi$q5 !== void 0 ? _pluginInjectionApi$q5 : [];
@@ -112,7 +126,7 @@ const InsertMenu = ({
112
126
  }
113
127
  setItemCount(result.length);
114
128
  return result;
115
- }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q8 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : _pluginInjectionApi$q8.actions, quickInsertDropdownItems, connectivityState]);
129
+ }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q8 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : _pluginInjectionApi$q8.actions, quickInsertDropdownItems, connectivityMode]);
116
130
  const emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q9 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q9 === void 0 ? void 0 : (_pluginInjectionApi$q10 = _pluginInjectionApi$q9.sharedState.currentState()) === null || _pluginInjectionApi$q10 === void 0 ? void 0 : _pluginInjectionApi$q10.emptyStateHandler;
117
131
  const onViewMore = useCallback(() => {
118
132
  var _pluginInjectionApi$c, _pluginInjectionApi$q11;
@@ -1,11 +1,34 @@
1
1
  import { useMemo } from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
- import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
3
+ import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
4
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
4
5
  import { createItems } from '../ToolbarInsertBlock/create-items';
5
- export const useInsertMenuRailItems = (editorView, options, api) => {
6
- const {
7
- formatMessage
8
- } = useIntl();
6
+ const useSharedState = sharedPluginStateHookMigratorFactory(api => {
7
+ const dateEnabled = useSharedPluginStateSelector(api, 'date.isInitialised');
8
+ const canInsertLink = useSharedPluginStateSelector(api, 'hyperlink.canInsertLink');
9
+ const activeLinkMark = useSharedPluginStateSelector(api, 'hyperlink.activeLinkMark');
10
+ const isTypeAheadAllowed = useSharedPluginStateSelector(api, 'typeAhead.isAllowed');
11
+ const availableWrapperBlockTypes = useSharedPluginStateSelector(api, 'blockType.availableWrapperBlockTypes');
12
+ const imageUploadEnabled = useSharedPluginStateSelector(api, 'imageUpload.enabled');
13
+ const placeholderTextAllowInserting = useSharedPluginStateSelector(api, 'placeholderText.allowInserting');
14
+ const emojiProvider = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
15
+ const mentionProvider = useSharedPluginStateSelector(api, 'mention.mentionProvider');
16
+ const canInsertMention = useSharedPluginStateSelector(api, 'mention.canInsertMention');
17
+ const mediaAllowsUploads = useSharedPluginStateSelector(api, 'media.allowsUploads');
18
+ return {
19
+ dateEnabled,
20
+ canInsertLink,
21
+ activeLinkMark,
22
+ isTypeAheadAllowed,
23
+ availableWrapperBlockTypes,
24
+ imageUploadEnabled,
25
+ placeholderTextAllowInserting,
26
+ emojiProvider,
27
+ mentionProvider,
28
+ canInsertMention,
29
+ mediaAllowsUploads
30
+ };
31
+ }, api => {
9
32
  const {
10
33
  dateState,
11
34
  hyperlinkState,
@@ -17,32 +40,62 @@ export const useInsertMenuRailItems = (editorView, options, api) => {
17
40
  typeAheadState,
18
41
  placeholderTextState
19
42
  } = useSharedPluginState(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']);
43
+ return {
44
+ dateEnabled: dateState === null || dateState === void 0 ? void 0 : dateState.isInitialised,
45
+ canInsertLink: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.canInsertLink,
46
+ activeLinkMark: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.activeLinkMark,
47
+ isTypeAheadAllowed: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed,
48
+ availableWrapperBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableWrapperBlockTypes,
49
+ imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
50
+ placeholderTextAllowInserting: placeholderTextState === null || placeholderTextState === void 0 ? void 0 : placeholderTextState.allowInserting,
51
+ emojiProvider: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
52
+ mentionProvider: mentionState === null || mentionState === void 0 ? void 0 : mentionState.mentionProvider,
53
+ canInsertMention: mentionState === null || mentionState === void 0 ? void 0 : mentionState.canInsertMention,
54
+ mediaAllowsUploads: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads
55
+ };
56
+ });
57
+ export const useInsertMenuRailItems = (editorView, options, api) => {
58
+ const {
59
+ formatMessage
60
+ } = useIntl();
61
+ const {
62
+ dateEnabled,
63
+ canInsertLink,
64
+ activeLinkMark,
65
+ isTypeAheadAllowed,
66
+ availableWrapperBlockTypes,
67
+ imageUploadEnabled,
68
+ placeholderTextAllowInserting,
69
+ emojiProvider,
70
+ mentionProvider,
71
+ canInsertMention,
72
+ mediaAllowsUploads
73
+ } = useSharedState(api);
20
74
  const [_, dropdownItems] = useMemo(() => {
21
- var _ref;
22
75
  return createItems({
23
- isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
76
+ isTypeAheadAllowed: Boolean(isTypeAheadAllowed),
24
77
  tableSupported: !!editorView.state.schema.nodes.table,
25
78
  tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
26
- mediaUploadsEnabled: (_ref = mediaState && mediaState.allowsUploads) !== null && _ref !== void 0 ? _ref : undefined,
27
- mediaSupported: !!mediaState,
79
+ mediaUploadsEnabled: mediaAllowsUploads !== null && mediaAllowsUploads !== void 0 ? mediaAllowsUploads : undefined,
80
+ mediaSupported: mediaAllowsUploads !== undefined,
28
81
  imageUploadSupported: !!(api !== null && api !== void 0 && api.imageUpload),
29
- imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
30
- mentionsSupported: !!(mentionState && mentionState.mentionProvider),
31
- mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
82
+ imageUploadEnabled: imageUploadEnabled,
83
+ mentionsSupported: !!mentionProvider,
84
+ mentionsDisabled: !canInsertMention,
32
85
  actionSupported: !!editorView.state.schema.nodes.taskItem,
33
86
  decisionSupported: !!editorView.state.schema.nodes.decisionItem,
34
- linkSupported: !!hyperlinkState,
35
- linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
36
- emojiDisabled: !emojiState || !emojiState.emojiProvider,
87
+ linkSupported: canInsertLink !== undefined,
88
+ linkDisabled: !canInsertLink || !!activeLinkMark,
89
+ emojiDisabled: !emojiProvider,
37
90
  nativeStatusSupported: options.nativeStatusSupported,
38
- dateEnabled: !!dateState,
39
- placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
91
+ dateEnabled: !!dateEnabled,
92
+ placeholderTextEnabled: placeholderTextAllowInserting,
40
93
  horizontalRuleEnabled: options.horizontalRuleEnabled,
41
94
  layoutSectionEnabled: Boolean(api === null || api === void 0 ? void 0 : api.layout),
42
95
  expandEnabled: !!options.allowExpand,
43
96
  showElementBrowserLink: options.showElementBrowserLink,
44
- emojiProvider: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
45
- availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
97
+ emojiProvider: emojiProvider,
98
+ availableWrapperBlockTypes: availableWrapperBlockTypes,
46
99
  insertMenuItems: options.insertMenuItems,
47
100
  schema: editorView.state.schema,
48
101
  // numberOfButtons controls what items are returned and eventually display in the insert menu - but it relies on the main toolbar width which
@@ -51,6 +104,6 @@ export const useInsertMenuRailItems = (editorView, options, api) => {
51
104
  formatMessage,
52
105
  isNewMenuEnabled: true
53
106
  });
54
- }, [api === null || api === void 0 ? void 0 : api.imageUpload, api === null || api === void 0 ? void 0 : api.layout, blockTypeState, dateState, editorView.state.schema, emojiState, formatMessage, hyperlinkState, imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled, mediaState, mentionState, options.allowExpand, options.horizontalRuleEnabled, options.insertMenuItems, options.nativeStatusSupported, options.showElementBrowserLink, options.tableSelectorSupported, placeholderTextState, typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed]);
107
+ }, [activeLinkMark, api === null || api === void 0 ? void 0 : api.imageUpload, api === null || api === void 0 ? void 0 : api.layout, availableWrapperBlockTypes, canInsertLink, canInsertMention, dateEnabled, editorView.state.schema, emojiProvider, formatMessage, imageUploadEnabled, isTypeAheadAllowed, mediaAllowsUploads, mentionProvider, options.allowExpand, options.horizontalRuleEnabled, options.insertMenuItems, options.nativeStatusSupported, options.showElementBrowserLink, options.tableSelectorSupported, placeholderTextAllowInserting]);
55
108
  return dropdownItems;
56
109
  };
@@ -1,9 +1,10 @@
1
1
  import React, { useEffect } from 'react';
2
2
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
3
  import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
4
- import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
4
+ import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
5
5
  import { WithProviders } from '@atlaskit/editor-common/provider-factory';
6
6
  import { ToolbarSize } from '@atlaskit/editor-common/types';
7
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
7
8
  import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
8
9
  import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { toggleInsertBlockPmKey, toggleInsertBlockPmPlugin } from './pm-plugins/toggleInsertBlock';
@@ -185,8 +186,69 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
185
186
  };
186
187
  return plugin;
187
188
  };
189
+ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
190
+ var emojiProviderSelector = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
191
+ var showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
192
+ var mediaAllowsUploads = useSharedPluginStateSelector(api, 'media.allowsUploads');
193
+ var showElementBrowser = useSharedPluginStateSelector(api, 'insertBlock.showElementBrowser');
194
+ var isTypeAheadAllowed = useSharedPluginStateSelector(api, 'typeAhead.isAllowed');
195
+ var mentionProvider = useSharedPluginStateSelector(api, 'mention.mentionProvider');
196
+ var canInsertMention = useSharedPluginStateSelector(api, 'mention.canInsertMention');
197
+ var dateEnabled = useSharedPluginStateSelector(api, 'date.isInitialised');
198
+ var placeholderTextAllowInserting = useSharedPluginStateSelector(api, 'placeholderText.allowInserting');
199
+ var connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
200
+ var imageUploadEnabled = useSharedPluginStateSelector(api, 'imageUpload.enabled');
201
+ var availableWrapperBlockTypes = useSharedPluginStateSelector(api, 'blockType.availableWrapperBlockTypes');
202
+ var canInsertLink = useSharedPluginStateSelector(api, 'hyperlink.canInsertLink');
203
+ var activeLinkMark = useSharedPluginStateSelector(api, 'hyperlink.activeLinkMark');
204
+ return {
205
+ emojiProviderSelector: emojiProviderSelector,
206
+ showMediaPicker: showMediaPicker,
207
+ mediaAllowsUploads: mediaAllowsUploads,
208
+ showElementBrowser: showElementBrowser,
209
+ isTypeAheadAllowed: isTypeAheadAllowed,
210
+ mentionProvider: mentionProvider,
211
+ canInsertMention: canInsertMention,
212
+ dateEnabled: dateEnabled,
213
+ placeholderTextAllowInserting: placeholderTextAllowInserting,
214
+ connectivityMode: connectivityMode,
215
+ imageUploadEnabled: imageUploadEnabled,
216
+ availableWrapperBlockTypes: availableWrapperBlockTypes,
217
+ canInsertLink: canInsertLink,
218
+ activeLinkMark: activeLinkMark
219
+ };
220
+ }, function (api) {
221
+ var _useSharedPluginState = useSharedPluginState(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']),
222
+ dateState = _useSharedPluginState.dateState,
223
+ hyperlinkState = _useSharedPluginState.hyperlinkState,
224
+ imageUploadState = _useSharedPluginState.imageUploadState,
225
+ mentionState = _useSharedPluginState.mentionState,
226
+ emojiState = _useSharedPluginState.emojiState,
227
+ blockTypeState = _useSharedPluginState.blockTypeState,
228
+ mediaState = _useSharedPluginState.mediaState,
229
+ typeAheadState = _useSharedPluginState.typeAheadState,
230
+ placeholderTextState = _useSharedPluginState.placeholderTextState,
231
+ insertBlockState = _useSharedPluginState.insertBlockState,
232
+ connectivityState = _useSharedPluginState.connectivityState;
233
+ return {
234
+ emojiProviderSelector: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
235
+ showMediaPicker: mediaState === null || mediaState === void 0 ? void 0 : mediaState.showMediaPicker,
236
+ mediaAllowsUploads: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads,
237
+ showElementBrowser: insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser,
238
+ isTypeAheadAllowed: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed,
239
+ mentionProvider: mentionState === null || mentionState === void 0 ? void 0 : mentionState.mentionProvider,
240
+ canInsertMention: mentionState === null || mentionState === void 0 ? void 0 : mentionState.canInsertMention,
241
+ dateEnabled: dateState === null || dateState === void 0 ? void 0 : dateState.isInitialised,
242
+ placeholderTextAllowInserting: placeholderTextState === null || placeholderTextState === void 0 ? void 0 : placeholderTextState.allowInserting,
243
+ connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode,
244
+ imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
245
+ availableWrapperBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableWrapperBlockTypes,
246
+ canInsertLink: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.canInsertLink,
247
+ activeLinkMark: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.activeLinkMark
248
+ };
249
+ });
188
250
  function ToolbarInsertBlockWithInjectionApi(_ref4) {
189
- var _ref5, _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
251
+ var _pluginInjectionApi$i, _pluginInjectionApi$c2, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
190
252
  var editorView = _ref4.editorView,
191
253
  editorActions = _ref4.editorActions,
192
254
  dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent,
@@ -202,64 +264,67 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
202
264
  options = _ref4.options,
203
265
  appearance = _ref4.appearance;
204
266
  var buttons = toolbarSizeToButtons(toolbarSize, appearance);
205
- var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity']),
206
- dateState = _useSharedPluginState.dateState,
207
- hyperlinkState = _useSharedPluginState.hyperlinkState,
208
- imageUploadState = _useSharedPluginState.imageUploadState,
209
- mentionState = _useSharedPluginState.mentionState,
210
- emojiState = _useSharedPluginState.emojiState,
211
- blockTypeState = _useSharedPluginState.blockTypeState,
212
- mediaState = _useSharedPluginState.mediaState,
213
- typeAheadState = _useSharedPluginState.typeAheadState,
214
- placeholderTextState = _useSharedPluginState.placeholderTextState,
215
- insertBlockState = _useSharedPluginState.insertBlockState,
216
- connectivityState = _useSharedPluginState.connectivityState;
267
+ var _useSharedState = useSharedState(pluginInjectionApi),
268
+ emojiProviderSelector = _useSharedState.emojiProviderSelector,
269
+ showMediaPicker = _useSharedState.showMediaPicker,
270
+ mediaAllowsUploads = _useSharedState.mediaAllowsUploads,
271
+ showElementBrowser = _useSharedState.showElementBrowser,
272
+ isTypeAheadAllowed = _useSharedState.isTypeAheadAllowed,
273
+ mentionProvider = _useSharedState.mentionProvider,
274
+ canInsertMention = _useSharedState.canInsertMention,
275
+ dateEnabled = _useSharedState.dateEnabled,
276
+ placeholderTextAllowInserting = _useSharedState.placeholderTextAllowInserting,
277
+ connectivityMode = _useSharedState.connectivityMode,
278
+ imageUploadEnabled = _useSharedState.imageUploadEnabled,
279
+ availableWrapperBlockTypes = _useSharedState.availableWrapperBlockTypes,
280
+ canInsertLink = _useSharedState.canInsertLink,
281
+ activeLinkMark = _useSharedState.activeLinkMark;
217
282
  var getEmojiProvider = function getEmojiProvider() {
218
- if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
219
- return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
283
+ if (emojiProviderSelector) {
284
+ return Promise.resolve(emojiProviderSelector);
220
285
  }
221
286
  };
222
287
  var emojiProvider = getEmojiProvider();
223
288
  var onShowMediaPicker = function onShowMediaPicker(mountInfo) {
224
- if (!mediaState) {
289
+ if (!showMediaPicker) {
225
290
  return;
226
291
  }
227
292
  if (fg('platform_editor_add_media_from_url_rollout')) {
228
293
  var _pluginInjectionApi$c, _pluginInjectionApi$m;
229
294
  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup(mountInfo));
230
295
  } else {
231
- mediaState.showMediaPicker();
296
+ showMediaPicker();
232
297
  }
233
298
  };
234
299
  return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
235
- showElementBrowser: (insertBlockState === null || insertBlockState === void 0 ? void 0 : insertBlockState.showElementBrowser) || false,
300
+ showElementBrowser: showElementBrowser || false,
236
301
  pluginInjectionApi: pluginInjectionApi,
237
302
  buttons: buttons,
238
303
  isReducedSpacing: isToolbarReducedSpacing,
239
304
  isDisabled: disabled,
240
- isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
305
+ isTypeAheadAllowed: Boolean(isTypeAheadAllowed),
241
306
  editorView: editorView,
242
307
  tableSupported: !!editorView.state.schema.nodes.table,
243
308
  tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
244
309
  actionSupported: !!editorView.state.schema.nodes.taskItem,
245
- mentionsSupported: !!(mentionState && mentionState.mentionProvider),
246
- mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
310
+ mentionsSupported: !!mentionProvider,
311
+ mentionsDisabled: !canInsertMention,
247
312
  decisionSupported: !!editorView.state.schema.nodes.decisionItem,
248
- dateEnabled: !!dateState,
249
- placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
313
+ dateEnabled: !!dateEnabled,
314
+ placeholderTextEnabled: !!placeholderTextAllowInserting,
250
315
  layoutSectionEnabled: Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.layout),
251
316
  expandEnabled: !!options.allowExpand,
252
- mediaUploadsEnabled: (_ref5 = mediaState && mediaState.allowsUploads) !== null && _ref5 !== void 0 ? _ref5 : undefined,
317
+ mediaUploadsEnabled: mediaAllowsUploads !== null && mediaAllowsUploads !== void 0 ? mediaAllowsUploads : undefined,
253
318
  onShowMediaPicker: onShowMediaPicker,
254
- mediaSupported: !!mediaState,
255
- isEditorOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline',
319
+ mediaSupported: mediaAllowsUploads !== undefined,
320
+ isEditorOffline: connectivityMode === 'offline',
256
321
  imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.imageUpload),
257
- imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
322
+ imageUploadEnabled: imageUploadEnabled,
258
323
  handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$i = pluginInjectionApi.imageUpload) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.actions.startUpload,
259
- availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
260
- linkSupported: !!hyperlinkState,
261
- linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
262
- emojiDisabled: !emojiState || !emojiProvider,
324
+ availableWrapperBlockTypes: availableWrapperBlockTypes,
325
+ linkSupported: canInsertLink !== undefined,
326
+ linkDisabled: !canInsertLink || !!activeLinkMark,
327
+ emojiDisabled: !emojiProvider,
263
328
  emojiProvider: emojiProvider,
264
329
  nativeStatusSupported: options.nativeStatusSupported,
265
330
  horizontalRuleEnabled: options.horizontalRuleEnabled,
@@ -18,13 +18,26 @@ import { css, jsx } from '@emotion/react';
18
18
  import { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
19
19
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
20
20
  import { ELEMENT_ITEM_HEIGHT, ElementBrowser } from '@atlaskit/editor-common/element-browser';
21
- import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
21
+ import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
22
22
  import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
23
23
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
24
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
24
25
  import { fg } from '@atlaskit/platform-feature-flags';
25
26
  import { borderRadius } from '@atlaskit/theme';
26
27
  import { N0, N30A, N60A } from '@atlaskit/theme/colors';
27
28
  export var DEFAULT_HEIGHT = 560;
29
+ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
30
+ var connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
31
+ return {
32
+ connectivityMode: connectivityMode
33
+ };
34
+ }, function (api) {
35
+ var _useSharedPluginState = useSharedPluginState(api, ['connectivity']),
36
+ connectivityState = _useSharedPluginState.connectivityState;
37
+ return {
38
+ connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode
39
+ };
40
+ });
28
41
  var InsertMenu = function InsertMenu(_ref) {
29
42
  var _pluginInjectionApi$q6, _pluginInjectionApi$q7;
30
43
  var editorView = _ref.editorView,
@@ -99,8 +112,8 @@ var InsertMenu = function InsertMenu(_ref) {
99
112
  }
100
113
  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
101
114
  }, [editorView, toggleVisiblity, pluginInjectionApi]);
102
- var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['connectivity']),
103
- connectivityState = _useSharedPluginState.connectivityState;
115
+ var _useSharedState = useSharedState(pluginInjectionApi),
116
+ connectivityMode = _useSharedState.connectivityMode;
104
117
  var getItems = useCallback(function (query, category) {
105
118
  var result;
106
119
  /**
@@ -115,7 +128,7 @@ var InsertMenu = function InsertMenu(_ref) {
115
128
  query: query,
116
129
  category: category
117
130
  })) === null || _pluginInjectionApi$q3 === void 0 ? void 0 : _pluginInjectionApi$q3.map(function (item) {
118
- return (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline' && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
131
+ return connectivityMode === 'offline' && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
119
132
  isDisabled: true
120
133
  }) : item;
121
134
  })) !== null && _pluginInjectionApi$q2 !== void 0 ? _pluginInjectionApi$q2 : [];
@@ -125,7 +138,7 @@ var InsertMenu = function InsertMenu(_ref) {
125
138
  category: category,
126
139
  featuredItems: true
127
140
  })) === null || _pluginInjectionApi$q5 === void 0 ? void 0 : _pluginInjectionApi$q5.map(function (item) {
128
- return (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline' && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
141
+ return connectivityMode === 'offline' && item.isDisabledOffline ? _objectSpread(_objectSpread({}, item), {}, {
129
142
  isDisabled: true
130
143
  }) : item;
131
144
  })) !== null && _pluginInjectionApi$q4 !== void 0 ? _pluginInjectionApi$q4 : [];
@@ -133,7 +146,7 @@ var InsertMenu = function InsertMenu(_ref) {
133
146
  }
134
147
  setItemCount(result.length);
135
148
  return result;
136
- }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions, quickInsertDropdownItems, connectivityState]);
149
+ }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions, quickInsertDropdownItems, connectivityMode]);
137
150
  var emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 || (_pluginInjectionApi$q7 = _pluginInjectionApi$q7.sharedState.currentState()) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.emptyStateHandler;
138
151
  var onViewMore = useCallback(function () {
139
152
  var _pluginInjectionApi$c, _pluginInjectionApi$q8;
@@ -1,11 +1,35 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import { useMemo } from 'react';
3
3
  import { useIntl } from 'react-intl-next';
4
- import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
4
+ import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
5
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
6
  import { createItems } from '../ToolbarInsertBlock/create-items';
6
- export var useInsertMenuRailItems = function useInsertMenuRailItems(editorView, options, api) {
7
- var _useIntl = useIntl(),
8
- formatMessage = _useIntl.formatMessage;
7
+ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
8
+ var dateEnabled = useSharedPluginStateSelector(api, 'date.isInitialised');
9
+ var canInsertLink = useSharedPluginStateSelector(api, 'hyperlink.canInsertLink');
10
+ var activeLinkMark = useSharedPluginStateSelector(api, 'hyperlink.activeLinkMark');
11
+ var isTypeAheadAllowed = useSharedPluginStateSelector(api, 'typeAhead.isAllowed');
12
+ var availableWrapperBlockTypes = useSharedPluginStateSelector(api, 'blockType.availableWrapperBlockTypes');
13
+ var imageUploadEnabled = useSharedPluginStateSelector(api, 'imageUpload.enabled');
14
+ var placeholderTextAllowInserting = useSharedPluginStateSelector(api, 'placeholderText.allowInserting');
15
+ var emojiProvider = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
16
+ var mentionProvider = useSharedPluginStateSelector(api, 'mention.mentionProvider');
17
+ var canInsertMention = useSharedPluginStateSelector(api, 'mention.canInsertMention');
18
+ var mediaAllowsUploads = useSharedPluginStateSelector(api, 'media.allowsUploads');
19
+ return {
20
+ dateEnabled: dateEnabled,
21
+ canInsertLink: canInsertLink,
22
+ activeLinkMark: activeLinkMark,
23
+ isTypeAheadAllowed: isTypeAheadAllowed,
24
+ availableWrapperBlockTypes: availableWrapperBlockTypes,
25
+ imageUploadEnabled: imageUploadEnabled,
26
+ placeholderTextAllowInserting: placeholderTextAllowInserting,
27
+ emojiProvider: emojiProvider,
28
+ mentionProvider: mentionProvider,
29
+ canInsertMention: canInsertMention,
30
+ mediaAllowsUploads: mediaAllowsUploads
31
+ };
32
+ }, function (api) {
9
33
  var _useSharedPluginState = useSharedPluginState(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']),
10
34
  dateState = _useSharedPluginState.dateState,
11
35
  hyperlinkState = _useSharedPluginState.hyperlinkState,
@@ -16,32 +40,60 @@ export var useInsertMenuRailItems = function useInsertMenuRailItems(editorView,
16
40
  mediaState = _useSharedPluginState.mediaState,
17
41
  typeAheadState = _useSharedPluginState.typeAheadState,
18
42
  placeholderTextState = _useSharedPluginState.placeholderTextState;
43
+ return {
44
+ dateEnabled: dateState === null || dateState === void 0 ? void 0 : dateState.isInitialised,
45
+ canInsertLink: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.canInsertLink,
46
+ activeLinkMark: hyperlinkState === null || hyperlinkState === void 0 ? void 0 : hyperlinkState.activeLinkMark,
47
+ isTypeAheadAllowed: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed,
48
+ availableWrapperBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableWrapperBlockTypes,
49
+ imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
50
+ placeholderTextAllowInserting: placeholderTextState === null || placeholderTextState === void 0 ? void 0 : placeholderTextState.allowInserting,
51
+ emojiProvider: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
52
+ mentionProvider: mentionState === null || mentionState === void 0 ? void 0 : mentionState.mentionProvider,
53
+ canInsertMention: mentionState === null || mentionState === void 0 ? void 0 : mentionState.canInsertMention,
54
+ mediaAllowsUploads: mediaState === null || mediaState === void 0 ? void 0 : mediaState.allowsUploads
55
+ };
56
+ });
57
+ export var useInsertMenuRailItems = function useInsertMenuRailItems(editorView, options, api) {
58
+ var _useIntl = useIntl(),
59
+ formatMessage = _useIntl.formatMessage;
60
+ var _useSharedState = useSharedState(api),
61
+ dateEnabled = _useSharedState.dateEnabled,
62
+ canInsertLink = _useSharedState.canInsertLink,
63
+ activeLinkMark = _useSharedState.activeLinkMark,
64
+ isTypeAheadAllowed = _useSharedState.isTypeAheadAllowed,
65
+ availableWrapperBlockTypes = _useSharedState.availableWrapperBlockTypes,
66
+ imageUploadEnabled = _useSharedState.imageUploadEnabled,
67
+ placeholderTextAllowInserting = _useSharedState.placeholderTextAllowInserting,
68
+ emojiProvider = _useSharedState.emojiProvider,
69
+ mentionProvider = _useSharedState.mentionProvider,
70
+ canInsertMention = _useSharedState.canInsertMention,
71
+ mediaAllowsUploads = _useSharedState.mediaAllowsUploads;
19
72
  var _useMemo = useMemo(function () {
20
- var _ref;
21
73
  return createItems({
22
- isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
74
+ isTypeAheadAllowed: Boolean(isTypeAheadAllowed),
23
75
  tableSupported: !!editorView.state.schema.nodes.table,
24
76
  tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
25
- mediaUploadsEnabled: (_ref = mediaState && mediaState.allowsUploads) !== null && _ref !== void 0 ? _ref : undefined,
26
- mediaSupported: !!mediaState,
77
+ mediaUploadsEnabled: mediaAllowsUploads !== null && mediaAllowsUploads !== void 0 ? mediaAllowsUploads : undefined,
78
+ mediaSupported: mediaAllowsUploads !== undefined,
27
79
  imageUploadSupported: !!(api !== null && api !== void 0 && api.imageUpload),
28
- imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
29
- mentionsSupported: !!(mentionState && mentionState.mentionProvider),
30
- mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
80
+ imageUploadEnabled: imageUploadEnabled,
81
+ mentionsSupported: !!mentionProvider,
82
+ mentionsDisabled: !canInsertMention,
31
83
  actionSupported: !!editorView.state.schema.nodes.taskItem,
32
84
  decisionSupported: !!editorView.state.schema.nodes.decisionItem,
33
- linkSupported: !!hyperlinkState,
34
- linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
35
- emojiDisabled: !emojiState || !emojiState.emojiProvider,
85
+ linkSupported: canInsertLink !== undefined,
86
+ linkDisabled: !canInsertLink || !!activeLinkMark,
87
+ emojiDisabled: !emojiProvider,
36
88
  nativeStatusSupported: options.nativeStatusSupported,
37
- dateEnabled: !!dateState,
38
- placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
89
+ dateEnabled: !!dateEnabled,
90
+ placeholderTextEnabled: placeholderTextAllowInserting,
39
91
  horizontalRuleEnabled: options.horizontalRuleEnabled,
40
92
  layoutSectionEnabled: Boolean(api === null || api === void 0 ? void 0 : api.layout),
41
93
  expandEnabled: !!options.allowExpand,
42
94
  showElementBrowserLink: options.showElementBrowserLink,
43
- emojiProvider: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
44
- availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
95
+ emojiProvider: emojiProvider,
96
+ availableWrapperBlockTypes: availableWrapperBlockTypes,
45
97
  insertMenuItems: options.insertMenuItems,
46
98
  schema: editorView.state.schema,
47
99
  // numberOfButtons controls what items are returned and eventually display in the insert menu - but it relies on the main toolbar width which
@@ -50,7 +102,7 @@ export var useInsertMenuRailItems = function useInsertMenuRailItems(editorView,
50
102
  formatMessage: formatMessage,
51
103
  isNewMenuEnabled: true
52
104
  });
53
- }, [api === null || api === void 0 ? void 0 : api.imageUpload, api === null || api === void 0 ? void 0 : api.layout, blockTypeState, dateState, editorView.state.schema, emojiState, formatMessage, hyperlinkState, imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled, mediaState, mentionState, options.allowExpand, options.horizontalRuleEnabled, options.insertMenuItems, options.nativeStatusSupported, options.showElementBrowserLink, options.tableSelectorSupported, placeholderTextState, typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed]),
105
+ }, [activeLinkMark, api === null || api === void 0 ? void 0 : api.imageUpload, api === null || api === void 0 ? void 0 : api.layout, availableWrapperBlockTypes, canInsertLink, canInsertMention, dateEnabled, editorView.state.schema, emojiProvider, formatMessage, imageUploadEnabled, isTypeAheadAllowed, mediaAllowsUploads, mentionProvider, options.allowExpand, options.horizontalRuleEnabled, options.insertMenuItems, options.nativeStatusSupported, options.showElementBrowserLink, options.tableSelectorSupported, placeholderTextAllowInserting]),
54
106
  _useMemo2 = _slicedToArray(_useMemo, 2),
55
107
  _ = _useMemo2[0],
56
108
  dropdownItems = _useMemo2[1];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-insert-block",
3
- "version": "3.2.5",
3
+ "version": "3.2.7",
4
4
  "description": "Insert block plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,7 +34,7 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@atlaskit/button": "^23.0.0",
37
- "@atlaskit/editor-common": "^104.0.0",
37
+ "@atlaskit/editor-common": "^105.0.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
39
39
  "@atlaskit/editor-plugin-block-type": "^5.1.0",
40
40
  "@atlaskit/editor-plugin-code-block": "^4.4.0",
@@ -49,12 +49,12 @@
49
49
  "@atlaskit/editor-plugin-layout": "^2.7.0",
50
50
  "@atlaskit/editor-plugin-media": "^3.0.0",
51
51
  "@atlaskit/editor-plugin-media-insert": "^6.3.0",
52
- "@atlaskit/editor-plugin-mentions": "^4.5.0",
52
+ "@atlaskit/editor-plugin-mentions": "^4.6.0",
53
53
  "@atlaskit/editor-plugin-metrics": "^3.4.0",
54
- "@atlaskit/editor-plugin-panel": "^4.3.0",
55
- "@atlaskit/editor-plugin-placeholder-text": "^2.2.0",
54
+ "@atlaskit/editor-plugin-panel": "^4.4.0",
55
+ "@atlaskit/editor-plugin-placeholder-text": "^2.3.0",
56
56
  "@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
57
- "@atlaskit/editor-plugin-quick-insert": "^2.4.0",
57
+ "@atlaskit/editor-plugin-quick-insert": "^2.5.0",
58
58
  "@atlaskit/editor-plugin-rule": "^2.1.0",
59
59
  "@atlaskit/editor-plugin-status": "^3.1.0",
60
60
  "@atlaskit/editor-plugin-table": "^10.9.0",
@@ -64,12 +64,12 @@
64
64
  "@atlaskit/editor-shared-styles": "^3.4.0",
65
65
  "@atlaskit/emoji": "^69.1.0",
66
66
  "@atlaskit/heading": "^5.2.0",
67
- "@atlaskit/icon": "^25.6.0",
68
- "@atlaskit/icon-lab": "^4.10.0",
67
+ "@atlaskit/icon": "^26.0.0",
68
+ "@atlaskit/icon-lab": "^4.12.0",
69
69
  "@atlaskit/platform-feature-flags": "^1.1.0",
70
70
  "@atlaskit/primitives": "^14.7.0",
71
71
  "@atlaskit/theme": "^18.0.0",
72
- "@atlaskit/tmp-editor-statsig": "^4.16.0",
72
+ "@atlaskit/tmp-editor-statsig": "^4.19.0",
73
73
  "@atlaskit/tokens": "^4.8.0",
74
74
  "@atlaskit/tooltip": "^20.0.0",
75
75
  "@babel/runtime": "^7.0.0",