@atlaskit/editor-plugin-insert-block 1.14.5 → 2.0.0

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 (36) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/plugin.js +10 -6
  3. package/dist/cjs/ui/ElementRail/index.js +3 -3
  4. package/dist/cjs/ui/ToolbarInsertBlock/block-insert-menu.js +9 -27
  5. package/dist/cjs/ui/ToolbarInsertBlock/create-items.js +2 -4
  6. package/dist/cjs/ui/ToolbarInsertBlock/index.js +7 -9
  7. package/dist/cjs/ui/ToolbarInsertBlock/item.js +26 -6
  8. package/dist/es2019/plugin.js +10 -6
  9. package/dist/es2019/ui/ElementRail/index.js +3 -3
  10. package/dist/es2019/ui/ToolbarInsertBlock/block-insert-menu.js +9 -27
  11. package/dist/es2019/ui/ToolbarInsertBlock/create-items.js +2 -4
  12. package/dist/es2019/ui/ToolbarInsertBlock/index.js +8 -9
  13. package/dist/es2019/ui/ToolbarInsertBlock/item.js +22 -6
  14. package/dist/esm/plugin.js +10 -6
  15. package/dist/esm/ui/ElementRail/index.js +3 -3
  16. package/dist/esm/ui/ToolbarInsertBlock/block-insert-menu.js +9 -27
  17. package/dist/esm/ui/ToolbarInsertBlock/create-items.js +2 -4
  18. package/dist/esm/ui/ToolbarInsertBlock/index.js +7 -9
  19. package/dist/esm/ui/ToolbarInsertBlock/item.js +26 -6
  20. package/dist/types/plugin.d.ts +0 -1
  21. package/dist/types/ui/ToolbarInsertBlock/block-insert-menu.d.ts +0 -1
  22. package/dist/types/ui/ToolbarInsertBlock/types.d.ts +1 -2
  23. package/dist/types-ts4.5/plugin.d.ts +0 -1
  24. package/dist/types-ts4.5/ui/ToolbarInsertBlock/block-insert-menu.d.ts +0 -1
  25. package/dist/types-ts4.5/ui/ToolbarInsertBlock/types.d.ts +1 -2
  26. package/package.json +5 -4
  27. package/dist/cjs/ui/ToolbarInsertBlock/block-insert-menu-legacy.js +0 -42
  28. package/dist/cjs/ui/ToolbarInsertBlock/sort-items.js +0 -30
  29. package/dist/es2019/ui/ToolbarInsertBlock/block-insert-menu-legacy.js +0 -35
  30. package/dist/es2019/ui/ToolbarInsertBlock/sort-items.js +0 -22
  31. package/dist/esm/ui/ToolbarInsertBlock/block-insert-menu-legacy.js +0 -35
  32. package/dist/esm/ui/ToolbarInsertBlock/sort-items.js +0 -24
  33. package/dist/types/ui/ToolbarInsertBlock/block-insert-menu-legacy.d.ts +0 -21
  34. package/dist/types/ui/ToolbarInsertBlock/sort-items.d.ts +0 -2
  35. package/dist/types-ts4.5/ui/ToolbarInsertBlock/block-insert-menu-legacy.d.ts +0 -21
  36. package/dist/types-ts4.5/ui/ToolbarInsertBlock/sort-items.d.ts +0 -2
@@ -50,7 +50,7 @@ function handleInsertBlockType(insertCodeBlock, insertPanel, insertBlockQuote) {
50
50
  };
51
51
  }
52
52
  export var insertBlockPlugin = function insertBlockPlugin(_ref) {
53
- var _api$primaryToolbar;
53
+ var _api$primaryToolbar, _options$UNSAFE_edito3;
54
54
  var _ref$config = _ref.config,
55
55
  options = _ref$config === void 0 ? {} : _ref$config,
56
56
  api = _ref.api;
@@ -119,7 +119,10 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
119
119
  }
120
120
  },
121
121
  pmPlugins: function pmPlugins() {
122
- if (!editorExperiment('insert-menu-in-right-rail', true)) {
122
+ var _options$UNSAFE_edito;
123
+ if (
124
+ // @ts-ignore
125
+ !['full-page', 'full-width'].includes((_options$UNSAFE_edito = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito !== void 0 ? _options$UNSAFE_edito : '') || !editorExperiment('insert-menu-in-right-rail', true)) {
123
126
  [];
124
127
  }
125
128
  return [{
@@ -203,11 +206,11 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
203
206
  // If we decide to ship the feature, we will consider a separate plugin if needed.
204
207
  // Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3983684902/Experiment+Drive+element+usage+via+element+templates
205
208
  quickInsert: function quickInsert(intl) {
206
- var _options$UNSAFE_edito;
209
+ var _options$UNSAFE_edito2;
207
210
  var locale = intl.locale;
208
211
  var isEligible = locale.startsWith('en') &&
209
212
  // @ts-ignore
210
- ['full-page', 'full-width'].includes((_options$UNSAFE_edito = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito !== void 0 ? _options$UNSAFE_edito : '');
213
+ ['full-page', 'full-width'].includes((_options$UNSAFE_edito2 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito2 !== void 0 ? _options$UNSAFE_edito2 : '');
211
214
  if (isEligible && editorExperiment('element-level-templates', true, {
212
215
  exposure: true
213
216
  })) {
@@ -225,7 +228,9 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
225
228
  },
226
229
  primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
227
230
  };
228
- if (editorExperiment('insert-menu-in-right-rail', true)) {
231
+ if (
232
+ // @ts-ignore
233
+ ['full-page', 'full-width'].includes((_options$UNSAFE_edito3 = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito3 !== void 0 ? _options$UNSAFE_edito3 : '') && editorExperiment('insert-menu-in-right-rail', true)) {
229
234
  plugin.pluginsOptions.contextPanel = function (state) {
230
235
  // api.getSharedState() will have an outdated reference to editorState on first mount of this component
231
236
  // so instead just rely on plugin key as we don't need to be reactive to changes here
@@ -317,7 +322,6 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
317
322
  insertMenuItems: options.insertMenuItems,
318
323
  editorActions: editorActions,
319
324
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
320
- replacePlusMenuWithElementBrowser: options.replacePlusMenuWithElementBrowser,
321
325
  showElementBrowserLink: options.showElementBrowserLink,
322
326
  showSeparator: !isLastItem && toolbarSize <= ToolbarSize.S,
323
327
  registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions
@@ -101,14 +101,14 @@ export var InsertMenuRail = function InsertMenuRail(_ref) {
101
101
  (_api$emoji = api.emoji) === null || _api$emoji === void 0 || _api$emoji.actions.openTypeAhead(inputMethod);
102
102
  break;
103
103
  case 'codeblock':
104
- (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 || _api$codeBlock.actions.insertCodeBlock(inputMethod);
104
+ (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 || _api$codeBlock.actions.insertCodeBlock(inputMethod)(state, dispatch);
105
105
  break;
106
106
  case 'blockquote':
107
107
  // @ts-expect-error
108
- (_api$blockType = api.blockType) === null || _api$blockType === void 0 || _api$blockType.actions.insertBlockQuote(inputMethod);
108
+ (_api$blockType = api.blockType) === null || _api$blockType === void 0 || _api$blockType.actions.insertBlockQuote(inputMethod)(state, dispatch);
109
109
  break;
110
110
  case 'panel':
111
- (_api$panel = api.panel) === null || _api$panel === void 0 || _api$panel.actions.insertPanel(inputMethod);
111
+ (_api$panel = api.panel) === null || _api$panel === void 0 || _api$panel.actions.insertPanel(inputMethod)(state, dispatch);
112
112
  break;
113
113
  case 'action':
114
114
  // @ts-expect-error
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import { BlockInsertElementBrowser } from './block-insert-element-browser';
3
- import { BlockInsertMenuLegacy } from './block-insert-menu-legacy';
4
3
  import { DropDownButton } from './dropdown-button';
5
4
  export var BlockInsertMenu = function BlockInsertMenu(props) {
6
5
  if (props.items.length === 0) {
@@ -20,40 +19,23 @@ export var BlockInsertMenu = function BlockInsertMenu(props) {
20
19
  "aria-keyshortcuts": "/"
21
20
  }));
22
21
  }
23
- if (props.replacePlusMenuWithElementBrowser) {
24
- return /*#__PURE__*/React.createElement(BlockInsertElementBrowser, {
25
- disabled: props.disabled,
26
- editorView: props.editorView,
27
- items: props.items,
28
- label: props.label,
29
- onClick: props.onClick,
30
- onKeyDown: props.onKeyDown,
31
- onInsert: props.onInsert,
32
- onRef: props.onPlusButtonRef,
33
- open: props.open,
34
- plusButtonRef: props.plusButtonRef,
35
- popupsBoundariesElement: props.popupsBoundariesElement,
36
- popupsMountPoint: props.popupsMountPoint,
37
- popupsScrollableElement: props.popupsScrollableElement,
38
- spacing: props.spacing,
39
- togglePlusMenuVisibility: props.togglePlusMenuVisibility,
40
- showElementBrowserLink: props.showElementBrowserLink,
41
- pluginInjectionApi: props.pluginInjectionApi
42
- });
43
- }
44
- return /*#__PURE__*/React.createElement(BlockInsertMenuLegacy, {
22
+ return /*#__PURE__*/React.createElement(BlockInsertElementBrowser, {
45
23
  disabled: props.disabled,
24
+ editorView: props.editorView,
46
25
  items: props.items,
47
26
  label: props.label,
48
27
  onClick: props.onClick,
49
28
  onKeyDown: props.onKeyDown,
50
- onItemActivated: props.onItemActivated,
51
- onOpenChange: props.onOpenChange,
52
- onRef: props.onRef,
29
+ onInsert: props.onInsert,
30
+ onRef: props.onPlusButtonRef,
53
31
  open: props.open,
32
+ plusButtonRef: props.plusButtonRef,
54
33
  popupsBoundariesElement: props.popupsBoundariesElement,
55
34
  popupsMountPoint: props.popupsMountPoint,
56
35
  popupsScrollableElement: props.popupsScrollableElement,
57
- spacing: props.spacing
36
+ spacing: props.spacing,
37
+ togglePlusMenuVisibility: props.togglePlusMenuVisibility,
38
+ showElementBrowserLink: props.showElementBrowserLink,
39
+ pluginInjectionApi: props.pluginInjectionApi
58
40
  });
59
41
  };
@@ -10,7 +10,6 @@ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
10
10
  import { action, blockquote, codeblock, date, decision, emoji, expand, horizontalrule, imageUpload, layout, link, media, mention, more, panel, placeholder, status, table, tableSelector } from './item';
11
11
  import { messages } from './messages';
12
12
  import { shallowEquals } from './shallow-equals';
13
- import { sortItems } from './sort-items';
14
13
  var buttonToItem = memoize(function (button) {
15
14
  return _objectSpread(_objectSpread({}, button), {}, {
16
15
  title: /*#__PURE__*/React.createElement(ToolTipContent, {
@@ -56,8 +55,7 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
56
55
  expandEnabled = config.expandEnabled,
57
56
  numberOfButtons = config.numberOfButtons,
58
57
  schema = config.schema,
59
- formatMessage = config.formatMessage,
60
- isNewMenuEnabled = config.isNewMenuEnabled;
58
+ formatMessage = config.formatMessage;
61
59
  var items = [];
62
60
  if (actionSupported) {
63
61
  items.push(action({
@@ -216,7 +214,7 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
216
214
  var name = _ref.value.name;
217
215
  return name !== 'table selector';
218
216
  });
219
- var dropdownItems = (!isNewMenuEnabled ? sortItems(remainingItems) : remainingItems).map(buttonToDropdownItem(formatMessage(messages.insertMenu)));
217
+ var dropdownItems = remainingItems.map(buttonToDropdownItem(formatMessage(messages.insertMenu)));
220
218
  return [buttonItems, dropdownItems];
221
219
  };
222
220
  export var createItems = memoizeOne(createInsertBlockItems, shallowEquals);
@@ -204,11 +204,12 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
204
204
  (_this$unregisterToggl = (_this2 = _this).unregisterToggleDropdownMenuOptions) === null || _this$unregisterToggl === void 0 || _this$unregisterToggl.call(_this2);
205
205
  });
206
206
  _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
207
+ var _this$props$editorApp;
207
208
  /**
208
209
  * For insert menu in right rail experiment
209
210
  * - Clean up ticket ED-24801
210
211
  */
211
- if (editorExperiment('insert-menu-in-right-rail', true, {
212
+ if (['full-page', 'full-width'].includes((_this$props$editorApp = _this.props.editorAppearance) !== null && _this$props$editorApp !== void 0 ? _this$props$editorApp : '') && editorExperiment('insert-menu-in-right-rail', true, {
212
213
  exposure: true
213
214
  })) {
214
215
  var pluginInjectionApi = _this.props.pluginInjectionApi;
@@ -236,11 +237,12 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
236
237
  });
237
238
  _defineProperty(_assertThisInitialized(_this), "handleOpenByKeyboard", function (event) {
238
239
  if (event.key === 'Enter' || event.key === ' ') {
240
+ var _this$props$editorApp2;
239
241
  /**
240
242
  * For insert menu in right rail experiment
241
243
  * - Clean up ticket ED-24801
242
244
  */
243
- if (editorExperiment('insert-menu-in-right-rail', true, {
245
+ if (['full-page', 'full-width'].includes((_this$props$editorApp2 = _this.props.editorAppearance) !== null && _this$props$editorApp2 !== void 0 ? _this$props$editorApp2 : '') && editorExperiment('insert-menu-in-right-rail', true, {
244
246
  exposure: true
245
247
  })) {
246
248
  var _this$props$pluginInj;
@@ -558,13 +560,12 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
558
560
  popupsMountPoint = _this$props11.popupsMountPoint,
559
561
  popupsBoundariesElement = _this$props11.popupsBoundariesElement,
560
562
  popupsScrollableElement = _this$props11.popupsScrollableElement,
561
- emojiProvider = _this$props11.emojiProvider,
562
- replacePlusMenuWithElementBrowser = _this$props11.replacePlusMenuWithElementBrowser;
563
+ emojiProvider = _this$props11.emojiProvider;
563
564
  var dropdownEmoji = this.state.dropdownItems.some(function (_ref7) {
564
565
  var name = _ref7.value.name;
565
566
  return name === 'emoji';
566
567
  });
567
- var dropDownButtonRef = replacePlusMenuWithElementBrowser ? this.plusButtonRef : this.dropdownButtonRef;
568
+ var dropDownButtonRef = this.plusButtonRef;
568
569
  var ref = dropdownEmoji ? dropDownButtonRef : this.emojiButtonRef;
569
570
  if (!emojiPickerOpen || !ref || !emojiProvider) {
570
571
  return null;
@@ -649,7 +650,6 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
649
650
  _tableSelectorButton5,
650
651
  _tableSelectorButton6,
651
652
  _this$props$isDisable,
652
- _this$props$replacePl,
653
653
  _this$props$pluginInj3;
654
654
  var _this$state2 = this.state,
655
655
  buttons = _this$state2.buttons,
@@ -778,7 +778,6 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
778
778
  onInsert: this.insertInsertMenuItem,
779
779
  onOpenChange: this.onOpenChange,
780
780
  togglePlusMenuVisibility: this.togglePlusMenuVisibility,
781
- replacePlusMenuWithElementBrowser: (_this$props$replacePl = this.props.replacePlusMenuWithElementBrowser) !== null && _this$props$replacePl !== void 0 ? _this$props$replacePl : false,
782
781
  showElementBrowserLink: this.props.showElementBrowserLink || false,
783
782
  pluginInjectionApi: this.props.pluginInjectionApi
784
783
  })), !((_this$props$pluginInj3 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj3 !== void 0 && _this$props$pluginInj3.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
@@ -818,8 +817,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
818
817
  insertMenuItems: props.insertMenuItems,
819
818
  schema: props.editorView.state.schema,
820
819
  numberOfButtons: props.buttons,
821
- formatMessage: props.intl.formatMessage,
822
- isNewMenuEnabled: props.replacePlusMenuWithElementBrowser
820
+ formatMessage: props.intl.formatMessage
823
821
  }),
824
822
  _createItems2 = _slicedToArray(_createItems, 2),
825
823
  buttons = _createItems2[0],
@@ -9,9 +9,10 @@ import { jsx } from '@emotion/react';
9
9
  import memoizeOne from 'memoize-one';
10
10
  import { addLink, getAriaKeyshortcuts, toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
11
11
  import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
12
+ import FieldTextIcon from '@atlaskit/icon-lab/core/field-text';
13
+ import StatusIcon from '@atlaskit/icon-lab/core/status';
12
14
  import AngleBracketsIcon from '@atlaskit/icon/core/migration/angle-brackets--editor-code';
13
15
  import CalendarIcon from '@atlaskit/icon/core/migration/calendar--editor-date';
14
- import CheckboxCheckedIcon from '@atlaskit/icon/core/migration/checkbox-checked--editor-task';
15
16
  import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
16
17
  import EmojiIcon from '@atlaskit/icon/core/migration/emoji--editor-emoji';
17
18
  import GridIcon from '@atlaskit/icon/core/migration/grid--editor-table';
@@ -23,8 +24,10 @@ import MentionIcon from '@atlaskit/icon/core/migration/mention--editor-mention';
23
24
  import HorizontalRuleIcon from '@atlaskit/icon/core/migration/minus--editor-horizontal-rule';
24
25
  import QuotationMarkIcon from '@atlaskit/icon/core/migration/quotation-mark--quote';
25
26
  import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
27
+ import TaskIcon from '@atlaskit/icon/core/task';
28
+ import CheckboxCheckedIconLegacy from '@atlaskit/icon/glyph/editor/task';
26
29
  import PlaceholderTextIcon from '@atlaskit/icon/glyph/media-services/text';
27
- import StatusIcon from '@atlaskit/icon/glyph/status';
30
+ import StatusIconLegacy from '@atlaskit/icon/glyph/status';
28
31
  import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
29
32
  import ExpandNodeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-circle';
30
33
  import { shallowEquals } from './shallow-equals';
@@ -62,7 +65,14 @@ export var action = mem(function (init) {
62
65
  disabled: init.disabled,
63
66
  name: 'action',
64
67
  shortcut: '[]',
65
- Icon: CheckboxCheckedIcon,
68
+ Icon: function Icon() {
69
+ return jsx(TaskIcon, {
70
+ label: "",
71
+ color: "currentColor",
72
+ spacing: "spacious",
73
+ LEGACY_fallbackIcon: CheckboxCheckedIconLegacy
74
+ });
75
+ },
66
76
  'aria-keyshortcuts': '[ ] Space'
67
77
  });
68
78
  });
@@ -236,8 +246,11 @@ export var placeholder = mem(function (init) {
236
246
  disabled: init.disabled,
237
247
  name: 'placeholder text',
238
248
  Icon: function Icon() {
239
- return jsx(PlaceholderTextIcon, {
240
- label: ""
249
+ return jsx(FieldTextIcon, {
250
+ label: "",
251
+ spacing: "spacious",
252
+ color: "currentColor",
253
+ LEGACY_fallbackIcon: PlaceholderTextIcon
241
254
  });
242
255
  }
243
256
  });
@@ -248,7 +261,14 @@ export var status = mem(function (init) {
248
261
  tooltipDescription: init.tooltipDescription,
249
262
  disabled: init.disabled,
250
263
  name: 'status',
251
- Icon: StatusIcon
264
+ Icon: function Icon() {
265
+ return jsx(StatusIcon, {
266
+ label: "",
267
+ color: "currentColor",
268
+ spacing: "spacious",
269
+ LEGACY_fallbackIcon: StatusIconLegacy
270
+ });
271
+ }
252
272
  });
253
273
  });
254
274
  export var more = mem(function (init) {
@@ -6,7 +6,6 @@ export interface InsertBlockOptions {
6
6
  insertMenuItems?: any;
7
7
  horizontalRuleEnabled?: boolean;
8
8
  nativeStatusSupported?: boolean;
9
- replacePlusMenuWithElementBrowser?: boolean;
10
9
  showElementBrowserLink?: boolean;
11
10
  tableSelectorSupported?: boolean;
12
11
  }
@@ -15,7 +15,6 @@ export interface BlockInsertMenuProps {
15
15
  popupsBoundariesElement?: HTMLElement;
16
16
  popupsMountPoint?: HTMLElement;
17
17
  popupsScrollableElement?: HTMLElement;
18
- replacePlusMenuWithElementBrowser: boolean;
19
18
  spacing: 'none' | 'default';
20
19
  showElementBrowserLink: boolean;
21
20
  onRef(el: HTMLElement): void;
@@ -42,12 +42,11 @@ export interface Props {
42
42
  insertMenuItems?: MenuItem[];
43
43
  showElementBrowserLink?: boolean;
44
44
  showSeparator?: boolean;
45
- replacePlusMenuWithElementBrowser?: boolean;
46
45
  onShowMediaPicker?: () => void;
47
46
  onInsertBlockType?: (name: string) => Command;
48
47
  onInsertMacroFromMacroBrowser?: (macroProvider: MacroProvider, node?: PMNode, isEditing?: boolean) => (view: EditorView) => void;
49
48
  dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
50
- pluginInjectionApi?: ExtractInjectionAPI<InsertBlockPlugin>;
49
+ pluginInjectionApi: ExtractInjectionAPI<InsertBlockPlugin> | undefined;
51
50
  mentionsDisabled?: boolean;
52
51
  editorAppearance?: EditorAppearance;
53
52
  }
@@ -6,7 +6,6 @@ export interface InsertBlockOptions {
6
6
  insertMenuItems?: any;
7
7
  horizontalRuleEnabled?: boolean;
8
8
  nativeStatusSupported?: boolean;
9
- replacePlusMenuWithElementBrowser?: boolean;
10
9
  showElementBrowserLink?: boolean;
11
10
  tableSelectorSupported?: boolean;
12
11
  }
@@ -15,7 +15,6 @@ export interface BlockInsertMenuProps {
15
15
  popupsBoundariesElement?: HTMLElement;
16
16
  popupsMountPoint?: HTMLElement;
17
17
  popupsScrollableElement?: HTMLElement;
18
- replacePlusMenuWithElementBrowser: boolean;
19
18
  spacing: 'none' | 'default';
20
19
  showElementBrowserLink: boolean;
21
20
  onRef(el: HTMLElement): void;
@@ -42,12 +42,11 @@ export interface Props {
42
42
  insertMenuItems?: MenuItem[];
43
43
  showElementBrowserLink?: boolean;
44
44
  showSeparator?: boolean;
45
- replacePlusMenuWithElementBrowser?: boolean;
46
45
  onShowMediaPicker?: () => void;
47
46
  onInsertBlockType?: (name: string) => Command;
48
47
  onInsertMacroFromMacroBrowser?: (macroProvider: MacroProvider, node?: PMNode, isEditing?: boolean) => (view: EditorView) => void;
49
48
  dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
50
- pluginInjectionApi?: ExtractInjectionAPI<InsertBlockPlugin>;
49
+ pluginInjectionApi: ExtractInjectionAPI<InsertBlockPlugin> | undefined;
51
50
  mentionsDisabled?: boolean;
52
51
  editorAppearance?: EditorAppearance;
53
52
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-insert-block",
3
- "version": "1.14.5",
3
+ "version": "2.0.0",
4
4
  "description": "Insert block plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,12 +32,12 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/button": "^20.1.0",
35
- "@atlaskit/editor-common": "^89.1.0",
35
+ "@atlaskit/editor-common": "^89.2.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.8.0",
37
37
  "@atlaskit/editor-plugin-block-type": "^3.14.0",
38
38
  "@atlaskit/editor-plugin-code-block": "^3.3.0",
39
39
  "@atlaskit/editor-plugin-date": "^2.3.0",
40
- "@atlaskit/editor-plugin-emoji": "^2.5.0",
40
+ "@atlaskit/editor-plugin-emoji": "^2.6.0",
41
41
  "@atlaskit/editor-plugin-expand": "^2.6.0",
42
42
  "@atlaskit/editor-plugin-extension": "^1.14.0",
43
43
  "@atlaskit/editor-plugin-feature-flags": "^1.2.0",
@@ -46,7 +46,7 @@
46
46
  "@atlaskit/editor-plugin-layout": "^1.7.0",
47
47
  "@atlaskit/editor-plugin-media": "^1.31.0",
48
48
  "@atlaskit/editor-plugin-mentions": "^2.6.0",
49
- "@atlaskit/editor-plugin-panel": "^2.3.0",
49
+ "@atlaskit/editor-plugin-panel": "^2.4.0",
50
50
  "@atlaskit/editor-plugin-placeholder-text": "^1.7.0",
51
51
  "@atlaskit/editor-plugin-primary-toolbar": "^2.0.0",
52
52
  "@atlaskit/editor-plugin-quick-insert": "^1.3.0",
@@ -60,6 +60,7 @@
60
60
  "@atlaskit/emoji": "^67.7.0",
61
61
  "@atlaskit/heading": "2.4.5",
62
62
  "@atlaskit/icon": "^22.18.0",
63
+ "@atlaskit/icon-lab": "^0.2.0",
63
64
  "@atlaskit/platform-feature-flags": "^0.3.0",
64
65
  "@atlaskit/primitives": "^12.1.0",
65
66
  "@atlaskit/theme": "^13.0.0",
@@ -1,42 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.BlockInsertMenuLegacy = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
- var _uiMenu = require("@atlaskit/editor-common/ui-menu");
10
- var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
- var _dropdownButton = require("./dropdown-button");
12
- var BlockInsertMenuLegacy = exports.BlockInsertMenuLegacy = function BlockInsertMenuLegacy(props) {
13
- var items = props.items;
14
- var dropdownItems = _react.default.useMemo(function () {
15
- return [{
16
- items: items
17
- }];
18
- }, [items]);
19
- return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenuWithKeyboardNavigation, {
20
- items: dropdownItems,
21
- onItemActivated: props.onItemActivated,
22
- onOpenChange: props.onOpenChange,
23
- mountTo: props.popupsMountPoint,
24
- boundariesElement: props.popupsBoundariesElement,
25
- scrollableElement: props.popupsScrollableElement,
26
- isOpen: props.open,
27
- fitHeight: 188,
28
- fitWidth: 175,
29
- zIndex: _editorSharedStyles.akEditorMenuZIndex
30
- }, /*#__PURE__*/_react.default.createElement(_dropdownButton.DropDownButton, {
31
- "aria-expanded": props.open,
32
- "aria-haspopup": true,
33
- handleRef: props.onRef,
34
- selected: props.open,
35
- disabled: props.disabled,
36
- onClick: props.onClick,
37
- onKeyDown: props.onKeyDown,
38
- spacing: props.spacing,
39
- label: props.label,
40
- "aria-keyshortcuts": "/"
41
- }));
42
- };
@@ -1,30 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.sortItems = void 0;
7
- var endPositionNames = ['macro-browser', 'slash-onboarding'];
8
- var isMacro = function isMacro(item) {
9
- return typeof item.content === 'string' && item.content.includes('macro');
10
- };
11
- var sortItems = exports.sortItems = function sortItems(items) {
12
- return items.sort(function (a, b) {
13
- if (endPositionNames.includes(a.value.name) && endPositionNames.includes(b.value.name)) {
14
- return endPositionNames.indexOf(a.value.name) - endPositionNames.indexOf(b.value.name);
15
- }
16
- if (endPositionNames.includes(b.value.name)) {
17
- return -1;
18
- }
19
- if (endPositionNames.includes(a.value.name)) {
20
- return 1;
21
- }
22
- if (isMacro(a) && !isMacro(b)) {
23
- return 1;
24
- }
25
- if (isMacro(b) && !isMacro(a)) {
26
- return -1;
27
- }
28
- return a.content < b.content ? -1 : 1;
29
- });
30
- };
@@ -1,35 +0,0 @@
1
- import React from 'react';
2
- import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
3
- import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
4
- import { DropDownButton } from './dropdown-button';
5
- export const BlockInsertMenuLegacy = props => {
6
- const {
7
- items
8
- } = props;
9
- const dropdownItems = React.useMemo(() => [{
10
- items
11
- }], [items]);
12
- return /*#__PURE__*/React.createElement(DropdownMenu, {
13
- items: dropdownItems,
14
- onItemActivated: props.onItemActivated,
15
- onOpenChange: props.onOpenChange,
16
- mountTo: props.popupsMountPoint,
17
- boundariesElement: props.popupsBoundariesElement,
18
- scrollableElement: props.popupsScrollableElement,
19
- isOpen: props.open,
20
- fitHeight: 188,
21
- fitWidth: 175,
22
- zIndex: akEditorMenuZIndex
23
- }, /*#__PURE__*/React.createElement(DropDownButton, {
24
- "aria-expanded": props.open,
25
- "aria-haspopup": true,
26
- handleRef: props.onRef,
27
- selected: props.open,
28
- disabled: props.disabled,
29
- onClick: props.onClick,
30
- onKeyDown: props.onKeyDown,
31
- spacing: props.spacing,
32
- label: props.label,
33
- "aria-keyshortcuts": "/"
34
- }));
35
- };
@@ -1,22 +0,0 @@
1
- const endPositionNames = ['macro-browser', 'slash-onboarding'];
2
- const isMacro = item => typeof item.content === 'string' && item.content.includes('macro');
3
- export const sortItems = items => {
4
- return items.sort((a, b) => {
5
- if (endPositionNames.includes(a.value.name) && endPositionNames.includes(b.value.name)) {
6
- return endPositionNames.indexOf(a.value.name) - endPositionNames.indexOf(b.value.name);
7
- }
8
- if (endPositionNames.includes(b.value.name)) {
9
- return -1;
10
- }
11
- if (endPositionNames.includes(a.value.name)) {
12
- return 1;
13
- }
14
- if (isMacro(a) && !isMacro(b)) {
15
- return 1;
16
- }
17
- if (isMacro(b) && !isMacro(a)) {
18
- return -1;
19
- }
20
- return a.content < b.content ? -1 : 1;
21
- });
22
- };
@@ -1,35 +0,0 @@
1
- import React from 'react';
2
- import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
3
- import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
4
- import { DropDownButton } from './dropdown-button';
5
- export var BlockInsertMenuLegacy = function BlockInsertMenuLegacy(props) {
6
- var items = props.items;
7
- var dropdownItems = React.useMemo(function () {
8
- return [{
9
- items: items
10
- }];
11
- }, [items]);
12
- return /*#__PURE__*/React.createElement(DropdownMenu, {
13
- items: dropdownItems,
14
- onItemActivated: props.onItemActivated,
15
- onOpenChange: props.onOpenChange,
16
- mountTo: props.popupsMountPoint,
17
- boundariesElement: props.popupsBoundariesElement,
18
- scrollableElement: props.popupsScrollableElement,
19
- isOpen: props.open,
20
- fitHeight: 188,
21
- fitWidth: 175,
22
- zIndex: akEditorMenuZIndex
23
- }, /*#__PURE__*/React.createElement(DropDownButton, {
24
- "aria-expanded": props.open,
25
- "aria-haspopup": true,
26
- handleRef: props.onRef,
27
- selected: props.open,
28
- disabled: props.disabled,
29
- onClick: props.onClick,
30
- onKeyDown: props.onKeyDown,
31
- spacing: props.spacing,
32
- label: props.label,
33
- "aria-keyshortcuts": "/"
34
- }));
35
- };
@@ -1,24 +0,0 @@
1
- var endPositionNames = ['macro-browser', 'slash-onboarding'];
2
- var isMacro = function isMacro(item) {
3
- return typeof item.content === 'string' && item.content.includes('macro');
4
- };
5
- export var sortItems = function sortItems(items) {
6
- return items.sort(function (a, b) {
7
- if (endPositionNames.includes(a.value.name) && endPositionNames.includes(b.value.name)) {
8
- return endPositionNames.indexOf(a.value.name) - endPositionNames.indexOf(b.value.name);
9
- }
10
- if (endPositionNames.includes(b.value.name)) {
11
- return -1;
12
- }
13
- if (endPositionNames.includes(a.value.name)) {
14
- return 1;
15
- }
16
- if (isMacro(a) && !isMacro(b)) {
17
- return 1;
18
- }
19
- if (isMacro(b) && !isMacro(a)) {
20
- return -1;
21
- }
22
- return a.content < b.content ? -1 : 1;
23
- });
24
- };
@@ -1,21 +0,0 @@
1
- import React from 'react';
2
- import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
3
- import type { BlockMenuItem } from './create-items';
4
- export interface BlockInsertMenuLegacyProps {
5
- disabled: boolean;
6
- spacing: 'none' | 'default';
7
- label: string;
8
- open: boolean;
9
- items: BlockMenuItem[];
10
- popupsMountPoint?: HTMLElement;
11
- popupsBoundariesElement?: HTMLElement;
12
- popupsScrollableElement?: HTMLElement;
13
- onClick: React.MouseEventHandler;
14
- onKeyDown?: React.KeyboardEventHandler;
15
- onRef(el: HTMLElement): void;
16
- onItemActivated(attrs: {
17
- item: MenuItem;
18
- }): void;
19
- onOpenChange(attrs: any): void;
20
- }
21
- export declare const BlockInsertMenuLegacy: (props: BlockInsertMenuLegacyProps) => JSX.Element;
@@ -1,2 +0,0 @@
1
- import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
2
- export declare const sortItems: (items: MenuItem[]) => MenuItem[];
@@ -1,21 +0,0 @@
1
- import React from 'react';
2
- import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
3
- import type { BlockMenuItem } from './create-items';
4
- export interface BlockInsertMenuLegacyProps {
5
- disabled: boolean;
6
- spacing: 'none' | 'default';
7
- label: string;
8
- open: boolean;
9
- items: BlockMenuItem[];
10
- popupsMountPoint?: HTMLElement;
11
- popupsBoundariesElement?: HTMLElement;
12
- popupsScrollableElement?: HTMLElement;
13
- onClick: React.MouseEventHandler;
14
- onKeyDown?: React.KeyboardEventHandler;
15
- onRef(el: HTMLElement): void;
16
- onItemActivated(attrs: {
17
- item: MenuItem;
18
- }): void;
19
- onOpenChange(attrs: any): void;
20
- }
21
- export declare const BlockInsertMenuLegacy: (props: BlockInsertMenuLegacyProps) => JSX.Element;
@@ -1,2 +0,0 @@
1
- import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
2
- export declare const sortItems: (items: MenuItem[]) => MenuItem[];