@atlaskit/editor-plugin-floating-toolbar 0.5.0 → 0.6.0

package/dist/cjs/ui/SimpleModal.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleModal = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+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 SimpleModal = function SimpleModal(props) {
+  var onConfirm = props.onConfirm,
+    onClose = props.onClose,
+    options = props.options,
+    formatMessage = props.intl.formatMessage,
+    testId = props.testId;
+  var heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(_messages.default.confirmModalDefaultHeading);
+  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);
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    onClose: onClose,
+    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)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    appearance: "default",
+    onClick: onClose,
+    testId: testId ? "".concat(testId, "-cancel-button") : undefined
+  }, cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    appearance: "warning",
+    onClick: function onClick() {
+      onConfirm();
+      onClose();
+    },
+    testId: testId ? "".concat(testId, "-confirm-button") : undefined
+  }, okButtonLabel)));
+};
+exports.SimpleModal = SimpleModal;

package/dist/cjs/ui/Toolbar.js

@@ -0,0 +1,436 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
+var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _commands = require("@atlaskit/editor-plugin-table/commands");
+var _colors = require("@atlaskit/theme/colors");
+var _components = require("@atlaskit/theme/components");
+var _constants = require("@atlaskit/theme/constants");
+var _forceFocus = require("../pm-plugins/force-focus");
+var _commands2 = require("../pm-plugins/toolbar-data/commands");
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+var _EmojiPickerButton = require("./EmojiPickerButton");
+var _ExtensionsPlaceholder = require("./ExtensionsPlaceholder");
+var _Input = _interopRequireDefault(require("./Input"));
+var _messages = _interopRequireDefault(require("./messages"));
+var _ScrollButtons = require("./ScrollButtons");
+var _Select = _interopRequireDefault(require("./Select"));
+var _Separator = _interopRequireDefault(require("./Separator"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+/** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+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 _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 ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var items = _ref.items,
+    dispatchCommand = _ref.dispatchCommand,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    editorView = _ref.editorView,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    scrollable = _ref.scrollable,
+    providerFactory = _ref.providerFactory,
+    extensionsProvider = _ref.extensionsProvider,
+    node = _ref.node,
+    setDisableScroll = _ref.setDisableScroll,
+    mountRef = _ref.mountRef,
+    featureFlags = _ref.featureFlags,
+    api = _ref.api;
+  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;
+  return (0, _react2.jsx)(_buttonGroup.default, null, items.filter(function (item) {
+    return !item.hidden;
+  }).map(function (item, idx) {
+    var _api$contextPanel, _api$extension;
+    switch (item.type) {
+      case 'button':
+        var ButtonIcon = item.icon;
+        var onClickHandler = function onClickHandler() {
+          if (item.confirmDialog) {
+            dispatchCommand((0, _commands2.showConfirmDialog)(idx));
+          } else {
+            dispatchCommand(item.onClick);
+            if (item.focusEditoronEnter && !(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+              editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+            }
+          }
+        };
+        return (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+          className: item.className,
+          key: idx,
+          title: item.title,
+          href: item.href,
+          icon: item.icon ? (0, _react2.jsx)(ButtonIcon, {
+            label: item.title
+          }) : undefined,
+          appearance: item.appearance,
+          target: item.target,
+          onClick: onClickHandler,
+          onMouseEnter: function onMouseEnter() {
+            return dispatchCommand(item.onMouseEnter);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return dispatchCommand(item.onMouseLeave);
+          },
+          onFocus: function onFocus() {
+            return dispatchCommand(item.onFocus);
+          },
+          onBlur: function onBlur() {
+            return dispatchCommand(item.onBlur);
+          },
+          selected: item.selected,
+          disabled: item.disabled,
+          tooltipContent: item.tooltipContent,
+          testId: item.testId,
+          hideTooltipOnClick: item.hideTooltipOnClick,
+          ariaHasPopup: item.ariaHasPopup,
+          tabIndex: item.tabIndex
+        }, item.showTitle && item.title);
+      case 'input':
+        return (0, _react2.jsx)(_Input.default, {
+          key: idx,
+          mountPoint: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          defaultValue: item.defaultValue,
+          placeholder: item.placeholder,
+          onSubmit: function onSubmit(value) {
+            return dispatchCommand(item.onSubmit(value));
+          },
+          onBlur: function onBlur(value) {
+            return dispatchCommand(item.onBlur(value));
+          }
+        });
+      case 'custom':
+        {
+          return item.render(editorView, idx, dispatchAnalyticsEvent);
+        }
+      case 'dropdown':
+        var DropdownIcon = item.icon;
+        return (0, _react2.jsx)(_Dropdown.default, {
+          key: idx,
+          title: item.title,
+          icon: DropdownIcon && (0, _react2.jsx)(DropdownIcon, {
+            label: item.title
+          }),
+          dispatchCommand: dispatchCommand,
+          options: item.options,
+          disabled: item.disabled,
+          tooltip: item.tooltip,
+          hideExpandIcon: item.hideExpandIcon,
+          mountPoint: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          dropdownWidth: item.dropdownWidth,
+          showSelected: item.showSelected,
+          buttonTestId: item.testId,
+          editorView: editorView,
+          setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+          dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList"),
+          alignDropdownWithToolbar: items.length === 1
+        });
+      case 'select':
+        if (item.selectType === 'list') {
+          var ariaLabel = item.title || item.placeholder;
+          return (0, _react2.jsx)(_Select.default, {
+            key: idx,
+            dispatchCommand: dispatchCommand,
+            options: item.options,
+            hideExpandIcon: item.hideExpandIcon,
+            mountPoint: scrollable ? mountRef.current : undefined,
+            boundariesElement: popupsBoundariesElement,
+            scrollableElement: popupsScrollableElement,
+            defaultValue: item.defaultValue,
+            placeholder: item.placeholder,
+            onChange: function onChange(selected) {
+              return dispatchCommand(item.onChange(selected));
+            },
+            ariaLabel: ariaLabel,
+            filterOption: item.filterOption,
+            setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+            classNamePrefix: 'floating-toolbar-select'
+          });
+        }
+        if (item.selectType === 'color') {
+          return (0, _react2.jsx)(_uiMenu.ColorPickerButton, {
+            skipFocusButtonAfterPick: true,
+            key: idx,
+            title: item.title,
+            onChange: function onChange(selected) {
+              dispatchCommand(item.onChange(selected));
+            },
+            colorPalette: item.options,
+            currentColor: item.defaultValue ? item.defaultValue.value : undefined,
+            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: _uiColor.backgroundPaletteTooltipMessages
+          });
+        }
+        if (item.selectType === 'emoji') {
+          return (0, _react2.jsx)(_EmojiPickerButton.EmojiPickerButton, {
+            key: idx,
+            editorView: editorView,
+            title: item.title,
+            providerFactory: providerFactory,
+            isSelected: item.selected,
+            onChange: function onChange(selected) {
+              return dispatchCommand(item.onChange(selected));
+            },
+            mountPoint: emojiAndColourPickerMountPoint,
+            setDisableParentScroll: scrollable ? setDisableScroll : undefined
+          });
+        }
+        return null;
+      case 'extensions-placeholder':
+        if (!editorView || !extensionsProvider) {
+          return null;
+        }
+        var _ref2 = featureFlags || {},
+          extendFloatingToolbar = _ref2.extendFloatingToolbar;
+        if (!extendFloatingToolbar) {
+          return null;
+        }
+        return (0, _react2.jsx)(_ExtensionsPlaceholder.ExtensionsPlaceholder, {
+          key: idx,
+          node: node,
+          editorView: editorView,
+          extensionProvider: extensionsProvider,
+          separator: item.separator,
+          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange,
+          extensionApi: api === null || api === void 0 ? void 0 : (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
+        });
+      case 'separator':
+        return (0, _react2.jsx)(_Separator.default, {
+          key: idx
+        });
+    }
+  }));
+}, function (prevProps, nextProps) {
+  if (!nextProps.node) {
+    return false;
+  }
+  // only rerender toolbar items if the node is different
+  // otherwise it causes an issue where multiple popups stays open
+  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !(0, _floatingToolbar.areSameItems)(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
+});
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var toolbarContainer = function toolbarContainer(theme, scrollable, hasSelect, firstElementIsSelect) {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n\n  & > div > div {\n    align-items: center;\n  }\n  ", "\n"])), (0, _components.themed)({
+    light: "var(--ds-surface-overlay, white)",
+    dark: "var(--ds-surface-overlay, ".concat(_colors.DN70, ")")
+  })(theme), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"), scrollable ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n              height: 40px;\n            "]))) : (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n              height: 32px;\n            "])))) : (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        padding: ", " ", ";\n        ", "\n      "])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", firstElementIsSelect && (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n          padding-left: ", ";\n        "])), "var(--ds-space-050, 4px)")));
+};
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
+  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), scrollable ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        -webkit-overflow-scrolling: touch;\n        padding: ", " 0 50px;\n        > div {\n          > div:first-child {\n            ", "\n          }\n          > div:last-child {\n            margin-right: ", ";\n          }\n        }\n      "])), scrollDisabled ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n              overflow: hidden;\n            "]))) : (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n              overflow-x: auto;\n              overflow-y: hidden;\n            "]))), "var(--ds-space-050, 4px)", firstElementIsSelect ? (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n                  margin-left: ", ";\n                "])), "var(--ds-space-050, 4px)") : (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n                  margin-left: ", ";\n                "])), "var(--ds-space-100, 8px)"), "var(--ds-space-100, 8px)") : (0, _react2.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n        display: flex;\n      "]))));
+};
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var Toolbar = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Toolbar, _Component);
+  var _super = _createSuper(Toolbar);
+  function Toolbar(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, Toolbar);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shouldHandleArrowKeys", function () {
+      var _this$props$items;
+      //To prevent the keydown handling of arrow keys for custom toolbar items with 'disableArrowNavigation' prop enabled,
+      //Usually the button which has menus or popups
+      return !((_this$props$items = _this.props.items) !== null && _this$props$items !== void 0 && _this$props$items.find(function (item) {
+        return item.type === 'custom' && item.disableArrowNavigation;
+      }));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEscape", function (event) {
+      var _this$props$editorVie;
+      // If any menu is open inside the floating toolbar 'Esc' key should not
+      // focus the editorview.
+      // Event can't be stopped as they are not childnodes of floating toolbar
+
+      var isDropdownOpen = !!document.querySelector('[data-role="droplistContent"]');
+      var isSelectMenuOpen = !!document.querySelector('.floating-toolbar-select__menu');
+      if (isDropdownOpen || isSelectMenuOpen) {
+        return;
+      }
+      (_this$props$editorVie = _this.props.editorView) === null || _this$props$editorVie === void 0 ? void 0 : _this$props$editorVie.focus();
+      event.preventDefault();
+      event.stopPropagation();
+    });
+    _this.scrollContainerRef = /*#__PURE__*/_react.default.createRef();
+    _this.mountRef = /*#__PURE__*/_react.default.createRef();
+    _this.toolbarContainerRef = /*#__PURE__*/_react.default.createRef();
+    _this.state = {
+      scrollDisabled: false,
+      mounted: false
+    };
+    return _this;
+  }
+  // remove any decorations added by toolbar buttons i.e danger and selected styling
+  // this prevents https://product-fabric.atlassian.net/browse/ED-10207
+  (0, _createClass2.default)(Toolbar, [{
+    key: "resetStyling",
+    value: function resetStyling(_ref3) {
+      var table = _ref3.table;
+      if (this.props.editorView) {
+        var _this$props$api;
+        var _this$props$editorVie2 = this.props.editorView,
+          state = _this$props$editorVie2.state,
+          dispatch = _this$props$editorVie2.dispatch;
+        if (table) {
+          return (0, _commands.clearHoverSelection)()(state, dispatch);
+        }
+        (_this$props$api = this.props.api) === null || _this$props$api === void 0 ? void 0 : _this$props$api.decorations.actions.removeDecoration(state, dispatch);
+      }
+    }
+  }, {
+    key: "setDisableScroll",
+    value: function setDisableScroll(disabled) {
+      var _this2 = this;
+      // wait before setting disabled state incase users jumping from one popup to another
+      if (disabled) {
+        requestAnimationFrame(function () {
+          _this2.setState({
+            scrollDisabled: disabled
+          });
+        });
+      } else {
+        this.setState({
+          scrollDisabled: disabled
+        });
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setState({
+        mounted: true
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props;
+      (0, _forceFocus.checkShouldForceFocusAndApply)((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.editorView);
+      if (this.props.node !== prevProps.node) {
+        this.resetStyling({
+          table: (prevProps === null || prevProps === void 0 ? void 0 : prevProps.node.type.name) === 'table'
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var editorView = this.props.editorView;
+      if (editorView) {
+        var tr = editorView.state.tr,
+          dispatch = editorView.dispatch;
+        dispatch((0, _forceFocus.forceFocusSelector)(null)(tr));
+      }
+      this.resetStyling({
+        table: this.props.node.type.name === 'table'
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        items = _this$props2.items,
+        className = _this$props2.className,
+        node = _this$props2.node,
+        intl = _this$props2.intl,
+        scrollable = _this$props2.scrollable;
+      if (!items || !items.length) {
+        return null;
+      }
+
+      // Select has left padding of 4px to the border, everything else 8px
+      var firstElementIsSelect = items[0].type === 'select';
+      var hasSelect = items.find(function (item) {
+        return item.type === 'select' && item.selectType === 'list';
+      });
+      var isShortcutToFocusToolbar = function isShortcutToFocusToolbar(event) {
+        //Alt + F10 to reach first element in this floating toolbar
+        return event.altKey && (event.key === 'F10' || event.keyCode === 121);
+      };
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_uiMenu.ToolbarArrowKeyNavigationProvider, {
+        editorView: this.props.editorView,
+        handleEscape: this.handleEscape,
+        disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
+        childComponentSelector: "[data-testid='editor-floating-toolbar']",
+        isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+        intl: intl
+      }, (0, _react2.jsx)("div", {
+        ref: this.toolbarContainerRef,
+        css: function css(theme) {
+          return [toolbarContainer({
+            theme: theme
+          }, scrollable, hasSelect !== undefined, firstElementIsSelect)];
+        },
+        "aria-label": intl.formatMessage(_messages.default.floatingToolbarAriaLabel),
+        role: "toolbar",
+        "data-testid": "editor-floating-toolbar",
+        className: className
+      }, (0, _react2.jsx)(_ui.Announcer, {
+        text: intl.formatMessage(_messages.default.floatingToolbarAnnouncer),
+        delay: 250
+      }), (0, _react2.jsx)("div", {
+        "data-testid": "floating-toolbar-items",
+        ref: this.scrollContainerRef
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        ,
+        css: toolbarOverflow(scrollable, this.state.scrollDisabled, firstElementIsSelect)
+      }, (0, _react2.jsx)(ToolbarItems, (0, _extends2.default)({}, this.props, {
+        setDisableScroll: this.setDisableScroll.bind(this),
+        mountRef: this.mountRef,
+        mounted: this.state.mounted,
+        featureFlags: this.props.featureFlags
+      }))), scrollable && (0, _react2.jsx)(_ScrollButtons.ScrollButtons, {
+        intl: intl,
+        scrollContainerRef: this.scrollContainerRef,
+        node: node,
+        disabled: this.state.scrollDisabled
+      })), (0, _react2.jsx)("div", {
+        ref: this.mountRef
+      })));
+    }
+  }]);
+  return Toolbar;
+}(_react.Component);
+var _default = (0, _reactIntlNext.injectIntl)(Toolbar);
+exports.default = _default;

package/dist/cjs/ui/ToolbarLoader.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarLoader = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+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 || (0, _typeof2.default)(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 ToolbarLoader = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-core-floating-toolbar" */
+      './Toolbar'));
+    }).then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
+exports.ToolbarLoader = ToolbarLoader;

package/dist/cjs/ui/messages.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactIntlNext = require("react-intl-next");
+var _default = (0, _reactIntlNext.defineMessages)({
+  confirmModalDefaultHeading: {
+    id: 'fabric.editor.floatingToolbar.confirmModalHeading',
+    defaultMessage: 'Are you sure?',
+    description: 'Default heading of floating toolbar confirmation modal.'
+  },
+  confirmModalOK: {
+    id: 'fabric.editor.floatingToolbar.confirmModalOK',
+    defaultMessage: 'OK',
+    description: 'OK button for floating toolbar confirmation modal.'
+  },
+  confirmModalCancel: {
+    id: 'fabric.editor.floatingToolbar.confirmModalCancel',
+    defaultMessage: 'Cancel',
+    description: 'Cancel button for floating toolbar confirmation modal.'
+  },
+  confirmModalListUnit: {
+    id: 'fabric.editor.floatingToolbar.confirmModalConnectedUnit',
+    defaultMessage: '{name}{amount, plural, =0 {} one { (+1 connected element)} other { (+# connected elements)}}',
+    description: 'Text displayed in confirmation modal which highlights the nodes and the amount of connected nodes that will be deleted'
+  },
+  confirmDeleteLinkedModalMessage: {
+    id: 'fabric.editor.extension.confirmDeleteLinkedModalMessage',
+    defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
+    description: 'Message for confirm modal when deleting a extension linked to an data consumer.'
+  },
+  floatingToolbarAriaLabel: {
+    id: 'fabric.editor.floatingToolbar.floatingToolbarAriaLabel',
+    defaultMessage: 'Floating Toolbar',
+    description: "a floating toolbar's aria label"
+  },
+  floatingToolbarAnnouncer: {
+    id: 'fabric.editor.floatingToolbar.floatingToolbarAnnouncer',
+    defaultMessage: 'Floating toolbar controls have been opened',
+    description: 'message that will be announced to screenreaders that the floating toolbar is opened'
+  },
+  floatingToolbarScrollLeft: {
+    id: 'fabric.editor.floatingToolbar.scrollLeft',
+    defaultMessage: 'Scroll left',
+    description: 'Button to scroll left when the toolbar is in the overflow state'
+  },
+  floatingToolbarScrollRight: {
+    id: 'fabric.editor.floatingToolbar.scrollRight',
+    defaultMessage: 'Scroll right',
+    description: 'Button to scroll right when the toolbar is in the overflow state'
+  }
+});
+exports.default = _default;

package/dist/cjs/ui/styles.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconOnlySpacing = exports.getButtonStyles = void 0;
+var _adfSchema = require("@atlaskit/adf-schema");
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+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 background = {
+  danger: {
+    default: {
+      light: 'inherit',
+      dark: 'inherit'
+    },
+    hover: {
+      light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")")
+    },
+    active: {
+      light: "var(--ds-background-neutral-pressed, ".concat("".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)), ")"),
+      dark: "var(--ds-background-neutral-pressed, ".concat("".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)), ")")
+    }
+  }
+};
+var color = {
+  danger: {
+    default: {
+      light: "var(--ds-icon, ".concat(colors.N400, ")"),
+      dark: "var(--ds-icon, ".concat(colors.DN400, ")")
+    },
+    hover: {
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
+    },
+    active: {
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
+    }
+  }
+};
+var getStyles = function getStyles(property, _ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? 'default' : _ref$state,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'light' : _ref$mode;
+  if (!property[appearance] || !property[appearance][state]) {
+    return 'initial';
+  }
+  return property[appearance][state][mode];
+};
+var iconOnlySpacing = {
+  '&&': {
+    padding: '0px',
+    /**
+      Increased specificity here because css for .hyperlink-open-link defined in
+      packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
+      overrides padding left-right 2px with 4px.
+    */
+    '&&[href]': {
+      padding: '0 2px'
+    }
+  },
+  '& > span': {
+    margin: '0px'
+  }
+};
+exports.iconOnlySpacing = iconOnlySpacing;
+var getButtonStyles = function getButtonStyles(props) {
+  return {
+    background: getStyles(background, props),
+    color: getStyles(color, props)
+  };
+};
+exports.getButtonStyles = getButtonStyles;

package/dist/cjs/utils.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findNode = findNode;
+// find node in descendants by condition
+function findNode(parent, predicate) {
+  var matchedNode;
+  parent.descendants(function (node) {
+    // dont run predicate if node already found
+    if (matchedNode) {
+      return false;
+    }
+    if (predicate(node)) {
+      matchedNode = node;
+      return false;
+    }
+    return true;
+  });
+  return matchedNode;
+}