@atlaskit/editor-core 180.0.0 → 180.1.0

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

@@ -23,6 +23,8 @@ var _DropdownMenu = _interopRequireWildcard(require("./DropdownMenu"));
 var _templateObject, _templateObject2;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var dropdownExpandContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0px -4px;\n"])));
@@ -48,8 +50,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isOpen: false
+      isOpen: false,
+      isOpenedByKeyboard: false
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "triggerRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderArrayOptions", function (options) {
       var _this$props = _this.props,
         showSelected = _this$props.showSelected,
@@ -65,15 +69,25 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
       _this.setState({
-        isOpen: !_this.state.isOpen
+        isOpen: !_this.state.isOpen,
+        isOpenedByKeyboard: false
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpenByKeyboard", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        _this.setState({
+          isOpen: !_this.state.isOpen,
+          isOpenedByKeyboard: true
+        });
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hide", function () {
-      _this.setState({
+      _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
         isOpen: false
-      });
+      }));
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hideonEsc", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hideOnEsc", function () {
       var _document$querySelect;
       _this.hide();
       //Focus the trigger button only on Escape
@@ -82,7 +96,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOpenChanged", function (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();
       }
     });
     return _this;
@@ -115,6 +129,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           title: title,
           icon: TriggerIcon,
           onClick: this.toggleOpen,
+          onKeyDown: this.toggleOpenByKeyboard,
           selected: isOpen,
           disabled: disabled,
           tooltipContent: tooltip
@@ -128,6 +143,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
             label: "Expand dropdown menu"
           })),
           onClick: this.toggleOpen,
+          onKeyDown: this.toggleOpenByKeyboard,
           selected: isOpen,
           disabled: disabled,
           tooltipContent: tooltip
@@ -142,12 +158,13 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       var fitWidth = Array.isArray(options) ? dropdownWidth || _DropdownMenu.menuItemDimensions.width : options.width;
       var fitHeight = Array.isArray(options) ? options.length * _DropdownMenu.menuItemDimensions.height + _DropdownMenu.itemSpacing * 2 : options.height;
       return (0, _react2.jsx)(_Dropdown.default, {
+        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,
@@ -161,8 +178,20 @@ var Dropdown = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function 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) {
+          var dropList = document.querySelector('[data-role="droplistContent"]');
+          if (dropList) {
+            var keyboardEvent = new KeyboardEvent('keydown', {
+              bubbles: true,
+              key: 'ArrowDown'
+            });
+            dropList.dispatchEvent(keyboardEvent);
+          }
+        }
       }
     }
   }]);

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

@@ -58,28 +58,30 @@ var ExtensionButton = function ExtensionButton(props) {
   var item = props.item,
     node = props.node,
     editorView = props.editorView;
-  var ButtonIcon = item.icon ? (0, _reactLoadable.default)({
-    loader: function () {
-      var _loader = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                return _context2.abrupt("return", resolveExtensionIcon(item.icon));
-              case 1:
-              case "end":
-                return _context2.stop();
+  var ButtonIcon = _react.default.useMemo(function () {
+    return item.icon ? (0, _reactLoadable.default)({
+      loader: function () {
+        var _loader = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+          return _regenerator.default.wrap(function _callee2$(_context2) {
+            while (1) {
+              switch (_context2.prev = _context2.next) {
+                case 0:
+                  return _context2.abrupt("return", resolveExtensionIcon(item.icon));
+                case 1:
+                case "end":
+                  return _context2.stop();
+              }
             }
-          }
-        }, _callee2);
-      }));
-      function loader() {
-        return _loader.apply(this, arguments);
-      }
-      return loader;
-    }(),
-    loading: noop
-  }) : undefined;
+          }, _callee2);
+        }));
+        function loader() {
+          return _loader.apply(this, arguments);
+        }
+        return loader;
+      }(),
+      loading: noop
+    }) : undefined;
+  }, [item.icon]);
   var onClick = function onClick() {
     if (typeof item.action !== 'function') {
       throw new Error("'action' of context toolbar item '".concat(item.key, "' is not a function"));

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

@@ -96,19 +96,14 @@ var _default = function _default(_ref) {
     }
   });
   (0, _react.useEffect)(function () {
-    var scrollContainerRefCurrent = scrollContainerRef.current;
     onScroll();
+    var 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 function () {
       if (scrollContainerRefCurrent) {
@@ -117,7 +112,17 @@ var _default = function _default(_ref) {
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [node, scrollContainerRef]);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var 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 ? (0, _react2.jsx)("div", {
     ref: buttonsContainerRef,
     css: toolbarScrollButtons,

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

@@ -18,6 +18,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
+var _editorPalette = require("@atlaskit/editor-palette");
 var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
@@ -182,6 +183,15 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
             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: _editorPalette.hexToEditorBackgroundPaletteColor
           });
         }
         if (item.selectType === 'emoji') {
@@ -443,6 +453,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         text: intl.formatMessage(_messages.default.floatingToolbarAnnouncer),
         delay: 250
       }), (0, _react2.jsx)("div", {
+        "data-testid": "floating-toolbar-items",
         ref: this.scrollContainerRef,
         css: toolbarOverflow(scrollable, this.state.scrollDisabled, firstElementIsSelect)
       }, (0, _react2.jsx)(ToolbarItems, (0, _extends2.default)({}, this.props, {

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

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

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

@@ -4,18 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getLinkCreationAnalyticsEvent = getLinkCreationAnalyticsEvent;
-var _analytics = require("../analytics");
+var _types = require("../analytics/types");
 var _utils = require("./utils");
 function getLinkCreationAnalyticsEvent(inputMethod, url) {
   return {
-    action: _analytics.ACTION.INSERTED,
-    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
-    actionSubjectId: _analytics.ACTION_SUBJECT_ID.LINK,
+    action: _types.ACTION.INSERTED,
+    actionSubject: _types.ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: _types.ACTION_SUBJECT_ID.LINK,
     attributes: {
       inputMethod: inputMethod,
       fromCurrentDomain: (0, _utils.isFromCurrentDomain)(url)
     },
-    eventType: _analytics.EVENT_TYPE.TRACK,
+    eventType: _types.EVENT_TYPE.TRACK,
     nonPrivacySafeAttributes: {
       linkDomain: (0, _utils.getLinkDomain)(url)
     }

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

@@ -34,7 +34,7 @@ var hyperlinkPlugin = function hyperlinkPlugin(options) {
         name: 'hyperlink',
         plugin: function plugin(_ref) {
           var dispatch = _ref.dispatch;
-          return (0, _main.plugin)(dispatch);
+          return (0, _main.plugin)(dispatch, options === null || options === void 0 ? void 0 : options.editorAppearance);
         }
       }, {
         name: 'fakeCursorToolbarPlugin',

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

@@ -193,7 +193,7 @@ var getActiveText = function getActiveText(selection) {
 };
 var stateKey = new _prosemirrorState.PluginKey('hyperlinkPlugin');
 exports.stateKey = stateKey;
-var plugin = function plugin(dispatch) {
+var plugin = function plugin(dispatch, editorAppearance) {
   return new _safePlugin.SafePlugin({
     state: {
       init: function init(_, state) {
@@ -202,7 +202,8 @@ var plugin = function plugin(dispatch) {
           activeText: getActiveText(state.selection),
           canInsertLink: canInsertLink,
           timesViewed: 0,
-          activeLinkMark: toState(undefined, LinkAction.SELECTION_CHANGE, state)
+          activeLinkMark: toState(undefined, LinkAction.SELECTION_CHANGE, state),
+          editorAppearance: editorAppearance
         };
       },
       apply: function apply(tr, pluginState, oldState, newState) {
@@ -215,7 +216,8 @@ var plugin = function plugin(dispatch) {
             canInsertLink: canLinkBeCreatedInRange(newState.selection.from, newState.selection.to)(newState),
             timesViewed: state.timesViewed,
             inputMethod: inputMethod,
-            activeLinkMark: mapTransactionToState(state.activeLinkMark, tr)
+            activeLinkMark: mapTransactionToState(state.activeLinkMark, tr),
+            editorAppearance: editorAppearance
           };
         }
         if (action) {
@@ -230,7 +232,8 @@ var plugin = function plugin(dispatch) {
             activeText: state.activeText,
             canInsertLink: state.canInsertLink,
             inputMethod: inputMethod,
-            activeLinkMark: toState(state.activeLinkMark, action, newState)
+            activeLinkMark: toState(state.activeLinkMark, action, newState),
+            editorAppearance: editorAppearance
           }, stateForAnalytics);
         }
         var hasPositionChanged = oldState.selection.from !== newState.selection.from || oldState.selection.to !== newState.selection.to;
@@ -241,7 +244,8 @@ var plugin = function plugin(dispatch) {
             activeLinkMark: toState(state.activeLinkMark, LinkAction.SELECTION_CHANGE, newState),
             timesViewed: state.timesViewed,
             searchSessionId: state.searchSessionId,
-            inputMethod: inputMethod
+            inputMethod: inputMethod,
+            editorAppearance: editorAppearance
           };
         }
         if (!(0, _utils.shallowEqual)(state, pluginState)) {

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

@@ -14,7 +14,8 @@ var _actions = require("../../../card/pm-plugins/actions");
 var _commands = require("../../commands");
 var _useEscapeClickaway = require("./useEscapeClickaway");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _excluded = ["view", "onCancel", "invokeMethod"];
+var _utils = require("@atlaskit/editor-common/utils");
+var _excluded = ["view", "onCancel", "invokeMethod", "editorAppearance"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var EditorLinkPicker = function EditorLinkPicker(_ref) {
@@ -22,6 +23,7 @@ var EditorLinkPicker = function EditorLinkPicker(_ref) {
     onCancel = _ref.onCancel,
     _ref$invokeMethod = _ref.invokeMethod,
     invokeMethod = _ref$invokeMethod === void 0 ? '_unknown' : _ref$invokeMethod,
+    editorAppearance = _ref.editorAppearance,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onEscape = (0, _react.useCallback)(function () {
     (0, _commands.hideLinkToolbar)()(view.state, view.dispatch);
@@ -33,13 +35,17 @@ var EditorLinkPicker = function EditorLinkPicker(_ref) {
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
   }, [view, onCancel]);
   var ref = (0, _useEscapeClickaway.useEscapeClickaway)(onEscape, onClickAway);
+  var analyticsEditorAppearance = (0, _utils.getAnalyticsEditorAppearance)(editorAppearance);
   var analyticsData = (0, _react.useMemo)(function () {
     return {
       attributes: {
-        invokeMethod: invokeMethod
-      }
+        invokeMethod: invokeMethod,
+        location: analyticsEditorAppearance
+      },
+      // Below is added for the future implementation of Linking Platform namespaced analytic context
+      location: analyticsEditorAppearance
     };
-  }, [invokeMethod]);
+  }, [invokeMethod, analyticsEditorAppearance]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref
   }, /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {

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

@@ -33,7 +33,7 @@ var _messages = require("../../../../messages");
 var _PanelTextInput = _interopRequireDefault(require("../../../../ui/PanelTextInput"));
 var _LinkSearchList = _interopRequireDefault(require("../../../../ui/LinkSearch/LinkSearchList"));
 var _ToolbarComponents = require("../../../../ui/LinkSearch/ToolbarComponents");
-var _analytics = require("../../../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("../../utils");
 var _array = require("../../../../utils/array");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));

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

@@ -14,7 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _react = _interopRequireDefault(require("react"));
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _HyperlinkAddToolbar = _interopRequireDefault(require("./HyperlinkAddToolbar"));
-var _analytics = require("../../../analytics");
+var _types = require("../../../analytics/types");
 var _main = require("../../pm-plugins/main");
 var _WithPluginState = _interopRequireDefault(require("../../../../ui/WithPluginState"));
 var _featureFlagsContext = require("../../../feature-flags-context");
@@ -31,7 +31,7 @@ var onSubmitInterface = function onSubmitInterface(onSubmit) {
       displayText = _ref.displayText,
       rawUrl = _ref.rawUrl,
       meta = _ref.meta;
-    onSubmit(url, title !== null && title !== void 0 ? title : rawUrl, displayText || undefined, meta.inputMethod === 'manual' ? _analytics.INPUT_METHOD.MANUAL : _analytics.INPUT_METHOD.TYPEAHEAD);
+    onSubmit(url, title !== null && title !== void 0 ? title : rawUrl, displayText || undefined, meta.inputMethod === 'manual' ? _types.INPUT_METHOD.MANUAL : _types.INPUT_METHOD.TYPEAHEAD);
   };
 };
 var HyperlinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
@@ -74,7 +74,8 @@ var HyperlinkAddToolbar = /*#__PURE__*/function (_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/cjs/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -33,6 +33,7 @@ var BlockInsertElementBrowser = function BlockInsertElementBrowser(props) {
     selected: props.open,
     disabled: props.disabled,
     onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
     spacing: props.spacing,
     label: props.label,
     "aria-keyshortcuts": "/"

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

@@ -34,6 +34,7 @@ var BlockInsertMenuLegacy = function BlockInsertMenuLegacy(props) {
     selected: props.open,
     disabled: props.disabled,
     onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
     spacing: props.spacing,
     label: props.label,
     "aria-keyshortcuts": "/"

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

@@ -21,6 +21,7 @@ var BlockInsertMenu = function BlockInsertMenu(props) {
       selected: props.open,
       disabled: props.disabled,
       onClick: props.onClick,
+      onKeyDown: props.onKeyDown,
       spacing: props.spacing,
       label: props.label,
       "aria-keyshortcuts": "/"
@@ -33,6 +34,7 @@ var BlockInsertMenu = function BlockInsertMenu(props) {
       items: props.items,
       label: props.label,
       onClick: props.onClick,
+      onKeyDown: props.onKeyDown,
       onInsert: props.onInsert,
       onRef: props.onPlusButtonRef,
       open: props.open,
@@ -50,6 +52,7 @@ var BlockInsertMenu = function 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/cjs/plugins/insert-block/ui/ToolbarInsertBlock/dropdown-button.js

@@ -32,6 +32,7 @@ var DropDownButton = /*#__PURE__*/_react.default.memo(function (props) {
     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/cjs/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -62,6 +62,7 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       isPlusMenuOpen: false,
       emojiPickerOpen: false,
+      isOpenedByKeyboard: false,
       buttons: [],
       dropdownItems: []
     });
@@ -161,6 +162,15 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
       _this.togglePlusMenuVisibility();
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenByKeyboard", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
+          isOpenedByKeyboard: true
+        }));
+        event.preventDefault();
+        _this.togglePlusMenuVisibility();
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleLinkPanel", function (inputMethod) {
       var editorView = _this.props.editorView;
       (0, _commands4.showLinkToolbar)(inputMethod)(editorView.state, editorView.dispatch);
@@ -383,6 +393,17 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           emojiPickerOpen: false
         });
       }
+      if (this.state.isOpenedByKeyboard) {
+        var _this$dropdownButtonR;
+        var 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(_objectSpread(_objectSpread({}, this.state), {}, {
+          isOpenedByKeyboard: false
+        }));
+      }
     }
   }, {
     key: "renderPopup",
@@ -468,6 +489,7 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         onRef: this.handleDropDownButtonRef,
         onPlusButtonRef: this.handlePlusButtonRef,
         onClick: this.handleClick,
+        onKeyDown: this.handleOpenByKeyboard,
         onItemActivated: this.insertInsertMenuItem,
         onInsert: this.insertInsertMenuItem,
         onOpenChange: this.onOpenChange,

package/dist/cjs/plugins/media/commands/helpers.js

@@ -4,12 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateMediaNodeAttrs = exports.updateCurrentMediaNodeAttrs = exports.updateAllMediaNodesAttrs = exports.replaceExternalMedia = exports.isMediaNode = exports.findMediaSingleNode = exports.findMediaNode = exports.findMediaInlineNode = exports.findAllMediaSingleNodes = void 0;
+exports.updateMediaSingleNodeAttrs = exports.updateCurrentMediaNodeAttrs = exports.updateAllMediaSingleNodesAttrs = exports.replaceExternalMedia = exports.isMediaNode = exports.findMediaSingleNode = exports.findAllMediaSingleNodes = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _steps = require("@atlaskit/adf-schema/steps");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/**
+ * Note that Media Inline is inserted like a media single node into the media plugin state.
+ * Though it is not of type mediaSingle, it shares the same `findMediaSingleNode` method
+ *
+ */
 var findMediaSingleNode = function findMediaSingleNode(mediaPluginState, id) {
   var mediaNodes = mediaPluginState.mediaNodes;
 
@@ -25,25 +30,7 @@ var findMediaSingleNode = function findMediaSingleNode(mediaPluginState, id) {
     return memo;
   }, null);
 };
-
-/**
- * Finds the media inline node with the given id.
- * Media Inline is inserted like a media single node into the media plugin state.
- * However it is not of type mediaSingle.
- *
- * @param mediaPluginState
- * @param id
- * @param isMediaSingle
- * @returns {MediaNodeWithPosHandler | null}
- */
 exports.findMediaSingleNode = findMediaSingleNode;
-var findMediaInlineNode = function findMediaInlineNode(mediaPluginState, id, isMediaSingle) {
-  if (!isMediaSingle) {
-    return findMediaSingleNode(mediaPluginState, id);
-  }
-  return null;
-};
-exports.findMediaInlineNode = findMediaInlineNode;
 var findAllMediaSingleNodes = function findAllMediaSingleNodes(mediaPluginState, id) {
   var mediaNodes = mediaPluginState.mediaNodes;
   return mediaNodes.filter(function (nodeWithHandler) {
@@ -51,31 +38,16 @@ var findAllMediaSingleNodes = function findAllMediaSingleNodes(mediaPluginState,
   });
 };
 exports.findAllMediaSingleNodes = findAllMediaSingleNodes;
-var findMediaNode = function findMediaNode(mediaPluginState, id, isMediaSingle) {
-  var mediaNodeWithPos = isMediaSingle ? findMediaSingleNode(mediaPluginState, id) : mediaPluginState.mediaGroupNodes[id];
-
-  // Should attempt to find media inline node if media single node or media group node is not found
-  if (!mediaNodeWithPos) {
-    return findMediaInlineNode(mediaPluginState, id, isMediaSingle);
-  }
-  return mediaNodeWithPos;
-};
-exports.findMediaNode = findMediaNode;
 var isMediaNode = function isMediaNode(pos, state) {
   var node = state.doc.nodeAt(pos);
   return node && ['media', 'mediaInline'].includes(node.type.name);
 };
 exports.isMediaNode = isMediaNode;
-var updateAllMediaNodesAttrs = function updateAllMediaNodesAttrs(id, attrs, isMediaSingle) {
+var updateAllMediaSingleNodesAttrs = function updateAllMediaSingleNodesAttrs(id, attrs) {
   return function (state, dispatch) {
     var mediaPluginState = _pluginKey.stateKey.getState(state);
     var mediaNodes;
-    if (isMediaSingle) {
-      mediaNodes = findAllMediaSingleNodes(mediaPluginState, id);
-    } else {
-      var mediaGroupNode = findMediaNode(mediaPluginState, id, isMediaSingle);
-      mediaNodes = mediaGroupNode ? [mediaGroupNode] : [];
-    }
+    mediaNodes = findAllMediaSingleNodes(mediaPluginState, id);
     var validMediaNodePositions = mediaNodes.reduce(function (acc, _ref) {
       var getPos = _ref.getPos;
       var pos = getPos();
@@ -99,7 +71,7 @@ var updateAllMediaNodesAttrs = function updateAllMediaNodesAttrs(id, attrs, isMe
     return true;
   };
 };
-exports.updateAllMediaNodesAttrs = updateAllMediaNodesAttrs;
+exports.updateAllMediaSingleNodesAttrs = updateAllMediaSingleNodesAttrs;
 var updateCurrentMediaNodeAttrs = function updateCurrentMediaNodeAttrs(attrs, mediaNode) {
   return function (state, dispatch) {
     var pos = mediaNode.getPos();
@@ -116,10 +88,10 @@ var updateCurrentMediaNodeAttrs = function updateCurrentMediaNodeAttrs(attrs, me
   };
 };
 exports.updateCurrentMediaNodeAttrs = updateCurrentMediaNodeAttrs;
-var updateMediaNodeAttrs = function updateMediaNodeAttrs(id, attrs, isMediaSingle) {
+var updateMediaSingleNodeAttrs = function updateMediaSingleNodeAttrs(id, attrs) {
   return function (state, dispatch) {
     var mediaPluginState = _pluginKey.stateKey.getState(state);
-    var mediaNodeWithPos = findMediaNode(mediaPluginState, id, isMediaSingle);
+    var mediaNodeWithPos = findMediaSingleNode(mediaPluginState, id);
     if (!mediaNodeWithPos) {
       return false;
     }
@@ -135,7 +107,7 @@ var updateMediaNodeAttrs = function updateMediaNodeAttrs(id, attrs, isMediaSingl
     return true;
   };
 };
-exports.updateMediaNodeAttrs = updateMediaNodeAttrs;
+exports.updateMediaSingleNodeAttrs = updateMediaSingleNodeAttrs;
 var replaceExternalMedia = function replaceExternalMedia(pos, attrs) {
   return function (state, dispatch) {
     var tr = state.tr;

package/dist/cjs/plugins/media/commands/index.js

@@ -9,16 +9,16 @@ Object.defineProperty(exports, "replaceExternalMedia", {
     return _helpers.replaceExternalMedia;
   }
 });
-Object.defineProperty(exports, "updateAllMediaNodesAttrs", {
+Object.defineProperty(exports, "updateAllMediaSingleNodesAttrs", {
   enumerable: true,
   get: function get() {
-    return _helpers.updateAllMediaNodesAttrs;
+    return _helpers.updateAllMediaSingleNodesAttrs;
   }
 });
-Object.defineProperty(exports, "updateMediaNodeAttrs", {
+Object.defineProperty(exports, "updateMediaSingleNodeAttrs", {
   enumerable: true,
   get: function get() {
-    return _helpers.updateMediaNodeAttrs;
+    return _helpers.updateMediaSingleNodeAttrs;
   }
 });
 var _helpers = require("./helpers");