@atlaskit/editor-core 187.10.0 → 187.10.2

package/dist/cjs/plugins/media/ui/MediaLinkingToolbar.js

@@ -33,8 +33,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 validationWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), "var(--ds-border-danger, ".concat(_colors.R400, ")"));
-var buttonWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 4px 8px 4px 0px;\n"])));
+var validationWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 0;\n  padding: ", " ", "\n    ", " 0;\n  margin: 0 ", " 0 ", ";\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)", "var(--ds-space-050, 4px)", "var(--ds-space-400, 32px)", "var(--ds-border-danger, ".concat(_colors.R400, ")"));
+var buttonWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " ", "\n    ", " 0px;\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
 var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(LinkAddToolbar, _React$PureComponent);
   var _super = _createSuper(LinkAddToolbar);

package/dist/cjs/ui/ColorPickerButton/index.js

@@ -40,6 +40,7 @@ var colorPickerWrapper = function colorPickerWrapper(theme) {
 };
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
+var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_ColorPalette.default);
 var ColorPickerButton = function ColorPickerButton(props) {
   var buttonRef = _react.default.useRef(null);
   var _React$useState = _react.default.useState(false),
@@ -81,7 +82,6 @@ var ColorPickerButton = function ColorPickerButton(props) {
     setIsPopupPositioned(true);
     return position;
   }, []);
-  var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_ColorPalette.default);
   var onChange = props.onChange,
     createAnalyticsEvent = props.createAnalyticsEvent,
     colorPalette = props.colorPalette,
@@ -169,8 +169,8 @@ var ColorPickerButton = function ColorPickerButton(props) {
   var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
   var buttonStyle = function buttonStyle(theme) {
     var _props$size, _props$size2, _props$size3;
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 0 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px 2px;\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), "var(--ds-background-neutral-subtle, transparent)", /* If custom props size height, override the button base height property */
-    !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", _common.DEFAULT_BORDER_COLOR, (0, _constants.borderRadius)(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px', (0, _components.themed)({
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 0 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), "var(--ds-background-neutral-subtle, transparent)", /* If custom props size height, override the button base height property */
+    !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", _common.DEFAULT_BORDER_COLOR, (0, _constants.borderRadius)(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px', "var(--ds-space-025, 2px)", (0, _components.themed)({
       light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")"),
       dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
     })(theme));

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.10.0";
+var version = "187.10.2";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.10.0",
+	"version": "187.10.2",
 	"sideEffects": false
 }

package/dist/es2019/create-editor/feature-flags-from-props.js

@@ -21,7 +21,7 @@ function getSpellCheck(featureFlags) {
  * which is used by both current and archv3 editors.
  */
 export function createFeatureFlagsFromProps(props) {
-  var _props$featureFlags, _ref, _props$featureFlags$u, _props$featureFlags2, _props$featureFlags3, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags4, _props$featureFlags5, _props$allowTables, _props$featureFlags6, _props$featureFlags7, _props$allowTables2, _props$featureFlags8, _props$featureFlags9, _props$allowTables3, _props$featureFlags10, _props$featureFlags11, _props$allowTables4, _props$allowTables5, _props$featureFlags12, _props$featureFlags13, _props$allowTables6, _props$allowExtension, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31, _props$collabEdit, _props$collabEdit2, _props$featureFlags32, _props$featureFlags33, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37, _props$featureFlags38, _props$featureFlags39, _props$featureFlags40, _props$featureFlags41, _props$featureFlags42, _props$featureFlags43, _props$featureFlags44, _props$featureFlags45, _props$featureFlags46;
+  var _props$featureFlags, _ref, _props$featureFlags$u, _props$featureFlags2, _props$featureFlags3, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags4, _props$featureFlags5, _props$allowTables, _props$featureFlags6, _props$featureFlags7, _props$allowTables2, _props$featureFlags8, _props$featureFlags9, _props$allowTables3, _props$featureFlags10, _props$featureFlags11, _props$allowTables4, _props$allowTables5, _props$featureFlags12, _props$featureFlags13, _props$allowTables6, _props$allowExtension, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31, _props$collabEdit, _props$collabEdit2, _props$featureFlags32, _props$featureFlags33, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37, _props$featureFlags38, _props$featureFlags39, _props$featureFlags40, _props$featureFlags41, _props$featureFlags42, _props$featureFlags43, _props$featureFlags44;
   const normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
   const tableCellOptionsInFloatingToolbar = normalizedFeatureFlags.tableCellOptionsInFloatingToolbar || ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableCellOptionsInFloatingToolbar) || undefined;
 
@@ -64,11 +64,9 @@ export function createFeatureFlagsFromProps(props) {
     // Including fallback to props.featureFlags so that mobile feature flags
     // are included (they are not kebab cased)
     restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$featureFlags40 = props.featureFlags) === null || _props$featureFlags40 === void 0 ? void 0 : _props$featureFlags40.restartNumberedLists) === true,
-    listNumberContinuity: normalizedFeatureFlags.listNumberContinuity === true || ((_props$featureFlags41 = props.featureFlags) === null || _props$featureFlags41 === void 0 ? void 0 : _props$featureFlags41.listNumberContinuity) === true,
-    restartNumberedListsToolbar: normalizedFeatureFlags.restartNumberedListsToolbar === true || ((_props$featureFlags42 = props.featureFlags) === null || _props$featureFlags42 === void 0 ? void 0 : _props$featureFlags42.restartNumberedListsToolbar) === true,
-    useSomewhatSemanticTextColorNames: Boolean(typeof normalizedFeatureFlags.useSomewhatSemanticTextColorNames === 'boolean' && !!normalizedFeatureFlags.useSomewhatSemanticTextColorNames || (typeof ((_props$featureFlags43 = props.featureFlags) === null || _props$featureFlags43 === void 0 ? void 0 : _props$featureFlags43.useSomewhatSemanticTextColorNames) === 'boolean' ? !!((_props$featureFlags44 = props.featureFlags) !== null && _props$featureFlags44 !== void 0 && _props$featureFlags44.useSomewhatSemanticTextColorNames) : false)),
+    useSomewhatSemanticTextColorNames: Boolean(typeof normalizedFeatureFlags.useSomewhatSemanticTextColorNames === 'boolean' && !!normalizedFeatureFlags.useSomewhatSemanticTextColorNames || (typeof ((_props$featureFlags41 = props.featureFlags) === null || _props$featureFlags41 === void 0 ? void 0 : _props$featureFlags41.useSomewhatSemanticTextColorNames) === 'boolean' ? !!((_props$featureFlags42 = props.featureFlags) !== null && _props$featureFlags42 !== void 0 && _props$featureFlags42.useSomewhatSemanticTextColorNames) : false)),
     lpLinkPickerFocusTrap: Boolean(normalizedFeatureFlags.lpLinkPickerFocusTrap),
-    preventPopupOverflow: Boolean(typeof ((_props$featureFlags45 = props.featureFlags) === null || _props$featureFlags45 === void 0 ? void 0 : _props$featureFlags45['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags46 = props.featureFlags) !== null && _props$featureFlags46 !== void 0 && _props$featureFlags46['prevent-popup-overflow']) : false),
+    preventPopupOverflow: Boolean(typeof ((_props$featureFlags43 = props.featureFlags) === null || _props$featureFlags43 === void 0 ? void 0 : _props$featureFlags43['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags44 = props.featureFlags) !== null && _props$featureFlags44 !== void 0 && _props$featureFlags44['prevent-popup-overflow']) : false),
     // duplicated logic from `create-plugins-list.ts` due to presets not being finalised
     useBetterTypeaheadNavigation: Boolean(typeof pseudoNormalisedUseBetterTypeaheadNavigation === 'boolean' ? !!pseudoNormalisedUseBetterTypeaheadNavigation : true)
   };

package/dist/es2019/labs/next/presets/default.js

@@ -8,7 +8,7 @@ import textFormattingPlugin from '../../../plugins/text-formatting';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import unsupportedContentPlugin from '../../../plugins/unsupported-content';
 import basePlugin from '../../../plugins/base';
-import editorDisabledPlugin from '../../../plugins/editor-disabled';
+import { editorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import typeAheadPlugin from '../../../plugins/type-ahead';
 import submitEditorPlugin from '../../../plugins/submit-editor';
 import fakeTextCursorPlugin from '../../../plugins/fake-text-cursor';

package/dist/es2019/labs/next/presets/universal.js

@@ -57,9 +57,7 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     }
     return builder;
   }).add([listPlugin, {
-    restartNumberedLists: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.restartNumberedLists,
-    restartNumberedListsToolbar: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.restartNumberedListsToolbar,
-    listNumberContinuity: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.listNumberContinuity
+    restartNumberedLists: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.restartNumberedLists
   }]).maybeAdd(rulePlugin, (plugin, builder) => {
     if (props.allowRule) {
       return builder.add(plugin);

package/dist/es2019/plugins/floating-toolbar/index.js

@@ -6,11 +6,9 @@ import camelCase from 'lodash/camelCase';
 import { Popup } from '@atlaskit/editor-common/ui';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import WithPluginState from '../../ui/WithPluginState';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { CONTENT_COMPONENT } from '../analytics/types';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { pluginKey as extensionsPluginKey } from '../extension/plugin-key';
-import { pluginKey as editorDisabledPluginKey } from '../editor-disabled';
 import { pluginKey as dataPluginKey } from './pm-plugins/toolbar-data/plugin-key';
 import { createPlugin as floatingToolbarDataPluginFactory } from './pm-plugins/toolbar-data/plugin';
 import { hideConfirmDialog } from './pm-plugins/toolbar-data/commands';
@@ -112,8 +110,6 @@ function filterUndefined(x) {
   return !!x;
 }
 const floatingToolbarPlugin = (_, api) => {
-  var _api$dependencies, _api$dependencies$fea;
-  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
   return {
     name: 'floatingToolbar',
     pmPlugins(floatingToolbarHandlers = []) {
@@ -143,6 +139,17 @@ const floatingToolbarPlugin = (_, api) => {
     actions: {
       forceFocusSelector
     },
+    getSharedState(editorState) {
+      var _pluginKey$getState$g, _pluginKey$getState, _pluginKey$getState$g2;
+      if (!editorState) {
+        return undefined;
+      }
+      const configWithNodeInfo = (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 ? void 0 : (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined;
+      return {
+        configWithNodeInfo,
+        floatingToolbarData: dataPluginKey.getState(editorState)
+      };
+    },
     contentComponent({
       popupsMountPoint,
       popupsBoundariesElement,
@@ -151,131 +158,150 @@ const floatingToolbarPlugin = (_, api) => {
       providerFactory,
       dispatchAnalyticsEvent
     }) {
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          floatingToolbarState: pluginKey,
-          floatingToolbarData: dataPluginKey,
-          editorDisabledPlugin: editorDisabledPluginKey,
-          extensionsState: extensionsPluginKey
-        },
-        render: ({
-          editorDisabledPlugin,
-          floatingToolbarState,
-          floatingToolbarData,
-          extensionsState
-        }) => {
-          var _configWithNodeInfo$c, _configWithNodeInfo$c2;
-          const configWithNodeInfo = floatingToolbarState === null || floatingToolbarState === void 0 ? void 0 : floatingToolbarState.getConfigWithNodeInfo(editorView.state);
-          if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
-            return null;
-          }
-          const {
-            config,
-            node
-          } = configWithNodeInfo;
-          const {
-            title,
-            getDomRef = getDomRefFromSelection,
-            items,
-            align = 'center',
-            className = '',
-            height,
-            width,
-            zIndex,
-            offset = [0, 12],
-            forcePlacement,
-            preventPopupOverflow,
-            onPositionCalculated,
-            focusTrap
-          } = config;
-          const targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
-          if (!targetRef || editorDisabledPlugin && editorDisabledPlugin.editorDisabled) {
-            return null;
-          }
-          let customPositionCalculation;
-          const toolbarItems = processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node), api === null || api === void 0 ? void 0 : api.dependencies.decorations.actions.hoverDecoration);
-          if (onPositionCalculated) {
-            customPositionCalculation = nextPos => {
-              return onPositionCalculated(editorView, nextPos);
-            };
-          }
-          const dispatchCommand = fn => fn && fn(editorView.state, editorView.dispatch, editorView);
-
-          // Confirm dialog
-          const {
-            confirmDialogForItem
-          } = floatingToolbarData || {};
-          const confirmButtonItem = confirmDialogForItem ? toolbarItems[confirmDialogForItem] : undefined;
-          const scrollable = featureFlags.floatingToolbarCopyButton && config.scrollable;
-          const confirmDialogOptions = typeof (confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog) === 'function' ? confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog() : confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog;
-          return /*#__PURE__*/React.createElement(ErrorBoundary, {
-            component: ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN,
-            componentId: camelCase(title),
-            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-            fallbackComponent: null
-          }, /*#__PURE__*/React.createElement(Popup, {
-            ariaLabel: title,
-            offset: offset,
-            target: targetRef,
-            alignY: "bottom",
-            forcePlacement: forcePlacement,
-            fitHeight: height,
-            fitWidth: width,
-            alignX: align,
-            stick: true,
-            zIndex: zIndex,
-            mountTo: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            scrollableElement: popupsScrollableElement,
-            onPositionCalculated: customPositionCalculation,
-            style: scrollable ? {
-              maxWidth: '100%'
-            } : {},
-            focusTrap: focusTrap,
-            preventOverflow: preventPopupOverflow
-          }, /*#__PURE__*/React.createElement(ToolbarLoader, {
-            target: targetRef,
-            items: toolbarItems,
-            node: node,
-            dispatchCommand: dispatchCommand,
-            editorView: editorView,
-            className: className,
-            focusEditor: () => editorView.focus(),
-            providerFactory: providerFactory,
-            popupsMountPoint: popupsMountPoint,
-            popupsBoundariesElement: popupsBoundariesElement,
-            popupsScrollableElement: popupsScrollableElement,
-            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-            extensionsProvider: extensionsState === null || extensionsState === void 0 ? void 0 : extensionsState.extensionProvider,
-            scrollable: scrollable,
-            featureFlags: featureFlags,
-            api: api
-          })), /*#__PURE__*/React.createElement(ConfirmationModal, {
-            testId: "ak-floating-toolbar-confirmation-modal",
-            options: confirmDialogOptions,
-            onConfirm: (isChecked = false) => {
-              if (!!confirmDialogOptions.onConfirm) {
-                dispatchCommand(confirmDialogOptions.onConfirm(isChecked));
-              } else {
-                dispatchCommand(confirmButtonItem.onClick);
-              }
-            },
-            onClose: () => {
-              dispatchCommand(hideConfirmDialog());
-              // Need to set focus to Editor here,
-              // As when the Confirmation dialog pop up, and user interacts with the dialog, Editor loses focus.
-              // So when Confirmation dialog is closed, Editor does not have the focus, then cursor goes to the position 1 of the doc,
-              // instead of the cursor position before the dialog pop up.
-              if (!editorView.hasFocus()) {
-                editorView.focus();
-              }
-            }
-          }));
-        }
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        editorView: editorView,
+        pluginInjectionApi: api,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        providerFactory: providerFactory,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent
       });
     }
   };
 };
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+function ContentComponent({
+  pluginInjectionApi,
+  editorView,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  providerFactory,
+  dispatchAnalyticsEvent
+}) {
+  var _pluginInjectionApi$d, _pluginInjectionApi$d2, _configWithNodeInfo$c, _configWithNodeInfo$c2;
+  const featureFlags = (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.featureFlags) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.sharedState.currentState()) || {};
+  const {
+    floatingToolbarState,
+    editorDisabledState
+  } = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorDisabled']);
+  const {
+    configWithNodeInfo,
+    floatingToolbarData
+  } = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {};
+  if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
+    return null;
+  }
+  const {
+    config,
+    node
+  } = configWithNodeInfo;
+  const {
+    title,
+    getDomRef = getDomRefFromSelection,
+    items,
+    align = 'center',
+    className = '',
+    height,
+    width,
+    zIndex,
+    offset = [0, 12],
+    forcePlacement,
+    preventPopupOverflow,
+    onPositionCalculated,
+    focusTrap
+  } = config;
+  const targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
+  if (!targetRef || editorDisabledState && editorDisabledState.editorDisabled) {
+    return null;
+  }
+  let customPositionCalculation;
+  const toolbarItems = processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node), pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions.hoverDecoration);
+  if (onPositionCalculated) {
+    customPositionCalculation = nextPos => {
+      return onPositionCalculated(editorView, nextPos);
+    };
+  }
+  const dispatchCommand = fn => fn && fn(editorView.state, editorView.dispatch, editorView);
+
+  // Confirm dialog
+  const {
+    confirmDialogForItem
+  } = floatingToolbarData || {};
+  const confirmButtonItem = confirmDialogForItem ? toolbarItems[confirmDialogForItem] : undefined;
+  const scrollable = featureFlags.floatingToolbarCopyButton && config.scrollable;
+  const confirmDialogOptions = typeof (confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog) === 'function' ? confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog() : confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog;
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    component: ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN,
+    componentId: camelCase(title),
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    fallbackComponent: null
+  }, /*#__PURE__*/React.createElement(Popup, {
+    ariaLabel: title,
+    offset: offset,
+    target: targetRef,
+    alignY: "bottom",
+    forcePlacement: forcePlacement,
+    fitHeight: height,
+    fitWidth: width,
+    alignX: align,
+    stick: true,
+    zIndex: zIndex,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    onPositionCalculated: customPositionCalculation,
+    style: scrollable ? {
+      maxWidth: '100%'
+    } : {},
+    focusTrap: focusTrap,
+    preventOverflow: preventPopupOverflow
+  }, /*#__PURE__*/React.createElement(WithProviders, {
+    providerFactory: providerFactory,
+    providers: ['extensionProvider'],
+    renderNode: providers => {
+      return /*#__PURE__*/React.createElement(ToolbarLoader, {
+        target: targetRef,
+        items: toolbarItems,
+        node: node,
+        dispatchCommand: dispatchCommand,
+        editorView: editorView,
+        className: className,
+        focusEditor: () => editorView.focus(),
+        providerFactory: providerFactory,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        extensionsProvider: providers.extensionProvider,
+        scrollable: scrollable,
+        featureFlags: featureFlags,
+        api: pluginInjectionApi
+      });
+    }
+  })), /*#__PURE__*/React.createElement(ConfirmationModal, {
+    testId: "ak-floating-toolbar-confirmation-modal",
+    options: confirmDialogOptions,
+    onConfirm: (isChecked = false) => {
+      if (!!confirmDialogOptions.onConfirm) {
+        dispatchCommand(confirmDialogOptions.onConfirm(isChecked));
+      } else {
+        dispatchCommand(confirmButtonItem.onClick);
+      }
+    },
+    onClose: () => {
+      dispatchCommand(hideConfirmDialog());
+      // Need to set focus to Editor here,
+      // As when the Confirmation dialog pop up, and user interacts with the dialog, Editor loses focus.
+      // So when Confirmation dialog is closed, Editor does not have the focus, then cursor goes to the position 1 of the doc,
+      // instead of the cursor position before the dialog pop up.
+      if (!editorView.hasFocus()) {
+        editorView.focus();
+      }
+    }
+  }));
+}
 export default floatingToolbarPlugin;
 
 /**
@@ -303,7 +329,6 @@ function sanitizeFloatingToolbarConfig(config) {
 function floatingToolbarPluginFactory(options) {
   const {
     floatingToolbarHandlers,
-    dispatch,
     providerFactory,
     getIntl
   } = options;
@@ -317,7 +342,6 @@ function floatingToolbarPluginFactory(options) {
     const newPluginState = {
       ...pluginState
     };
-    dispatch(pluginKey, newPluginState);
     return newPluginState;
   };
   return new SafePlugin({

package/dist/es2019/plugins/floating-toolbar/pm-plugins/force-focus/index.js

@@ -26,13 +26,11 @@ export default (() => new SafePlugin({
 /**
  * The provided selector should be the floating toolbar button that needs focus.
  */
-export function forceFocusSelector(selector, view) {
-  if (view) {
-    return view.dispatch(view.state.tr.setMeta(forceFocusStateKey, {
-      selector
-    }));
-  }
-}
+export const forceFocusSelector = selector => tr => {
+  return tr.setMeta(forceFocusStateKey, {
+    selector
+  });
+};
 
 /**
  * If a selector is set and the element exists, focus it.
@@ -52,7 +50,13 @@ export function checkShouldForceFocusAndApply(view) {
           inline: 'nearest'
         });
         focusableElement.focus();
-        forceFocusSelector(null, view);
+        const {
+          state: {
+            tr
+          },
+          dispatch
+        } = view;
+        dispatch(forceFocusSelector(null)(tr));
       }
     }
   }

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

@@ -60,11 +60,12 @@ export const ExtensionsPlaceholder = props => {
   } = props;
   const [extensions, setExtensions] = useState([]);
   useEffect(() => {
-    if (extensionProvider) {
-      getExtensions();
-    }
+    getExtensions();
     async function getExtensions() {
-      setExtensions(await extensionProvider.getExtensions());
+      const provider = await extensionProvider;
+      if (provider) {
+        setExtensions(await provider.getExtensions());
+      }
     }
     // leaving dependencies array empty so that this effect runs just once on component mount
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -405,7 +405,18 @@ class Toolbar extends Component {
     }
   }
   componentWillUnmount() {
-    forceFocusSelector(null, this.props.editorView);
+    const {
+      editorView
+    } = this.props;
+    if (editorView) {
+      const {
+        state: {
+          tr
+        },
+        dispatch
+      } = editorView;
+      dispatch(forceFocusSelector(null)(tr));
+    }
     this.resetStyling({
       table: this.props.node.type.name === 'table'
     });

package/dist/es2019/plugins/index.js

@@ -37,7 +37,6 @@ export { default as statusPlugin } from './status';
 export { default as breakoutPlugin } from './breakout';
 export { default as alignmentPlugin } from './alignment';
 export { default as dataConsumerMarkPlugin } from './data-consumer';
-export { default as editorDisabledPlugin } from './editor-disabled';
 export { default as fragmentMarkPlugin } from './fragment';
 export { default as indentationPlugin } from './indentation';
 export { default as annotationPlugin } from './annotation';

package/dist/es2019/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -75,13 +75,15 @@ export class AltTextEditComponent extends React.Component {
     });
     _defineProperty(this, "dispatchCancelEvent", event => {
       const {
-        view
+        view,
+        onEscape
       } = this.props;
 
       // We need to pass down the ESCAPE keymap
       // because when we focus on the Toolbar, Prosemirror blur,
       // making all keyboard shortcuts not working
       view.someProp('handleKeyDown', fn => fn(view, event));
+      onEscape === null || onEscape === void 0 ? void 0 : onEscape();
     });
     _defineProperty(this, "updateAltText", newAltText => {
       const {

package/dist/es2019/plugins/media/toolbar/alt-text.js

@@ -6,7 +6,6 @@ import AltTextEdit from '../pm-plugins/alt-text/ui/AltTextEdit';
 import { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/AltTextEdit';
 import { getMediaNodeFromSelection } from '../utils/media-common';
 import { ClassNames } from '../pm-plugins/alt-text/style';
-import { withOuterListeners } from '@atlaskit/editor-common/ui';
 import { forceFocusSelector } from '../../floating-toolbar/pm-plugins/force-focus';
 const testId = 'alt-text-edit-button';
 export const altTextButton = (intl, state) => {
@@ -26,7 +25,6 @@ export const altTextButton = (intl, state) => {
     })
   };
 };
-const AltTextEditWithListeners = withOuterListeners(AltTextEdit);
 export const altTextEditComponent = options => {
   return {
     type: 'custom',
@@ -43,15 +41,21 @@ export const altTextEditComponent = options => {
       /** Focus should move to the 'Alt text' button when the toolbar closes
        * and not close the floating toolbar.
        */
-      const handleEsc = e => {
-        forceFocusSelector(`[data-testid="${testId}"]`, view);
+      const handleEsc = () => {
+        const {
+          state: {
+            tr
+          },
+          dispatch
+        } = view;
+        dispatch(forceFocusSelector(`[data-testid="${testId}"]`)(tr));
       };
-      return /*#__PURE__*/React.createElement(AltTextEditWithListeners, {
+      return /*#__PURE__*/React.createElement(AltTextEdit, {
         view: view,
         key: idx,
         value: mediaNode.attrs.alt,
         altTextValidator: options && options.altTextValidator,
-        handleEscapeKeydown: handleEsc
+        onEscape: handleEsc
       });
     }
   };

package/dist/es2019/plugins/media/toolbar/linking.js

@@ -68,7 +68,14 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
                 /** Focus should move to the 'Add link' button when the toolbar closes
                  * and not close the floating toolbar.
                  */
-                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.forceFocusSelector(FORCE_FOCUS_SELECTOR, view);
+                const {
+                  state: {
+                    tr
+                  },
+                  dispatch
+                } = view;
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.forceFocusSelector(FORCE_FOCUS_SELECTOR)(tr);
+                dispatch(tr);
               },
               onSubmit: (href, meta) => {
                 setUrlToMedia(href, meta.inputMethod)(view.state, view.dispatch, view);

package/dist/es2019/plugins/media/ui/MediaLinkingToolbar.js

@@ -18,15 +18,17 @@ import { INPUT_METHOD } from '../../analytics/types/enums';
 import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';
 const validationWrapper = css`
   line-height: 0;
-  padding: 12px 24px 12px 0;
-  margin: 0 4px 0 32px;
+  padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-300, 24px)"}
+    ${"var(--ds-space-150, 12px)"} 0;
+  margin: 0 ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-400, 32px)"};
   border-top: 1px solid ${`var(--ds-border-danger, ${R400})`};
   align-items: start;
   display: flex;
   flex-direction: column;
 `;
 const buttonWrapper = css`
-  padding: 4px 8px 4px 0px;
+  padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}
+    ${"var(--ds-space-050, 4px)"} 0px;
 `;
 export class LinkAddToolbar extends React.PureComponent {
   constructor(...args) {

package/dist/es2019/ui/ColorPickerButton/index.js

@@ -38,6 +38,7 @@ const colorPickerWrapper = theme => css`
 `;
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
+const ColorPaletteWithListeners = withOuterListeners(ColorPalette);
 const ColorPickerButton = props => {
   const buttonRef = React.useRef(null);
   const [isPopupOpen, setIsPopupOpen] = React.useState(false);
@@ -70,7 +71,6 @@ const ColorPickerButton = props => {
     setIsPopupPositioned(true);
     return position;
   }, []);
-  const ColorPaletteWithListeners = withOuterListeners(ColorPalette);
   const {
     onChange,
     createAnalyticsEvent,
@@ -174,7 +174,7 @@ const ColorPickerButton = props => {
       width: ${((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px'};
       height: ${((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px'};
       padding: 0;
-      margin: 0px 2px;
+      margin: 0px ${"var(--ds-space-025, 2px)"};
     }
     &:hover {
       background: ${themed({