@atlaskit/editor-common 81.1.4 → 81.2.0

package/dist/es2019/selection/gap-cursor/styles.js

@@ -15,70 +15,70 @@ const wrapRight = '[layout="wrap-right"]';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- This needs manual remediation, it autofixes seemingly safely, but the code style and readability is destroyed.
 export const gapCursorStyles = css`
-  /* =============== GAP CURSOR ================== */
-  .ProseMirror {
-    &.${hideCaretModifier} {
-      caret-color: transparent;
-    }
+	/* =============== GAP CURSOR ================== */
+	.ProseMirror {
+		&.${hideCaretModifier} {
+			caret-color: transparent;
+		}
 
-    ${gapCursor} {
-      display: none;
-      pointer-events: none;
-      position: relative;
+		${gapCursor} {
+			display: none;
+			pointer-events: none;
+			position: relative;
 
-      & span {
-        caret-color: transparent;
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        display: block;
-      }
+			& span {
+				caret-color: transparent;
+				position: absolute;
+				height: 100%;
+				width: 100%;
+				display: block;
+			}
 
-      & span::after {
-        animation: 1s ${gapCursorBlink} step-end infinite;
-        border-left: 1px solid;
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        height: 100%;
-      }
-      &.-left span::after {
-        left: ${"var(--ds-space-negative-050, -4px)"};
-      }
-      &.-right span::after {
-        right: ${"var(--ds-space-negative-050, -4px)"};
-      }
-      & span[layout='full-width'],
-      & span[layout='wide'],
-      & span[layout='fixed-width'] {
-        margin-left: 50%;
-        transform: translateX(-50%);
-      }
-      &${wrapRight} {
-        float: right;
-      }
+			& span::after {
+				animation: 1s ${gapCursorBlink} step-end infinite;
+				border-left: 1px solid;
+				content: '';
+				display: block;
+				position: absolute;
+				top: 0;
+				height: 100%;
+			}
+			&.-left span::after {
+				left: ${"var(--ds-space-negative-050, -4px)"};
+			}
+			&.-right span::after {
+				right: ${"var(--ds-space-negative-050, -4px)"};
+			}
+			& span[layout='full-width'],
+			& span[layout='wide'],
+			& span[layout='fixed-width'] {
+				margin-left: 50%;
+				transform: translateX(-50%);
+			}
+			&${wrapRight} {
+				float: right;
+			}
 
-      /* fix vertical alignment of gap cursor */
-      &:first-of-type + ul,
-      &:first-of-type + span + ul,
-      &:first-of-type + ol,
-      &:first-of-type + span + ol,
-      &:first-of-type + pre,
-      &:first-of-type + span + pre,
-      &:first-of-type + blockquote,
-      &:first-of-type + span + blockquote {
-        margin-top: 0;
-      }
-    }
-    &.ProseMirror-focused ${gapCursor} {
-      display: block;
-      border-color: transparent;
-    }
-  }
+			/* fix vertical alignment of gap cursor */
+			&:first-of-type + ul,
+			&:first-of-type + span + ul,
+			&:first-of-type + ol,
+			&:first-of-type + span + ol,
+			&:first-of-type + pre,
+			&:first-of-type + span + pre,
+			&:first-of-type + blockquote,
+			&:first-of-type + span + blockquote {
+				margin-top: 0;
+			}
+		}
+		&.ProseMirror-focused ${gapCursor} {
+			display: block;
+			border-color: transparent;
+		}
+	}
 
-  /* This hack below is for two images aligned side by side */
-  ${gapCursor}${wrapLeft} + span + ${wrapLeft},
+	/* This hack below is for two images aligned side by side */
+	${gapCursor}${wrapLeft} + span + ${wrapLeft},
   ${gapCursor}${wrapRight} + span + ${wrapRight},
   ${gapCursor} + ${wrapLeft} + ${wrapRight},
   ${gapCursor} + ${wrapLeft} + span + ${wrapRight},
@@ -89,10 +89,10 @@ export const gapCursorStyles = css`
   ${wrapRight} + ${gapCursor} + ${wrapLeft},
   ${wrapRight} + ${gapCursor} + span + ${wrapLeft},
   ${wrapLeft} + ${gapCursor} {
-    clear: none;
-  }
+		clear: none;
+	}
 
-  ${wrapLeft} + ${gapCursor} + ${wrapRight} > div,
+	${wrapLeft} + ${gapCursor} + ${wrapRight} > div,
   ${wrapLeft} + ${gapCursor} + span + ${wrapRight} > div,
   ${wrapRight} + ${gapCursor} + ${wrapLeft} > div,
   ${wrapRight} + ${gapCursor} + span + ${wrapLeft} > div,
@@ -100,31 +100,31 @@ export const gapCursorStyles = css`
   ${gapCursor} + ${wrapRight} + span + ${wrapLeft} > div,
   ${gapCursor} + ${wrapLeft} + ${wrapRight} > div,
   ${gapCursor} + ${wrapLeft} + span + ${wrapRight} > div {
-    margin-right: 0;
-    margin-left: 0;
-    margin-bottom: 0;
-  }
+		margin-right: 0;
+		margin-left: 0;
+		margin-bottom: 0;
+	}
 
-  ${wrapLeft} + ${gapCursor},
+	${wrapLeft} + ${gapCursor},
   ${wrapRight} + ${gapCursor} {
-    float: left;
-  }
+		float: left;
+	}
 
-  ${gapCursor} + ${wrapLeft} + span + ${wrapRight}::after,
+	${gapCursor} + ${wrapLeft} + span + ${wrapRight}::after,
   ${gapCursor} + ${wrapRight} + span + ${wrapLeft}::after,
   ${wrapLeft} + ${gapCursor} + ${wrapRight}::after,
   ${wrapLeft} + ${gapCursor} + span + ${wrapRight}::after,
   ${wrapRight} + ${gapCursor} + ${wrapLeft}::after,
   ${wrapRight} + ${gapCursor} + span + ${wrapLeft}::after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: ' ';
-    clear: both;
-    height: 0;
-  }
+		visibility: hidden;
+		display: block;
+		font-size: 0;
+		content: ' ';
+		clear: both;
+		height: 0;
+	}
 
-  ${wrapLeft} + ${gapCursor} + ${wrapRight} + *,
+	${wrapLeft} + ${gapCursor} + ${wrapRight} + *,
   ${wrapLeft} + ${gapCursor} + ${wrapRight} + span + *,
   ${wrapRight} + ${gapCursor} + ${wrapLeft} + *,
   ${wrapRight} + ${gapCursor} + ${wrapLeft} + span + *,
@@ -142,6 +142,6 @@ export const gapCursorStyles = css`
   ${gapCursor} + ${wrapRight} + span + ${wrapLeft} + * > *,
   ${prosemirrorwidget} + ${gapCursor} + *,
   ${prosemirrorwidget} + ${gapCursor} + span + * {
-    margin-top: 0;
-  }
+		margin-top: 0;
+	}
 `;

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

@@ -60,18 +60,18 @@ export const AnnotationSharedCSSByState = () => getBooleanFF('platform.editor.al
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
 export const annotationSharedStyles = () => css`
-  .ProseMirror {
-    .${AnnotationSharedClassNames.focus} {
-      ${AnnotationSharedCSSByState().focus};
-    }
+	.ProseMirror {
+		.${AnnotationSharedClassNames.focus} {
+			${AnnotationSharedCSSByState().focus};
+		}
 
-    .${AnnotationSharedClassNames.draft} {
-      ${AnnotationSharedCSSByState().focus};
-      cursor: initial;
-    }
+		.${AnnotationSharedClassNames.draft} {
+			${AnnotationSharedCSSByState().focus};
+			cursor: initial;
+		}
 
-    .${AnnotationSharedClassNames.blur} {
-      ${AnnotationSharedCSSByState().blur};
-    }
-  }
+		.${AnnotationSharedClassNames.blur} {
+			${AnnotationSharedCSSByState().blur};
+		}
+	}
 `;

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

@@ -1,11 +1,11 @@
 /* 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`
-  /**
+	/**
    * We need to remove margin-top from first item
    * inside doc, tableCell, tableHeader, blockquote, etc.
    */
-  *:not(.fabric-editor-block-mark) >,
+	*:not(.fabric-editor-block-mark) >,
   /* For nested block marks apart from those with indentation mark */
   *:not(.fabric-editor-block-mark) >
     div.fabric-editor-block-mark:first-of-type
@@ -17,18 +17,18 @@ export const blockMarksSharedStyles = css`
   .fabric-editor-alignment:first-of-type:first-child,
   // If first document element has indentation mark remove margin-top
   .ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child {
-    p,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    .heading-wrapper {
-      :first-child:not(style),
-      style:first-child + * {
-        margin-top: 0;
-      }
-    }
-  }
+		p,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		.heading-wrapper {
+			:first-child:not(style),
+			style:first-child + * {
+				margin-top: 0;
+			}
+		}
+	}
 `;

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

@@ -13,111 +13,123 @@ export const CodeBlockSharedCssClassName = {
   DS_CODEBLOCK: '[data-ds--code--code-block]'
 };
 export const codeBlockSharedStyles = () => css`
-  .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
-    position: relative;
-    background-color: ${"var(--ds-surface-raised, transparent)"};
-    border-radius: ${"var(--ds-border-radius, 3px)"};
-    margin: ${blockNodesVerticalMargin} 0 0 0;
-    font-family: ${akEditorCodeFontFamily};
-    min-width: ${akEditorTableCellMinWidth}px;
-    cursor: pointer;
+	.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
+		position: relative;
+		background-color: ${"var(--ds-surface-raised, transparent)"};
+		border-radius: ${"var(--ds-border-radius, 3px)"};
+		margin: ${blockNodesVerticalMargin} 0 0 0;
+		font-family: ${akEditorCodeFontFamily};
+		min-width: ${akEditorTableCellMinWidth}px;
+		cursor: pointer;
 
-    --ds--code--bg-color: transparent;
+		--ds--code--bg-color: transparent;
 
-    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */
-    white-space: normal;
+		/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */
+		white-space: normal;
 
-    .${CodeBlockSharedCssClassName.CODEBLOCK_START} {
-      position: absolute;
-      visibility: hidden;
-      height: 1.5rem;
-      top: 0px;
-      left: 0px;
-    }
+		.${CodeBlockSharedCssClassName.CODEBLOCK_START} {
+			position: absolute;
+			visibility: hidden;
+			height: 1.5rem;
+			top: 0px;
+			left: 0px;
+		}
 
-    .${CodeBlockSharedCssClassName.CODEBLOCK_END} {
-      position: absolute;
-      visibility: hidden;
-      height: 1.5rem;
-      bottom: 0px;
-      right: 0px;
-    }
+		.${CodeBlockSharedCssClassName.CODEBLOCK_END} {
+			position: absolute;
+			visibility: hidden;
+			height: 1.5rem;
+			bottom: 0px;
+			right: 0px;
+		}
 
-    .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
-      background-color: ${`var(--ds-background-neutral, ${N20})`};
-      display: flex;
-      border-radius: ${"var(--ds-border-radius, 3px)"};
-      width: 100%;
-      counter-reset: line;
-      overflow-x: auto;
+		.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
+			background-color: ${`var(--ds-background-neutral, ${N20})`};
+			display: flex;
+			border-radius: ${"var(--ds-border-radius, 3px)"};
+			width: 100%;
+			counter-reset: line;
+			overflow-x: auto;
 
-      background-image: ${overflowShadow({
+			background-image: ${overflowShadow({
   leftCoverWidth: "var(--ds-space-300, 24px)"
 })};
 
-      background-repeat: no-repeat;
-      background-attachment: local, local, local, local, scroll, scroll, scroll,
-        scroll;
-      background-size: ${"var(--ds-space-300, 24px)"} 100%,
-        ${"var(--ds-space-300, 24px)"} 100%, ${"var(--ds-space-100, 8px)"} 100%,
-        ${"var(--ds-space-100, 8px)"} 100%, ${"var(--ds-space-100, 8px)"} 100%,
-        1px 100%, ${"var(--ds-space-100, 8px)"} 100%, 1px 100%;
-      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;
+			background-repeat: no-repeat;
+			background-attachment: local, local, local, local, scroll, scroll, scroll, scroll;
+			background-size:
+				${"var(--ds-space-300, 24px)"} 100%,
+				${"var(--ds-space-300, 24px)"} 100%,
+				${"var(--ds-space-100, 8px)"} 100%,
+				${"var(--ds-space-100, 8px)"} 100%,
+				${"var(--ds-space-100, 8px)"} 100%,
+				1px 100%,
+				${"var(--ds-space-100, 8px)"} 100%,
+				1px 100%;
+			background-position:
+				0 0,
+				0 0,
+				100% 0,
+				100% 0,
+				100% 0,
+				100% 0,
+				0 0,
+				0 0;
 
-      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */
-      overflow-y: hidden;
-    }
+			/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */
+			overflow-y: hidden;
+		}
 
-    .${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
-      flex-shrink: 0;
-      text-align: right;
-      background-color: ${`var(--ds-background-neutral, ${N30})`};
-      padding: ${"var(--ds-space-100, 8px)"};
-      position: relative;
+		.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
+			flex-shrink: 0;
+			text-align: right;
+			background-color: ${`var(--ds-background-neutral, ${N30})`};
+			padding: ${"var(--ds-space-100, 8px)"};
+			position: relative;
 
-      span {
-        display: block;
-        line-height: 0;
-        font-size: 0;
+			span {
+				display: block;
+				line-height: 0;
+				font-size: 0;
 
-        ::before {
-          display: inline-block;
-          content: counter(line);
-          counter-increment: line;
-          color: ${`var(--ds-text-subtlest, ${N400})`};
-          font-size: ${relativeFontSizeToBase16(fontSize())};
-          line-height: 1.5rem;
-        }
-      }
-    }
+				::before {
+					display: inline-block;
+					content: counter(line);
+					counter-increment: line;
+					color: ${`var(--ds-text-subtlest, ${N400})`};
+					font-size: ${relativeFontSizeToBase16(fontSize())};
+					line-height: 1.5rem;
+				}
+			}
+		}
 
-    .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT} {
-      display: flex;
-      flex: 1;
+		.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT} {
+			display: flex;
+			flex: 1;
 
-      code {
-        flex-grow: 1;
-        tab-size: 4;
-        cursor: text;
-        color: ${`var(--ds-text, ${N800})`};
-        border-radius: ${"var(--ds-border-radius, 3px)"};
-        margin: ${"var(--ds-space-100, 8px)"};
-        white-space: pre;
-        font-size: ${relativeFontSizeToBase16(fontSize())};
-        line-height: 1.5rem;
-      }
-    }
-  }
+			code {
+				flex-grow: 1;
+				tab-size: 4;
+				cursor: text;
+				color: ${`var(--ds-text, ${N800})`};
+				border-radius: ${"var(--ds-border-radius, 3px)"};
+				margin: ${"var(--ds-space-100, 8px)"};
+				white-space: pre;
+				font-size: ${relativeFontSizeToBase16(fontSize())};
+				line-height: 1.5rem;
+			}
+		}
+	}
 `;
 export const codeBlockInListSafariFix = css`
-  ::before {
-    content: ' ';
-    line-height: ${akEditorLineHeight};
-  }
+	::before {
+		content: ' ';
+		line-height: ${akEditorLineHeight};
+	}
 
-  > p:first-child,
-  > .code-block:first-child,
-  > .ProseMirror-gapcursor:first-child + .code-block {
-    margin-top: -${akEditorLineHeight}em !important;
-  }
+	> p:first-child,
+	> .code-block:first-child,
+	> .ProseMirror-gapcursor:first-child + .code-block {
+		margin-top: -${akEditorLineHeight}em !important;
+	}
 `;