@atlaskit/editor-core 207.2.1 → 207.4.0

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

@@ -0,0 +1,27 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const embedCardStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ".embedCardView-content-wrap[layout^='wrap-']": {
+      maxWidth: '100%',
+      position: 'relative',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      zIndex: 2
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ".embedCardView-content-wrap[layout='wrap-left']": {
+      float: 'left'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ".embedCardView-content-wrap[layout='wrap-right']": {
+      float: 'right'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ".embedCardView-content-wrap[layout='wrap-right'] + .embedCardView-content-wrap[layout='wrap-left']": {
+      clear: 'both'
+    }
+  }
+});

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

@@ -0,0 +1,357 @@
+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';
+const 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.
+ */
+const referenceHeights = {
+  p: 24 - 2,
+  h1: 32 + 4,
+  h2: 28 + 3,
+  h3: 24 + 1,
+  h4: 20 + 3,
+  h5: 16 + 4,
+  h6: 16 + 2
+};
+const inlineImageSelector = `> .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME}, > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME}, > .${INLINE_IMAGE_WRAPPER_CLASS_NAME}, > :is(a, span[data-mark-type='border']) .${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 const mediaStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-imported-style-values
+    [`li .${richMediaClassName}`]: {
+      margin: 0
+    },
+    // Hack for chrome to fix media single position inside a list when media is the first child
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.ua-chrome li > .mediaSingleView-content-wrap::before': {
+      content: "''",
+      display: 'block',
+      height: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.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'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    ".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'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    ".mediaSingleView-content-wrap[layout='center']": {
+      clear: 'both'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-imported-style-values
+    [`table .${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)"
+        }
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-imported-style-values
+    [`.${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-left`]: {
+      clear: 'both'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-imported-style-values
+    [`.${richMediaClassName}.image-wrap-left + .${richMediaClassName}.image-wrap-right, .${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-left, .${richMediaClassName}.image-wrap-left + .${richMediaClassName}.image-wrap-left, .${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-right`]: {
+      marginRight: 0,
+      marginLeft: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    [`@media all and (max-width: ${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)"} 0`
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`& [layout='full-width'] .${richMediaClassName}, & [layout='wide'] .${richMediaClassName}`]: {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: '50%',
+      transform: 'translateX(-50%)'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    ".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'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "& [layout^='wrap-'] + [layout^='wrap-']": {
+      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'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`& .${richMediaClassName}`]: {
+        marginLeft: 0,
+        marginRight: 0
+      }
+    },
+    // Shifting the mediaInline image component (renders image) to align nicely with
+    // mediaInline (renders text) is a bit of a testing ground. This numbers represent
+    // shift in top and bottom and size adjustments to make up for lack of 1to1 size
+    //  mapping
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${INLINE_IMAGE_WRAPPER_CLASS_NAME}`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      height: referenceHeights['p'],
+      transform: 'translateY(-2px)'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    h1: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [inlineImageSelector]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        height: referenceHeights.h1,
+        transform: `translateY(-3px)`
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    h2: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [inlineImageSelector]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        height: referenceHeights.h2,
+        transform: `translateY(-3px)`
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    h3: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [inlineImageSelector]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        height: referenceHeights.h3,
+        transform: `translateY(-2px)`
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    h4: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [inlineImageSelector]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        height: referenceHeights.h4,
+        transform: `translateY(-2px)`
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    h5: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [inlineImageSelector]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        height: referenceHeights.h5,
+        transform: `translateY(-2px)`
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    h6: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [inlineImageSelector]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+        height: referenceHeights.h6,
+        transform: `translateY(-2px)`
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    ".mediaSingleView-content-wrap[layout='wrap-left']": {
+      float: 'left'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    ".mediaSingleView-content-wrap[layout='wrap-right']": {
+      float: 'right'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    ".mediaSingleView-content-wrap[layout='wrap-right'] + .mediaSingleView-content-wrap[layout='wrap-left']": {
+      clear: 'both'
+    },
+    // Larger margins for resize handlers when at depth 0 of the document
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > .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: `-${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: `-${akEditorMediaResizeHandlerPaddingWide}px`
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-imported-style-values
+  [`.${MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT}`]: {
+    padding: 0
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.richMedia-resize-handle-right, .richMedia-resize-handle-left': {
+    display: 'flex',
+    flexDirection: 'column',
+    /* vertical align */
+    justifyContent: 'center'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.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: `-${akEditorMediaResizeHandlerPadding}px`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.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: `-${akEditorMediaResizeHandlerPadding}px`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.richMedia-resize-handle-right::after, .richMedia-resize-handle-left::after': {
+    content: "' '",
+    display: 'flex',
+    width: 3,
+    height: 64,
+    borderRadius: 6
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${richMediaClassName}:hover .richMedia-resize-handle-left::after, .${richMediaClassName}:hover .richMedia-resize-handle-right::after`]: {
+    background: "var(--ds-border, #091E4224)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${akEditorSelectedNodeClassName} .richMedia-resize-handle-right::after, .${akEditorSelectedNodeClassName} .richMedia-resize-handle-left::after, .${richMediaClassName} .richMedia-resize-handle-right:hover::after, .${richMediaClassName} .richMedia-resize-handle-left:hover::after, .${richMediaClassName}.is-resizing .richMedia-resize-handle-right::after, .${richMediaClassName}.is-resizing .richMedia-resize-handle-left::after`]: {
+    background: "var(--ds-border-focused, #388BFF)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.__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 when top level node for smart cards / inline links
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.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 ${akEditorSelectedBorderBoldSize}px, ${"var(--ds-border-danger, #E2483D)"}`,
+    transition: 'background-color 0s, box-shadow 0s'
+  },
+  // Danger when nested node or common
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.danger': {
+    // Media single
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${richMediaClassName} .${fileCardImageViewSelector}::after`]: {
+      border: `1px solid ${"var(--ds-border-danger, #E2483D)"}`
+    },
+    // Media single video player
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${richMediaClassName} .${inlinePlayerClassName}::after`]: {
+      border: `1px solid ${"var(--ds-border-danger, #E2483D)"}`
+    },
+    // New file experience
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${richMediaClassName} .${newFileExperienceClassName}`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"} !important`
+    },
+    // Media resize legacy handlers
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.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)"} !important`
+    },
+    // Media resize new handlers
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.resizer-handle-thumb': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      background: `${"var(--ds-icon-danger, #C9372C)"} !important`
+    },
+    // Smart cards
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'div div .media-card-frame, .inlineCardView-content-wrap > span > a': {
+      backgroundColor: `${"var(--ds-blanket-danger, #EF5C4814)"}`,
+      transition: `background-color 0s`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'div div .media-card-frame::after': {
+      boxShadow: 'none'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.warning': {
+    // Media single
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${richMediaClassName} .${fileCardImageViewSelector}::after`]: {
+      border: `1px solid ${"var(--ds-border-warning, #E56910)"}`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${richMediaClassName} .${inlinePlayerClassName}::after`]: {
+      border: `1px solid ${"var(--ds-border-warning, #E56910)"}`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${richMediaClassName} .${newFileExperienceClassName}`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: `0 0 0 1px ${"var(--ds-border-warning, #E56910)"} !important`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.resizer-handle-thumb': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      background: `${"var(--ds-icon-warning, #E56910)"} !important`
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.media-filmstrip-list-item': {
+    cursor: 'pointer'
+  },
+  // When clicking drag handle, mediaGroup node will be selected. Hence we need to apply selected style to each media node
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+  [`.mediaGroupView-content-wrap.${akEditorSelectedNodeClassName} #newFileExperienceWrapper`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+    boxShadow: akEditorSelectedBoxShadow
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ak-editor-no-interaction #newFileExperienceWrapper': {
+    boxShadow: 'none'
+  }
+});

package/dist/es2019/version-wrapper.js

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

package/dist/esm/presets/default.js

@@ -42,6 +42,8 @@ import { isFullPage as fullPageCheck } from '../utils/is-full-page';
 /**
  * Note: The order that presets are added determines
  * their placement in the editor toolbar
+ * @param options
+ * @example
  */
 export function createDefaultPreset(options) {
   var _options$featureFlags, _options$featureFlags2;
@@ -68,6 +70,12 @@ export function createDefaultPreset(options) {
   })]).add([codeBlockPlugin, options.codeBlock]);
   return preset;
 }
+
+/**
+ *
+ * @param props
+ * @example
+ */
 export function useDefaultPreset(props) {
   var preset = createDefaultPreset(props);
   return [preset];

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

@@ -14,7 +14,8 @@ import React, { Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -53,6 +54,13 @@ var EditorContainer = componentWithCondition(function () {
     exposure: true
   });
 }, EditorContentContainer, ContentArea);
+var useEditorViewModePluginState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  return editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+}, function (pluginInjectionApi) {
+  return useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+});
 
 /**
  * Render the editor in a chromeless appearance.
@@ -91,8 +99,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         pluginHooks = _this$props.pluginHooks,
         featureFlags = _this$props.featureFlags;
       var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
-      var _useSharedPluginState = useSharedPluginState(_this.props.editorAPI, ['editorViewMode']),
-        editorViewModeState = _useSharedPluginState.editorViewModeState;
+      var editorViewMode = useEditorViewModePluginState(_this.props.editorAPI);
       return jsx(WithFlash, {
         animate: maxContentSizeReached
       }, jsx("div", {
@@ -116,7 +123,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       , {
         className: "ak-editor-content-area",
         featureFlags: featureFlags,
-        viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+        viewMode: editorViewMode,
         appearance: _this.appearance
       }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, jsx(PluginSlot, {
         editorView: editorView,
@@ -140,12 +147,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   _inherits(Editor, _React$Component);
   return _createClass(Editor, [{
     key: "render",
-    value:
-    /**
-     *
-     * @example
-     */
-    function render() {
+    value: function render() {
       return jsx(RenderWithPluginState, {
         editorAPI: this.props.editorAPI,
         renderChrome: this.renderChrome
@@ -155,11 +157,25 @@ var Editor = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 _defineProperty(Editor, "displayName", 'ChromelessEditorAppearance');
 export { Editor as default };
+var useMaxContentSizePluginState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['maxContentSize']),
+    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
+  return {
+    maxContentSizeState: maxContentSizeState
+  };
+}, function (pluginInjectionApi) {
+  var maxContentSizeReached = useSharedPluginStateSelector(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
+  return {
+    maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
+      maxContentSizeReached: maxContentSizeReached
+    }
+  };
+});
 function RenderWithPluginState(_ref3) {
   var renderChrome = _ref3.renderChrome,
     editorAPI = _ref3.editorAPI;
-  var _useSharedPluginState2 = useSharedPluginState(editorAPI, ['maxContentSize']),
-    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
+  var _useMaxContentSizePlu = useMaxContentSizePluginState(editorAPI),
+    maxContentSizeState = _useMaxContentSizePlu.maxContentSizeState;
   return jsx(Fragment, null, renderChrome({
     maxContentSize: maxContentSizeState
   }));

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

@@ -11,11 +11,12 @@ import classnames from 'classnames';
 import { useIntl } from 'react-intl-next';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import messages from '@atlaskit/editor-common/messages';
 import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
@@ -82,13 +83,32 @@ var EditorContainer = componentWithCondition(function () {
     exposure: true
   });
 }, EditorContentContainer, ContentArea);
+var useCommentEditorPluginsStates = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  return useSharedPluginState(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
+}, function (pluginInjectionApi) {
+  var maxContentSizeReached = useSharedPluginStateSelector(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
+  var primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
+  var editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
+      maxContentSizeReached: maxContentSizeReached
+    },
+    primaryToolbarState: !primaryToolbarComponents ? undefined : {
+      components: primaryToolbarComponents
+    },
+    editorViewModeState: !editorViewMode ? undefined : {
+      mode: editorViewMode
+    }
+  };
+});
 export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
   var editorAPI = props.editorAPI;
-  var _useSharedPluginState = useSharedPluginState(editorAPI, ['media', 'maxContentSize', 'primaryToolbar', 'editorViewMode']),
-    mediaState = _useSharedPluginState.mediaState,
-    maxContentSizeState = _useSharedPluginState.maxContentSizeState,
-    primaryToolbarState = _useSharedPluginState.primaryToolbarState,
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var _useCommentEditorPlug = useCommentEditorPluginsStates(editorAPI),
+    maxContentSizeState = _useCommentEditorPlug.maxContentSizeState,
+    primaryToolbarState = _useCommentEditorPlug.primaryToolbarState,
+    editorViewModeState = _useCommentEditorPlug.editorViewModeState;
+  var _useSharedPluginState = useSharedPluginState(editorAPI, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
   var intl = useIntl();
   var editorDOMElement = props.editorDOMElement,
     editorView = props.editorView,

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

@@ -8,7 +8,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -55,6 +55,28 @@ var hasCustomComponents = function hasCustomComponents(components) {
   }
   return true;
 };
+var useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  return useSharedPluginState(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
+}, function (pluginInjectionApi) {
+  var primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
+  var editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  var showTopToolbar = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode._showTopToolbar');
+  var hasHadInteraction = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.hasHadInteraction');
+  var interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
+  return {
+    primaryToolbarState: !primaryToolbarComponents ? undefined : {
+      components: primaryToolbarComponents
+    },
+    editorViewModeState: !editorViewMode ? undefined : {
+      mode: editorViewMode,
+      _showTopToolbar: showTopToolbar
+    },
+    interactionState: hasHadInteraction === undefined || interactionState === undefined ? undefined : {
+      hasHadInteraction: hasHadInteraction,
+      interactionState: interactionState
+    }
+  };
+});
 export var FullPageEditor = function FullPageEditor(props) {
   var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _scrollContentContain4, _scrollContentContain5, _wrapperElementRef$cu;
   var wrapperElementRef = useMemo(function () {
@@ -63,10 +85,10 @@ export var FullPageEditor = function FullPageEditor(props) {
   var scrollContentContainerRef = useRef(null);
   var showKeyline = useShowKeyline(scrollContentContainerRef);
   var editorAPI = props.editorAPI;
-  var _useSharedPluginState = useSharedPluginState(editorAPI, ['editorViewMode', 'primaryToolbar', 'interaction']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState,
-    primaryToolbarState = _useSharedPluginState.primaryToolbarState,
-    interactionState = _useSharedPluginState.interactionState;
+  var _useFullPageEditorPlu = useFullPageEditorPluginsStates(editorAPI),
+    editorViewModeState = _useFullPageEditorPlu.editorViewModeState,
+    primaryToolbarState = _useFullPageEditorPlu.primaryToolbarState,
+    interactionState = _useFullPageEditorPlu.interactionState;
   var viewMode = getEditorViewMode(editorViewModeState, props.preset);
   var hasHadInteraction = fg('platform_editor_interaction_api_refactor') ? (interactionState === null || interactionState === void 0 ? void 0 : interactionState.interactionState) !== 'hasNotHadInteraction' : Boolean(interactionState === null || interactionState === void 0 ? void 0 : interactionState.hasHadInteraction);
   var toolbarDocking = useSharedPluginStateSelector(editorAPI, 'selectionToolbar.toolbarDocking');

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

@@ -13,7 +13,7 @@ var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
 var getTotalPadding = function getTotalPadding() {
   return akEditorGutterPaddingDynamic() * 2;
 };
-var akNestedDndGutterOffset = 8;
+var AK_NESTED_DND_GUTTER_OFFSET = 8;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var fullPageEditorWrapper = css({
@@ -119,7 +119,7 @@ var editorContentAreaContainerStyle = function editorContentAreaContainerStyle()
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       '[data-layout-section]': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        maxWidth: "calc(100% + ".concat((akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? akNestedDndGutterOffset : 0)) * 2, "px)")
+        maxWidth: "calc(100% + ".concat((akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2, "px)")
       }
     }
   });