@atlaskit/editor-core 185.7.0 → 185.8.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [`68ef7e6146c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/68ef7e6146c) - Added feature flag for the new media resize experience.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 185.7.0
 
 ### Minor Changes

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

@@ -35,6 +35,7 @@ var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
 var _mediaNodeView = require("./nodeviews/mediaNodeView");
 var _mediaInline = require("./nodeviews/mediaInline");
 var _pluginKey = require("./pm-plugins/plugin-key");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _mediaSingle2 = require("./utils/media-single");
 var mediaPlugin = function mediaPlugin() {
   var _api$dependencies, _api$dependencies$fea;
@@ -58,7 +59,14 @@ var mediaPlugin = function mediaPlugin() {
         mediaFeatureFlags = _ref.featureFlags;
       var captions = (0, _mediaCommon.getMediaFeatureFlag)('captions', mediaFeatureFlags);
       var allowMediaInline = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags);
-      var mediaSingleNode = captions ? _adfSchema.mediaSingleWithCaption : _adfSchema.mediaSingle;
+      var mediaSingleOption = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? {
+        withCaption: captions,
+        withExtendedWidthTypes: true
+      } : {
+        withCaption: captions,
+        withExtendedWidthTypes: false
+      };
+      var mediaSingleNode = (0, _adfSchema.mediaSingleSpec)(mediaSingleOption);
       return [{
         name: 'mediaGroup',
         node: _adfSchema.mediaGroup

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

package/dist/es2019/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';
 const mediaPlugin = (options = {}, api) => {
   var _api$dependencies, _api$dependencies$fea;
@@ -42,7 +43,14 @@ const mediaPlugin = (options = {}, api) => {
       } = options || {};
       const captions = getMediaFeatureFlag('captions', mediaFeatureFlags);
       const allowMediaInline = getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
-      const mediaSingleNode = captions ? mediaSingleWithCaption : mediaSingle;
+      const mediaSingleOption = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
+        withCaption: captions,
+        withExtendedWidthTypes: true
+      } : {
+        withCaption: captions,
+        withExtendedWidthTypes: false
+      };
+      const mediaSingleNode = mediaSingleSpec(mediaSingleOption);
       return [{
         name: 'mediaGroup',
         node: mediaGroup

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