@atlaskit/editor-core 179.1.2 → 180.1.0

package/dist/es2019/plugins/card/nodeviews/blockCard.js

@@ -99,11 +99,14 @@ export class BlockCard extends ReactNodeView {
     return domRef;
   }
   render() {
+    const {
+      platform
+    } = this.reactComponentProps;
     return /*#__PURE__*/React.createElement(WrappedBlockCard, {
       node: this.node,
       view: this.view,
       getPos: this.getPos,
-      platform: this.reactComponentProps.platform
+      platform: platform
     });
   }
 }

package/dist/es2019/plugins/card/nodeviews/genericCard.js

@@ -5,6 +5,9 @@ import PropTypes from 'prop-types';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { titleUrlPairFromNode } from '../utils';
 import { changeSelectedCardToLinkFallback } from '../pm-plugins/doc';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getPluginState } from '../pm-plugins/util/state';
+import { getAnalyticsEditorAppearance } from '@atlaskit/editor-common/utils';
 export function Card(SmartCardComponent, UnsupportedComponent) {
   var _class;
   return _class = class extends React.Component {
@@ -15,6 +18,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
       });
     }
     render() {
+      var _getPluginState;
       const {
         url
       } = titleUrlPairFromNode(this.props.node);
@@ -34,10 +38,20 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
         }
       }
       const cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
-      return /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
+      const editorAppearance = (_getPluginState = getPluginState(this.props.view.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.editorAppearance;
+      const analyticsEditorAppearance = getAnalyticsEditorAppearance(editorAppearance);
+      return /*#__PURE__*/React.createElement(AnalyticsContext, {
+        data: {
+          attributes: {
+            location: analyticsEditorAppearance
+          },
+          // Below is added for the future implementation of Linking Platform namespaced analytics context
+          location: analyticsEditorAppearance
+        }
+      }, /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
         key: url,
         cardContext: cardContext
-      }, this.props));
+      }, this.props)));
     }
     componentDidCatch(error) {
       const maybeAPIError = error;

package/dist/es2019/plugins/card/pm-plugins/main.js

@@ -11,6 +11,7 @@ import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './
 export { pluginKey } from './plugin-key';
 export const createPlugin = options => pmPluginFactoryParams => {
   const {
+    editorAppearance,
     platform,
     allowResizing,
     useAlternativePreloader,
@@ -26,7 +27,8 @@ export const createPlugin = options => pmPluginFactoryParams => {
           cards: [],
           showLinkingToolbar: false,
           smartLinkEvents: undefined,
-          createAnalyticsEvent
+          createAnalyticsEvent,
+          editorAppearance
         };
       },
       apply(tr, pluginState) {

package/dist/es2019/plugins/clipboard/pm-plugins/main.js

@@ -73,8 +73,10 @@ export const createClipboardSerializer = (schema, getEditorView) => {
       const parentTable = findParentNodeOfType(schema.nodes.table)(selection);
       const attributes = parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs;
       const newTable = schema.nodes.table;
+      // Explicitly remove local id since we are creating a new table and it should have a unique local id which will be generated.
       const newTableNode = newTable.createChecked({
-        ...attributes
+        ...attributes,
+        localId: undefined
       }, content);
       const newContent = Fragment.from(newTableNode);
       // Pass updated content into original ProseMirror serializeFragment function.

package/dist/es2019/plugins/collab-edit/plugin.js

@@ -3,8 +3,7 @@ import { initialize } from './events/initialize';
 import { PluginState } from './plugin-state';
 import { pluginKey } from './plugin-key';
 import { addSynchronyErrorAnalytics } from './analytics';
-import { fireAnalyticsEvent } from '../analytics/fire-analytics-event';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
+import { fireAnalyticsEvent, ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 export { PluginState, pluginKey };
 export const createPlugin = (dispatch, providerFactory, collabProviderCallback, options) => {
   const fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);

package/dist/es2019/plugins/extension/toolbar.js

@@ -24,6 +24,11 @@ export const messages = defineMessages({
     defaultMessage: 'Delete element',
     description: 'Title text for confirm modal when deleting an extension linked to a data consumer.'
   },
+  unnamedSource: {
+    id: 'fabric.editor.extension.sourceNoTitledName',
+    defaultMessage: 'this element',
+    description: 'The current element without preset name been selected'
+  },
   confirmDeleteLinkedModalOKButton: {
     id: 'fabric.editor.extension.confirmDeleteLinkedModalOKButton',
     defaultMessage: 'Delete',
@@ -129,11 +134,12 @@ export const getToolbarConfig = (breakoutEnabled = true) => (state, intl) => {
     let confirmDialog;
     if (isReferencedSource(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
       confirmDialog = () => {
+        const localSourceName = formatMessage(messages.unnamedSource);
         return {
           title: formatMessage(messages.deleteElementTitle),
           okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
           message: formatMessage(messages.confirmDeleteLinkedModalMessage, {
-            nodeName: getNodeName(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)
+            nodeName: getNodeName(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node) || localSourceName
           }),
           isReferentialityDialog: true,
           getChildrenInfo: () => getChildrenInfo(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node),

package/dist/es2019/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -12,6 +12,7 @@ import FindReplace from './FindReplace';
 import { TRIGGER_METHOD } from '../../analytics/types';
 import { ToolTipContent, findKeymapByDescription, tooltip } from '../../../keymaps';
 import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
+import { ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 const toolbarButtonWrapper = css`
   display: flex;
   flex: 1 1 auto;
@@ -86,7 +87,10 @@ class FindReplaceToolbarButton extends React.PureComponent {
       },
       fitWidth: 352,
       zIndex: stackBelowOtherEditorFloatingPanels,
-      disableArrowKeyNavigation: true,
+      arrowKeyNavigationProviderOptions: {
+        type: ArrowKeyNavigationType.MENU,
+        disableArrowKeyNavigation: true
+      },
       trigger: jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.FIND_REPLACE,
         spacing: isReducedSpacing ? 'none' : 'default',

package/dist/es2019/plugins/floating-toolbar/ui/Button.js

@@ -7,6 +7,7 @@ export default (({
   icon,
   iconAfter,
   onClick,
+  onKeyDown,
   onMouseEnter,
   onMouseLeave,
   onFocus,
@@ -64,6 +65,7 @@ export default (({
     iconBefore: icon || undefined,
     iconAfter: iconAfter,
     onClick: onClick,
+    onKeyDown: onKeyDown,
     isSelected: selected,
     isDisabled: disabled,
     testId: testId,

package/dist/es2019/plugins/floating-toolbar/ui/CheckboxModal.js

@@ -5,6 +5,7 @@ import { Checkbox } from '@atlaskit/checkbox';
 import Modal, { ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
 import messages from './messages';
 export const CheckboxModal = props => {
+  var _options$getChildrenI;
   const [isChecked, setCheckbox] = useState(false);
   const {
     onConfirm,
@@ -19,10 +20,11 @@ export const CheckboxModal = props => {
   const okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
   const cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
   const checkboxlabel = options === null || options === void 0 ? void 0 : options.checkboxLabel;
+  const childrenInfo = options === null || options === void 0 ? void 0 : (_options$getChildrenI = options.getChildrenInfo) === null || _options$getChildrenI === void 0 ? void 0 : _options$getChildrenI.call(options);
   const ListComponent = ({
     nodes
   }) => {
-    if (!nodes) {
+    if (nodes.length === 0) {
       return null;
     }
     return /*#__PURE__*/React.createElement("ul", null, nodes.map(node => /*#__PURE__*/React.createElement(ListItem, _extends({}, node, {
@@ -47,8 +49,8 @@ export const CheckboxModal = props => {
     testId: testId
   }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
     appearance: "warning"
-  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message), (options === null || options === void 0 ? void 0 : options.getChildrenInfo) && /*#__PURE__*/React.createElement(ListComponent, {
-    nodes: options === null || options === void 0 ? void 0 : options.getChildrenInfo()
+  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message), !!(childrenInfo !== null && childrenInfo !== void 0 && childrenInfo.length) && /*#__PURE__*/React.createElement(ListComponent, {
+    nodes: childrenInfo
   }), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Checkbox, {
     isChecked: isChecked,
     onChange: () => setCheckbox(!isChecked),

package/dist/es2019/plugins/floating-toolbar/ui/Dropdown.js

@@ -25,8 +25,10 @@ export default class Dropdown extends Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {
-      isOpen: false
+      isOpen: false,
+      isOpenedByKeyboard: false
     });
+    _defineProperty(this, "triggerRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "renderArrayOptions", options => {
       const {
         showSelected,
@@ -43,15 +45,26 @@ export default class Dropdown extends Component {
     });
     _defineProperty(this, "toggleOpen", () => {
       this.setState({
-        isOpen: !this.state.isOpen
+        isOpen: !this.state.isOpen,
+        isOpenedByKeyboard: false
       });
     });
+    _defineProperty(this, "toggleOpenByKeyboard", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.setState({
+          isOpen: !this.state.isOpen,
+          isOpenedByKeyboard: true
+        });
+      }
+    });
     _defineProperty(this, "hide", () => {
       this.setState({
+        ...this.state,
         isOpen: false
       });
     });
-    _defineProperty(this, "hideonEsc", () => {
+    _defineProperty(this, "hideOnEsc", () => {
       var _document$querySelect;
       this.hide();
       //Focus the trigger button only on Escape
@@ -60,7 +73,7 @@ export default class Dropdown extends Component {
     _defineProperty(this, "onOpenChanged", openChangedEvent => {
       if (!openChangedEvent.isOpen && openChangedEvent.event instanceof KeyboardEvent) {
         var _openChangedEvent$eve;
-        ((_openChangedEvent$eve = openChangedEvent.event) === null || _openChangedEvent$eve === void 0 ? void 0 : _openChangedEvent$eve.key) === 'Escape' ? this.hideonEsc() : this.hide();
+        ((_openChangedEvent$eve = openChangedEvent.event) === null || _openChangedEvent$eve === void 0 ? void 0 : _openChangedEvent$eve.key) === 'Escape' ? this.hideOnEsc() : this.hide();
       }
     });
   }
@@ -93,6 +106,7 @@ export default class Dropdown extends Component {
         title: title,
         icon: TriggerIcon,
         onClick: this.toggleOpen,
+        onKeyDown: this.toggleOpenByKeyboard,
         selected: isOpen,
         disabled: disabled,
         tooltipContent: tooltip
@@ -106,6 +120,7 @@ export default class Dropdown extends Component {
           label: "Expand dropdown menu"
         })),
         onClick: this.toggleOpen,
+        onKeyDown: this.toggleOpenByKeyboard,
         selected: isOpen,
         disabled: disabled,
         tooltipContent: tooltip
@@ -120,12 +135,13 @@ export default class Dropdown extends Component {
     const fitWidth = Array.isArray(options) ? dropdownWidth || menuItemDimensions.width : options.width;
     const fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : options.height;
     return jsx(UiDropdown, {
+      ref: this.triggerRef,
       mountTo: mountPoint,
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
       isOpen: isOpen,
       handleClickOutside: this.hide,
-      handleEscapeKeydown: this.hideonEsc,
+      handleEscapeKeydown: this.hideOnEsc,
       onOpenChange: this.onOpenChanged,
       fitWidth: fitWidth + fitTolerance,
       fitHeight: fitHeight + fitTolerance,
@@ -137,8 +153,20 @@ export default class Dropdown extends Component {
     }));
   }
   componentDidUpdate(prevProps, prevState) {
-    if (this.props.setDisableParentScroll && prevState.isOpen !== this.state.isOpen) {
-      this.props.setDisableParentScroll(this.state.isOpen);
+    if (prevState.isOpen !== this.state.isOpen) {
+      if (this.props.setDisableParentScroll) {
+        this.props.setDisableParentScroll(this.state.isOpen);
+      }
+      if (this.state.isOpen && this.state.isOpenedByKeyboard) {
+        const dropList = document.querySelector('[data-role="droplistContent"]');
+        if (dropList) {
+          const keyboardEvent = new KeyboardEvent('keydown', {
+            bubbles: true,
+            key: 'ArrowDown'
+          });
+          dropList.dispatchEvent(keyboardEvent);
+        }
+      }
     }
   }
 }

package/dist/es2019/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -23,10 +23,10 @@ const ExtensionButton = props => {
     node,
     editorView
   } = props;
-  const ButtonIcon = item.icon ? Loadable({
+  const ButtonIcon = React.useMemo(() => item.icon ? Loadable({
     loader: async () => resolveExtensionIcon(item.icon),
     loading: noop
-  }) : undefined;
+  }) : undefined, [item.icon]);
   const onClick = () => {
     if (typeof item.action !== 'function') {
       throw new Error(`'action' of context toolbar item '${item.key}' is not a function`);

package/dist/es2019/plugins/floating-toolbar/ui/ScrollButtons.js

@@ -83,19 +83,14 @@ export default (({
     }
   });
   useEffect(() => {
-    const scrollContainerRefCurrent = scrollContainerRef.current;
     onScroll();
+    const scrollContainerRefCurrent = scrollContainerRef.current;
     if (scrollContainerRefCurrent) {
       // enable/disable scroll buttons depending on scroll position
       scrollContainerRefCurrent.addEventListener('scroll', onScroll);
 
       // watch for toolbar resize and show/hide scroll buttons if needed
       resizeObserver.observe(scrollContainerRefCurrent);
-
-      // reset scroll position when switching from one node with toolbar to another
-      scrollContainerRefCurrent.scrollTo({
-        left: 0
-      });
     }
     return () => {
       if (scrollContainerRefCurrent) {
@@ -104,7 +99,17 @@ export default (({
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [node, scrollContainerRef]);
+  }, []);
+  useEffect(() => {
+    const scrollContainerRefCurrent = scrollContainerRef.current;
+    if (scrollContainerRefCurrent) {
+      // reset scroll position when switching from one node with toolbar to another
+      scrollContainerRefCurrent.scrollTo({
+        left: 0
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [node.type]);
   return needScroll ? jsx("div", {
     ref: buttonsContainerRef,
     css: toolbarScrollButtons,

package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js

@@ -5,6 +5,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 import ButtonGroup from '@atlaskit/button/button-group';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { DN70 } from '@atlaskit/theme/colors';
@@ -149,6 +150,15 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
             placement: "Panels",
             mountPoint: emojiAndColourPickerMountPoint,
             setDisableParentScroll: scrollable ? setDisableScroll : undefined
+            // Currently in floating toolbar, color picker is only
+            //  used in panel and table cell background color.
+            // Both uses same color palette.
+            // That's why hard-coding hexToEditorBackgroundPaletteColor.
+            // When we need to support different color palette
+            //  in floating toolbar, we need to set hexToPaletteColor
+            //  in item options.
+            ,
+            hexToPaletteColor: hexToEditorBackgroundPaletteColor
           });
         }
         if (item.selectType === 'emoji') {
@@ -418,6 +428,7 @@ class Toolbar extends Component {
       text: intl.formatMessage(messages.floatingToolbarAnnouncer),
       delay: 250
     }), jsx("div", {
+      "data-testid": "floating-toolbar-items",
       ref: this.scrollContainerRef,
       css: toolbarOverflow(scrollable, this.state.scrollDisabled, firstElementIsSelect)
     }, jsx(ToolbarItems, _extends({}, this.props, {

package/dist/es2019/plugins/fragment/pm-plugins/fragment-consistency.js

@@ -56,6 +56,7 @@ const regenerateFragmentIdIfNeeded = ({
       transaction.setNodeMarkup(pos, undefined, node.attrs, node.marks.map(mark => {
         if (mark.type === fragment) {
           mark.attrs.localId = uuid.generate();
+          mark.attrs.name = null;
         }
         return mark;
       }));

package/dist/es2019/plugins/hyperlink/analytics.js

@@ -1,4 +1,4 @@
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../analytics/types';
 import { getLinkDomain, isFromCurrentDomain } from './utils';
 export function getLinkCreationAnalyticsEvent(inputMethod, url) {
   return {

package/dist/es2019/plugins/hyperlink/index.js

@@ -26,7 +26,7 @@ const hyperlinkPlugin = options => ({
       name: 'hyperlink',
       plugin: ({
         dispatch
-      }) => plugin(dispatch)
+      }) => plugin(dispatch, options === null || options === void 0 ? void 0 : options.editorAppearance)
     }, {
       name: 'fakeCursorToolbarPlugin',
       plugin: () => fakeCursorToolbarPlugin

package/dist/es2019/plugins/hyperlink/pm-plugins/main.js

@@ -186,7 +186,7 @@ const getActiveText = selection => {
   return;
 };
 export const stateKey = new PluginKey('hyperlinkPlugin');
-export const plugin = dispatch => new SafePlugin({
+export const plugin = (dispatch, editorAppearance) => new SafePlugin({
   state: {
     init(_, state) {
       const canInsertLink = canLinkBeCreatedInRange(state.selection.from, state.selection.to)(state);
@@ -194,7 +194,8 @@ export const plugin = dispatch => new SafePlugin({
         activeText: getActiveText(state.selection),
         canInsertLink,
         timesViewed: 0,
-        activeLinkMark: toState(undefined, LinkAction.SELECTION_CHANGE, state)
+        activeLinkMark: toState(undefined, LinkAction.SELECTION_CHANGE, state),
+        editorAppearance
       };
     },
     apply(tr, pluginState, oldState, newState) {
@@ -207,7 +208,8 @@ export const plugin = dispatch => new SafePlugin({
           canInsertLink: canLinkBeCreatedInRange(newState.selection.from, newState.selection.to)(newState),
           timesViewed: state.timesViewed,
           inputMethod,
-          activeLinkMark: mapTransactionToState(state.activeLinkMark, tr)
+          activeLinkMark: mapTransactionToState(state.activeLinkMark, tr),
+          editorAppearance
         };
       }
       if (action) {
@@ -223,6 +225,7 @@ export const plugin = dispatch => new SafePlugin({
           canInsertLink: state.canInsertLink,
           inputMethod,
           activeLinkMark: toState(state.activeLinkMark, action, newState),
+          editorAppearance,
           ...stateForAnalytics
         };
       }
@@ -234,7 +237,8 @@ export const plugin = dispatch => new SafePlugin({
           activeLinkMark: toState(state.activeLinkMark, LinkAction.SELECTION_CHANGE, newState),
           timesViewed: state.timesViewed,
           searchSessionId: state.searchSessionId,
-          inputMethod
+          inputMethod,
+          editorAppearance
         };
       }
       if (!shallowEqual(state, pluginState)) {

package/dist/es2019/plugins/hyperlink/ui/EditorLinkPicker/index.js

@@ -5,6 +5,7 @@ import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins
 import { hideLinkToolbar } from '../../commands';
 import { useEscapeClickaway } from './useEscapeClickaway';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getAnalyticsEditorAppearance } from '@atlaskit/editor-common/utils';
 
 /**
  * Returns a type that matches T but where keys (K) are now optional
@@ -14,6 +15,7 @@ export const EditorLinkPicker = ({
   view,
   onCancel,
   invokeMethod = '_unknown',
+  editorAppearance,
   ...restProps
 }) => {
   const onEscape = useCallback(() => {
@@ -26,11 +28,15 @@ export const EditorLinkPicker = ({
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
   }, [view, onCancel]);
   const ref = useEscapeClickaway(onEscape, onClickAway);
+  const analyticsEditorAppearance = getAnalyticsEditorAppearance(editorAppearance);
   const analyticsData = useMemo(() => ({
     attributes: {
-      invokeMethod
-    }
-  }), [invokeMethod]);
+      invokeMethod,
+      location: analyticsEditorAppearance
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: analyticsEditorAppearance
+  }), [invokeMethod, analyticsEditorAppearance]);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref
   }, /*#__PURE__*/React.createElement(AnalyticsContext, {

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -16,7 +16,7 @@ import { linkToolbarMessages as linkToolbarCommonMessages } from '../../../../me
 import PanelTextInput from '../../../../ui/PanelTextInput';
 import LinkSearchList from '../../../../ui/LinkSearch/LinkSearchList';
 import { container, containerWithProvider, inputWrapper } from '../../../../ui/LinkSearch/ToolbarComponents';
-import { INPUT_METHOD, fireAnalyticsEvent, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../analytics';
+import { INPUT_METHOD, fireAnalyticsEvent, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { normalizeUrl } from '../../utils';
 import { filterUniqueItems } from '../../../../utils/array';
 import debounce from 'lodash/debounce';

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import HyperlinkAddToolbarComp from './HyperlinkAddToolbar';
-import { INPUT_METHOD } from '../../../analytics';
+import { INPUT_METHOD } from '../../../analytics/types';
 import { stateKey as pluginKey } from '../../pm-plugins/main';
 import WithPluginState from '../../../../ui/WithPluginState';
 import { getFeatureFlags } from '../../../feature-flags-context';
@@ -53,7 +53,8 @@ export default class HyperlinkAddToolbar extends React.PureComponent {
               view: view,
               invokeMethod: // Provide `invokeMethod` prop as preferred value (card plugin passes as prop) otherwise assume this
               // is being used from inside the hyperlink plugin and use inputMethod from plugin state
-              invokeMethod !== null && invokeMethod !== void 0 ? invokeMethod : hyperlinkPluginState === null || hyperlinkPluginState === void 0 ? void 0 : hyperlinkPluginState.inputMethod
+              invokeMethod !== null && invokeMethod !== void 0 ? invokeMethod : hyperlinkPluginState === null || hyperlinkPluginState === void 0 ? void 0 : hyperlinkPluginState.inputMethod,
+              editorAppearance: hyperlinkPluginState === null || hyperlinkPluginState === void 0 ? void 0 : hyperlinkPluginState.editorAppearance
             }, linkPickerOptions, {
               url: displayUrl,
               displayText: displayText,

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

@@ -26,6 +26,7 @@ export const BlockInsertElementBrowser = props => {
     selected: props.open,
     disabled: props.disabled,
     onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
     spacing: props.spacing,
     label: props.label,
     "aria-keyshortcuts": "/"

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

@@ -27,6 +27,7 @@ export const BlockInsertMenuLegacy = props => {
     selected: props.open,
     disabled: props.disabled,
     onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
     spacing: props.spacing,
     label: props.label,
     "aria-keyshortcuts": "/"

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

@@ -14,6 +14,7 @@ export const BlockInsertMenu = props => {
       selected: props.open,
       disabled: props.disabled,
       onClick: props.onClick,
+      onKeyDown: props.onKeyDown,
       spacing: props.spacing,
       label: props.label,
       "aria-keyshortcuts": "/"
@@ -26,6 +27,7 @@ export const BlockInsertMenu = props => {
       items: props.items,
       label: props.label,
       onClick: props.onClick,
+      onKeyDown: props.onKeyDown,
       onInsert: props.onInsert,
       onRef: props.onPlusButtonRef,
       open: props.open,
@@ -43,6 +45,7 @@ export const BlockInsertMenu = props => {
     items: props.items,
     label: props.label,
     onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
     onItemActivated: props.onItemActivated,
     onOpenChange: props.onOpenChange,
     onRef: props.onRef,

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

@@ -21,6 +21,7 @@ export const DropDownButton = /*#__PURE__*/React.memo(props => jsx(ToolbarButton
   selected: props.selected,
   disabled: props.disabled,
   onClick: props.onClick,
+  onKeyDown: props.onKeyDown,
   spacing: props.spacing,
   "aria-expanded": props['aria-expanded'],
   "aria-haspopup": props['aria-haspopup'],

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

@@ -37,6 +37,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
     _defineProperty(this, "state", {
       isPlusMenuOpen: false,
       emojiPickerOpen: false,
+      isOpenedByKeyboard: false,
       buttons: [],
       dropdownItems: []
     });
@@ -141,6 +142,16 @@ export class ToolbarInsertBlock extends React.PureComponent {
     _defineProperty(this, "handleClick", () => {
       this.togglePlusMenuVisibility();
     });
+    _defineProperty(this, "handleOpenByKeyboard", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        this.setState({
+          ...this.state,
+          isOpenedByKeyboard: true
+        });
+        event.preventDefault();
+        this.togglePlusMenuVisibility();
+      }
+    });
     _defineProperty(this, "toggleLinkPanel", inputMethod => {
       const {
         editorView
@@ -418,6 +429,18 @@ export class ToolbarInsertBlock extends React.PureComponent {
         emojiPickerOpen: false
       });
     }
+    if (this.state.isOpenedByKeyboard) {
+      var _this$dropdownButtonR;
+      const downArrowEvent = new KeyboardEvent('keydown', {
+        bubbles: true,
+        key: 'ArrowDown'
+      });
+      (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 ? void 0 : _this$dropdownButtonR.dispatchEvent(downArrowEvent);
+      this.setState({
+        ...this.state,
+        isOpenedByKeyboard: false
+      });
+    }
   }
   renderPopup() {
     const {
@@ -501,6 +524,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       onRef: this.handleDropDownButtonRef,
       onPlusButtonRef: this.handlePlusButtonRef,
       onClick: this.handleClick,
+      onKeyDown: this.handleOpenByKeyboard,
       onItemActivated: this.insertInsertMenuItem,
       onInsert: this.insertInsertMenuItem,
       onOpenChange: this.onOpenChange,