@atlaskit/editor-common 78.11.5 → 78.11.6

package/dist/es2019/styles/shared/block-marks.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Perfectly safe to auto-fix, but leaving it up to the team to remediate as the readability only gets worse with autofixing */
 import { css } from '@emotion/react';
 export const blockMarksSharedStyles = css`
   /**

package/dist/es2019/styles/shared/blockquote.js

@@ -1,38 +1,31 @@
 import { css } from '@emotion/react';
 import { akEditorBlockquoteBorderColor, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-export const blockquoteSharedStyles = css`
-  & blockquote {
-    box-sizing: border-box;
-    padding-left: ${"var(--ds-space-200, 16px)"};
-    border-left: 2px solid
-      ${`var(--ds-border, ${akEditorBlockquoteBorderColor})`};
-    margin: ${blockNodesVerticalMargin} 0 0 0;
-    margin-right: 0;
-
-    [dir='rtl'] & {
-      padding-left: 0;
-      padding-right: ${"var(--ds-space-200, 16px)"};
-    }
-
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &::before {
-      content: '';
-    }
-
-    &::after {
-      content: none;
-    }
-
-    & p {
-      display: block;
-    }
-
-    & table,
-    & table:last-child {
-      display: inline-table;
+export const blockquoteSharedStyles = css({
+  '& blockquote': {
+    boxSizing: 'border-box',
+    paddingLeft: "var(--ds-space-200, 16px)",
+    borderLeft: `2px solid ${`var(--ds-border, ${akEditorBlockquoteBorderColor})`}`,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    margin: `${blockNodesVerticalMargin} 0 0 0`,
+    marginRight: 0,
+    "[dir='rtl'] &": {
+      paddingLeft: 0,
+      paddingRight: "var(--ds-space-200, 16px)"
+    },
+    '&:first-child': {
+      marginTop: 0
+    },
+    '&::before': {
+      content: "''"
+    },
+    '&::after': {
+      content: 'none'
+    },
+    '& p': {
+      display: 'block'
+    },
+    '& table, & table:last-child': {
+      display: 'inline-table'
     }
   }
-`;
+});

package/dist/es2019/styles/shared/code-block.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Should be safe to autofix, but ignoring for now */
 import { css } from '@emotion/react';
 import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, N30, N400, N800 } from '@atlaskit/theme/colors';

package/dist/es2019/styles/shared/code-mark.js

@@ -2,10 +2,10 @@ import { css } from '@emotion/react';
 import { getCodeStyles } from '@atlaskit/code/inline';
 import { N30A } from '@atlaskit/theme/colors';
 export const codeMarkSharedStyles = () => {
-  return css`
-    .code {
-      --ds--code--bg-color: ${`var(--ds-background-neutral, ${N30A})`};
-      ${getCodeStyles()}
+  return css({
+    '.code': {
+      '--ds--code--bg-color': `var(--ds-background-neutral, ${N30A})`,
+      ...getCodeStyles()
     }
-  `;
+  });
 };

package/dist/es2019/styles/shared/column-layout.js

@@ -1,22 +1,20 @@
 import { css } from '@emotion/react';
 import { gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
-const columnLayoutSharedStyle = css`
-  [data-layout-section] {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    & > * {
-      flex: 1;
-      min-width: 0;
-    }
-
-    & > .unsupportedBlockView-content-wrap {
-      min-width: initial;
-    }
-
-    @media screen and (max-width: ${gridMediumMaxWidth}px) {
-      flex-direction: column;
+const columnLayoutSharedStyle = css({
+  '[data-layout-section]': {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    },
+    [`@media screen and (max-width: ${gridMediumMaxWidth}px)`]: {
+      flexDirection: 'column'
     }
   }
-`;
+});
 export { columnLayoutSharedStyle };

package/dist/es2019/styles/shared/date.js

@@ -3,8 +3,8 @@ export const DateSharedCssClassName = {
   DATE_WRAPPER: `date-lozenger-container`,
   DATE_CONTAINER: 'dateView-content-wrap'
 };
-export const dateSharedStyle = css`
-  .${DateSharedCssClassName.DATE_WRAPPER} span {
-    white-space: unset;
+export const dateSharedStyle = css({
+  [`.${DateSharedCssClassName.DATE_WRAPPER} span`]: {
+    whiteSpace: 'unset'
   }
-`;
+});

package/dist/es2019/styles/shared/expand.js

@@ -1,8 +1,7 @@
 import { css } from '@emotion/react';
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export const expandIconWrapperStyle = css`
-  margin-left: ${"var(--ds-space-negative-100, -8px)"};
-`;
+export const expandIconWrapperStyle = css({
+  marginLeft: "var(--ds-space-negative-100, -8px)"
+});
 const prefix = 'ak-editor-expand';
 export const expandClassNames = {
   prefix,

package/dist/es2019/styles/shared/headings.js

@@ -3,39 +3,40 @@ import { h100, h300, h400, h500, h600, h700 } from '@atlaskit/theme/typography';
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 // text sizing prototype: http://proto/fabricrender/
-export const headingsSharedStyles = () => css`
-  & h1 {
-    ${h700()};
-    margin-bottom: 0;
-    margin-top: 1.667em;
+export const headingsSharedStyles = () => css({
+  '& h1': {
+    ...h700(),
+    marginBottom: 0,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '1.667em'
+  },
+  '& h2': {
+    ...h600(),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '1.8em',
+    marginBottom: 0
+  },
+  '& h3': {
+    ...h500(),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '2em',
+    marginBottom: 0
+  },
+  '& h4': {
+    ...h400(),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '1.357em'
+  },
+  '& h5': {
+    ...h300(),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '1.667em',
+    textTransform: 'none'
+  },
+  '& h6': {
+    ...h100(),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: '1.455em',
+    textTransform: 'none'
   }
-
-  & h2 {
-    ${h600()};
-    margin-top: 1.8em;
-    margin-bottom: 0;
-  }
-
-  & h3 {
-    ${h500()};
-    margin-top: 2em;
-    margin-bottom: 0;
-  }
-
-  & h4 {
-    ${h400()};
-    margin-top: 1.357em;
-  }
-
-  & h5 {
-    ${h300()};
-    margin-top: 1.667em;
-    text-transform: none;
-  }
-
-  & h6 {
-    ${h100()};
-    margin-top: 1.455em;
-    text-transform: none;
-  }
-`;
+});

package/dist/es2019/styles/shared/indentation.js

@@ -1,25 +1,29 @@
 import { css } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-export const indentationSharedStyles = css`
-  .fabric-editor-indentation-mark {
-    &[data-level='1'] {
-      margin-left: 30px;
-    }
-    &[data-level='2'] {
-      margin-left: 60px;
-    }
-    &[data-level='3'] {
-      margin-left: 90px;
-    }
-    &[data-level='4'] {
-      margin-left: 120px;
-    }
-    &[data-level='5'] {
-      margin-left: 150px;
-    }
-    &[data-level='6'] {
-      margin-left: 180px;
+export const indentationSharedStyles = css({
+  '.fabric-editor-indentation-mark': {
+    "&[data-level='1']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '30px'
+    },
+    "&[data-level='2']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '60px'
+    },
+    "&[data-level='3']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '90px'
+    },
+    "&[data-level='4']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '120px'
+    },
+    "&[data-level='5']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '150px'
+    },
+    "&[data-level='6']": {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: '180px'
     }
   }
-`;
+});

package/dist/es2019/styles/shared/link.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-const linkSharedStyle = css`
-  a.blockLink {
-    display: block;
+const linkSharedStyle = css({
+  'a.blockLink': {
+    display: 'block'
   }
-`;
+});
 export { linkSharedStyle };

package/dist/es2019/styles/shared/lists.js

@@ -33,6 +33,8 @@ export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat) {
   }
   return style;
 }
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- There is some "flow-root" hack that is not actually valid css.  Do note, this might not even work in Compiled (or Emotion) due to the way tagged template expressions are parsed…
 export const listsSharedStyles = css`
   /* =============== INDENTATION SPACING ========= */
 

package/dist/es2019/styles/shared/media-single.js

@@ -1,74 +1,51 @@
 import { css } from '@emotion/react';
 const richMediaClassName = 'rich-media-item';
 const wrappedMediaBreakoutPoint = 410;
-const mediaSingleSharedStyle = css`
-  li .${richMediaClassName} {
-    margin: 0;
-  }
-
-  /* Hack for chrome to fix media single position
-     inside a list when media is the first child */
-  &.ua-chrome li > .mediaSingleView-content-wrap::before {
-    content: '';
-    display: block;
-    height: 0;
-  }
-
-  &.ua-firefox {
-    .mediaSingleView-content-wrap {
-      user-select: none;
+const mediaSingleSharedStyle = css({
+  [`li .${richMediaClassName}`]: {
+    margin: 0
+  },
+  // Hack for chrome to fix media single position inside a list when media is the first child
+  '&.ua-chrome li > .mediaSingleView-content-wrap::before': {
+    content: "''",
+    display: 'block',
+    height: 0
+  },
+  '&.ua-firefox': {
+    '.mediaSingleView-content-wrap': {
+      userSelect: 'none'
+    },
+    '.captionView-content-wrap': {
+      userSelect: 'text'
     }
-
-    .captionView-content-wrap {
-      user-select: text;
-    }
-  }
-
-  .mediaSingleView-content-wrap[layout='center'] {
-    clear: both;
-  }
-
-  table .${richMediaClassName} {
-    margin-top: ${"var(--ds-space-150, 12px)"};
-    margin-bottom: ${"var(--ds-space-150, 12px)"};
-    clear: both;
-
-    &.image-wrap-left,
-    &.image-wrap-right {
-      clear: none;
-
-      &:first-child {
-        margin-top: ${"var(--ds-space-150, 12px)"};
+  },
+  ".mediaSingleView-content-wrap[layout='center']": {
+    clear: 'both'
+  },
+  [`table .${richMediaClassName}`]: {
+    marginTop: "var(--ds-space-150, 12px)",
+    marginBottom: "var(--ds-space-150, 12px)",
+    clear: 'both',
+    '&.image-wrap-left, &.image-wrap-right': {
+      clear: 'none',
+      '&:first-child': {
+        marginTop: "var(--ds-space-150, 12px)"
       }
     }
-  }
-
-  .${richMediaClassName}.image-wrap-right
-    + .${richMediaClassName}.image-wrap-left {
-    clear: both;
-  }
-
-  .${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 {
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  @media all and (max-width: ${wrappedMediaBreakoutPoint}px) {
-    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;
+  },
+  [`.${richMediaClassName}.image-wrap-right + .${richMediaClassName}.image-wrap-left`]: {
+    clear: 'both'
+  },
+  [`.${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
+  },
+  [`@media all and (max-width: ${wrappedMediaBreakoutPoint}px)`]: {
+    "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`
     }
   }
-`;
+});
 export { mediaSingleSharedStyle, richMediaClassName };

package/dist/es2019/styles/shared/panel.js

@@ -149,6 +149,8 @@ const mainDynamicStyles = panelType => {
     color: inherit;
   `;
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Safe to autofix with a tiny tweak to `mainDynamicStyles` being an object, but holding off…
 export const panelSharedStylesWithoutPrefix = () => css`
   border-radius: ${"var(--ds-border-radius, 3px)"};
   margin: ${blockNodesVerticalMargin} 0 0;
@@ -249,8 +251,6 @@ export const panelSharedStylesWithoutPrefix = () => css`
     }
   }
 `;
-export const panelSharedStyles = () => css`
-  .${PanelSharedCssClassName.prefix} {
-    ${panelSharedStylesWithoutPrefix()}
-  }
-`;
+export const panelSharedStyles = () => css({
+  [`.${PanelSharedCssClassName.prefix}`]: panelSharedStylesWithoutPrefix()
+});

package/dist/es2019/styles/shared/paragraph.js

@@ -2,13 +2,14 @@ import { css } from '@emotion/react';
 import { akEditorLineHeight, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
-export const paragraphSharedStyles = css`
-  & p {
-    font-size: 1em;
-    line-height: ${akEditorLineHeight};
-    font-weight: normal;
-    margin-top: ${blockNodesVerticalMargin};
-    margin-bottom: 0;
-    letter-spacing: -0.005em;
+export const paragraphSharedStyles = css({
+  '& p': {
+    fontSize: '1em',
+    lineHeight: akEditorLineHeight,
+    fontWeight: 'normal',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginTop: blockNodesVerticalMargin,
+    marginBottom: 0,
+    letterSpacing: '-0.005em'
   }
-`;
+});

package/dist/es2019/styles/shared/plugins.js

@@ -1,43 +1,38 @@
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-export const buttonGroupStyle = css`
-  display: inline-flex;
-  align-items: center;
-
-  & > div {
-    display: flex;
+export const buttonGroupStyle = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  '& > div': {
+    display: 'flex'
   }
-`;
+});
 
 // This style is copied to packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/styles.tsx
 // If you make change here, change in above file as well.
-export const separatorStyles = css`
-  background: ${`var(--ds-border, ${N30})`};
-  width: 1px;
-  height: 24px;
-  display: inline-block;
-  margin: 0 ${"var(--ds-space-100, 8px)"};
-  user-select: none;
-`;
+export const separatorStyles = css({
+  background: `var(--ds-border, ${N30})`,
+  width: '1px',
+  height: '24px',
+  display: 'inline-block',
+  margin: `0 ${"var(--ds-space-100, 8px)"}`,
+  userSelect: 'none'
+});
 
 // This style is copied to packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/styles.tsx
 // If you make change here, change in above file as well.
-export const wrapperStyle = css`
-  display: flex;
-  align-items: center;
-
-  > div,
-  > span {
-    display: flex;
-  }
-
-  > div > div {
-    display: flex;
-  }
-
-  margin-left: 0;
-  min-width: auto;
-`;
-export const triggerWrapperStyles = css`
-  display: flex;
-`;
+export const wrapperStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  '> div, > span': {
+    display: 'flex'
+  },
+  '> div > div': {
+    display: 'flex'
+  },
+  marginLeft: 0,
+  minWidth: 'auto'
+});
+export const triggerWrapperStyles = css({
+  display: 'flex'
+});

package/dist/es2019/styles/shared/resizer.js

@@ -17,6 +17,8 @@ export const resizerDangerClassName = `${resizerHandleClassName}-danger`;
 const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 export const handleWrapperClass = 'resizer-handle-wrapper';
 export const resizerHandleZIndex = 1;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Seems perfectly safe to autofix, but comments would be lost…
 export const resizerStyles = css`
   .${resizerItemClassName} {
     will-change: width;

package/dist/es2019/styles/shared/rule.js

@@ -2,12 +2,13 @@ import { css } from '@emotion/react';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
 import { N30A } from '@atlaskit/theme/colors';
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
-export const ruleSharedStyles = () => css`
-  & hr {
-    border: none;
-    background-color: ${`var(--ds-border, ${N30A})`};
-    margin: ${akEditorLineHeight}em 0;
-    height: 2px;
-    border-radius: 1px;
+export const ruleSharedStyles = () => css({
+  '& hr': {
+    border: 'none',
+    backgroundColor: `var(--ds-border, ${N30A})`,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    margin: `${akEditorLineHeight}em 0`,
+    height: '2px',
+    borderRadius: '1px'
   }
-`;
+});

package/dist/es2019/styles/shared/shadow.js

@@ -43,8 +43,7 @@ const shadowSharedStyle = css({
   },
   [`& .${shadowClassNames.RIGHT_SHADOW}::after`]: {
     background: `linear-gradient( to right, transparent 0, ${`var(--ds-shadow-overflow-spread, ${N40A})`} ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}% ), linear-gradient( to left, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    left: `calc(100% - ${shadowWidth}px)`,
+    right: '0px',
     top: '0px',
     display: 'block'
   },

package/dist/es2019/styles/shared/smartCard.js

@@ -4,6 +4,8 @@ import { N0, N40 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from './smart-card';
 export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Seems safe to autofix with a fix to `getSelectionStyles`
 export const smartCardStyles = css`
   .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
     max-width: calc(100% - 20px);

package/dist/es2019/styles/shared/table.js

@@ -34,6 +34,8 @@ export const TableSharedCssClassName = {
   TABLE_COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   TABLE_RESIZER_CONTAINER: `${tablePrefixSelector}-resizer-container`
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Appears safe to auto-fix, but leaving it up to the team to remediate as the readability only gets worse with autofixing
 const tableSharedStyle = () => css`
   ${tableCellBackgroundStyleOverride()}
   .${TableSharedCssClassName.TABLE_CONTAINER} {

package/dist/es2019/styles/shared/tableCell.js

@@ -22,6 +22,4 @@ const mapBackgroundColors = () => {
   });
   return cssString;
 };
-export const tableCellBackgroundStyleOverride = () => css`
-  ${mapBackgroundColors()}
-`;
+export const tableCellBackgroundStyleOverride = () => css(mapBackgroundColors());

package/dist/es2019/styles/shared/text-color.js

@@ -1,10 +1,9 @@
 import { css } from '@emotion/react';
-export const textColorStyles = css`
-  .fabric-text-color-mark {
-    color: var(--custom-palette-color, inherit);
+export const textColorStyles = css({
+  '.fabric-text-color-mark': {
+    color: 'var(--custom-palette-color, inherit)'
+  },
+  'a .fabric-text-color-mark': {
+    color: 'unset'
   }
-
-  a .fabric-text-color-mark {
-    color: unset;
-  }
-`;
+});