@atlaskit/editor-core 207.2.0 → 207.3.0

package/dist/es2019/ui/EditorContentContainer/styles/ai-panel.js

@@ -0,0 +1,213 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, keyframes } from "@emotion/react";
+/**
+ * aiPanelStyles
+ * was imported from packages/editor/editor-core/src/ui/ContentStyles/ai-panels.ts
+ */
+const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+const rotationAnimation = keyframes({
+  '0%': {
+    '--panel-gradient-angle': '0deg',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    ...(isFirefox ? {
+      backgroundPosition: '100%'
+    } : {})
+  },
+  '100%': {
+    '--panel-gradient-angle': '360deg',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    ...(isFirefox ? {
+      backgroundPosition: '-100%'
+    } : {})
+  }
+});
+const aiPrismColor = {
+  ['prism.border.step.1']: {
+    light: '#0065FF',
+    dark: '#0065FF80'
+  },
+  ['prism.border.step.2']: {
+    light: '#0469FF',
+    dark: '#0469FF80'
+  },
+  ['prism.border.step.3']: {
+    light: '#BF63F3',
+    dark: '#BF63F380'
+  },
+  ['prism.border.step.4']: {
+    light: '#FFA900',
+    dark: '#FFA90080'
+  }
+};
+const prismBorderAnimationStyles = css({
+  '&::before, &::after': {
+    animationName: rotationAnimation,
+    animationDuration: '2s',
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    ...(isFirefox ? {
+      animationDirection: 'normal',
+      animationDuration: '1s'
+    } : {}),
+    '@media (prefers-reduced-motion)': {
+      animation: 'none'
+    }
+  }
+});
+const prismBorderBaseStyles = css({
+  content: "''",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  position: 'absolute',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: -1,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  width: `calc(100% + 2px)`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  height: `calc(100% + 2px)`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  top: `-1px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  left: `-1px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderRadius: `calc(${"var(--ds-border-radius-100, 3px)"} + 1px)`,
+  transform: 'translate3d(0, 0, 0)',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  ...(isFirefox ? {
+    background: `linear-gradient(90deg,
+								${aiPrismColor['prism.border.step.1']['light']} 0%,
+								${aiPrismColor['prism.border.step.2']['light']} 12%,
+								${aiPrismColor['prism.border.step.3']['light']} 24%,
+								${aiPrismColor['prism.border.step.4']['light']} 48%,
+								${aiPrismColor['prism.border.step.3']['light']} 64%,
+								${aiPrismColor['prism.border.step.2']['light']} 80%,
+								${aiPrismColor['prism.border.step.1']['light']} 100%
+							)`,
+    backgroundSize: '200%'
+  } : {
+    background: `conic-gradient(
+								from var(--panel-gradient-angle, 270deg),
+								${aiPrismColor['prism.border.step.1']['light']} 0%,
+								${aiPrismColor['prism.border.step.2']['light']} 20%,
+								${aiPrismColor['prism.border.step.3']['light']} 50%,
+								${aiPrismColor['prism.border.step.4']['light']} 56%,
+								${aiPrismColor['prism.border.step.1']['light']} 100%
+							)`
+  })
+});
+const prismBorderDarkStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  ...(isFirefox ? {
+    background: `linear-gradient(90deg,
+								${aiPrismColor['prism.border.step.1']['dark']} 0%,
+								${aiPrismColor['prism.border.step.2']['dark']} 12%,
+								${aiPrismColor['prism.border.step.3']['dark']} 24%,
+								${aiPrismColor['prism.border.step.4']['dark']} 48%,
+								${aiPrismColor['prism.border.step.3']['dark']} 64%,
+								${aiPrismColor['prism.border.step.2']['dark']} 80%,
+								${aiPrismColor['prism.border.step.1']['dark']} 100%
+							)`,
+    backgroundSize: '200%'
+  } : {
+    background: `conic-gradient(
+								from var(--panel-gradient-angle, 270deg),
+								${aiPrismColor['prism.border.step.1']['dark']} 0%,
+								${aiPrismColor['prism.border.step.2']['dark']} 20%,
+								${aiPrismColor['prism.border.step.3']['dark']} 50%,
+								${aiPrismColor['prism.border.step.4']['dark']} 56%,
+								${aiPrismColor['prism.border.step.1']['dark']} 100%
+							)`
+  })
+});
+const prismBorderHoverStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  background: "var(--ds-border-input, #8590A2)"
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const aiPanelBaseStyles = css`
+	@property --panel-gradient-angle {
+		syntax: '<angle>';
+		initial-value: 270deg;
+		inherits: false;
+	}
+
+	div[extensionType='com.atlassian.ai-blocks'] {
+		/* This hides the label for the extension */
+		.extension-label {
+			display: none;
+		}
+
+		/* This styles the ai panel correctly when its just sitting on the page and there
+		is no user interaction */
+		.extension-container {
+			position: relative;
+			box-shadow: none;
+			overflow: unset;
+			background-color: ${"var(--ds-surface, #FFFFFF)"} !important;
+			&::before,
+			&::after {
+				${prismBorderBaseStyles}
+			}
+			&.with-hover-border {
+				&::before,
+				&::after {
+					${prismBorderHoverStyles}
+				}
+			}
+			& .with-margin-styles {
+				background-color: ${"var(--ds-surface, #FFFFFF)"} !important;
+				border-radius: ${"var(--ds-border-radius-100, 3px)"};
+			}
+		}
+	}
+
+	/* This styles the ai panel correctly when its streaming */
+	div[extensionType='com.atlassian.ai-blocks']:has(.streaming) {
+		.extension-container {
+			box-shadow: none;
+			overflow: unset;
+			${prismBorderAnimationStyles}
+			&::before,
+			&::after {
+				${prismBorderBaseStyles}
+			}
+		}
+	}
+
+	/* This styles the ai panel correctly when a user is hovering over the delete button in the floating panel */
+	div[extensionType='com.atlassian.ai-blocks'].danger {
+		.extension-container {
+			box-shadow: 0 0 0 1px ${"var(--ds-border-danger, #E2483D)"};
+		}
+	}
+
+	/* This removes the margin from the action list when inside an ai panel */
+	div[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {
+		div[data-node-type='actionList'] {
+			margin: 0 !important;
+		}
+	}
+`;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const aiPanelDarkStyles = css`
+	div[extensionType='com.atlassian.ai-blocks'] {
+		.extension-container {
+			&::before,
+			&::after {
+				${prismBorderDarkStyles}
+			}
+		}
+	}
+
+	/* This styles the ai panel correctly when its streaming */
+	div[extensionType='com.atlassian.ai-blocks']:has(.streaming) {
+		.extension-container {
+			&::before,
+			&::after {
+				${prismBorderDarkStyles}
+			}
+		}
+	}
+`;

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

@@ -0,0 +1,47 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const annotationStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // 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
+    [`.${AnnotationSharedClassNames.blur}, .${AnnotationSharedClassNames.focus}, .${AnnotationSharedClassNames.draft}, .${AnnotationSharedClassNames.hover}`]: {
+      borderBottom: '2px solid transparent',
+      cursor: 'pointer',
+      padding: '1px 0 2px',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&:has(.card), &:has([data-inline-card])': {
+        padding: '5px 0 3px 0'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&:has(.date-lozenger-container)': {
+        paddingTop: "var(--ds-space-025, 2px)"
+      }
+    },
+    // 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
+    [`.${AnnotationSharedClassNames.focus}`]: {
+      background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
+      borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+      boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
+    },
+    // 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
+    [`.${AnnotationSharedClassNames.draft}`]: {
+      background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
+      borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+      boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)",
+      cursor: 'initial'
+    },
+    // 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
+    [`.${AnnotationSharedClassNames.blur}`]: {
+      background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
+      borderBottomColor: "var(--ds-border-accent-yellow, #B38600)"
+    },
+    // 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
+    [`.${AnnotationSharedClassNames.hover}`]: {
+      background: "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)",
+      borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+      boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
+    }
+  }
+});

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'
+    }
+  }
+});