@atlaskit/editor-core 185.7.0 → 185.8.2

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.7.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.7.0",
+	"version": "185.8.2",
 	"sideEffects": false
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PluginKey, NodeSelection } from 'prosemirror-state';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaInline } from '@atlaskit/adf-schema';
+import { media, mediaGroup, mediaInline, mediaSingleSpec } from '@atlaskit/adf-schema';
 import { stateKey as pluginKey, createPlugin } from './pm-plugins/main';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
@@ -22,6 +22,7 @@ import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { ReactMediaNode } from './nodeviews/mediaNodeView';
 import { ReactMediaInlineNode } from './nodeviews/mediaInline';
 import { stateKey } from './pm-plugins/plugin-key';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export { insertMediaSingleNode } from './utils/media-single';
 var mediaPlugin = function mediaPlugin() {
   var _api$dependencies, _api$dependencies$fea;
@@ -45,7 +46,14 @@ var mediaPlugin = function mediaPlugin() {
         mediaFeatureFlags = _ref.featureFlags;
       var captions = getMediaFeatureFlag('captions', mediaFeatureFlags);
       var allowMediaInline = getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
-      var mediaSingleNode = captions ? mediaSingleWithCaption : mediaSingle;
+      var mediaSingleOption = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
+        withCaption: captions,
+        withExtendedWidthTypes: true
+      } : {
+        withCaption: captions,
+        withExtendedWidthTypes: false
+      };
+      var mediaSingleNode = mediaSingleSpec(mediaSingleOption);
       return [{
         name: 'mediaGroup',
         node: mediaGroup

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.7.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.7.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 {};