@atlaskit/editor-core 178.1.1 → 179.0.0

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/create-items.js

@@ -7,19 +7,20 @@ import { ToolTipContent } from '../../../../keymaps';
 import { sortItems } from './sort-items';
 import { action, link, media, mention, emoji, table, layout, codeblock, panel, blockquote, decision, horizontalrule, expand, date, placeholder, status, more, imageUpload } from './item';
 import { shallowEquals } from './shallow-equals';
-const buttonToItem = memoize(button => ({ ...button,
+const buttonToItem = memoize(button => ({
+  ...button,
   title: /*#__PURE__*/React.createElement(ToolTipContent, {
     description: button.content,
     shortcutOverride: button.shortcut
   })
 }));
-const buttonToDropdownItem = memoizeOne(title => memoize(button => ({ ...button,
+const buttonToDropdownItem = memoizeOne(title => memoize(button => ({
+  ...button,
   title: /*#__PURE__*/React.createElement(ToolTipContent, {
     description: title,
     shortcutOverride: "/"
   })
 })));
-
 const createInsertBlockItems = config => {
   const {
     isTypeAheadAllowed,
@@ -50,7 +51,6 @@ const createInsertBlockItems = config => {
     isNewMenuEnabled
   } = config;
   const items = [];
-
   if (actionSupported) {
     items.push(action({
       content: formatMessage(messages.action),
@@ -58,7 +58,6 @@ const createInsertBlockItems = config => {
       disabled: false
     }));
   }
-
   if (linkSupported) {
     items.push(link({
       content: formatMessage(messages.link),
@@ -67,7 +66,6 @@ const createInsertBlockItems = config => {
       'aria-haspopup': 'dialog'
     }));
   }
-
   if (mediaSupported && mediaUploadsEnabled) {
     items.push(media({
       content: formatMessage(messages.addMediaFiles),
@@ -75,14 +73,12 @@ const createInsertBlockItems = config => {
       disabled: false
     }));
   }
-
   if (imageUploadSupported) {
     items.push(imageUpload({
       content: formatMessage(messages.image),
       disabled: !imageUploadEnabled
     }));
   }
-
   if (mentionsSupported) {
     items.push(mention({
       content: formatMessage(messages.mention),
@@ -91,7 +87,6 @@ const createInsertBlockItems = config => {
       'aria-haspopup': 'listbox'
     }));
   }
-
   if (emojiProvider) {
     items.push(emoji({
       content: formatMessage(messages.emoji),
@@ -100,7 +95,6 @@ const createInsertBlockItems = config => {
       'aria-haspopup': 'dialog'
     }));
   }
-
   if (tableSupported) {
     items.push(table({
       content: formatMessage(messages.table),
@@ -108,7 +102,6 @@ const createInsertBlockItems = config => {
       disabled: false
     }));
   }
-
   if (layoutSectionEnabled) {
     const labelColumns = formatMessage(messages.columns);
     items.push(layout({
@@ -117,12 +110,10 @@ const createInsertBlockItems = config => {
       disabled: false
     }));
   }
-
   const blockTypes = availableWrapperBlockTypes || [];
   const codeblockData = blockTypes.find(type => type.name === 'codeblock');
   const panelData = blockTypes.find(type => type.name === 'panel');
   const blockquoteData = blockTypes.find(type => type.name === 'blockquote');
-
   if (codeblockData) {
     items.push(codeblock({
       content: formatMessage(codeblockData.title),
@@ -131,7 +122,6 @@ const createInsertBlockItems = config => {
       shortcut: '```'
     }));
   }
-
   if (panelData) {
     items.push(panel({
       content: formatMessage(panelData.title),
@@ -139,7 +129,6 @@ const createInsertBlockItems = config => {
       disabled: false
     }));
   }
-
   if (blockquoteData) {
     items.push(blockquote({
       content: formatMessage(blockquoteData.title),
@@ -148,7 +137,6 @@ const createInsertBlockItems = config => {
       shortcut: '>'
     }));
   }
-
   if (decisionSupported) {
     items.push(decision({
       content: formatMessage(messages.decision),
@@ -156,7 +144,6 @@ const createInsertBlockItems = config => {
       disabled: false
     }));
   }
-
   if (horizontalRuleEnabled && schema.nodes.rule) {
     items.push(horizontalrule({
       content: formatMessage(messages.horizontalRule),
@@ -164,7 +151,6 @@ const createInsertBlockItems = config => {
       disabled: false
     }));
   }
-
   if (expandEnabled && schema.nodes.expand) {
     items.push(expand({
       content: formatMessage(messages.expand),
@@ -172,7 +158,6 @@ const createInsertBlockItems = config => {
       disabled: false
     }));
   }
-
   if (dateEnabled) {
     const labelDate = formatMessage(messages.date);
     items.push(date({
@@ -181,14 +166,12 @@ const createInsertBlockItems = config => {
       disabled: false
     }));
   }
-
   if (placeholderTextEnabled) {
     items.push(placeholder({
       content: formatMessage(messages.placeholderText),
       disabled: false
     }));
   }
-
   if (nativeStatusSupported) {
     const labelStatus = formatMessage(messages.status);
     items.push(status({
@@ -197,22 +180,18 @@ const createInsertBlockItems = config => {
       disabled: false
     }));
   }
-
   if (insertMenuItems) {
     items.push(...insertMenuItems);
   }
-
   if (showElementBrowserLink) {
     items.push(more({
       content: formatMessage(messages.viewMore),
       disabled: false
     }));
   }
-
   const buttonItems = items.slice(0, numberOfButtons).map(buttonToItem);
   const remainingItems = items.slice(numberOfButtons);
   const dropdownItems = (!isNewMenuEnabled ? sortItems(remainingItems) : remainingItems).map(buttonToDropdownItem(formatMessage(messages.insertMenu)));
   return [buttonItems, dropdownItems];
 };
-
 export const createItems = memoizeOne(createInsertBlockItems, shallowEquals);

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
@@ -25,49 +24,40 @@ import { createItems } from './create-items';
 import { BlockInsertMenu } from './block-insert-menu';
 import { insertHorizontalRule } from '../../../rule/commands';
 import withOuterListeners from '../../../../ui/with-outer-listeners';
+
 /**
  * Checks if an element is detached (i.e. not in the current document)
  */
-
 const isDetachedElement = el => !document.body.contains(el);
-
 const noop = () => {};
-
 const EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
 export class ToolbarInsertBlock extends React.PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       isPlusMenuOpen: false,
       emojiPickerOpen: false,
       buttons: [],
       dropdownItems: []
     });
-
     _defineProperty(this, "onOpenChange", attrs => {
       const state = {
         isPlusMenuOpen: attrs.isPlusMenuOpen,
         emojiPickerOpen: this.state.emojiPickerOpen
       };
-
       if (this.state.emojiPickerOpen && !attrs.open) {
         state.emojiPickerOpen = false;
       }
-
       this.setState(state, () => {
         const {
           dispatchAnalyticsEvent
         } = this.props;
-
         if (!dispatchAnalyticsEvent) {
           return;
         }
-
         const {
           isPlusMenuOpen
         } = this.state;
-
         if (isPlusMenuOpen) {
           return dispatchAnalyticsEvent({
             action: ACTION.OPENED,
@@ -75,7 +65,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
             eventType: EVENT_TYPE.UI
           });
         }
-
         return dispatchAnalyticsEvent({
           action: ACTION.CLOSED,
           actionSubject: ACTION_SUBJECT.PLUS_MENU,
@@ -83,7 +72,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
         });
       });
     });
-
     _defineProperty(this, "togglePlusMenuVisibility", event => {
       const {
         isPlusMenuOpen
@@ -91,14 +79,11 @@ export class ToolbarInsertBlock extends React.PureComponent {
       this.onOpenChange({
         isPlusMenuOpen: !isPlusMenuOpen
       });
-
       if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
         var _ref;
-
         (_ref = this.plusButtonRef || this.dropdownButtonRef) === null || _ref === void 0 ? void 0 : _ref.focus();
       }
     });
-
     _defineProperty(this, "toggleEmojiPicker", (inputMethod = INPUT_METHOD.TOOLBAR) => {
       this.setState(prevState => ({
         emojiPickerOpen: !prevState.emojiPickerOpen
@@ -107,7 +92,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
           const {
             dispatchAnalyticsEvent
           } = this.props;
-
           if (dispatchAnalyticsEvent) {
             dispatchAnalyticsEvent({
               action: ACTION.OPENED,
@@ -122,14 +106,11 @@ export class ToolbarInsertBlock extends React.PureComponent {
         }
       });
     });
-
     _defineProperty(this, "handleEmojiPressEscape", () => {
       var _this$emojiButtonRef;
-
       this.toggleEmojiPicker(INPUT_METHOD.KEYBOARD);
       (_this$emojiButtonRef = this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 ? void 0 : _this$emojiButtonRef.focus();
     });
-
     _defineProperty(this, "handleEmojiClickOutside", e => {
       // Ignore click events for detached elements.
       // Workaround for FS-1322 - where two onClicks fire - one when the upload button is
@@ -139,35 +120,27 @@ export class ToolbarInsertBlock extends React.PureComponent {
         this.toggleEmojiPicker(INPUT_METHOD.TOOLBAR);
       }
     });
-
     _defineProperty(this, "handleEmojiButtonRef", button => {
       const ref = ReactDOM.findDOMNode(button);
-
       if (ref) {
         this.emojiButtonRef = ref;
       }
     });
-
     _defineProperty(this, "handlePlusButtonRef", button => {
       const ref = ReactDOM.findDOMNode(button);
-
       if (ref) {
         this.plusButtonRef = ref;
       }
     });
-
     _defineProperty(this, "handleDropDownButtonRef", button => {
       const ref = ReactDOM.findDOMNode(button);
-
       if (ref) {
         this.dropdownButtonRef = ref;
       }
     });
-
     _defineProperty(this, "handleClick", () => {
       this.togglePlusMenuVisibility();
     });
-
     _defineProperty(this, "toggleLinkPanel", inputMethod => {
       const {
         editorView
@@ -175,29 +148,23 @@ export class ToolbarInsertBlock extends React.PureComponent {
       showLinkToolbar(inputMethod)(editorView.state, editorView.dispatch);
       return true;
     });
-
     _defineProperty(this, "insertMention", inputMethod => {
       const {
         editorView
       } = this.props;
-
       if (!editorView) {
         return true;
       }
-
       createTypeAheadTools(editorView).openMention(inputMethod);
       return true;
     });
-
     _defineProperty(this, "insertTable", inputMethod => {
       const {
         insertNodeAPI
       } = this.props;
-
       if (!insertNodeAPI) {
         return false;
       }
-
       return insertNodeAPI.insert({
         node: 'table',
         options: {
@@ -214,7 +181,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
         }
       });
     });
-
     _defineProperty(this, "createDate", inputMethod => {
       const {
         editorView
@@ -222,7 +188,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
       insertDate(undefined, inputMethod)(editorView.state, editorView.dispatch);
       return true;
     });
-
     _defineProperty(this, "createPlaceholderText", () => {
       const {
         editorView
@@ -230,7 +195,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
       showPlaceholderFloatingToolbar(editorView.state, editorView.dispatch);
       return true;
     });
-
     _defineProperty(this, "insertLayoutColumns", inputMethod => {
       const {
         editorView
@@ -238,7 +202,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
       insertLayoutColumnsWithAnalytics(inputMethod)(editorView.state, editorView.dispatch);
       return true;
     });
-
     _defineProperty(this, "createStatus", inputMethod => {
       const {
         editorView
@@ -246,16 +209,13 @@ export class ToolbarInsertBlock extends React.PureComponent {
       updateStatusWithAnalytics(inputMethod)(editorView.state, editorView.dispatch);
       return true;
     });
-
     _defineProperty(this, "openMediaPicker", inputMethod => {
       const {
         onShowMediaPicker,
         dispatchAnalyticsEvent
       } = this.props;
-
       if (onShowMediaPicker) {
         onShowMediaPicker();
-
         if (dispatchAnalyticsEvent) {
           dispatchAnalyticsEvent({
             action: ACTION.OPENED,
@@ -268,10 +228,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
           });
         }
       }
-
       return true;
     });
-
     _defineProperty(this, "insertTaskDecision", (name, inputMethod) => () => {
       const {
         editorView: {
@@ -282,7 +240,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
       const listType = name === 'action' ? 'taskList' : 'decisionList';
       return insertTaskDecisionCommand(listType, inputMethod)(state, dispatch);
     });
-
     _defineProperty(this, "insertHorizontalRule", inputMethod => {
       const {
         editorView: {
@@ -292,7 +249,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
       } = this.props;
       return insertHorizontalRule(inputMethod)(state, dispatch);
     });
-
     _defineProperty(this, "insertExpand", () => {
       const {
         state,
@@ -300,7 +256,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
       } = this.props.editorView;
       return insertExpand(state, dispatch);
     });
-
     _defineProperty(this, "insertBlockType", itemName => () => {
       const {
         editorView,
@@ -313,18 +268,15 @@ export class ToolbarInsertBlock extends React.PureComponent {
       onInsertBlockType(itemName)(state, dispatch);
       return true;
     });
-
     _defineProperty(this, "handleSelectedEmoji", emojiId => {
       this.props.editorView.focus();
       insertEmoji(emojiId, INPUT_METHOD.PICKER)(this.props.editorView.state, this.props.editorView.dispatch);
       this.toggleEmojiPicker();
       return true;
     });
-
     _defineProperty(this, "openElementBrowser", () => {
       openElementBrowserModal()(this.props.editorView.state, this.props.editorView.dispatch);
     });
-
     _defineProperty(this, "onItemActivated", ({
       item,
       inputMethod
@@ -334,21 +286,19 @@ export class ToolbarInsertBlock extends React.PureComponent {
         editorActions,
         handleImageUpload,
         expandEnabled
-      } = this.props; // need to do this before inserting nodes so scrollIntoView works properly
+      } = this.props;
 
+      // need to do this before inserting nodes so scrollIntoView works properly
       if (!editorView.hasFocus()) {
         editorView.focus();
       }
-
       switch (item.value.name) {
         case 'link':
           this.toggleLinkPanel(inputMethod);
           break;
-
         case 'table':
           this.insertTable(inputMethod);
           break;
-
         case 'image upload':
           if (handleImageUpload) {
             const {
@@ -357,58 +307,46 @@ export class ToolbarInsertBlock extends React.PureComponent {
             } = editorView;
             handleImageUpload()(state, dispatch);
           }
-
           break;
-
         case 'media':
           this.openMediaPicker(inputMethod);
           break;
-
         case 'mention':
           this.insertMention(inputMethod);
           break;
-
         case 'emoji':
           this.toggleEmojiPicker(inputMethod);
           break;
-
         case 'codeblock':
         case 'blockquote':
         case 'panel':
           this.insertBlockType(item.value.name)();
           break;
-
         case 'action':
         case 'decision':
           this.insertTaskDecision(item.value.name, inputMethod)();
           break;
-
         case 'horizontalrule':
           this.insertHorizontalRule(inputMethod);
           break;
-
         case 'macro':
           this.openElementBrowser();
           break;
-
         case 'date':
           this.createDate(inputMethod);
           break;
-
         case 'placeholder text':
           this.createPlaceholderText();
           break;
-
         case 'layout':
           this.insertLayoutColumns(inputMethod);
           break;
-
         case 'status':
           this.createStatus(inputMethod);
           break;
+
         // https://product-fabric.atlassian.net/browse/ED-8053
         // @ts-ignore: OK to fallthrough to default
-
         case 'expand':
           if (expandEnabled) {
             this.insertExpand();
@@ -416,25 +354,20 @@ export class ToolbarInsertBlock extends React.PureComponent {
           }
 
         // eslint-disable-next-line no-fallthrough
-
         default:
           if (item && item.onClick) {
             item.onClick(editorActions);
             break;
           }
-
       }
-
       this.setState({
         isPlusMenuOpen: false
       });
     });
-
     _defineProperty(this, "insertToolbarMenuItem", btn => this.onItemActivated({
       item: btn,
       inputMethod: INPUT_METHOD.TOOLBAR
     }));
-
     _defineProperty(this, "insertInsertMenuItem", ({
       item
     }) => this.onItemActivated({
@@ -442,7 +375,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
       inputMethod: INPUT_METHOD.INSERT_MENU
     }));
   }
-
   static getDerivedStateFromProps(props, state) {
     const [buttons, dropdownItems] = createItems({
       isTypeAheadAllowed: props.isTypeAheadAllowed,
@@ -473,12 +405,12 @@ export class ToolbarInsertBlock extends React.PureComponent {
       formatMessage: props.intl.formatMessage,
       isNewMenuEnabled: props.replacePlusMenuWithElementBrowser
     });
-    return { ...state,
+    return {
+      ...state,
       buttons,
       dropdownItems
     };
   }
-
   componentDidUpdate(prevProps) {
     // If number of visible buttons changed, close emoji picker
     if (prevProps.buttons !== this.props.buttons) {
@@ -487,7 +419,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
       });
     }
   }
-
   renderPopup() {
     const {
       emojiPickerOpen
@@ -506,11 +437,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
     }) => name === 'emoji');
     const dropDownButtonRef = replacePlusMenuWithElementBrowser ? this.plusButtonRef : this.dropdownButtonRef;
     const ref = dropdownEmoji ? dropDownButtonRef : this.emojiButtonRef;
-
     if (!emojiPickerOpen || !ref || !emojiProvider) {
       return null;
     }
-
     return jsx(Popup, {
       target: ref,
       fitHeight: 350,
@@ -526,10 +455,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
       handleEscapeKeydown: this.handleEmojiPressEscape
     }));
   }
-
   render() {
     var _this$props$isDisable, _this$props$replacePl;
-
     const {
       buttons,
       dropdownItems
@@ -538,11 +465,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
       isDisabled,
       isReducedSpacing
     } = this.props;
-
     if (buttons.length === 0 && dropdownItems.length === 0) {
       return null;
     }
-
     return jsx("span", {
       css: buttonGroupStyle
     }, buttons.map(btn => jsx(ToolbarButton, {
@@ -585,6 +510,5 @@ export class ToolbarInsertBlock extends React.PureComponent {
       css: separatorStyles
     }));
   }
-
 }
 export default injectIntl(ToolbarInsertBlock);

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/item.js

@@ -23,7 +23,6 @@ import { shortcutStyle } from '../../../../ui/styles';
 import { tooltip, addLink, toggleTable } from '../../../../keymaps';
 import { shallowEquals } from './shallow-equals';
 import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
-
 const from = init => ({
   content: init.content,
   tooltipDescription: init.tooltipDescription,
@@ -42,9 +41,7 @@ const from = init => ({
   shortcut: init.shortcut,
   isDisabled: init.disabled
 });
-
 const mem = fn => memoizeOne(fn, shallowEquals);
-
 export const action = mem(init => {
   return from({
     content: init.content,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/sort-items.js

@@ -1,29 +1,22 @@
 const endPositionNames = ['macro-browser', 'slash-onboarding'];
-
 const isMacro = item => typeof item.content === 'string' && item.content.includes('macro');
-
 export const sortItems = items => {
   return items.sort((a, b) => {
     if (endPositionNames.includes(a.value.name) && endPositionNames.includes(b.value.name)) {
       return endPositionNames.indexOf(a.value.name) - endPositionNames.indexOf(b.value.name);
     }
-
     if (endPositionNames.includes(b.value.name)) {
       return -1;
     }
-
     if (endPositionNames.includes(a.value.name)) {
       return 1;
     }
-
     if (isMacro(a) && !isMacro(b)) {
       return 1;
     }
-
     if (isMacro(b) && !isMacro(a)) {
       return -1;
     }
-
     return a.content < b.content ? -1 : 1;
   });
 };