@atlaskit/editor-core 183.1.6 → 184.0.4

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -7,11 +7,9 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
-import WithPluginState from '../../../ui/WithPluginState';
-import { pluginKey as widthPluginKey } from '../../width';
 import { setNodeSelection, setTextSelection } from '../../../utils';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
-import { stateKey as mediaPluginKey, MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
+import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -24,6 +22,7 @@ import ReactNodeView from '../../../nodeviews/ReactNodeView';
 import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from 'prosemirror-state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 export default class MediaSingleNode extends Component {
   constructor(...args) {
     super(...args);
@@ -158,12 +157,12 @@ export default class MediaSingleNode extends Component {
       (_this$captionPlaceHol = this.captionPlaceHolderRef.current) === null || _this$captionPlaceHol === void 0 ? void 0 : _this$captionPlaceHol.click();
     });
     _defineProperty(this, "displayGrid", (visible, gridType, highlight) => {
-      var _pluginInjectionApi$d, _pluginInjectionApi$d2;
+      var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3;
       const {
         pluginInjectionApi,
         view
       } = this.props;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.grid) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions.displayGrid(view)({
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.grid) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.actions) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.displayGrid(view)({
         visible,
         gridType,
         highlight: highlight
@@ -321,6 +320,42 @@ _defineProperty(MediaSingleNode, "defaultProps", {
   mediaOptions: {}
 });
 _defineProperty(MediaSingleNode, "displayName", 'MediaSingleNode');
+const MediaSingleNodeWrapper = ({
+  pluginInjectionApi,
+  mediaProvider,
+  contextIdentifierProvider,
+  node,
+  getPos,
+  mediaOptions,
+  view,
+  fullWidthMode,
+  selected,
+  eventDispatcher,
+  dispatchAnalyticsEvent,
+  forwardRef
+}) => {
+  const {
+    widthState,
+    mediaState
+  } = useSharedPluginState(pluginInjectionApi, ['width', 'media']);
+  return jsx(MediaSingleNode, {
+    width: widthState.width,
+    lineLength: widthState.lineLength,
+    node: node,
+    getPos: getPos,
+    mediaProvider: mediaProvider,
+    contextIdentifierProvider: contextIdentifierProvider,
+    mediaOptions: mediaOptions,
+    view: view,
+    fullWidthMode: fullWidthMode,
+    selected: selected,
+    eventDispatcher: eventDispatcher,
+    mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    forwardRef: forwardRef,
+    pluginInjectionApi: pluginInjectionApi
+  });
+};
 class MediaSingleNodeView extends ReactNodeView {
   constructor(...args) {
     super(...args);
@@ -404,34 +439,19 @@ class MediaSingleNodeView extends ReactNodeView {
         mediaProvider,
         contextIdentifierProvider
       }) => {
-        return jsx(WithPluginState, {
-          editorView: this.view,
-          plugins: {
-            width: widthPluginKey,
-            mediaPluginState: mediaPluginKey
-          },
-          render: ({
-            width,
-            mediaPluginState
-          }) => {
-            return jsx(MediaSingleNode, {
-              width: width.width,
-              lineLength: width.lineLength,
-              node: this.node,
-              getPos: getPos,
-              mediaProvider: mediaProvider,
-              contextIdentifierProvider: contextIdentifierProvider,
-              mediaOptions: mediaOptions,
-              view: this.view,
-              fullWidthMode: fullWidthMode,
-              selected: this.isNodeSelected,
-              eventDispatcher: eventDispatcher,
-              mediaPluginState: mediaPluginState,
-              dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-              forwardRef: forwardRef,
-              pluginInjectionApi: pluginInjectionApi
-            });
-          }
+        return jsx(MediaSingleNodeWrapper, {
+          pluginInjectionApi: pluginInjectionApi,
+          mediaProvider: mediaProvider,
+          contextIdentifierProvider: contextIdentifierProvider,
+          node: this.node,
+          getPos: getPos,
+          mediaOptions: mediaOptions,
+          view: this.view,
+          fullWidthMode: fullWidthMode,
+          selected: this.isNodeSelected,
+          eventDispatcher: eventDispatcher,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          forwardRef: forwardRef
         });
       }
     });

package/dist/es2019/plugins/media/styles.js

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
-import { fileCardImageViewSelector, fileCardImageViewSelectedSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
+import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
 export const mediaStyles = css`
   .ProseMirror {
     ${mediaSingleSharedStyle} & [layout='full-width'] .${richMediaClassName},
@@ -120,12 +120,6 @@ export const mediaStyles = css`
       ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
     transition: background-color 0s, box-shadow 0s;
   }
-  .mediaGroupView-content-wrap.danger {
-    /* Media inline */
-    .${fileCardImageViewSelectedSelector}::after {
-      border: 1px solid ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`};
-    }
-  }
   /* Danger when nested node or common */
   .danger {
     /* Media single */

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

@@ -187,7 +187,7 @@ const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState) => {
   }];
   return items;
 };
-const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, mediaLinkingState, getEditorFeatureFlags) => {
+const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, mediaLinkingState, widthPluginDependencyApi, getEditorFeatureFlags) => {
   const {
     mediaSingle
   } = state.schema.nodes;
@@ -230,7 +230,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     });
   }
   if (allowAdvancedToolBarOptions) {
-    toolbarButtons = [...toolbarButtons, ...buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables)];
+    toolbarButtons = [...toolbarButtons, ...buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPluginDependencyApi, allowResizing, allowResizingInTables)];
     if (toolbarButtons.length) {
       toolbarButtons.push({
         type: 'separator'
@@ -312,7 +312,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   }, removeButton];
   return items;
 };
-export const floatingToolbar = (state, intl, options = {}) => {
+export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) => {
   const {
     media,
     mediaInline,
@@ -379,7 +379,7 @@ export const floatingToolbar = (state, intl, options = {}) => {
       const element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(`.${MediaSingleNodeSelector}`);
       return element || mediaPluginState.element;
     };
-    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, getEditorFeatureFlags);
+    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width, getEditorFeatureFlags);
   }
   return {
     ...baseToolbar,

package/dist/es2019/plugins/paste/pm-plugins/main.js

@@ -29,6 +29,7 @@ import { handlePaste as handlePasteTable } from '@atlaskit/editor-tables/utils';
 import { extractSliceFromStep } from '../../../utils/step';
 import { pluginKey as stateKey, createPluginState } from './plugin-factory';
 export { pluginKey as stateKey } from './plugin-factory';
+import { hasParentNodeOfType } from 'prosemirror-utils';
 export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFlags, cardOptions, sanitizePrivateContent, providerFactory) {
   const atlassianMarkDownParser = new MarkdownTransformer(schema, md);
   function getMarkdownSlice(text, openStart, openEnd) {
@@ -158,6 +159,11 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFl
           } = state.schema.nodes;
           const isPastingTextInsidePlaceholderText = ((_state$doc$resolve$no = state.doc.resolve(state.selection.$anchor.pos).nodeAfter) === null || _state$doc$resolve$no === void 0 ? void 0 : _state$doc$resolve$no.type) === placeholder;
 
+          // Don't add closeHistory if we're pasting over layout columns, as we will appendTransaction
+          // to cleanup the layout's structure and we want to keep the paste and re-structuring as
+          // one event.
+          const isPastingOverLayoutColumns = hasParentNodeOfType(state.schema.nodes.layoutColumn)(state.selection);
+
           // don't add closeHistory call if we're pasting a table, as some tables may involve additional
           // appendedTransactions to repair them (if they're partial or incomplete) and we don't want
           // to split those repairing transactions in prosemirror-history when they're being added to the
@@ -173,7 +179,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFl
             });
             return tableExists;
           });
-          if (!isPastingTextInsidePlaceholderText && !isPastingTable) {
+          if (!isPastingTextInsidePlaceholderText && !isPastingTable && !isPastingOverLayoutColumns) {
             tr.setMeta(betterTypePluginKey, true);
           }
           addLinkMetadata(view.state.selection, tr, {

package/dist/es2019/test-utils.js

@@ -38,6 +38,9 @@ function lightProcessPluginsList(editorPlugins) {
     if (editorPlugin.nodes) {
       acc.nodes.push(...editorPlugin.nodes());
     }
+    if (editorPlugin.contentComponent) {
+      acc.contentComponents.push(editorPlugin.contentComponent);
+    }
     if (editorPlugin.onEditorViewStateUpdated) {
       acc.onEditorViewStateUpdatedCallbacks.push(editorPlugin.onEditorViewStateUpdated);
     }
@@ -46,6 +49,7 @@ function lightProcessPluginsList(editorPlugins) {
     nodes: [],
     marks: [],
     plugins: [],
+    contentComponents: [],
     onEditorViewStateUpdatedCallbacks: []
   });
 }
@@ -66,7 +70,8 @@ export const createPMSchemaAndPlugins = (inputPreset = new EditorPresetBuilder()
   return {
     plugins,
     schema,
-    onEditorViewStateUpdatedCallbacks: editorConfig.onEditorViewStateUpdatedCallbacks
+    onEditorViewStateUpdatedCallbacks: editorConfig.onEditorViewStateUpdatedCallbacks,
+    editorConfig
   };
 };
 export { PortalProviderAPI } from './ui/PortalProvider';

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -17,7 +17,7 @@ import WithFlash from '../../WithFlash';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import WidthEmitter from '../../WidthEmitter';
-import { GRID_GUTTER } from '../../../plugins/grid';
+import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 import messages from '../../../messages';

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
 import { fullPageEditorWrapper } from './StyledComponents';
-import { ContextPanelWidthProvider } from '../../ContextPanel/context';
+import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
 export class FullPageEditor extends React.Component {

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, useTheme } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
-import { ContextPanelConsumer } from '../../ContextPanel/context';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { ClickAreaBlock } from '../../Addon';

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -7,7 +7,7 @@ import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/Fin
 import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper';
 import Toolbar from '../../Toolbar';
 import { mainToolbarStyle, mainToolbarIconBeforeStyle, mainToolbarFirstChildStyle, mainToolbarSecondChildStyle, nonCustomToolbarWrapperStyle, customToolbarWrapperStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
-import { ContextPanelConsumer } from '../../ContextPanel/context';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import messages from './messages';
 import { ToolbarArrowKeyNavigationProvider } from '../../ToolbarArrowKeyNavigationProvider';
 export const EditorToolbar = /*#__PURE__*/React.memo(props => {

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

@@ -165,8 +165,8 @@ const ColorPickerButton = props => {
       border: 1px solid ${DEFAULT_BORDER_COLOR};
       border-radius: ${borderRadius()}px;
       background-color: ${currentColor || 'transparent'};
-      width: ${((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || 14}px;
-      height: ${((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || 14}px;
+      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;
     }
   `;

package/dist/es2019/ui/ConfigPanel/Fields/ColorPicker.js

@@ -5,8 +5,6 @@ import { Field } from '@atlaskit/form';
 import { hexToEditorTableChartsPaletteColor } from '@atlaskit/editor-palette';
 import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
 import { validate } from '../utils';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
 import { requiredIndicator } from './common/RequiredIndicator';
 import { headingSizes } from '@atlaskit/theme/typography';
 import FieldMessages from '../FieldMessages';
@@ -373,13 +371,10 @@ const ColorPicker = props => {
     showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames,
     cols: EXPANDED_COLOR_PICKER_COLUMNS,
     alignX: "right",
-    placement: "ConfigPanel"
-    // TODO: Migrate away from gridSize
-    // Recommendation: Update types of size object to accept string width/height and then replace gridSize with tokens
-    ,
+    placement: "ConfigPanel",
     size: {
-      width: 3 * gridSize(),
-      height: 3 * gridSize()
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)"
     }
   }) : jsx(ColorPickerButton, {
     title: title,
@@ -390,8 +385,8 @@ const ColorPicker = props => {
     alignX: "right",
     placement: "ConfigPanel",
     size: {
-      width: 3 * gridSize(),
-      height: 3 * gridSize()
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)"
     }
   });
 };

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React, { useMemo } from 'react';
 import { jsx, css, useTheme } from '@emotion/react';
-import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles, resizerStyles } from '@atlaskit/editor-common/styles';
+import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles, resizerStyles, gridStyles } from '@atlaskit/editor-common/styles';
 import { editorFontSize } from '@atlaskit/editor-shared-styles';
 import { unsupportedStyles } from '../../plugins/unsupported-content/styles';
 import { telepointerStyle } from '../../plugins/collab-edit/styles';
@@ -20,7 +20,6 @@ import { mentionsStyles } from '../../plugins/mentions/styles';
 import { emojiStyles } from '../../plugins/emoji/styles';
 import { textFormattingStyles } from '../../plugins/text-formatting/styles';
 import { placeholderTextStyles } from '../../plugins/placeholder-text/styles';
-import { gridStyles } from '../../plugins/grid/styles';
 import { linkStyles } from '../../plugins/hyperlink/styles';
 import { extensionStyles } from '../../plugins/extension/ui/styles';
 import { expandStyles } from '../../plugins/expand/ui/styles';

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

@@ -6,10 +6,9 @@ import { css, jsx } from '@emotion/react';
 import Transition from 'react-transition-group/Transition';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorSwoopCubicBezier, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorBreakoutPadding, akEditorContextPanelWidth, ATLASSIAN_NAVIGATION_HEIGHT } from '@atlaskit/editor-shared-styles';
-import { ContextPanelConsumer } from './context';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import WithPluginState from '../WithPluginState';
 import { pluginKey as contextPanelPluginKey } from '../../plugins/context-panel';
-import { pluginKey as widthPluginKey } from '../../plugins/width';
 import WithEditorActions from '../WithEditorActions';
 import { getChildBreakoutModes } from '../../utils/document';
 const ANIM_SPEED_MS = 500;
@@ -58,6 +57,15 @@ export class SwappableContentArea extends React.PureComponent {
       mounted: false,
       currentPluginContent: undefined
     });
+    _defineProperty(this, "focusEditor", () => {
+      const {
+        editorView
+      } = this.props;
+      if (editorView && !editorView.hasFocus()) {
+        var _editorView$focus;
+        (_editorView$focus = editorView.focus) === null || _editorView$focus === void 0 ? void 0 : _editorView$focus.call(editorView);
+      }
+    });
     _defineProperty(this, "showPluginContent", () => {
       const {
         pluginContent
@@ -87,7 +95,8 @@ export class SwappableContentArea extends React.PureComponent {
         timeout: this.state.mounted ? ANIM_SPEED_MS : 0,
         in: isVisible,
         mountOnEnter: true,
-        unmountOnExit: true
+        unmountOnExit: true,
+        onExiting: this.focusEditor
       }, children);
     });
   }
@@ -123,8 +132,9 @@ export class SwappableContentArea extends React.PureComponent {
       broadcastPosition,
       positionedOverEditor
     }) => {
+      const contextPanelWidth = visible ? width : 0;
       const newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width) : false;
-      broadcastWidth(visible ? width : 0);
+      broadcastWidth(contextPanelWidth);
       (newPosition && visible) !== positionedOverEditor && broadcastPosition(newPosition && visible);
       return jsx("div", {
         css: [panel, !visible && panelHidden,
@@ -143,44 +153,57 @@ export class SwappableContentArea extends React.PureComponent {
     });
   }
 }
-export default class ContextPanel extends React.Component {
-  render() {
-    return jsx(WithEditorActions, {
-      render: actions => {
-        const eventDispatcher = actions._privateGetEventDispatcher();
-        const editorView = actions._privateGetEditorView();
-        if (!eventDispatcher) {
-          return jsx(SwappableContentArea, _extends({
-            editorView: editorView
-          }, this.props));
-        }
-        return jsx(WithPluginState, {
-          eventDispatcher: eventDispatcher,
-          plugins: {
-            contextPanel: contextPanelPluginKey,
-            widthState: widthPluginKey
-          },
-          render: ({
-            contextPanel,
-            widthState = {
-              width: 0,
-              containerWidth: 0,
-              lineLength: akEditorDefaultLayoutWidth
-            }
-          }) => {
-            const firstContent = contextPanel && contextPanel.contents.find(Boolean);
-            const editorWidth = {
-              ...widthState,
-              contentBreakoutModes: editorView ? getChildBreakoutModes(editorView.state.doc, editorView.state.schema) : []
-            };
-            return jsx(SwappableContentArea, _extends({}, this.props, {
-              editorView: editorView,
-              pluginContent: firstContent,
-              editorWidth: editorWidth
-            }));
-          }
-        });
-      }
-    });
+
+// TODO: ED-17837 We have this workaround because we do
+// not have access to the pluginInjectionApi at this location.
+// It might be that we need to inject the pluginInjectionApi
+// via context so that we can use it in this file (similar to
+// WithEditorActions). To be investigated further.
+// @ts-ignore
+const widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: state => {
+    return state['widthPlugin$'];
+  }
+};
+function ContextPanelWithActions({
+  actions,
+  ...props
+}) {
+  const eventDispatcher = actions._privateGetEventDispatcher();
+  const editorView = actions._privateGetEditorView();
+  if (!eventDispatcher) {
+    return jsx(SwappableContentArea, _extends({
+      editorView: editorView
+    }, props));
   }
+  return jsx(WithPluginState, {
+    eventDispatcher: eventDispatcher,
+    plugins: {
+      contextPanel: contextPanelPluginKey,
+      widthState: widthPluginKey
+    },
+    render: ({
+      contextPanel,
+      widthState
+    }) => {
+      const firstContent = contextPanel && contextPanel.contents.find(Boolean);
+      const editorWidth = {
+        ...widthState,
+        contentBreakoutModes: editorView ? getChildBreakoutModes(editorView.state.doc, editorView.state.schema) : []
+      };
+      return jsx(SwappableContentArea, _extends({}, props, {
+        editorView: editorView,
+        pluginContent: firstContent,
+        editorWidth: editorWidth
+      }));
+    }
+  });
+}
+export default function ContextPanel(props) {
+  return jsx(WithEditorActions, {
+    render: actions => jsx(ContextPanelWithActions, _extends({
+      actions: actions
+    }, props))
+  });
 }

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

@@ -9,7 +9,6 @@ import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
 import EditorAlignImageRight from '@atlaskit/icon/glyph/editor/align-image-right';
 import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
 import { alignAttributes } from '../../utils/rich-media-utils';
-import { pluginKey as widthPluginKey } from '../../plugins/width';
 import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { addAnalytics } from '../../plugins/analytics/utils';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, ACTION } from '../../plugins/analytics';
@@ -62,7 +61,7 @@ const getNodeWidth = (node, schema) => {
   }
   return node.firstChild && node.firstChild.attrs.width || node.attrs.width;
 };
-const makeAlign = (layout, nodeType) => {
+const makeAlign = (layout, nodeType, widthPluginDependencyApi) => {
   return (state, dispatch) => {
     const {
       node
@@ -76,7 +75,7 @@ const makeAlign = (layout, nodeType) => {
     if (!dispatch) {
       return false;
     }
-    const widthPluginState = widthPluginKey.getState(state);
+    const widthPluginState = widthPluginDependencyApi === null || widthPluginDependencyApi === void 0 ? void 0 : widthPluginDependencyApi.sharedState.currentState();
     if (!node || node.type !== nodeType || !widthPluginState) {
       return false;
     }
@@ -116,7 +115,7 @@ const makeAlign = (layout, nodeType) => {
     return true;
   };
 };
-const mapIconsToToolbarItem = (icons, layout, intl, nodeType) => icons.map(toolbarItem => {
+const mapIconsToToolbarItem = (icons, layout, intl, nodeType, widthPluginDependencyApi) => icons.map(toolbarItem => {
   const {
     id,
     value
@@ -127,7 +126,7 @@ const mapIconsToToolbarItem = (icons, layout, intl, nodeType) => icons.map(toolb
     icon: toolbarItem.icon,
     title: intl.formatMessage(layoutToMessages[value]),
     selected: layout === value,
-    onClick: makeAlign(value, nodeType)
+    onClick: makeAlign(value, nodeType, widthPluginDependencyApi)
   };
 });
 const shouldHideLayoutToolbar = (selection, {
@@ -135,7 +134,7 @@ const shouldHideLayoutToolbar = (selection, {
 }, allowResizingInTables) => {
   return hasParentNodeOfType([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand, ...(allowResizingInTables ? [] : [nodes.table])].filter(Boolean))(selection);
 };
-const buildLayoutButtons = (state, intl, nodeType, allowResizing, allowResizingInTables, allowWrapping = true, allowAlignment = true) => {
+const buildLayoutButtons = (state, intl, nodeType, widthPluginDependencyApi, allowResizing, allowResizingInTables, allowWrapping = true, allowAlignment = true) => {
   const {
     selection
   } = state;
@@ -145,9 +144,9 @@ const buildLayoutButtons = (state, intl, nodeType, allowResizing, allowResizingI
   const {
     layout
   } = selection.node.attrs;
-  const alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType) : [];
-  const wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType) : [];
-  const breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType) : [];
+  const alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi) : [];
+  const wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi) : [];
+  const breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi) : [];
   const items = [...alignmentToolbarItems, ...getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping), ...wrappingToolbarItems, ...getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing), ...breakOutToolbarItems];
   return items;
 };

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
-import { gridTypeForLayout } from '../../plugins/grid';
+import { gridTypeForLayout } from '@atlaskit/editor-common/utils';
 import { snapTo, handleSides } from './utils';
 import { richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';

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

@@ -1,7 +1,13 @@
-import React, { useEffect, useContext, useState } from 'react';
-import { pluginKey as widthPluginKey } from '../../plugins/width';
-import { WidthContext } from '@atlaskit/editor-common/ui';
-import { ContextPanel } from '../ContextPanel/context';
+import React, { useContext, useEffect, useState } from 'react';
+import { ContextPanel, WidthContext } from '@atlaskit/editor-common/ui';
+// TODO: ED-17870 This workaround will be removed here.
+// @ts-ignore
+const widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: state => {
+    return state['widthPlugin$'];
+  }
+};
 // Why do we need this? Why not just use the width from the context directly rather than this?
 // Well my friend - some of the VR tests break, seemingly due to the fact that existing behaviour
 // assumes the initial value is 0, the width from context may not start from 0 however.

package/dist/es2019/ui/styles.js

@@ -10,6 +10,9 @@ export const buttonGroupStyle = css`
     display: flex;
   }
 `;
+
+// This style is copied to packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/styles.tsx
+// If you make change here, change in above file as well.
 export const separatorStyles = css`
   background: ${`var(--ds-border, ${N30})`};
   width: 1px;
@@ -18,6 +21,9 @@ export const separatorStyles = css`
   margin: 0 8px;
   user-select: none;
 `;
+
+// This style is copied to packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/styles.tsx
+// If you make change here, change in above file as well.
 export const wrapperStyle = css`
   display: flex;
   align-items: center;

package/dist/es2019/utils/clipboard.js

@@ -43,19 +43,24 @@ export const copyHTMLToClipboard = async (elementToCopy, plainTextToCopy) => {
           type: 'text/html'
         })
       });
-
       // @ts-ignore
       await navigator.clipboard.write([data]);
     } catch (error) {
       throw new Error('Clipboard api is not supported');
     }
   } else {
-    // At the time of development, Firefox doesn't support ClipboardItem API
+    // ED-17083 extension copy seems have issue with ClipboardItem API
     // Hence of use of this polyfill
-    const Clipboard = clipboard;
-    const dt = new Clipboard.DT();
-    dt.setData('text/plain', plainTextToCopy || elementToCopy.innerText);
-    dt.setData('text/html', elementToCopy.innerHTML);
-    Clipboard.write(dt);
+    copyHTMLToClipboardPolyfill(elementToCopy, plainTextToCopy);
   }
+};
+
+// At the time of development, Firefox doesn't support ClipboardItem API
+// Hence of use of this polyfill
+export const copyHTMLToClipboardPolyfill = (elementToCopy, plainTextToCopy) => {
+  const Clipboard = clipboard;
+  const dt = new Clipboard.DT();
+  dt.setData('text/plain', plainTextToCopy || elementToCopy.innerText);
+  dt.setData('text/html', elementToCopy.innerHTML);
+  Clipboard.write(dt);
 };