@atlaskit/editor-core 193.24.6 → 193.24.15

package/dist/es2019/ui/ContentStyles/index.js

@@ -34,97 +34,96 @@ import { taskDecisionStyles } from './tasks-and-decisions';
 
 // eslint-disable-next-line @atlaskit/design-system/no-exported-css
 export const linkStyles = css`
-  .ProseMirror {
-    ${linkSharedStyle}
-  }
+	.ProseMirror {
+		${linkSharedStyle}
+	}
 `;
 const ruleStyles = () => css`
-  .ProseMirror {
-    ${ruleSharedStyles()};
+	.ProseMirror {
+		${ruleSharedStyles()};
 
-    hr {
-      cursor: pointer;
-      padding: ${"var(--ds-space-050, 4px)"} 0;
-      margin: ${"var(--ds-space-300, 24px)"} 0;
-      background-clip: content-box;
+		hr {
+			cursor: pointer;
+			padding: ${"var(--ds-space-050, 4px)"} 0;
+			margin: ${"var(--ds-space-300, 24px)"} 0;
+			background-clip: content-box;
 
-      &.${akEditorSelectedNodeClassName} {
-        outline: none;
-        background-color: ${`var(--ds-border-selected, ${akEditorSelectedBorderColor})`};
-      }
-    }
-  }
+			&.${akEditorSelectedNodeClassName} {
+				outline: none;
+				background-color: ${`var(--ds-border-selected, ${akEditorSelectedBorderColor})`};
+			}
+		}
+	}
 `;
 const mentionsStyles = css`
-  .${MentionSharedCssClassName.MENTION_CONTAINER} {
-    &.${akEditorSelectedNodeClassName} [data-mention-id] > span {
-      ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background])}
+	.${MentionSharedCssClassName.MENTION_CONTAINER} {
+		&.${akEditorSelectedNodeClassName} [data-mention-id] > span {
+			${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background])}
 
-      /* need to specify dark text colour because personal mentions
+			/* need to specify dark text colour because personal mentions
          (in dark blue) have white text by default */
       color: ${`var(--ds-text-subtle, ${N500})`};
-    }
-  }
+		}
+	}
 
-  .danger {
-    .${MentionSharedCssClassName.MENTION_CONTAINER}.${akEditorSelectedNodeClassName}
-      > span
-      > span
-      > span {
-      box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
-      background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackgroundWithOpacity})`};
-    }
-    .${MentionSharedCssClassName.MENTION_CONTAINER} > span > span > span {
-      background-color: ${`var(--ds-background-neutral, ${N30A})`};
-      color: ${`var(--ds-text-subtle, ${N500})`};
-    }
-  }
+	.danger {
+		.${MentionSharedCssClassName.MENTION_CONTAINER}.${akEditorSelectedNodeClassName}
+			> span
+			> span
+			> span {
+			box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
+			background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackgroundWithOpacity})`};
+		}
+		.${MentionSharedCssClassName.MENTION_CONTAINER} > span > span > span {
+			background-color: ${`var(--ds-background-neutral, ${N30A})`};
+			color: ${`var(--ds-text-subtle, ${N500})`};
+		}
+	}
 `;
 const listsStyles = css`
-  .ProseMirror {
-    li {
-      position: relative;
+	.ProseMirror {
+		li {
+			position: relative;
 
-      > p:not(:first-child) {
-        margin: ${"var(--ds-space-050, 4px)"} 0 0 0;
-      }
+			> p:not(:first-child) {
+				margin: ${"var(--ds-space-050, 4px)"} 0 0 0;
+			}
 
-      // In SSR the above rule will apply to all p tags because first-child would be a style tag.
-      // The following rule resets the first p tag back to its original margin
-      // defined in packages/editor/editor-common/src/styles/shared/paragraph.ts
-      > style:first-child + p {
-        margin-top: ${blockNodesVerticalMargin};
-      }
-    }
+			// In SSR the above rule will apply to all p tags because first-child would be a style tag.
+			// The following rule resets the first p tag back to its original margin
+			// defined in packages/editor/editor-common/src/styles/shared/paragraph.ts
+			> style:first-child + p {
+				margin-top: ${blockNodesVerticalMargin};
+			}
+		}
 
-    &:not([data-node-type='decisionList']) > li,
+		&:not([data-node-type='decisionList']) > li,
     // This prevents https://product-fabric.atlassian.net/browse/ED-20924
     &:not(.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}) > li {
-      ${browser.safari ? codeBlockInListSafariFix : ''}
-    }
-  }
+			${browser.safari ? codeBlockInListSafariFix : ''}
+		}
+	}
 `;
 const emojiStyles = css`
-  .${EmojiSharedCssClassName.EMOJI_CONTAINER} {
-    display: inline-block;
+	.${EmojiSharedCssClassName.EMOJI_CONTAINER} {
+		display: inline-block;
 
-    .${EmojiSharedCssClassName.EMOJI_NODE} {
-      cursor: pointer;
+		.${EmojiSharedCssClassName.EMOJI_NODE} {
+			cursor: pointer;
 
-      &.${EmojiSharedCssClassName.EMOJI_IMAGE} > span {
-        /** needed for selection style to cover custom emoji image properly */
-        display: flex;
-      }
-    }
+			&.${EmojiSharedCssClassName.EMOJI_IMAGE} > span {
+				/** needed for selection style to cover custom emoji image properly */
+				display: flex;
+			}
+		}
 
-    &.${akEditorSelectedNodeClassName} {
-      .${EmojiSharedCssClassName.EMOJI_SPRITE},
-        .${EmojiSharedCssClassName.EMOJI_IMAGE} {
-        border-radius: 2px;
-        ${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow])}
-      }
-    }
-  }
+		&.${akEditorSelectedNodeClassName} {
+			.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE} {
+				border-radius: 2px;
+				${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow])}
+			}
+		}
+	}
 `;
 
 // eslint-disable-next-line @atlaskit/design-system/no-exported-css
@@ -143,42 +142,42 @@ export const placeholderStyles = css({
   }
 });
 const contentStyles = props => css`
-  .ProseMirror {
-    outline: none;
-    font-size: ${editorFontSize({
+	.ProseMirror {
+		outline: none;
+		font-size: ${editorFontSize({
   theme: props.theme
 })}px;
-    ${whitespaceSharedStyles};
-    ${paragraphSharedStyles};
-    ${listsSharedStyles};
-    ${indentationSharedStyles};
-    ${shadowSharedStyle};
-    ${InlineNodeViewSharedStyles};
-  }
+		${whitespaceSharedStyles};
+		${paragraphSharedStyles};
+		${listsSharedStyles};
+		${indentationSharedStyles};
+		${shadowSharedStyle};
+		${InlineNodeViewSharedStyles};
+	}
 
-  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {
-    pointer-events: none;
-    opacity: 0.7;
-  }
+	.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {
+		pointer-events: none;
+		opacity: 0.7;
+	}
 
-  .ProseMirror-hideselection *::selection {
-    background: transparent;
-  }
+	.ProseMirror-hideselection *::selection {
+		background: transparent;
+	}
 
-  .ProseMirror-hideselection *::-moz-selection {
-    background: transparent;
-  }
+	.ProseMirror-hideselection *::-moz-selection {
+		background: transparent;
+	}
 
-  .ProseMirror-selectednode {
-    outline: none;
-  }
+	.ProseMirror-selectednode {
+		outline: none;
+	}
 
-  .ProseMirror-selectednode:empty {
-    outline: 2px solid ${"var(--ds-border-focused, #8cf)"};
-  }
+	.ProseMirror-selectednode:empty {
+		outline: 2px solid ${"var(--ds-border-focused, #8cf)"};
+	}
 
-  ${placeholderTextStyles}
-  ${placeholderStyles}
+	${placeholderTextStyles}
+	${placeholderStyles}
   ${codeBlockStyles()}
 
   ${blocktypeStyles()}
@@ -191,8 +190,8 @@ const contentStyles = props => css`
   ${layoutStyles(props.viewMode)}
   ${telepointerStyle}
   ${gapCursorStyles};
-  ${tableStyles(props)}
-  ${panelStyles()}
+	${tableStyles(props)}
+	${panelStyles()}
   ${mentionsStyles}
   ${emojiStyles}
   ${tasksAndDecisionsStyles}
@@ -216,62 +215,58 @@ const contentStyles = props => css`
   ${aiPanelStyles(props.colorMode)}
 
   .panelView-content-wrap {
-    box-sizing: border-box;
-  }
+		box-sizing: border-box;
+	}
 
-  .mediaGroupView-content-wrap ul {
-    padding: 0;
-  }
+	.mediaGroupView-content-wrap ul {
+		padding: 0;
+	}
 
-  /** Needed to override any cleared floats, e.g. image wrapping */
+	/** Needed to override any cleared floats, e.g. image wrapping */
 
-  div.fabric-editor-block-mark[class^='fabric-editor-align'] {
-    clear: none !important;
-  }
+	div.fabric-editor-block-mark[class^='fabric-editor-align'] {
+		clear: none !important;
+	}
 
-  .fabric-editor-align-end {
-    text-align: right;
-  }
+	.fabric-editor-align-end {
+		text-align: right;
+	}
 
-  .fabric-editor-align-start {
-    text-align: left;
-  }
+	.fabric-editor-align-start {
+		text-align: left;
+	}
 
-  .fabric-editor-align-center {
-    text-align: center;
-  }
+	.fabric-editor-align-center {
+		text-align: center;
+	}
 
-  .pm-table-header-content-wrap :not(.fabric-editor-alignment),
-  .pm-table-header-content-wrap
-    :not(p, .fabric-editor-block-mark)
-    + div.fabric-editor-block-mark,
-  .pm-table-cell-content-wrap
-    :not(p, .fabric-editor-block-mark)
-    + div.fabric-editor-block-mark {
-    p:first-of-type {
-      margin-top: 0;
-    }
-  }
-  .pm-table-cell-content-wrap .mediaGroupView-content-wrap {
-    clear: both;
-  }
+	.pm-table-header-content-wrap :not(.fabric-editor-alignment),
+	.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,
+	.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {
+		p:first-of-type {
+			margin-top: 0;
+		}
+	}
+	.pm-table-cell-content-wrap .mediaGroupView-content-wrap {
+		clear: both;
+	}
 
-  .hyperlink-floating-toolbar,
-  .${MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT} {
-    padding: 0;
-  }
+	.hyperlink-floating-toolbar,
+	.${MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT} {
+		padding: 0;
+	}
 
-  /* Link icon in the Atlaskit package
+	/* Link icon in the Atlaskit package
      is bigger than the others
   */
-  .hyperlink-open-link {
-    svg {
-      max-width: 18px;
-    }
-    &[href] {
-      padding: 0 4px;
-    }
-  }
+	.hyperlink-open-link {
+		svg {
+			max-width: 18px;
+		}
+		&[href] {
+			padding: 0 4px;
+		}
+	}
 `;
 export const createEditorContentStyle = styles => {
   return /*#__PURE__*/React.forwardRef((props, ref) => {

package/dist/es2019/ui/ContentStyles/layout.js

@@ -8,131 +8,131 @@ export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export const layoutStyles = viewMode => css`
-  .ProseMirror {
-    ${columnLayoutSharedStyle} [data-layout-section] {
-      // TODO: Migrate away from gridSize
-      // Recommendation: Replace directly with 7px
-      margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset}px 0;
-      transition: border-color 0.3s ${akEditorSwoopCubicBezier};
-      cursor: ${viewMode === 'view' ? 'default' : 'pointer'};
-
-      /* Inner cursor located 26px from left */
-      [data-layout-column] {
-        flex: 1;
-        min-width: 0;
-        border: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
-          ${`var(--ds-border, ${N40A})`};
-        border-radius: 4px;
-        padding: ${LAYOUT_COLUMN_PADDING}px;
-        box-sizing: border-box;
-
-        > div {
-          > :not(style):first-child,
-          > style:first-child + * {
-            margin-top: 0;
-          }
-
-          > .ProseMirror-gapcursor:first-child + *,
-          > style:first-child + .ProseMirror-gapcursor + * {
-            margin-top: 0;
-          }
-
-          > .ProseMirror-gapcursor:first-child + span + *,
-          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {
-            margin-top: 0;
-          }
-
-          > .embedCardView-content-wrap:first-of-type .rich-media-item {
-            margin-top: 0;
-          }
-
-          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {
-            margin-top: 0;
-          }
-
-          > .ProseMirror-gapcursor.-right:first-child
-            + .mediaSingleView-content-wrap
-            .rich-media-item,
-          > style:first-child
-            + .ProseMirror-gapcursor.-right
-            + .mediaSingleView-content-wrap
-            .rich-media-item,
-          > .ProseMirror-gapcursor.-right:first-of-type
-            + .embedCardView-content-wrap
-            .rich-media-item {
-            margin-top: 0;
-          }
-
-          > .ProseMirror-gapcursor:first-child
-            + span
-            + .mediaSingleView-content-wrap
-            .rich-media-item,
-          > style:first-child
-            + .ProseMirror-gapcursor
-            + span
-            + .mediaSingleView-content-wrap
-            .rich-media-item {
-            margin-top: 0;
-          }
-
-          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down
+	.ProseMirror {
+		${columnLayoutSharedStyle} [data-layout-section] {
+			// TODO: Migrate away from gridSize
+			// Recommendation: Replace directly with 7px
+			margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset}px 0;
+			transition: border-color 0.3s ${akEditorSwoopCubicBezier};
+			cursor: ${viewMode === 'view' ? 'default' : 'pointer'};
+
+			/* Inner cursor located 26px from left */
+			[data-layout-column] {
+				flex: 1;
+				min-width: 0;
+				border: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
+					${`var(--ds-border, ${N40A})`};
+				border-radius: 4px;
+				padding: ${LAYOUT_COLUMN_PADDING}px;
+				box-sizing: border-box;
+
+				> div {
+					> :not(style):first-child,
+					> style:first-child + * {
+						margin-top: 0;
+					}
+
+					> .ProseMirror-gapcursor:first-child + *,
+					> style:first-child + .ProseMirror-gapcursor + * {
+						margin-top: 0;
+					}
+
+					> .ProseMirror-gapcursor:first-child + span + *,
+					> style:first-child + .ProseMirror-gapcursor:first-child + span + * {
+						margin-top: 0;
+					}
+
+					> .embedCardView-content-wrap:first-of-type .rich-media-item {
+						margin-top: 0;
+					}
+
+					> .mediaSingleView-content-wrap:first-of-type .rich-media-item {
+						margin-top: 0;
+					}
+
+					> .ProseMirror-gapcursor.-right:first-child
+						+ .mediaSingleView-content-wrap
+						.rich-media-item,
+					> style:first-child
+						+ .ProseMirror-gapcursor.-right
+						+ .mediaSingleView-content-wrap
+						.rich-media-item,
+					> .ProseMirror-gapcursor.-right:first-of-type
+						+ .embedCardView-content-wrap
+						.rich-media-item {
+						margin-top: 0;
+					}
+
+					> .ProseMirror-gapcursor:first-child
+						+ span
+						+ .mediaSingleView-content-wrap
+						.rich-media-item,
+					> style:first-child
+						+ .ProseMirror-gapcursor
+						+ span
+						+ .mediaSingleView-content-wrap
+						.rich-media-item {
+						margin-top: 0;
+					}
+
+					/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down
              and shrinking layout's node selectable area (leniency margin) */
-          > [data-node-type='decisionList'] {
-            li:first-of-type [data-decision-wrapper] {
-              margin-top: 0;
-            }
-          }
-        }
-
-        /* Make the 'content' fill the entire height of the layout column to allow click
+					> [data-node-type='decisionList'] {
+						li:first-of-type [data-decision-wrapper] {
+							margin-top: 0;
+						}
+					}
+				}
+
+				/* Make the 'content' fill the entire height of the layout column to allow click
            handler of layout section nodeview to target only data-layout-column */
-        [data-layout-content] {
-          height: 100%;
-          cursor: text;
-          .mediaGroupView-content-wrap {
-            clear: both;
-          }
-        }
-      }
-
-      [data-layout-column] + [data-layout-column] {
-        margin-left: ${LAYOUT_SECTION_MARGIN}px;
-      }
-
-      @media screen and (max-width: ${gridMediumMaxWidth}px) {
-        [data-layout-column] + [data-layout-column] {
-          margin-left: 0;
-        }
-      }
-
-      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
-      // This is because the default state already uses the same token and, as such, the hover style won't change anything.
-      // https://product-fabric.atlassian.net/browse/DSP-4441
-      /* Shows the border when cursor is inside a layout */
-      &.selected [data-layout-column],
-      &:hover [data-layout-column] {
-        border: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
-          ${`var(--ds-border, ${N50A})`};
-      }
-
-      &.selected.danger > [data-layout-column] {
-        background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
-        border-color: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
-      }
-
-      &.${akEditorSelectedNodeClassName}:not(.danger) {
-        [data-layout-column] {
-          ${getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket])}
-        }
-      }
-    }
-  }
-
-  .fabric-editor--full-width-mode .ProseMirror {
-    [data-layout-section] {
-      .${TableCssClassName.TABLE_CONTAINER} {
-        margin: 0 ${tableMarginFullWidthMode}px;
-      }
-    }
-  }
+				[data-layout-content] {
+					height: 100%;
+					cursor: text;
+					.mediaGroupView-content-wrap {
+						clear: both;
+					}
+				}
+			}
+
+			[data-layout-column] + [data-layout-column] {
+				margin-left: ${LAYOUT_SECTION_MARGIN}px;
+			}
+
+			@media screen and (max-width: ${gridMediumMaxWidth}px) {
+				[data-layout-column] + [data-layout-column] {
+					margin-left: 0;
+				}
+			}
+
+			// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
+			// This is because the default state already uses the same token and, as such, the hover style won't change anything.
+			// https://product-fabric.atlassian.net/browse/DSP-4441
+			/* Shows the border when cursor is inside a layout */
+			&.selected [data-layout-column],
+			&:hover [data-layout-column] {
+				border: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
+					${`var(--ds-border, ${N50A})`};
+			}
+
+			&.selected.danger > [data-layout-column] {
+				background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
+				border-color: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+			}
+
+			&.${akEditorSelectedNodeClassName}:not(.danger) {
+				[data-layout-column] {
+					${getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket])}
+				}
+			}
+		}
+	}
+
+	.fabric-editor--full-width-mode .ProseMirror {
+		[data-layout-section] {
+			.${TableCssClassName.TABLE_CONTAINER} {
+				margin: 0 ${tableMarginFullWidthMode}px;
+			}
+		}
+	}
 `;