@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.
Files changed (84) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/index.js +0 -7
  3. package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +38 -2
  4. package/dist/cjs/ui/EditorContentContainer/styles/tableStyles.js +10 -2
  5. package/dist/cjs/version-wrapper.js +1 -1
  6. package/dist/es2019/index.js +0 -8
  7. package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +40 -3
  8. package/dist/es2019/ui/EditorContentContainer/styles/tableStyles.js +9 -1
  9. package/dist/es2019/version-wrapper.js +1 -1
  10. package/dist/esm/index.js +0 -8
  11. package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +39 -3
  12. package/dist/esm/ui/EditorContentContainer/styles/tableStyles.js +9 -1
  13. package/dist/esm/version-wrapper.js +1 -1
  14. package/dist/types/index.d.ts +0 -7
  15. package/dist/types/ui/EditorContentContainer/styles/tableStyles.d.ts +1 -0
  16. package/dist/types-ts4.5/index.d.ts +0 -7
  17. package/dist/types-ts4.5/ui/EditorContentContainer/styles/tableStyles.d.ts +1 -0
  18. package/package.json +9 -3
  19. package/create-editor-content-style/package.json +0 -17
  20. package/dist/cjs/nodeviews/getInlineNodeViewProducer.styles.js +0 -43
  21. package/dist/cjs/ui/ContentStyles/ai-panels.js +0 -91
  22. package/dist/cjs/ui/ContentStyles/code-bidi-warning.js +0 -75
  23. package/dist/cjs/ui/ContentStyles/code-block.js +0 -28
  24. package/dist/cjs/ui/ContentStyles/date.js +0 -43
  25. package/dist/cjs/ui/ContentStyles/expand.js +0 -37
  26. package/dist/cjs/ui/ContentStyles/extension.js +0 -21
  27. package/dist/cjs/ui/ContentStyles/index.js +0 -220
  28. package/dist/cjs/ui/ContentStyles/layout.js +0 -80
  29. package/dist/cjs/ui/ContentStyles/media.js +0 -27
  30. package/dist/cjs/ui/ContentStyles/panel.js +0 -17
  31. package/dist/cjs/ui/ContentStyles/status.js +0 -158
  32. package/dist/cjs/ui/ContentStyles/tasks-and-decisions.js +0 -556
  33. package/dist/es2019/nodeviews/getInlineNodeViewProducer.styles.js +0 -47
  34. package/dist/es2019/ui/ContentStyles/ai-panels.js +0 -168
  35. package/dist/es2019/ui/ContentStyles/code-bidi-warning.js +0 -68
  36. package/dist/es2019/ui/ContentStyles/code-block.js +0 -90
  37. package/dist/es2019/ui/ContentStyles/date.js +0 -57
  38. package/dist/es2019/ui/ContentStyles/expand.js +0 -142
  39. package/dist/es2019/ui/ContentStyles/extension.js +0 -236
  40. package/dist/es2019/ui/ContentStyles/index.js +0 -580
  41. package/dist/es2019/ui/ContentStyles/layout.js +0 -388
  42. package/dist/es2019/ui/ContentStyles/media.js +0 -207
  43. package/dist/es2019/ui/ContentStyles/panel.js +0 -66
  44. package/dist/es2019/ui/ContentStyles/status.js +0 -197
  45. package/dist/es2019/ui/ContentStyles/tasks-and-decisions.js +0 -551
  46. package/dist/esm/nodeviews/getInlineNodeViewProducer.styles.js +0 -36
  47. package/dist/esm/ui/ContentStyles/ai-panels.js +0 -87
  48. package/dist/esm/ui/ContentStyles/code-bidi-warning.js +0 -68
  49. package/dist/esm/ui/ContentStyles/code-block.js +0 -21
  50. package/dist/esm/ui/ContentStyles/date.js +0 -37
  51. package/dist/esm/ui/ContentStyles/expand.js +0 -31
  52. package/dist/esm/ui/ContentStyles/extension.js +0 -15
  53. package/dist/esm/ui/ContentStyles/index.js +0 -214
  54. package/dist/esm/ui/ContentStyles/layout.js +0 -74
  55. package/dist/esm/ui/ContentStyles/media.js +0 -21
  56. package/dist/esm/ui/ContentStyles/panel.js +0 -11
  57. package/dist/esm/ui/ContentStyles/status.js +0 -152
  58. package/dist/esm/ui/ContentStyles/tasks-and-decisions.js +0 -548
  59. package/dist/types/nodeviews/getInlineNodeViewProducer.styles.d.ts +0 -2
  60. package/dist/types/ui/ContentStyles/ai-panels.d.ts +0 -8
  61. package/dist/types/ui/ContentStyles/code-bidi-warning.d.ts +0 -2
  62. package/dist/types/ui/ContentStyles/code-block.d.ts +0 -2
  63. package/dist/types/ui/ContentStyles/date.d.ts +0 -3
  64. package/dist/types/ui/ContentStyles/expand.d.ts +0 -2
  65. package/dist/types/ui/ContentStyles/extension.d.ts +0 -2
  66. package/dist/types/ui/ContentStyles/index.d.ts +0 -23
  67. package/dist/types/ui/ContentStyles/layout.d.ts +0 -8
  68. package/dist/types/ui/ContentStyles/media.d.ts +0 -2
  69. package/dist/types/ui/ContentStyles/panel.d.ts +0 -2
  70. package/dist/types/ui/ContentStyles/status.d.ts +0 -3
  71. package/dist/types/ui/ContentStyles/tasks-and-decisions.d.ts +0 -6
  72. package/dist/types-ts4.5/nodeviews/getInlineNodeViewProducer.styles.d.ts +0 -2
  73. package/dist/types-ts4.5/ui/ContentStyles/ai-panels.d.ts +0 -8
  74. package/dist/types-ts4.5/ui/ContentStyles/code-bidi-warning.d.ts +0 -2
  75. package/dist/types-ts4.5/ui/ContentStyles/code-block.d.ts +0 -2
  76. package/dist/types-ts4.5/ui/ContentStyles/date.d.ts +0 -3
  77. package/dist/types-ts4.5/ui/ContentStyles/expand.d.ts +0 -2
  78. package/dist/types-ts4.5/ui/ContentStyles/extension.d.ts +0 -2
  79. package/dist/types-ts4.5/ui/ContentStyles/index.d.ts +0 -23
  80. package/dist/types-ts4.5/ui/ContentStyles/layout.d.ts +0 -8
  81. package/dist/types-ts4.5/ui/ContentStyles/media.d.ts +0 -2
  82. package/dist/types-ts4.5/ui/ContentStyles/panel.d.ts +0 -2
  83. package/dist/types-ts4.5/ui/ContentStyles/status.d.ts +0 -3
  84. 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();