@atlaskit/editor-core 207.3.0 → 207.5.0

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

@@ -0,0 +1,224 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _ProseMirror, _css;
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
+import { MediaSharedClassNames, richMediaClassName } from '@atlaskit/editor-common/styles';
+import { akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorSelectedBorderBoldSize, akEditorSelectedBoxShadow, akEditorSelectedNodeClassName, akEditorWrappedNodeZIndex } from '@atlaskit/editor-shared-styles';
+import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
+var wrappedMediaBreakoutPoint = 410;
+
+/**
+ * Reference Heights
+ *
+ * These heights enforce consistent sizes with media inline nodes due to
+ * inconsistencies with center aligned inline nodes and text.
+ *
+ * There is conversation about refactoring media inline nodes to conform to
+ * aligning correctly with the surrounding text.
+ *
+ * These constants originally came from `headingSizes` from the `theme` package
+ * and have been copied here to remove this package.
+ */
+var referenceHeights = {
+  p: 24 - 2,
+  h1: 32 + 4,
+  h2: 28 + 3,
+  h3: 24 + 1,
+  h4: 20 + 3,
+  h5: 16 + 4,
+  h6: 16 + 2
+};
+var inlineImageSelector = "> .mediaInlineView-content-wrap > .".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ", > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ", > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ", > :is(a, span[data-mark-type='border']) .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME);
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles,@atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+export var mediaStyles = css((_css = {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (_ProseMirror = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ProseMirror, "li .".concat(richMediaClassName), {
+    margin: 0
+  }), '&.ua-chrome li > .mediaSingleView-content-wrap::before', {
+    content: "''",
+    display: 'block',
+    height: 0
+  }), '&.ua-firefox', {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.mediaSingleView-content-wrap': {
+      userSelect: 'none'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.captionView-content-wrap': {
+      userSelect: 'text'
+    }
+  }), ".mediaSingleView-content-wrap[layout^='wrap-']", {
+    position: 'relative',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-imported-style-values
+    zIndex: akEditorWrappedNodeZIndex,
+    maxWidth: '100%',
+    /* overwrite default Prosemirror setting making it clear: both */
+    clear: 'inherit'
+  }), ".mediaSingleView-content-wrap[layout='center']", {
+    clear: 'both'
+  }), "table .".concat(richMediaClassName), {
+    marginTop: "var(--ds-space-150, 12px)",
+    marginBottom: "var(--ds-space-150, 12px)",
+    clear: 'both',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.image-wrap-left[data-layout], &.image-wrap-right[data-layout]': {
+      clear: 'none',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&:first-child': {
+        marginTop: "var(--ds-space-150, 12px)"
+      }
+    }
+  }), ".".concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left"), {
+    clear: 'both'
+  }), ".".concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-right, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-right"), {
+    marginRight: 0,
+    marginLeft: 0
+  }), "@media all and (max-width: ".concat(wrappedMediaBreakoutPoint, "px)"), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "div.mediaSingleView-content-wrap[layout='wrap-left'], div.mediaSingleView-content-wrap[data-layout='wrap-left'], div.mediaSingleView-content-wrap[layout='wrap-right'], div.mediaSingleView-content-wrap[data-layout='wrap-right']": {
+      float: 'none',
+      overflow: 'auto',
+      margin: "var(--ds-space-150, 12px)".concat(" 0")
+    }
+  }), "& [layout='full-width'] .".concat(richMediaClassName, ", & [layout='wide'] .").concat(richMediaClassName), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginLeft: '50%',
+    transform: 'translateX(-50%)'
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ProseMirror, ".media-extended-resize-experience[layout^='wrap-']", {
+    // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle
+    // to prevent scroll bar
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    overflow: 'visible !important'
+  }), "& [layout^='wrap-'] + [layout^='wrap-']", _defineProperty({
+    clear: 'none',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "& + p, & + div[class^='fabric-editor-align'], & + ul, & + ol, & + h1, & + h2, & + h3, & + h4, & + h5, & + h6": {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles,@atlaskit/ui-styling-standard/no-unsafe-values
+      clear: 'both !important'
+    }
+  }, "& .".concat(richMediaClassName), {
+    marginLeft: 0,
+    marginRight: 0
+  })), ".".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights['p'],
+    transform: 'translateY(-2px)'
+  }), "h1", _defineProperty({}, inlineImageSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights.h1,
+    transform: "translateY(-3px)"
+  })), "h2", _defineProperty({}, inlineImageSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights.h2,
+    transform: "translateY(-3px)"
+  })), "h3", _defineProperty({}, inlineImageSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights.h3,
+    transform: "translateY(-2px)"
+  })), "h4", _defineProperty({}, inlineImageSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights.h4,
+    transform: "translateY(-2px)"
+  })), "h5", _defineProperty({}, inlineImageSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights.h5,
+    transform: "translateY(-2px)"
+  })), "h6", _defineProperty({}, inlineImageSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    height: referenceHeights.h6,
+    transform: "translateY(-2px)"
+  })), ".mediaSingleView-content-wrap[layout='wrap-left']", {
+    float: 'left'
+  }), _defineProperty(_defineProperty(_defineProperty(_ProseMirror, ".mediaSingleView-content-wrap[layout='wrap-right']", {
+    float: 'right'
+  }), ".mediaSingleView-content-wrap[layout='wrap-right'] + .mediaSingleView-content-wrap[layout='wrap-left']", {
+    clear: 'both'
+  }), '& > .mediaSingleView-content-wrap', {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.richMedia-resize-handle-right': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+      marginRight: "-".concat(akEditorMediaResizeHandlerPaddingWide, "px")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.richMedia-resize-handle-left': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+      marginLeft: "-".concat(akEditorMediaResizeHandlerPaddingWide, "px")
+    }
+  }))
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, ".".concat(MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT), {
+  padding: 0
+}), '.richMedia-resize-handle-right, .richMedia-resize-handle-left', {
+  display: 'flex',
+  flexDirection: 'column',
+  /* vertical align */
+  justifyContent: 'center'
+}), '.richMedia-resize-handle-right', {
+  alignItems: 'flex-end',
+  paddingRight: "var(--ds-space-150, 12px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  marginRight: "-".concat(akEditorMediaResizeHandlerPadding, "px")
+}), '.richMedia-resize-handle-left', {
+  alignItems: 'flex-start',
+  paddingLeft: "var(--ds-space-150, 12px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  marginLeft: "-".concat(akEditorMediaResizeHandlerPadding, "px")
+}), '.richMedia-resize-handle-right::after, .richMedia-resize-handle-left::after', {
+  content: "' '",
+  display: 'flex',
+  width: 3,
+  height: 64,
+  borderRadius: 6
+}), ".".concat(richMediaClassName, ":hover .richMedia-resize-handle-left::after, .").concat(richMediaClassName, ":hover .richMedia-resize-handle-right::after"), {
+  background: "var(--ds-border, #091E4224)"
+}), ".".concat(akEditorSelectedNodeClassName, " .richMedia-resize-handle-right::after, .").concat(akEditorSelectedNodeClassName, " .richMedia-resize-handle-left::after, .").concat(richMediaClassName, " .richMedia-resize-handle-right:hover::after, .").concat(richMediaClassName, " .richMedia-resize-handle-left:hover::after, .").concat(richMediaClassName, ".is-resizing .richMedia-resize-handle-right::after, .").concat(richMediaClassName, ".is-resizing .richMedia-resize-handle-left::after"), {
+  background: "var(--ds-border-focused, #388BFF)"
+}), '.__resizable_base__', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  left: 'unset !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  width: 'auto !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  height: 'auto !important'
+}), '.danger > div > div > .media-card-frame, .danger > span > a', {
+  backgroundColor: "var(--ds-background-danger, #FFECEB)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  boxShadow: "0px 0px 0px ".concat(akEditorSelectedBorderBoldSize, "px, ", "var(--ds-border-danger, #E2483D)"),
+  transition: 'background-color 0s, box-shadow 0s'
+}), '.danger', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(richMediaClassName, " .").concat(fileCardImageViewSelector, "::after"), {
+  border: "1px solid ".concat("var(--ds-border-danger, #E2483D)")
+}), ".".concat(richMediaClassName, " .").concat(inlinePlayerClassName, "::after"), {
+  border: "1px solid ".concat("var(--ds-border-danger, #E2483D)")
+}), ".".concat(richMediaClassName, " .").concat(newFileExperienceClassName), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)", " !important")
+}), '.richMedia-resize-handle-right::after, .richMedia-resize-handle-left::after', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  background: "var(--ds-icon-danger, #C9372C)".concat(" !important")
+}), '.resizer-handle-thumb', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  background: "var(--ds-icon-danger, #C9372C)".concat(" !important")
+}), 'div div .media-card-frame, .inlineCardView-content-wrap > span > a', {
+  backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
+  transition: "background-color 0s"
+}), 'div div .media-card-frame::after', {
+  boxShadow: 'none'
+})), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, '.warning', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(richMediaClassName, " .").concat(fileCardImageViewSelector, "::after"), {
+  border: "1px solid ".concat("var(--ds-border-warning, #E56910)")
+}), ".".concat(richMediaClassName, " .").concat(inlinePlayerClassName, "::after"), {
+  border: "1px solid ".concat("var(--ds-border-warning, #E56910)")
+}), ".".concat(richMediaClassName, " .").concat(newFileExperienceClassName), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-warning, #E56910)", " !important")
+}), '.resizer-handle-thumb', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  background: "var(--ds-icon-warning, #E56910)".concat(" !important")
+})), '.media-filmstrip-list-item', {
+  cursor: 'pointer'
+}), ".mediaGroupView-content-wrap.".concat(akEditorSelectedNodeClassName, " #newFileExperienceWrapper"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  boxShadow: akEditorSelectedBoxShadow
+}), '.ak-editor-no-interaction #newFileExperienceWrapper', {
+  boxShadow: 'none'
+})));

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

@@ -0,0 +1,203 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { css } from '@emotion/react'; // eslint-disable-line
+
+export var resizerItemClassName = 'resizer-item';
+export var resizerHoverZoneClassName = 'resizer-hover-zone';
+export var resizerExtendedZone = 'resizer-is-extended';
+export var resizerHandleClassName = 'resizer-handle';
+export var resizerHandleTrackClassName = "".concat(resizerHandleClassName, "-track");
+export var resizerHandleThumbClassName = "".concat(resizerHandleClassName, "-thumb");
+export var resizerDangerClassName = "".concat(resizerHandleClassName, "-danger");
+export var handleWrapperClass = 'resizer-handle-wrapper';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766, Seems perfectly safe to autofix, but comments would be lost…
+export var resizerStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(resizerItemClassName), _defineProperty({
+  willChange: 'width',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&:hover, &.display-handle': _defineProperty({}, "& > .".concat(handleWrapperClass, " > .").concat(resizerHandleClassName), {
+    visibility: 'visible',
+    opacity: 1
+  }),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.is-resizing': _defineProperty({}, "& .".concat(resizerHandleThumbClassName), {
+    background: "var(--ds-border-focused, #388BFF)"
+  })
+}, "&.".concat(resizerDangerClassName), _defineProperty({}, "& .".concat(resizerHandleThumbClassName), {
+  transition: 'none',
+  background: "var(--ds-icon-danger, #C9372C)"
+}))), ".".concat(resizerHandleClassName), {
+  display: 'flex',
+  visibility: 'hidden',
+  opacity: 0,
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 7,
+  transition: 'visibility 0.2s, opacity 0.2s',
+  // NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles
+  // into the tooltip
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  "& div[role='presentation']": {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: "var(--ds-space-negative-200, -16px)",
+    whiteSpace: 'normal'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.left': {
+    alignItems: 'flex-start'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.right': {
+    alignItems: 'flex-end'
+  },
+  // Handle Sizing
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.small': _defineProperty({}, "& .".concat(resizerHandleThumbClassName), {
+    height: 43
+  }),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.medium': _defineProperty({}, "& .".concat(resizerHandleThumbClassName), {
+    height: 64
+  }),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.large': _defineProperty({}, "& .".concat(resizerHandleThumbClassName), {
+    height: 96
+  }),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.clamped': _defineProperty({}, "& .".concat(resizerHandleThumbClassName), {
+    height: 'clamp(43px, calc(100% - 32px), 96px)'
+  }),
+  // Handle Alignment
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.sticky': _defineProperty({}, "& .".concat(resizerHandleThumbClassName), {
+    position: 'sticky',
+    top: "var(--ds-space-150, 12px)",
+    bottom: "var(--ds-space-150, 12px)"
+  }),
+  '&:hover': _defineProperty(_defineProperty({}, "& .".concat(resizerHandleThumbClassName), {
+    background: "var(--ds-border-focused, #388BFF)"
+  }), "& .".concat(resizerHandleTrackClassName), {
+    visibility: 'visible',
+    opacity: 0.5
+  })
+}), ".".concat(resizerHandleThumbClassName), {
+  content: "' '",
+  display: 'flex',
+  width: 3,
+  margin: "0 ".concat("var(--ds-space-025, 2px)"),
+  height: 64,
+  transition: 'background-color 0.2s',
+  borderRadius: 6,
+  border: 0,
+  padding: 0,
+  zIndex: 2,
+  outline: 'none',
+  minHeight: 24,
+  background: "var(--ds-border, #091E4224)",
+  '&:hover': {
+    cursor: 'col-resize'
+  },
+  '&:focus': {
+    background: "var(--ds-border-selected, #0C66E4)",
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      top: "var(--ds-space-negative-050, -4px)",
+      right: "var(--ds-space-negative-050, -4px)",
+      bottom: "var(--ds-space-negative-050, -4px)",
+      left: "var(--ds-space-negative-050, -4px)",
+      border: "2px solid ".concat("var(--ds-border-focused, #388BFF)"),
+      borderRadius: 'inherit',
+      zIndex: -1
+    }
+  }
+}), ".".concat(resizerHandleTrackClassName), {
+  visibility: 'hidden',
+  position: 'absolute',
+  width: 7,
+  height: 'calc(100% - 40px)',
+  borderRadius: 4,
+  opacity: 0,
+  transition: 'background-color 0.2s, visibility 0.2s, opacity 0.2s',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.none': {
+    background: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.shadow': {
+    background: "var(--ds-background-selected, #E9F2FF)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.full-height': {
+    background: "var(--ds-background-selected, #E9F2FF)",
+    height: '100%',
+    minHeight: 36
+  }
+}), '.ak-editor-selected-node', _defineProperty({}, "& .".concat(resizerHandleThumbClassName), {
+  background: "var(--ds-border-focused, #388BFF)"
+})), ".ak-editor-no-interaction .ak-editor-selected-node .".concat(resizerHandleClassName, ":not(:hover) .").concat(resizerHandleThumbClassName), {
+  background: "var(--ds-border, #091E4224)"
+}), ".".concat(resizerHoverZoneClassName), _defineProperty({
+  position: 'relative',
+  display: 'inline-block',
+  width: '100%'
+}, "&.".concat(resizerExtendedZone), {
+  padding: "0 ".concat("var(--ds-space-150, 12px)"),
+  left: "var(--ds-space-negative-150, -12px)"
+})), "table .".concat(resizerHoverZoneClassName, ", table .").concat(resizerHoverZoneClassName, ".").concat(resizerExtendedZone), {
+  padding: 'unset',
+  left: 'unset'
+}));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var pragmaticResizerStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.pm-breakout-resize-handle': {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    width: 7,
+    alignSelf: 'center',
+    gridRow: 1,
+    gridColumn: 1,
+    cursor: 'col-resize',
+    borderRadius: 4,
+    transition: 'background-color 0.2s, visibility 0.2s, opacity 0.2s',
+    '&:hover': {
+      background: "var(--ds-background-selected, #E9F2FF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.pm-breakout-resize-handle-inner': {
+        background: "var(--ds-border-focused, #388BFF)"
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.pm-breakout-resize-handle-left': {
+    justifySelf: 'start',
+    left: -20
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.pm-breakout-resize-handle-right': {
+    justifySelf: 'end',
+    right: -20
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.pm-breakout-resize-handle-inner': {
+    minWidth: 3,
+    // copied from resizeStyles.clamped
+    height: 'clamp(27px, calc(100% - 32px), 96px)',
+    background: "var(--ds-border, #091E4224)",
+    borderRadius: 6,
+    // sticky styles
+    position: 'sticky',
+    top: "var(--ds-space-150, 12px)",
+    bottom: "var(--ds-space-150, 12px)"
+  }
+});

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
-import { css } from "@emotion/react";
-import { akEditorSelectedNodeClassName } from "@atlaskit/editor-shared-styles";
+import { css } from '@emotion/react';
+import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export var ruleStyles = css(_defineProperty({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "207.3.0";
+export var version = "207.5.0";

package/dist/types/presets/default.d.ts

@@ -1,12 +1,15 @@
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
 import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { SelectionPluginOptions } from '@atlaskit/editor-common/selection';
-import type { EditorAppearance, FeatureFlags, HyperlinkPluginOptions, PerformanceTracking, QuickInsertPluginOptions, TextFormattingOptions } from '@atlaskit/editor-common/types';
+import type { EditorAppearance, FeatureFlags, PerformanceTracking } from '@atlaskit/editor-common/types';
 import type { BasePluginOptions } from '@atlaskit/editor-plugins/base';
 import type { BlockTypePluginOptions } from '@atlaskit/editor-plugins/block-type';
-import type { CodeBlockOptions } from '@atlaskit/editor-plugins/code-block';
+import type { CodeBlockPluginOptions } from '@atlaskit/editor-plugins/code-block';
+import { type HyperlinkPluginOptions } from '@atlaskit/editor-plugins/hyperlink';
 import type { PastePluginOptions } from '@atlaskit/editor-plugins/paste';
 import type { PlaceholderPluginOptions } from '@atlaskit/editor-plugins/placeholder';
+import type { QuickInsertPluginOptions } from '@atlaskit/editor-plugins/quick-insert';
+import type { TextFormattingPluginOptions } from '@atlaskit/editor-plugins/text-formatting';
 import type { TypeAheadPluginOptions } from '@atlaskit/editor-plugins/type-ahead';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { DefaultPresetBuilder } from './default-preset-type';
@@ -15,10 +18,10 @@ export type DefaultPresetPluginOptions = {
     base?: BasePluginOptions;
     blockType?: BlockTypePluginOptions;
     placeholder?: PlaceholderPluginOptions;
-    textFormatting?: TextFormattingOptions;
+    textFormatting?: TextFormattingPluginOptions;
     submitEditor?: (editorView: EditorView) => void;
     quickInsert?: QuickInsertPluginOptions;
-    codeBlock?: CodeBlockOptions;
+    codeBlock?: CodeBlockPluginOptions;
     selection?: SelectionPluginOptions;
     hyperlinkOptions?: HyperlinkPluginOptions;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
@@ -44,6 +47,13 @@ export type DefaultPresetPluginOptions = {
 /**
  * Note: The order that presets are added determines
  * their placement in the editor toolbar
+ * @param options
+ * @example
  */
 export declare function createDefaultPreset(options: DefaultPresetPluginOptions): DefaultPresetBuilder;
+/**
+ *
+ * @param props
+ * @example
+ */
 export declare function useDefaultPreset(props: DefaultPresetPluginOptions): DefaultPresetBuilder[];

package/dist/types/types/editor-props.d.ts

@@ -6,21 +6,22 @@ import type { ErrorReportingHandler } from '@atlaskit/editor-common/error-report
 import type { ExtensionHandlers, ExtensionProvider } from '@atlaskit/editor-common/extensions';
 import type { AllEditorPresetPluginTypes, AllPluginNames, EditorPresetBuilder } from '@atlaskit/editor-common/preset';
 import type { ContextIdentifierProvider, Providers, SearchProvider } from '@atlaskit/editor-common/provider-factory';
-import type { EditorAppearance, EmptyStateHandler, FeedbackInfo, LinkingOptions, PerformanceTracking, QuickInsertOptions, TextFormattingOptions, Transformer } from '@atlaskit/editor-common/types';
+import type { EditorAppearance, EmptyStateHandler, FeedbackInfo, LinkingOptions, PerformanceTracking, QuickInsertOptions, Transformer } from '@atlaskit/editor-common/types';
 import type { UseStickyToolbarType } from '@atlaskit/editor-common/ui';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { AnnotationProviders } from '@atlaskit/editor-plugins/annotation';
 import type { BlockTypePluginOptions } from '@atlaskit/editor-plugins/block-type';
-import type { CodeBlockOptions } from '@atlaskit/editor-plugins/code-block';
+import type { CodeBlockPluginOptions } from '@atlaskit/editor-plugins/code-block';
 import type { DatePluginOptions } from '@atlaskit/editor-plugins/date';
 import type { FindReplaceOptions } from '@atlaskit/editor-plugins/find-replace';
 import type { LayoutPluginOptions } from '@atlaskit/editor-plugins/layout';
-import type { MediaOptions, MediaState } from '@atlaskit/editor-plugins/media/types';
+import type { MediaPluginOptions, MediaState } from '@atlaskit/editor-plugins/media/types';
 import type { MentionPluginConfig } from '@atlaskit/editor-plugins/mentions';
 import type { PanelPluginConfig } from '@atlaskit/editor-plugins/panel';
-import type { PlaceholderTextOptions } from '@atlaskit/editor-plugins/placeholder-text';
+import type { PlaceholderTextPluginOptions } from '@atlaskit/editor-plugins/placeholder-text';
 import type { PluginConfig as TablesPluginConfig } from '@atlaskit/editor-plugins/table/types';
 import type { TextColorPluginConfig } from '@atlaskit/editor-plugins/text-color';
+import type { TextFormattingPluginOptions } from '@atlaskit/editor-plugins/text-formatting';
 import type { Node, Schema } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MentionProvider } from '@atlaskit/mention/resource';
@@ -160,7 +161,7 @@ export interface EditorNextProps extends EditorBaseProps, EditorSharedPropsWithP
      * Example:
      * ```ts
      * // In preset creation you can pass the props passed to the editor like this:
-     * preset.add([mediaPlugin, mediaOptions])
+     * preset.add([mediaPlugin, MediaPluginOptions])
      * ```
      *
      * Note: Props you pass to the media plugin via the preset do not re-render like in React.
@@ -173,7 +174,7 @@ export interface EditorNextProps extends EditorBaseProps, EditorSharedPropsWithP
      * editorApi?.media.actions.setProvider(mediaProvider);
      * ```
      */
-    media?: MediaOptions;
+    media?: MediaPluginOptions;
     assistiveDescribedBy?: string;
     emojiProvider?: Providers['emojiProvider'];
     taskDecisionProvider?: Promise<TaskDecisionProvider>;
@@ -207,7 +208,7 @@ export interface EditorPluginFeatureProps {
     allowPanel?: boolean | PanelPluginConfig;
     allowExtension?: boolean | ExtensionConfig;
     allowConfluenceInlineComment?: boolean;
-    allowTemplatePlaceholders?: boolean | PlaceholderTextOptions;
+    allowTemplatePlaceholders?: boolean | PlaceholderTextPluginOptions;
     allowDate?: boolean | DatePluginOptions;
     allowLayouts?: boolean | LayoutPluginOptions;
     allowStatus?: boolean | {
@@ -259,14 +260,14 @@ export interface EditorPluginFeatureProps {
     /** @deprecated Use linking.smartLinks prop instead. */
     smartLinks?: CardOptions;
     allowAnalyticsGASV3?: boolean;
-    codeBlock?: CodeBlockOptions;
-    textFormatting?: TextFormattingOptions;
+    codeBlock?: CodeBlockPluginOptions;
+    textFormatting?: TextFormattingPluginOptions;
     placeholder?: string;
     placeholderBracketHint?: string;
     /**
      *  Configure and extend editor linking behaviour
      */
     linking?: LinkingOptions;
-    media?: MediaOptions;
+    media?: MediaPluginOptions;
 }
 export {};

package/dist/types/ui/EditorContentContainer/styles/mediaStyles.d.ts

@@ -0,0 +1 @@
+export declare const mediaStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/EditorContentContainer/styles/resizerStyles.d.ts

@@ -0,0 +1,10 @@
+export declare const resizerItemClassName = "resizer-item";
+export declare const resizerHoverZoneClassName = "resizer-hover-zone";
+export declare const resizerExtendedZone = "resizer-is-extended";
+export declare const resizerHandleClassName = "resizer-handle";
+export declare const resizerHandleTrackClassName = "resizer-handle-track";
+export declare const resizerHandleThumbClassName = "resizer-handle-thumb";
+export declare const resizerDangerClassName = "resizer-handle-danger";
+export declare const handleWrapperClass = "resizer-handle-wrapper";
+export declare const resizerStyles: import("@emotion/react").SerializedStyles;
+export declare const pragmaticResizerStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/presets/default.d.ts

@@ -1,12 +1,15 @@
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
 import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { SelectionPluginOptions } from '@atlaskit/editor-common/selection';
-import type { EditorAppearance, FeatureFlags, HyperlinkPluginOptions, PerformanceTracking, QuickInsertPluginOptions, TextFormattingOptions } from '@atlaskit/editor-common/types';
+import type { EditorAppearance, FeatureFlags, PerformanceTracking } from '@atlaskit/editor-common/types';
 import type { BasePluginOptions } from '@atlaskit/editor-plugins/base';
 import type { BlockTypePluginOptions } from '@atlaskit/editor-plugins/block-type';
-import type { CodeBlockOptions } from '@atlaskit/editor-plugins/code-block';
+import type { CodeBlockPluginOptions } from '@atlaskit/editor-plugins/code-block';
+import { type HyperlinkPluginOptions } from '@atlaskit/editor-plugins/hyperlink';
 import type { PastePluginOptions } from '@atlaskit/editor-plugins/paste';
 import type { PlaceholderPluginOptions } from '@atlaskit/editor-plugins/placeholder';
+import type { QuickInsertPluginOptions } from '@atlaskit/editor-plugins/quick-insert';
+import type { TextFormattingPluginOptions } from '@atlaskit/editor-plugins/text-formatting';
 import type { TypeAheadPluginOptions } from '@atlaskit/editor-plugins/type-ahead';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { DefaultPresetBuilder } from './default-preset-type';
@@ -15,10 +18,10 @@ export type DefaultPresetPluginOptions = {
     base?: BasePluginOptions;
     blockType?: BlockTypePluginOptions;
     placeholder?: PlaceholderPluginOptions;
-    textFormatting?: TextFormattingOptions;
+    textFormatting?: TextFormattingPluginOptions;
     submitEditor?: (editorView: EditorView) => void;
     quickInsert?: QuickInsertPluginOptions;
-    codeBlock?: CodeBlockOptions;
+    codeBlock?: CodeBlockPluginOptions;
     selection?: SelectionPluginOptions;
     hyperlinkOptions?: HyperlinkPluginOptions;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
@@ -44,6 +47,13 @@ export type DefaultPresetPluginOptions = {
 /**
  * Note: The order that presets are added determines
  * their placement in the editor toolbar
+ * @param options
+ * @example
  */
 export declare function createDefaultPreset(options: DefaultPresetPluginOptions): DefaultPresetBuilder;
+/**
+ *
+ * @param props
+ * @example
+ */
 export declare function useDefaultPreset(props: DefaultPresetPluginOptions): DefaultPresetBuilder[];