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

package/dist/esm/ui/Toolbar.js

@@ -0,0 +1,426 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+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";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+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 */
+import React, { Component } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import ButtonGroup from '@atlaskit/button/button-group';
+import { areSameItems } from '@atlaskit/editor-common/floating-toolbar';
+import { Announcer, FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
+import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
+import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
+import { DN70 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+import { themed } from '@atlaskit/theme/components';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+import { borderRadius } from '@atlaskit/theme/constants';
+import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
+import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
+import Dropdown from './Dropdown';
+import { EmojiPickerButton } from './EmojiPickerButton';
+import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
+import Input from './Input';
+import messages from './messages';
+import { ScrollButtons } from './ScrollButtons';
+import Select from './Select';
+import Separator from './Separator';
+var ToolbarItems = /*#__PURE__*/React.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 jsx(ButtonGroup, 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(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 jsx(Button, {
+          className: item.className,
+          key: idx,
+          title: item.title,
+          href: item.href,
+          icon: item.icon ? 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 jsx(Input, {
+          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 jsx(Dropdown, {
+          key: idx,
+          title: item.title,
+          icon: DropdownIcon && 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 jsx(Select, {
+            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 jsx(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: hexToEditorBackgroundPaletteColor,
+            paletteColorTooltipMessages: backgroundPaletteTooltipMessages
+          });
+        }
+        if (item.selectType === 'emoji') {
+          return jsx(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 jsx(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 jsx(Separator, {
+          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 || !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 css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), themed({
+    light: "var(--ds-surface-overlay, white)",
+    dark: "var(--ds-surface-overlay, ".concat(DN70, ")")
+  })(theme), 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 ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              height: 40px;\n            "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              height: 32px;\n            "])))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        ", "\n      "])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", firstElementIsSelect && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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 css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), scrollable ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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 ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n              overflow: hidden;\n            "]))) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n              overflow-x: auto;\n              overflow-y: hidden;\n            "]))), "var(--ds-space-050, 4px)", firstElementIsSelect ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n                  margin-left: ", ";\n                "])), "var(--ds-space-050, 4px)") : css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n                  margin-left: ", ";\n                "])), "var(--ds-space-100, 8px)"), "var(--ds-space-100, 8px)") : css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        display: flex;\n      "]))));
+};
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var Toolbar = /*#__PURE__*/function (_Component) {
+  _inherits(Toolbar, _Component);
+  var _super = _createSuper(Toolbar);
+  function Toolbar(props) {
+    var _this;
+    _classCallCheck(this, Toolbar);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_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;
+      }));
+    });
+    _defineProperty(_assertThisInitialized(_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.createRef();
+    _this.mountRef = /*#__PURE__*/React.createRef();
+    _this.toolbarContainerRef = /*#__PURE__*/React.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
+  _createClass(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 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;
+      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(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 jsx(React.Fragment, null, jsx(ToolbarArrowKeyNavigationProvider, {
+        editorView: this.props.editorView,
+        handleEscape: this.handleEscape,
+        disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
+        childComponentSelector: "[data-testid='editor-floating-toolbar']",
+        isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+        intl: intl
+      }, jsx("div", {
+        ref: this.toolbarContainerRef,
+        css: function css(theme) {
+          return [toolbarContainer({
+            theme: theme
+          }, scrollable, hasSelect !== undefined, firstElementIsSelect)];
+        },
+        "aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
+        role: "toolbar",
+        "data-testid": "editor-floating-toolbar",
+        className: className
+      }, jsx(Announcer, {
+        text: intl.formatMessage(messages.floatingToolbarAnnouncer),
+        delay: 250
+      }), 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)
+      }, jsx(ToolbarItems, _extends({}, this.props, {
+        setDisableScroll: this.setDisableScroll.bind(this),
+        mountRef: this.mountRef,
+        mounted: this.state.mounted,
+        featureFlags: this.props.featureFlags
+      }))), scrollable && jsx(ScrollButtons, {
+        intl: intl,
+        scrollContainerRef: this.scrollContainerRef,
+        node: node,
+        disabled: this.state.scrollDisabled
+      })), jsx("div", {
+        ref: this.mountRef
+      })));
+    }
+  }]);
+  return Toolbar;
+}(Component);
+export default injectIntl(Toolbar);

package/dist/esm/ui/ToolbarLoader.js

@@ -0,0 +1,12 @@
+import Loadable from 'react-loadable';
+export var ToolbarLoader = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_editor-core-floating-toolbar" */
+    './Toolbar').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});

package/dist/esm/ui/messages.js

@@ -0,0 +1,48 @@
+import { defineMessages } from 'react-intl-next';
+export default 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'
+  }
+});

package/dist/esm/ui/styles.js

@@ -0,0 +1,68 @@
+import { hexToRgba } from '@atlaskit/adf-schema';
+import * as colors from '@atlaskit/theme/colors';
+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(hexToRgba(colors.B75, 0.6)), ")"),
+      dark: "var(--ds-background-neutral-pressed, ".concat("".concat(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];
+};
+export 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'
+  }
+};
+export var getButtonStyles = function getButtonStyles(props) {
+  return {
+    background: getStyles(background, props),
+    color: getStyles(color, props)
+  };
+};

package/dist/esm/utils.js

@@ -0,0 +1,16 @@
+// find node in descendants by condition
+export 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;
+}

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export type { FloatingToolbarPlugin, ForceFocusSelector, ConfigWithNodeInfo, FloatingToolbarPluginData, FloatingToolbarPluginState, } from './types';
+export { floatingToolbarPlugin } from './plugin';

package/dist/types/plugin.d.ts

@@ -0,0 +1,12 @@
+import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { ConfigWithNodeInfo, FloatingToolbarPlugin, FloatingToolbarPluginState } from './types';
+export declare const getRelevantConfig: (selection: Selection, configs: Array<FloatingToolbarConfig>) => ConfigWithNodeInfo | undefined;
+export declare const floatingToolbarPlugin: FloatingToolbarPlugin;
+/**
+ *
+ * ProseMirror Plugin
+ *
+ */
+export declare const pluginKey: PluginKey<FloatingToolbarPluginState>;

package/dist/types/pm-plugins/force-focus/index.d.ts

@@ -0,0 +1,21 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const forceFocusStateKey: PluginKey<any>;
+/**
+ * Used in cases where a floating toolbar button opens a submenu which destroys
+ * the button, but the user has pressed ESC to close the submenu and focus needs
+ * to move back to the button. */
+declare const _default: () => SafePlugin<{
+    selector: null;
+}>;
+export default _default;
+/**
+ * The provided selector should be the floating toolbar button that needs focus.
+ */
+export declare const forceFocusSelector: (selector: string | null) => (tr: Transaction) => Transaction;
+/**
+ * If a selector is set and the element exists, focus it.
+ */
+export declare function checkShouldForceFocusAndApply(view?: EditorView): void;

package/dist/types/pm-plugins/toolbar-data/commands.d.ts

@@ -0,0 +1,3 @@
+import type { Command } from '@atlaskit/editor-common/types';
+export declare const showConfirmDialog: (buttonIndex: number) => Command;
+export declare const hideConfirmDialog: () => Command;

package/dist/types/pm-plugins/toolbar-data/plugin-factory.d.ts

@@ -0,0 +1 @@
+export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: import("../..").FloatingToolbarPluginData | ((state: import("prosemirror-state").EditorState) => import("../..").FloatingToolbarPluginData)) => import("prosemirror-state").SafeStateField<import("../..").FloatingToolbarPluginData>, createCommand: <A = import("./types").FloatingToolbarPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => import("../..").FloatingToolbarPluginData;

package/dist/types/pm-plugins/toolbar-data/plugin-key.d.ts

@@ -0,0 +1,3 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { FloatingToolbarPluginData } from '../../types';
+export declare const pluginKey: PluginKey<FloatingToolbarPluginData>;

package/dist/types/pm-plugins/toolbar-data/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare const createPlugin: (dispatch: Dispatch) => SafePlugin<import("../..").FloatingToolbarPluginData>;

package/dist/types/pm-plugins/toolbar-data/reducer.d.ts

@@ -0,0 +1,3 @@
+import type { FloatingToolbarPluginData } from '../../types';
+import type { FloatingToolbarPluginAction } from './types';
+export declare const reducer: (pluginState: FloatingToolbarPluginData, action: FloatingToolbarPluginAction) => FloatingToolbarPluginData;

package/dist/types/pm-plugins/toolbar-data/types.d.ts

@@ -0,0 +1,8 @@
+export type FloatingToolbarPluginAction = {
+    type: 'SHOW_CONFIRM_DIALOG';
+    data: {
+        buttonIndex: number;
+    };
+} | {
+    type: 'HIDE_CONFIRM_DIALOG';
+};

package/dist/types/ui/CheckboxModal.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ConfirmationDialogProps } from '@atlaskit/editor-common/types';
+export declare const CheckboxModal: (props: ConfirmationDialogProps & WrappedComponentProps) => JSX.Element;

package/dist/types/ui/ConfirmationModal.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ConfirmationDialogProps } from '@atlaskit/editor-common/types';
+export declare const ConfirmationModal: React.FC<import("react-intl-next").WithIntlProps<ConfirmationDialogProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<ConfirmationDialogProps & WrappedComponentProps<"intl">>;
+};