@atlaskit/editor-core 195.0.1 → 195.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/cjs/ui/ContentStyles/ai-panels.js +37 -30
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/ContentStyles/ai-panels.js +82 -81
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/ContentStyles/ai-panels.js +37 -30
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/create-editor/create-preset.d.ts +11 -11
- package/dist/types/presets/default.d.ts +6 -6
- package/dist/types/presets/universal.d.ts +11 -11
- package/dist/types/presets/useUniversalPreset.d.ts +11 -11
- package/dist/types-ts4.5/create-editor/create-preset.d.ts +11 -11
- package/dist/types-ts4.5/presets/default.d.ts +6 -6
- package/dist/types-ts4.5/presets/universal.d.ts +11 -11
- package/dist/types-ts4.5/presets/useUniversalPreset.d.ts +11 -11
- package/package.json +10 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 195.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#123594](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123594)
|
|
8
|
+
[`ea6c9a5361f96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ea6c9a5361f96) -
|
|
9
|
+
Add FG to editor examples
|
|
10
|
+
- [`23c64778d8082`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/23c64778d8082) -
|
|
11
|
+
[ux] Updating the cursor style for embed cards when the smart links in live pages FF is on
|
|
12
|
+
- [#124603](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124603)
|
|
13
|
+
[`e70e68b3089ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e70e68b3089ab) -
|
|
14
|
+
[ux] [EDF-662] Fix broken ai panel styling, fix streaming animation in firefox
|
|
15
|
+
|
|
3
16
|
## 195.0.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -8,16 +8,22 @@ exports.aiPanelStyles = void 0;
|
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
10
|
var _react = require("@emotion/react");
|
|
11
|
-
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
11
|
var _colors = require("@atlaskit/theme/colors");
|
|
13
|
-
var _aiPrismColor, _templateObject;
|
|
12
|
+
var _aiPrismColor, _templateObject;
|
|
13
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
14
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
15
|
+
var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
14
16
|
var rotationAnimation = (0, _react.keyframes)({
|
|
15
|
-
'0%': {
|
|
17
|
+
'0%': _objectSpread({
|
|
16
18
|
'--panel-gradient-angle': '0deg'
|
|
17
|
-
},
|
|
18
|
-
|
|
19
|
+
}, isFirefox ? {
|
|
20
|
+
backgroundPosition: '100%'
|
|
21
|
+
} : {}),
|
|
22
|
+
'100%': _objectSpread({
|
|
19
23
|
'--panel-gradient-angle': '360deg'
|
|
20
|
-
}
|
|
24
|
+
}, isFirefox ? {
|
|
25
|
+
backgroundPosition: '-100%'
|
|
26
|
+
} : {})
|
|
21
27
|
});
|
|
22
28
|
var aiPrismColor = (_aiPrismColor = {}, (0, _defineProperty2.default)(_aiPrismColor, 'prism.border.step.1', {
|
|
23
29
|
light: '#0065FF',
|
|
@@ -33,45 +39,46 @@ var aiPrismColor = (_aiPrismColor = {}, (0, _defineProperty2.default)(_aiPrismCo
|
|
|
33
39
|
dark: '#FFA90080'
|
|
34
40
|
}), _aiPrismColor);
|
|
35
41
|
var prismBorderAnimationStyles = (0, _react.css)({
|
|
36
|
-
'&::before, &::after': {
|
|
37
|
-
animation: "".concat(rotationAnimation, " linear 2s infinite")
|
|
42
|
+
'&::before, &::after': _objectSpread(_objectSpread({
|
|
43
|
+
animation: "".concat(rotationAnimation, " linear 2s infinite")
|
|
44
|
+
}, isFirefox ? {
|
|
45
|
+
animationDirection: 'normal',
|
|
46
|
+
animationDuration: '1s'
|
|
47
|
+
} : {}), {}, {
|
|
38
48
|
'@media (prefers-reduced-motion)': {
|
|
39
49
|
animation: 'none'
|
|
40
50
|
}
|
|
41
|
-
}
|
|
51
|
+
})
|
|
42
52
|
});
|
|
43
|
-
var prismBorderStyles = function prismBorderStyles(colorMode,
|
|
44
|
-
return (0, _react.css)({
|
|
53
|
+
var prismBorderStyles = function prismBorderStyles(colorMode, hover) {
|
|
54
|
+
return (0, _react.css)(_objectSpread({
|
|
45
55
|
content: "''",
|
|
46
|
-
position: 'absolute',
|
|
47
|
-
background: "conic-gradient( from var(--panel-gradient-angle, 180deg) at 50% 50%, ".concat(
|
|
48
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
49
|
-
aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']
|
|
50
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
51
|
-
, " -52.2deg, ").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 89.76deg, ").concat(
|
|
52
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
53
|
-
aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']
|
|
54
56
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
55
|
-
|
|
56
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
57
|
-
aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']
|
|
57
|
+
position: 'absolute',
|
|
58
58
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
59
|
-
, " 307.8deg, ").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 449.76deg )"),
|
|
60
59
|
zIndex: -1,
|
|
61
60
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
62
|
-
width: "calc(100% +
|
|
61
|
+
width: "calc(100% + 2px)",
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
63
|
+
height: "calc(100% + 2px)",
|
|
63
64
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
64
|
-
|
|
65
|
+
top: "-1px",
|
|
65
66
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
66
|
-
|
|
67
|
+
left: "-1px",
|
|
67
68
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
68
|
-
|
|
69
|
-
borderRadius: "var(--ds-border-radius-200, 5px)",
|
|
69
|
+
borderRadius: "calc(".concat("var(--ds-border-radius-100, 3px)", " + 1px)"),
|
|
70
70
|
transform: 'translate3d(0, 0, 0)'
|
|
71
|
-
}
|
|
71
|
+
}, hover ? {
|
|
72
|
+
background: "var(--ds-border-input, ".concat(_colors.N500, ")")
|
|
73
|
+
} : isFirefox ? {
|
|
74
|
+
background: "linear-gradient(90deg,\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 12%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 24%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 48%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 64%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 80%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 100%\n\t\t\t\t\t\t\t)"),
|
|
75
|
+
backgroundSize: '200%'
|
|
76
|
+
} : {
|
|
77
|
+
background: "conic-gradient(\n\t\t\t\t\t\t\t\tfrom var(--panel-gradient-angle, 270deg),\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 20%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 50%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 56%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 100%\n\t\t\t\t\t\t\t)")
|
|
78
|
+
}));
|
|
72
79
|
};
|
|
73
80
|
|
|
74
81
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
|
|
75
82
|
var aiPanelStyles = exports.aiPanelStyles = function aiPanelStyles(colorMode) {
|
|
76
|
-
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t@property --panel-gradient-angle {\n\t\tsyntax: '<angle>';\n\t\tinitial-value:
|
|
83
|
+
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t@property --panel-gradient-angle {\n\t\tsyntax: '<angle>';\n\t\tinitial-value: 270deg;\n\t\tinherits: false;\n\t}\n\n\tdiv[extensionType='com.atlassian.ai-blocks'] {\n\t\t// This hides the label for the extension\n\t\t.extension-label {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t// This styles the ai panel correctly when its just sitting on the page and there\n\t\t// is no user interaction\n\t\t.extension-container {\n\t\t\tposition: relative;\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\tbackground-color: ", " !important;\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t&.with-hover-border {\n\t\t\t\t&::before,\n\t\t\t\t&::after {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t\t& .with-margin-styles {\n\t\t\t\tbackground-color: ", " !important;\n\t\t\t\tborder-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// This styles the ai panel correctly when its streaming\n\tdiv[extensionType='com.atlassian.ai-blocks']:has(.streaming) {\n\t\t.extension-container {\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\t", "\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t// This styles the ai panel correctly when a user is hovering over the delete button in the floating panel\n\tdiv[extensionType='com.atlassian.ai-blocks'].danger {\n\t\t.extension-container {\n\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t}\n\t}\n\n\t// This removes the margin from the action list when inside an ai panel\n\tdiv[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {\n\t\tdiv[data-node-type='actionList'] {\n\t\t\tmargin: 0 !important;\n\t\t}\n\t}\n"])), "var(--ds-surface, ".concat(_colors.N0, ")"), prismBorderStyles(colorMode), prismBorderStyles(colorMode, true), "var(--ds-surface, ".concat(_colors.N0, ")"), "var(--ds-border-radius-100, 3px)", prismBorderAnimationStyles, prismBorderStyles(colorMode), "var(--ds-border-danger, ".concat(_colors.R400, ")"));
|
|
77
84
|
};
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
2
|
import { css, keyframes } from '@emotion/react';
|
|
3
|
-
import {
|
|
4
|
-
|
|
3
|
+
import { N0, N500, R400 } from '@atlaskit/theme/colors';
|
|
4
|
+
const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
5
5
|
const rotationAnimation = keyframes({
|
|
6
6
|
'0%': {
|
|
7
|
-
'--panel-gradient-angle': '0deg'
|
|
7
|
+
'--panel-gradient-angle': '0deg',
|
|
8
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
9
|
+
...(isFirefox ? {
|
|
10
|
+
backgroundPosition: '100%'
|
|
11
|
+
} : {})
|
|
8
12
|
},
|
|
9
13
|
'100%': {
|
|
10
|
-
'--panel-gradient-angle': '360deg'
|
|
14
|
+
'--panel-gradient-angle': '360deg',
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
16
|
+
...(isFirefox ? {
|
|
17
|
+
backgroundPosition: '-100%'
|
|
18
|
+
} : {})
|
|
11
19
|
}
|
|
12
20
|
});
|
|
13
21
|
const aiPrismColor = {
|
|
@@ -31,125 +39,118 @@ const aiPrismColor = {
|
|
|
31
39
|
const prismBorderAnimationStyles = css({
|
|
32
40
|
'&::before, &::after': {
|
|
33
41
|
animation: `${rotationAnimation} linear 2s infinite`,
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
43
|
+
...(isFirefox ? {
|
|
44
|
+
animationDirection: 'normal',
|
|
45
|
+
animationDuration: '1s'
|
|
46
|
+
} : {}),
|
|
34
47
|
'@media (prefers-reduced-motion)': {
|
|
35
48
|
animation: 'none'
|
|
36
49
|
}
|
|
37
50
|
}
|
|
38
51
|
});
|
|
39
|
-
const prismBorderStyles = (colorMode,
|
|
52
|
+
const prismBorderStyles = (colorMode, hover) => css({
|
|
40
53
|
content: "''",
|
|
41
|
-
position: 'absolute',
|
|
42
|
-
background: `conic-gradient( from var(--panel-gradient-angle, 180deg) at 50% 50%, ${
|
|
43
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
44
|
-
aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']
|
|
45
54
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
46
|
-
|
|
47
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
48
|
-
aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']
|
|
55
|
+
position: 'absolute',
|
|
49
56
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
50
|
-
|
|
57
|
+
zIndex: -1,
|
|
51
58
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
52
|
-
|
|
59
|
+
width: `calc(100% + 2px)`,
|
|
53
60
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
54
|
-
|
|
55
|
-
zIndex: -1,
|
|
61
|
+
height: `calc(100% + 2px)`,
|
|
56
62
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
57
|
-
|
|
63
|
+
top: `-1px`,
|
|
58
64
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
59
|
-
|
|
65
|
+
left: `-1px`,
|
|
60
66
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
61
|
-
|
|
67
|
+
borderRadius: `calc(${"var(--ds-border-radius-100, 3px)"} + 1px)`,
|
|
68
|
+
transform: 'translate3d(0, 0, 0)',
|
|
62
69
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
70
|
+
...(hover ? {
|
|
71
|
+
background: `var(--ds-border-input, ${N500})`
|
|
72
|
+
} : isFirefox ? {
|
|
73
|
+
background: `linear-gradient(90deg,
|
|
74
|
+
${aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 0%,
|
|
75
|
+
${aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 12%,
|
|
76
|
+
${aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 24%,
|
|
77
|
+
${aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 48%,
|
|
78
|
+
${aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 64%,
|
|
79
|
+
${aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 80%,
|
|
80
|
+
${aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 100%
|
|
81
|
+
)`,
|
|
82
|
+
backgroundSize: '200%'
|
|
83
|
+
} : {
|
|
84
|
+
background: `conic-gradient(
|
|
85
|
+
from var(--panel-gradient-angle, 270deg),
|
|
86
|
+
${aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 0%,
|
|
87
|
+
${aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 20%,
|
|
88
|
+
${aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 50%,
|
|
89
|
+
${aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 56%,
|
|
90
|
+
${aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 100%
|
|
91
|
+
)`
|
|
92
|
+
})
|
|
66
93
|
});
|
|
67
94
|
|
|
68
95
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
|
|
69
96
|
export const aiPanelStyles = colorMode => css`
|
|
70
97
|
@property --panel-gradient-angle {
|
|
71
98
|
syntax: '<angle>';
|
|
72
|
-
initial-value:
|
|
99
|
+
initial-value: 270deg;
|
|
73
100
|
inherits: false;
|
|
74
101
|
}
|
|
75
102
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
& .extension-container {
|
|
81
|
-
box-shadow: none !important;
|
|
82
|
-
${prismBorderAnimationStyles}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.danger > .extension-container {
|
|
87
|
-
background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
|
|
103
|
+
div[extensionType='com.atlassian.ai-blocks'] {
|
|
104
|
+
// This hides the label for the extension
|
|
105
|
+
.extension-label {
|
|
106
|
+
display: none;
|
|
88
107
|
}
|
|
89
108
|
|
|
109
|
+
// This styles the ai panel correctly when its just sitting on the page and there
|
|
110
|
+
// is no user interaction
|
|
90
111
|
.extension-container {
|
|
91
|
-
overflow: visible;
|
|
92
|
-
background-color: ${`var(--ds-background-accent-gray-subtlest, ${N20})`};
|
|
93
112
|
position: relative;
|
|
94
|
-
|
|
113
|
+
box-shadow: none;
|
|
114
|
+
overflow: unset;
|
|
115
|
+
background-color: ${`var(--ds-surface, ${N0})`} !important;
|
|
95
116
|
&::before,
|
|
96
117
|
&::after {
|
|
97
|
-
${prismBorderStyles(colorMode
|
|
98
|
-
}
|
|
99
|
-
.extension-overflow-wrapper {
|
|
100
|
-
border-radius: inherit;
|
|
101
|
-
box-shadow: inherit;
|
|
102
|
-
background-color: inherit;
|
|
103
|
-
}
|
|
104
|
-
&.with-border {
|
|
105
|
-
border: 1px solid ${`var(--ds-surface-overlay, ${N0})`};
|
|
118
|
+
${prismBorderStyles(colorMode)}
|
|
106
119
|
}
|
|
107
120
|
&.with-hover-border {
|
|
108
|
-
|
|
121
|
+
&::before,
|
|
122
|
+
&::after {
|
|
123
|
+
${prismBorderStyles(colorMode, true)}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
& .with-margin-styles {
|
|
127
|
+
background-color: ${`var(--ds-surface, ${N0})`} !important;
|
|
128
|
+
border-radius: ${"var(--ds-border-radius-100, 3px)"};
|
|
109
129
|
}
|
|
110
130
|
}
|
|
111
131
|
}
|
|
112
132
|
|
|
113
|
-
|
|
133
|
+
// This styles the ai panel correctly when its streaming
|
|
134
|
+
div[extensionType='com.atlassian.ai-blocks']:has(.streaming) {
|
|
114
135
|
.extension-container {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
.extension-title {
|
|
122
|
-
display: none !important;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
&:not(.${akEditorSelectedNodeClassName}),
|
|
126
|
-
&:not(.danger) {
|
|
127
|
-
.extension-container {
|
|
128
|
-
&::before,
|
|
129
|
-
&::after {
|
|
130
|
-
${prismBorderStyles(colorMode, 4, -2)}
|
|
131
|
-
}
|
|
132
|
-
&.wider-layout {
|
|
133
|
-
&::after,
|
|
134
|
-
&::before {
|
|
135
|
-
${prismBorderStyles(colorMode, 2, -1)}
|
|
136
|
-
}
|
|
137
|
-
}
|
|
136
|
+
box-shadow: none;
|
|
137
|
+
overflow: unset;
|
|
138
|
+
${prismBorderAnimationStyles}
|
|
139
|
+
&::before,
|
|
140
|
+
&::after {
|
|
141
|
+
${prismBorderStyles(colorMode)}
|
|
138
142
|
}
|
|
139
143
|
}
|
|
144
|
+
}
|
|
140
145
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
&::before {
|
|
146
|
-
content: none;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
}
|
|
146
|
+
// This styles the ai panel correctly when a user is hovering over the delete button in the floating panel
|
|
147
|
+
div[extensionType='com.atlassian.ai-blocks'].danger {
|
|
148
|
+
.extension-container {
|
|
149
|
+
box-shadow: 0 0 0 1px ${`var(--ds-border-danger, ${R400})`};
|
|
150
150
|
}
|
|
151
151
|
}
|
|
152
152
|
|
|
153
|
+
// This removes the margin from the action list when inside an ai panel
|
|
153
154
|
div[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {
|
|
154
155
|
div[data-node-type='actionList'] {
|
|
155
156
|
margin: 0 !important;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "195.0.
|
|
2
|
+
export const version = "195.0.2";
|
|
@@ -1,17 +1,23 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
var _aiPrismColor, _templateObject;
|
|
4
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
7
|
import { css, keyframes } from '@emotion/react';
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
+
import { N0, N500, R400 } from '@atlaskit/theme/colors';
|
|
9
|
+
var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
8
10
|
var rotationAnimation = keyframes({
|
|
9
|
-
'0%': {
|
|
11
|
+
'0%': _objectSpread({
|
|
10
12
|
'--panel-gradient-angle': '0deg'
|
|
11
|
-
},
|
|
12
|
-
|
|
13
|
+
}, isFirefox ? {
|
|
14
|
+
backgroundPosition: '100%'
|
|
15
|
+
} : {}),
|
|
16
|
+
'100%': _objectSpread({
|
|
13
17
|
'--panel-gradient-angle': '360deg'
|
|
14
|
-
}
|
|
18
|
+
}, isFirefox ? {
|
|
19
|
+
backgroundPosition: '-100%'
|
|
20
|
+
} : {})
|
|
15
21
|
});
|
|
16
22
|
var aiPrismColor = (_aiPrismColor = {}, _defineProperty(_aiPrismColor, 'prism.border.step.1', {
|
|
17
23
|
light: '#0065FF',
|
|
@@ -27,45 +33,46 @@ var aiPrismColor = (_aiPrismColor = {}, _defineProperty(_aiPrismColor, 'prism.bo
|
|
|
27
33
|
dark: '#FFA90080'
|
|
28
34
|
}), _aiPrismColor);
|
|
29
35
|
var prismBorderAnimationStyles = css({
|
|
30
|
-
'&::before, &::after': {
|
|
31
|
-
animation: "".concat(rotationAnimation, " linear 2s infinite")
|
|
36
|
+
'&::before, &::after': _objectSpread(_objectSpread({
|
|
37
|
+
animation: "".concat(rotationAnimation, " linear 2s infinite")
|
|
38
|
+
}, isFirefox ? {
|
|
39
|
+
animationDirection: 'normal',
|
|
40
|
+
animationDuration: '1s'
|
|
41
|
+
} : {}), {}, {
|
|
32
42
|
'@media (prefers-reduced-motion)': {
|
|
33
43
|
animation: 'none'
|
|
34
44
|
}
|
|
35
|
-
}
|
|
45
|
+
})
|
|
36
46
|
});
|
|
37
|
-
var prismBorderStyles = function prismBorderStyles(colorMode,
|
|
38
|
-
return css({
|
|
47
|
+
var prismBorderStyles = function prismBorderStyles(colorMode, hover) {
|
|
48
|
+
return css(_objectSpread({
|
|
39
49
|
content: "''",
|
|
40
|
-
position: 'absolute',
|
|
41
|
-
background: "conic-gradient( from var(--panel-gradient-angle, 180deg) at 50% 50%, ".concat(
|
|
42
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
43
|
-
aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']
|
|
44
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
45
|
-
, " -52.2deg, ").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 89.76deg, ").concat(
|
|
46
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
47
|
-
aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']
|
|
48
50
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
49
|
-
|
|
50
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
51
|
-
aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']
|
|
51
|
+
position: 'absolute',
|
|
52
52
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
53
|
-
, " 307.8deg, ").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 449.76deg )"),
|
|
54
53
|
zIndex: -1,
|
|
55
54
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
56
|
-
width: "calc(100% +
|
|
55
|
+
width: "calc(100% + 2px)",
|
|
56
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
57
|
+
height: "calc(100% + 2px)",
|
|
57
58
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
58
|
-
|
|
59
|
+
top: "-1px",
|
|
59
60
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
60
|
-
|
|
61
|
+
left: "-1px",
|
|
61
62
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
62
|
-
|
|
63
|
-
borderRadius: "var(--ds-border-radius-200, 5px)",
|
|
63
|
+
borderRadius: "calc(".concat("var(--ds-border-radius-100, 3px)", " + 1px)"),
|
|
64
64
|
transform: 'translate3d(0, 0, 0)'
|
|
65
|
-
}
|
|
65
|
+
}, hover ? {
|
|
66
|
+
background: "var(--ds-border-input, ".concat(N500, ")")
|
|
67
|
+
} : isFirefox ? {
|
|
68
|
+
background: "linear-gradient(90deg,\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 12%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 24%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 48%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 64%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 80%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 100%\n\t\t\t\t\t\t\t)"),
|
|
69
|
+
backgroundSize: '200%'
|
|
70
|
+
} : {
|
|
71
|
+
background: "conic-gradient(\n\t\t\t\t\t\t\t\tfrom var(--panel-gradient-angle, 270deg),\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 20%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 50%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 56%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 100%\n\t\t\t\t\t\t\t)")
|
|
72
|
+
}));
|
|
66
73
|
};
|
|
67
74
|
|
|
68
75
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
|
|
69
76
|
export var aiPanelStyles = function aiPanelStyles(colorMode) {
|
|
70
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t@property --panel-gradient-angle {\n\t\tsyntax: '<angle>';\n\t\tinitial-value:
|
|
77
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t@property --panel-gradient-angle {\n\t\tsyntax: '<angle>';\n\t\tinitial-value: 270deg;\n\t\tinherits: false;\n\t}\n\n\tdiv[extensionType='com.atlassian.ai-blocks'] {\n\t\t// This hides the label for the extension\n\t\t.extension-label {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t// This styles the ai panel correctly when its just sitting on the page and there\n\t\t// is no user interaction\n\t\t.extension-container {\n\t\t\tposition: relative;\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\tbackground-color: ", " !important;\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t&.with-hover-border {\n\t\t\t\t&::before,\n\t\t\t\t&::after {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t\t& .with-margin-styles {\n\t\t\t\tbackground-color: ", " !important;\n\t\t\t\tborder-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// This styles the ai panel correctly when its streaming\n\tdiv[extensionType='com.atlassian.ai-blocks']:has(.streaming) {\n\t\t.extension-container {\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\t", "\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t// This styles the ai panel correctly when a user is hovering over the delete button in the floating panel\n\tdiv[extensionType='com.atlassian.ai-blocks'].danger {\n\t\t.extension-container {\n\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t}\n\t}\n\n\t// This removes the margin from the action list when inside an ai panel\n\tdiv[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {\n\t\tdiv[data-node-type='actionList'] {\n\t\t\tmargin: 0 !important;\n\t\t}\n\t}\n"])), "var(--ds-surface, ".concat(N0, ")"), prismBorderStyles(colorMode), prismBorderStyles(colorMode, true), "var(--ds-surface, ".concat(N0, ")"), "var(--ds-border-radius-100, 3px)", prismBorderAnimationStyles, prismBorderStyles(colorMode), "var(--ds-border-danger, ".concat(R400, ")"));
|
|
71
78
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "195.0.
|
|
2
|
+
export var version = "195.0.2";
|