@atlaskit/editor-core 180.0.0 → 181.0.0

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

@@ -19,6 +19,7 @@ var _default = function _default(_ref) {
     icon = _ref.icon,
     iconAfter = _ref.iconAfter,
     onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
     onFocus = _ref.onFocus,
@@ -36,7 +37,9 @@ var _default = function _default(_ref) {
     _ref$hideTooltipOnCli = _ref.hideTooltipOnClick,
     hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? true : _ref$hideTooltipOnCli,
     ariaHasPopup = _ref.ariaHasPopup,
-    tabIndex = _ref.tabIndex;
+    tabIndex = _ref.tabIndex,
+    areaControls = _ref.areaControls,
+    ariaLabel = _ref.ariaLabel;
   // Check if there's only an icon and add additional styles
   var iconOnly = (icon || iconAfter) && !children;
   var customSpacing = iconOnly ? _styles.iconOnlySpacing : {};
@@ -61,8 +64,10 @@ var _default = function _default(_ref) {
         }))
       }, rest);
     },
-    "aria-label": title,
-    "aria-pressed": selected,
+    "aria-label": ariaLabel || title,
+    "aria-pressed": !ariaHasPopup ? selected : undefined,
+    "aria-expanded": ariaHasPopup ? selected : undefined,
+    "aria-controls": ariaHasPopup ? areaControls : undefined,
     spacing: 'compact',
     href: href,
     target: target,
@@ -71,6 +76,7 @@ var _default = function _default(_ref) {
     iconBefore: icon || undefined,
     iconAfter: iconAfter,
     onClick: onClick,
+    onKeyDown: onKeyDown,
     isSelected: selected,
     isDisabled: disabled,
     testId: testId,

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

@@ -16,6 +16,7 @@ var _messages = _interopRequireDefault(require("./messages"));
 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 CheckboxModal = function CheckboxModal(props) {
+  var _options$getChildrenI;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isChecked = _useState2[0],
@@ -29,9 +30,10 @@ var CheckboxModal = function CheckboxModal(props) {
   var okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(_messages.default.confirmModalOK);
   var cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(_messages.default.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.default.createElement("ul", null, nodes.map(function (node) {
@@ -56,8 +58,8 @@ var CheckboxModal = function CheckboxModal(props) {
     testId: testId
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
     appearance: "warning"
-  }, heading)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", null, options === null || options === void 0 ? void 0 : options.message), (options === null || options === void 0 ? void 0 : options.getChildrenInfo) && /*#__PURE__*/_react.default.createElement(ListComponent, {
-    nodes: options === null || options === void 0 ? void 0 : options.getChildrenInfo()
+  }, heading)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", null, options === null || options === void 0 ? void 0 : options.message), !!(childrenInfo !== null && childrenInfo !== void 0 && childrenInfo.length) && /*#__PURE__*/_react.default.createElement(ListComponent, {
+    nodes: childrenInfo
   }), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
     isChecked: isChecked,
     onChange: function onChange() {

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,24 +69,35 @@ 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
+      // Focus the trigger button only on Escape
+      // Focus is done before hiding to ensure onBlur is called
       (_document$querySelect = document.querySelector("[data-testid=".concat(_this.props.buttonTestId, "]"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.focus();
+      _this.hide();
     });
     (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;
@@ -104,7 +119,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         tooltip = _this$props2.tooltip,
         buttonTestId = _this$props2.buttonTestId,
         dropdownWidth = _this$props2.dropdownWidth,
-        editorView = _this$props2.editorView;
+        editorView = _this$props2.editorView,
+        dropdownListId = _this$props2.dropdownListId;
       var trigger;
       if (icon) {
         var TriggerIcon = hideExpandIcon ? icon : (0, _react2.jsx)(CompositeIcon, {
@@ -115,6 +131,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           title: title,
           icon: TriggerIcon,
           onClick: this.toggleOpen,
+          onKeyDown: this.toggleOpenByKeyboard,
           selected: isOpen,
           disabled: disabled,
           tooltipContent: tooltip
@@ -128,9 +145,12 @@ var Dropdown = /*#__PURE__*/function (_Component) {
             label: "Expand dropdown menu"
           })),
           onClick: this.toggleOpen,
+          onKeyDown: this.toggleOpenByKeyboard,
           selected: isOpen,
           disabled: disabled,
-          tooltipContent: tooltip
+          tooltipContent: tooltip,
+          ariaHasPopup: true,
+          areaControls: dropdownListId
         }, title);
       }
 
@@ -142,17 +162,19 @@ 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,
         trigger: trigger,
-        editorView: editorView
+        editorView: editorView,
+        dropdownListId: dropdownListId
       }, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
         hide: this.hide,
         dispatchCommand: dispatchCommand
@@ -161,8 +183,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/EmojiPickerButton.js

@@ -16,14 +16,9 @@ var _emoji = require("@atlaskit/emoji");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _EditorEmojiAddIcon = _interopRequireDefault(require("./EditorEmojiAddIcon"));
 var _withOuterListeners = _interopRequireDefault(require("../../../ui/with-outer-listeners"));
-var _templateObject, _templateObject2;
+var _templateObject;
 // helps adjusts position of popup
 var emojiPickerButtonWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
-
-// helps to vertically align emoji picker
-// both top and bottom margin should be 2px
-// https://product-fabric.atlassian.net/browse/CETI-148
-var emojiPickerWrapper = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: -12px;\n  margin-top: -4px;\n"])));
 var EmojiPickerWithListener = (0, _withOuterListeners.default)(_emoji.EmojiPicker);
 var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = _react2.default.useRef(null);
@@ -83,13 +78,11 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
       // we need an index of > 500 to display over it
       ,
       zIndex: props.setDisableParentScroll ? 600 : undefined
-    }, (0, _react.jsx)("div", {
-      css: emojiPickerWrapper
     }, (0, _react.jsx)(_providerFactory.WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker
-    })));
+    }));
   };
   var title = props.title || '';
   return (0, _react.jsx)("div", {

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"));
@@ -92,6 +94,7 @@ var ExtensionButton = function ExtensionButton(props) {
   };
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
     title: item.label,
+    ariaLabel: item.tooltip,
     icon: ButtonIcon ? /*#__PURE__*/_react.default.createElement(ButtonIcon, {
       label: item.label || ''
     }) : undefined,

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");
@@ -31,6 +32,7 @@ var _Separator = _interopRequireDefault(require("./Separator"));
 var _Input = _interopRequireDefault(require("./Input"));
 var _ExtensionsPlaceholder = require("./ExtensionsPlaceholder");
 var _ColorPickerButton = _interopRequireDefault(require("../../../ui/ColorPickerButton"));
+var _ColorPalette = require("../../../ui/ColorPalette");
 var _EmojiPickerButton = require("./EmojiPickerButton");
 var _announcer = _interopRequireDefault(require("../../../utils/announcer/announcer"));
 var _reactIntlNext = require("react-intl-next");
@@ -61,6 +63,10 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
     setDisableScroll = _ref.setDisableScroll,
     mountRef = _ref.mountRef;
   var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
+  var _ref2 = editorView ? (0, _featureFlagsContext.getFeatureFlags)(editorView.state) : {
+      useSomewhatSemanticTextColorNames: false
+    },
+    useSomewhatSemanticTextColorNames = _ref2.useSomewhatSemanticTextColorNames;
   return (0, _react2.jsx)(_buttonGroup.default, null, items.filter(function (item) {
     return !item.hidden;
   }).map(function (item, idx) {
@@ -146,7 +152,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           showSelected: item.showSelected,
           buttonTestId: item.testId,
           editorView: editorView,
-          setDisableParentScroll: scrollable ? setDisableScroll : undefined
+          setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+          dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList")
         });
       case 'select':
         if (item.selectType === 'list') {
@@ -182,6 +189,25 @@ 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
+            //  and paletteColorTooltipMessages.
+            // When we need to support different color palette
+            //  in floating toolbar, we need to set hexToPaletteColor
+            //  and paletteColorTooltipMessages in item options.
+            ,
+            hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor,
+            paletteColorTooltipMessages: _ColorPalette.backgroundPaletteTooltipMessages
+            // We did not want to create new FF or update
+            //  useSomewhatSemanticTextColorNames name
+            //  because it is temporary and require extra work.
+            // So even though it says text color names,
+            //  we are going to use for all color pickers
+            //  such as text, background and table charts.
+            ,
+            showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
           });
         }
         if (item.selectType === 'emoji') {
@@ -203,8 +229,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         if (!editorView || !extensionsProvider) {
           return null;
         }
-        var _ref2 = (0, _featureFlagsContext.getFeatureFlags)(editorView.state) || {},
-          extendFloatingToolbar = _ref2.extendFloatingToolbar;
+        var _ref3 = (0, _featureFlagsContext.getFeatureFlags)(editorView.state) || {},
+          extendFloatingToolbar = _ref3.extendFloatingToolbar;
         if (!extendFloatingToolbar) {
           return null;
         }
@@ -343,8 +369,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   // this prevents https://product-fabric.atlassian.net/browse/ED-10207
   (0, _createClass2.default)(Toolbar, [{
     key: "resetStyling",
-    value: function resetStyling(_ref3) {
-      var table = _ref3.table;
+    value: function resetStyling(_ref4) {
+      var table = _ref4.table;
       if (this.props.editorView) {
         var _this$props$editorVie2 = this.props.editorView,
           state = _this$props$editorVie2.state,
@@ -443,6 +469,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/floating-toolbar/utils.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.compareArrays = void 0;
 exports.findNode = findNode;
-exports.getFirstFocusableElement = getFirstFocusableElement;
-exports.getFocusableElements = getFocusableElements;
 exports.shallowEqual = void 0;
 var shallowEqual = function shallowEqual(objA, objB) {
   if (objA === objB) {
@@ -62,14 +60,4 @@ function findNode(parent, predicate) {
     return true;
   });
   return matchedNode;
-}
-function getFocusableElements(rootNode) {
-  if (!rootNode) {
-    return [];
-  }
-  var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return Array.from(focusableModalElements) || [];
-}
-function getFirstFocusableElement(rootNode) {
-  return getFocusableElements(rootNode)[0];
 }

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

@@ -3,17 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createPlugin = createPlugin;
 exports.default = void 0;
 var _adfSchema = require("@atlaskit/adf-schema");
-var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _pluginKey = require("./plugin-key");
 var _fragmentConsistency = require("./pm-plugins/fragment-consistency");
-function createPlugin() {
-  return new _safePlugin.SafePlugin({
-    key: _pluginKey.pluginKey
-  });
-}
 var fragmentMarkPlugin = function fragmentMarkPlugin() {
   return {
     name: 'fragmentPlugin',

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/help-dialog/commands.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stopPropagationCommand = exports.openHelpCommand = exports.closeHelpCommand = void 0;
+exports.openHelpCommand = exports.closeHelpCommand = void 0;
 var _pluginKey = require("./plugin-key");
 var openHelpCommand = function openHelpCommand(tr, dispatch) {
   tr = tr.setMeta(_pluginKey.pluginKey, true);
@@ -18,8 +18,4 @@ var closeHelpCommand = function closeHelpCommand(tr, dispatch) {
   tr = tr.setMeta(_pluginKey.pluginKey, false);
   dispatch(tr);
 };
-exports.closeHelpCommand = closeHelpCommand;
-var stopPropagationCommand = function stopPropagationCommand(e) {
-  return e.stopPropagation();
-};
-exports.stopPropagationCommand = stopPropagationCommand;
+exports.closeHelpCommand = closeHelpCommand;

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"));