@atlaskit/editor-core 207.19.0 → 207.19.2

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

@@ -0,0 +1,346 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+import { blanketSelectionStyles, boxShadowSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var extensionStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.multiBodiedExtensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > .multiBodiedExtension--container': {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
+      backgroundColor: "var(--ds-background-danger, #FFECEB)"
+    },
+    // ...extensionLabelStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > div > .extension-label': {
+      backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+      color: "var(--ds-text-danger, #AE2E24)",
+      opacity: 1,
+      boxShadow: 'none'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > div > .extension-label': {
+      backgroundColor: "var(--ds-background-selected, #E9F2FF)",
+      color: "var(--ds-text-selected, #0C66E4)",
+      opacity: 1,
+      boxShadow: 'none'
+    },
+    /* Targets the icon for bodied macro styling in button label */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > div > .extension-label > span': {
+      display: 'inline'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > div .extension-label > span': {
+      display: 'inline'
+    },
+    /* Start of bodied extension edit toggle styles */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container': {
+      opacity: 1
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > .extension-edit-toggle-container': {
+      opacity: 1
+    },
+    /* In view mode of the bodied macro, we never want to show the extension label */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger.ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
+      opacity: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
+      opacity: 0
+    },
+    /* .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger.ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container > .extension-edit-toggle': {
+      backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+      color: "var(--ds-text-danger, #AE2E24)",
+      boxShadow: 'none'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&.danger > span > .with-danger-overlay': {
+      backgroundColor: 'transparent',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.multiBodiedExtension--overlay': {
+        // ...dangerOverlayStyles
+        opacity: 0.3,
+        backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      '& > span > .multiBodiedExtension--container': [
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      boxShadowSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      blanketSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      hideNativeBrowserTextSelectionStyles]
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.multiBodiedExtension--container': {
+      width: '100%',
+      maxWidth: '100%' // ensure width can't go over 100%
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.inlineExtensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > .extension-container': {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
+      backgroundColor: "var(--ds-background-danger, #FFECEB)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > .with-danger-overlay': {
+      /* If the macro turned used to red before, not setting the background to be transparent will cause the
+      danger state to have two layers of red which we don't want. */
+      backgroundColor: 'transparent',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.extension-overlay': {
+        // ...dangerOverlayStyles
+        opacity: 0.3,
+        backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      '& > span > .extension-container': [
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      boxShadowSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      hideNativeBrowserTextSelectionStyles]
+    },
+    // ...extensionLabelStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > div > .extension-label': {
+      backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+      color: "var(--ds-text-danger, #AE2E24)",
+      opacity: 1,
+      boxShadow: 'none'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > div > .extension-label': {
+      backgroundColor: "var(--ds-background-selected, #E9F2FF)",
+      color: "var(--ds-text-selected, #0C66E4)",
+      opacity: 1,
+      boxShadow: 'none'
+    },
+    /* Targets the icon for bodied macro styling in button label */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > div > .extension-label > span': {
+      display: 'inline'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > div .extension-label > span': {
+      display: 'inline'
+    },
+    /* Start of bodied extension edit toggle styles */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container': {
+      opacity: 1
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > .extension-edit-toggle-container': {
+      opacity: 1
+    },
+    /* In view mode of the bodied macro, we never want to show the extension label */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger.ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
+      opacity: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
+      opacity: 0
+    },
+    /* .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger.ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container > .extension-edit-toggle': {
+      backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+      color: "var(--ds-text-danger, #AE2E24)",
+      boxShadow: 'none'
+    }
+  },
+  /* This is referenced in the toDOM of a bodied extension and is used to put
+  label content into the bodied extension.
+  We do this so that we don't serialise the label (which causes the label to be
+  copied to the clipboard causing copy-paste issues). */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.bodied-extension-to-dom-label::after': {
+    content: 'attr(data-bodied-extension-label)'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.extensionView-content-wrap, .multiBodiedExtensionView-content-wrap, .bodiedExtensionView-content-wrap': {
+    margin: "0.75rem 0",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:first-of-type': {
+      marginTop: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:last-of-type': {
+      marginBottom: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      '& > span > .extension-container': [
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      boxShadowSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      hideNativeBrowserTextSelectionStyles]
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > .extension-container': {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
+      backgroundColor: "var(--ds-background-danger, #FFECEB)"
+    },
+    // ...extensionLabelStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > div > .extension-label': {
+      backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+      color: "var(--ds-text-danger, #AE2E24)",
+      opacity: 1,
+      boxShadow: 'none'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > div > .extension-label': {
+      backgroundColor: "var(--ds-background-selected, #E9F2FF)",
+      color: "var(--ds-text-selected, #0C66E4)",
+      opacity: 1,
+      boxShadow: 'none'
+    },
+    /* Targets the icon for bodied macro styling in button label */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger > span > div > .extension-label > span': {
+      display: 'inline'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > div .extension-label > span': {
+      display: 'inline'
+    },
+    /* Start of bodied extension edit toggle styles */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container': {
+      opacity: 1
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > .extension-edit-toggle-container': {
+      opacity: 1
+    },
+    /* In view mode of the bodied macro, we never want to show the extension label */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger.ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
+      opacity: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.always-hide-label': {
+      opacity: 0
+    },
+    /* .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not(.danger).ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger.ak-editor-selected-node > span > div > .extension-label.with-bodied-macro-live-page-styles': {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.danger.ak-editor-selected-node > span > .extension-edit-toggle-container > .extension-edit-toggle': {
+      backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+      color: "var(--ds-text-danger, #AE2E24)",
+      boxShadow: 'none'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&.danger > span > .with-danger-overlay': {
+      backgroundColor: 'transparent',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.extension-overlay': {
+        // ...dangerOverlayStyles
+        opacity: 0.3,
+        backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.inline': {
+      // wordWrap: 'break-all' was previously used here, but break-all is not a valid CSS property of word-wrap.
+      // It was probably intended to be word-break: break-all, however I'm omitting it here for consistency with previous actual behavior.
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.extensionView-content-wrap .extension-container': {
+    overflow: 'hidden',
+    /* Don't hide overflow for editors inside extensions. */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has(.extension-editable-area)': {
+      overflow: 'visible'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.bodiedExtensionView-content-wrap .extensionView-content-wrap .extension-container': {
+    width: '100%',
+    maxWidth: '100%' // ensure width can't go over 100%
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  "[data-mark-type='fragment']": {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
+      margin: '0.75rem 0'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "& > [data-mark-type='dataConsumer']": {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
+        margin: '0.75rem 0'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:first-child': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
+        marginTop: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      "& > [data-mark-type='dataConsumer']": {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
+          marginTop: 0
+        }
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:nth-last-of-type(-n + 2):not(:first-of-type)': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
+        marginBottom: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      "& > [data-mark-type='dataConsumer']": {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '& > .extensionView-content-wrap, & > .bodiedExtensionView-content-wrap': {
+          marginBottom: 0
+        }
+      }
+    }
+  }
+});

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

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+// Make sure the first floating toolbar button has focus ring when focused via .focus()
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var firstFloatingToolbarButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'button.first-floating-toolbar-button:focus': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+  }
+});

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

@@ -0,0 +1,14 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+
+// Originally copied from scrollStyles in packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var fullPageEditorStyles = css({
+  flexGrow: 1,
+  height: '100%',
+  overflowY: 'scroll',
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  scrollBehavior: 'smooth'
+});

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

@@ -0,0 +1,91 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, keyframes } from '@emotion/react';
+var gapCursorBlink = keyframes({
+  'from, to': {
+    opacity: 0
+  },
+  '50%': {
+    opacity: 1
+  }
+});
+export var hideCaretModifier = 'ProseMirror-hide-gapcursor';
+var gapCursorSelector = '.ProseMirror-gapcursor';
+var prosemirrorwidgetNotBlock = '.ProseMirror-widget:not([data-blocks-decoration-container="true"]):not([data-blocks-drag-handle-container="true"]):not([data-blocks-quick-insert-container="true"])';
+var wrapLeft = '[layout="wrap-left"]';
+var wrapRight = '[layout="wrap-right"]';
+var fixVerticalAlignmentSelector = "\n\t&:first-of-type + ul,\n\t&:first-of-type + span + ul,\n\t&:first-of-type + ol,\n\t&:first-of-type + span + ol,\n\t&:first-of-type + pre,\n\t&:first-of-type + span + pre,\n\t&:first-of-type + blockquote,\n\t&:first-of-type + span + blockquote\n";
+var twoImagesSideBySideFixSelector = "\n  ".concat(gapCursorSelector).concat(wrapLeft, " + span + ").concat(wrapLeft, ",\n  ").concat(gapCursorSelector).concat(wrapRight, " + span + ").concat(wrapRight, ",\n  ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + ").concat(wrapRight, ",\n  ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, ",\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + ").concat(wrapLeft, ",\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, ",\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, ",\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + span ").concat(wrapRight, ",\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, ",\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + span + ").concat(wrapLeft, ",\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector);
+var marginFixSelector = "\n  ".concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, " > div,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + span + ").concat(wrapRight, " > div,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, " > div,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + span + ").concat(wrapLeft, " > div,\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + ").concat(wrapLeft, " > div,\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " > div,\n  ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + ").concat(wrapRight, " > div,\n  ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " > div");
+var floatLeftFixSelector = "\n  ".concat(wrapLeft, " + ").concat(gapCursorSelector, ",\n  ").concat(wrapRight, " + ").concat(gapCursorSelector);
+var afterPresudoSelector = "\n  ".concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, "::after,\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, "::after,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, "::after,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + span + ").concat(wrapRight, "::after,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, "::after,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + span + ").concat(wrapLeft, "::after");
+var marginDeepChildrenFixSelector = "\n".concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, " + *,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + *,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + *,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + *,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + span + ").concat(wrapRight, " + *,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + span + ").concat(wrapLeft, " + *,\n  ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " + *,\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " + *,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, " + * > *,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + * > *,\n  ").concat(wrapLeft, " + ").concat(gapCursorSelector, " + span + ").concat(wrapRight, " + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursorSelector, " + span + ").concat(wrapLeft, " + * > *,\n  ").concat(gapCursorSelector, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " + * > *,\n  ").concat(gapCursorSelector, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " + * > *,\n  ").concat(prosemirrorwidgetNotBlock, " + ").concat(gapCursorSelector, " + *,\n  ").concat(prosemirrorwidgetNotBlock, " + ").concat(gapCursorSelector, " + span + *");
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var gapCursorStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': _defineProperty(_defineProperty(_defineProperty({}, "&.".concat(hideCaretModifier), {
+    caretColor: 'transparent'
+  }), gapCursorSelector, _defineProperty(_defineProperty({
+    display: 'none',
+    pointerEvents: 'none',
+    position: 'relative',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& span': {
+      caretColor: 'transparent',
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      display: 'block'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& span::after': {
+      animation: "1s ".concat(gapCursorBlink, " step-start infinite"),
+      borderLeft: '1px solid',
+      content: "''",
+      display: 'block',
+      position: 'absolute',
+      top: 0,
+      height: '100%'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.-left span::after': {
+      left: "var(--ds-space-negative-050, -4px)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.-right span::after': {
+      right: "var(--ds-space-negative-050, -4px)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& span[layout="full-width"], & span[layout="wide"], & span[layout="fixed-width"]': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: '50%',
+      transform: 'translateX(-50%)'
+    }
+  }, "&".concat(wrapRight), {
+    float: 'right'
+  }), fixVerticalAlignmentSelector, {
+    marginTop: 0
+  })), "&.ProseMirror-focused ".concat(gapCursorSelector), {
+    display: 'block',
+    borderColor: 'transparent'
+  })
+}, twoImagesSideBySideFixSelector, {
+  clear: 'none'
+}), marginFixSelector, {
+  marginRight: 0,
+  marginLeft: 0,
+  marginBottom: 0
+}), floatLeftFixSelector, {
+  float: 'left'
+}), afterPresudoSelector, {
+  visibility: 'hidden',
+  display: 'block',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: 0,
+  content: "' '",
+  clear: 'both',
+  height: 0
+}), marginDeepChildrenFixSelector, {
+  marginTop: 0
+}));

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

@@ -2,37 +2,40 @@ import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-stylin
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var 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
+  '.ProseMirror': {
     // 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
+    '.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/esm/ui/EditorContentContainer/styles/inlineNodeViewSharedStyles.js

@@ -4,37 +4,40 @@ import { css } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export var InlineNodeViewSharedStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.inlineNodeView': {
-    display: 'inline',
-    userSelect: 'all',
-    whiteSpace: 'nowrap',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '& > *:not(.zeroWidthSpaceContainer)': {
-      whiteSpace: 'pre-wrap'
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.inlineNodeView': {
+      display: 'inline',
+      userSelect: 'all',
+      whiteSpace: 'nowrap',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '& > *:not(.zeroWidthSpaceContainer)': {
+        whiteSpace: 'pre-wrap'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& > .assistive': {
+        userSelect: 'none'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.ua-safari': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.inlineNodeView': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '&::selection, *::selection': {
+          background: 'transparent'
+        }
+      }
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '& > .assistive': {
+    '&.ua-chrome .inlineNodeView > span': {
       userSelect: 'none'
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.ua-safari': {
+    },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.inlineNodeView': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '&::selection, *::selection': {
-        background: 'transparent'
+    '.inlineNodeViewAddZeroWidthSpace': {
+      '&::after': {
+        content: "'\u200B'" // ZERO_WIDTH_SPACE
       }
     }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.ua-chrome .inlineNodeView > span': {
-    userSelect: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.inlineNodeViewAddZeroWidthSpace': {
-    '&::after': {
-      content: "'\u200B'" // ZERO_WIDTH_SPACE
-    }
   }
 });