@atlaskit/editor-core 180.0.0 → 180.1.0

package/dist/esm/plugins/block-type/ui/ToolbarBlockType/index.js

@@ -6,6 +6,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 /** @jsx jsx */
@@ -31,18 +33,30 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "state", {
-      active: false
+      active: false,
+      isOpenedByKeyboard: false
     });
     _defineProperty(_assertThisInitialized(_this), "onOpenChange", function (attrs) {
-      _this.setState({
-        active: attrs.isOpen
-      });
+      _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
+        active: attrs.isOpen,
+        isOpenedByKeyboard: attrs.isOpenedByKeyboard
+      }));
     });
     _defineProperty(_assertThisInitialized(_this), "handleTriggerClick", function () {
       _this.onOpenChange({
-        isOpen: !_this.state.active
+        isOpen: !_this.state.active,
+        isOpenedByKeyboard: false
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "handleTriggerByKeyboard", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        _this.onOpenChange({
+          isOpen: !_this.state.active,
+          isOpenedByKeyboard: true
+        });
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "createItems", function () {
       var formatMessage = _this.props.intl.formatMessage;
       var _this$props$pluginSta = _this.props.pluginState,
@@ -79,9 +93,9 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
       var blockType = item.value;
       _this.props.setBlockType(blockType.name);
       if (shouldCloseMenu) {
-        _this.setState({
+        _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
           active: false
-        });
+        }));
       }
     });
     return _this;
@@ -89,7 +103,10 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(ToolbarBlockType, [{
     key: "render",
     value: function render() {
-      var active = this.state.active;
+      var _this2 = this;
+      var _this$state = this.state,
+        active = _this$state.active,
+        isOpenedByKeyboard = _this$state.isOpenedByKeyboard;
       var _this$props = this.props,
         popupsMountPoint = _this$props.popupsMountPoint,
         popupsBoundariesElement = _this$props.popupsBoundariesElement,
@@ -131,7 +148,15 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           zIndex: akEditorMenuZIndex,
           fitHeight: 360,
           fitWidth: 106,
-          shouldUseDefaultRole: true
+          shouldUseDefaultRole: true,
+          shouldFocusFirstItem: function shouldFocusFirstItem() {
+            if (isOpenedByKeyboard) {
+              _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {
+                isOpenedByKeyboard: false
+              }));
+            }
+            return isOpenedByKeyboard;
+          }
         }, jsx(BlockTypeButton, {
           isSmall: isSmall,
           isReducedSpacing: isReducedSpacing,
@@ -139,6 +164,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           disabled: false,
           title: blockTypeTitles[0],
           onClick: this.handleTriggerClick,
+          onKeyDown: this.handleTriggerByKeyboard,
           formatMessage: formatMessage,
           "aria-expanded": active
         }, longestDropdownMenuItem)), jsx("span", {
@@ -154,6 +180,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         disabled: true,
         title: blockTypeTitles[0],
         onClick: this.handleTriggerClick,
+        onKeyDown: this.handleTriggerByKeyboard,
         formatMessage: formatMessage,
         "aria-expanded": active
       }, longestDropdownMenuItem), jsx("span", {

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

@@ -126,11 +126,12 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render() {
+      var platform = this.reactComponentProps.platform;
       return /*#__PURE__*/React.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
         getPos: this.getPos,
-        platform: this.reactComponentProps.platform
+        platform: platform
       });
     }
   }]);

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

@@ -13,6 +13,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 = /*#__PURE__*/function (_React$Component) {
@@ -33,6 +36,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
     _createClass(_class, [{
       key: "render",
       value: function render() {
+        var _getPluginState;
         var _titleUrlPairFromNode = titleUrlPairFromNode(this.props.node),
           url = _titleUrlPairFromNode.url;
         if (url && !isSafeUrl(url)) {
@@ -51,10 +55,20 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
           }
         }
         var cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
-        return /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
+        var editorAppearance = (_getPluginState = getPluginState(this.props.view.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.editorAppearance;
+        var 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)));
       }
     }, {
       key: "componentDidCatch",

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

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

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

@@ -84,7 +84,10 @@ export var createClipboardSerializer = function createClipboardSerializer(schema
       var parentTable = findParentNodeOfType(schema.nodes.table)(selection);
       var attributes = parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs;
       var newTable = schema.nodes.table;
-      var newTableNode = newTable.createChecked(_objectSpread({}, attributes), content);
+      // Explicitly remove local id since we are creating a new table and it should have a unique local id which will be generated.
+      var newTableNode = newTable.createChecked(_objectSpread(_objectSpread({}, attributes), {}, {
+        localId: undefined
+      }), content);
       var newContent = Fragment.from(newTableNode);
       // Pass updated content into original ProseMirror serializeFragment function.
       // Currently incorrectly typed in @Types. See this GitHub thread: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/57668

package/dist/esm/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 var createPlugin = function createPlugin(dispatch, providerFactory, collabProviderCallback, options) {
   var fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);

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

@@ -25,6 +25,11 @@ export var 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',
@@ -122,11 +127,12 @@ export var getToolbarConfig = function getToolbarConfig() {
       var confirmDialog;
       if (isReferencedSource(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
         confirmDialog = function confirmDialog() {
+          var 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: function getChildrenInfo() {

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

@@ -22,6 +22,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';
 var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1 1 auto;\n  flex-grow: 0;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 8px;\n  @media (max-width: ", "px) {\n    justify-content: center;\n    padding: 0;\n  }\n"])), akEditorMobileMaxWidth);
 var toolbarButtonWrapperFullWith = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
 var wrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
@@ -88,7 +89,10 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_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/esm/plugins/floating-toolbar/ui/Button.js

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

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

@@ -6,6 +6,7 @@ import { Checkbox } from '@atlaskit/checkbox';
 import Modal, { ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
 import messages from './messages';
 export var CheckboxModal = function CheckboxModal(props) {
+  var _options$getChildrenI;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isChecked = _useState2[0],
@@ -19,9 +20,10 @@ export var CheckboxModal = function CheckboxModal(props) {
   var okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
   var cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
   var checkboxlabel = options === null || options === void 0 ? void 0 : options.checkboxLabel;
+  var childrenInfo = options === null || options === void 0 ? void 0 : (_options$getChildrenI = options.getChildrenInfo) === null || _options$getChildrenI === void 0 ? void 0 : _options$getChildrenI.call(options);
   var ListComponent = function ListComponent(_ref) {
     var nodes = _ref.nodes;
-    if (!nodes) {
+    if (nodes.length === 0) {
       return null;
     }
     return /*#__PURE__*/React.createElement("ul", null, nodes.map(function (node) {
@@ -46,8 +48,8 @@ export var CheckboxModal = function 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: function onChange() {

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

@@ -7,6 +7,8 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 /** @jsx jsx */
@@ -39,8 +41,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isOpen: false
+      isOpen: false,
+      isOpenedByKeyboard: false
     });
+    _defineProperty(_assertThisInitialized(_this), "triggerRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "renderArrayOptions", function (options) {
       var _this$props = _this.props,
         showSelected = _this$props.showSelected,
@@ -56,15 +60,25 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
       _this.setState({
-        isOpen: !_this.state.isOpen
+        isOpen: !_this.state.isOpen,
+        isOpenedByKeyboard: false
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "toggleOpenByKeyboard", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        _this.setState({
+          isOpen: !_this.state.isOpen,
+          isOpenedByKeyboard: true
+        });
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "hide", function () {
-      _this.setState({
+      _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
         isOpen: false
-      });
+      }));
     });
-    _defineProperty(_assertThisInitialized(_this), "hideonEsc", function () {
+    _defineProperty(_assertThisInitialized(_this), "hideOnEsc", function () {
       var _document$querySelect;
       _this.hide();
       //Focus the trigger button only on Escape
@@ -73,7 +87,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_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;
@@ -106,6 +120,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           title: title,
           icon: TriggerIcon,
           onClick: this.toggleOpen,
+          onKeyDown: this.toggleOpenByKeyboard,
           selected: isOpen,
           disabled: disabled,
           tooltipContent: tooltip
@@ -119,6 +134,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
             label: "Expand dropdown menu"
           })),
           onClick: this.toggleOpen,
+          onKeyDown: this.toggleOpenByKeyboard,
           selected: isOpen,
           disabled: disabled,
           tooltipContent: tooltip
@@ -133,12 +149,13 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       var fitWidth = Array.isArray(options) ? dropdownWidth || menuItemDimensions.width : options.width;
       var 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,
@@ -152,8 +169,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/esm/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -48,28 +48,30 @@ var ExtensionButton = function ExtensionButton(props) {
   var item = props.item,
     node = props.node,
     editorView = props.editorView;
-  var ButtonIcon = item.icon ? Loadable({
-    loader: function () {
-      var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        return _regeneratorRuntime.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.useMemo(function () {
+    return item.icon ? Loadable({
+      loader: function () {
+        var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+          return _regeneratorRuntime.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/esm/plugins/floating-toolbar/ui/ScrollButtons.js

@@ -87,19 +87,14 @@ export default (function (_ref) {
     }
   });
   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) {
@@ -108,7 +103,17 @@ export default (function (_ref) {
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [node, scrollContainerRef]);
+  }, []);
+  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 ? jsx("div", {
     ref: buttonsContainerRef,
     css: toolbarScrollButtons,

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

@@ -15,6 +15,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';
@@ -174,6 +175,15 @@ var ToolbarItems = /*#__PURE__*/React.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: hexToEditorBackgroundPaletteColor
           });
         }
         if (item.selectType === 'emoji') {
@@ -433,6 +443,7 @@ var Toolbar = /*#__PURE__*/function (_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/esm/plugins/fragment/pm-plugins/fragment-consistency.js

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

package/dist/esm/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/esm/plugins/hyperlink/index.js

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

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

@@ -182,7 +182,7 @@ var getActiveText = function getActiveText(selection) {
   return;
 };
 export var stateKey = new PluginKey('hyperlinkPlugin');
-export var plugin = function plugin(dispatch) {
+export var plugin = function plugin(dispatch, editorAppearance) {
   return new SafePlugin({
     state: {
       init: function init(_, state) {
@@ -191,7 +191,8 @@ export 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) {
@@ -204,7 +205,8 @@ export 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) {
@@ -219,7 +221,8 @@ export 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;
@@ -230,7 +233,8 @@ export 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 (!shallowEqual(state, pluginState)) {