@atlaskit/editor-core 193.12.0 → 193.12.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-core
 
+## 193.12.2
+
+### Patch Changes
+
+- [#94901](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94901) [`da964fcdc828`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/da964fcdc828) - [ED-23097] Bump ADF schema to version 35.12.1
+- [#95163](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95163) [`a6a28c6b3ff9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a6a28c6b3ff9) - [ux] [EDF-555] Add prism border to ai panels in editor view and renderer view, add beta footer to the renderer view
+
 ## 193.12.0
 
 ### Minor Changes

package/dist/cjs/ui/ContentStyles/ai-panels.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.aiPanelStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _colors = require("@atlaskit/theme/colors");
+var _aiPrismColor, _templateObject;
+var rotationAnimation = (0, _react.keyframes)({
+  '0%': {
+    '--panel-gradient-angle': '0deg'
+  },
+  '100%': {
+    '--panel-gradient-angle': '360deg'
+  }
+});
+var aiPrismColor = (_aiPrismColor = {}, (0, _defineProperty2.default)(_aiPrismColor, 'prism.border.step.1', {
+  light: '#0065FF',
+  dark: '#0065FF80'
+}), (0, _defineProperty2.default)(_aiPrismColor, 'prism.border.step.2', {
+  light: '#0469FF',
+  dark: '#0469FF80'
+}), (0, _defineProperty2.default)(_aiPrismColor, 'prism.border.step.3', {
+  light: '#BF63F3',
+  dark: '#BF63F380'
+}), (0, _defineProperty2.default)(_aiPrismColor, 'prism.border.step.4', {
+  light: '#FFA900',
+  dark: '#FFA90080'
+}), _aiPrismColor);
+var prismBorderAnimationStyles = (0, _react.css)({
+  '&::before, &::after': {
+    animation: "".concat(rotationAnimation, " linear 2s infinite"),
+    '@media (prefers-reduced-motion)': {
+      animation: 'none'
+    }
+  }
+});
+var prismBorderStyles = function prismBorderStyles(colorMode, wide) {
+  return (0, _react.css)({
+    content: "''",
+    position: "absolute",
+    background: "conic-gradient( from var(--panel-gradient-angle, 180deg) at 50% 50%, ".concat(aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " -52.2deg, ").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 89.76deg, ").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 145.8deg, ").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 262.8deg, ").concat(aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 307.8deg, ").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 449.76deg )"),
+    zIndex: -1
+  }, !wide ? "\n      width: calc(100% + 4px);\n      height: calc(100% + 4px);\n      // ED-20633, DSP-14045: Avoid space tokens for now as space tokens are currently using rem units\n      // and Safari has a bug where rem is incorrectly calculated when there are\n      // animations involved\n      top: -2px;\n      left: -2px;\n      border-radius: ".concat("var(--ds-border-radius-200, 5px)", ";\n    ") : "\n      width: calc(100% - 14px);\n      height: calc(100% - 14px);\n      // ED-20633, DSP-14045: Avoid space tokens for now as space tokens are currently using rem units\n      // and Safari has a bug where rem is incorrectly calculated when there are\n      // animations involved\n      top: 7px;\n      left: 7px;\n      border-radius: ".concat("var(--ds-border-radius-200, 4px)", ";\n    "), {
+    transform: "translate3d(0, 0, 0)"
+  });
+};
+var aiPanelStyles = exports.aiPanelStyles = function aiPanelStyles(colorMode) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  @property --panel-gradient-angle {\n    syntax: '<angle>';\n    initial-value: 180deg;\n    inherits: false;\n  }\n\n  // The .with-border style is only present when the new macro styles are applied\n  // TODO: Remove this once new macro styles have been adopted\n  div[extensiontype='com.atlassian.ai-blocks']:has(.with-border) {\n    &.", ":has(.streaming) {\n      & .extension-container {\n        box-shadow: none !important;\n        ", "\n      }\n    }\n    .extension-container {\n      overflow: visible;\n      background-color: ", ";\n      position: relative;\n      border-radius: 4px;\n      &::before,\n      &::after {\n        ", "\n      }\n      &.wider-layout {\n        &::after,\n        &::before {\n          ", "\n        }\n      }\n      &.with-border {\n        border: 1px solid ", ";\n      }\n      &.with-hover-border {\n        border: 1px solid ", ";\n      }\n    }\n  }\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, prismBorderAnimationStyles, "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), prismBorderStyles(colorMode), prismBorderStyles(colorMode, true), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"));
+};

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

@@ -22,7 +22,9 @@ var _styles5 = require("@atlaskit/editor-plugins/placeholder-text/styles");
 var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
+var _tokens = require("@atlaskit/tokens");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
+var _aiPanels = require("./ai-panels");
 var _codeBlock = require("./code-block");
 var _date = require("./date");
 var _expand = require("./expand");
@@ -64,9 +66,9 @@ var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
   }
 });
 var contentStyles = function contentStyles(props) {
-  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n  .pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n    clear: both;\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n  .pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n    clear: both;\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, listsStyles, ruleStyles(), _media.mediaStyles, _layout.layoutStyles, _collab.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), _styles.smartCardStyles, _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, listsStyles, ruleStyles(), _media.mediaStyles, _layout.layoutStyles, _collab.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), _styles.smartCardStyles, _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -74,12 +76,15 @@ var createEditorContentStyle = exports.createEditorContentStyle = function creat
       children = props.children,
       featureFlags = props.featureFlags;
     var theme = (0, _react2.useTheme)();
+    var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+      colorMode = _useThemeObserver.colorMode;
     var memoizedStyle = (0, _react.useMemo)(function () {
       return contentStyles({
         theme: theme,
+        colorMode: colorMode,
         featureFlags: featureFlags
       });
-    }, [theme, featureFlags]);
+    }, [theme, colorMode, featureFlags]);
     return (0, _react2.jsx)("div", {
       className: className,
       ref: ref,

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "193.12.0";
+var version = exports.version = "193.12.2";

package/dist/es2019/ui/ContentStyles/ai-panels.js

@@ -0,0 +1,103 @@
+import { css, keyframes } from '@emotion/react';
+import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { N0 } from '@atlaskit/theme/colors';
+const rotationAnimation = keyframes({
+  '0%': {
+    '--panel-gradient-angle': '0deg'
+  },
+  '100%': {
+    '--panel-gradient-angle': '360deg'
+  }
+});
+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': {
+    animation: `${rotationAnimation} linear 2s infinite`,
+    '@media (prefers-reduced-motion)': {
+      animation: 'none'
+    }
+  }
+});
+const prismBorderStyles = (colorMode, wide) => css({
+  content: "''",
+  position: "absolute",
+  background: `conic-gradient( from var(--panel-gradient-angle, 180deg) at 50% 50%, ${aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} -52.2deg, ${aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 89.76deg, ${aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 145.8deg, ${aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 262.8deg, ${aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 307.8deg, ${aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 449.76deg )`,
+  zIndex: -1
+}, !wide ? `
+      width: calc(100% + 4px);
+      height: calc(100% + 4px);
+      // ED-20633, DSP-14045: Avoid space tokens for now as space tokens are currently using rem units
+      // and Safari has a bug where rem is incorrectly calculated when there are
+      // animations involved
+      top: -2px;
+      left: -2px;
+      border-radius: ${"var(--ds-border-radius-200, 5px)"};
+    ` : `
+      width: calc(100% - 14px);
+      height: calc(100% - 14px);
+      // ED-20633, DSP-14045: Avoid space tokens for now as space tokens are currently using rem units
+      // and Safari has a bug where rem is incorrectly calculated when there are
+      // animations involved
+      top: 7px;
+      left: 7px;
+      border-radius: ${"var(--ds-border-radius-200, 4px)"};
+    `, {
+  transform: "translate3d(0, 0, 0)"
+});
+export const aiPanelStyles = colorMode => css`
+  @property --panel-gradient-angle {
+    syntax: '<angle>';
+    initial-value: 180deg;
+    inherits: false;
+  }
+
+  // The .with-border style is only present when the new macro styles are applied
+  // TODO: Remove this once new macro styles have been adopted
+  div[extensiontype='com.atlassian.ai-blocks']:has(.with-border) {
+    &.${akEditorSelectedNodeClassName}:has(.streaming) {
+      & .extension-container {
+        box-shadow: none !important;
+        ${prismBorderAnimationStyles}
+      }
+    }
+    .extension-container {
+      overflow: visible;
+      background-color: ${`var(--ds-surface-overlay, ${N0})`};
+      position: relative;
+      border-radius: 4px;
+      &::before,
+      &::after {
+        ${prismBorderStyles(colorMode)}
+      }
+      &.wider-layout {
+        &::after,
+        &::before {
+          ${prismBorderStyles(colorMode, true)}
+        }
+      }
+      &.with-border {
+        border: 1px solid ${`var(--ds-surface-overlay, ${N0})`};
+      }
+      &.with-hover-border {
+        border: 1px solid ${`var(--ds-surface-overlay, ${N0})`};
+      }
+    }
+  }
+`;

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

@@ -17,7 +17,9 @@ import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text
 import { tableStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { N200, N30A, N500 } from '@atlaskit/theme/colors';
+import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
+import { aiPanelStyles } from './ai-panels';
 import { codeBlockStyles } from './code-block';
 import { dateStyles } from './date';
 import { expandStyles } from './expand';
@@ -208,6 +210,7 @@ const contentStyles = props => css`
   ${embedCardStyles}
   ${unsupportedStyles}
   ${resizerStyles}
+  ${aiPanelStyles(props.colorMode)}
 
   .panelView-content-wrap {
     box-sizing: border-box;
@@ -275,10 +278,14 @@ export const createEditorContentStyle = styles => {
       featureFlags
     } = props;
     const theme = useTheme();
+    const {
+      colorMode
+    } = useThemeObserver();
     const memoizedStyle = useMemo(() => contentStyles({
       theme,
+      colorMode,
       featureFlags
-    }), [theme, featureFlags]);
+    }), [theme, colorMode, featureFlags]);
     return jsx("div", {
       className: className,
       ref: ref,

package/dist/es2019/version-wrapper.js

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

package/dist/esm/ui/ContentStyles/ai-panels.js

@@ -0,0 +1,48 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _aiPrismColor, _templateObject;
+import { css, keyframes } from '@emotion/react';
+import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { N0 } from '@atlaskit/theme/colors';
+var rotationAnimation = keyframes({
+  '0%': {
+    '--panel-gradient-angle': '0deg'
+  },
+  '100%': {
+    '--panel-gradient-angle': '360deg'
+  }
+});
+var aiPrismColor = (_aiPrismColor = {}, _defineProperty(_aiPrismColor, 'prism.border.step.1', {
+  light: '#0065FF',
+  dark: '#0065FF80'
+}), _defineProperty(_aiPrismColor, 'prism.border.step.2', {
+  light: '#0469FF',
+  dark: '#0469FF80'
+}), _defineProperty(_aiPrismColor, 'prism.border.step.3', {
+  light: '#BF63F3',
+  dark: '#BF63F380'
+}), _defineProperty(_aiPrismColor, 'prism.border.step.4', {
+  light: '#FFA900',
+  dark: '#FFA90080'
+}), _aiPrismColor);
+var prismBorderAnimationStyles = css({
+  '&::before, &::after': {
+    animation: "".concat(rotationAnimation, " linear 2s infinite"),
+    '@media (prefers-reduced-motion)': {
+      animation: 'none'
+    }
+  }
+});
+var prismBorderStyles = function prismBorderStyles(colorMode, wide) {
+  return css({
+    content: "''",
+    position: "absolute",
+    background: "conic-gradient( from var(--panel-gradient-angle, 180deg) at 50% 50%, ".concat(aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " -52.2deg, ").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 89.76deg, ").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 145.8deg, ").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 262.8deg, ").concat(aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 307.8deg, ").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 449.76deg )"),
+    zIndex: -1
+  }, !wide ? "\n      width: calc(100% + 4px);\n      height: calc(100% + 4px);\n      // ED-20633, DSP-14045: Avoid space tokens for now as space tokens are currently using rem units\n      // and Safari has a bug where rem is incorrectly calculated when there are\n      // animations involved\n      top: -2px;\n      left: -2px;\n      border-radius: ".concat("var(--ds-border-radius-200, 5px)", ";\n    ") : "\n      width: calc(100% - 14px);\n      height: calc(100% - 14px);\n      // ED-20633, DSP-14045: Avoid space tokens for now as space tokens are currently using rem units\n      // and Safari has a bug where rem is incorrectly calculated when there are\n      // animations involved\n      top: 7px;\n      left: 7px;\n      border-radius: ".concat("var(--ds-border-radius-200, 4px)", ";\n    "), {
+    transform: "translate3d(0, 0, 0)"
+  });
+};
+export var aiPanelStyles = function aiPanelStyles(colorMode) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  @property --panel-gradient-angle {\n    syntax: '<angle>';\n    initial-value: 180deg;\n    inherits: false;\n  }\n\n  // The .with-border style is only present when the new macro styles are applied\n  // TODO: Remove this once new macro styles have been adopted\n  div[extensiontype='com.atlassian.ai-blocks']:has(.with-border) {\n    &.", ":has(.streaming) {\n      & .extension-container {\n        box-shadow: none !important;\n        ", "\n      }\n    }\n    .extension-container {\n      overflow: visible;\n      background-color: ", ";\n      position: relative;\n      border-radius: 4px;\n      &::before,\n      &::after {\n        ", "\n      }\n      &.wider-layout {\n        &::after,\n        &::before {\n          ", "\n        }\n      }\n      &.with-border {\n        border: 1px solid ", ";\n      }\n      &.with-hover-border {\n        border: 1px solid ", ";\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, prismBorderAnimationStyles, "var(--ds-surface-overlay, ".concat(N0, ")"), prismBorderStyles(colorMode), prismBorderStyles(colorMode, true), "var(--ds-surface-overlay, ".concat(N0, ")"), "var(--ds-surface-overlay, ".concat(N0, ")"));
+};

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

@@ -19,7 +19,9 @@ import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text
 import { tableStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { N200, N30A, N500 } from '@atlaskit/theme/colors';
+import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
+import { aiPanelStyles } from './ai-panels';
 import { codeBlockStyles } from './code-block';
 import { dateStyles } from './date';
 import { expandStyles } from './expand';
@@ -55,9 +57,9 @@ export var placeholderStyles = css({
   }
 });
 var contentStyles = function contentStyles(props) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n  .pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n    clear: both;\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), editorFontSize({
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n  .pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n    clear: both;\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), editorFontSize({
     theme: props.theme
-  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, listsStyles, ruleStyles(), mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, listsStyles, ruleStyles(), mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 export var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -65,12 +67,15 @@ export var createEditorContentStyle = function createEditorContentStyle(styles)
       children = props.children,
       featureFlags = props.featureFlags;
     var theme = useTheme();
+    var _useThemeObserver = useThemeObserver(),
+      colorMode = _useThemeObserver.colorMode;
     var memoizedStyle = useMemo(function () {
       return contentStyles({
         theme: theme,
+        colorMode: colorMode,
         featureFlags: featureFlags
       });
-    }, [theme, featureFlags]);
+    }, [theme, colorMode, featureFlags]);
     return jsx("div", {
       className: className,
       ref: ref,

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "193.12.0";
+export var version = "193.12.2";