@atlaskit/editor-core 214.2.4 → 215.0.0
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 +20 -0
- package/dist/cjs/index.js +0 -7
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +38 -2
- package/dist/cjs/ui/EditorContentContainer/styles/tableStyles.js +10 -2
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/index.js +0 -8
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +40 -3
- package/dist/es2019/ui/EditorContentContainer/styles/tableStyles.js +9 -1
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/index.js +0 -8
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +39 -3
- package/dist/esm/ui/EditorContentContainer/styles/tableStyles.js +9 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/index.d.ts +0 -7
- package/dist/types/ui/EditorContentContainer/styles/tableStyles.d.ts +1 -0
- package/dist/types-ts4.5/index.d.ts +0 -7
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/tableStyles.d.ts +1 -0
- package/package.json +9 -3
- package/create-editor-content-style/package.json +0 -17
- package/dist/cjs/nodeviews/getInlineNodeViewProducer.styles.js +0 -43
- package/dist/cjs/ui/ContentStyles/ai-panels.js +0 -91
- package/dist/cjs/ui/ContentStyles/code-bidi-warning.js +0 -75
- package/dist/cjs/ui/ContentStyles/code-block.js +0 -28
- package/dist/cjs/ui/ContentStyles/date.js +0 -43
- package/dist/cjs/ui/ContentStyles/expand.js +0 -37
- package/dist/cjs/ui/ContentStyles/extension.js +0 -21
- package/dist/cjs/ui/ContentStyles/index.js +0 -220
- package/dist/cjs/ui/ContentStyles/layout.js +0 -80
- package/dist/cjs/ui/ContentStyles/media.js +0 -27
- package/dist/cjs/ui/ContentStyles/panel.js +0 -17
- package/dist/cjs/ui/ContentStyles/status.js +0 -158
- package/dist/cjs/ui/ContentStyles/tasks-and-decisions.js +0 -556
- package/dist/es2019/nodeviews/getInlineNodeViewProducer.styles.js +0 -47
- package/dist/es2019/ui/ContentStyles/ai-panels.js +0 -168
- package/dist/es2019/ui/ContentStyles/code-bidi-warning.js +0 -68
- package/dist/es2019/ui/ContentStyles/code-block.js +0 -90
- package/dist/es2019/ui/ContentStyles/date.js +0 -57
- package/dist/es2019/ui/ContentStyles/expand.js +0 -142
- package/dist/es2019/ui/ContentStyles/extension.js +0 -236
- package/dist/es2019/ui/ContentStyles/index.js +0 -580
- package/dist/es2019/ui/ContentStyles/layout.js +0 -388
- package/dist/es2019/ui/ContentStyles/media.js +0 -207
- package/dist/es2019/ui/ContentStyles/panel.js +0 -66
- package/dist/es2019/ui/ContentStyles/status.js +0 -197
- package/dist/es2019/ui/ContentStyles/tasks-and-decisions.js +0 -551
- package/dist/esm/nodeviews/getInlineNodeViewProducer.styles.js +0 -36
- package/dist/esm/ui/ContentStyles/ai-panels.js +0 -87
- package/dist/esm/ui/ContentStyles/code-bidi-warning.js +0 -68
- package/dist/esm/ui/ContentStyles/code-block.js +0 -21
- package/dist/esm/ui/ContentStyles/date.js +0 -37
- package/dist/esm/ui/ContentStyles/expand.js +0 -31
- package/dist/esm/ui/ContentStyles/extension.js +0 -15
- package/dist/esm/ui/ContentStyles/index.js +0 -214
- package/dist/esm/ui/ContentStyles/layout.js +0 -74
- package/dist/esm/ui/ContentStyles/media.js +0 -21
- package/dist/esm/ui/ContentStyles/panel.js +0 -11
- package/dist/esm/ui/ContentStyles/status.js +0 -152
- package/dist/esm/ui/ContentStyles/tasks-and-decisions.js +0 -548
- package/dist/types/nodeviews/getInlineNodeViewProducer.styles.d.ts +0 -2
- package/dist/types/ui/ContentStyles/ai-panels.d.ts +0 -8
- package/dist/types/ui/ContentStyles/code-bidi-warning.d.ts +0 -2
- package/dist/types/ui/ContentStyles/code-block.d.ts +0 -2
- package/dist/types/ui/ContentStyles/date.d.ts +0 -3
- package/dist/types/ui/ContentStyles/expand.d.ts +0 -2
- package/dist/types/ui/ContentStyles/extension.d.ts +0 -2
- package/dist/types/ui/ContentStyles/index.d.ts +0 -23
- package/dist/types/ui/ContentStyles/layout.d.ts +0 -8
- package/dist/types/ui/ContentStyles/media.d.ts +0 -2
- package/dist/types/ui/ContentStyles/panel.d.ts +0 -2
- package/dist/types/ui/ContentStyles/status.d.ts +0 -3
- package/dist/types/ui/ContentStyles/tasks-and-decisions.d.ts +0 -6
- package/dist/types-ts4.5/nodeviews/getInlineNodeViewProducer.styles.d.ts +0 -2
- package/dist/types-ts4.5/ui/ContentStyles/ai-panels.d.ts +0 -8
- package/dist/types-ts4.5/ui/ContentStyles/code-bidi-warning.d.ts +0 -2
- package/dist/types-ts4.5/ui/ContentStyles/code-block.d.ts +0 -2
- package/dist/types-ts4.5/ui/ContentStyles/date.d.ts +0 -3
- package/dist/types-ts4.5/ui/ContentStyles/expand.d.ts +0 -2
- package/dist/types-ts4.5/ui/ContentStyles/extension.d.ts +0 -2
- package/dist/types-ts4.5/ui/ContentStyles/index.d.ts +0 -23
- package/dist/types-ts4.5/ui/ContentStyles/layout.d.ts +0 -8
- package/dist/types-ts4.5/ui/ContentStyles/media.d.ts +0 -2
- package/dist/types-ts4.5/ui/ContentStyles/panel.d.ts +0 -2
- package/dist/types-ts4.5/ui/ContentStyles/status.d.ts +0 -3
- package/dist/types-ts4.5/ui/ContentStyles/tasks-and-decisions.d.ts +0 -6
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.aiPanelStyles = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _react = require("@emotion/react");
|
|
11
|
-
var _templateObject;
|
|
12
|
-
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; }
|
|
13
|
-
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; } /**
|
|
14
|
-
* TODO ED-26957 - remove legacy styles when static emotion refactor is complete
|
|
15
|
-
* We are moving this to new location under FF: platform_editor_core_static_emotion
|
|
16
|
-
* New location: packages/editor/editor-core/src/ui/EditorContentContainer.tsx
|
|
17
|
-
* If you are making updates to this file, please updates in new location as well.
|
|
18
|
-
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
19
|
-
var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
20
|
-
var rotationAnimation = (0, _react.keyframes)({
|
|
21
|
-
'0%': _objectSpread({
|
|
22
|
-
'--panel-gradient-angle': '0deg'
|
|
23
|
-
}, isFirefox ? {
|
|
24
|
-
backgroundPosition: '100%'
|
|
25
|
-
} : {}),
|
|
26
|
-
'100%': _objectSpread({
|
|
27
|
-
'--panel-gradient-angle': '360deg'
|
|
28
|
-
}, isFirefox ? {
|
|
29
|
-
backgroundPosition: '-100%'
|
|
30
|
-
} : {})
|
|
31
|
-
});
|
|
32
|
-
var aiPrismColor = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, 'prism.border.step.1', {
|
|
33
|
-
light: '#0065FF',
|
|
34
|
-
dark: '#0065FF80'
|
|
35
|
-
}), 'prism.border.step.2', {
|
|
36
|
-
light: '#0469FF',
|
|
37
|
-
dark: '#0469FF80'
|
|
38
|
-
}), 'prism.border.step.3', {
|
|
39
|
-
light: '#BF63F3',
|
|
40
|
-
dark: '#BF63F380'
|
|
41
|
-
}), 'prism.border.step.4', {
|
|
42
|
-
light: '#FFA900',
|
|
43
|
-
dark: '#FFA90080'
|
|
44
|
-
});
|
|
45
|
-
var prismBorderAnimationStyles = (0, _react.css)({
|
|
46
|
-
'&::before, &::after': _objectSpread(_objectSpread({
|
|
47
|
-
animationName: rotationAnimation,
|
|
48
|
-
animationDuration: '2s',
|
|
49
|
-
animationTimingFunction: 'linear',
|
|
50
|
-
animationIterationCount: 'infinite'
|
|
51
|
-
}, isFirefox ? {
|
|
52
|
-
animationDirection: 'normal',
|
|
53
|
-
animationDuration: '1s'
|
|
54
|
-
} : {}), {}, {
|
|
55
|
-
'@media (prefers-reduced-motion)': {
|
|
56
|
-
animation: 'none'
|
|
57
|
-
}
|
|
58
|
-
})
|
|
59
|
-
});
|
|
60
|
-
var prismBorderStyles = function prismBorderStyles(colorMode, hover) {
|
|
61
|
-
return (0, _react.css)(_objectSpread({
|
|
62
|
-
content: "''",
|
|
63
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
64
|
-
position: 'absolute',
|
|
65
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
66
|
-
zIndex: -1,
|
|
67
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
68
|
-
width: "calc(100% + 2px)",
|
|
69
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
70
|
-
height: "calc(100% + 2px)",
|
|
71
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
72
|
-
top: "-1px",
|
|
73
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
74
|
-
left: "-1px",
|
|
75
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
76
|
-
borderRadius: "calc(".concat("var(--ds-radius-small, 3px)", " + 1px)"),
|
|
77
|
-
transform: 'translate3d(0, 0, 0)'
|
|
78
|
-
}, hover ? {
|
|
79
|
-
background: "var(--ds-border-input, #8590A2)"
|
|
80
|
-
} : isFirefox ? {
|
|
81
|
-
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)"),
|
|
82
|
-
backgroundSize: '200%'
|
|
83
|
-
} : {
|
|
84
|
-
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)")
|
|
85
|
-
}));
|
|
86
|
-
};
|
|
87
|
-
var aiPanelStyles = exports.aiPanelStyles = function aiPanelStyles(colorMode
|
|
88
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
89
|
-
) {
|
|
90
|
-
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\tis 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, #FFFFFF)", prismBorderStyles(colorMode), prismBorderStyles(colorMode, true), "var(--ds-surface, #FFFFFF)", "var(--ds-radius-small, 3px)", prismBorderAnimationStyles, prismBorderStyles(colorMode), "var(--ds-border-danger, #E2483D)");
|
|
91
|
-
};
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.codeBidiWarningStyles = void 0;
|
|
7
|
-
var _react = require("@emotion/react");
|
|
8
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
9
|
-
|
|
10
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
11
|
-
var codeBidiWarningStyles = exports.codeBidiWarningStyles = (0, _react.css)({
|
|
12
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
13
|
-
'[data-prosemirror-node-name="code-bidi-warning"]': {
|
|
14
|
-
display: 'inline-block'
|
|
15
|
-
},
|
|
16
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
17
|
-
'[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]': {
|
|
18
|
-
paddingInlineStart: "var(--ds-space-050, 4px)",
|
|
19
|
-
paddingInlineEnd: "var(--ds-space-050, 4px)",
|
|
20
|
-
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
21
|
-
fontStyle: 'normal',
|
|
22
|
-
fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
23
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
24
|
-
paddingTop: '0.05rem',
|
|
25
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
26
|
-
paddingBottom: '0.05rem',
|
|
27
|
-
color: "var(--ds-text-warning, #A54800)",
|
|
28
|
-
backgroundColor: "var(--ds-background-warning, #FFF7D6)"
|
|
29
|
-
},
|
|
30
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
31
|
-
'[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]:hover': {
|
|
32
|
-
color: "var(--ds-text-warning, #A54800)",
|
|
33
|
-
backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
|
|
34
|
-
},
|
|
35
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
36
|
-
'[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-tooltip"]': {
|
|
37
|
-
visibility: 'hidden',
|
|
38
|
-
boxSizing: 'border-box',
|
|
39
|
-
width: '15pc',
|
|
40
|
-
backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
|
|
41
|
-
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
42
|
-
overflowWrap: 'break-word',
|
|
43
|
-
cursor: 'default',
|
|
44
|
-
borderRadius: "var(--ds-radius-small, 4px)",
|
|
45
|
-
margin: "var(--ds-space-0, 0px)",
|
|
46
|
-
padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
|
|
47
|
-
position: 'fixed',
|
|
48
|
-
// The character label will be ~80px and this is positioned from the end of that label
|
|
49
|
-
// We also use this instead of top: 24px to make sure the tooltip maintains its initial position
|
|
50
|
-
// instead of being positioned relative to the viewport.
|
|
51
|
-
// We need to use position: fixed so that the tooltip bypasses the overflow settings of the code block
|
|
52
|
-
// and is always visible.
|
|
53
|
-
// We also offset a little extra here to account for the transition behavior (to replicate ADS fade-in-from-top)
|
|
54
|
-
transform: 'translate(calc(-50% - 40px), calc(24px - 4px))',
|
|
55
|
-
opacity: 0,
|
|
56
|
-
whiteSpace: 'normal',
|
|
57
|
-
font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
58
|
-
zIndex: 9999,
|
|
59
|
-
// Exit animation timings
|
|
60
|
-
// - Mark invisible after 0.475s
|
|
61
|
-
// - After 0.3s, fade out and move up over 0.175s
|
|
62
|
-
transition: 'visibility 0s linear 0.475s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s'
|
|
63
|
-
},
|
|
64
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
65
|
-
'[data-prosemirror-node-name="code-bidi-warning"]:hover [data-bidi-component="code-bidi-warning-tooltip"]': {
|
|
66
|
-
visibility: 'visible',
|
|
67
|
-
transform: 'translate(calc(-50% - 40px), calc(24px))',
|
|
68
|
-
opacity: 1,
|
|
69
|
-
// Enter animation timings
|
|
70
|
-
// - Mark visible after 0.3s of hovering
|
|
71
|
-
// - After 0.3s, fade in over 0.175s
|
|
72
|
-
// - After 0.3s, move down over 0.35s
|
|
73
|
-
transition: 'visibility 0s linear 0.3s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.35s cubic-bezier(0.15,1,0.3,1) 0.3s'
|
|
74
|
-
}
|
|
75
|
-
});
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.codeBlockStyles = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
|
-
var _react = require("@emotion/react");
|
|
10
|
-
var _styles = require("@atlaskit/editor-common/styles");
|
|
11
|
-
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
|
-
var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
|
|
13
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
14
|
-
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
|
|
15
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
16
|
-
var GutterDangerOverlay = function GutterDangerOverlay() {
|
|
17
|
-
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t&::after {\n\t\theight: 100%;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 24px;\n\t\tbackground-color: ", ";\n\t}\n"])), "var(--ds-blanket-danger, none)");
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
/* When code-block is inside the panel */
|
|
21
|
-
var firstCodeBlockWithNoMargin = (0, _platformFeatureFlagsReact.functionWithFG)('platform_editor_nested_dnd_styles_changes', function () {
|
|
22
|
-
return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.ak-editor-panel__content {\n\t\t\t> .code-block:first-child,\n\t\t\t> .ProseMirror-widget:first-child + .code-block,\n\t\t\t> .ProseMirror-widget:first-child + .ProseMirror-widget + .code-block {\n\t\t\t\tmargin: 0 0 0 0 !important;\n\t\t\t}\n\t\t}\n\t"])));
|
|
23
|
-
}, function () {
|
|
24
|
-
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.ak-editor-panel__content {\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin: 0 0 0 0 !important;\n\t\t\t}\n\t\t}\n\t"])));
|
|
25
|
-
});
|
|
26
|
-
var codeBlockStyles = exports.codeBlockStyles = function codeBlockStyles() {
|
|
27
|
-
return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror li {\n\t\t/* if same list item has multiple code blocks we need top margin for all but first */\n\t\t> .code-block {\n\t\t\tmargin: ", " 0 0 0;\n\t\t}\n\t\t> .code-block:first-child,\n\t\t> .ProseMirror-gapcursor:first-child + .code-block {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t> div:last-of-type.code-block,\n\t\t> pre:last-of-type.code-block {\n\t\t\tmargin-bottom: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror .code-block.", ":not(.danger) {\n\t\t", "\n\t}\n\n\t/* Danger when top level node */\n\t.ProseMirror .danger.code-block {\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t\t", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t/* Danger when nested node */\n\t.ProseMirror .danger .code-block {\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t\t", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t", "\n"])), (0, _styles.codeBlockSharedStyles)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, #FFECEB)", "var(--ds-text-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), GutterDangerOverlay(), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, rgba(255, 143, 115, 0.5))", "var(--ds-text-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), GutterDangerOverlay(), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, rgba(255, 189, 173, 0.5))", firstCodeBlockWithNoMargin());
|
|
28
|
-
};
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.dateStyles = exports.dateNodeStyles = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
|
-
var _react = require("@emotion/react");
|
|
10
|
-
var _styles = require("@atlaskit/editor-common/styles");
|
|
11
|
-
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
|
-
var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
13
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
14
|
-
var dateNodeStyles = exports.dateNodeStyles = (0, _react.css)({
|
|
15
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
16
|
-
"[data-prosemirror-node-name='date'] .date-lozenger-container span": {
|
|
17
|
-
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
18
|
-
color: "var(--ds-text, #172B4D)",
|
|
19
|
-
borderRadius: "var(--ds-radius-small, 4px)",
|
|
20
|
-
padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
|
|
21
|
-
margin: '0 1px',
|
|
22
|
-
position: 'relative',
|
|
23
|
-
transition: 'background 0.3s',
|
|
24
|
-
whiteSpace: 'nowrap',
|
|
25
|
-
cursor: 'unset'
|
|
26
|
-
},
|
|
27
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
28
|
-
"[data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
|
|
29
|
-
backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
|
|
30
|
-
},
|
|
31
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
32
|
-
"[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
|
|
33
|
-
backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
|
|
34
|
-
color: "var(--ds-text-accent-red, #AE2E24)"
|
|
35
|
-
},
|
|
36
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
37
|
-
"[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
|
|
38
|
-
backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
43
|
-
var dateStyles = exports.dateStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t.", " {\n\t\t\tline-height: initial;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " > span {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t}\n\t}\n"])), _styles.DateSharedCssClassName.DATE_CONTAINER, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.DateSharedCssClassName.DATE_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"));
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.expandStyles = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
|
-
var _react = require("@emotion/react");
|
|
10
|
-
var _styles = require("@atlaskit/editor-common/styles");
|
|
11
|
-
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
|
-
var _templateObject, _templateObject2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
14
|
-
var EXPAND_SELECTED_BACKGROUND = "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0.6))";
|
|
15
|
-
var EXPAND_ICON_COLOR = function EXPAND_ICON_COLOR() {
|
|
16
|
-
return (0, _react.css)({
|
|
17
|
-
color: "var(--ds-icon-subtle, #626F86)"
|
|
18
|
-
});
|
|
19
|
-
};
|
|
20
|
-
var DANGER_STATE_BACKGROUND_COLOR = "var(--ds-background-danger, #FFECEB)";
|
|
21
|
-
var DANGER_STATE_BORDER_COLOR = "var(--ds-border-danger, #E2483D)";
|
|
22
|
-
var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
|
|
23
|
-
return (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
24
|
-
(0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> div.ak-editor-expand[data-node-type='nestedExpand'] {\n\t\t\t\t\tmargin-top: ", ";\n\t\t\t\t}\n\t\t\t"])), "var(--ds-space-050, 0.25rem)") : '';
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
28
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
29
|
-
var expandStyles = exports.expandStyles = function expandStyles() {
|
|
30
|
-
return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t", "\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.expandClassNames.icon, _styles.expandClassNames.prefix, _styles.sharedExpandStyles.containerStyles({
|
|
31
|
-
expanded: false,
|
|
32
|
-
focused: false
|
|
33
|
-
})(), _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]) + "border: ".concat(_editorSharedStyles.akEditorSelectedBorder, ";") : (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, _styles.expandClassNames.type('expand'), _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, _styles.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akLayoutGutterOffset, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror\n\t\t> .".concat(_styles.expandClassNames.type('expand'), ",\n\t\t.").concat(_styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, "\n\t\t> .").concat(_styles.expandClassNames.type('expand'), " {\n\t\tmargin-left: -").concat(_editorSharedStyles.akLayoutGutterOffset + 8, "px;\n\t\tmargin-right: -").concat(_editorSharedStyles.akLayoutGutterOffset + 8, "px;\n\t}"), _styles.expandClassNames.content, _styles.sharedExpandStyles.contentStyles({
|
|
34
|
-
expanded: false,
|
|
35
|
-
focused: false
|
|
36
|
-
})(), _styles.expandClassNames.titleInput, _styles.sharedExpandStyles.titleInputStyles(), _styles.expandClassNames.titleContainer, _styles.sharedExpandStyles.titleContainerStyles(), _styles.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, #091E4224)", _styles.expandClassNames.content, "var(--ds-space-100, 8px)", firstNodeWithNotMarginTop(), _styles.expandClassNames.inputContainer, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, #091E4224)", EXPAND_SELECTED_BACKGROUND);
|
|
37
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.extensionStyles = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
|
-
var _react = require("@emotion/react");
|
|
10
|
-
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
11
|
-
var _templateObject, _templateObject2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
12
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
13
|
-
var extensionLabelStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t&.danger > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t&:not(.danger).", " > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t/* Targets the icon for bodied macro styling in button label */\n\t&.danger > span > div > .extension-label > span {\n\t\tdisplay: inline;\n\t}\n\n\t&:not(.danger).", " > span > div .extension-label > span {\n\t\tdisplay: inline;\n\t}\n\n\t/* Start of bodied extension edit toggle styles */\n\t&.danger.", " > span > .extension-edit-toggle-container {\n\t\topacity: 1;\n\t}\n\n\t&:not(.danger).", " > span > .extension-edit-toggle-container {\n\t\topacity: 1;\n\t}\n\n\t/* In view mode of the bodied macro, we never want to show the extension label */\n\t&.danger.", " > span > div > .extension-label.always-hide-label {\n\t\topacity: 0;\n\t}\n\n\t&:not(.danger).", "\n\t\t> span\n\t\t> div\n\t\t> .extension-label.always-hide-label {\n\t\topacity: 0;\n\t}\n\n\t/* .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled */\n\t&:not(.danger).", "\n\t\t> span\n\t\t> div\n\t\t> .extension-label.with-bodied-macro-live-page-styles {\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t}\n\n\t&.danger.", "\n\t\t> span\n\t\t> div\n\t\t> .extension-label.with-bodied-macro-live-page-styles {\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t}\n\n\t&.danger.", "\n\t\t> span\n\t\t> .extension-edit-toggle-container\n\t\t> .extension-edit-toggle {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tbox-shadow: none;\n\t}\n"])), "var(--ds-background-accent-red-subtler, #FFD5D2)", "var(--ds-text-danger, #AE2E24)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-background-selected, #E9F2FF)", "var(--ds-text-selected, #0C66E4)", _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, #E2483D)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-background-accent-red-subtler, #FFD5D2)", "var(--ds-text-danger, #AE2E24)");
|
|
14
|
-
var dangerOverlayStyles = (0, _react.css)({
|
|
15
|
-
opacity: 0.3,
|
|
16
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
17
|
-
backgroundColor: "var(--ds-background-danger-hovered, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")")
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
21
|
-
var extensionStyles = exports.extensionStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.multiBodiedExtensionView-content-wrap {\n\t\t&.danger > span > .multiBodiedExtension--container {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t", "\n\n\t\t&.danger > span > .with-danger-overlay {\n\t\t\tbackground-color: transparent;\n\t\t\t.multiBodiedExtension--overlay {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&:not(.danger).", " {\n\t\t\t& > span > .multiBodiedExtension--container {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t\t.multiBodiedExtension--container {\n\t\t\twidth: 100%;\n\t\t\tmax-width: 100%; /* ensure width can't go over 100% */\n\t\t}\n\t}\n\n\t.inlineExtensionView-content-wrap {\n\t\t&.danger > span > .extension-container {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t&.danger > span > .with-danger-overlay {\n\t\t\t/* If the macro turned used to turn red before, not setting the background to be transparent will cause the\n\t\t\tdanger state to have two layers of red which we don't want. */\n\t\t\tbackground-color: transparent;\n\t\t\t.extension-overlay {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&:not(.danger).", " {\n\t\t\t& > span > .extension-container {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t}\n\n\t/* This is referenced in the toDOM of a bodied extension and is used to put\n\tlabel content into the bodied extension.\n\tWe do this so that we don't serialise the label (which causes the label to be\n\tbe copied to the clipboard causing copy-paste issues). */\n\t.bodied-extension-to-dom-label::after {\n\t\tcontent: attr(data-bodied-extension-label);\n\t}\n\n\t.extensionView-content-wrap,\n\t.multiBodiedExtensionView-content-wrap,\n\t.bodiedExtensionView-content-wrap {\n\t\tmargin: ", " 0;\n\n\t\t&:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t&:last-of-type {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\n\t\t&:not(.danger).", " {\n\t\t\t& > span > .extension-container {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.danger > span > .extension-container {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t", "\n\n\t\t&.danger > span > .with-danger-overlay {\n\t\t\tbackground-color: transparent;\n\t\t\t.extension-overlay {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.inline {\n\t\t\tword-wrap: break-all;\n\t\t}\n\t}\n\n\t.extensionView-content-wrap .extension-container {\n\t\toverflow: hidden;\n\n\t\t/* Don't hide overflow for editors inside extensions */\n\t\t&:has(.extension-editable-area) {\n\t\t\toverflow: visible;\n\t\t}\n\t}\n\n\t.bodiedExtensionView-content-wrap .extensionView-content-wrap .extension-container {\n\t\twidth: 100%;\n\t\tmax-width: 100%; /* ensure width can't go over 100% */\n\t}\n\n\t[data-mark-type='fragment'] {\n\t\t& > .extensionView-content-wrap,\n\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t& > [data-mark-type='dataConsumer'] {\n\t\t\t& > .extensionView-content-wrap,\n\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\tmargin: ", " 0;\n\t\t\t}\n\t\t}\n\n\t\t&:first-child {\n\t\t\t& > .extensionView-content-wrap,\n\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t& > [data-mark-type='dataConsumer'] {\n\t\t\t\t& > .extensionView-content-wrap,\n\t\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:nth-last-of-type(-n + 2):not(:first-of-type) {\n\t\t\t& > .extensionView-content-wrap,\n\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t}\n\n\t\t\t& > [data-mark-type='dataConsumer'] {\n\t\t\t\t& > .extensionView-content-wrap,\n\t\t\t\t& > .bodiedExtensionView-content-wrap {\n\t\t\t\t\tmargin-bottom: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), dangerOverlayStyles, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), extensionLabelStyles, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);
|
|
@@ -1,220 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.placeholderStyles = exports.linkStyles = exports.default = exports.createEditorContentStyle = void 0;
|
|
9
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _react2 = require("@emotion/react");
|
|
12
|
-
var _browser = require("@atlaskit/editor-common/browser");
|
|
13
|
-
var _collab = require("@atlaskit/editor-common/collab");
|
|
14
|
-
var _emoji = require("@atlaskit/editor-common/emoji");
|
|
15
|
-
var _mention = require("@atlaskit/editor-common/mention");
|
|
16
|
-
var _panel = require("@atlaskit/editor-common/panel");
|
|
17
|
-
var _selection = require("@atlaskit/editor-common/selection");
|
|
18
|
-
var _styles = require("@atlaskit/editor-common/styles");
|
|
19
|
-
var _styles2 = require("@atlaskit/editor-plugins/block-type/styles");
|
|
20
|
-
var _styles3 = require("@atlaskit/editor-plugins/find-replace/styles");
|
|
21
|
-
var _styles4 = require("@atlaskit/editor-plugins/paste-options-toolbar/styles");
|
|
22
|
-
var _styles5 = require("@atlaskit/editor-plugins/placeholder-text/styles");
|
|
23
|
-
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
24
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
25
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
26
|
-
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
27
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
28
|
-
var _tokens = require("@atlaskit/tokens");
|
|
29
|
-
var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
|
|
30
|
-
var _backgroundColorStyles = require("../EditorContentContainer/styles/backgroundColorStyles");
|
|
31
|
-
var _aiPanels = require("./ai-panels");
|
|
32
|
-
var _codeBidiWarning = require("./code-bidi-warning");
|
|
33
|
-
var _codeBlock = require("./code-block");
|
|
34
|
-
var _date = require("./date");
|
|
35
|
-
var _expand = require("./expand");
|
|
36
|
-
var _extension = require("./extension");
|
|
37
|
-
var _layout = require("./layout");
|
|
38
|
-
var _media = require("./media");
|
|
39
|
-
var _panel2 = require("./panel");
|
|
40
|
-
var _status = require("./status");
|
|
41
|
-
var _tasksAndDecisions = require("./tasks-and-decisions");
|
|
42
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1;
|
|
43
|
-
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
44
|
-
/* eslint-disable react-hooks/rules-of-hooks */
|
|
45
|
-
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
|
|
46
|
-
/**
|
|
47
|
-
* @jsxRuntime classic
|
|
48
|
-
* @jsx jsx
|
|
49
|
-
*/
|
|
50
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
51
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
52
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
53
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
54
|
-
var linkStyles = exports.linkStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t}\n"])), _styles.linkSharedStyle);
|
|
55
|
-
var ruleStyles = function ruleStyles() {
|
|
56
|
-
return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", ";\n\n\t\thr {\n\t\t\tcursor: pointer;\n\t\t\tpadding: ", " 0;\n\t\t\tmargin: ", " 0;\n\t\t\tbackground-clip: content-box;\n\n\t\t\t&.", " {\n\t\t\t\toutline: none;\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), (0, _styles.ruleSharedStyles)(), "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(_editorSharedStyles.akEditorSelectedBorderColor, ")"));
|
|
57
|
-
};
|
|
58
|
-
var mentionNodeStyles = (0, _react2.css)({
|
|
59
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
60
|
-
'.editor-mention-primitive': {
|
|
61
|
-
display: 'inline',
|
|
62
|
-
borderRadius: "var(--ds-radius-full, 9999px)",
|
|
63
|
-
cursor: 'pointer',
|
|
64
|
-
padding: '0 0.3em 2px 0.23em',
|
|
65
|
-
// To match `packages/elements/mention/src/components/Mention/PrimitiveMention.tsx` implementation
|
|
66
|
-
// we match the line height exactly
|
|
67
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
68
|
-
lineHeight: '1.714',
|
|
69
|
-
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
70
|
-
wordBreak: 'break-word',
|
|
71
|
-
background: "var(--ds-background-neutral, #091E420F)",
|
|
72
|
-
border: "var(--ds-border-width, 1px)".concat(" solid transparent"),
|
|
73
|
-
color: "var(--ds-text-subtle, #44546F)",
|
|
74
|
-
'&:hover': {
|
|
75
|
-
background: "var(--ds-background-neutral-hovered, #091E4224)"
|
|
76
|
-
},
|
|
77
|
-
'&:active': {
|
|
78
|
-
background: "var(--ds-background-neutral-pressed, #091E424F)"
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
82
|
-
'.editor-mention-primitive.mention-restricted': {
|
|
83
|
-
background: 'transparent',
|
|
84
|
-
border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)"),
|
|
85
|
-
color: "var(--ds-text, #172B4D)",
|
|
86
|
-
'&:hover': {
|
|
87
|
-
background: 'transparent'
|
|
88
|
-
},
|
|
89
|
-
'&:active': {
|
|
90
|
-
background: 'transparent'
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
94
|
-
'.editor-mention-primitive.mention-self': {
|
|
95
|
-
background: "var(--ds-background-brand-bold, #0C66E4)",
|
|
96
|
-
border: "var(--ds-border-width, 1px)".concat(" solid transparent"),
|
|
97
|
-
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
98
|
-
'&:hover': {
|
|
99
|
-
background: "var(--ds-background-brand-bold-hovered, #0055CC)"
|
|
100
|
-
},
|
|
101
|
-
'&:active': {
|
|
102
|
-
background: "var(--ds-background-brand-bold-pressed, #09326C)"
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
});
|
|
106
|
-
|
|
107
|
-
// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
|
|
108
|
-
// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
|
|
109
|
-
// So it will need to be considered if the typography gates are still in use when this is cleaned up.
|
|
110
|
-
var mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = (0, _react2.css)({
|
|
111
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
112
|
-
'.editor-mention-primitive': {
|
|
113
|
-
padding: '1px 0.3em 1px 0.23em'
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
var mentionSelectionStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
|
|
117
|
-
var mentionsSelectionStylesWithSearchMatch = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", ":not(.search-match-block) > .editor-mention-primitive,\n\t.", ":not(.search-match-block)\n\t\t> .editor-mention-primitive.mention-self,\n\t.", ":not(.search-match-block)\n\t\t> .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n\n\t.", ".search-match-block > .editor-mention-primitive,\n\t.", ".search-match-block > .editor-mention-primitive.mention-self,\n\t.", ".search-match-block\n\t\t> .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
|
|
118
|
-
var mentionsStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n\t\t\t(in dark blue) have white text by default */\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
|
|
119
|
-
var listsStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t/* In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\tThe following rule resets the first p tag back to its original margin\n\t\t\tdefined in packages/editor/editor-common/src/styles/shared/paragraph.ts */\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n /* This prevents https://product-fabric.atlassian.net/browse/ED-20924 */\n &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
|
|
120
|
-
var emojiStyles = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror .", " {\n\t\tdisplay: inline-block;\n\t}\n\n\t.ProseMirror\n\t\t:is(.", ", .", ") {\n\t\tbackground: no-repeat transparent;\n\t\tdisplay: inline-block;\n\t\theight: ", "px;\n\t\tmax-height: ", "px;\n\t\tcursor: pointer;\n\t\tvertical-align: middle;\n\t\tuser-select: all;\n\t}\n\n\t.ProseMirror .", " {\n\t\t.", ", .", " {\n\t\t\tborder-radius: ", ";\n\t\t\t", "\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _emoji.defaultEmojiHeight, _emoji.defaultEmojiHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, "var(--ds-radius-xsmall, 2px)", (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
|
|
121
|
-
|
|
122
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
123
|
-
var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
|
|
124
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
125
|
-
'.ProseMirror .placeholder-decoration': {
|
|
126
|
-
color: "var(--ds-text-subtlest, #626F86)",
|
|
127
|
-
width: '100%',
|
|
128
|
-
pointerEvents: 'none',
|
|
129
|
-
userSelect: 'none',
|
|
130
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
131
|
-
'.placeholder-android': {
|
|
132
|
-
pointerEvents: 'none',
|
|
133
|
-
outline: 'none',
|
|
134
|
-
userSelect: 'none',
|
|
135
|
-
position: 'absolute'
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
});
|
|
139
|
-
var placeholderOverflowStyles = (0, _react2.css)({
|
|
140
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
141
|
-
'.ProseMirror p:has(.placeholder-decoration-hide-overflow)': {
|
|
142
|
-
overflow: 'hidden',
|
|
143
|
-
whiteSpace: 'nowrap',
|
|
144
|
-
textOverflow: 'ellipsis'
|
|
145
|
-
}
|
|
146
|
-
});
|
|
147
|
-
var placeholderWrapStyles = (0, _react2.css)({
|
|
148
|
-
// As part of controls work, we add placeholder `Search` to quick insert command
|
|
149
|
-
// This style is to prevent `/Search` being wrapped if it's triggered at the end of the line
|
|
150
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
151
|
-
'.ProseMirror mark[data-type-ahead-query="true"]:has(.placeholder-decoration-wrap)': {
|
|
152
|
-
whiteSpace: 'nowrap'
|
|
153
|
-
}
|
|
154
|
-
});
|
|
155
|
-
var firstBlockNodeStylesNew = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
|
|
156
|
-
|
|
157
|
-
// Make sure the first floating toolbar button has focus ring when focused via .focus()
|
|
158
|
-
var firstFloatingToolbarButtonStyles = (0, _react2.css)({
|
|
159
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
160
|
-
'button.first-floating-toolbar-button:focus': {
|
|
161
|
-
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #2684FF)")
|
|
162
|
-
}
|
|
163
|
-
});
|
|
164
|
-
|
|
165
|
-
// The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
|
|
166
|
-
var akEditorBreakpointForSmallDevice = "1266px";
|
|
167
|
-
|
|
168
|
-
// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
|
|
169
|
-
/**
|
|
170
|
-
* @deprecated
|
|
171
|
-
* DO NOT USE THIS WILL BE REMOVED SOON.
|
|
172
|
-
* use this instead: packages/editor/editor-core/src/ui/EditorContentContainer.tsx
|
|
173
|
-
*/
|
|
174
|
-
var legacyContentStyles = function legacyContentStyles(props) {
|
|
175
|
-
return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--resizer-handle-spacing: 12px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-padding)\n\t);\n\t--ak-editor--breakout-min-width: 100%;\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\n\t\t--ak-editor--breakout-min-width: 0px;\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t", "\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t */\n\t.ProseMirror-hideselection {\n\t\tcaret-color: transparent;\n\t}\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: ", " solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t\t\t\t@container editor-area (max-width: ", "px) {\n\t\t\t\t\t--ak-editor--large-gutter-padding: ", "px;\n\t\t\t\t}\n\t\t\t"])), _editorSharedStyles.akEditorFullPageNarrowBreakout, _editorSharedStyles.akEditorGutterPaddingReduced) : null, (0, _editorSharedStyles.editorFontSize)({
|
|
176
|
-
theme: props.theme
|
|
177
|
-
}), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-width-focused, 2px)", "var(--ds-border-focused, #8cf)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) && _backgroundColorStyles.textHighlightPaddingStyles, listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? _styles3.findReplaceStylesNew : _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true) ? _tasksAndDecisions.taskItemStylesWithBlockTaskItem : _tasksAndDecisions.taskItemStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithVisualRefresh, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithoutVisualRefresh, (0, _status.statusStyles)(), (0, _status.statusNodeStyles)(), (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _styles.getSmartCardSharedStyles)(), _date.dateStyles, _date.dateNodeStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _styles.pragmaticResizerStylesWithReducedEditorGutter)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') && _codeBidiWarning.codeBidiWarningStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
|
|
178
|
-
};
|
|
179
|
-
var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
|
|
180
|
-
return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
181
|
-
var className = props.className,
|
|
182
|
-
children = props.children,
|
|
183
|
-
featureFlags = props.featureFlags;
|
|
184
|
-
var theme = (0, _react2.useTheme)();
|
|
185
|
-
var _useThemeObserver = (0, _tokens.useThemeObserver)(),
|
|
186
|
-
colorMode = _useThemeObserver.colorMode,
|
|
187
|
-
typography = _useThemeObserver.typography;
|
|
188
|
-
var memoizedStyle = (0, _react.useMemo)(function () {
|
|
189
|
-
return legacyContentStyles({
|
|
190
|
-
theme: theme,
|
|
191
|
-
colorMode: colorMode,
|
|
192
|
-
featureFlags: featureFlags,
|
|
193
|
-
viewMode: props.viewMode,
|
|
194
|
-
typographyTheme: typography
|
|
195
|
-
});
|
|
196
|
-
}, [theme, colorMode, featureFlags, props.viewMode, typography]);
|
|
197
|
-
if (props.isScrollable) {
|
|
198
|
-
return (0, _react2.jsx)("div", {
|
|
199
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
200
|
-
className: className,
|
|
201
|
-
ref: ref,
|
|
202
|
-
css: [memoizedStyle, styles],
|
|
203
|
-
"data-editor-scroll-container": "true",
|
|
204
|
-
"data-testid": "editor-content-container"
|
|
205
|
-
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, @atlassian/a11y/no-noninteractive-tabindex -- Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
|
|
206
|
-
,
|
|
207
|
-
tabIndex: 0,
|
|
208
|
-
role: "region"
|
|
209
|
-
}, children);
|
|
210
|
-
}
|
|
211
|
-
return (0, _react2.jsx)("div", {
|
|
212
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
213
|
-
className: className,
|
|
214
|
-
ref: ref,
|
|
215
|
-
css: [memoizedStyle, styles],
|
|
216
|
-
"data-testid": "editor-content-container"
|
|
217
|
-
}, children);
|
|
218
|
-
});
|
|
219
|
-
};
|
|
220
|
-
var _default = exports.default = createEditorContentStyle();
|