@atlaskit/editor-core 185.1.2 → 185.1.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-core
 
+## 185.1.3
+
+### Patch Changes
+
+- [`7cd4abcdc0d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7cd4abcdc0d) - Fix workaround in `editor-plugin-width`. This involved removing `WidthEmitter` in `editor-core`, removing `containerWidth` from `WidthPluginState`. This change also introduces `usePluginHook` for an `EditorPlugin` - this enables a react hook to be mounted for plugins (in all appearances).
+- Updated dependencies
+
 ## 185.1.2
 
 ### Patch Changes

package/dist/cjs/create-editor/create-editor.js

@@ -66,6 +66,9 @@ function processPluginsList(plugins) {
     if (plugin.contentComponent) {
       acc.contentComponents.push(plugin.contentComponent);
     }
+    if (plugin.usePluginHook) {
+      acc.pluginHooks.push(plugin.usePluginHook);
+    }
     if (plugin.primaryToolbarComponent) {
       acc.primaryToolbarComponents.push(plugin.primaryToolbarComponent);
     }
@@ -84,6 +87,7 @@ function processPluginsList(plugins) {
     marks: [],
     pmPlugins: [],
     contentComponents: [],
+    pluginHooks: [],
     primaryToolbarComponents: [],
     secondaryToolbarComponents: [],
     onEditorViewStateUpdatedCallbacks: []

package/dist/cjs/editor-next/editor-internal.js

@@ -142,7 +142,8 @@ function EditorInternalWithoutHooks(_ref) {
             persistScrollGutter: props.persistScrollGutter,
             enableToolbarMinWidth: ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.toolbarMinWidthOverflow) != null ? !!((_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.toolbarMinWidthOverflow) : props.allowUndoRedoButtons,
             useStickyToolbar: props.useStickyToolbar,
-            featureFlags: featureFlags
+            featureFlags: featureFlags,
+            pluginHooks: config.pluginHooks
           }));
         }
       }), (0, _react.jsx)(_PortalProvider.PortalRenderer, {

package/dist/cjs/test-utils.js

@@ -91,6 +91,9 @@ function lightProcessPluginsList(editorPlugins) {
     if (editorPlugin.contentComponent) {
       acc.contentComponents.push(editorPlugin.contentComponent);
     }
+    if (editorPlugin.usePluginHook) {
+      acc.pluginHooks.push(editorPlugin.usePluginHook);
+    }
     if (editorPlugin.onEditorViewStateUpdated) {
       acc.onEditorViewStateUpdatedCallbacks.push(editorPlugin.onEditorViewStateUpdated);
     }
@@ -100,6 +103,7 @@ function lightProcessPluginsList(editorPlugins) {
     marks: [],
     plugins: [],
     contentComponents: [],
+    pluginHooks: [],
     onEditorViewStateUpdatedCallbacks: []
   });
 }

package/dist/cjs/ui/Appearance/Chromeless.js

@@ -57,7 +57,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         popupsBoundariesElement = _this$props.popupsBoundariesElement,
         popupsScrollableElement = _this$props.popupsScrollableElement,
         disabled = _this$props.disabled,
-        dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent;
+        dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
+        pluginHooks = _this$props.pluginHooks;
       var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
       return (0, _react2.jsx)(_WithFlash.default, {
         animate: maxContentSizeReached
@@ -82,7 +83,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         containerElement: _this.containerElement,
         disabled: !!disabled,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        wrapperElement: _this.containerElement
+        wrapperElement: _this.containerElement,
+        pluginHooks: pluginHooks
       }), editorDOMElement)));
     });
     return _this;

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

@@ -29,7 +29,6 @@ var _commonStyles = require("@atlaskit/editor-plugin-table/ui/common-styles");
 var _WithFlash = _interopRequireDefault(require("../../WithFlash"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _WidthEmitter = _interopRequireDefault(require("../../WidthEmitter"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactIntlNext = require("react-intl-next");
@@ -93,7 +92,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         disabled = _this$props.disabled,
         dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
         intl = _this$props.intl,
-        useStickyToolbar = _this$props.useStickyToolbar;
+        useStickyToolbar = _this$props.useStickyToolbar,
+        pluginHooks = _this$props.pluginHooks;
       var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
       var showSecondaryToolbar = !!onSave || !!onCancel || !!customSecondaryToolbarComponents;
       var isShortcutToFocusToolbar = function isShortcutToFocusToolbar(event) {
@@ -164,11 +164,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           popupsScrollableElement: popupsScrollableElement,
           containerElement: _this.containerElement,
           disabled: !!disabled,
-          wrapperElement: _this.wrapperElementRef.current
+          wrapperElement: _this.wrapperElementRef.current,
+          pluginHooks: pluginHooks
         }), editorDOMElement);
-      })), (0, _react2.jsx)(_WidthEmitter.default, {
-        editorView: editorView
-      })), showSecondaryToolbar && (0, _react2.jsx)("div", {
+      }))), showSecondaryToolbar && (0, _react2.jsx)("div", {
         css: secondaryToolbarStyle,
         "data-testid": "ak-editor-secondary-toolbar"
       }, (0, _react2.jsx)(_buttonGroup.default, null, !!onSave && (0, _react2.jsx)(_customThemeButton.default, {

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

@@ -132,7 +132,8 @@ var FullPageEditor = /*#__PURE__*/function (_React$Component) {
         providerFactory: props.providerFactory,
         scrollContainer: this.scrollContainer,
         scrollContainerRef: this.scrollContainerRef,
-        wrapperElement: this.wrapperElementRef.current
+        wrapperElement: this.wrapperElementRef.current,
+        pluginHooks: props.pluginHooks
       })));
     }
   }]);

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

@@ -12,7 +12,6 @@ var _reactIntlNext = require("react-intl-next");
 var _Addon = require("../../Addon");
 var _ContextPanel = _interopRequireDefault(require("../../ContextPanel"));
 var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
-var _WidthEmitter = _interopRequireDefault(require("../../WidthEmitter"));
 var _StyledComponents = require("./StyledComponents");
 var _messages = _interopRequireDefault(require("./messages"));
 /** @jsx jsx */
@@ -54,6 +53,7 @@ var Content = /*#__PURE__*/_react2.default.memo(function (props) {
         providerFactory: props.providerFactory,
         appearance: props.appearance,
         items: props.contentComponents,
+        pluginHooks: props.pluginHooks,
         contentArea: props.contentArea,
         popupsMountPoint: props.popupsMountPoint,
         popupsBoundariesElement: props.popupsBoundariesElement,
@@ -66,9 +66,7 @@ var Content = /*#__PURE__*/_react2.default.memo(function (props) {
         css: _StyledComponents.sidebarArea
       }, props.contextPanel || (0, _react.jsx)(_ContextPanel.default, {
         visible: false
-      })), (0, _react.jsx)(_WidthEmitter.default, {
-        editorView: props.editorView
-      }));
+      })));
     });
   });
 });

package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js

@@ -25,7 +25,7 @@ ScrollContainer.displayName = 'ScrollContainer';
 
 // transition used to match scrollbar with config panel opening animation
 // only use animation when opening as there is a bug with floating toolbars.
-var positionedOverEditorStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", "px;\n  transition: padding 500ms ", ";\n"])), _editorSharedStyles.akEditorContextPanelWidth, _editorSharedStyles.akEditorSwoopCubicBezier);
+var positionedOverEditorStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding-right: ", "px;\n  transition: padding 500ms ", ";\n\n  .fabric-editor-popup-scroll-parent {\n    padding-left: ", "px;\n    transition: padding 500ms ", ";\n  }\n"])), _editorSharedStyles.akEditorContextPanelWidth, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorContextPanelWidth, _editorSharedStyles.akEditorSwoopCubicBezier);
 exports.positionedOverEditorStyle = positionedOverEditorStyle;
 var contentArea = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  height: calc(100% - ", ");\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  transition: padding 0ms ", ";\n"])), _editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT, _editorSharedStyles.akEditorSwoopCubicBezier);
 exports.contentArea = contentArea;

package/dist/cjs/ui/Appearance/Mobile.js

@@ -7,19 +7,44 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Mobile;
 var _react = _interopRequireDefault(require("react"));
 var _Mobile = require("../AppearanceComponents/Mobile");
-var _WidthEmitter = _interopRequireDefault(require("../WidthEmitter"));
+var _PluginSlot = _interopRequireDefault(require("../PluginSlot"));
 function Mobile(_ref) {
+  var _innerRef$current;
   var editorView = _ref.editorView,
     maxHeight = _ref.maxHeight,
     persistScrollGutter = _ref.persistScrollGutter,
     editorDOMElement = _ref.editorDOMElement,
-    disabled = _ref.disabled;
+    disabled = _ref.disabled,
+    contentComponents = _ref.contentComponents,
+    editorActions = _ref.editorActions,
+    eventDispatcher = _ref.eventDispatcher,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    providerFactory = _ref.providerFactory,
+    appearance = _ref.appearance,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    innerRef = _ref.innerRef,
+    pluginHooks = _ref.pluginHooks;
   return /*#__PURE__*/_react.default.createElement(_Mobile.MobileAppearance, {
+    ref: innerRef,
     editorView: editorView || null,
     maxHeight: maxHeight,
     persistScrollGutter: persistScrollGutter,
     editorDisabled: disabled
-  }, editorDOMElement, editorView && /*#__PURE__*/_react.default.createElement(_WidthEmitter.default, {
-    editorView: editorView
+  }, editorDOMElement, /*#__PURE__*/_react.default.createElement(_PluginSlot.default, {
+    editorView: editorView,
+    editorActions: editorActions,
+    eventDispatcher: eventDispatcher,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    providerFactory: providerFactory,
+    appearance: appearance,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    containerElement: (_innerRef$current = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) !== null && _innerRef$current !== void 0 ? _innerRef$current : null,
+    disabled: !!disabled,
+    wrapperElement: null,
+    pluginHooks: pluginHooks
   }));
 }

package/dist/cjs/ui/AppearanceComponents/Mobile.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MobileAppearance = MobileAppearance;
+exports.MobileAppearance = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
@@ -22,7 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var mobileEditor = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 30px;\n  width: 100%;\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"])));
 var ContentArea = (0, _ContentStyles.createEditorContentStyle)();
 ContentArea.displayName = 'ContentArea';
-function MobileAppearance(_ref) {
+var MobileAppearance = /*#__PURE__*/(0, _react.forwardRef)(function MobileAppearance(_ref, ref) {
   var editorView = _ref.editorView,
     persistScrollGutter = _ref.persistScrollGutter,
     children = _ref.children,
@@ -59,7 +59,8 @@ function MobileAppearance(_ref) {
     return (0, _react2.jsx)(_WithFlash.default, {
       animate: maxContentSizeReached
     }, (0, _react2.jsx)("div", {
-      css: mobileEditor
+      css: mobileEditor,
+      ref: ref
     }, (0, _react2.jsx)(_Addon.ClickAreaMobile, {
       editorView: editorView || undefined,
       minHeight: minHeight,
@@ -69,7 +70,7 @@ function MobileAppearance(_ref) {
     }, (0, _react2.jsx)(ContentArea, null, (0, _react2.jsx)("div", {
       className: "ak-editor-content-area"
     }, children)))));
-  }, [children, editorView, persistScrollGutter, editorDisabled]);
+  }, [children, editorView, persistScrollGutter, editorDisabled, ref]);
   return (0, _react2.jsx)(_WithPluginState.default, {
     plugins: {
       maxContentSize: _maxContentSize.pluginKey,
@@ -77,4 +78,5 @@ function MobileAppearance(_ref) {
     },
     render: render
   });
-}
+});
+exports.MobileAppearance = MobileAppearance;

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +18,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
 var _colors = require("@atlaskit/theme/colors");
@@ -30,6 +31,8 @@ var _document = require("../../utils/document");
 var _excluded = ["actions"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -185,6 +188,8 @@ function ContextPanelWithActions(_ref2) {
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var eventDispatcher = actions._privateGetEventDispatcher();
   var editorView = actions._privateGetEditorView();
+  var _useContext = (0, _react.useContext)(_ui.WidthContext),
+    width = _useContext.width;
   if (!eventDispatcher) {
     return (0, _react2.jsx)(SwappableContentArea, (0, _extends2.default)({
       editorView: editorView
@@ -201,6 +206,7 @@ function ContextPanelWithActions(_ref2) {
         widthState = _ref3.widthState;
       var firstContent = contextPanel && contextPanel.contents.find(Boolean);
       var editorWidth = _objectSpread(_objectSpread({}, widthState), {}, {
+        containerWidth: width,
         contentBreakoutModes: editorView ? (0, _document.getChildBreakoutModes)(editorView.state.doc, editorView.state.schema) : []
       });
       return (0, _react2.jsx)(SwappableContentArea, (0, _extends2.default)({}, props, {

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

@@ -15,9 +15,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _analytics = require("../../plugins/analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("../../utils");
 var _ErrorBoundary = require("../ErrorBoundary");
+var _mountPluginHooks = require("./mount-plugin-hooks");
 var _templateObject;
 /** @jsx jsx */
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -108,16 +109,21 @@ var PluginSlot = /*#__PURE__*/function (_React$Component) {
         containerElement = _this$props2.containerElement,
         disabled = _this$props2.disabled,
         dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent,
-        wrapperElement = _this$props2.wrapperElement;
-      if (!items || !editorView) {
+        wrapperElement = _this$props2.wrapperElement,
+        pluginHooks = _this$props2.pluginHooks;
+      if (!items && !pluginHooks || !editorView) {
         return null;
       }
       return (0, _react2.jsx)(_ErrorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.PLUGIN_SLOT,
         fallbackComponent: null
-      }, (0, _react2.jsx)("div", {
+      }, (0, _react2.jsx)(_mountPluginHooks.MountPluginHooks, {
+        editorView: editorView,
+        pluginHooks: pluginHooks,
+        containerElement: containerElement
+      }), (0, _react2.jsx)("div", {
         css: pluginsComponentsWrapper
-      }, items.map(function (component, key) {
+      }, items === null || items === void 0 ? void 0 : items.map(function (component, key) {
         var props = {
           key: key
         };

package/dist/cjs/ui/PluginSlot/mount-plugin-hooks.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MountPluginHooks = MountPluginHooks;
+var _react = _interopRequireDefault(require("react"));
+function MountPluginHook(_ref) {
+  var usePluginHook = _ref.usePluginHook,
+    editorView = _ref.editorView,
+    containerElement = _ref.containerElement;
+  usePluginHook({
+    editorView: editorView,
+    containerElement: containerElement
+  });
+  return null;
+}
+function MountPluginHooks(_ref2) {
+  var pluginHooks = _ref2.pluginHooks,
+    editorView = _ref2.editorView,
+    containerElement = _ref2.containerElement;
+  if (!editorView) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pluginHooks === null || pluginHooks === void 0 ? void 0 : pluginHooks.map(function (usePluginHook, key) {
+    return /*#__PURE__*/_react.default.createElement(MountPluginHook, {
+      key: key,
+      usePluginHook: usePluginHook,
+      editorView: editorView,
+      containerElement: containerElement
+    });
+  }));
+}

package/dist/cjs/version-wrapper.js

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

package/dist/cjs/version.json

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

package/dist/es2019/create-editor/create-editor.js

@@ -47,6 +47,9 @@ export function processPluginsList(plugins) {
     if (plugin.contentComponent) {
       acc.contentComponents.push(plugin.contentComponent);
     }
+    if (plugin.usePluginHook) {
+      acc.pluginHooks.push(plugin.usePluginHook);
+    }
     if (plugin.primaryToolbarComponent) {
       acc.primaryToolbarComponents.push(plugin.primaryToolbarComponent);
     }
@@ -65,6 +68,7 @@ export function processPluginsList(plugins) {
     marks: [],
     pmPlugins: [],
     contentComponents: [],
+    pluginHooks: [],
     primaryToolbarComponents: [],
     secondaryToolbarComponents: [],
     onEditorViewStateUpdatedCallbacks: []

package/dist/es2019/editor-next/editor-internal.js

@@ -138,7 +138,8 @@ export function EditorInternalWithoutHooks({
           persistScrollGutter: props.persistScrollGutter,
           enableToolbarMinWidth: ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.toolbarMinWidthOverflow) != null ? !!((_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.toolbarMinWidthOverflow) : props.allowUndoRedoButtons,
           useStickyToolbar: props.useStickyToolbar,
-          featureFlags: featureFlags
+          featureFlags: featureFlags,
+          pluginHooks: config.pluginHooks
         }));
       }
     }), jsx(PortalRenderer, {

package/dist/es2019/test-utils.js

@@ -41,6 +41,9 @@ function lightProcessPluginsList(editorPlugins) {
     if (editorPlugin.contentComponent) {
       acc.contentComponents.push(editorPlugin.contentComponent);
     }
+    if (editorPlugin.usePluginHook) {
+      acc.pluginHooks.push(editorPlugin.usePluginHook);
+    }
     if (editorPlugin.onEditorViewStateUpdated) {
       acc.onEditorViewStateUpdatedCallbacks.push(editorPlugin.onEditorViewStateUpdated);
     }
@@ -50,6 +53,7 @@ function lightProcessPluginsList(editorPlugins) {
     marks: [],
     plugins: [],
     contentComponents: [],
+    pluginHooks: [],
     onEditorViewStateUpdatedCallbacks: []
   });
 }

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

@@ -54,7 +54,8 @@ export default class Editor extends React.Component {
         popupsBoundariesElement,
         popupsScrollableElement,
         disabled,
-        dispatchAnalyticsEvent
+        dispatchAnalyticsEvent,
+        pluginHooks
       } = this.props;
       const maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
       return jsx(WithFlash, {
@@ -82,7 +83,8 @@ export default class Editor extends React.Component {
         containerElement: this.containerElement,
         disabled: !!disabled,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        wrapperElement: this.containerElement
+        wrapperElement: this.containerElement,
+        pluginHooks: pluginHooks
       }), editorDOMElement)));
     });
   }

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

@@ -16,7 +16,6 @@ import { tableCommentEditorStyles } from '@atlaskit/editor-plugin-table/ui/commo
 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 '@atlaskit/editor-common/styles';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
@@ -119,7 +118,8 @@ class Editor extends React.Component {
         disabled,
         dispatchAnalyticsEvent,
         intl,
-        useStickyToolbar
+        useStickyToolbar,
+        pluginHooks
       } = this.props;
       const maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
       const showSecondaryToolbar = !!onSave || !!onCancel || !!customSecondaryToolbarComponents;
@@ -194,11 +194,10 @@ class Editor extends React.Component {
           popupsScrollableElement: popupsScrollableElement,
           containerElement: this.containerElement,
           disabled: !!disabled,
-          wrapperElement: this.wrapperElementRef.current
+          wrapperElement: this.wrapperElementRef.current,
+          pluginHooks: pluginHooks
         }), editorDOMElement);
-      })), jsx(WidthEmitter, {
-        editorView: editorView
-      })), showSecondaryToolbar && jsx("div", {
+      }))), showSecondaryToolbar && jsx("div", {
         css: secondaryToolbarStyle,
         "data-testid": "ak-editor-secondary-toolbar"
       }, jsx(ButtonGroup, null, !!onSave && jsx(Button, {

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

@@ -113,7 +113,8 @@ export class FullPageEditor extends React.Component {
       providerFactory: props.providerFactory,
       scrollContainer: this.scrollContainer,
       scrollContainerRef: this.scrollContainerRef,
-      wrapperElement: this.wrapperElementRef.current
+      wrapperElement: this.wrapperElementRef.current,
+      pluginHooks: props.pluginHooks
     })));
   }
 }

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

@@ -7,7 +7,6 @@ import { injectIntl } from 'react-intl-next';
 import { ClickAreaBlock } from '../../Addon';
 import ContextPanel from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
-import WidthEmitter from '../../WidthEmitter';
 import { contentArea, editorContentAreaStyle, sidebarArea, ScrollContainer, editorContentGutterStyle, positionedOverEditorStyle } from './StyledComponents';
 import messages from './messages';
 export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
@@ -46,6 +45,7 @@ const Content = /*#__PURE__*/React.memo(props => {
     providerFactory: props.providerFactory,
     appearance: props.appearance,
     items: props.contentComponents,
+    pluginHooks: props.pluginHooks,
     contentArea: props.contentArea,
     popupsMountPoint: props.popupsMountPoint,
     popupsBoundariesElement: props.popupsBoundariesElement,
@@ -58,8 +58,6 @@ const Content = /*#__PURE__*/React.memo(props => {
     css: sidebarArea
   }, props.contextPanel || jsx(ContextPanel, {
     visible: false
-  })), jsx(WidthEmitter, {
-    editorView: props.editorView
-  }))));
+  })))));
 });
 export const FullPageContentArea = injectIntl(Content);

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

@@ -30,8 +30,13 @@ ScrollContainer.displayName = 'ScrollContainer';
 // transition used to match scrollbar with config panel opening animation
 // only use animation when opening as there is a bug with floating toolbars.
 export const positionedOverEditorStyle = css`
-  padding: 0 ${akEditorContextPanelWidth}px;
+  padding-right: ${akEditorContextPanelWidth}px;
   transition: padding 500ms ${akEditorSwoopCubicBezier};
+
+  .fabric-editor-popup-scroll-parent {
+    padding-left: ${akEditorContextPanelWidth}px;
+    transition: padding 500ms ${akEditorSwoopCubicBezier};
+  }
 `;
 export const contentArea = css`
   display: flex;

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

@@ -1,19 +1,44 @@
 import React from 'react';
 import { MobileAppearance } from '../AppearanceComponents/Mobile';
-import WidthEmitter from '../WidthEmitter';
+import PluginSlot from '../PluginSlot';
 export default function Mobile({
   editorView,
   maxHeight,
   persistScrollGutter,
   editorDOMElement,
-  disabled
+  disabled,
+  contentComponents,
+  editorActions,
+  eventDispatcher,
+  dispatchAnalyticsEvent,
+  providerFactory,
+  appearance,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  innerRef,
+  pluginHooks
 }) {
+  var _innerRef$current;
   return /*#__PURE__*/React.createElement(MobileAppearance, {
+    ref: innerRef,
     editorView: editorView || null,
     maxHeight: maxHeight,
     persistScrollGutter: persistScrollGutter,
     editorDisabled: disabled
-  }, editorDOMElement, editorView && /*#__PURE__*/React.createElement(WidthEmitter, {
-    editorView: editorView
+  }, editorDOMElement, /*#__PURE__*/React.createElement(PluginSlot, {
+    editorView: editorView,
+    editorActions: editorActions,
+    eventDispatcher: eventDispatcher,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    providerFactory: providerFactory,
+    appearance: appearance,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    containerElement: (_innerRef$current = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) !== null && _innerRef$current !== void 0 ? _innerRef$current : null,
+    disabled: !!disabled,
+    wrapperElement: null,
+    pluginHooks: pluginHooks
   }));
 }

package/dist/es2019/ui/AppearanceComponents/Mobile.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { useCallback } from 'react';
+import React, { useCallback, forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { pluginKey as maxContentSizePluginKey } from '../../plugins/max-content-size';
 import { mobileDimensionsPluginKey } from '../../plugins/mobile-dimensions/plugin-factory';
@@ -23,12 +23,12 @@ const mobileEditor = css`
 `;
 const ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
-export function MobileAppearance({
+export const MobileAppearance = /*#__PURE__*/forwardRef(function MobileAppearance({
   editorView,
   persistScrollGutter,
   children,
   editorDisabled
-}) {
+}, ref) {
   const render = useCallback(({
     maxContentSize,
     mobileDimensions
@@ -64,7 +64,8 @@ export function MobileAppearance({
     return jsx(WithFlash, {
       animate: maxContentSizeReached
     }, jsx("div", {
-      css: mobileEditor
+      css: mobileEditor,
+      ref: ref
     }, jsx(ClickArea, {
       editorView: editorView || undefined,
       minHeight: minHeight,
@@ -74,7 +75,7 @@ export function MobileAppearance({
     }, jsx(ContentArea, null, jsx("div", {
       className: "ak-editor-content-area"
     }, children)))));
-  }, [children, editorView, persistScrollGutter, editorDisabled]);
+  }, [children, editorView, persistScrollGutter, editorDisabled, ref]);
   return jsx(WithPluginState, {
     plugins: {
       maxContentSize: maxContentSizePluginKey,
@@ -82,4 +83,4 @@ export function MobileAppearance({
     },
     render: render
   });
-}
+});