@atlaskit/editor-plugin-insert-block 3.2.6 → 3.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/insertBlockPlugin.js +96 -31
  3. package/dist/cjs/ui/ElementBrowser/InsertMenu.js +18 -5
  4. package/dist/cjs/ui/ElementRail/useInsertMenuRailItems.js +70 -18
  5. package/dist/cjs/ui/ToolbarInsertBlock/index.js +1 -1
  6. package/dist/es2019/insertBlockPlugin.js +98 -32
  7. package/dist/es2019/ui/ElementBrowser/InsertMenu.js +20 -6
  8. package/dist/es2019/ui/ElementRail/useInsertMenuRailItems.js +73 -20
  9. package/dist/es2019/ui/ToolbarInsertBlock/index.js +1 -1
  10. package/dist/esm/insertBlockPlugin.js +97 -32
  11. package/dist/esm/ui/ElementBrowser/InsertMenu.js +19 -6
  12. package/dist/esm/ui/ElementRail/useInsertMenuRailItems.js +71 -19
  13. package/dist/esm/ui/ToolbarInsertBlock/index.js +1 -1
  14. package/package.json +10 -13
package/dist/es2019/ui/ElementBrowser/InsertMenu.js CHANGED
@@ -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;
package/dist/es2019/ui/ElementRail/useInsertMenuRailItems.js CHANGED
@@ -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
  };
package/dist/es2019/ui/ToolbarInsertBlock/index.js CHANGED
@@ -843,7 +843,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
843
843
  showElementBrowserLink: this.props.showElementBrowserLink || false,
844
844
  pluginInjectionApi: this.props.pluginInjectionApi,
845
845
  isFullPageAppearance: isFullPageAppearance
846
- })), (!((_this$props$pluginInj4 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj4 !== void 0 && _this$props$pluginInj4.primaryToolbar) && this.props.showSeparator || isFullPageAppearance && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_insert_button_on_primary_toolbar')) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
846
+ })), (!((_this$props$pluginInj4 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj4 !== void 0 && _this$props$pluginInj4.primaryToolbar) && this.props.showSeparator || isFullPageAppearance && editorExperiment('platform_editor_controls', 'variant1')) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
847
847
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
848
848
  jsx("span", {
849
849
  css: separatorStyles
package/dist/esm/insertBlockPlugin.js CHANGED
@@ -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,
package/dist/esm/ui/ElementBrowser/InsertMenu.js CHANGED
@@ -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;
package/dist/esm/ui/ElementRail/useInsertMenuRailItems.js CHANGED
@@ -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/dist/esm/ui/ToolbarInsertBlock/index.js CHANGED
@@ -799,7 +799,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
799
799
  showElementBrowserLink: this.props.showElementBrowserLink || false,
800
800
  pluginInjectionApi: this.props.pluginInjectionApi,
801
801
  isFullPageAppearance: isFullPageAppearance
802
- })), (!((_this$props$pluginInj = this.props.pluginInjectionApi) !== null && _this$props$pluginInj !== void 0 && _this$props$pluginInj.primaryToolbar) && this.props.showSeparator || isFullPageAppearance && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_insert_button_on_primary_toolbar')) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
802
+ })), (!((_this$props$pluginInj = this.props.pluginInjectionApi) !== null && _this$props$pluginInj !== void 0 && _this$props$pluginInj.primaryToolbar) && this.props.showSeparator || isFullPageAppearance && editorExperiment('platform_editor_controls', 'variant1')) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
803
803
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
804
804
  jsx("span", {
805
805
  css: separatorStyles