@atlaskit/editor-core 185.8.0 → 185.8.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-core
 
+## 185.8.2
+
+### Patch Changes
+
+- [`5f6168797f7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f6168797f7) - Improve run-time performance of editor on scroll/resizing by using newer APIs for toolbar keyline.
+
 ## 185.8.0
 
 ### Minor Changes

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

@@ -1,144 +1,102 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FullPageEditor = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _rafSchd = _interopRequireDefault(require("raf-schd"));
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _StyledComponents = require("./StyledComponents");
 var _ui = require("@atlaskit/editor-common/ui");
 var _FullPageContentArea = require("./FullPageContentArea");
 var _FullPageToolbar = require("./FullPageToolbar");
-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); }; }
-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 */
-var FullPageEditor = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(FullPageEditor, _React$Component);
-  var _super = _createSuper(FullPageEditor);
-  function FullPageEditor(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, FullPageEditor);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      showKeyline: false
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "scrollContainer", null);
-    // Wrapper container for toolbar and content area
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperElementRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "contentAreaRef", function (contentArea) {
-      _this.contentArea = contentArea;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "scrollContainerRef", function (ref) {
-      var previousScrollContainer = _this.scrollContainer;
+var _utils = require("@atlaskit/editor-common/utils");
+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; }
+/** @jsx jsx */
 
-      // remove existing handler
-      if (previousScrollContainer) {
-        previousScrollContainer.removeEventListener('scroll', _this.updateToolbarKeyline);
-      }
-      _this.scrollContainer = ref ? ref : null;
-      if (_this.scrollContainer) {
-        _this.scrollContainer.addEventListener('scroll', _this.updateToolbarKeyline, false);
-        _this.updateToolbarKeyline();
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateToolbarKeyline", (0, _rafSchd.default)(function () {
-      if (!_this.scrollContainer) {
-        return false;
-      }
-      var scrollTop = _this.scrollContainer.scrollTop;
-      var showKeyline = scrollTop > _editorSharedStyles.akEditorToolbarKeylineHeight;
-      if (showKeyline !== _this.state.showKeyline) {
-        _this.setState({
-          showKeyline: showKeyline
-        });
-      }
-      return false;
-    }));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function () {
-      _this.updateToolbarKeyline();
-    });
-    _this.featureFlags = props.featureFlags;
-    if (props.innerRef) {
-      _this.wrapperElementRef = props.innerRef;
+var useShowKeyline = function useShowKeyline(contentAreaRef) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showKeyline = _useState2[0],
+    setShowKeyline = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var _contentAreaRef$curre;
+    if (!((_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 && _contentAreaRef$curre.contentArea)) {
+      return;
     }
-    return _this;
-  }
-  (0, _createClass2.default)(FullPageEditor, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener('resize', this.handleResize, false);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('resize', this.handleResize);
-      this.updateToolbarKeyline.cancel();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var props = this.props;
-      var showKeyline = this.state.showKeyline;
-      return (0, _react2.jsx)(_ui.ContextPanelWidthProvider, null, (0, _react2.jsx)("div", {
-        css: _StyledComponents.fullPageEditorWrapper,
-        className: "akEditor",
-        ref: this.wrapperElementRef
-      }, (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
-        appearance: props.appearance,
-        beforeIcon: props.primaryToolbarIconBefore,
-        collabEdit: props.collabEdit,
-        containerElement: this.scrollContainer,
-        customPrimaryToolbarComponents: props.customPrimaryToolbarComponents,
-        disabled: !!props.disabled,
-        dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-        editorActions: props.editorActions,
-        editorDOMElement: props.editorDOMElement,
-        editorView: props.editorView,
-        eventDispatcher: props.eventDispatcher,
-        hasMinWidth: props.enableToolbarMinWidth,
-        popupsBoundariesElement: props.popupsBoundariesElement,
-        popupsMountPoint: props.popupsMountPoint,
-        popupsScrollableElement: props.popupsScrollableElement,
-        primaryToolbarComponents: props.primaryToolbarComponents,
-        providerFactory: props.providerFactory,
-        showKeyline: showKeyline,
-        featureFlags: this.featureFlags
-      }), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
-        appearance: props.appearance,
-        contentArea: this.contentArea,
-        contentAreaRef: this.contentAreaRef,
-        contentComponents: props.contentComponents,
-        contextPanel: props.contextPanel,
-        customContentComponents: props.customContentComponents,
-        disabled: props.disabled,
-        dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-        editorActions: props.editorActions,
-        editorDOMElement: props.editorDOMElement,
-        editorView: props.editorView,
-        eventDispatcher: props.eventDispatcher,
-        popupsBoundariesElement: props.popupsBoundariesElement,
-        popupsMountPoint: props.popupsMountPoint,
-        popupsScrollableElement: props.popupsScrollableElement,
-        providerFactory: props.providerFactory,
-        scrollContainer: this.scrollContainer,
-        scrollContainerRef: this.scrollContainerRef,
-        wrapperElement: this.wrapperElementRef.current,
-        pluginHooks: props.pluginHooks,
-        featureFlags: this.featureFlags
-      })));
-    }
-  }]);
-  return FullPageEditor;
-}(_react.default.Component);
-exports.FullPageEditor = FullPageEditor;
-(0, _defineProperty2.default)(FullPageEditor, "displayName", 'FullPageEditor');
+    var intersection = new IntersectionObserver(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+        entry = _ref2[0];
+      setShowKeyline(!entry.isIntersecting && entry.boundingClientRect.top < entry.intersectionRect.top);
+    }, {
+      root: undefined,
+      // Safari seems to miss events (on fast scroll) sometimes due
+      // to differences in IntersectionObserver behaviour between browsers.
+      // By lowering the threshold a little it gives Safari more
+      // time to catch these events.
+      threshold: _utils.browser.safari ? 0.98 : 1
+    });
+    intersection.observe(contentAreaRef.current.contentArea);
+    return function () {
+      intersection.disconnect();
+    };
+  }, [contentAreaRef]);
+  return showKeyline;
+};
+var FullPageEditor = function FullPageEditor(props) {
+  var _scrollContentContain, _scrollContentContain2, _wrapperElementRef$cu;
+  var wrapperElementRef = (0, _react.useMemo)(function () {
+    return props.innerRef;
+  }, [props.innerRef]);
+  var scrollContentContainerRef = (0, _react.useRef)(null);
+  var showKeyline = useShowKeyline(scrollContentContainerRef);
+  return (0, _react2.jsx)(_ui.ContextPanelWidthProvider, null, (0, _react2.jsx)("div", {
+    css: _StyledComponents.fullPageEditorWrapper,
+    className: "akEditor",
+    ref: wrapperElementRef
+  }, (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
+    appearance: props.appearance,
+    beforeIcon: props.primaryToolbarIconBefore,
+    collabEdit: props.collabEdit,
+    containerElement: (_scrollContentContain = (_scrollContentContain2 = scrollContentContainerRef.current) === null || _scrollContentContain2 === void 0 ? void 0 : _scrollContentContain2.scrollContainer) !== null && _scrollContentContain !== void 0 ? _scrollContentContain : null,
+    customPrimaryToolbarComponents: props.customPrimaryToolbarComponents,
+    disabled: !!props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    editorActions: props.editorActions,
+    editorDOMElement: props.editorDOMElement,
+    editorView: props.editorView,
+    eventDispatcher: props.eventDispatcher,
+    hasMinWidth: props.enableToolbarMinWidth,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsScrollableElement: props.popupsScrollableElement,
+    primaryToolbarComponents: props.primaryToolbarComponents,
+    providerFactory: props.providerFactory,
+    showKeyline: showKeyline,
+    featureFlags: props.featureFlags
+  }), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
+    ref: scrollContentContainerRef,
+    appearance: props.appearance,
+    contentComponents: props.contentComponents,
+    contextPanel: props.contextPanel,
+    customContentComponents: props.customContentComponents,
+    disabled: props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    editorActions: props.editorActions,
+    editorDOMElement: props.editorDOMElement,
+    editorView: props.editorView,
+    eventDispatcher: props.eventDispatcher,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsScrollableElement: props.popupsScrollableElement,
+    providerFactory: props.providerFactory,
+    wrapperElement: (_wrapperElementRef$cu = wrapperElementRef === null || wrapperElementRef === void 0 ? void 0 : wrapperElementRef.current) !== null && _wrapperElementRef$cu !== void 0 ? _wrapperElementRef$cu : null,
+    pluginHooks: props.pluginHooks,
+    featureFlags: props.featureFlags
+  })));
+};
+exports.FullPageEditor = FullPageEditor;

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

@@ -1,37 +1,53 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FullPageContentArea = exports.CONTENT_AREA_TEST_ID = void 0;
 var _react = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _Addon = require("../../Addon");
 var _ContextPanel = _interopRequireDefault(require("../../ContextPanel"));
 var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
 var _StyledComponents = require("./StyledComponents");
 var _messages = _interopRequireDefault(require("./messages"));
+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; }
 /** @jsx jsx */
 
 var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 exports.CONTENT_AREA_TEST_ID = CONTENT_AREA_TEST_ID;
-var Content = /*#__PURE__*/_react2.default.memo(function (props) {
+var Content = /*#__PURE__*/_react2.default.forwardRef(function (props, ref) {
   var theme = (0, _react.useTheme)();
   var fullWidthMode = props.appearance === 'full-width';
+  var scrollContainerRef = (0, _react2.useRef)(null);
+  var contentAreaRef = (0, _react2.useRef)(null);
+  (0, _react2.useImperativeHandle)(ref, function () {
+    return {
+      get scrollContainer() {
+        return scrollContainerRef.current;
+      },
+      get contentArea() {
+        return contentAreaRef.current;
+      }
+    };
+  }, []);
   return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
     return (0, _react.jsx)(_ui.ContextPanelConsumer, null, function (_ref2) {
+      var _contentAreaRef$curre;
       var positionedOverEditor = _ref2.positionedOverEditor;
       return (0, _react.jsx)("div", {
         css: [_StyledComponents.contentArea, positionedOverEditor && _StyledComponents.positionedOverEditorStyle],
         "data-testid": CONTENT_AREA_TEST_ID
       }, (0, _react.jsx)(_StyledComponents.ScrollContainer, {
-        ref: props.scrollContainerRef,
         className: "fabric-editor-popup-scroll-parent",
-        featureFlags: props.featureFlags
+        featureFlags: props.featureFlags,
+        ref: scrollContainerRef
       }, (0, _react.jsx)(_Addon.ClickAreaBlock, {
         editorView: props.editorView,
         editorDisabled: props.disabled
@@ -43,10 +59,11 @@ var Content = /*#__PURE__*/_react2.default.memo(function (props) {
         }),
         role: "region",
         "aria-label": props.intl.formatMessage(_messages.default.editableContentLabel),
-        ref: props.contentAreaRef
+        ref: contentAreaRef
       }, (0, _react.jsx)("div", {
         css: _StyledComponents.editorContentGutterStyle,
-        className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' ')
+        className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
+        ref: contentAreaRef
       }, props.customContentComponents, (0, _react.jsx)(_PluginSlot.default, {
         editorView: props.editorView,
         editorActions: props.editorActions,
@@ -55,12 +72,12 @@ var Content = /*#__PURE__*/_react2.default.memo(function (props) {
         appearance: props.appearance,
         items: props.contentComponents,
         pluginHooks: props.pluginHooks,
-        contentArea: props.contentArea,
+        contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
         popupsMountPoint: props.popupsMountPoint,
         popupsBoundariesElement: props.popupsBoundariesElement,
         popupsScrollableElement: props.popupsScrollableElement,
         disabled: !!props.disabled,
-        containerElement: props.scrollContainer,
+        containerElement: scrollContainerRef.current,
         dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
         wrapperElement: props.wrapperElement
       }), props.editorDOMElement)))), (0, _react.jsx)("div", {
@@ -71,5 +88,7 @@ var Content = /*#__PURE__*/_react2.default.memo(function (props) {
     });
   });
 });
-var FullPageContentArea = (0, _reactIntlNext.injectIntl)(Content);
+var FullPageContentArea = (0, _reactIntlNext.injectIntl)(Content, {
+  forwardRef: true
+});
 exports.FullPageContentArea = FullPageContentArea;

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.8.0";
+var version = "185.8.2";
 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.8.0",
+	"version": "185.8.2",
 	"sideEffects": false
 }

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

@@ -1,122 +1,82 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import React from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { jsx } from '@emotion/react';
-import rafSchedule from 'raf-schd';
-import { akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
 import { fullPageEditorWrapper } from './StyledComponents';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
-export class FullPageEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "state", {
-      showKeyline: false
-    });
-    _defineProperty(this, "scrollContainer", null);
-    // Wrapper container for toolbar and content area
-    _defineProperty(this, "wrapperElementRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "contentAreaRef", contentArea => {
-      this.contentArea = contentArea;
-    });
-    _defineProperty(this, "scrollContainerRef", ref => {
-      const previousScrollContainer = this.scrollContainer;
-
-      // remove existing handler
-      if (previousScrollContainer) {
-        previousScrollContainer.removeEventListener('scroll', this.updateToolbarKeyline);
-      }
-      this.scrollContainer = ref ? ref : null;
-      if (this.scrollContainer) {
-        this.scrollContainer.addEventListener('scroll', this.updateToolbarKeyline, false);
-        this.updateToolbarKeyline();
-      }
-    });
-    _defineProperty(this, "updateToolbarKeyline", rafSchedule(() => {
-      if (!this.scrollContainer) {
-        return false;
-      }
-      const {
-        scrollTop
-      } = this.scrollContainer;
-      const showKeyline = scrollTop > akEditorToolbarKeylineHeight;
-      if (showKeyline !== this.state.showKeyline) {
-        this.setState({
-          showKeyline
-        });
-      }
-      return false;
-    }));
-    _defineProperty(this, "handleResize", () => {
-      this.updateToolbarKeyline();
-    });
-    this.featureFlags = props.featureFlags;
-    if (props.innerRef) {
-      this.wrapperElementRef = props.innerRef;
+import { browser } from '@atlaskit/editor-common/utils';
+const useShowKeyline = contentAreaRef => {
+  const [showKeyline, setShowKeyline] = useState(false);
+  useEffect(() => {
+    var _contentAreaRef$curre;
+    if (!((_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 && _contentAreaRef$curre.contentArea)) {
+      return;
     }
-  }
-  componentDidMount() {
-    window.addEventListener('resize', this.handleResize, false);
-  }
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-    this.updateToolbarKeyline.cancel();
-  }
-  render() {
-    const {
-      props
-    } = this;
-    const {
-      showKeyline
-    } = this.state;
-    return jsx(ContextPanelWidthProvider, null, jsx("div", {
-      css: fullPageEditorWrapper,
-      className: "akEditor",
-      ref: this.wrapperElementRef
-    }, jsx(FullPageToolbar, {
-      appearance: props.appearance,
-      beforeIcon: props.primaryToolbarIconBefore,
-      collabEdit: props.collabEdit,
-      containerElement: this.scrollContainer,
-      customPrimaryToolbarComponents: props.customPrimaryToolbarComponents,
-      disabled: !!props.disabled,
-      dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-      editorActions: props.editorActions,
-      editorDOMElement: props.editorDOMElement,
-      editorView: props.editorView,
-      eventDispatcher: props.eventDispatcher,
-      hasMinWidth: props.enableToolbarMinWidth,
-      popupsBoundariesElement: props.popupsBoundariesElement,
-      popupsMountPoint: props.popupsMountPoint,
-      popupsScrollableElement: props.popupsScrollableElement,
-      primaryToolbarComponents: props.primaryToolbarComponents,
-      providerFactory: props.providerFactory,
-      showKeyline: showKeyline,
-      featureFlags: this.featureFlags
-    }), jsx(FullPageContentArea, {
-      appearance: props.appearance,
-      contentArea: this.contentArea,
-      contentAreaRef: this.contentAreaRef,
-      contentComponents: props.contentComponents,
-      contextPanel: props.contextPanel,
-      customContentComponents: props.customContentComponents,
-      disabled: props.disabled,
-      dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-      editorActions: props.editorActions,
-      editorDOMElement: props.editorDOMElement,
-      editorView: props.editorView,
-      eventDispatcher: props.eventDispatcher,
-      popupsBoundariesElement: props.popupsBoundariesElement,
-      popupsMountPoint: props.popupsMountPoint,
-      popupsScrollableElement: props.popupsScrollableElement,
-      providerFactory: props.providerFactory,
-      scrollContainer: this.scrollContainer,
-      scrollContainerRef: this.scrollContainerRef,
-      wrapperElement: this.wrapperElementRef.current,
-      pluginHooks: props.pluginHooks,
-      featureFlags: this.featureFlags
-    })));
-  }
-}
-_defineProperty(FullPageEditor, "displayName", 'FullPageEditor');
+    const intersection = new IntersectionObserver(([entry]) => {
+      setShowKeyline(!entry.isIntersecting && entry.boundingClientRect.top < entry.intersectionRect.top);
+    }, {
+      root: undefined,
+      // Safari seems to miss events (on fast scroll) sometimes due
+      // to differences in IntersectionObserver behaviour between browsers.
+      // By lowering the threshold a little it gives Safari more
+      // time to catch these events.
+      threshold: browser.safari ? 0.98 : 1
+    });
+    intersection.observe(contentAreaRef.current.contentArea);
+    return () => {
+      intersection.disconnect();
+    };
+  }, [contentAreaRef]);
+  return showKeyline;
+};
+export const FullPageEditor = props => {
+  var _scrollContentContain, _scrollContentContain2, _wrapperElementRef$cu;
+  const wrapperElementRef = useMemo(() => props.innerRef, [props.innerRef]);
+  const scrollContentContainerRef = useRef(null);
+  const showKeyline = useShowKeyline(scrollContentContainerRef);
+  return jsx(ContextPanelWidthProvider, null, jsx("div", {
+    css: fullPageEditorWrapper,
+    className: "akEditor",
+    ref: wrapperElementRef
+  }, jsx(FullPageToolbar, {
+    appearance: props.appearance,
+    beforeIcon: props.primaryToolbarIconBefore,
+    collabEdit: props.collabEdit,
+    containerElement: (_scrollContentContain = (_scrollContentContain2 = scrollContentContainerRef.current) === null || _scrollContentContain2 === void 0 ? void 0 : _scrollContentContain2.scrollContainer) !== null && _scrollContentContain !== void 0 ? _scrollContentContain : null,
+    customPrimaryToolbarComponents: props.customPrimaryToolbarComponents,
+    disabled: !!props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    editorActions: props.editorActions,
+    editorDOMElement: props.editorDOMElement,
+    editorView: props.editorView,
+    eventDispatcher: props.eventDispatcher,
+    hasMinWidth: props.enableToolbarMinWidth,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsScrollableElement: props.popupsScrollableElement,
+    primaryToolbarComponents: props.primaryToolbarComponents,
+    providerFactory: props.providerFactory,
+    showKeyline: showKeyline,
+    featureFlags: props.featureFlags
+  }), jsx(FullPageContentArea, {
+    ref: scrollContentContainerRef,
+    appearance: props.appearance,
+    contentComponents: props.contentComponents,
+    contextPanel: props.contextPanel,
+    customContentComponents: props.customContentComponents,
+    disabled: props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    editorActions: props.editorActions,
+    editorDOMElement: props.editorDOMElement,
+    editorView: props.editorView,
+    eventDispatcher: props.eventDispatcher,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsScrollableElement: props.popupsScrollableElement,
+    providerFactory: props.providerFactory,
+    wrapperElement: (_wrapperElementRef$cu = wrapperElementRef === null || wrapperElementRef === void 0 ? void 0 : wrapperElementRef.current) !== null && _wrapperElementRef$cu !== void 0 ? _wrapperElementRef$cu : null,
+    pluginHooks: props.pluginHooks,
+    featureFlags: props.featureFlags
+  })));
+};

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

@@ -2,7 +2,7 @@
 import { jsx, useTheme } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
-import React from 'react';
+import React, { useImperativeHandle, useRef } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { ClickAreaBlock } from '../../Addon';
 import ContextPanel from '../../ContextPanel';
@@ -10,55 +10,71 @@ import PluginSlot from '../../PluginSlot';
 import { contentArea, editorContentAreaStyle, sidebarArea, ScrollContainer, editorContentGutterStyle, positionedOverEditorStyle } from './StyledComponents';
 import messages from './messages';
 export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
-const Content = /*#__PURE__*/React.memo(props => {
+const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
   const theme = useTheme();
   const fullWidthMode = props.appearance === 'full-width';
+  const scrollContainerRef = useRef(null);
+  const contentAreaRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    get scrollContainer() {
+      return scrollContainerRef.current;
+    },
+    get contentArea() {
+      return contentAreaRef.current;
+    }
+  }), []);
   return jsx(WidthConsumer, null, ({
     width
   }) => jsx(ContextPanelConsumer, null, ({
     positionedOverEditor
-  }) => jsx("div", {
-    css: [contentArea, positionedOverEditor && positionedOverEditorStyle],
-    "data-testid": CONTENT_AREA_TEST_ID
-  }, jsx(ScrollContainer, {
-    ref: props.scrollContainerRef,
-    className: "fabric-editor-popup-scroll-parent",
-    featureFlags: props.featureFlags
-  }, jsx(ClickAreaBlock, {
-    editorView: props.editorView,
-    editorDisabled: props.disabled
-  }, jsx("div", {
-    css: editorContentAreaStyle({
-      fullWidthMode,
-      layoutMaxWidth: theme.layoutMaxWidth,
-      containerWidth: width
-    }),
-    role: "region",
-    "aria-label": props.intl.formatMessage(messages.editableContentLabel),
-    ref: props.contentAreaRef
-  }, jsx("div", {
-    css: editorContentGutterStyle,
-    className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' ')
-  }, props.customContentComponents, jsx(PluginSlot, {
-    editorView: props.editorView,
-    editorActions: props.editorActions,
-    eventDispatcher: props.eventDispatcher,
-    providerFactory: props.providerFactory,
-    appearance: props.appearance,
-    items: props.contentComponents,
-    pluginHooks: props.pluginHooks,
-    contentArea: props.contentArea,
-    popupsMountPoint: props.popupsMountPoint,
-    popupsBoundariesElement: props.popupsBoundariesElement,
-    popupsScrollableElement: props.popupsScrollableElement,
-    disabled: !!props.disabled,
-    containerElement: props.scrollContainer,
-    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-    wrapperElement: props.wrapperElement
-  }), props.editorDOMElement)))), jsx("div", {
-    css: sidebarArea
-  }, props.contextPanel || jsx(ContextPanel, {
-    visible: false
-  })))));
+  }) => {
+    var _contentAreaRef$curre;
+    return jsx("div", {
+      css: [contentArea, positionedOverEditor && positionedOverEditorStyle],
+      "data-testid": CONTENT_AREA_TEST_ID
+    }, jsx(ScrollContainer, {
+      className: "fabric-editor-popup-scroll-parent",
+      featureFlags: props.featureFlags,
+      ref: scrollContainerRef
+    }, jsx(ClickAreaBlock, {
+      editorView: props.editorView,
+      editorDisabled: props.disabled
+    }, jsx("div", {
+      css: editorContentAreaStyle({
+        fullWidthMode,
+        layoutMaxWidth: theme.layoutMaxWidth,
+        containerWidth: width
+      }),
+      role: "region",
+      "aria-label": props.intl.formatMessage(messages.editableContentLabel),
+      ref: contentAreaRef
+    }, jsx("div", {
+      css: editorContentGutterStyle,
+      className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
+      ref: contentAreaRef
+    }, props.customContentComponents, jsx(PluginSlot, {
+      editorView: props.editorView,
+      editorActions: props.editorActions,
+      eventDispatcher: props.eventDispatcher,
+      providerFactory: props.providerFactory,
+      appearance: props.appearance,
+      items: props.contentComponents,
+      pluginHooks: props.pluginHooks,
+      contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
+      popupsMountPoint: props.popupsMountPoint,
+      popupsBoundariesElement: props.popupsBoundariesElement,
+      popupsScrollableElement: props.popupsScrollableElement,
+      disabled: !!props.disabled,
+      containerElement: scrollContainerRef.current,
+      dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+      wrapperElement: props.wrapperElement
+    }), props.editorDOMElement)))), jsx("div", {
+      css: sidebarArea
+    }, props.contextPanel || jsx(ContextPanel, {
+      visible: false
+    })));
+  }));
 });
-export const FullPageContentArea = injectIntl(Content);
+export const FullPageContentArea = injectIntl(Content, {
+  forwardRef: true
+});

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "185.8.0";
+export const version = "185.8.2";
 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.8.0",
+	"version": "185.8.2",
 	"sideEffects": false
 }

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

@@ -1,137 +1,90 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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; } }
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import React from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { jsx } from '@emotion/react';
-import rafSchedule from 'raf-schd';
-import { akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
 import { fullPageEditorWrapper } from './StyledComponents';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
-export var FullPageEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(FullPageEditor, _React$Component);
-  var _super = _createSuper(FullPageEditor);
-  function FullPageEditor(props) {
-    var _this;
-    _classCallCheck(this, FullPageEditor);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      showKeyline: false
-    });
-    _defineProperty(_assertThisInitialized(_this), "scrollContainer", null);
-    // Wrapper container for toolbar and content area
-    _defineProperty(_assertThisInitialized(_this), "wrapperElementRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "contentAreaRef", function (contentArea) {
-      _this.contentArea = contentArea;
-    });
-    _defineProperty(_assertThisInitialized(_this), "scrollContainerRef", function (ref) {
-      var previousScrollContainer = _this.scrollContainer;
-
-      // remove existing handler
-      if (previousScrollContainer) {
-        previousScrollContainer.removeEventListener('scroll', _this.updateToolbarKeyline);
-      }
-      _this.scrollContainer = ref ? ref : null;
-      if (_this.scrollContainer) {
-        _this.scrollContainer.addEventListener('scroll', _this.updateToolbarKeyline, false);
-        _this.updateToolbarKeyline();
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "updateToolbarKeyline", rafSchedule(function () {
-      if (!_this.scrollContainer) {
-        return false;
-      }
-      var scrollTop = _this.scrollContainer.scrollTop;
-      var showKeyline = scrollTop > akEditorToolbarKeylineHeight;
-      if (showKeyline !== _this.state.showKeyline) {
-        _this.setState({
-          showKeyline: showKeyline
-        });
-      }
-      return false;
-    }));
-    _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
-      _this.updateToolbarKeyline();
-    });
-    _this.featureFlags = props.featureFlags;
-    if (props.innerRef) {
-      _this.wrapperElementRef = props.innerRef;
+import { browser } from '@atlaskit/editor-common/utils';
+var useShowKeyline = function useShowKeyline(contentAreaRef) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showKeyline = _useState2[0],
+    setShowKeyline = _useState2[1];
+  useEffect(function () {
+    var _contentAreaRef$curre;
+    if (!((_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 && _contentAreaRef$curre.contentArea)) {
+      return;
     }
-    return _this;
-  }
-  _createClass(FullPageEditor, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener('resize', this.handleResize, false);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('resize', this.handleResize);
-      this.updateToolbarKeyline.cancel();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var props = this.props;
-      var showKeyline = this.state.showKeyline;
-      return jsx(ContextPanelWidthProvider, null, jsx("div", {
-        css: fullPageEditorWrapper,
-        className: "akEditor",
-        ref: this.wrapperElementRef
-      }, jsx(FullPageToolbar, {
-        appearance: props.appearance,
-        beforeIcon: props.primaryToolbarIconBefore,
-        collabEdit: props.collabEdit,
-        containerElement: this.scrollContainer,
-        customPrimaryToolbarComponents: props.customPrimaryToolbarComponents,
-        disabled: !!props.disabled,
-        dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-        editorActions: props.editorActions,
-        editorDOMElement: props.editorDOMElement,
-        editorView: props.editorView,
-        eventDispatcher: props.eventDispatcher,
-        hasMinWidth: props.enableToolbarMinWidth,
-        popupsBoundariesElement: props.popupsBoundariesElement,
-        popupsMountPoint: props.popupsMountPoint,
-        popupsScrollableElement: props.popupsScrollableElement,
-        primaryToolbarComponents: props.primaryToolbarComponents,
-        providerFactory: props.providerFactory,
-        showKeyline: showKeyline,
-        featureFlags: this.featureFlags
-      }), jsx(FullPageContentArea, {
-        appearance: props.appearance,
-        contentArea: this.contentArea,
-        contentAreaRef: this.contentAreaRef,
-        contentComponents: props.contentComponents,
-        contextPanel: props.contextPanel,
-        customContentComponents: props.customContentComponents,
-        disabled: props.disabled,
-        dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-        editorActions: props.editorActions,
-        editorDOMElement: props.editorDOMElement,
-        editorView: props.editorView,
-        eventDispatcher: props.eventDispatcher,
-        popupsBoundariesElement: props.popupsBoundariesElement,
-        popupsMountPoint: props.popupsMountPoint,
-        popupsScrollableElement: props.popupsScrollableElement,
-        providerFactory: props.providerFactory,
-        scrollContainer: this.scrollContainer,
-        scrollContainerRef: this.scrollContainerRef,
-        wrapperElement: this.wrapperElementRef.current,
-        pluginHooks: props.pluginHooks,
-        featureFlags: this.featureFlags
-      })));
-    }
-  }]);
-  return FullPageEditor;
-}(React.Component);
-_defineProperty(FullPageEditor, "displayName", 'FullPageEditor');
+    var intersection = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      setShowKeyline(!entry.isIntersecting && entry.boundingClientRect.top < entry.intersectionRect.top);
+    }, {
+      root: undefined,
+      // Safari seems to miss events (on fast scroll) sometimes due
+      // to differences in IntersectionObserver behaviour between browsers.
+      // By lowering the threshold a little it gives Safari more
+      // time to catch these events.
+      threshold: browser.safari ? 0.98 : 1
+    });
+    intersection.observe(contentAreaRef.current.contentArea);
+    return function () {
+      intersection.disconnect();
+    };
+  }, [contentAreaRef]);
+  return showKeyline;
+};
+export var FullPageEditor = function FullPageEditor(props) {
+  var _scrollContentContain, _scrollContentContain2, _wrapperElementRef$cu;
+  var wrapperElementRef = useMemo(function () {
+    return props.innerRef;
+  }, [props.innerRef]);
+  var scrollContentContainerRef = useRef(null);
+  var showKeyline = useShowKeyline(scrollContentContainerRef);
+  return jsx(ContextPanelWidthProvider, null, jsx("div", {
+    css: fullPageEditorWrapper,
+    className: "akEditor",
+    ref: wrapperElementRef
+  }, jsx(FullPageToolbar, {
+    appearance: props.appearance,
+    beforeIcon: props.primaryToolbarIconBefore,
+    collabEdit: props.collabEdit,
+    containerElement: (_scrollContentContain = (_scrollContentContain2 = scrollContentContainerRef.current) === null || _scrollContentContain2 === void 0 ? void 0 : _scrollContentContain2.scrollContainer) !== null && _scrollContentContain !== void 0 ? _scrollContentContain : null,
+    customPrimaryToolbarComponents: props.customPrimaryToolbarComponents,
+    disabled: !!props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    editorActions: props.editorActions,
+    editorDOMElement: props.editorDOMElement,
+    editorView: props.editorView,
+    eventDispatcher: props.eventDispatcher,
+    hasMinWidth: props.enableToolbarMinWidth,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsScrollableElement: props.popupsScrollableElement,
+    primaryToolbarComponents: props.primaryToolbarComponents,
+    providerFactory: props.providerFactory,
+    showKeyline: showKeyline,
+    featureFlags: props.featureFlags
+  }), jsx(FullPageContentArea, {
+    ref: scrollContentContainerRef,
+    appearance: props.appearance,
+    contentComponents: props.contentComponents,
+    contextPanel: props.contextPanel,
+    customContentComponents: props.customContentComponents,
+    disabled: props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    editorActions: props.editorActions,
+    editorDOMElement: props.editorDOMElement,
+    editorView: props.editorView,
+    eventDispatcher: props.eventDispatcher,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsScrollableElement: props.popupsScrollableElement,
+    providerFactory: props.providerFactory,
+    wrapperElement: (_wrapperElementRef$cu = wrapperElementRef === null || wrapperElementRef === void 0 ? void 0 : wrapperElementRef.current) !== null && _wrapperElementRef$cu !== void 0 ? _wrapperElementRef$cu : null,
+    pluginHooks: props.pluginHooks,
+    featureFlags: props.featureFlags
+  })));
+};

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

@@ -2,7 +2,7 @@
 import { jsx, useTheme } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
-import React from 'react';
+import React, { useImperativeHandle, useRef } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { ClickAreaBlock } from '../../Addon';
 import ContextPanel from '../../ContextPanel';
@@ -10,20 +10,33 @@ import PluginSlot from '../../PluginSlot';
 import { contentArea, editorContentAreaStyle, sidebarArea, ScrollContainer, editorContentGutterStyle, positionedOverEditorStyle } from './StyledComponents';
 import messages from './messages';
 export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
-var Content = /*#__PURE__*/React.memo(function (props) {
+var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var theme = useTheme();
   var fullWidthMode = props.appearance === 'full-width';
+  var scrollContainerRef = useRef(null);
+  var contentAreaRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      get scrollContainer() {
+        return scrollContainerRef.current;
+      },
+      get contentArea() {
+        return contentAreaRef.current;
+      }
+    };
+  }, []);
   return jsx(WidthConsumer, null, function (_ref) {
     var width = _ref.width;
     return jsx(ContextPanelConsumer, null, function (_ref2) {
+      var _contentAreaRef$curre;
       var positionedOverEditor = _ref2.positionedOverEditor;
       return jsx("div", {
         css: [contentArea, positionedOverEditor && positionedOverEditorStyle],
         "data-testid": CONTENT_AREA_TEST_ID
       }, jsx(ScrollContainer, {
-        ref: props.scrollContainerRef,
         className: "fabric-editor-popup-scroll-parent",
-        featureFlags: props.featureFlags
+        featureFlags: props.featureFlags,
+        ref: scrollContainerRef
       }, jsx(ClickAreaBlock, {
         editorView: props.editorView,
         editorDisabled: props.disabled
@@ -35,10 +48,11 @@ var Content = /*#__PURE__*/React.memo(function (props) {
         }),
         role: "region",
         "aria-label": props.intl.formatMessage(messages.editableContentLabel),
-        ref: props.contentAreaRef
+        ref: contentAreaRef
       }, jsx("div", {
         css: editorContentGutterStyle,
-        className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' ')
+        className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
+        ref: contentAreaRef
       }, props.customContentComponents, jsx(PluginSlot, {
         editorView: props.editorView,
         editorActions: props.editorActions,
@@ -47,12 +61,12 @@ var Content = /*#__PURE__*/React.memo(function (props) {
         appearance: props.appearance,
         items: props.contentComponents,
         pluginHooks: props.pluginHooks,
-        contentArea: props.contentArea,
+        contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
         popupsMountPoint: props.popupsMountPoint,
         popupsBoundariesElement: props.popupsBoundariesElement,
         popupsScrollableElement: props.popupsScrollableElement,
         disabled: !!props.disabled,
-        containerElement: props.scrollContainer,
+        containerElement: scrollContainerRef.current,
         dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
         wrapperElement: props.wrapperElement
       }), props.editorDOMElement)))), jsx("div", {
@@ -63,4 +77,6 @@ var Content = /*#__PURE__*/React.memo(function (props) {
     });
   });
 });
-export var FullPageContentArea = injectIntl(Content);
+export var FullPageContentArea = injectIntl(Content, {
+  forwardRef: true
+});

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "185.8.0";
+export var version = "185.8.2";
 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.8.0",
+	"version": "185.8.2",
 	"sideEffects": false
 }

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

@@ -1,25 +1,3 @@
-/** @jsx jsx */
-import React from 'react';
 import { jsx } from '@emotion/react';
 import { EditorAppearanceComponentProps } from '../../../types';
-import { FeatureFlags } from '@atlaskit/editor-common/types';
-interface FullPageEditorState {
-    showKeyline: boolean;
-}
-export declare class FullPageEditor extends React.Component<EditorAppearanceComponentProps, FullPageEditorState> {
-    state: FullPageEditorState;
-    featureFlags: FeatureFlags;
-    static displayName: string;
-    private scrollContainer;
-    private contentArea;
-    private wrapperElementRef;
-    constructor(props: any);
-    private contentAreaRef;
-    private scrollContainerRef;
-    private updateToolbarKeyline;
-    private handleResize;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): jsx.JSX.Element;
-}
-export {};
+export declare const FullPageEditor: (props: EditorAppearanceComponentProps) => jsx.JSX.Element;

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

@@ -10,7 +10,6 @@ import type { ReactHookFactory } from '@atlaskit/editor-common/types';
 import type { FeatureFlags } from '../../../types/feature-flags';
 interface FullPageEditorContentAreaProps {
     appearance: EditorAppearance | undefined;
-    contentArea: HTMLElement | undefined;
     contentComponents: UIComponentFactory[] | undefined;
     pluginHooks: ReactHookFactory[] | undefined;
     contextPanel: ReactComponents | undefined;
@@ -25,14 +24,15 @@ interface FullPageEditorContentAreaProps {
     popupsBoundariesElement: HTMLElement | undefined;
     popupsScrollableElement: HTMLElement | undefined;
     providerFactory: ProviderFactory;
-    scrollContainer: HTMLElement | null;
-    contentAreaRef(ref: HTMLElement | null): void;
-    scrollContainerRef(ref: HTMLElement | null): void;
     wrapperElement: HTMLElement | null;
     featureFlags?: FeatureFlags;
 }
 export declare const CONTENT_AREA_TEST_ID = "ak-editor-fp-content-area";
-export declare const FullPageContentArea: React.FC<import("react-intl-next").WithIntlProps<FullPageEditorContentAreaProps & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<FullPageEditorContentAreaProps & WrappedComponentProps<"intl">>;
+type ScrollContainerRefs = {
+    scrollContainer: HTMLDivElement | null;
+    contentArea: HTMLDivElement | null;
+};
+export declare const FullPageContentArea: React.ForwardRefExoticComponent<Pick<import("react-intl-next").WithIntlProps<React.PropsWithChildren<FullPageEditorContentAreaProps & WrappedComponentProps<"intl"> & React.RefAttributes<ScrollContainerRefs>>>, "children" | "key" | "forwardedRef" | keyof FullPageEditorContentAreaProps> & React.RefAttributes<any>> & {
+    WrappedComponent: React.ComponentType<FullPageEditorContentAreaProps & WrappedComponentProps<"intl"> & React.RefAttributes<ScrollContainerRefs>>;
 };
 export {};

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import React, { ReactElement } from 'react';
+import { jsx } from '@emotion/react';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { EditorView } from 'prosemirror-view';
 import { WrappedComponentProps } from 'react-intl-next';
@@ -30,7 +31,7 @@ export interface FullPageToolbarProps {
     hasMinWidth?: boolean;
     featureFlags?: FeatureFlags;
 }
-export declare const EditorToolbar: React.FunctionComponent<FullPageToolbarProps & WrappedComponentProps>;
+export declare const EditorToolbar: React.MemoExoticComponent<(props: FullPageToolbarProps & WrappedComponentProps) => jsx.JSX.Element>;
 export declare const FullPageToolbar: React.FC<import("react-intl-next").WithIntlProps<FullPageToolbarProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<FullPageToolbarProps & WrappedComponentProps<"intl">>;
 };

package/dist/types-ts4.5/ui/Appearance/FullPage/FullPage.d.ts

@@ -1,25 +1,3 @@
-/** @jsx jsx */
-import React from 'react';
 import { jsx } from '@emotion/react';
 import { EditorAppearanceComponentProps } from '../../../types';
-import { FeatureFlags } from '@atlaskit/editor-common/types';
-interface FullPageEditorState {
-    showKeyline: boolean;
-}
-export declare class FullPageEditor extends React.Component<EditorAppearanceComponentProps, FullPageEditorState> {
-    state: FullPageEditorState;
-    featureFlags: FeatureFlags;
-    static displayName: string;
-    private scrollContainer;
-    private contentArea;
-    private wrapperElementRef;
-    constructor(props: any);
-    private contentAreaRef;
-    private scrollContainerRef;
-    private updateToolbarKeyline;
-    private handleResize;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): jsx.JSX.Element;
-}
-export {};
+export declare const FullPageEditor: (props: EditorAppearanceComponentProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageContentArea.d.ts

@@ -10,7 +10,6 @@ import type { ReactHookFactory } from '@atlaskit/editor-common/types';
 import type { FeatureFlags } from '../../../types/feature-flags';
 interface FullPageEditorContentAreaProps {
     appearance: EditorAppearance | undefined;
-    contentArea: HTMLElement | undefined;
     contentComponents: UIComponentFactory[] | undefined;
     pluginHooks: ReactHookFactory[] | undefined;
     contextPanel: ReactComponents | undefined;
@@ -25,14 +24,15 @@ interface FullPageEditorContentAreaProps {
     popupsBoundariesElement: HTMLElement | undefined;
     popupsScrollableElement: HTMLElement | undefined;
     providerFactory: ProviderFactory;
-    scrollContainer: HTMLElement | null;
-    contentAreaRef(ref: HTMLElement | null): void;
-    scrollContainerRef(ref: HTMLElement | null): void;
     wrapperElement: HTMLElement | null;
     featureFlags?: FeatureFlags;
 }
 export declare const CONTENT_AREA_TEST_ID = "ak-editor-fp-content-area";
-export declare const FullPageContentArea: React.FC<import("react-intl-next").WithIntlProps<FullPageEditorContentAreaProps & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<FullPageEditorContentAreaProps & WrappedComponentProps<"intl">>;
+type ScrollContainerRefs = {
+    scrollContainer: HTMLDivElement | null;
+    contentArea: HTMLDivElement | null;
+};
+export declare const FullPageContentArea: React.ForwardRefExoticComponent<Pick<import("react-intl-next").WithIntlProps<React.PropsWithChildren<FullPageEditorContentAreaProps & WrappedComponentProps<"intl"> & React.RefAttributes<ScrollContainerRefs>>>, "children" | "key" | "forwardedRef" | keyof FullPageEditorContentAreaProps> & React.RefAttributes<any>> & {
+    WrappedComponent: React.ComponentType<FullPageEditorContentAreaProps & WrappedComponentProps<"intl"> & React.RefAttributes<ScrollContainerRefs>>;
 };
 export {};

package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageToolbar.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import React, { ReactElement } from 'react';
+import { jsx } from '@emotion/react';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { EditorView } from 'prosemirror-view';
 import { WrappedComponentProps } from 'react-intl-next';
@@ -30,7 +31,7 @@ export interface FullPageToolbarProps {
     hasMinWidth?: boolean;
     featureFlags?: FeatureFlags;
 }
-export declare const EditorToolbar: React.FunctionComponent<FullPageToolbarProps & WrappedComponentProps>;
+export declare const EditorToolbar: React.MemoExoticComponent<(props: FullPageToolbarProps & WrappedComponentProps) => jsx.JSX.Element>;
 export declare const FullPageToolbar: React.FC<import("react-intl-next").WithIntlProps<FullPageToolbarProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<FullPageToolbarProps & WrappedComponentProps<"intl">>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "185.8.0",
+  "version": "185.8.2",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -69,7 +69,7 @@
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-object": "^6.3.0",
-    "@atlaskit/link-analytics": "^8.1.0",
+    "@atlaskit/link-analytics": "^8.2.0",
     "@atlaskit/link-datasource": "^0.27.0",
     "@atlaskit/link-picker": "^1.25.0",
     "@atlaskit/locale": "^2.5.0",
@@ -97,7 +97,7 @@
     "@atlaskit/tabs": "^13.4.0",
     "@atlaskit/task-decision": "^17.6.0",
     "@atlaskit/textarea": "^4.7.0",
-    "@atlaskit/textfield": "^5.5.0",
+    "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/tokens": "^1.11.0",
@@ -149,31 +149,22 @@
   "devDependencies": {
     "@af/editor-libra": "*",
     "@af/integration-testing": "*",
-    "@atlaskit/atlassian-navigation": "^2.6.0",
-    "@atlaskit/breadcrumbs": "11.10.4",
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/collab-provider": "9.5.1",
-    "@atlaskit/docs": "*",
-    "@atlaskit/drawer": "^7.5.0",
     "@atlaskit/dropdown-menu": "^11.10.0",
-    "@atlaskit/editor-card-provider": "^3.1.0",
     "@atlaskit/editor-extension-dropbox": "^0.4.0",
     "@atlaskit/editor-plugin-table": "^1.7.0",
     "@atlaskit/editor-test-helpers": "^18.8.0",
     "@atlaskit/flag": "^15.2.0",
-    "@atlaskit/inline-dialog": "^13.6.0",
     "@atlaskit/link-provider": "^1.6.0",
     "@atlaskit/link-test-helpers": "^4.1.0",
-    "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/media-core": "^34.1.0",
     "@atlaskit/media-integration-test-helpers": "^3.0.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/menu": "^1.9.0",
-    "@atlaskit/page-layout": "^1.7.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/renderer": "^108.6.0",
     "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/share": "*",
     "@atlaskit/smart-user-picker": "^6.1.0",
     "@atlaskit/synchrony-test-helpers": "^2.3.0",
     "@atlaskit/textarea": "^4.7.0",