@atlaskit/editor-core 183.1.6 → 184.0.4

package/.eslintrc.js

@@ -8,13 +8,13 @@ module.exports = {
             target: 'packages/editor/editor-core/src/**/*',
             from: `packages/editor/editor-core/src/plugins/*/!(types)*`,
             message:
-              '[ELR101] Avoid importing dependencies from editor plugins. Move shared code to a common location. go/elr101',
+              '[ELR101] Avoid importing dependencies from editor plugins. Type-only imports are an exception. Move shared code to a common location. go/elr101',
           },
           {
             target: 'packages/editor/editor-core/src/**/*',
             from: `packages/editor/editor-core/src/plugins/*/!(types)**/*`,
             message:
-              '[ELR101] Avoid importing dependencies from editor plugins. Move shared code to a common location. go/elr101',
+              '[ELR101] Avoid importing dependencies from editor plugins. Type-only imports are an exception. Move shared code to a common location. go/elr101',
           },
         ],
       },
@@ -23,7 +23,11 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['**/__tests__/**/*.{js,ts,tsx}', 'examples/**/*.{js,ts,tsx}'],
+      files: [
+        '**/__tests__/**/*.{js,ts,tsx}',
+        'examples/**/*.{js,ts,tsx}',
+        '**/*.{test,spec}.{js,ts,tsx}',
+      ],
       rules: {
         'import/no-restricted-paths': ['off'],
         'react/no-danger': 'off',

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/editor-core
 
+## 184.0.4
+
+### Patch Changes
+
+- [`42486e5e512`](https://bitbucket.org/atlassian/atlassian-frontend/commits/42486e5e512) - Updated `ColorPickerButton`'s size prop type from number to string for width and height, allowing use of space tokens.
+
+## 184.0.0
+
+### Major Changes
+
+- [`b7086232a7c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b7086232a7c) - ESS-3135: move collab provider types into @atlaskit/collab-provider
+
+### Minor Changes
+
+- [`1549c2e6dda`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1549c2e6dda) - Extract width plugin from `editor-core` to separate `editor-plugin-width` package.
+
+### Patch Changes
+
+- [`10ddf00db40`](https://bitbucket.org/atlassian/atlassian-frontend/commits/10ddf00db40) - [ux] add a handler size option and relevant style and demo page
+- [`6d2cb452718`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6d2cb452718) - converted the analytics events within help-dialog to use the new Analytics API
+- [`18fc85285dc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18fc85285dc) - Fix extensions in Confluence.
+- [`3247424b653`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3247424b653) - Removed unused styling for the recently removed fileCardImageViewSelectedSelector classname
+- [`d2ebe077406`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2ebe077406) - [ux] ED-17083 Fix copy button for extension
+- [`8c54caf3c01`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8c54caf3c01) - Focus editor when closing extension sidebar config
+- [`19389328bfd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19389328bfd) - [ED-16813] Fix uiTracking logic so it honours the sampling rate set in performance feature flags
+- [`1a167533ab8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1a167533ab8) - [ux] ED-17834 - Pasting over layout columns is able to be undone
+- [`f055b886032`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f055b886032) - Extract the grid plugin to a separate package.
+- Updated dependencies
+
 ## 183.1.6
 
 ### Patch Changes

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

@@ -16,7 +16,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _ContentStyles = _interopRequireDefault(require("../../ui/ContentStyles"));
-var _WidthEmitter = _interopRequireDefault(require("../../ui/WidthEmitter"));
 var _Addon = require("../../ui/Addon");
 var _styles = require("../../ui/styles");
 var _commonStyles = require("@atlaskit/editor-plugin-table/ui/common-styles");
@@ -25,7 +24,6 @@ var _Editor = require("./Editor");
 var _Toolbar = require("./Toolbar");
 var _ContentComponents = require("./ContentComponents");
 var _useAnalytics = require("./internal/hooks/use-analytics");
-var _context = require("../../ui/ContextPanel/context");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 /** @jsx jsx */
 var fullPageEditorWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 340px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
@@ -85,7 +83,7 @@ function FullPage(props) {
     scrollContainerRef = _useKeyline2[1];
   var config = (0, _Editor.useEditorSharedConfig)();
   var wrapperElementRef = /*#__PURE__*/_react.default.createRef();
-  return (0, _react2.jsx)(_context.ContextPanelWidthProvider, null, (0, _react2.jsx)(_Editor.Editor, (0, _extends2.default)({}, props, {
+  return (0, _react2.jsx)(_ui.ContextPanelWidthProvider, null, (0, _react2.jsx)(_Editor.Editor, (0, _extends2.default)({}, props, {
     onAnalyticsEvent: handleAnalyticsEvent
   }), (0, _react2.jsx)(_ui.BaseTheme, null, (0, _react2.jsx)("div", {
     css: fullPageEditorWrapper,
@@ -122,9 +120,7 @@ function FullPage(props) {
     containerElement: scrollContainerRef.current
   }))))), contextPanel && (0, _react2.jsx)("div", {
     css: sidebarArea
-  }, contextPanel), (0, _react2.jsx)(_WidthEmitter.default, {
-    editorView: config === null || config === void 0 ? void 0 : config.editorView
-  }))))));
+  }, contextPanel))))));
 }
 FullPage.displayName = 'FullPageEditor';
 var FullPageWithAnalytics = (0, _analyticsNext.withAnalyticsEvents)()(FullPage);

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

@@ -29,8 +29,10 @@ 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/cjs/labs/next/presets/default.js

@@ -11,7 +11,7 @@ var _blockType = _interopRequireDefault(require("../../../plugins/block-type"));
 var _clearMarksOnChangeToEmptyDocument = _interopRequireDefault(require("../../../plugins/clear-marks-on-change-to-empty-document"));
 var _hyperlink = _interopRequireDefault(require("../../../plugins/hyperlink"));
 var _textFormatting = _interopRequireDefault(require("../../../plugins/text-formatting"));
-var _width = _interopRequireDefault(require("../../../plugins/width"));
+var _editorPluginWidth = require("@atlaskit/editor-plugin-width");
 var _unsupportedContent = _interopRequireDefault(require("../../../plugins/unsupported-content"));
 var _base = _interopRequireDefault(require("../../../plugins/base"));
 var _editorDisabled = _interopRequireDefault(require("../../../plugins/editor-disabled"));
@@ -71,7 +71,7 @@ function createDefaultPreset(options) {
       return builder.add([p, options.annotationProviders]);
     }
     return builder;
-  }).add([_hyperlink.default, options.hyperlinkOptions]).add([_textFormatting.default, options.textFormatting]).add(_width.default).add([_quickInsert.default, options.quickInsert]).add([_typeAhead.default, options.typeAhead || {
+  }).add([_hyperlink.default, options.hyperlinkOptions]).add([_textFormatting.default, options.textFormatting]).add(_editorPluginWidth.widthPlugin).add([_quickInsert.default, options.quickInsert]).add([_typeAhead.default, options.typeAhead || {
     createAnalyticsEvent: options.createAnalyticsEvent
   }]).add(_unsupportedContent.default).add(_editorDisabled.default).add([_submitEditor.default, options.submitEditor]).add(_fakeTextCursor.default).add(_floatingToolbar.default).add([_selection.default, options.selection]).add([_codeBlock.default, options.codeBlock || {
     appearance: 'full-page'

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

@@ -8,6 +8,7 @@ exports.default = createUniversalPreset;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _plugins = require("../../../plugins");
+var _editorPluginGrid = require("@atlaskit/editor-plugin-grid");
 var _card = _interopRequireDefault(require("../../../plugins/card"));
 var _editorPluginTable = require("@atlaskit/editor-plugin-table");
 var _editorPluginContentInsertion = require("@atlaskit/editor-plugin-content-insertion");
@@ -85,7 +86,7 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
       }]);
     }
     return builder;
-  }).maybeAdd(_plugins.gridPlugin, function (plugin, builder) {
+  }).maybeAdd(_editorPluginGrid.gridPlugin, function (plugin, builder) {
     if (props.media) {
       return builder.add([plugin, {
         shouldCalcBreakoutGridLines: isFullPage

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

@@ -12,13 +12,12 @@ var _react = _interopRequireDefault(require("react"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _utils = require("@atlaskit/editor-common/utils");
-var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
-var _width = require("../width");
 var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
 var _constants = require("./constants");
 var _pluginKey = require("./plugin-key");
 var _findBreakoutNode = require("./utils/find-breakout-node");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _hooks = require("@atlaskit/editor-common/hooks");
 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) { (0, _defineProperty2.default)(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; }
 var BreakoutView = /*#__PURE__*/function () {
@@ -28,14 +27,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;
     (0, _classCallCheck2.default)(this, BreakoutView);
     (0, _defineProperty2.default)(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 = "";
@@ -87,9 +86,11 @@ var BreakoutView = /*#__PURE__*/function () {
     this.mark = mark;
     this.view = view;
     this.contentDOM = contentDOM;
-    this.eventDispatcher = eventDispatcher;
-    eventDispatcher.on(_width.pluginKey.key, this.updateWidth);
-    this.updateWidth(_width.pluginKey.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());
   }
   (0, _createClass2.default)(BreakoutView, [{
     key: "destroy",
@@ -97,7 +98,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(_width.pluginKey.key, this.updateWidth);
+      var _this$unsubscribe;
+      (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
     }
   }]);
   return BreakoutView;
@@ -108,9 +110,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.SafePlugin({
     state: {
       init: function init() {
@@ -139,19 +140,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 = (0, _hooks.useSharedPluginState)(api, ['width', 'breakout']),
+    breakoutState = _useSharedPluginState.breakoutState;
+  return /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
+    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() {
@@ -160,31 +181,29 @@ var breakoutPlugin = function breakoutPlugin(options) {
         mark: _adfSchema.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.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.default.createElement(_WithPluginState.default, {
-        plugins: {
-          breakoutPluginState: _pluginKey.pluginKey,
-          widthPluginState: _width.pluginKey
-        },
-        render: function render(_ref3) {
-          var _breakoutPluginState$;
-          var breakoutPluginState = _ref3.breakoutPluginState;
-          return /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
-            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.default.createElement(LayoutButtonWrapper, {
+        api: api,
+        mountPoint: popupsMountPoint,
+        editorView: editorView,
+        boundariesElement: popupsBoundariesElement,
+        scrollableElement: popupsScrollableElement
       });
     }
   };

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

@@ -166,8 +166,8 @@ var unlinkCard = function unlinkCard(node, state, editorAnalyticsApi) {
     return false;
   };
 };
-var buildAlignmentOptions = function buildAlignmentOptions(state, intl, cardOptions) {
-  return (0, _MediaAndEmbedsToolbar.default)(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 (0, _MediaAndEmbedsToolbar.default)(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 (0, _card.commandWithMetadata)(command, {
@@ -251,7 +251,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/cjs/plugins/collab-edit/plugin-state.js

@@ -116,9 +116,8 @@ 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/cjs/plugins/copy-button/commands.js

@@ -10,10 +10,12 @@ exports.removeMarkVisualFeedbackForCopyButtonCommand = removeMarkVisualFeedbackF
 exports.resetCopiedState = void 0;
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _decoration = require("../base/pm-plugins/decoration");
+var _prosemirrorState = require("prosemirror-state");
 var _clipboard = require("../../utils/clipboard");
 var _utils = require("./utils");
 var _analytics = require("../analytics");
 var _main = require("../clipboard/pm-plugins/main");
+var _utils2 = require("@atlaskit/editor-common/utils");
 function createToolbarCopyCommandForMark(markType) {
   function command(state, dispatch) {
     var textNode = state.tr.selection.$head.parent.maybeChild(state.tr.selection.$head.index());
@@ -130,7 +132,12 @@ var createToolbarCopyCommandForNode = function createToolbarCopyCommandForNode(n
           // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
           div.firstChild.setAttribute('data-pm-slice', '0 0 []');
         }
-        (0, _clipboard.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 (_utils2.browser.safari && state.selection instanceof _prosemirrorState.NodeSelection && state.selection.node.type === state.schema.nodes.extension) {
+          (0, _clipboard.copyHTMLToClipboardPolyfill)(div);
+        } else {
+          (0, _clipboard.copyHTMLToClipboard)(div);
+        }
       }
       copyToClipboardTr.setMeta('scrollIntoView', false);
       dispatch(copyToClipboardTr);

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

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

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

@@ -70,20 +70,22 @@ 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;
 }(_nodeviews.ReactNodeView);
 exports.ExtensionNode = ExtensionNode;
-function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions) {
+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/cjs/plugins/extension/pm-plugins/main.js

@@ -223,9 +223,9 @@ var handleUpdate = function handleUpdate(_ref4) {
   return true;
 };
 exports.handleUpdate = handleUpdate;
-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 = (0, _pluginFactory.createPluginState)(dispatch, {
     showEditButton: false,
     showContextPanel: false
@@ -260,11 +260,11 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
     props: {
       nodeViews: {
         // WARNING: referentiality-plugin also creates these nodeviews
-        extension: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions),
+        extension: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
         // WARNING: referentiality-plugin also creates these nodeviews
-        bodiedExtension: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions),
+        bodiedExtension: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
         // WARNING: referentiality-plugin also creates these nodeviews
-        inlineExtension: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions)
+        inlineExtension: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi)
       },
       handleClickOn: (0, _utils.createSelectionClickHandler)(['extension', 'bodiedExtension'], function (target) {
         return !target.closest('.extension-content');

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

@@ -15,9 +15,9 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _styles = require("./styles");
 var _styles2 = require("../styles");
 var _Lozenge = _interopRequireDefault(require("../Lozenge"));
-var _width = require("../../../../width");
-var _WithPluginState = _interopRequireDefault(require("../../../../../ui/WithPluginState"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _excluded = ["type"];
 /** @jsx jsx */
 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; }
@@ -96,10 +96,37 @@ function ExtensionWithPluginState(props) {
   }))));
 }
 var Extension = function Extension(props) {
-  return (0, _react2.jsx)(_WithPluginState.default, {
+  // 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 ? (0, _react2.jsx)(ExtensionDeprecated, props) : (0, _react2.jsx)(ExtensionWithSharedState, props);
+};
+var ExtensionWithSharedState = function ExtensionWithSharedState(props) {
+  var pluginInjectionApi = props.pluginInjectionApi;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  return (0, _react2.jsx)(ExtensionWithPluginState, (0, _extends2.default)({
+    widthState: widthState
+  }, 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.
+// @ts-ignore
+var widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: function getState(state) {
+    return state['widthPlugin$'];
+  }
+};
+var ExtensionDeprecated = function ExtensionDeprecated(props) {
+  return (0, _react2.jsx)(_withPluginState.WithPluginState, {
     editorView: props.view,
     plugins: {
-      widthState: _width.pluginKey
+      widthState: widthPluginKey
     },
     render: function render(_ref) {
       var widthState = _ref.widthState;
@@ -109,6 +136,9 @@ var Extension = function Extension(props) {
     }
   });
 };
+/**
+ * End workaround
+ */
 var _default = (0, _ui.overflowShadow)(Extension, {
   overflowSelector: '.extension-overflow-wrapper'
 });

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

@@ -181,7 +181,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':
@@ -194,7 +195,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.default.createElement(_InlineExtension.default, {

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

@@ -36,7 +36,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.default.createElement(_ExtensionComponent.default, {
         editorView: editorView,
         node: node,
@@ -45,7 +46,8 @@ var Extension = /*#__PURE__*/function (_Component) {
         extensionProvider: extensionProvider,
         handleContentDOMRef: handleContentDOMRef,
         extensionHandlers: extensionHandlers,
-        editorAppearance: editorAppearance
+        editorAppearance: editorAppearance,
+        pluginInjectionApi: pluginInjectionApi
       });
     });
     _this.providerFactory = props.providerFactory || new _providerFactory.ProviderFactory();

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

@@ -15,7 +15,7 @@ var keymaps = _interopRequireWildcard(require("../../keymaps"));
 var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
 var _HelpDialogLoader = require("./ui/HelpDialogLoader");
 var _quickInsert = require("../quick-insert");
-var _analytics = require("../../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
 var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
 var _commands = require("./commands");
@@ -51,6 +51,7 @@ 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() {
@@ -63,7 +64,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);
         }
       }];
     },
@@ -82,10 +84,11 @@ var helpDialog = function helpDialog() {
               label: ""
             });
           },
-          action: function action(insert, state) {
+          action: function action(insert) {
+            var _api$dependencies$ana2;
             var tr = insert('');
             (0, _commands.openHelpCommand)(tr);
-            return (0, _analytics.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: _analytics.ACTION.HELP_OPENED,
               actionSubject: _analytics.ACTION_SUBJECT.HELP,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.HELP_QUICK_INSERT,
@@ -93,7 +96,8 @@ var helpDialog = function helpDialog() {
                 inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
               },
               eventType: _analytics.EVENT_TYPE.UI
-            });
+            })(tr);
+            return tr;
           }
         }];
       }
@@ -120,13 +124,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.pluginKey);
     if (!isVisible) {
-      tr = (0, _analytics.addAnalytics)(state, tr, {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
         action: _analytics.ACTION.CLICKED,
         actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
         actionSubjectId: _analytics.ACTION_SUBJECT_ID.BUTTON_HELP,
@@ -134,7 +138,7 @@ var keymapPlugin = function keymapPlugin() {
           inputMethod: _analytics.INPUT_METHOD.SHORTCUT
         },
         eventType: _analytics.EVENT_TYPE.UI
-      });
+      })(tr);
       (0, _commands.openHelpCommand)(tr, dispatch);
     }
     return true;