@atlaskit/editor-core 207.7.0 → 207.9.0

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @atlaskit/editor-core
 
+## 207.9.0
+
+### Minor Changes
+
+- [#160567](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160567)
+  [`2088abf31e988`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2088abf31e988) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor block marks CSS
+  in static emotion
+- [#156919](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156919)
+  [`379f5c27f4939`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/379f5c27f4939) -
+  delay table sticky headers until table is in viewport
+- [#160638](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160638)
+  [`73485f1de1b41`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/73485f1de1b41) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor grid,
+  indentation, whitespace CSS in static emotion
+
+### Patch Changes
+
+- [#159655](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159655)
+  [`24f8c627d50f2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/24f8c627d50f2) - ##
+  WHAT? Remove experimental graceful edit mode from view mode plugin and associated props.
+
+  ## WHY?
+
+  This experiment is being cleaned up and we are no longer proceeding in this direction.
+
+  ## HOW to adjust?
+
+  This experiment was only enabled for Confluence and should not have been enabled in other places.
+  If for some reason any of the following props/state/methdos were used please remove them:
+
+  - isConsumption
+  - contentMode
+  - initialContentMode
+  - updateContentMode
+
+- Updated dependencies
+
+## 207.8.0
+
+### Minor Changes
+
+- [#160606](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160606)
+  [`cd15d7ce813fb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cd15d7ce813fb) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor paragraph CSS in
+  static emotion
+- [#160652](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160652)
+  [`907e9afb86169`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/907e9afb86169) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor tasks and
+  decisions CSS in static emotion
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 207.7.0
 
 ### Minor Changes

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

@@ -15,6 +15,7 @@ var _v = _interopRequireDefault(require("uuid/v4"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _eventDispatcher = require("@atlaskit/editor-common/event-dispatcher");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
 var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-flags");
 var _measureRender = require("@atlaskit/editor-common/performance/measure-render");
 var _navigation = require("@atlaskit/editor-common/performance/navigation");
@@ -26,6 +27,7 @@ var _document = require("@atlaskit/editor-common/utils/document");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _useProviders = require("../composable-editor/hooks/useProviders");
 var _featureFlagsFromProps = require("../utils/feature-flags-from-props");
 var _getNodesCount = require("../utils/getNodesCount");
@@ -492,6 +494,12 @@ function ReactEditorView(props) {
   }, [editorView, shouldFocus, __livePage, mitigateScrollJump]);
   var handleEditorViewRef = (0, _react.useCallback)(function (node) {
     if (!viewRef.current && node) {
+      // make sure this doesn't expose the experiment
+      if ((0, _experiments.editorExperiment)('platform_editor_nodevisibility', true, {
+        exposure: false
+      })) {
+        (0, _nodeVisibility.nodeVisibilityManager)(node).initialiseNodeObserver();
+      }
       var view = createEditorView(node);
       if ((0, _platformFeatureFlags.fg)('platform_editor_reduce_scroll_jump_on_editor_start')) {
         if (mitigateScrollJump) {
@@ -562,6 +570,9 @@ function ReactEditorView(props) {
       } else {
         viewRef.current.destroy(); // Destroys the dom node & all node views
       }
+      if ((0, _experiments.editorExperiment)('platform_editor_nodevisibility', true)) {
+        (0, _nodeVisibility.nodeVisibilityManager)(viewRef.current.dom).disconnect();
+      }
       viewRef.current = undefined;
     }
   }, [createEditorView, onEditorCreated, eventDispatcher, shouldFocus, __livePage, onEditorDestroyed, handleAnalyticsEvent, mitigateScrollJump]);

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

@@ -71,7 +71,6 @@ var useFullPageEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFac
 }, function (pluginInjectionApi) {
   var primaryToolbarComponents = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'primaryToolbar.components');
   var editorViewMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
-  var showTopToolbar = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode._showTopToolbar');
   var hasHadInteraction = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.hasHadInteraction');
   var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.interactionState');
   return {
@@ -79,8 +78,7 @@ var useFullPageEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFac
       components: primaryToolbarComponents
     },
     editorViewModeState: !editorViewMode ? undefined : {
-      mode: editorViewMode,
-      _showTopToolbar: showTopToolbar
+      mode: editorViewMode
     },
     interactionState: hasHadInteraction === undefined || interactionState === undefined ? undefined : {
       hasHadInteraction: hasHadInteraction,
@@ -89,7 +87,7 @@ var useFullPageEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFac
   };
 });
 var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
-  var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _scrollContentContain4, _scrollContentContain5, _wrapperElementRef$cu;
+  var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
   var wrapperElementRef = (0, _react.useMemo)(function () {
     return props.innerRef;
   }, [props.innerRef]);
@@ -128,23 +126,6 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
   }
   var isEditorToolbarHidden = (0, _platformFeatureFlags.fg)('platform_editor_sync_editor_view_mode_state') ? viewMode === 'view' : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  if (props.__livePage && !(0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control')) {
-    // the custom toolbar logic should only be applied when the experiment cohort is not control,
-    // and the editor is in live page mode.
-    if (!editorViewModeState) {
-      // when first loading the editor, the toolbar should be hidden for all content modes
-      // the editorViewMode plugin state is not able to be relied as it will not be setup when
-      // the appearance component is being rendered.
-      // In this case we set the toolbar to be hidden by default.
-      isEditorToolbarHidden = true;
-    } else {
-      if ((0, _experiments.editorExperiment)('live_pages_graceful_edit', 'initially-hide-toolbar')) {
-        // for the initially-hide-toolbar variant, the toolbar should be hidden based on
-        // a separate flag in the editorViewMode plugin state.
-        isEditorToolbarHidden = !editorViewModeState._showTopToolbar || false;
-      }
-    }
-  }
   var customPrimaryToolbarComponents = props.customPrimaryToolbarComponents;
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
     exposure: true
@@ -174,10 +155,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     ,
     className: "akEditor",
     ref: wrapperElementRef
-  }, !(0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control') && (0, _react2.jsx)("div", {
-    css: hiddenStyle,
-    "data-hidden": isEditorToolbarHidden
-  }, (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
+  }, !isEditorToolbarHidden && (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,
@@ -204,33 +182,6 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags
-  })), (0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control') && !isEditorToolbarHidden && (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
-    appearance: props.appearance,
-    editorAPI: editorAPI,
-    beforeIcon: props.primaryToolbarIconBefore,
-    collabEdit: props.collabEdit,
-    containerElement: (_scrollContentContain4 = (_scrollContentContain5 = scrollContentContainerRef.current) === null || _scrollContentContain5 === void 0 ? void 0 : _scrollContentContain5.scrollContainer) !== null && _scrollContentContain4 !== void 0 ? _scrollContentContain4 : null,
-    customPrimaryToolbarComponents: props.customPrimaryToolbarComponents,
-    disabled: !!props.disabled,
-    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-    editorActions: props.editorActions,
-    editorDOMElement: props.editorDOMElement
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    editorView: props.editorView
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    eventDispatcher: props.eventDispatcher,
-    hasMinWidth: props.enableToolbarMinWidth,
-    popupsBoundariesElement: props.popupsBoundariesElement,
-    popupsMountPoint: props.popupsMountPoint,
-    popupsScrollableElement: props.popupsScrollableElement,
-    primaryToolbarComponents: primaryToolbarComponents,
-    providerFactory: props.providerFactory,
-    showKeyline: showKeyline,
-    featureFlags: props.featureFlags
   }), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
     editorAPI: editorAPI,
     ref: scrollContentContainerRef,
@@ -258,16 +209,4 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
     hasHadInteraction: hasHadInteraction
   })));
-};
-var hiddenStyle = (0, _react2.css)({
-  visibility: 'visible',
-  opacity: 1,
-  transition: '200ms opacity, 200ms visibility, 200ms transform',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&[data-hidden="true"]': {
-    height: 0,
-    visibility: 'hidden',
-    opacity: 0
-    // transition: '0ms opacity, 0ms visibility, 0ms transform',
-  }
-});
+};

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

@@ -102,14 +102,11 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     _StyledComponents.contentArea,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control') && props.isEditorToolbarHidden &&
+    props.isEditorToolbarHidden &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     _StyledComponents.contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
     ref: containerRef
-    // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
-    ,
-    className: !(0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control') && props.isEditorToolbarHidden ? 'ak-editor-content-area-no-toolbar' : undefined
   }, (0, _react2.jsx)("div", {
     css:
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js

@@ -33,15 +33,21 @@ var _tasksAndDecisions = require("../ContentStyles/tasks-and-decisions");
 var _aiPanel = require("./styles/ai-panel");
 var _annotationStyles = require("./styles/annotationStyles");
 var _backgroundColorStyles = require("./styles/backgroundColorStyles");
+var _blockMarksStyles = require("./styles/blockMarksStyles");
 var _codeBlockStyles = require("./styles/codeBlockStyles");
 var _codeMarkStyles = require("./styles/codeMarkStyles");
 var _embedCardStyles = require("./styles/embedCardStyles");
 var _firstBlockNodeStyles = require("./styles/firstBlockNodeStyles");
+var _gridStyles = require("./styles/gridStyles");
+var _indentationStyles = require("./styles/indentationStyles");
 var _layout = require("./styles/layout");
 var _link = require("./styles/link");
 var _mediaStyles = require("./styles/mediaStyles");
+var _paragraphStyles = require("./styles/paragraphStyles");
 var _resizerStyles = require("./styles/resizerStyles");
 var _rule = require("./styles/rule");
+var _tasksAndDecisionsStyles = require("./styles/tasksAndDecisionsStyles");
+var _whitespaceStyles = require("./styles/whitespaceStyles");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /* eslint-disable react-hooks/rules-of-hooks */
@@ -140,13 +146,13 @@ var akEditorBreakpointForSmallDevice = "1266px";
 
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var contentStyles = function contentStyles() {
-  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _styles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _styles.listsSharedStyles, _indentationStyles.indentationStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _styles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
@@ -224,7 +230,13 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     ref: ref,
     css: [contentStyles(),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _layout.layoutBaseStyles)(),
+    (0, _layout.layoutBaseStyles)(), (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _paragraphStyles.paragraphStylesUGCRefreshed :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _paragraphStyles.paragraphStylesUGCModernized :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _paragraphStyles.paragraphStylesOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     (0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? _link.linkStyles : _link.linkStylesOld, (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/cjs/ui/EditorContentContainer/styles/blockMarksStyles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockMarksStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var blockMarksStyles = exports.blockMarksStyles = (0, _react.css)({
+  // We need to remove margin-top from first item
+  // inside doc, tableCell, tableHeader, blockquote, etc.
+  //
+  // - For nested block marks apart from those with indentation mark.
+  // - Do not remove the margin top for nodes inside indentation marks.
+  // - Do not remove the margin top for nodes inside alignment marks.
+  //- If first element inside a block node has alignment mark, then remove the margin-top.
+  //- If first document element has indentation mark remove margin-top.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+  '*:not(.fabric-editor-block-mark) >, *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-of-type:not(.fabric-editor-indentation-mark):not(.fabric-editor-alignment), .fabric-editor-alignment:first-of-type:first-child, .ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'p, h1, h2, h3, h4, h5, h6, .heading-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&:first-child:not(style), style:first-child + *': {
+        marginTop: 0
+      }
+    }
+  }
+});

package/dist/cjs/ui/EditorContentContainer/styles/gridStyles.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var gridStyles = exports.gridStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.gridParent': {
+    width: "calc(100% + 24px)",
+    marginLeft: "var(--ds-space-negative-150, -12px)",
+    marginRight: "var(--ds-space-negative-150, -12px)",
+    transform: 'scale(1)',
+    zIndex: 2
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.gridContainer': {
+    position: 'fixed',
+    height: '100vh',
+    width: '100%',
+    pointerEvents: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.gridLine': {
+    borderLeft: "1px solid ".concat("var(--ds-border, #091E4224)"),
+    display: 'inline-block',
+    boxSizing: 'border-box',
+    height: '100%',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginLeft: '-1px',
+    transition: 'border-color 0.15s linear',
+    zIndex: 0
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.highlight': {
+    borderLeft: "1px solid ".concat("var(--ds-border-focused, #388BFF)")
+  }
+});

package/dist/cjs/ui/EditorContentContainer/styles/indentationStyles.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.indentationStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var indentationStyles = exports.indentationStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.fabric-editor-indentation-mark': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    "&[data-level='1']": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: 30
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    "&[data-level='2']": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: 60
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    "&[data-level='3']": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: 90
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    "&[data-level='4']": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: 120
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    "&[data-level='5']": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: 150
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    "&[data-level='6']": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: 180
+    }
+  }
+});

package/dist/cjs/ui/EditorContentContainer/styles/paragraphStyles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.paragraphStylesUGCRefreshed = exports.paragraphStylesUGCModernized = exports.paragraphStylesOld = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+var blockNodesVerticalMargin = '0.75rem';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var paragraphStylesUGCRefreshed = exports.paragraphStylesUGCRefreshed = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror p': {
+    // The `editor.font.body` token is used for the UGC typography theme.
+    // We don't use `editorUGCToken('editor.font.body')` here because we want to build this styles statically.
+    // See platform/packages/editor/editor-common/src/ugc-tokens/get-editor-ugc-token.tsx
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: 'normal 400 1em/1.714 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+    marginTop: blockNodesVerticalMargin,
+    marginBottom: 0
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var paragraphStylesUGCModernized = exports.paragraphStylesUGCModernized = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror p': {
+    // The `editor.font.body` token is used for the UGC typography theme.
+    // We don't use `editorUGCToken('editor.font.body')` here because we want to build this styles statically.
+    // See platform/packages/editor/editor-common/src/ugc-tokens/get-editor-ugc-token.tsx
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: 'normal 400 1em/1.714 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+    marginTop: blockNodesVerticalMargin,
+    marginBottom: 0
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var paragraphStylesOld = exports.paragraphStylesOld = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror p': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: '1em',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 1.714,
+    fontWeight: "var(--ds-font-weight-regular, 400)",
+    marginTop: blockNodesVerticalMargin,
+    marginBottom: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    letterSpacing: '-0.005em'
+  }
+});

package/dist/cjs/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tasksAndDecisionsStyles = exports.TaskDecisionSharedCssClassName = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+var akEditorLineHeight = 1.714;
+var TaskDecisionSharedCssClassName = exports.TaskDecisionSharedCssClassName = {
+  DECISION_CONTAINER: 'decisionItemView-content-wrap',
+  TASK_CONTAINER: 'taskItemView-content-wrap',
+  TASK_ITEM: 'task-item',
+  TASK_CHECKBOX_CONTAINER: 'task-item-checkbox-wrap'
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var tasksAndDecisionsStyles = exports.tasksAndDecisionsStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".taskItemView-content-wrap, .".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
+    position: 'relative',
+    minWidth: 48
+  }), ".".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
+    marginTop: 0
+  }), ".".concat(TaskDecisionSharedCssClassName.TASK_CONTAINER), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "span[contenteditable='false']": {
+      height: "".concat(akEditorLineHeight, "em")
+    }
+  }), ".".concat(TaskDecisionSharedCssClassName.TASK_ITEM), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: akEditorLineHeight
+  }),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[data-task-local-id]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "span[contenteditable='false']": {
+      height: "".concat(akEditorLineHeight, "em")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "span[contenteditable='false'] + div": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: "".concat(akEditorLineHeight, "em")
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[data-task-list-local-id]': {
+    margin: "var(--ds-space-150, 12px)".concat(" 0 0 0"),
+    // If task item is not first in the list then set margin top to 4px.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'div + div': {
+      marginTop: "var(--ds-space-050, 4px)"
+    }
+  },
+  // If task list is not first in the document then set margin top to 4px.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[data-task-list-local-id] div[data-task-list-local-id]': {
+    marginTop: "var(--ds-space-050, 4px)",
+    marginLeft: "var(--ds-space-300, 24px)"
+  },
+  // When action list is inside panel
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-panel__content': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div[data-task-list-local-id]:first-child': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      margin: '0 !important'
+    }
+  }
+});

package/dist/cjs/ui/EditorContentContainer/styles/whitespaceStyles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.whitespaceStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var whitespaceStyles = exports.whitespaceStyles = (0, _react.css)({
+  wordWrap: 'break-word',
+  whiteSpace: 'pre-wrap'
+});

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "207.7.0";
+var version = exports.version = "207.9.0";

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

@@ -4,6 +4,7 @@ import uuid from 'uuid/v4';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, PLATFORMS } from '@atlaskit/editor-common/analytics';
 import { createDispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { useConstructor, usePreviousState } from '@atlaskit/editor-common/hooks';
+import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getEnabledFeatureFlagKeys } from '@atlaskit/editor-common/normalize-feature-flags';
 import { measureRender } from '@atlaskit/editor-common/performance/measure-render';
 import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
@@ -15,6 +16,7 @@ import { isEmptyDocument } from '@atlaskit/editor-common/utils/document';
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useProviders } from '../composable-editor/hooks/useProviders';
 import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
 import { getNodesCount } from '../utils/getNodesCount';
@@ -462,6 +464,12 @@ export function ReactEditorView(props) {
   }, [editorView, shouldFocus, __livePage, mitigateScrollJump]);
   const handleEditorViewRef = useCallback(node => {
     if (!viewRef.current && node) {
+      // make sure this doesn't expose the experiment
+      if (editorExperiment('platform_editor_nodevisibility', true, {
+        exposure: false
+      })) {
+        nodeVisibilityManager(node).initialiseNodeObserver();
+      }
       const view = createEditorView(node);
       if (fg('platform_editor_reduce_scroll_jump_on_editor_start')) {
         if (mitigateScrollJump) {
@@ -530,6 +538,9 @@ export function ReactEditorView(props) {
       } else {
         viewRef.current.destroy(); // Destroys the dom node & all node views
       }
+      if (editorExperiment('platform_editor_nodevisibility', true)) {
+        nodeVisibilityManager(viewRef.current.dom).disconnect();
+      }
       viewRef.current = undefined;
     }
   }, [createEditorView, onEditorCreated, eventDispatcher, shouldFocus, __livePage, onEditorDestroyed, handleAnalyticsEvent, mitigateScrollJump]);