@atlaskit/editor-core 183.1.6 → 184.0.0

package/dist/esm/labs/next/full-page.js

@@ -11,7 +11,6 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { BaseTheme } from '@atlaskit/editor-common/ui';
 import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
 import ContentStyles from '../../ui/ContentStyles';
-import WidthEmitter from '../../ui/WidthEmitter';
 import { ClickAreaBlock } from '../../ui/Addon';
 import { scrollbarStyles } from '../../ui/styles';
 import { tableFullPageEditorStyles } from '@atlaskit/editor-plugin-table/ui/common-styles';
@@ -20,7 +19,7 @@ import { Editor, EditorContent, useEditorSharedConfig } from './Editor';
 import { Toolbar } from './Toolbar';
 import { ContentComponents } from './ContentComponents';
 import { useCreateAnalyticsHandler } from './internal/hooks/use-analytics';
-import { ContextPanelWidthProvider } from '../../ui/ContextPanel/context';
+import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 var fullPageEditorWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 340px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
 var scrollContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-y: scroll;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  ", ";\n"])), scrollbarStyles);
 var GUTTER_PADDING = 32;
@@ -115,9 +114,7 @@ function FullPage(props) {
     containerElement: scrollContainerRef.current
   }))))), contextPanel && jsx("div", {
     css: sidebarArea
-  }, contextPanel), jsx(WidthEmitter, {
-    editorView: config === null || config === void 0 ? void 0 : config.editorView
-  }))))));
+  }, contextPanel))))));
 }
 FullPage.displayName = 'FullPageEditor';
 var FullPageWithAnalytics = withAnalyticsEvents()(FullPage);

package/dist/esm/labs/next/presets/create-stub-internal-apis.js

@@ -23,8 +23,10 @@ export var createStubInternalApis = function createStubInternalApis() {
     // That means, there is no createAnalyticsEvent available at all.
     // This should not happen, but if it does, we will send a mock function to avoid
     // regression on SmartLinks (they are the only one using this function directly)
-    // eslint-disable-next-line no-console
-    console.error('This should never be called, if it does we have a problem');
+    if (process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
+      console.error('This should never be called, if it does we have a problem');
+    }
     return {
       fire: function fire() {}
     };

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

@@ -5,7 +5,7 @@ import blockTypePlugin from '../../../plugins/block-type';
 import clearMarksOnChangeToEmptyDocumentPlugin from '../../../plugins/clear-marks-on-change-to-empty-document';
 import hyperlinkPlugin from '../../../plugins/hyperlink';
 import textFormattingPlugin from '../../../plugins/text-formatting';
-import widthPlugin from '../../../plugins/width';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import unsupportedContentPlugin from '../../../plugins/unsupported-content';
 import basePlugin from '../../../plugins/base';
 import editorDisabledPlugin from '../../../plugins/editor-disabled';

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

@@ -2,7 +2,8 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tasksAndDecisionsPlugin, textColorPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin, copyButtonPlugin, borderPlugin } from '../../../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tasksAndDecisionsPlugin, textColorPlugin, statusPlugin, alignmentPlugin, indentationPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin, copyButtonPlugin, borderPlugin } from '../../../plugins';
+import { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import cardPlugin from '../../../plugins/card';
 import { tablesPlugin } from '@atlaskit/editor-plugin-table';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';

package/dist/esm/plugins/breakout/index.js

@@ -7,13 +7,12 @@ import React from 'react';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { breakout } from '@atlaskit/adf-schema';
 import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
-import WithPluginState from '../../ui/WithPluginState';
-import { pluginKey as widthPluginKey } from '../width';
 import LayoutButton from './ui/LayoutButton';
 import { BreakoutCssClassName } from './constants';
 import { pluginKey } from './plugin-key';
 import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 var BreakoutView = /*#__PURE__*/function () {
   function BreakoutView(
   /**
@@ -21,14 +20,14 @@ var BreakoutView = /*#__PURE__*/function () {
    * of the prosemirror and prosemirror types mean using PMNode
    * is not problematic.
    */
-  mark, view, eventDispatcher) {
+  mark, view, pluginInjectionApi) {
     var _this = this;
     _classCallCheck(this, BreakoutView);
     _defineProperty(this, "updateWidth", function (widthState) {
       // we skip updating the width of breakout nodes if the editorView dom
       // element was hidden (to avoid breakout width and button thrashing
       // when an editor is hidden, re-rendered and unhidden).
-      if (widthState.width === 0) {
+      if (widthState === undefined || widthState.width === 0) {
         return;
       }
       var containerStyle = "";
@@ -80,9 +79,11 @@ var BreakoutView = /*#__PURE__*/function () {
     this.mark = mark;
     this.view = view;
     this.contentDOM = contentDOM;
-    this.eventDispatcher = eventDispatcher;
-    eventDispatcher.on(widthPluginKey.key, this.updateWidth);
-    this.updateWidth(widthPluginKey.getState(this.view.state));
+    this.unsubscribe = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width.sharedState.onChange(function (_ref) {
+      var nextSharedState = _ref.nextSharedState;
+      return _this.updateWidth(nextSharedState);
+    });
+    this.updateWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width.sharedState.currentState());
   }
   _createClass(BreakoutView, [{
     key: "destroy",
@@ -90,7 +91,8 @@ var BreakoutView = /*#__PURE__*/function () {
     // NOTE: Lifecycle events doesn't work for mark NodeView. So currently this is a no-op.
     // @see https://github.com/ProseMirror/prosemirror/issues/1082
     function destroy() {
-      this.eventDispatcher.off(widthPluginKey.key, this.updateWidth);
+      var _this$unsubscribe;
+      (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
     }
   }]);
   return BreakoutView;
@@ -101,9 +103,8 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
   }
   return newBreakoutNode || currentBreakoutNode ? true : false;
 }
-function createPlugin(_ref) {
-  var dispatch = _ref.dispatch,
-    eventDispatcher = _ref.eventDispatcher;
+function createPlugin(pluginInjectionApi, _ref2) {
+  var dispatch = _ref2.dispatch;
   return new SafePlugin({
     state: {
       init: function init() {
@@ -132,19 +133,39 @@ function createPlugin(_ref) {
         // See the following link for more details:
         // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
         breakout: function breakout(mark, view) {
-          return new BreakoutView(mark, view, eventDispatcher);
+          return new BreakoutView(mark, view, pluginInjectionApi);
         }
       }
     }
   });
 }
-var breakoutPlugin = function breakoutPlugin(options) {
+var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
+  var _breakoutState$breako;
+  var api = _ref3.api,
+    editorView = _ref3.editorView,
+    boundariesElement = _ref3.boundariesElement,
+    scrollableElement = _ref3.scrollableElement,
+    mountPoint = _ref3.mountPoint;
+  // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'breakout']),
+    breakoutState = _useSharedPluginState.breakoutState;
+  return /*#__PURE__*/React.createElement(LayoutButton, {
+    editorView: editorView,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : breakoutState.breakoutNode) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null
+  });
+};
+var breakoutPlugin = function breakoutPlugin(options, api) {
   return {
     name: 'breakout',
     pmPlugins: function pmPlugins() {
       return [{
         name: 'breakout',
-        plugin: createPlugin
+        plugin: function plugin(props) {
+          return createPlugin(api, props);
+        }
       }];
     },
     marks: function marks() {
@@ -153,31 +174,29 @@ var breakoutPlugin = function breakoutPlugin(options) {
         mark: breakout
       }];
     },
-    contentComponent: function contentComponent(_ref2) {
-      var editorView = _ref2.editorView,
-        popupsMountPoint = _ref2.popupsMountPoint,
-        popupsBoundariesElement = _ref2.popupsBoundariesElement,
-        popupsScrollableElement = _ref2.popupsScrollableElement;
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return {
+          breakoutNode: undefined
+        };
+      }
+      return pluginKey.getState(editorState);
+    },
+    contentComponent: function contentComponent(_ref4) {
+      var editorView = _ref4.editorView,
+        popupsMountPoint = _ref4.popupsMountPoint,
+        popupsBoundariesElement = _ref4.popupsBoundariesElement,
+        popupsScrollableElement = _ref4.popupsScrollableElement;
       // This is a bit crappy, but should be resolved once we move to a static schema.
       if (options && !options.allowBreakoutButton) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          breakoutPluginState: pluginKey,
-          widthPluginState: widthPluginKey
-        },
-        render: function render(_ref3) {
-          var _breakoutPluginState$;
-          var breakoutPluginState = _ref3.breakoutPluginState;
-          return /*#__PURE__*/React.createElement(LayoutButton, {
-            editorView: editorView,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            scrollableElement: popupsScrollableElement,
-            node: (_breakoutPluginState$ = breakoutPluginState === null || breakoutPluginState === void 0 ? void 0 : breakoutPluginState.breakoutNode) !== null && _breakoutPluginState$ !== void 0 ? _breakoutPluginState$ : null
-          });
-        }
+      return /*#__PURE__*/React.createElement(LayoutButtonWrapper, {
+        api: api,
+        mountPoint: popupsMountPoint,
+        editorView: editorView,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement
       });
     }
   };

package/dist/esm/plugins/card/toolbar.js

@@ -153,8 +153,8 @@ var unlinkCard = function unlinkCard(node, state, editorAnalyticsApi) {
     return false;
   };
 };
-var buildAlignmentOptions = function buildAlignmentOptions(state, intl, cardOptions) {
-  return buildLayoutButtons(state, intl, state.schema.nodes.embedCard, true, true, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowWrapping, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowAlignment);
+var buildAlignmentOptions = function buildAlignmentOptions(state, intl, widthPluginDependencyApi, cardOptions) {
+  return buildLayoutButtons(state, intl, state.schema.nodes.embedCard, widthPluginDependencyApi, true, true, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowWrapping, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowAlignment);
 };
 var withToolbarMetadata = function withToolbarMetadata(command) {
   return commandWithMetadata(command, {
@@ -238,7 +238,8 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
         onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
       }]);
       if (currentAppearance === 'embed') {
-        var alignmentOptions = buildAlignmentOptions(state, intl, cardOptions);
+        var _pluginInjectionApi$d5;
+        var alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d5 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.width, cardOptions);
         if (alignmentOptions.length) {
           alignmentOptions.push({
             type: 'separator'

package/dist/esm/plugins/collab-edit/plugin-state.js

@@ -107,9 +107,8 @@ export var PluginState = /*#__PURE__*/function () {
             remove = remove.concat(oldPointers);
           }
           var endOfDocPos = tr.doc.nodeSize - 2;
-          var _telepointerData$sele = telepointerData.selection,
-            anchor = _telepointerData$sele.anchor,
-            head = _telepointerData$sele.head;
+          var anchor = telepointerData.selection.anchor;
+          var head = telepointerData.selection.head;
           var rawFrom = anchor < head ? anchor : head;
           var rawTo = anchor >= head ? anchor : head;
           if (rawFrom > endOfDocPos) {

package/dist/esm/plugins/copy-button/commands.js

@@ -1,9 +1,11 @@
 import { copyButtonPluginKey } from './pm-plugins/plugin-key';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
-import { copyHTMLToClipboard } from '../../utils/clipboard';
+import { NodeSelection } from 'prosemirror-state';
+import { copyHTMLToClipboard, copyHTMLToClipboardPolyfill } from '../../utils/clipboard';
 import { getSelectedNodeOrNodeParentByNodeType, toDOM } from './utils';
 import { addAnalytics, ACTION, INPUT_METHOD } from '../analytics';
 import { getAnalyticsPayload } from '../clipboard/pm-plugins/main';
+import { browser } from '@atlaskit/editor-common/utils';
 export function createToolbarCopyCommandForMark(markType) {
   function command(state, dispatch) {
     var textNode = state.tr.selection.$head.parent.maybeChild(state.tr.selection.$head.index());
@@ -120,7 +122,12 @@ export var createToolbarCopyCommandForNode = function createToolbarCopyCommandFo
           // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
           div.firstChild.setAttribute('data-pm-slice', '0 0 []');
         }
-        copyHTMLToClipboard(div);
+        // ED-17083 safari seems have bugs for extension copy because exntension do not have a child text(innerText) and it will not recognized as html in clipboard, this could be merge into one if this extension fixed children issue or safari fix the copy bug
+        if (browser.safari && state.selection instanceof NodeSelection && state.selection.node.type === state.schema.nodes.extension) {
+          copyHTMLToClipboardPolyfill(div);
+        } else {
+          copyHTMLToClipboard(div);
+        }
       }
       copyToClipboardTr.setMeta('scrollIntoView', false);
       dispatch(copyToClipboardTr);

package/dist/esm/plugins/extension/index.js

@@ -32,7 +32,7 @@ var extensionPlugin = function extensionPlugin() {
             portalProviderAPI = _ref.portalProviderAPI,
             eventDispatcher = _ref.eventDispatcher;
           var extensionHandlers = options.extensionHandlers || {};
-          return createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, options.useLongPressSelection, {
+          return createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, api, options.useLongPressSelection, {
             appearance: options.appearance
           });
         }

package/dist/esm/plugins/extension/nodeviews/extension.js

@@ -62,19 +62,21 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
         providerFactory: props.providerFactory,
         handleContentDOMRef: forwardRef,
         extensionHandlers: props.extensionHandlers,
-        editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance
+        editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance,
+        pluginInjectionApi: props.pluginInjectionApi
       }));
     }
   }]);
   return ExtensionNode;
 }(ReactNodeView);
-export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions) {
+export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi) {
   return function (node, view, getPos) {
     var hasIntlContext = true;
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory: providerFactory,
       extensionHandlers: extensionHandlers,
-      extensionNodeViewOptions: extensionNodeViewOptions
+      extensionNodeViewOptions: extensionNodeViewOptions,
+      pluginInjectionApi: pluginInjectionApi
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

package/dist/esm/plugins/extension/pm-plugins/main.js

@@ -194,9 +194,9 @@ export var handleUpdate = function handleUpdate(_ref4) {
   }
   return true;
 };
-var createPlugin = function createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher) {
-  var useLongPressSelection = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var options = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : {};
+var createPlugin = function createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, pluginInjectionApi) {
+  var useLongPressSelection = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var options = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : {};
   var state = createPluginState(dispatch, {
     showEditButton: false,
     showContextPanel: false
@@ -231,11 +231,11 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
     props: {
       nodeViews: {
         // WARNING: referentiality-plugin also creates these nodeviews
-        extension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions),
+        extension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
         // WARNING: referentiality-plugin also creates these nodeviews
-        bodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions),
+        bodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
         // WARNING: referentiality-plugin also creates these nodeviews
-        inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions)
+        inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi)
       },
       handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension'], function (target) {
         return !target.closest('.extension-content');

package/dist/esm/plugins/extension/ui/Extension/Extension/index.js

@@ -12,9 +12,8 @@ import { calculateBreakoutStyles } from '@atlaskit/editor-common/utils';
 import { wrapperStyle, header, content, contentWrapper, widerLayoutClassName } from './styles';
 import { overlay } from '../styles';
 import ExtensionLozenge from '../Lozenge';
-import { pluginKey as widthPluginKey } from '../../../../width';
-import WithPluginState from '../../../../../ui/WithPluginState';
 import classnames from 'classnames';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 function ExtensionWithPluginState(props) {
   var node = props.node,
     handleContentDOMRef = props.handleContentDOMRef,
@@ -89,6 +88,34 @@ function ExtensionWithPluginState(props) {
   }))));
 }
 var Extension = function Extension(props) {
+  // TODO: ED-17836 This code is here because confluence injects
+  // the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+  // which cannot access the `pluginInjectionApi`. When we move
+  // Confluence to using presets we can remove this workaround.
+  var pluginInjectionApi = props.pluginInjectionApi;
+  return pluginInjectionApi === undefined ? jsx(ExtensionDeprecated, props) : jsx(ExtensionWithSharedState, props);
+};
+var ExtensionWithSharedState = function ExtensionWithSharedState(props) {
+  var pluginInjectionApi = props.pluginInjectionApi;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  return jsx(ExtensionWithPluginState, _extends({
+    widthState: widthState
+  }, props));
+};
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+// TODO: ED-17836 This code is here because Confluence injects
+// the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+// which cannot access the `pluginInjectionApi`. When we move
+// Confluence to using presets we can remove this workaround.
+// @ts-ignore
+var widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: function getState(state) {
+    return state['widthPlugin$'];
+  }
+};
+var ExtensionDeprecated = function ExtensionDeprecated(props) {
   return jsx(WithPluginState, {
     editorView: props.view,
     plugins: {
@@ -102,6 +129,10 @@ var Extension = function Extension(props) {
     }
   });
 };
+/**
+ * End workaround
+ */
+
 export default overflowShadow(Extension, {
   overflowSelector: '.extension-overflow-wrapper'
 });

package/dist/esm/plugins/extension/ui/Extension/ExtensionComponent.js

@@ -172,7 +172,8 @@ var ExtensionComponent = /*#__PURE__*/function (_Component) {
         handleContentDOMRef = _this$props2.handleContentDOMRef,
         editorView = _this$props2.editorView,
         references = _this$props2.references,
-        editorAppearance = _this$props2.editorAppearance;
+        editorAppearance = _this$props2.editorAppearance,
+        pluginInjectionApi = _this$props2.pluginInjectionApi;
       var extensionHandlerResult = this.tryExtensionHandler();
       switch (node.type.name) {
         case 'extension':
@@ -185,7 +186,8 @@ var ExtensionComponent = /*#__PURE__*/function (_Component) {
             handleContentDOMRef: handleContentDOMRef,
             view: editorView,
             editorAppearance: editorAppearance,
-            hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame
+            hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
+            pluginInjectionApi: pluginInjectionApi
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/React.createElement(InlineExtension, {

package/dist/esm/plugins/extension/ui/Extension/index.js

@@ -27,7 +27,8 @@ var Extension = /*#__PURE__*/function (_Component) {
         handleContentDOMRef = _this$props.handleContentDOMRef,
         extensionHandlers = _this$props.extensionHandlers,
         references = _this$props.references,
-        editorAppearance = _this$props.editorAppearance;
+        editorAppearance = _this$props.editorAppearance,
+        pluginInjectionApi = _this$props.pluginInjectionApi;
       return /*#__PURE__*/React.createElement(ExtensionComponent, {
         editorView: editorView,
         node: node,
@@ -36,7 +37,8 @@ var Extension = /*#__PURE__*/function (_Component) {
         extensionProvider: extensionProvider,
         handleContentDOMRef: handleContentDOMRef,
         extensionHandlers: extensionHandlers,
-        editorAppearance: editorAppearance
+        editorAppearance: editorAppearance,
+        pluginInjectionApi: pluginInjectionApi
       });
     });
     _this.providerFactory = props.providerFactory || new ProviderFactory();

package/dist/esm/plugins/help-dialog/index.js

@@ -9,7 +9,7 @@ import { openHelp, tooltip } from '../../keymaps';
 import WithPluginState from '../../ui/WithPluginState';
 import { HelpDialogLoader } from './ui/HelpDialogLoader';
 import { pluginKey as quickInsertPluginKey } from '../quick-insert';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../../plugins/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { openHelpCommand } from './commands';
@@ -41,6 +41,7 @@ export function createPlugin(dispatch, imageEnabled) {
 }
 var helpDialog = function helpDialog() {
   var imageUploadProviderExists = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var api = arguments.length > 1 ? arguments[1] : undefined;
   return {
     name: 'helpDialog',
     pmPlugins: function pmPlugins() {
@@ -53,7 +54,8 @@ var helpDialog = function helpDialog() {
       }, {
         name: 'helpDialogKeymap',
         plugin: function plugin() {
-          return keymapPlugin();
+          var _api$dependencies$ana;
+          return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions);
         }
       }];
     },
@@ -72,10 +74,11 @@ var helpDialog = function helpDialog() {
               label: ""
             });
           },
-          action: function action(insert, state) {
+          action: function action(insert) {
+            var _api$dependencies$ana2;
             var tr = insert('');
             openHelpCommand(tr);
-            return addAnalytics(state, tr, {
+            api === null || api === void 0 ? void 0 : (_api$dependencies$ana2 = api.dependencies.analytics) === null || _api$dependencies$ana2 === void 0 ? void 0 : _api$dependencies$ana2.actions.attachAnalyticsEvent({
               action: ACTION.HELP_OPENED,
               actionSubject: ACTION_SUBJECT.HELP,
               actionSubjectId: ACTION_SUBJECT_ID.HELP_QUICK_INSERT,
@@ -83,7 +86,8 @@ var helpDialog = function helpDialog() {
                 inputMethod: INPUT_METHOD.QUICK_INSERT
               },
               eventType: EVENT_TYPE.UI
-            });
+            })(tr);
+            return tr;
           }
         }];
       }
@@ -110,13 +114,13 @@ var helpDialog = function helpDialog() {
     }
   };
 };
-var keymapPlugin = function keymapPlugin() {
+var keymapPlugin = function keymapPlugin(editorAnalyticsAPI) {
   var list = {};
   keymaps.bindKeymapWithCommand(keymaps.openHelp.common, function (state, dispatch) {
     var tr = state.tr;
     var isVisible = tr.getMeta(pluginKey);
     if (!isVisible) {
-      tr = addAnalytics(state, tr, {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
         action: ACTION.CLICKED,
         actionSubject: ACTION_SUBJECT.BUTTON,
         actionSubjectId: ACTION_SUBJECT_ID.BUTTON_HELP,
@@ -124,7 +128,7 @@ var keymapPlugin = function keymapPlugin() {
           inputMethod: INPUT_METHOD.SHORTCUT
         },
         eventType: EVENT_TYPE.UI
-      });
+      })(tr);
       openHelpCommand(tr, dispatch);
     }
     return true;

package/dist/esm/plugins/index.js

@@ -33,11 +33,9 @@ export { default as textColorPlugin } from './text-color';
 export { default as textFormattingPlugin } from './text-formatting';
 export { default as typeAheadPlugin } from './type-ahead';
 export { default as unsupportedContentPlugin } from './unsupported-content';
-export { default as widthPlugin } from './width';
 export { default as cardPlugin } from './card';
 export { default as floatingToolbarPlugin } from './floating-toolbar';
 export { default as statusPlugin } from './status';
-export { default as gridPlugin } from './grid';
 export { default as breakoutPlugin } from './breakout';
 export { default as alignmentPlugin } from './alignment';
 export { default as dataConsumerMarkPlugin } from './data-consumer';

package/dist/esm/plugins/layout/pm-plugins/main.js

@@ -132,7 +132,6 @@ export default (function (options) {
         tr = fixColumnStructure(newState) || tr;
         if (tr.docChanged) {
           tr.setSelection(Selection.fromJSON(tr.doc, selection));
-          tr.setMeta('addToHistory', false);
           return tr;
         }
       }

package/dist/esm/plugins/media/index.js

@@ -14,13 +14,14 @@ import ToolbarMedia from './ui/ToolbarMedia';
 import { ReactMediaGroupNode } from './nodeviews/mediaGroup';
 import { ReactMediaSingleNode } from './nodeviews/mediaSingle';
 import { floatingToolbar as _floatingToolbar } from './toolbar';
-import { addAnalytics, ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '../analytics';
+import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { IconImages } from '../quick-insert/assets';
 import WithPluginState from '../../ui/WithPluginState';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { ReactMediaNode } from './nodeviews/mediaNodeView';
 import { ReactMediaInlineNode } from './nodeviews/mediaInline';
+import { stateKey } from './pm-plugins/plugin-key';
 export { insertMediaSingleNode } from './utils/media-single';
 var mediaPlugin = function mediaPlugin() {
   var _api$dependencies, _api$dependencies$fea;
@@ -29,6 +30,12 @@ var mediaPlugin = function mediaPlugin() {
   var 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: 'media',
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return stateKey.getState(editorState);
+    },
     nodes: function nodes() {
       var _ref = options || {},
         _ref$allowMediaGroup = _ref.allowMediaGroup,
@@ -82,7 +89,7 @@ var mediaPlugin = function mediaPlugin() {
             nodeViews: {
               mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options),
               mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, options, api),
-              media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options),
+              media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
               mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory)
             },
             errorReporter: errorReporter,
@@ -211,9 +218,11 @@ var mediaPlugin = function mediaPlugin() {
             return /*#__PURE__*/React.createElement(IconImages, null);
           },
           action: function action(insert, state) {
+            var _api$dependencies$ana;
             var pluginState = pluginKey.getState(state);
             pluginState.showMediaPicker();
-            return addAnalytics(state, insert(''), {
+            var tr = insert('');
+            api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions.attachAnalyticsEvent({
               action: ACTION.OPENED,
               actionSubject: ACTION_SUBJECT.PICKER,
               actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
@@ -221,7 +230,8 @@ var mediaPlugin = function mediaPlugin() {
                 inputMethod: INPUT_METHOD.QUICK_INSERT
               },
               eventType: EVENT_TYPE.UI
-            });
+            })(tr);
+            return tr;
           }
         }];
       },
@@ -235,7 +245,7 @@ var mediaPlugin = function mediaPlugin() {
           allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
           allowAltTextOnImages: options && options.allowAltTextOnImages,
           altTextValidator: options && options.altTextValidator
-        });
+        }, api);
       }
     }
   };