@atlaskit/editor-core 185.1.1 → 185.1.3

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
   });
-}
+});

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import React from 'react';
+import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import Transition from 'react-transition-group/Transition';
 import { N30 } from '@atlaskit/theme/colors';
@@ -11,6 +11,7 @@ import WithPluginState from '../WithPluginState';
 import { pluginKey as contextPanelPluginKey } from '../../plugins/context-panel';
 import WithEditorActions from '../WithEditorActions';
 import { getChildBreakoutModes } from '../../utils/document';
+import { WidthContext } from '@atlaskit/editor-common/ui';
 const ANIM_SPEED_MS = 500;
 const EDITOR_WIDTH = akEditorDefaultLayoutWidth + akEditorBreakoutPadding;
 const WIDE_EDITOR_WIDTH = akEditorWideLayoutWidth + akEditorBreakoutPadding;
@@ -172,6 +173,9 @@ function ContextPanelWithActions({
 }) {
   const eventDispatcher = actions._privateGetEventDispatcher();
   const editorView = actions._privateGetEditorView();
+  const {
+    width
+  } = useContext(WidthContext);
   if (!eventDispatcher) {
     return jsx(SwappableContentArea, _extends({
       editorView: editorView
@@ -190,6 +194,7 @@ function ContextPanelWithActions({
       const firstContent = contextPanel && contextPanel.contents.find(Boolean);
       const editorWidth = {
         ...widthState,
+        containerWidth: width,
         contentBreakoutModes: editorView ? getChildBreakoutModes(editorView.state.doc, editorView.state.schema) : []
       };
       return jsx(SwappableContentArea, _extends({}, props, {

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

@@ -2,9 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { ACTION_SUBJECT } from '../../plugins/analytics';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { whichTransitionEvent } from '../../utils';
 import { ErrorBoundary } from '../ErrorBoundary';
+import { MountPluginHooks } from './mount-plugin-hooks';
 const pluginsComponentsWrapper = css`
   display: flex;
 `;
@@ -76,17 +77,22 @@ export default class PluginSlot extends React.Component {
       containerElement,
       disabled,
       dispatchAnalyticsEvent,
-      wrapperElement
+      wrapperElement,
+      pluginHooks
     } = this.props;
-    if (!items || !editorView) {
+    if (!items && !pluginHooks || !editorView) {
       return null;
     }
     return jsx(ErrorBoundary, {
       component: ACTION_SUBJECT.PLUGIN_SLOT,
       fallbackComponent: null
-    }, jsx("div", {
+    }, jsx(MountPluginHooks, {
+      editorView: editorView,
+      pluginHooks: pluginHooks,
+      containerElement: containerElement
+    }), jsx("div", {
       css: pluginsComponentsWrapper
-    }, items.map((component, key) => {
+    }, items === null || items === void 0 ? void 0 : items.map((component, key) => {
       const props = {
         key
       };

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

@@ -0,0 +1,27 @@
+import React from 'react';
+function MountPluginHook({
+  usePluginHook,
+  editorView,
+  containerElement
+}) {
+  usePluginHook({
+    editorView,
+    containerElement
+  });
+  return null;
+}
+export function MountPluginHooks({
+  pluginHooks,
+  editorView,
+  containerElement
+}) {
+  if (!editorView) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, pluginHooks === null || pluginHooks === void 0 ? void 0 : pluginHooks.map((usePluginHook, key) => /*#__PURE__*/React.createElement(MountPluginHook, {
+    key: key,
+    usePluginHook: usePluginHook,
+    editorView: editorView,
+    containerElement: containerElement
+  })));
+}

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "185.1.1";
+export const version = "185.1.3";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

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

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

@@ -55,6 +55,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);
     }
@@ -73,6 +76,7 @@ export function processPluginsList(plugins) {
     marks: [],
     pmPlugins: [],
     contentComponents: [],
+    pluginHooks: [],
     primaryToolbarComponents: [],
     secondaryToolbarComponents: [],
     onEditorViewStateUpdatedCallbacks: []

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

@@ -136,7 +136,8 @@ export 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
           }));
         }
       }), jsx(PortalRenderer, {

package/dist/esm/test-utils.js

@@ -48,6 +48,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);
     }
@@ -57,6 +60,7 @@ function lightProcessPluginsList(editorPlugins) {
     marks: [],
     plugins: [],
     contentComponents: [],
+    pluginHooks: [],
     onEditorViewStateUpdatedCallbacks: []
   });
 }

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

@@ -50,7 +50,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 jsx(WithFlash, {
         animate: maxContentSizeReached
@@ -75,7 +76,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/esm/ui/Appearance/Comment/Comment.js

@@ -26,7 +26,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';
@@ -86,7 +85,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) {
@@ -157,11 +157,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);
-      })), 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/esm/ui/Appearance/FullPage/FullPage.js

@@ -126,7 +126,8 @@ export 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/esm/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 var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
@@ -46,6 +45,7 @@ var Content = /*#__PURE__*/React.memo(function (props) {
         providerFactory: props.providerFactory,
         appearance: props.appearance,
         items: props.contentComponents,
+        pluginHooks: props.pluginHooks,
         contentArea: props.contentArea,
         popupsMountPoint: props.popupsMountPoint,
         popupsBoundariesElement: props.popupsBoundariesElement,
@@ -58,9 +58,7 @@ var Content = /*#__PURE__*/React.memo(function (props) {
         css: sidebarArea
       }, props.contextPanel || jsx(ContextPanel, {
         visible: false
-      })), jsx(WidthEmitter, {
-        editorView: props.editorView
-      }));
+      })));
     });
   });
 });

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

@@ -16,7 +16,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.
-export var positionedOverEditorStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n  transition: padding 500ms ", ";\n"])), akEditorContextPanelWidth, akEditorSwoopCubicBezier);
+export var positionedOverEditorStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), akEditorContextPanelWidth, akEditorSwoopCubicBezier, akEditorContextPanelWidth, akEditorSwoopCubicBezier);
 export var contentArea = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])), ATLASSIAN_NAVIGATION_HEIGHT, akEditorSwoopCubicBezier);
 export var sidebarArea = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 100%;\n  box-sizing: border-box;\n  align-self: flex-end;\n"])));
 

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

@@ -1,18 +1,43 @@
 import React from 'react';
 import { MobileAppearance } from '../AppearanceComponents/Mobile';
-import WidthEmitter from '../WidthEmitter';
+import PluginSlot from '../PluginSlot';
 export default 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.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/esm/ui/AppearanceComponents/Mobile.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 /** @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';
@@ -12,7 +12,7 @@ import { ClickAreaMobile as ClickArea } from '../Addon';
 var mobileEditor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
-export function MobileAppearance(_ref) {
+export var MobileAppearance = /*#__PURE__*/forwardRef(function MobileAppearance(_ref, ref) {
   var editorView = _ref.editorView,
     persistScrollGutter = _ref.persistScrollGutter,
     children = _ref.children,
@@ -49,7 +49,8 @@ export function MobileAppearance(_ref) {
     return jsx(WithFlash, {
       animate: maxContentSizeReached
     }, jsx("div", {
-      css: mobileEditor
+      css: mobileEditor,
+      ref: ref
     }, jsx(ClickArea, {
       editorView: editorView || undefined,
       minHeight: minHeight,
@@ -59,7 +60,7 @@ export function MobileAppearance(_ref) {
     }, 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,
@@ -67,4 +68,4 @@ export function MobileAppearance(_ref) {
     },
     render: render
   });
-}
+});

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

@@ -15,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
-import React from 'react';
+import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import Transition from 'react-transition-group/Transition';
 import { N30 } from '@atlaskit/theme/colors';
@@ -25,6 +25,7 @@ import WithPluginState from '../WithPluginState';
 import { pluginKey as contextPanelPluginKey } from '../../plugins/context-panel';
 import WithEditorActions from '../WithEditorActions';
 import { getChildBreakoutModes } from '../../utils/document';
+import { WidthContext } from '@atlaskit/editor-common/ui';
 var ANIM_SPEED_MS = 500;
 var EDITOR_WIDTH = akEditorDefaultLayoutWidth + akEditorBreakoutPadding;
 var WIDE_EDITOR_WIDTH = akEditorWideLayoutWidth + akEditorBreakoutPadding;
@@ -174,6 +175,8 @@ function ContextPanelWithActions(_ref2) {
     props = _objectWithoutProperties(_ref2, _excluded);
   var eventDispatcher = actions._privateGetEventDispatcher();
   var editorView = actions._privateGetEditorView();
+  var _useContext = useContext(WidthContext),
+    width = _useContext.width;
   if (!eventDispatcher) {
     return jsx(SwappableContentArea, _extends({
       editorView: editorView
@@ -190,6 +193,7 @@ function ContextPanelWithActions(_ref2) {
         widthState = _ref3.widthState;
       var firstContent = contextPanel && contextPanel.contents.find(Boolean);
       var editorWidth = _objectSpread(_objectSpread({}, widthState), {}, {
+        containerWidth: width,
         contentBreakoutModes: editorView ? getChildBreakoutModes(editorView.state.doc, editorView.state.schema) : []
       });
       return jsx(SwappableContentArea, _extends({}, props, {

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

@@ -12,9 +12,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { ACTION_SUBJECT } from '../../plugins/analytics';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { whichTransitionEvent } from '../../utils';
 import { ErrorBoundary } from '../ErrorBoundary';
+import { MountPluginHooks } from './mount-plugin-hooks';
 var pluginsComponentsWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 var PluginSlot = /*#__PURE__*/function (_React$Component) {
   _inherits(PluginSlot, _React$Component);
@@ -101,16 +102,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 jsx(ErrorBoundary, {
         component: ACTION_SUBJECT.PLUGIN_SLOT,
         fallbackComponent: null
-      }, jsx("div", {
+      }, jsx(MountPluginHooks, {
+        editorView: editorView,
+        pluginHooks: pluginHooks,
+        containerElement: containerElement
+      }), 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/esm/ui/PluginSlot/mount-plugin-hooks.js

@@ -0,0 +1,27 @@
+import React from 'react';
+function MountPluginHook(_ref) {
+  var usePluginHook = _ref.usePluginHook,
+    editorView = _ref.editorView,
+    containerElement = _ref.containerElement;
+  usePluginHook({
+    editorView: editorView,
+    containerElement: containerElement
+  });
+  return null;
+}
+export function MountPluginHooks(_ref2) {
+  var pluginHooks = _ref2.pluginHooks,
+    editorView = _ref2.editorView,
+    containerElement = _ref2.containerElement;
+  if (!editorView) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, pluginHooks === null || pluginHooks === void 0 ? void 0 : pluginHooks.map(function (usePluginHook, key) {
+    return /*#__PURE__*/React.createElement(MountPluginHook, {
+      key: key,
+      usePluginHook: usePluginHook,
+      editorView: editorView,
+      containerElement: containerElement
+    });
+  }));
+}

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "185.1.1";
+export var version = "185.1.3";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

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

package/dist/types/create-editor/get-plugins.d.ts

@@ -7,7 +7,7 @@ import { MarkConfig, NodeConfig } from '../types/pm-config';
 import { EditorReactContext } from '../types/editor-react-context';
 import { FeatureFlags } from '../types/feature-flags';
 import { IntlShape } from 'react-intl-next';
-import { UIComponentFactory } from '@atlaskit/editor-common/types';
+import type { UIComponentFactory, ReactHookFactory } from '@atlaskit/editor-common/types';
 export type LightPMPluginFactoryParams = {
     schema: Schema;
     dispatch: Dispatch;
@@ -38,6 +38,7 @@ export interface LightEditorPlugin {
     nodes?: () => NodeConfig[];
     pmPlugins?: (pluginOptions?: any) => Array<LightPMPlugin>;
     contentComponent?: UIComponentFactory;
+    usePluginHook?: ReactHookFactory;
     pluginsOptions?: Record<string, any>;
     onEditorViewStateUpdated?: OnEditorViewStateUpdated;
 }

package/dist/types/test-utils.d.ts

@@ -8,12 +8,13 @@ export type { LightEditorPlugin } from './create-editor/get-plugins';
 export type { DispatchAnalyticsEvent } from './plugins/analytics/types';
 export type { FeatureFlags } from './types/feature-flags';
 import { EditorPresetBuilder, type EditorPluginInjectionAPI } from '@atlaskit/editor-common/preset';
-import type { AllEditorPresetPluginTypes, UIComponentFactory } from '@atlaskit/editor-common/types';
+import type { AllEditorPresetPluginTypes, UIComponentFactory, ReactHookFactory } from '@atlaskit/editor-common/types';
 export interface LightEditorConfig {
     nodes: NodeConfig[];
     marks: MarkConfig[];
     plugins: Array<LightPMPlugin>;
     contentComponents: UIComponentFactory[];
+    pluginHooks: ReactHookFactory[];
     onEditorViewStateUpdatedCallbacks: Array<OnEditorViewStateUpdated>;
 }
 export declare function getFireAnalytics(editorView: EditorView): any;

package/dist/types/types/editor-appearance-component.d.ts

@@ -8,11 +8,12 @@ import { UIComponentFactory } from '../types/ui-components';
 import { ReactComponents, PrimaryToolbarComponents, UseStickyToolbarType } from '../types/editor-props';
 import { ToolbarUIComponentFactory } from '../ui/Toolbar/types';
 import { CollabEditOptions } from '../plugins/collab-edit/types';
-import { DispatchAnalyticsEvent } from '../plugins/analytics';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { EditorAppearance } from './editor-appearance';
 import { MenuItem } from '../ui/DropdownMenu/types';
 import { ReactElement } from 'react';
 import { FeatureFlags } from './feature-flags';
+import type { ReactHookFactory } from '@atlaskit/editor-common/types';
 export interface EditorAppearanceComponentProps {
     appearance?: EditorAppearance;
     onSave?: (editorView: EditorView) => void;
@@ -26,6 +27,7 @@ export interface EditorAppearanceComponentProps {
     maxHeight?: number;
     minHeight?: number;
     contentComponents?: UIComponentFactory[];
+    pluginHooks?: ReactHookFactory[];
     primaryToolbarComponents?: ToolbarUIComponentFactory[];
     primaryToolbarIconBefore?: ReactElement;
     secondaryToolbarComponents?: UIComponentFactory[];

package/dist/types/types/editor-config.d.ts

@@ -2,7 +2,7 @@ import { ToolbarUIComponentFactory } from '../ui/Toolbar/types';
 import { Transaction, EditorState } from 'prosemirror-state';
 import { PMPlugin } from './pm-plugin';
 import { MarkConfig, NodeConfig } from './pm-config';
-import { UIComponentFactory } from './ui-components';
+import type { UIComponentFactory, ReactHookFactory } from '@atlaskit/editor-common/types';
 type EditorViewStateUpdatedCallbackProps = {
     readonly originalTransaction: Readonly<Transaction>;
     readonly transactions: Transaction[];
@@ -14,6 +14,7 @@ export interface EditorConfig {
     marks: MarkConfig[];
     pmPlugins: Array<PMPlugin>;
     contentComponents: UIComponentFactory[];
+    pluginHooks: ReactHookFactory[];
     primaryToolbarComponents: ToolbarUIComponentFactory[];
     secondaryToolbarComponents: UIComponentFactory[];
     onEditorViewStateUpdatedCallbacks: Array<{

package/dist/types/ui/Appearance/FullPage/FullPageContentArea.d.ts

@@ -5,11 +5,13 @@ import { WrappedComponentProps } from 'react-intl-next';
 import EditorActions from '../../../actions';
 import { EventDispatcher } from '../../../event-dispatcher';
 import { ReactComponents, EditorAppearance, UIComponentFactory } from '../../../types';
-import { DispatchAnalyticsEvent } from '../../../plugins/analytics';
+import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { ReactHookFactory } from '@atlaskit/editor-common/types';
 interface FullPageEditorContentAreaProps {
     appearance: EditorAppearance | undefined;
     contentArea: HTMLElement | undefined;
     contentComponents: UIComponentFactory[] | undefined;
+    pluginHooks: ReactHookFactory[] | undefined;
     contextPanel: ReactComponents | undefined;
     customContentComponents: ReactComponents | undefined;
     disabled: boolean | undefined;

package/dist/types/ui/Appearance/Mobile.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { EditorAppearanceComponentProps } from '../../types';
-export default function Mobile({ editorView, maxHeight, persistScrollGutter, editorDOMElement, disabled, }: EditorAppearanceComponentProps): JSX.Element;
+export default function Mobile({ editorView, maxHeight, persistScrollGutter, editorDOMElement, disabled, contentComponents, editorActions, eventDispatcher, dispatchAnalyticsEvent, providerFactory, appearance, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, innerRef, pluginHooks, }: EditorAppearanceComponentProps): JSX.Element;

package/dist/types/ui/AppearanceComponents/Mobile.d.ts

@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/react';
 import { EditorView } from 'prosemirror-view';
-type MobileAppearanceProps = React.PropsWithChildren<{
+export declare const MobileAppearance: React.ForwardRefExoticComponent<{
     editorView: EditorView | null;
-    maxHeight?: number;
-    persistScrollGutter?: boolean;
-    editorDisabled?: boolean;
-}>;
-export declare function MobileAppearance({ editorView, persistScrollGutter, children, editorDisabled, }: MobileAppearanceProps): jsx.JSX.Element;
-export {};
+    maxHeight?: number | undefined;
+    persistScrollGutter?: boolean | undefined;
+    editorDisabled?: boolean | undefined;
+    children?: React.ReactNode;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;