@atlaskit/editor-core 187.9.2 → 187.10.1

package/dist/es2019/plugins/block-type/pm-plugins/input-rule.js

@@ -1,10 +1,10 @@
-import { createJoinNodesRule, createWrappingTextBlockRule, ruleWithAnalytics } from '../../../utils/input-rules';
-import { createRule, createPlugin } from '@atlaskit/prosemirror-input-rules';
-import { leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
-import { isConvertableToCodeBlock, transformToCodeBlockAction } from '../commands/transform-to-code-block';
-import { insertBlock } from '../commands/insert-block';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { createRule, createPlugin, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
 import { INPUT_METHOD, ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { inputRuleWithAnalytics } from '@atlaskit/editor-common/utils';
+import { isConvertableToCodeBlock, transformToCodeBlockAction } from '../commands/transform-to-code-block';
+import { insertBlock } from '../commands/insert-block';
+import { createJoinNodesRule, createWrappingTextBlockRule } from '../utils';
 const MAX_HEADING_LEVEL = 6;
 function getHeadingLevel(match) {
   return {
@@ -28,7 +28,7 @@ function blockQuoteRule(nodeType) {
  * @param {Schema} schema
  * @returns {InputRuleWithHandler[]}
  */
-function getHeadingRules(schema) {
+function getHeadingRules(editorAnalyticsAPI, schema) {
   // '# ' for h1, '## ' for h2 and etc
   const hashRule = headingRule(schema.nodes.heading, MAX_HEADING_LEVEL);
   const leftNodeReplacementHashRule = createRule(new RegExp(`${leafNodeReplacementCharacter}(#{1,6})\\s$`), (state, match, start, end) => {
@@ -39,7 +39,7 @@ function getHeadingRules(schema) {
   });
 
   // New analytics handler
-  const ruleWithHeadingAnalytics = ruleWithAnalytics((_state, matchResult) => ({
+  const ruleWithHeadingAnalytics = inputRuleWithAnalytics((_state, matchResult) => ({
     action: ACTION.FORMATTED,
     actionSubject: ACTION_SUBJECT.TEXT,
     eventType: EVENT_TYPE.TRACK,
@@ -48,7 +48,7 @@ function getHeadingRules(schema) {
       inputMethod: INPUT_METHOD.FORMATTING,
       newHeadingLevel: getHeadingLevel(matchResult).level
     }
-  }));
+  }), editorAnalyticsAPI);
   return [ruleWithHeadingAnalytics(hashRule), ruleWithHeadingAnalytics(leftNodeReplacementHashRule)];
 }
 
@@ -58,7 +58,7 @@ function getHeadingRules(schema) {
  * @param {Schema} schema
  * @returns {InputRuleWithHandler[]}
  */
-function getBlockQuoteRules(schema) {
+function getBlockQuoteRules(editorAnalyticsAPI, schema) {
   // '> ' for blockquote
   const greatherThanRule = blockQuoteRule(schema.nodes.blockquote);
   const leftNodeReplacementGreatherRule = createRule(new RegExp(`${leafNodeReplacementCharacter}\\s*>\\s$`), (state, _match, start, end) => {
@@ -66,7 +66,7 @@ function getBlockQuoteRules(schema) {
   });
 
   // Analytics V3 handler
-  const ruleWithBlockQuoteAnalytics = ruleWithAnalytics({
+  const ruleWithBlockQuoteAnalytics = inputRuleWithAnalytics({
     action: ACTION.FORMATTED,
     actionSubject: ACTION_SUBJECT.TEXT,
     eventType: EVENT_TYPE.TRACK,
@@ -74,7 +74,7 @@ function getBlockQuoteRules(schema) {
     attributes: {
       inputMethod: INPUT_METHOD.FORMATTING
     }
-  });
+  }, editorAnalyticsAPI);
   return [ruleWithBlockQuoteAnalytics(greatherThanRule), ruleWithBlockQuoteAnalytics(leftNodeReplacementGreatherRule)];
 }
 
@@ -84,8 +84,8 @@ function getBlockQuoteRules(schema) {
  * @param {Schema} schema
  * @returns {InputRuleWithHandler[]}
  */
-function getCodeBlockRules(schema) {
-  const ruleAnalytics = ruleWithAnalytics({
+function getCodeBlockRules(editorAnalyticsAPI, schema) {
+  const ruleAnalytics = inputRuleWithAnalytics({
     action: ACTION.INSERTED,
     actionSubject: ACTION_SUBJECT.DOCUMENT,
     actionSubjectId: ACTION_SUBJECT_ID.CODE_BLOCK,
@@ -93,7 +93,7 @@ function getCodeBlockRules(schema) {
       inputMethod: INPUT_METHOD.FORMATTING
     },
     eventType: EVENT_TYPE.TRACK
-  });
+  }, editorAnalyticsAPI);
   const validMatchLength = match => match.length > 0 && match[0].length === 3;
   const threeTildeRule = createRule(/(?!\s)(`{3,})$/, (state, match, start, end) => {
     if (!validMatchLength(match)) {
@@ -125,16 +125,16 @@ function getCodeBlockRules(schema) {
   });
   return [ruleAnalytics(threeTildeRule), ruleAnalytics(leftNodeReplacementThreeTildeRule)];
 }
-function inputRulePlugin(schema, featureFlags) {
+function inputRulePlugin(editorAnalyticsAPI, schema, featureFlags) {
   const rules = [];
   if (schema.nodes.heading) {
-    rules.push(...getHeadingRules(schema));
+    rules.push(...getHeadingRules(editorAnalyticsAPI, schema));
   }
   if (schema.nodes.blockquote) {
-    rules.push(...getBlockQuoteRules(schema));
+    rules.push(...getBlockQuoteRules(editorAnalyticsAPI, schema));
   }
   if (schema.nodes.codeBlock) {
-    rules.push(...getCodeBlockRules(schema));
+    rules.push(...getCodeBlockRules(editorAnalyticsAPI, schema));
   }
   if (rules.length !== 0) {
     return createPlugin('block-type', rules, {

package/dist/es2019/plugins/block-type/pm-plugins/keymap.js

@@ -1,20 +1,19 @@
 import { redo, undo } from '@atlaskit/editor-prosemirror/history';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
-import * as keymaps from '../../../keymaps';
-import * as commands from '../../../commands';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import * as keymaps from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-common/keymaps';
+import { insertNewLineWithAnalytics, createNewParagraphAbove, createNewParagraphBelow, deleteEmptyParagraphAndMoveBlockUp } from '@atlaskit/editor-common/utils';
 import * as blockTypes from '../types';
-import { keymap } from '../../../utils/keymap';
 import { cleanUpAtTheStartOfDocument, deleteAndMoveCursor, deleteBlockContent, insertBlockTypesWithAnalytics } from '../commands';
-import { deleteEmptyParagraphAndMoveBlockUp } from '@atlaskit/editor-common/utils';
-import { INPUT_METHOD } from '../../analytics';
 import { isNodeAWrappingBlockNode } from '../utils';
 const backspace = chainCommands(cleanUpAtTheStartOfDocument, deleteBlockContent(isNodeAWrappingBlockNode), deleteAndMoveCursor);
 const del = chainCommands(deleteEmptyParagraphAndMoveBlockUp(isNodeAWrappingBlockNode), deleteBlockContent(isNodeAWrappingBlockNode), deleteAndMoveCursor);
-export default function keymapPlugin(schema, featureFlags, editorAnalyticsApi) {
+export default function keymapPlugin(editorAnalyticsApi, schema, _featureFlags) {
   const list = {};
-  keymaps.bindKeymapWithCommand(keymaps.insertNewLine.common, commands.insertNewLineWithAnalytics, list);
-  keymaps.bindKeymapWithCommand(keymaps.moveUp.common, commands.createNewParagraphAbove, list);
-  keymaps.bindKeymapWithCommand(keymaps.moveDown.common, commands.createNewParagraphBelow, list);
+  keymaps.bindKeymapWithCommand(keymaps.insertNewLine.common, insertNewLineWithAnalytics(editorAnalyticsApi), list);
+  keymaps.bindKeymapWithCommand(keymaps.moveUp.common, createNewParagraphAbove, list);
+  keymaps.bindKeymapWithCommand(keymaps.moveDown.common, createNewParagraphBelow, list);
   keymaps.bindKeymapWithCommand(keymaps.findKeyMapForBrowser(keymaps.redo), redo, list);
   keymaps.bindKeymapWithCommand(keymaps.undo.common, undo, list);
   keymaps.bindKeymapWithCommand(keymaps.backspace.common, backspace, list);

package/dist/es2019/plugins/block-type/pm-plugins/main.js

@@ -1,11 +1,11 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { browser } from '@atlaskit/editor-common/utils';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { NORMAL_TEXT, HEADING_1, HEADING_2, HEADING_3, HEADING_4, HEADING_5, HEADING_6, BLOCK_QUOTE, CODE_BLOCK, PANEL, OTHER, TEXT_BLOCK_TYPES, WRAPPER_BLOCK_TYPES, HEADINGS_BY_LEVEL } from '../types';
-import { areBlockTypesDisabled } from '../../../utils';
+import { HEADING_KEYS } from '../consts';
 import { setHeadingWithAnalytics, setNormalTextWithAnalytics } from '../commands';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { HEADING_KEYS } from '../../../keymaps/consts';
+import { areBlockTypesDisabled } from '../utils';
 const blockTypeForNode = (node, schema) => {
   if (node.type === schema.nodes.heading) {
     const maybeNode = HEADINGS_BY_LEVEL[node.attrs['level']];
@@ -59,16 +59,16 @@ const detectBlockType = (availableBlockTypes, state) => {
   });
   return blockType || OTHER;
 };
-const autoformatHeading = (headingLevel, view) => {
+const autoformatHeading = (headingLevel, view, editorAnalyticsApi) => {
   if (headingLevel === 0) {
-    setNormalTextWithAnalytics(INPUT_METHOD.FORMATTING)(view.state, view.dispatch);
+    setNormalTextWithAnalytics(INPUT_METHOD.FORMATTING, editorAnalyticsApi)(view.state, view.dispatch);
   } else {
-    setHeadingWithAnalytics(headingLevel, INPUT_METHOD.FORMATTING)(view.state, view.dispatch);
+    setHeadingWithAnalytics(headingLevel, INPUT_METHOD.FORMATTING, editorAnalyticsApi)(view.state, view.dispatch);
   }
   return true;
 };
 export const pluginKey = new PluginKey('blockTypePlugin');
-export const createPlugin = (dispatch, lastNodeMustBeParagraph) => {
+export const createPlugin = (editorAnalyticsApi, dispatch, lastNodeMustBeParagraph) => {
   let altKeyLocation = 0;
   return new SafePlugin({
     appendTransaction(_transactions, _oldState, newState) {
@@ -118,9 +118,9 @@ export const createPlugin = (dispatch, lastNodeMustBeParagraph) => {
         const headingLevel = HEADING_KEYS.indexOf(event.keyCode);
         if (headingLevel > -1 && event.altKey) {
           if (browser.mac && event.metaKey) {
-            return autoformatHeading(headingLevel, view);
+            return autoformatHeading(headingLevel, view, editorAnalyticsApi);
           } else if (!browser.mac && event.ctrlKey && altKeyLocation !== event.DOM_KEY_LOCATION_RIGHT) {
-            return autoformatHeading(headingLevel, view);
+            return autoformatHeading(headingLevel, view, editorAnalyticsApi);
           }
         } else if (event.key === 'Alt') {
           // event.location is for the current key only; when a user hits Ctrl-Alt-1 the

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/blocktype-button.js

@@ -4,10 +4,10 @@ import { jsx } from '@emotion/react';
 import { FormattedMessage, defineMessages } from 'react-intl-next';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import TextStyleIcon from '@atlaskit/icon/glyph/editor/text-style';
-import ToolbarButton from '../../../../ui/ToolbarButton';
-import { buttonContentStyle, buttonContentReducedSpacingStyle, wrapperSmallStyle, expandIconWrapperStyle } from '../../../../ui/styles';
 import { wrapperStyle } from '@atlaskit/editor-common/styles';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { NORMAL_TEXT } from '../../types';
+import { buttonContentStyle, buttonContentReducedSpacingStyle, wrapperSmallStyle, expandIconWrapperStyle } from './styled';
 export const messages = defineMessages({
   textStyles: {
     id: 'fabric.editor.textStyles',

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

@@ -4,12 +4,11 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
-import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { getAriaKeyshortcuts, tooltip, findKeymapByDescription } from '@atlaskit/editor-common/keymaps';
 import { separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
+import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { blockTypeMenuItemStyle, keyboardShortcut, keyboardShortcutSelect } from './styled';
-import { tooltip, findKeymapByDescription } from '../../../../keymaps';
 import { BlockTypeButton } from './blocktype-button';
-import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 class ToolbarBlockType extends React.PureComponent {
   constructor(...args) {
     super(...args);

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -2,7 +2,7 @@
 import { css } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
 import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
-import { shortcutStyle } from '../../../../ui/styles';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 export const blockTypeMenuItemStyle = (tagName, selected) => {
   // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
   const selectedStyle = selected ? `${tagName} { color: ${"var(--ds-text, white)"} !important; }` : '';
@@ -23,8 +23,27 @@ export const blockTypeMenuItemStyle = (tagName, selected) => {
 };
 export const keyboardShortcut = css`
   ${shortcutStyle}
-  margin-left: 16px;
+  margin-left: ${"var(--ds-space-200, 16px)"};
 `;
 export const keyboardShortcutSelect = css`
   color: ${`var(--ds-icon, ${N400})`};
+`;
+export const buttonContentStyle = css`
+  display: flex;
+  min-width: 80px;
+  align-items: center;
+  overflow: hidden;
+  justify-content: center;
+  flex-direction: column;
+  padding: ${"var(--ds-space-075, 6px)"};
+`;
+export const buttonContentReducedSpacingStyle = css`
+  padding: ${"var(--ds-space-100, 8px)"};
+`;
+export const wrapperSmallStyle = css`
+  margin-left: ${"var(--ds-space-050, 4px)"};
+  min-width: 40px;
+`;
+export const expandIconWrapperStyle = css`
+  margin-left: -8px;
 `;

package/dist/es2019/plugins/block-type/utils.js

@@ -1,7 +1,76 @@
+import { createRule } from '@atlaskit/prosemirror-input-rules';
+import { createWrappingJoinRule } from '@atlaskit/editor-common/utils';
 import { WRAPPER_BLOCK_TYPES } from './types';
 export const isNodeAWrappingBlockNode = node => {
   if (!node) {
     return false;
   }
   return WRAPPER_BLOCK_TYPES.some(blockNode => blockNode.name === node.type.name);
-};
+};
+export const createJoinNodesRule = (match, nodeType) => {
+  return createWrappingJoinRule({
+    nodeType,
+    match,
+    getAttrs: {},
+    joinPredicate: (_, node) => node.type === nodeType
+  });
+};
+export const createWrappingTextBlockRule = ({
+  match,
+  nodeType,
+  getAttrs
+}) => {
+  const handler = (state, match, start, end) => {
+    const fixedStart = Math.max(start, 1);
+    const $start = state.doc.resolve(fixedStart);
+    const attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs;
+    const nodeBefore = $start.node(-1);
+    if (nodeBefore && !nodeBefore.canReplaceWith($start.index(-1), $start.indexAfter(-1), nodeType)) {
+      return null;
+    }
+    return state.tr.delete(fixedStart, end).setBlockType(fixedStart, fixedStart, nodeType, attrs);
+  };
+  return createRule(match, handler);
+};
+
+/**
+ * Function will create a list of wrapper blocks present in a selection.
+ */
+function getSelectedWrapperNodes(state) {
+  const nodes = [];
+  if (state.selection) {
+    const {
+      $from,
+      $to
+    } = state.selection;
+    const {
+      blockquote,
+      panel,
+      orderedList,
+      bulletList,
+      listItem,
+      codeBlock,
+      decisionItem,
+      decisionList,
+      taskItem,
+      taskList
+    } = state.schema.nodes;
+    state.doc.nodesBetween($from.pos, $to.pos, node => {
+      if (node.isBlock && [blockquote, panel, orderedList, bulletList, listItem, codeBlock, decisionItem, decisionList, taskItem, taskList].indexOf(node.type) >= 0) {
+        nodes.push(node.type);
+      }
+    });
+  }
+  return nodes;
+}
+
+/**
+ * Function will check if changing block types: Paragraph, Heading is enabled.
+ */
+export function areBlockTypesDisabled(state) {
+  const nodesTypes = getSelectedWrapperNodes(state);
+  const {
+    panel
+  } = state.schema.nodes;
+  return nodesTypes.filter(type => type !== panel).length > 0;
+}

package/dist/es2019/plugins/caption/pm-plugins/keymap.js

@@ -2,7 +2,7 @@ import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import * as keymaps from '../../../keymaps';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { createNewParagraphBelow } from '../../../commands';
+import { createNewParagraphBelow } from '@atlaskit/editor-common/utils';
 import { GapCursorSelection } from '../../selection/gap-cursor/selection';
 export function captionKeymap() {
   const list = {};

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({