@atlaskit/editor-core 207.7.0 → 207.9.0

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

@@ -5,7 +5,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
@@ -54,7 +54,6 @@ const useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(plug
 }, pluginInjectionApi => {
   const primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
   const editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
-  const showTopToolbar = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode._showTopToolbar');
   const hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
   const interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
   return {
@@ -62,8 +61,7 @@ const useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(plug
       components: primaryToolbarComponents
     },
     editorViewModeState: !editorViewMode ? undefined : {
-      mode: editorViewMode,
-      _showTopToolbar: showTopToolbar
+      mode: editorViewMode
     },
     interactionState: hasHadInteraction === undefined || interactionState === undefined ? undefined : {
       hasHadInteraction,
@@ -72,7 +70,7 @@ const useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(plug
   };
 });
 export const FullPageEditor = props => {
-  var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _scrollContentContain4, _scrollContentContain5, _wrapperElementRef$cu;
+  var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
   const wrapperElementRef = useMemo(() => props.innerRef, [props.innerRef]);
   const scrollContentContainerRef = useRef(null);
   const showKeyline = useShowKeyline(scrollContentContainerRef);
@@ -110,23 +108,6 @@ export const FullPageEditor = props => {
     primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
   }
   let isEditorToolbarHidden = fg('platform_editor_sync_editor_view_mode_state') ? viewMode === 'view' : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  if (props.__livePage && !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 (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;
-      }
-    }
-  }
   const {
     customPrimaryToolbarComponents
   } = props;
@@ -158,10 +139,7 @@ export const FullPageEditor = props => {
     ,
     className: "akEditor",
     ref: wrapperElementRef
-  }, !editorExperiment('live_pages_graceful_edit', 'control') && jsx("div", {
-    css: hiddenStyle,
-    "data-hidden": isEditorToolbarHidden
-  }, jsx(FullPageToolbar, {
+  }, !isEditorToolbarHidden && jsx(FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,
@@ -188,33 +166,6 @@ export const FullPageEditor = props => {
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags
-  })), editorExperiment('live_pages_graceful_edit', 'control') && !isEditorToolbarHidden && jsx(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
   }), jsx(FullPageContentArea, {
     editorAPI: editorAPI,
     ref: scrollContentContainerRef,
@@ -242,16 +193,4 @@ export const FullPageEditor = props => {
     viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
     hasHadInteraction: hasHadInteraction
   })));
-};
-const hiddenStyle = 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/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -86,14 +86,11 @@ const Content = /*#__PURE__*/React.forwardRef((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
     contentArea,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    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
     contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
     ref: containerRef
-    // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
-    ,
-    className: !editorExperiment('live_pages_graceful_edit', 'control') && props.isEditorToolbarHidden ? 'ak-editor-content-area-no-toolbar' : undefined
   }, jsx("div", {
     css:
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js

@@ -13,7 +13,7 @@ import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/edi
 import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
-import { GRID_GUTTER, blockMarksSharedStyles, dateSharedStyle, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles, paragraphSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
+import { GRID_GUTTER, dateSharedStyle, getSmartCardSharedStyles, listsSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, textColorStyles, unsupportedStyles } from '@atlaskit/editor-common/styles';
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
 import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
@@ -34,15 +34,21 @@ import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh as vani
 import { aiPanelBaseStyles, aiPanelDarkStyles } from './styles/ai-panel';
 import { annotationStyles } from './styles/annotationStyles';
 import { backgroundColorStyles } from './styles/backgroundColorStyles';
+import { blockMarksStyles } from './styles/blockMarksStyles';
 import { codeBlockStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
 import { codeMarkStyles } from './styles/codeMarkStyles';
 import { embedCardStyles } from './styles/embedCardStyles';
 import { firstBlockNodeStyles, firstBlockNodeStylesOld } from './styles/firstBlockNodeStyles';
+import { gridStyles } from './styles/gridStyles';
+import { indentationStyles } from './styles/indentationStyles';
 import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
 import { linkStyles, linkStylesOld } from './styles/link';
 import { mediaStyles } from './styles/mediaStyles';
+import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
 import { resizerStyles, pragmaticResizerStyles } from './styles/resizerStyles';
 import { ruleStyles } from './styles/rule';
+import { tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
+import { whitespaceStyles } from './styles/whitespaceStyles';
 const vanillaMentionsStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.editor-mention-primitive': {
@@ -274,13 +280,11 @@ const contentStyles = () => css`
 		outline: none;
 		font-size: var(--ak-editor-base-font-size);
 
-		${whitespaceSharedStyles};
-
-		${paragraphSharedStyles()};
+		${whitespaceStyles};
 
 		${listsSharedStyles};
 
-		${indentationSharedStyles};
+		${indentationStyles};
 
 		${shadowSharedStyle};
 
@@ -386,7 +390,7 @@ const contentStyles = () => css`
 
   ${gridStyles}
 
-  ${blockMarksSharedStyles}
+  ${blockMarksStyles}
 
   ${dateSharedStyle}
 
@@ -574,7 +578,13 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref,
     css: [contentStyles(),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    layoutBaseStyles(),
+    layoutBaseStyles(), fg('platform_editor_typography_ugc') ? fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    paragraphStylesUGCRefreshed :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    paragraphStylesUGCModernized :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    paragraphStylesOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     fg('platform_editor_hyperlink_underline') ? linkStyles : linkStylesOld, editorExperiment('platform_editor_breakout_resizing', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -0,0 +1,23 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const blockMarksStyles = 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/es2019/ui/EditorContentContainer/styles/gridStyles.js

@@ -0,0 +1,35 @@
+import { css } from '@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
+export const gridStyles = 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 ${"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 ${"var(--ds-border-focused, #388BFF)"}`
+  }
+});

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

@@ -0,0 +1,38 @@
+import { css } from '@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
+export const indentationStyles = 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/es2019/ui/EditorContentContainer/styles/paragraphStyles.js

@@ -0,0 +1,47 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+const blockNodesVerticalMargin = '0.75rem';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const paragraphStylesUGCRefreshed = 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
+export const paragraphStylesUGCModernized = 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
+export const paragraphStylesOld = 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/es2019/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js

@@ -0,0 +1,73 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+const akEditorLineHeight = 1.714;
+export const 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
+export const tasksAndDecisionsStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.taskItemView-content-wrap, .${TaskDecisionSharedCssClassName.DECISION_CONTAINER}`]: {
+      position: 'relative',
+      minWidth: 48
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${TaskDecisionSharedCssClassName.DECISION_CONTAINER}`]: {
+      marginTop: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${TaskDecisionSharedCssClassName.TASK_CONTAINER}`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      "span[contenteditable='false']": {
+        height: `${akEditorLineHeight}em`
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${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: `${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: `${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)"} 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/es2019/ui/EditorContentContainer/styles/whitespaceStyles.js

@@ -0,0 +1,7 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const whitespaceStyles = css({
+  wordWrap: 'break-word',
+  whiteSpace: 'pre-wrap'
+});

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "207.7.0";
+export const version = "207.9.0";

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

@@ -8,6 +8,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';
@@ -19,6 +20,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';
@@ -481,6 +483,12 @@ export function ReactEditorView(props) {
   }, [editorView, shouldFocus, __livePage, mitigateScrollJump]);
   var handleEditorViewRef = useCallback(function (node) {
     if (!viewRef.current && node) {
+      // make sure this doesn't expose the experiment
+      if (editorExperiment('platform_editor_nodevisibility', true, {
+        exposure: false
+      })) {
+        nodeVisibilityManager(node).initialiseNodeObserver();
+      }
       var view = createEditorView(node);
       if (fg('platform_editor_reduce_scroll_jump_on_editor_start')) {
         if (mitigateScrollJump) {
@@ -551,6 +559,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]);

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

@@ -6,7 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
@@ -60,7 +60,6 @@ var useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(functi
 }, function (pluginInjectionApi) {
   var primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
   var editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
-  var showTopToolbar = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode._showTopToolbar');
   var hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
   var interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
   return {
@@ -68,8 +67,7 @@ var useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(functi
       components: primaryToolbarComponents
     },
     editorViewModeState: !editorViewMode ? undefined : {
-      mode: editorViewMode,
-      _showTopToolbar: showTopToolbar
+      mode: editorViewMode
     },
     interactionState: hasHadInteraction === undefined || interactionState === undefined ? undefined : {
       hasHadInteraction: hasHadInteraction,
@@ -78,7 +76,7 @@ var useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(functi
   };
 });
 export var FullPageEditor = function FullPageEditor(props) {
-  var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _scrollContentContain4, _scrollContentContain5, _wrapperElementRef$cu;
+  var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
   var wrapperElementRef = useMemo(function () {
     return props.innerRef;
   }, [props.innerRef]);
@@ -117,23 +115,6 @@ export var FullPageEditor = function FullPageEditor(props) {
     primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
   }
   var isEditorToolbarHidden = fg('platform_editor_sync_editor_view_mode_state') ? viewMode === 'view' : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  if (props.__livePage && !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 (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 (editorExperiment('platform_editor_controls', 'variant1', {
     exposure: true
@@ -163,10 +144,7 @@ export var FullPageEditor = function FullPageEditor(props) {
     ,
     className: "akEditor",
     ref: wrapperElementRef
-  }, !editorExperiment('live_pages_graceful_edit', 'control') && jsx("div", {
-    css: hiddenStyle,
-    "data-hidden": isEditorToolbarHidden
-  }, jsx(FullPageToolbar, {
+  }, !isEditorToolbarHidden && jsx(FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,
@@ -193,33 +171,6 @@ export var FullPageEditor = function FullPageEditor(props) {
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags
-  })), editorExperiment('live_pages_graceful_edit', 'control') && !isEditorToolbarHidden && jsx(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
   }), jsx(FullPageContentArea, {
     editorAPI: editorAPI,
     ref: scrollContentContainerRef,
@@ -247,16 +198,4 @@ export var FullPageEditor = function FullPageEditor(props) {
     viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
     hasHadInteraction: hasHadInteraction
   })));
-};
-var hiddenStyle = 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/esm/ui/Appearance/FullPage/FullPageContentArea.js

@@ -91,14 +91,11 @@ var Content = /*#__PURE__*/React.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
     contentArea,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    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
     contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
     ref: containerRef
-    // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-classname-prop
-    ,
-    className: !editorExperiment('live_pages_graceful_edit', 'control') && props.isEditorToolbarHidden ? 'ak-editor-content-area-no-toolbar' : undefined
   }, jsx("div", {
     css:
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values