@atlaskit/editor-core 162.0.1 → 163.0.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @atlaskit/editor-core
 
+## 163.0.0
+
+### Major Changes
+
+- [`0ba6e613e60`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ba6e613e60) - [ux] Removed media-editor references in editor-core
+- [`2ec99bf6f9f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ec99bf6f9f) - [ux] ED-14651: removed react-intl v2.
+
+### Minor Changes
+
+- [`8767658360f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8767658360f) - Adds support to editor-core analytics types to dispatch operational feature exposure events.
+- [`bceab5fa97d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bceab5fa97d) - ED-14632: Add render count tracking reRendered event in Renderer
+- [`c5ac02c5672`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5ac02c5672) - [ux] ED-9226 padding fix for numbered list inside table
+- [`16ffd1a95fd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/16ffd1a95fd) - [ux] ED-14479 Created getInlineNodeView api and added test suite. Refactored status node view to use new api.
+- [`a94f57c6d61`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a94f57c6d61) - fix integration tests to remove dependency of mediaPicker popup and use native picker
+
+### Patch Changes
+
+- [`0863c318a75`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0863c318a75) - [ED-14590] Fix unclickable links on mention team highlight
+- [`ef7b2acee8d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ef7b2acee8d) - [ux] ED-14633 Adds editable widgets either side of the cursor when positioned between inline node views to prevent the cursor disappearing or appearing in the wrong position. Also removes old Firefox selection workaround.
+- [`874489b6b05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/874489b6b05) - [ux] Migrate the DateNodeView to the node view producer api, which provides a number of selection fixes.
+- [`44c6c36d8d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/44c6c36d8d9) - ED-14263 replaced styled usages
+- [`523d46ed69d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/523d46ed69d) - ED-11836 Restrict ListsJoined type
+- [`b38234b895c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b38234b895c) - ED-14268 editor-core replace some of styled-components with emotion
+- [`3c24bc606e4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c24bc606e4) - [ux][ed-14191] Stop config panel with tabs overflowing when long dropdown option is selected
+- [`92f9b06ab4b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/92f9b06ab4b) - ED-14269 Migrated css in editor-core to emotion.
+- [`2cfb953f2af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2cfb953f2af) - ED-14739: Fix backspace issue. When you have a list and have empty paragraphs after the list, if you position the cursor just after the list, the cursor doesn't move going into the list.
+- [`2a8cbf13f57`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2a8cbf13f57) - ED-14339 removed ThemeProvider from editor-core
+- [`d175ef22258`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d175ef22258) - Change default analytic value
+- [`5c1bba527ee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c1bba527ee) - [ux] ED-14573 Updated getInlineNodeViewProducer markup and styles to allow multiline node views to wrap across lines and not act as a block element.
+- [`1e2086467f1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1e2086467f1) - [ED-13775] Added resize observer on scroll parent element to realign popup components when template context panel is opened/closed.
+- [`78aec52dea0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78aec52dea0) - use latest SmartUserPicker in Editor packages
+- [`0dad4610a36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0dad4610a36) - ED-14268 migrated parts of editor-core to use emotion.
+- [`b060587bd38`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b060587bd38) - [ux][ed-14584] Solve inconsistencies of node insertion via the toolbar. Specifically targeting nodes being inserted into other nodes that cannot contain them. Previously the node being inserted into would split in half, but now the invalid node will insert underneath.
+- [`1b0b4544d74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1b0b4544d74) - Change default value of FF for experiment
+- [`447feec5678`](https://bitbucket.org/atlassian/atlassian-frontend/commits/447feec5678) - [ED-11900] Make table node top of the quick insert result by adding "table" in the keywords list
+- [`9b5c590caae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9b5c590caae) - ED-14268 replaced some styled in editor-core
+- [`ea050810214`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ea050810214) - EDM-2935: Reimplement change experiment tracking event without localId
+- [`5c6607ee0e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c6607ee0e7) - Migrated link, rule, panel and expand styles in editor-common to emotion.
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- [`1bf958a90f5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1bf958a90f5) - EDM-2892: Fix view switcher casing in feature flags from props.
+- Updated dependencies
+
 ## 162.0.1
 
 ### Patch Changes

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

@@ -268,7 +268,7 @@ var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_ui.IntlNextErrorBoundary, null, this.props.children);
+      return /*#__PURE__*/_react.default.createElement(_ui.IntlErrorBoundary, null, this.props.children);
     }
   }]);
   return ErrorBoundaryWithEditorView;

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

@@ -46,7 +46,7 @@ var _utils2 = require("../utils");
 
 var _saferTransactions = require("../utils/performance/safer-transactions");
 
-var _useComponentRendererTracking = require("../utils/react-hooks/use-component-renderer-tracking");
+var _RenderTracking = require("../utils/performance/components/RenderTracking");
 
 var _nodes = require("../utils/nodes");
 
@@ -831,7 +831,7 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       var renderTracking = (_this$props$editorPro9 = this.props.editorProps.performanceTracking) === null || _this$props$editorPro9 === void 0 ? void 0 : (_this$props$editorPro10 = _this$props$editorPro9.renderTracking) === null || _this$props$editorPro10 === void 0 ? void 0 : _this$props$editorPro10.reactEditorView;
       var renderTrackingEnabled = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.enabled;
       var useShallow = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.useShallow;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderTrackingEnabled && /*#__PURE__*/_react.default.createElement(_useComponentRendererTracking.RenderTracking, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderTrackingEnabled && /*#__PURE__*/_react.default.createElement(_RenderTracking.RenderTracking, {
         componentProps: this.props,
         action: _analytics.ACTION.RE_RENDERED,
         actionSubject: _analytics.ACTION_SUBJECT.REACT_EDITOR_VIEW,

package/dist/cjs/editor.js

@@ -73,7 +73,7 @@ var _ErrorBoundary = _interopRequireDefault(require("./create-editor/ErrorBounda
 
 var _featureFlagsFromProps = require("./plugins/feature-flags-context/feature-flags-from-props");
 
-var _useComponentRendererTracking = require("./utils/react-hooks/use-component-renderer-tracking");
+var _RenderTracking = require("./utils/performance/components/RenderTracking");
 
 var _templateObject;
 
@@ -551,8 +551,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.default.createElement(_analyticsNamespacedContext.FabricEditorAnalyticsContext, {
+      return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricEditorAnalyticsContext, {
         data: {
           packageName: _versionWrapper.name,
           packageVersion: _versionWrapper.version,
@@ -562,7 +561,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/_react.default.createElement(_ui.WithCreateAnalyticsEvent, {
         render: function render(createAnalyticsEvent) {
-          return (_this5.createAnalyticsEvent = createAnalyticsEvent) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderTrackingEnabled && /*#__PURE__*/_react.default.createElement(_useComponentRendererTracking.RenderTracking, {
+          return (_this5.createAnalyticsEvent = createAnalyticsEvent) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderTrackingEnabled && /*#__PURE__*/_react.default.createElement(_RenderTracking.RenderTracking, {
             componentProps: _this5.props,
             action: _analytics.ACTION.RE_RENDERED,
             actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
@@ -623,7 +622,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,
@@ -637,8 +635,6 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           }))))));
         }
       }));
-
-      return /*#__PURE__*/_react.default.createElement(_ui.LegacyToNextIntlProvider, null, /*#__PURE__*/_react.default.createElement(_ui.IntlLegacyFallbackProvider, null, editor));
     }
   }]);
   return Editor;

package/dist/cjs/keymaps/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -71,7 +73,7 @@ Object.defineProperty(exports, "RIGHT", {
     return _consts.RIGHT;
   }
 });
-exports.TooltipShortcut = exports.ToolTipContent = void 0;
+exports.ToolTipContent = void 0;
 Object.defineProperty(exports, "UP", {
   enumerable: true,
   get: function get() {
@@ -94,11 +96,11 @@ exports.undo = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _utils = require("@atlaskit/editor-common/utils");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -106,6 +108,10 @@ var _consts = require("./consts");
 
 var _templateObject;
 
+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; }
+
 var addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
 exports.addAltText = addAltText;
 var toggleBold = makeKeyMapWithCommon('Bold', 'Mod-b');
@@ -239,10 +245,7 @@ var arrowKeysMap = {
   ARROWUP: "\u2191",
   ARROWDOWN: "\u2193"
 };
-
-var TooltipShortcut = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n"])), _colors.N400);
-
-exports.TooltipShortcut = TooltipShortcut;
+var tooltipShortcutStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N400);
 
 function formatShortcut(keymap) {
   var shortcut;
@@ -280,7 +283,9 @@ var ToolTipContent = /*#__PURE__*/_react.default.memo(function (_ref) {
       shortcutOverride = _ref.shortcutOverride,
       keymap = _ref.keymap;
   var shortcut = shortcutOverride || keymap && formatShortcut(keymap);
-  return shortcut || description ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, description, shortcut && description && "\xA0", shortcut && /*#__PURE__*/_react.default.createElement(TooltipShortcut, null, shortcut)) : null;
+  return shortcut || description ? (0, _react2.jsx)(_react.Fragment, null, description, shortcut && description && "\xA0", shortcut && (0, _react2.jsx)("span", {
+    css: tooltipShortcutStyle
+  }, shortcut)) : null;
 });
 
 exports.ToolTipContent = ToolTipContent;

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

@@ -17,7 +17,7 @@ var _rafSchd = _interopRequireDefault(require("raf-schd"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -51,44 +51,22 @@ var _context = require("../../ui/ContextPanel/context");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
-var FullPageEditorWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _styledComponents.default)(_ContentStyles.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-y: scroll;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  ", ";\n"])), _styles.scrollbarStyles);
-ScrollContainer.displayName = 'ScrollContainer';
+var fullPageEditorWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 340px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
+var scrollContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-y: scroll;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  ", ";\n"])), _styles.scrollbarStyles);
 var GUTTER_PADDING = 32;
 var GUTTER_STYLE = {
   padding: "0 ".concat(GUTTER_PADDING, "px")
 };
+var contentArea = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  box-sizing: border-box;\n"])));
 
-var ContentArea = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  box-sizing: border-box;\n"])));
-
-ContentArea.displayName = 'ContentArea';
-
-var EditorContentArea = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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;
-}, _commonStyles.deprecatedTableFullPageEditorStyles);
-
-EditorContentArea.displayName = 'EditorContentArea';
-
-var MainToolbar = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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(_editorSharedStyles.akEditorToolbarKeylineHeight, "px 0 0 ").concat(_colors.N30) : 'none';
-}, _editorSharedStyles.akEditorMenuZIndex);
-
-MainToolbar.displayName = 'MainToolbar';
-
-var MainToolbarCustomComponentsSlot = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n"])));
-
-MainToolbarCustomComponentsSlot.displayName = 'MainToolbar';
-
-var SecondaryToolbar = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\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 = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  box-sizing: border-box;\n"])));
+var editorContentArea = function editorContentArea(theme) {
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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, _commonStyles.tableFullPageEditorStyles);
+};
 
-SidebarArea.displayName = 'SidebarArea';
+var mainToolbar = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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"])), _editorSharedStyles.akEditorMenuZIndex);
+var mainToolbarWithKeyline = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-shadow: 0 ", "px 0 0 ", "\n"])), mainToolbar, _editorSharedStyles.akEditorToolbarKeylineHeight, _colors.N30);
+var mainToolbarCustomComponentsSlot = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n"])));
+var sidebarArea = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  box-sizing: border-box;\n"])));
 
 function useKeyline() {
   var _React$useState = _react.default.useState(false),
@@ -143,31 +121,41 @@ function FullPage(props) {
       scrollContainerRef = _useKeyline2[1];
 
   var config = (0, _Editor.useEditorSharedConfig)();
-  return /*#__PURE__*/_react.default.createElement(_context.ContextPanelWidthProvider, null, /*#__PURE__*/_react.default.createElement(_Editor.Editor, (0, _extends2.default)({}, props, {
+  return (0, _react2.jsx)(_context.ContextPanelWidthProvider, null, (0, _react2.jsx)(_Editor.Editor, (0, _extends2.default)({}, props, {
     onAnalyticsEvent: handleAnalyticsEvent
-  }), /*#__PURE__*/_react.default.createElement(_ui.BaseTheme, {
+  }), (0, _react2.jsx)(_ui.BaseTheme, {
     dynamicTextSizing: allowDynamicTextSizing
-  }, /*#__PURE__*/_react.default.createElement(FullPageEditorWrapper, {
+  }, (0, _react2.jsx)("div", {
+    css: fullPageEditorWrapper,
     className: "akEditor"
-  }, /*#__PURE__*/_react.default.createElement(MainToolbar, {
+  }, (0, _react2.jsx)("div", {
     "data-testid": "ak-editor-main-toolbar",
-    showKeyline: showKeyline
-  }, /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, {
+    css: showKeyline ? mainToolbarWithKeyline : mainToolbar
+  }, (0, _react2.jsx)(_Toolbar.Toolbar, {
     containerElement: scrollContainerRef.current
-  }), /*#__PURE__*/_react.default.createElement(MainToolbarCustomComponentsSlot, null, !config ? null : /*#__PURE__*/_react.default.createElement(_ui2.default, {
+  }), (0, _react2.jsx)("div", {
+    css: mainToolbarCustomComponentsSlot
+  }, !config ? null : (0, _react2.jsx)(_ui2.default, {
     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.default.createElement(ContentArea, null, /*#__PURE__*/_react.default.createElement(ScrollContainer, {
-    innerRef: scrollContainerRef,
-    className: "fabric-editor-popup-scroll-parent"
-  }, /*#__PURE__*/_react.default.createElement(_Addon.ClickAreaBlock, {
+  }), primaryToolbarComponents)), (0, _react2.jsx)("div", {
+    css: contentArea
+  }, (0, _react2.jsx)(_ContentStyles.default, {
+    ref: scrollContainerRef,
+    className: "fabric-editor-popup-scroll-parent",
+    css: scrollContainer
+  }, (0, _react2.jsx)(_Addon.ClickAreaBlock, {
     editorView: config === null || config === void 0 ? void 0 : config.editorView
-  }, /*#__PURE__*/_react.default.createElement(EditorContentArea, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _react2.jsx)("div", {
+    css: editorContentArea
+  }, (0, _react2.jsx)("div", {
     style: GUTTER_STYLE,
     className: "ak-editor-content-area"
-  }, contentComponents, /*#__PURE__*/_react.default.createElement(_Editor.EditorContent, null), /*#__PURE__*/_react.default.createElement(_ContentComponents.ContentComponents, null))))), contextPanel && /*#__PURE__*/_react.default.createElement(SidebarArea, null, contextPanel), /*#__PURE__*/_react.default.createElement(_WidthEmitter.default, {
+  }, contentComponents, (0, _react2.jsx)(_Editor.EditorContent, null), (0, _react2.jsx)(_ContentComponents.ContentComponents, null))))), contextPanel && (0, _react2.jsx)("div", {
+    css: sidebarArea
+  }, contextPanel), (0, _react2.jsx)(_WidthEmitter.default, {
     editorView: config === null || config === void 0 ? void 0 : config.editorView
   }))))));
 }

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

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

package/dist/cjs/nodeviews/ReactNodeView.js

@@ -17,25 +17,17 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _utils = require("@atlaskit/editor-common/utils");
-
-var _pluginKey = require("../plugins/analytics/plugin-key");
-
 var _eventDispatcher = require("../event-dispatcher");
 
 var _analytics = require("../plugins/analytics");
 
 var _consts = require("../plugins/analytics/consts");
 
-var _getParticipantsCount = require("../plugins/collab-edit/get-participants-count");
-
 var _featureFlagsContext = require("../plugins/feature-flags-context");
 
 var _ErrorBoundary = require("../ui/ErrorBoundary");
 
-var DEFAULT_SAMPLING_RATE = 100;
-var DEFAULT_SLOW_THRESHOLD = 7;
-var nodeViewEventsCounter = 0;
+var _getPerformanceOptions = require("./getPerformanceOptions");
 
 var ReactNodeView = /*#__PURE__*/function () {
   function ReactNodeView(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent) {
@@ -104,27 +96,24 @@ var ReactNodeView = /*#__PURE__*/function () {
 
 
       this.domRef.classList.add("".concat(this.node.type.name, "View-content-wrap"));
-      var _this$performanceOpti = this.performanceOptions,
-          samplingRate = _this$performanceOpti.samplingRate,
-          slowThreshold = _this$performanceOpti.slowThreshold,
-          trackingEnabled = _this$performanceOpti.enabled;
-      trackingEnabled && (0, _utils.startMeasure)("\uD83E\uDD89".concat(this.node.type.name, "::ReactNodeView"));
+
+      var _getPerformanceOption = (0, _getPerformanceOptions.getPerformanceOptions)(this.view),
+          samplingRate = _getPerformanceOption.samplingRate,
+          slowThreshold = _getPerformanceOption.slowThreshold,
+          trackingEnabled = _getPerformanceOption.trackingEnabled;
+
+      trackingEnabled && (0, _getPerformanceOptions.startMeasureReactNodeViewRendered)({
+        nodeTypeName: this.node.type.name
+      });
       this.renderReactComponent(function () {
         return _this2.render(_this2.reactComponentProps, _this2.handleRef);
       });
-      trackingEnabled && (0, _utils.stopMeasure)("\uD83E\uDD89".concat(this.node.type.name, "::ReactNodeView"), function (duration) {
-        if (++nodeViewEventsCounter % samplingRate === 0 && duration > slowThreshold) {
-          _this2.dispatchAnalyticsEvent({
-            action: _analytics.ACTION.REACT_NODEVIEW_RENDERED,
-            actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
-            eventType: _analytics.EVENT_TYPE.OPERATIONAL,
-            attributes: {
-              node: _this2.node.type.name,
-              duration: duration,
-              participants: (0, _getParticipantsCount.getParticipantsCount)(_this2.view.state)
-            }
-          });
-        }
+      trackingEnabled && (0, _getPerformanceOptions.stopMeasureReactNodeViewRendered)({
+        nodeTypeName: this.node.type.name,
+        dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
+        editorState: this.view.state,
+        samplingRate: samplingRate,
+        slowThreshold: slowThreshold
       });
       return this;
     }
@@ -260,20 +249,6 @@ var ReactNodeView = /*#__PURE__*/function () {
       this.domRef = undefined;
       this.contentDOM = undefined;
     }
-  }, {
-    key: "performanceOptions",
-    get: function get() {
-      var pluginState = _pluginKey.analyticsPluginKey.getState(this.view.state);
-
-      var nodeViewTracking = pluginState && pluginState.performanceTracking ? pluginState.performanceTracking.nodeViewTracking || {} : {};
-      var samplingRate = nodeViewTracking.samplingRate || DEFAULT_SAMPLING_RATE;
-      var slowThreshold = nodeViewTracking.slowThreshold || DEFAULT_SLOW_THRESHOLD;
-      return {
-        enabled: !!nodeViewTracking.enabled,
-        samplingRate: samplingRate,
-        slowThreshold: slowThreshold
-      };
-    }
   }], [{
     key: "fromComponent",
     value: function fromComponent(component, portalProviderAPI, eventDispatcher, props, viewShouldUpdate) {

package/dist/cjs/nodeviews/getInlineNodeViewProducer.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInlineNodeViewProducer = getInlineNodeViewProducer;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _analytics = require("../plugins/analytics");
+
+var _consts = require("../plugins/analytics/consts");
+
+var _ErrorBoundary = require("../ui/ErrorBoundary");
+
+var _getPerformanceOptions = require("./getPerformanceOptions");
+
+function createNodeView(_ref) {
+  var nodeViewParams = _ref.nodeViewParams,
+      pmPluginFactoryParams = _ref.pmPluginFactoryParams,
+      Component = _ref.Component,
+      extraComponentProps = _ref.extraComponentProps;
+  // We set a variable for the current node which is
+  // used for comparisions when doing updates, before being
+  // overwritten to the updated node.
+  var currentNode = nodeViewParams.node; // First we setup the dom element which will be rendered and "tracked" by prosemirror
+  // and also used as a "editor portal" (not react portal) target by the editor
+  // portal provider api, for rendering the Component passed.
+
+  var domRef = document.createElement('span');
+  domRef.contentEditable = 'false';
+  setDomAttrs(nodeViewParams.node, domRef); // @see ED-3790
+  // something gets messed up during mutation processing inside of a
+  // nodeView if DOM structure has nested plain "div"s, it doesn't see the
+  // difference between them and it kills the nodeView
+
+  domRef.classList.add("".concat(nodeViewParams.node.type.name, "View-content-wrap"), "inlineNodeViewOuterContainer"); // This util is shared for tracking rendering, and the ErrorBoundary that
+  // is setup to wrap the Component when rendering
+  // NOTE: This is not a prosemirror dispatch
+
+  function dispatchAnalyticsEvent(payload) {
+    pmPluginFactoryParams.eventDispatcher.emit(_consts.analyticsEventKey, {
+      payload: payload
+    });
+  } // This is called to render the Component into domRef which is inside the
+  // prosemirror View.
+  // Internally it uses the unstable_renderSubtreeIntoContainer api to render,
+  // to the passed dom element (domRef) which means it is automatically
+  // "cleaned up" when you do a "re render".
+
+
+  function renderComponent() {
+    pmPluginFactoryParams.portalProviderAPI.render(getPortalChildren({
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      currentNode: currentNode,
+      nodeViewParams: nodeViewParams,
+      Component: Component,
+      extraComponentProps: extraComponentProps
+    }), domRef, false, // node views should be rendered with intl context
+    true);
+  }
+
+  var _getPerformanceOption = (0, _getPerformanceOptions.getPerformanceOptions)(nodeViewParams.view),
+      samplingRate = _getPerformanceOption.samplingRate,
+      slowThreshold = _getPerformanceOption.slowThreshold,
+      trackingEnabled = _getPerformanceOption.trackingEnabled;
+
+  trackingEnabled && (0, _getPerformanceOptions.startMeasureReactNodeViewRendered)({
+    nodeTypeName: currentNode.type.name
+  }); // We render the component while creating the node view
+
+  renderComponent();
+  trackingEnabled && (0, _getPerformanceOptions.stopMeasureReactNodeViewRendered)({
+    nodeTypeName: currentNode.type.name,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    editorState: nodeViewParams.view.state,
+    samplingRate: samplingRate,
+    slowThreshold: slowThreshold
+  }); // https://prosemirror.net/docs/ref/#view.NodeView
+
+  var nodeView = {
+    get dom() {
+      return domRef;
+    },
+
+    update: function update(nextNode, _decorations) {
+      // Let ProseMirror handle the update if node types are different.
+      // This prevents an issue where it was not possible to select the
+      // inline node view then replace it by entering text - the node
+      // view contents would be deleted but the node view itself would
+      // stay in the view and become uneditable.
+      if (currentNode.type !== nextNode.type) {
+        return false;
+      } // On updates, we only set the new attributes if the type, attributes, and marks
+      // have changed on the node.
+      // NOTE: this could mean attrs changes aren't reflected in the dom,
+      // when an attribute key which was previously present is no longer
+      // present.
+      // ie.
+      // -> Original attributes { text: "hello world", color: "red" }
+      // -> Updated attributes { color: "blue" }
+      // in this case, the dom text attribute will not be cleared.
+      //
+      // This may not be an issue with any of our current node schemas.
+
+
+      if (!currentNode.sameMarkup(nextNode)) {
+        setDomAttrs(nextNode, domRef);
+      }
+
+      currentNode = nextNode;
+      renderComponent();
+      return true;
+    },
+    destroy: function destroy() {
+      // When prosemirror destroys the node view, we need to clean up
+      // what we have previously rendered using the editor portal
+      // provider api.
+      pmPluginFactoryParams.portalProviderAPI.remove(domRef); // @ts-expect-error Expect an error as domRef is expected to be
+      // of HTMLSpanElement type however once the node view has
+      // been destroyed no other consumers should still be using it.
+
+      domRef = undefined;
+    }
+  };
+  return nodeView;
+}
+/**
+ * Copies the attributes from a ProseMirror Node to a DOM node.
+ * @param node The Prosemirror Node from which to source the attributes
+ */
+
+
+function setDomAttrs(node, element) {
+  Object.keys(node.attrs || {}).forEach(function (attr) {
+    element.setAttribute(attr, node.attrs[attr]);
+  });
+}
+
+function getPortalChildren(_ref2) {
+  var dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+      currentNode = _ref2.currentNode,
+      nodeViewParams = _ref2.nodeViewParams,
+      Component = _ref2.Component,
+      extraComponentProps = _ref2.extraComponentProps;
+  return function portalChildren() {
+    var _currentNode$type$nam, _currentNode$type;
+
+    //  All inline nodes use `display: inline` to allow for multi-line
+    //  wrapping. This does produce an issue in Chrome where it is not
+    //  possible to click select the position after the node,
+    //  see: https://product-fabric.atlassian.net/browse/ED-12003
+    //  however this is only a problem for node views that use
+    //  `display: inline-block` somewhere within the Component.
+    //  Looking at the below structure, spans with className
+    //  `inlineNodeViewAddZeroWidthSpace` have pseudo elements that
+    //  add a zero width space which fixes the problem.
+    //  Without the additional zero width space before the Component,
+    //  it is not possible to use the keyboard to range select in Safari.
+    //
+    //  Zero width spaces on either side of the Component also prevent
+    //  the cursor from appearing inside the node view on all browsers.
+    //
+    //  Note:
+    //  In future it is worth considering prohibiting the use of `display: inline-block`
+    //  within inline node view Components however would require a sizable
+    //  refactor. A test suite to catch any instances of this is ideal however
+    //  the refactor required is currently out of scope for https://product-fabric.atlassian.net/browse/ED-14176
+    return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
+      component: _analytics.ACTION_SUBJECT.REACT_NODE_VIEW,
+      componentId: (_currentNode$type$nam = currentNode === null || currentNode === void 0 ? void 0 : (_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : _currentNode$type.name) !== null && _currentNode$type$nam !== void 0 ? _currentNode$type$nam : _analytics.ACTION_SUBJECT_ID.UNKNOWN_NODE,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "inlineNodeViewAddZeroWidthSpace"
+    }), _utils.ZERO_WIDTH_SPACE, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+      view: nodeViewParams.view,
+      getPos: nodeViewParams.getPos,
+      node: currentNode
+    }, extraComponentProps)), /*#__PURE__*/_react.default.createElement("span", {
+      className: "inlineNodeViewAddZeroWidthSpace"
+    }));
+  };
+} // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews
+// The prosemirror EditorProps has a nodeViews key which has the rough shape:
+// type nodeViews: {
+//   [nodeViewName: string]: (node, editorView, getPos, decorations, innerDecorations) => NodeView
+// }
+// So the value of the keys on the nodeViews object, are a function which should return a NodeView.
+// The following type NodeViewProducer, refers to these functions which return a NodeView.
+//
+// So the above type could also be described as
+// type NodeViewProducer = (node, editorView, getPos, decorations, innerDecorations) => NodeView
+// nodeViews: {
+//   [nodeViewName: string]: NodeViewProducer
+// }
+
+
+// This return of this function is intended to be the value of a key
+// in a ProseMirror nodeViews object.
+function getInlineNodeViewProducer(_ref3) {
+  var pmPluginFactoryParams = _ref3.pmPluginFactoryParams,
+      Component = _ref3.Component,
+      extraComponentProps = _ref3.extraComponentProps;
+
+  function nodeViewProducer() {
+    var nodeView = createNodeView({
+      nodeViewParams: {
+        node: arguments.length <= 0 ? undefined : arguments[0],
+        view: arguments.length <= 1 ? undefined : arguments[1],
+        getPos: arguments.length <= 2 ? undefined : arguments[2],
+        decorations: arguments.length <= 3 ? undefined : arguments[3]
+      },
+      pmPluginFactoryParams: pmPluginFactoryParams,
+      Component: Component,
+      extraComponentProps: extraComponentProps
+    });
+    return nodeView;
+  }
+
+  return nodeViewProducer;
+}