@atlaskit/editor-core 207.11.1 → 207.12.0

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

@@ -1,5 +1,5 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
-import { css } from '@emotion/react';
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
 // copied from packages/editor/editor-shared-styles/src/consts/consts.ts
 const akEditorLineHeight = 1.714;
 // copied from packages/editor/editor-common/src/styles/shared/smart-card.ts
@@ -10,20 +10,121 @@ const blockNodesVerticalMargin = '0.75rem';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const listsStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror li': {
-    position: 'relative',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '& > p:not(:first-child)': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      margin: `${"var(--ds-space-050, 4px)"} 0 0 0`
-    },
-    /* In SSR the above rule will apply to all p tags because first-child would be a style tag.
-    	The following rule resets the first p tag back to its original margin
-    	defined in packages/editor/editor-common/src/styles/shared/paragraph.ts */
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '& > style:first-child + p': {
-      marginTop: blockNodesVerticalMargin
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    /* =============== INDENTATION SPACING ========= */
+
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ul, ol': {
+      boxSizing: 'border-box',
+      paddingLeft: `var(--ed--list--item-counter--padding, 24px)`
+    },
+    // Firefox does not handle empty block element inside li tag.
+    // If there is not block element inside li tag,	then firefox sets inherited height to li
+    // However, if there is any block element and if it's empty	(or has empty inline element) then
+    // firefox sets li tag height to zero.
+    //
+    // More details at
+    // https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.ua-firefox': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      'ul, ol': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        'li p:empty, li p > span:empty': {
+          display: 'inline-block'
+        }
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-ol, .ak-ul': {
+      // Ensures list item content adheres to the list's margin instead
+      // of filling the entire block row. This is important to allow
+      // clicking interactive elements which are floated next to a list.
+      //
+      // For some history and context on this block, see PRs related to tickets.:
+      // @see ED-6551 - original issue.
+      // @see ED-7015 - follow up issue.
+      // @see ED-7447 - flow-root change.
+      //
+      // @see https://css-tricks.com/display-flow-root/
+      //
+      // For older browsers the do not support flow-root. */
+      // stylelint-disable declaration-block-no-duplicate-properties */
+      display: 'flow-root'
+      /* stylelint-enable declaration-block-no-duplicate-properties */
+    },
+    /* =============== INDENTATION AESTHETICS ========= */
+
+    // We support nested lists up to six levels deep.
+
+    /*  ======== LEGACY LISTS ======== */
+
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ul, ul ul ul ul': {
+      listStyleType: 'disc'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ul ul, ul ul ul ul ul': {
+      listStyleType: 'circle'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ul ul ul, ul ul ul ul ul ul': {
+      listStyleType: 'square'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ol, ol ol ol ol': {
+      listStyleType: 'decimal'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ol ol, ol ol ol ol ol': {
+      listStyleType: 'lower-alpha'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ol ol ol, ol ol ol ol ol ol': {
+      listStyleType: 'lower-roman'
+    },
+    /* ======== PREDICTABLE LISTS ======== */
+
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "ol[data-indent-level='1'], ol[data-indent-level='4']": {
+      listStyleType: 'decimal'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "ol[data-indent-level='2'], ol[data-indent-level='5']": {
+      listStyleType: 'lower-alpha'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "ol[data-indent-level='3'], ol[data-indent-level='6']": {
+      listStyleType: 'lower-roman'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "ul[data-indent-level='1'], ul[data-indent-level='4']": {
+      listStyleType: 'disc'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "ul[data-indent-level='2'], ul[data-indent-level='5']": {
+      listStyleType: 'circle'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "ul[data-indent-level='3'], ul[data-indent-level='6']": {
+      listStyleType: 'square'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    li: {
+      position: 'relative',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '& > p:not(:first-child)': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        margin: `${"var(--ds-space-050, 4px)"} 0 0 0`
+      },
+      /* In SSR the above rule will apply to all p tags because first-child would be a style tag.
+      	The following rule resets the first p tag back to its original margin
+      	defined in packages/editor/editor-common/src/styles/shared/paragraph.ts */
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '& > style:first-child + p': {
+        marginTop: blockNodesVerticalMargin
+      }
     }
   }
 });

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

@@ -209,6 +209,57 @@ export const resizerStyles = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const pragmaticResizerStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.fabric-editor-breakout-mark': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="codeBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-left': {
+        left: '-12px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-right': {
+        right: '-12px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: 'calc(100% - 12px)'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="expand"]), &:has([data-prosemirror-node-name="layoutSection"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-left': {
+        left: '-32px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-right': {
+        right: '-32px'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="expand"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: 'calc(100% - 4px)'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="layoutSection"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: 'calc(100% - 8px)'
+      }
+    },
+    // the first node in the document always has margin-top = 0
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has(.first-node-in-document)': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: '100%'
+      }
+    }
+  },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle': {
     position: 'relative',
@@ -217,7 +268,7 @@ export const pragmaticResizerStyles = css({
     justifyContent: 'center',
     height: '100%',
     width: 7,
-    alignSelf: 'center',
+    alignSelf: 'end',
     gridRow: 1,
     gridColumn: 1,
     cursor: 'col-resize',
@@ -233,13 +284,11 @@ export const pragmaticResizerStyles = css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-left': {
-    justifySelf: 'start',
-    left: -20
+    justifySelf: 'start'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-right': {
-    justifySelf: 'end',
-    right: -20
+    justifySelf: 'end'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-inner': {

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

@@ -0,0 +1,200 @@
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles */
+/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
+import { css, keyframes } from '@emotion/react';
+const pulseIn = keyframes({
+  '0%, 100%': {
+    transform: 'scaleX(0)',
+    opacity: 0
+  },
+  '13%': {
+    transform: 'scaleX(1.4) scaleY(1.4)',
+    opacity: 1
+  },
+  '20%, 85%': {
+    transform: 'scaleX(1) scaleY(1)',
+    opacity: 1
+  }
+});
+const pulseOut = keyframes({
+  '0%, 90%, 100%': {
+    transform: 'scaleX(1)',
+    opacity: 1
+  },
+  '10%, 80%': {
+    transform: 'scaleX(0)',
+    opacity: 0
+  }
+});
+export const telepointerColorAndCommonStyle = css({
+  '.ProseMirror .telepointer': {
+    position: 'relative',
+    transition: 'opacity 200ms',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&.telepointer-selection:not(.inlineNodeView)': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 1.2,
+      pointerEvents: 'none',
+      userSelect: 'none'
+    },
+    '&.telepointer-dim': {
+      opacity: 0.2
+    },
+    '&.color-0': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-red-bolder, #C9372C)"
+    },
+    '&.color-1': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-bolder, #0C66E4)"
+    },
+    '&.color-2': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-green-bolder, #1F845A)"
+    },
+    '&.color-3': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-bolder, #946F00)"
+    },
+    '&.color-4': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-bolder, #6E5DC6)"
+    },
+    '&.color-5': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-bolder, #AE4787)"
+    },
+    '&.color-6': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-bolder, #227D9B)"
+    },
+    '&.color-7': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-bolder, #C25100)"
+    },
+    '&.color-8': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-lime-bolder, #5B7F24)"
+    },
+    '&.color-9': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-gray-bolder, #626F86)"
+    },
+    '&.color-10': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-subtle, #579DFF)"
+    },
+    '&.color-11': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-red-subtle, #F87168)"
+    },
+    '&.color-12': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-subtle, #FEA362)"
+    },
+    '&.color-13': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-subtle, #F5CD47)"
+    },
+    '&.color-14': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-green-subtle, #4BCE97)"
+    },
+    '&.color-15': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+    },
+    '&.color-16': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-subtle, #9F8FEF)"
+    },
+    '&.color-17': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-subtle, #E774BB)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'html:not([data-color-mode=dark]) &': {
+      '--telepointer-participant-background-first-stop': '-850000%',
+      '--telepointer-participant-background-second-stop': '150000%'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'html[data-color-mode=dark] &': {
+      '--telepointer-participant-background-first-stop': '-800000%',
+      '--telepointer-participant-background-second-stop': '200000%'
+    },
+    '&[class*="color-"]': {
+      background: 'linear-gradient(to bottom, var(--telepointer-participant-bg-color) var(--telepointer-participant-background-first-stop), transparent var(--telepointer-participant-background-second-stop))',
+      '&::after': {
+        backgroundColor: 'var(--telepointer-participant-bg-color)',
+        color: 'var(--telepointer-participant-text-color)',
+        borderColor: 'var(--telepointer-participant-bg-color)'
+      }
+    }
+  }
+});
+export const telepointerStyle = css({
+  '.ProseMirror .telepointer': {
+    '&.telepointer-selection-badge': {
+      '.telepointer-initial, .telepointer-fullname': {
+        position: 'absolute',
+        display: 'block',
+        userSelect: 'none',
+        whiteSpace: 'pre',
+        top: -14,
+        left: 0,
+        font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+        paddingLeft: "var(--ds-space-050, 4px)",
+        paddingRight: "var(--ds-space-050, 4px)",
+        color: "var(--ds-text-inverse, #FFFFFF)",
+        borderRadius: '0 2px 2px 0'
+      },
+      '.telepointer-initial': {
+        opacity: 1,
+        transition: 'opacity 0.15s ease-out'
+      },
+      '.telepointer-fullname': {
+        opacity: 0,
+        transform: 'scaleX(0)',
+        transformOrigin: 'top left',
+        transition: 'transform 0.15s ease-out, opacity 0.15s ease-out'
+      }
+    },
+    '&.telepointer-pulse-animate': {
+      '.telepointer-initial': {
+        animation: `${pulseOut} 2s ease-in-out`
+      },
+      '.telepointer-fullname': {
+        animation: `${pulseIn} 2s ease-in-out`
+      }
+    },
+    '&:hover': {
+      '.telepointer-initial': {
+        opacity: 0,
+        transitionDelay: '150ms'
+      },
+      '.telepointer-fullname': {
+        transform: 'scaleX(1)',
+        opacity: 1,
+        zIndex: 1
+      }
+    }
+  }
+});
+export const telepointerStyleWithInitialOnly = css({
+  '.ProseMirror .telepointer': {
+    '&.telepointer-selection-badge::after': {
+      content: 'attr(data-initial)',
+      position: 'absolute',
+      display: 'block',
+      top: -14,
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      fontSize: '0.5625rem',
+      padding: "var(--ds-space-025, 2px)",
+      color: "var(--ds-text-inverse, #FFFFFF)",
+      left: 0,
+      borderRadius: '2px 2px 2px 0',
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 'initial'
+    }
+  }
+});

package/dist/es2019/version-wrapper.js

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

package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js

@@ -12,9 +12,8 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx, useTheme } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/editor-common/collab';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
-import { GRID_GUTTER, listsSharedStyles } from '@atlaskit/editor-common/styles';
+import { GRID_GUTTER } 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';
@@ -54,6 +53,7 @@ import { ruleStyles } from './styles/rule';
 import { shadowStyles } from './styles/shadowStyles';
 import { linkingVisualRefreshV1Styles, smartCardStyles, smartLinksInLivePagesStyles, smartLinksInLivePagesStylesOld } from './styles/smartCardStyles';
 import { tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
+import { telepointerColorAndCommonStyle, telepointerStyle, telepointerStyleWithInitialOnly } from './styles/telepointerStyles';
 import { textColorStyles } from './styles/textColorStyles';
 import { unsupportedStyles } from './styles/unsupportedStyles';
 import { whitespaceStyles } from './styles/whitespaceStyles';
@@ -98,7 +98,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var contentStyles = function contentStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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  // 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  ", "\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"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceStyles, listsSharedStyles, indentationStyles, shadowStyles, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles, blocktypeStyles(), codeMarkStyles, textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, tasksAndDecisionsStyles, gridStyles, blockMarksStyles, dateStyles, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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\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  /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\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  // 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  ", "\n\n\t.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"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceStyles, indentationStyles, shadowStyles, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles, blocktypeStyles(), codeMarkStyles, textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, telepointerColorAndCommonStyle, gapCursorStyles, panelStyles(), mentionsStyles, tasksAndDecisionsStyles, gridStyles, blockMarksStyles, dateStyles, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaTaskItemStyles, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false

package/dist/esm/ui/EditorContentContainer/styles/list.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
-import { css } from '@emotion/react';
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
 // copied from packages/editor/editor-shared-styles/src/consts/consts.ts
 var akEditorLineHeight = 1.714;
 // copied from packages/editor/editor-common/src/styles/shared/smart-card.ts
@@ -11,20 +11,121 @@ var blockNodesVerticalMargin = '0.75rem';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export var listsStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror li': {
-    position: 'relative',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '& > p:not(:first-child)': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      margin: "var(--ds-space-050, 4px)".concat(" 0 0 0")
-    },
-    /* In SSR the above rule will apply to all p tags because first-child would be a style tag.
-    	The following rule resets the first p tag back to its original margin
-    	defined in packages/editor/editor-common/src/styles/shared/paragraph.ts */
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '& > style:first-child + p': {
-      marginTop: blockNodesVerticalMargin
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    /* =============== INDENTATION SPACING ========= */
+
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ul, ol': {
+      boxSizing: 'border-box',
+      paddingLeft: "var(--ed--list--item-counter--padding, 24px)"
+    },
+    // Firefox does not handle empty block element inside li tag.
+    // If there is not block element inside li tag,	then firefox sets inherited height to li
+    // However, if there is any block element and if it's empty	(or has empty inline element) then
+    // firefox sets li tag height to zero.
+    //
+    // More details at
+    // https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.ua-firefox': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      'ul, ol': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        'li p:empty, li p > span:empty': {
+          display: 'inline-block'
+        }
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-ol, .ak-ul': {
+      // Ensures list item content adheres to the list's margin instead
+      // of filling the entire block row. This is important to allow
+      // clicking interactive elements which are floated next to a list.
+      //
+      // For some history and context on this block, see PRs related to tickets.:
+      // @see ED-6551 - original issue.
+      // @see ED-7015 - follow up issue.
+      // @see ED-7447 - flow-root change.
+      //
+      // @see https://css-tricks.com/display-flow-root/
+      //
+      // For older browsers the do not support flow-root. */
+      // stylelint-disable declaration-block-no-duplicate-properties */
+      display: 'flow-root'
+      /* stylelint-enable declaration-block-no-duplicate-properties */
+    },
+    /* =============== INDENTATION AESTHETICS ========= */
+
+    // We support nested lists up to six levels deep.
+
+    /*  ======== LEGACY LISTS ======== */
+
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ul, ul ul ul ul': {
+      listStyleType: 'disc'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ul ul, ul ul ul ul ul': {
+      listStyleType: 'circle'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ul ul ul, ul ul ul ul ul ul': {
+      listStyleType: 'square'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ol, ol ol ol ol': {
+      listStyleType: 'decimal'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ol ol, ol ol ol ol ol': {
+      listStyleType: 'lower-alpha'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'ol ol ol, ol ol ol ol ol ol': {
+      listStyleType: 'lower-roman'
+    },
+    /* ======== PREDICTABLE LISTS ======== */
+
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "ol[data-indent-level='1'], ol[data-indent-level='4']": {
+      listStyleType: 'decimal'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "ol[data-indent-level='2'], ol[data-indent-level='5']": {
+      listStyleType: 'lower-alpha'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "ol[data-indent-level='3'], ol[data-indent-level='6']": {
+      listStyleType: 'lower-roman'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "ul[data-indent-level='1'], ul[data-indent-level='4']": {
+      listStyleType: 'disc'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "ul[data-indent-level='2'], ul[data-indent-level='5']": {
+      listStyleType: 'circle'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "ul[data-indent-level='3'], ul[data-indent-level='6']": {
+      listStyleType: 'square'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    li: {
+      position: 'relative',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '& > p:not(:first-child)': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        margin: "var(--ds-space-050, 4px)".concat(" 0 0 0")
+      },
+      /* In SSR the above rule will apply to all p tags because first-child would be a style tag.
+      	The following rule resets the first p tag back to its original margin
+      	defined in packages/editor/editor-common/src/styles/shared/paragraph.ts */
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '& > style:first-child + p': {
+        marginTop: blockNodesVerticalMargin
+      }
     }
   }
 });