@atlaskit/editor-core 161.0.0 → 163.0.0

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled, { keyframes } from 'styled-components';
+import { css, jsx, keyframes } from '@emotion/react';
 import { R100 } from '@atlaskit/theme/colors';
 const pulseBackground = keyframes`
   50% {
@@ -18,13 +20,20 @@ const pulseBackgroundReverse = keyframes`
     background-color: ${R100};
   }
 `;
-const Wrapper = styled.div`
+const flashWrapper = css`
   &.-flash > div {
     animation: 0.25s ease-in-out ${pulseBackgroundReverse};
   }
 
   & > div {
-    animation: ${props => props.animate ? `.25s ease-in-out ${pulseBackground}` : 'none'};
+    animation: 'none';
+  }
+`;
+const flashWrapperAnimated = css`
+  ${flashWrapper}
+
+  & > div {
+    animation: 0.25s ease-in-out ${pulseBackground};
   }
 `;
 export default class WithFlash extends React.Component {
@@ -40,9 +49,9 @@ export default class WithFlash extends React.Component {
       children
     } = this.props;
     this.toggle = animate && !this.toggle;
-    return /*#__PURE__*/React.createElement(Wrapper, {
-      className: this.toggle ? '-flash' : '',
-      animate: animate
+    return jsx("div", {
+      css: animate ? flashWrapperAnimated : flashWrapper,
+      className: this.toggle ? '-flash' : ''
     }, children);
   }
 

package/dist/es2019/utils/index.js

@@ -12,7 +12,7 @@ export { isEmptyParagraph, hasVisibleContent, isNodeEmpty, isEmptyDocument, proc
 export { cascadeCommands, getEditorValueWithMedia } from './action';
 export { isMarkAllowedInRange, isMarkExcluded, removeBlockMarks, sanitiseSelectionMarksForWrapping, sanitiseMarksInSelection } from './mark';
 export { isParagraph, isText, isLinkMark, validateNodes } from './nodes';
-export { isChromeWithSelectionBug, normaliseNestedLayout, setNodeSelection, setAllSelection, setGapCursorSelection, setCellSelection, setTextSelection, isValidPosition } from './selection';
+export { normaliseNestedLayout, setNodeSelection, setAllSelection, setGapCursorSelection, setCellSelection, setTextSelection, isValidPosition } from './selection';
 export { containsClassName } from './dom';
 export { default as measurements } from './performance/measure-enum';
 

package/dist/es2019/utils/insert.js

@@ -4,7 +4,7 @@ import { NodeSelection, Selection } from 'prosemirror-state';
 import { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';
 import { isEmptyParagraph } from './document';
 import { GapCursorSelection, Side } from '../plugins/selection/gap-cursor-selection';
-import { isChromeWithSelectionBug, normaliseNestedLayout } from './selection';
+import { normaliseNestedLayout } from './selection';
 export let LookDirection;
 
 (function (LookDirection) {
@@ -47,6 +47,8 @@ const shouldSplit = (nodeType, schemaNodes) => {
 };
 
 export const safeInsert = (content, position) => tr => {
+  var _tr$selection$$from$n;
+
   const {
     nodes
   } = tr.doc.type.schema;
@@ -85,6 +87,14 @@ export const safeInsert = (content, position) => tr => {
     }
   }
 
+  const grandParentType = (_tr$selection$$from$n = tr.selection.$from.node(-1)) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type;
+  const parentType = tr.selection.$from.parent.type;
+
+  if (!lookDirection && !shouldSplitSelectedNodeOnNodeInsertion(parentType, grandParentType, content)) {
+    // node to be inserted is an invalid child of selection so insert below selected node
+    return pmSafeInsert(content, tr.selection.from)(tr);
+  }
+
   if (!lookDirection) {
     // fallback to consumer for now
     return null;
@@ -165,15 +175,7 @@ export const insertSelectedItem = (maybeNode, opts = {}) => (state, tr, start) =
      */
   } else if (node.isInline || isInputFragment) {
     const fragment = isInputFragment ? node : Fragment.fromArray([node, state.schema.text(' ')]);
-    tr = tr.replaceWith(start, start, fragment); // This problem affects Chrome v58+. See: https://github.com/ProseMirror/prosemirror/issues/710
-
-    if (isChromeWithSelectionBug) {
-      const selection = document.getSelection();
-
-      if (selection) {
-        selection.empty();
-      }
-    }
+    tr = tr.replaceWith(start, start, fragment);
 
     if (opts.selectInlineNode) {
       // Select inserted node
@@ -185,4 +187,14 @@ export const insertSelectedItem = (maybeNode, opts = {}) => (state, tr, start) =
   }
 
   return tr;
+}; // ED-14584: Util to check if the current node is a paragraph & the content being
+// inserted is a valid child of the grandparent node
+// In this case, the node being inserted to should split
+
+export const shouldSplitSelectedNodeOnNodeInsertion = (parentNodeType, grandParentNodeType, content) => {
+  if (parentNodeType.name === 'paragraph' && grandParentNodeType.validContent(Fragment.from(content))) {
+    return true;
+  }
+
+  return false;
 };

package/dist/es2019/utils/performance/components/RenderTracking.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import debounce from 'lodash/debounce';
+import { useComponentRenderTracking } from '@atlaskit/editor-common/utils';
+import { EVENT_TYPE } from '../../../plugins/analytics';
+export function RenderTracking(props) {
+  const debouncedHandleAnalyticsEvent = useMemo(() => debounce(props.handleAnalyticsEvent, 500), [props.handleAnalyticsEvent]);
+  useComponentRenderTracking({
+    onRender: ({
+      renderCount,
+      propsDifference
+    }) => {
+      if (!renderCount) {
+        return;
+      }
+
+      debouncedHandleAnalyticsEvent({
+        payload: {
+          action: props.action,
+          actionSubject: props.actionSubject,
+          attributes: {
+            count: renderCount,
+            propsDifference: propsDifference
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        }
+      });
+    },
+    propsDiffingOptions: {
+      enabled: true,
+      props: props.componentProps,
+      propsToIgnore: props.propsToIgnore,
+      useShallow: props.useShallow
+    },
+    zeroBasedCount: true
+  });
+  return null;
+}

package/dist/es2019/utils/selection.js

@@ -1,6 +1,5 @@
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { NodeSelection, TextSelection, AllSelection } from 'prosemirror-state';
-import { browser } from '@atlaskit/editor-common/utils';
 import { GapCursorSelection } from '../plugins/selection/gap-cursor/selection';
 export const setNodeSelection = (view, pos) => {
   const {
@@ -66,11 +65,7 @@ export const normaliseNestedLayout = ({
   }
 
   return node;
-}; // @see: https://github.com/ProseMirror/prosemirror/issues/710
-// @see: https://bugs.chromium.org/p/chromium/issues/detail?id=740085
-// Chrome >= 58 (desktop only)
-
-export const isChromeWithSelectionBug = browser.chrome && !browser.android && browser.chrome_version >= 58;
+};
 export const isSelectionAtStartOfNode = ($pos, parentNode) => {
   if (!parentNode) {
     return false;

package/dist/es2019/version-wrapper.js

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

package/dist/esm/actions/index.js

@@ -32,36 +32,64 @@ var EditorActions = /*#__PURE__*/function () {
       }
     });
 
-    _defineProperty(this, "getResolvedEditorState", function () {
-      return new Promise(function (resolver, reject) {
-        var _getCollabProvider;
-
-        if (!_this.editorView) {
-          reject();
-          return;
-        }
-
-        var featureFlags = getFeatureFlags(_this.editorView.state);
-
-        if (!featureFlags.useNativeCollabPlugin) {
-          var _this$getValue;
-
-          return (_this$getValue = _this.getValue()) === null || _this$getValue === void 0 ? void 0 : _this$getValue.then(function (content) {
-            resolver({
-              content: content,
-              title: null,
-              stepVersion: -1
-            });
-          });
+    _defineProperty(this, "getResolvedEditorState", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _getCollabProvider;
+
+      var featureFlags, editorValue, editorView;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (_this.editorView) {
+                _context.next = 2;
+                break;
+              }
+
+              throw new Error('Called getResolvedEditorState before editorView is ready');
+
+            case 2:
+              featureFlags = getFeatureFlags(_this.editorView.state);
+
+              if (featureFlags.useNativeCollabPlugin) {
+                _context.next = 10;
+                break;
+              }
+
+              _context.next = 6;
+              return _this.getValue();
+
+            case 6:
+              editorValue = _context.sent;
+
+              if (editorValue) {
+                _context.next = 9;
+                break;
+              }
+
+              throw new Error('editorValue is undefined');
+
+            case 9:
+              return _context.abrupt("return", {
+                content: editorValue,
+                title: null,
+                stepVersion: -1
+              });
+
+            case 10:
+              editorView = _this.editorView;
+              _context.next = 13;
+              return getEditorValueWithMedia(editorView);
+
+            case 13:
+              return _context.abrupt("return", (_getCollabProvider = getCollabProvider(editorView.state)) === null || _getCollabProvider === void 0 ? void 0 : _getCollabProvider.getFinalAcknowledgedState());
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
         }
-
-        (_getCollabProvider = getCollabProvider(_this.editorView.state)) === null || _getCollabProvider === void 0 ? void 0 : _getCollabProvider.getFinalAcknowledgedState().then(function (resolvedEditorState) {
-          resolver(resolvedEditorState);
-        }).catch(function (error) {
-          reject(error);
-        });
-      });
-    });
+      }, _callee);
+    })));
   }
 
   _createClass(EditorActions, [{
@@ -161,30 +189,30 @@ var EditorActions = /*#__PURE__*/function () {
   }, {
     key: "__temporaryFixForConfigPanel",
     value: function () {
-      var _temporaryFixForConfigPanel2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _temporaryFixForConfigPanel2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var editorView;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context2.prev = _context2.next) {
               case 0:
                 editorView = this.editorView;
 
                 if (editorView) {
-                  _context.next = 3;
+                  _context2.next = 3;
                   break;
                 }
 
-                return _context.abrupt("return");
+                return _context2.abrupt("return");
 
               case 3:
                 _temporaryFixForConfigPanel(editorView);
 
               case 4:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
           }
-        }, _callee, this);
+        }, _callee2, this);
       }));
 
       function __temporaryFixForConfigPanel() {
@@ -197,46 +225,46 @@ var EditorActions = /*#__PURE__*/function () {
   }, {
     key: "getValue",
     value: function () {
-      var _getValue = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _getValue = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
         var editorView, doc, json, nodeSanitized;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 editorView = this.editorView;
 
                 if (editorView) {
-                  _context2.next = 3;
+                  _context3.next = 3;
                   break;
                 }
 
-                return _context2.abrupt("return");
+                return _context3.abrupt("return");
 
               case 3:
-                _context2.next = 5;
+                _context3.next = 5;
                 return getEditorValueWithMedia(editorView);
 
               case 5:
-                doc = _context2.sent;
+                doc = _context3.sent;
                 json = toJSON(doc);
 
                 if (this.contentEncode) {
-                  _context2.next = 9;
+                  _context3.next = 9;
                   break;
                 }
 
-                return _context2.abrupt("return", json);
+                return _context3.abrupt("return", json);
 
               case 9:
                 nodeSanitized = Node.fromJSON(this.editorView.state.schema, json);
-                return _context2.abrupt("return", this.contentEncode(nodeSanitized));
+                return _context3.abrupt("return", this.contentEncode(nodeSanitized));
 
               case 11:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
 
       function getValue() {

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

@@ -21,7 +21,7 @@ import uuid from 'uuid';
 import memoizeOne from 'memoize-one';
 import { sniffUserBrowserExtensions } from '@atlaskit/editor-common/utils';
 import { ExperienceStore } from '@atlaskit/editor-common/ufo';
-import { IntlNextErrorBoundary } from '@atlaskit/editor-common/ui';
+import { IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../plugins/analytics';
 import { editorAnalyticsChannel } from '../plugins/analytics/consts';
 import { getFeatureFlags } from '../plugins/feature-flags-context';
@@ -248,7 +248,7 @@ export var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(IntlNextErrorBoundary, null, this.props.children);
+      return /*#__PURE__*/React.createElement(IntlErrorBoundary, null, this.props.children);
     }
   }]);
 

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

@@ -26,7 +26,7 @@ import { ExperienceStore, EditorExperience, RELIABILITY_INTERVAL } from '@atlask
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
 import { processRawValue } from '../utils';
 import { freezeUnsafeTransactionProperties } from '../utils/performance/safer-transactions';
-import { RenderTracking } from '../utils/react-hooks/use-component-renderer-tracking';
+import { RenderTracking } from '../utils/performance/components/RenderTracking';
 import { findChangedNodesFromTransaction, validateNodes, validNode } from '../utils/nodes';
 import createPluginList from './create-plugins-list';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, FULL_WIDTH_MODE, getAnalyticsEventsFromTransaction, PLATFORMS } from '../plugins/analytics';

package/dist/esm/editor.js

@@ -27,7 +27,7 @@ import uuid from 'uuid/v4';
 import { name, version } from './version-wrapper';
 import { combineExtensionProviders } from '@atlaskit/editor-common/extensions';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { BaseTheme, WithCreateAnalyticsEvent, WidthProvider, LegacyToNextIntlProvider, IntlLegacyFallbackProvider } from '@atlaskit/editor-common/ui';
+import { BaseTheme, WithCreateAnalyticsEvent, WidthProvider } from '@atlaskit/editor-common/ui';
 import { getAnalyticsAppearance, startMeasure, stopMeasure, clearMeasure, measureTTI, getTTISeverity } from '@atlaskit/editor-common/utils';
 import { EditorExperience, ExperienceStore } from '@atlaskit/editor-common/ufo';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
@@ -44,7 +44,7 @@ import { combineQuickInsertProviders, extensionProviderToQuickInsertProvider } f
 import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from './plugins/analytics';
 import ErrorBoundary from './create-editor/ErrorBoundary';
 import { createFeatureFlagsFromProps } from './plugins/feature-flags-context/feature-flags-from-props';
-import { RenderTracking } from './utils/react-hooks/use-component-renderer-tracking';
+import { RenderTracking } from './utils/performance/components/RenderTracking';
 var WidthProviderFullHeight = styled(WidthProvider)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n"])));
 
 var Editor = /*#__PURE__*/function (_React$Component) {
@@ -517,7 +517,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       var renderTracking = (_this$props$performan = this.props.performanceTracking) === null || _this$props$performan === void 0 ? void 0 : (_this$props$performan2 = _this$props$performan.renderTracking) === null || _this$props$performan2 === void 0 ? void 0 : _this$props$performan2.editor;
       var renderTrackingEnabled = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.enabled;
       var useShallow = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.useShallow;
-      var editor = /*#__PURE__*/React.createElement(FabricEditorAnalyticsContext, {
+      return /*#__PURE__*/React.createElement(FabricEditorAnalyticsContext, {
         data: {
           packageName: name,
           packageVersion: version,
@@ -588,7 +588,6 @@ var Editor = /*#__PURE__*/function (_React$Component) {
                     customSecondaryToolbarComponents: _this5.props.secondaryToolbarComponents,
                     contextPanel: _this5.props.contextPanel,
                     collabEdit: _this5.props.collabEdit,
-                    allowAnnotation: !!_this5.props.annotationProviders,
                     persistScrollGutter: _this5.props.persistScrollGutter,
                     enableToolbarMinWidth: ((_this5$props$featureF = _this5.props.featureFlags) === null || _this5$props$featureF === void 0 ? void 0 : _this5$props$featureF.toolbarMinWidthOverflow) != null ? !!((_this5$props$featureF2 = _this5.props.featureFlags) !== null && _this5$props$featureF2 !== void 0 && _this5$props$featureF2.toolbarMinWidthOverflow) : _this5.props.UNSAFE_allowUndoRedoButtons,
                     useStickyToolbar: _this5.props.useStickyToolbar,
@@ -602,7 +601,6 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           }))))));
         }
       }));
-      return /*#__PURE__*/React.createElement(LegacyToNextIntlProvider, null, /*#__PURE__*/React.createElement(IntlLegacyFallbackProvider, null, editor));
     }
   }]);
 

package/dist/esm/extensibility.js

@@ -4,7 +4,7 @@ export { toJSON } from './utils';
 export { default as Extension } from './plugins/extension/ui/Extension';
 export { default as ExtensionNodeWrapper } from './plugins/extension/ui/Extension/ExtensionNodeWrapper';
 export { ExtensionNode } from './plugins/extension/nodeviews/extension';
-export { pluginKey as tablePluginKey } from './plugins/table/pm-plugins/plugin-factory';
+export { pluginKey as tablePluginKey } from './plugins/table/pm-plugins/plugin-key';
 export var EmitterEvents = {
   TABLE_DELETED: 'TABLE_DELETED'
 };

package/dist/esm/keymaps/index.js

@@ -2,9 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from 'react';
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/utils';
-import styled from 'styled-components';
 import { N400 } from '@atlaskit/theme/colors';
 export var addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
 export var toggleBold = makeKeyMapWithCommon('Bold', 'Mod-b');
@@ -76,7 +77,7 @@ var arrowKeysMap = {
   ARROWUP: "\u2191",
   ARROWDOWN: "\u2193"
 };
-export var TooltipShortcut = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n"])), N400);
+var tooltipShortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), N400);
 
 function formatShortcut(keymap) {
   var shortcut;
@@ -113,7 +114,9 @@ export var ToolTipContent = /*#__PURE__*/React.memo(function (_ref) {
       shortcutOverride = _ref.shortcutOverride,
       keymap = _ref.keymap;
   var shortcut = shortcutOverride || keymap && formatShortcut(keymap);
-  return shortcut || description ? /*#__PURE__*/React.createElement(React.Fragment, null, description, shortcut && description && "\xA0", shortcut && /*#__PURE__*/React.createElement(TooltipShortcut, null, shortcut)) : null;
+  return shortcut || description ? jsx(Fragment, null, description, shortcut && description && "\xA0", shortcut && jsx("span", {
+    css: tooltipShortcutStyle
+  }, shortcut)) : null;
 });
 export function findKeymapByDescription(description) {
   var matches = ALL.filter(function (keymap) {

package/dist/esm/labs/next/full-page.js

@@ -4,9 +4,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
+/** @jsx jsx */
 import rafSchedule from 'raf-schd';
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { BaseTheme } from '@atlaskit/editor-common/ui';
@@ -15,38 +16,29 @@ import ContentStyles from '../../ui/ContentStyles';
 import WidthEmitter from '../../ui/WidthEmitter';
 import { ClickAreaBlock } from '../../ui/Addon';
 import { scrollbarStyles } from '../../ui/styles';
-import { tableFullPageEditorStyles } from '../../plugins/table/ui/common-styles.css';
+import { tableFullPageEditorStyles } from '../../plugins/table/ui/common-styles';
 import AvatarsWithPluginState from '../../plugins/collab-edit/ui';
 import { Editor, EditorContent, useEditorSharedConfig } from './Editor';
 import { Toolbar } from './Toolbar';
 import { ContentComponents } from './ContentComponents';
 import { useCreateAnalyticsHandler } from './internal/hooks/use-analytics';
 import { ContextPanelWidthProvider } from '../../ui/ContextPanel/context';
-var FullPageEditorWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 340px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
-FullPageEditorWrapper.displayName = 'FullPageEditorWrapper';
-var ScrollContainer = styled(ContentStyles)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-y: scroll;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  ", ";\n"])), scrollbarStyles);
-ScrollContainer.displayName = 'ScrollContainer';
+var fullPageEditorWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 340px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
+var scrollContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-y: scroll;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  ", ";\n"])), scrollbarStyles);
 var GUTTER_PADDING = 32;
 var GUTTER_STYLE = {
   padding: "0 ".concat(GUTTER_PADDING, "px")
 };
-var ContentArea = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  box-sizing: border-box;\n"])));
-ContentArea.displayName = 'ContentArea';
-var EditorContentArea = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  line-height: 24px;\n  height: 100%;\n  width: 100%;\n  max-width: ", "px;\n  padding-top: 50px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: 55px;\n\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  && .ProseMirror {\n    & > * {\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol,\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      clear: none;\n    }\n  }\n  ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.layoutMaxWidth + GUTTER_PADDING * 2;
-}, tableFullPageEditorStyles);
-EditorContentArea.displayName = 'EditorContentArea';
-var MainToolbar = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: ", ";\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n"])), function (props) {
-  return props.showKeyline ? "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ").concat(N30) : 'none';
-}, akEditorMenuZIndex);
-MainToolbar.displayName = 'MainToolbar';
-var MainToolbarCustomComponentsSlot = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n"])));
-MainToolbarCustomComponentsSlot.displayName = 'MainToolbar';
-var SecondaryToolbar = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  flex-shrink: 0;\n  display: flex;\n  padding: 24px 0;\n"])));
-SecondaryToolbar.displayName = 'SecondaryToolbar';
-var SidebarArea = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  height: 100%;\n  box-sizing: border-box;\n"])));
-SidebarArea.displayName = 'SidebarArea';
+var contentArea = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  box-sizing: border-box;\n"])));
+
+var editorContentArea = function editorContentArea(theme) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  line-height: 24px;\n  height: 100%;\n  width: 100%;\n  max-width: ", "px;\n  padding-top: 50px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: 55px;\n\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  && .ProseMirror {\n    & > * {\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol,\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      clear: none;\n    }\n  }\n  ", ";\n"])), theme.layoutMaxWidth + GUTTER_PADDING * 2, tableFullPageEditorStyles);
+};
+
+var mainToolbar = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: 'none';\n\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n"])), akEditorMenuZIndex);
+var mainToolbarWithKeyline = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  box-shadow: 0 ", "px 0 0 ", "\n"])), mainToolbar, akEditorToolbarKeylineHeight, N30);
+var mainToolbarCustomComponentsSlot = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n"])));
+var sidebarArea = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  height: 100%;\n  box-sizing: border-box;\n"])));
 
 function useKeyline() {
   var _React$useState = React.useState(false),
@@ -99,31 +91,41 @@ function FullPage(props) {
       scrollContainerRef = _useKeyline2[1];
 
   var config = useEditorSharedConfig();
-  return /*#__PURE__*/React.createElement(ContextPanelWidthProvider, null, /*#__PURE__*/React.createElement(Editor, _extends({}, props, {
+  return jsx(ContextPanelWidthProvider, null, jsx(Editor, _extends({}, props, {
     onAnalyticsEvent: handleAnalyticsEvent
-  }), /*#__PURE__*/React.createElement(BaseTheme, {
+  }), jsx(BaseTheme, {
     dynamicTextSizing: allowDynamicTextSizing
-  }, /*#__PURE__*/React.createElement(FullPageEditorWrapper, {
+  }, jsx("div", {
+    css: fullPageEditorWrapper,
     className: "akEditor"
-  }, /*#__PURE__*/React.createElement(MainToolbar, {
+  }, jsx("div", {
     "data-testid": "ak-editor-main-toolbar",
-    showKeyline: showKeyline
-  }, /*#__PURE__*/React.createElement(Toolbar, {
+    css: showKeyline ? mainToolbarWithKeyline : mainToolbar
+  }, jsx(Toolbar, {
     containerElement: scrollContainerRef.current
-  }), /*#__PURE__*/React.createElement(MainToolbarCustomComponentsSlot, null, !config ? null : /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
+  }), jsx("div", {
+    css: mainToolbarCustomComponentsSlot
+  }, !config ? null : jsx(AvatarsWithPluginState, {
     editorView: config.editorView,
     eventDispatcher: config.eventDispatcher,
     inviteToEditHandler: collabEdit === null || collabEdit === void 0 ? void 0 : collabEdit.inviteToEditHandler,
     isInviteToEditButtonSelected: collabEdit === null || collabEdit === void 0 ? void 0 : collabEdit.isInviteToEditButtonSelected
-  }), primaryToolbarComponents)), /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement(ScrollContainer, {
-    innerRef: scrollContainerRef,
-    className: "fabric-editor-popup-scroll-parent"
-  }, /*#__PURE__*/React.createElement(ClickAreaBlock, {
+  }), primaryToolbarComponents)), jsx("div", {
+    css: contentArea
+  }, jsx(ContentStyles, {
+    ref: scrollContainerRef,
+    className: "fabric-editor-popup-scroll-parent",
+    css: scrollContainer
+  }, jsx(ClickAreaBlock, {
     editorView: config === null || config === void 0 ? void 0 : config.editorView
-  }, /*#__PURE__*/React.createElement(EditorContentArea, null, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
+    css: editorContentArea
+  }, jsx("div", {
     style: GUTTER_STYLE,
     className: "ak-editor-content-area"
-  }, contentComponents, /*#__PURE__*/React.createElement(EditorContent, null), /*#__PURE__*/React.createElement(ContentComponents, null))))), contextPanel && /*#__PURE__*/React.createElement(SidebarArea, null, contextPanel), /*#__PURE__*/React.createElement(WidthEmitter, {
+  }, contentComponents, jsx(EditorContent, null), jsx(ContentComponents, null))))), contextPanel && jsx("div", {
+    css: sidebarArea
+  }, contextPanel), jsx(WidthEmitter, {
     editorView: config === null || config === void 0 ? void 0 : config.editorView
   }))))));
 }

package/dist/esm/labs/next/presets/cxhtml.js

@@ -67,7 +67,6 @@ export function useCXHTMLPreset(_ref) {
       provider: mediaProvider,
       allowMediaSingle: true,
       allowMediaGroup: true,
-      allowAnnotation: true,
       allowResizing: true,
       allowLinking: true,
       allowResizingInTables: true,