@atlaskit/editor-core 219.1.13 → 219.2.1
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 +29 -0
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer-compiled.compiled.css +148 -0
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer-compiled.js +340 -0
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer-emotion.js +578 -0
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +9 -567
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/presets/useUniversalPreset.js +1 -0
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer-compiled.compiled.css +148 -0
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer-compiled.js +338 -0
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer-emotion.js +574 -0
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +7 -568
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer-compiled.compiled.css +148 -0
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer-compiled.js +335 -0
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer-emotion.js +570 -0
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +9 -564
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/create-editor/create-universal-preset.d.ts +1 -735
- package/dist/types/presets/universal.d.ts +1 -735
- package/dist/types/presets/useUniversalPreset.d.ts +1 -735
- package/dist/types/ui/Addon/click-area-helper.d.ts +1 -1
- package/dist/types/ui/EditorContentContainer/EditorContentContainer-compiled.d.ts +29 -0
- package/dist/types/ui/EditorContentContainer/EditorContentContainer-emotion.d.ts +30 -0
- package/dist/types/ui/EditorContentContainer/EditorContentContainer.d.ts +6 -26
- package/dist/types-ts4.5/create-editor/create-universal-preset.d.ts +1 -1030
- package/dist/types-ts4.5/presets/universal.d.ts +1 -1030
- package/dist/types-ts4.5/presets/useUniversalPreset.d.ts +1 -1030
- package/dist/types-ts4.5/ui/Addon/click-area-helper.d.ts +1 -1
- package/dist/types-ts4.5/ui/EditorContentContainer/EditorContentContainer-compiled.d.ts +29 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/EditorContentContainer-emotion.d.ts +30 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/EditorContentContainer.d.ts +6 -26
- package/editor-core.docs.tsx +28 -6
- package/package.json +10 -8
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
|
|
2
|
+
._1cnzgx6n .ProseMirror hr{margin:var(--ds-space-300,24px) 0}
|
|
3
|
+
._1fi2t7zq .ProseMirror p{font:normal 400 1em/1.714 "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
4
|
+
._1khk1mok:hover::-webkit-scrollbar-thumb{border-radius:var(--ds-radius-large,8px)}
|
|
5
|
+
._1n0xibhp .ProseMirror .ak-editor-annotation-blur{background:var(--ds-background-accent-yellow-subtlest,#fef7c8)}
|
|
6
|
+
._1uh7swc3 .ProseMirror hr{padding:var(--ds-space-050,4px) 0}
|
|
7
|
+
._3vafglyw .ProseMirror hr{border:none}
|
|
8
|
+
._kn991o1l .ProseMirror .ak-editor-annotation-draft{background:var(--ds-background-accent-yellow-subtlest-pressed,#efdd4e)}
|
|
9
|
+
._l0rkaetg .ProseMirror .ak-editor-annotation-hover{background:var(--ds-background-accent-yellow-subtlest-hovered,#f5e989)}
|
|
10
|
+
._x53a1o1l .ProseMirror .ak-editor-annotation-focus{background:var(--ds-background-accent-yellow-subtlest-pressed,#efdd4e)}
|
|
11
|
+
._yhgjt94y .ProseMirror hr{border-radius:1px}
|
|
12
|
+
._1ibg1vrj .ProseMirror .ak-editor-annotation-focus{border-bottom:2px solid transparent}
|
|
13
|
+
._iwzr1vrj .ProseMirror .ak-editor-annotation-blur{border-bottom:2px solid transparent}
|
|
14
|
+
._u5bs1vrj .ProseMirror .ak-editor-annotation-draft{border-bottom:2px solid transparent}
|
|
15
|
+
._xkuf1vrj .ProseMirror .ak-editor-annotation-hover{border-bottom:2px solid transparent}._10h6v77o .ProseMirror .ak-editor-annotation-blur:has(.date-lozenger-container){padding-top:var(--ds-space-025,2px)}
|
|
16
|
+
._10zo1osq .ProseMirror>div[data-prosemirror-node-block] [data-prosemirror-node-block]{--ak-editor-max-container-width:100%}
|
|
17
|
+
._11jf78tn .ProseMirror p{line-height:1.714}
|
|
18
|
+
._121i1r31 .ProseMirror{outline-color:currentColor}
|
|
19
|
+
._123b1aqn:hover::-webkit-scrollbar-thumb{background-color:var(--ds-background-neutral-bold,#292a2e)}
|
|
20
|
+
._12vh1ntv .ProseMirror hr{background-clip:content-box}
|
|
21
|
+
._14i5idpf .ProseMirror [data-layout-section] [data-layout-column]>div .mediaSingleView-content-wrap[layout^=wrap]+.mediaSingleView-content-wrap[layout^=wrap] .rich-media-item{margin-top:0}
|
|
22
|
+
._15no1e5h .ProseMirror .embedCardView-content-wrap[layout=wrap-left]{float:left}
|
|
23
|
+
._15zti7a9 .ProseMirror p{font-weight:var(--ds-font-weight-regular,400)}
|
|
24
|
+
._1613yh40 .ProseMirror .ak-editor-annotation-draft{padding-bottom:2px}
|
|
25
|
+
._168dt7xp .ProseMirror .ak-editor-annotation-hover{box-shadow:var(--ds-shadow-raised,0 1px 1px #1e1f2140,0 0 1px #1e1f214f)}
|
|
26
|
+
._16jlkb7n{flex-grow:1}
|
|
27
|
+
._172zidpf .ProseMirror .ak-editor-annotation-draft{padding-right:0}
|
|
28
|
+
._17clidpf .ProseMirror .ak-editor-annotation-hover:has([data-inline-card]){padding-right:0}
|
|
29
|
+
._17qpt94y .ProseMirror .ak-editor-annotation-hover{padding-top:1px}
|
|
30
|
+
._18031hna .ProseMirror{word-wrap:break-word}
|
|
31
|
+
._181jdjp5 .ProseMirror p{letter-spacing:-.005em}
|
|
32
|
+
._18m915zi{overflow-y:scroll}
|
|
33
|
+
._18qq1jtm .ProseMirror{white-space:pre-wrap}
|
|
34
|
+
._197w1hrf .ProseMirror .embedCardView-content-wrap[layout=wrap-right]+.embedCardView-content-wrap[layout=wrap-left]{clear:both}
|
|
35
|
+
._19rk1l99 .ProseMirror{--ak-editor-max-container-width:calc(100cqw - var(--ak-editor--large-gutter-padding)*2)}
|
|
36
|
+
._19rk1uph .ProseMirror{--ak-editor-max-container-width:calc(100cqw - var(--ak-editor--large-gutter-padding))}
|
|
37
|
+
._19vz1wug .ProseMirror .ak-editor-annotation-draft{cursor:auto}
|
|
38
|
+
._19vztlke .ProseMirror .ak-editor-annotation-draft{cursor:pointer}
|
|
39
|
+
._1c0fidpf .ProseMirror .ak-editor-annotation-blur:has(.card){padding-left:0}
|
|
40
|
+
._1c20feiv .ProseMirror .ak-editor-annotation-hover{border-bottom-color:var(--ds-border-accent-yellow,#b38600)}
|
|
41
|
+
._1cr2idpf .ProseMirror .ak-editor-annotation-hover:has([data-inline-card]){padding-left:0}
|
|
42
|
+
._1d6qfeiv .ProseMirror .ak-editor-annotation-focus{border-bottom-color:var(--ds-border-accent-yellow,#b38600)}
|
|
43
|
+
._1dm8q5uf{scroll-behavior:smooth}
|
|
44
|
+
._1do8cs5v .ProseMirror .embedCardView-content-wrap[layout^=wrap-]{z-index:2}
|
|
45
|
+
._1dyh1l7b .ProseMirror .ak-editor-annotation-hover:has([data-inline-card]){padding-bottom:3px}
|
|
46
|
+
._1e0c1txw{display:flex}
|
|
47
|
+
._1edaidpf .ProseMirror .ak-editor-annotation-focus:has(.card){padding-right:0}
|
|
48
|
+
._1f3widpf .ProseMirror .ak-editor-annotation-hover{padding-left:0}
|
|
49
|
+
._1fpfolhs{ms-overflow-style:-ms-autohiding-scrollbar}
|
|
50
|
+
._1fqx14y2 .ProseMirror .ak-editor-annotation-hover:has(.card){padding-top:5px}
|
|
51
|
+
._1g35idpf .ProseMirror .ak-editor-annotation-hover:has(.card){padding-right:0}
|
|
52
|
+
._1gpc1lj4 .fabric-editor--max-width-mode{--ak-editor--line-length:min(calc(100cqw - var(--ak-editor--large-gutter-padding)*2),var(--ak-editor--max-width-layout-width))}
|
|
53
|
+
._1gvnmqba{--ak-editor--max-width-layout-width:4000px}
|
|
54
|
+
._1hbb14y2 .ProseMirror .ak-editor-annotation-draft:has(.card){padding-top:5px}
|
|
55
|
+
._1iod1o36 .ProseMirror hr.ak-editor-selected-node{outline-width:medium}
|
|
56
|
+
._1jyp14y2 .ProseMirror .ak-editor-annotation-hover:has([data-inline-card]){padding-top:5px}
|
|
57
|
+
._1k26yh40 .ProseMirror .ak-editor-annotation-blur{padding-bottom:2px}
|
|
58
|
+
._1m2zidpf .ProseMirror .ak-editor-annotation-blur:has(.card){padding-right:0}
|
|
59
|
+
._1nl9idpf .ProseMirror .ak-editor-annotation-draft:has(.card){padding-right:0}
|
|
60
|
+
._1owy1l7b .ProseMirror .ak-editor-annotation-focus:has([data-inline-card]){padding-bottom:3px}
|
|
61
|
+
._1p9g14y2 .ProseMirror .ak-editor-annotation-draft:has([data-inline-card]){padding-top:5px}
|
|
62
|
+
._1pjt14y2 .ProseMirror .ak-editor-annotation-focus:has(.card){padding-top:5px}
|
|
63
|
+
._1qihyh40 .ProseMirror .ak-editor-annotation-hover{padding-bottom:2px}
|
|
64
|
+
._1s25t94y .ProseMirror .ak-editor-annotation-focus{padding-top:1px}
|
|
65
|
+
._1sn3idpf .ProseMirror [layout^=wrap-]:has(+.ProseMirror-gapcursor+[layout^=wrap-]) .rich-media-item{margin-right:0}
|
|
66
|
+
._1t0tidpf .ProseMirror .ak-editor-annotation-hover:has(.card){padding-left:0}
|
|
67
|
+
._1t8514y2 .ProseMirror .ak-editor-annotation-focus:has([data-inline-card]){padding-top:5px}
|
|
68
|
+
._1tlp1x4e .ProseMirror p{font-size:1em}
|
|
69
|
+
._1ubhidpf .ProseMirror .ak-editor-annotation-blur{padding-right:0}
|
|
70
|
+
._1v9ev77o .ProseMirror .ak-editor-annotation-draft:has(.date-lozenger-container){padding-top:var(--ds-space-025,2px)}
|
|
71
|
+
._1vgtidpf .ProseMirror .ak-editor-annotation-draft:has([data-inline-card]){padding-right:0}
|
|
72
|
+
._1vk21ex1{--ak-editor--large-gutter-padding:52px}
|
|
73
|
+
._1vk2t9kd{--ak-editor--large-gutter-padding:72px}
|
|
74
|
+
._1wys1l7b .ProseMirror .ak-editor-annotation-blur:has([data-inline-card]){padding-bottom:3px}
|
|
75
|
+
._1x2nt94y .ProseMirror .ak-editor-annotation-blur{padding-top:1px}
|
|
76
|
+
._1xgk1l7b .ProseMirror .ak-editor-annotation-draft:has(.card){padding-bottom:3px}
|
|
77
|
+
._1xktidpf .ProseMirror .ak-editor-annotation-focus:has([data-inline-card]){padding-left:0}
|
|
78
|
+
._1xm91l7b .ProseMirror .ak-editor-annotation-focus:has(.card){padding-bottom:3px}
|
|
79
|
+
._1xmbfeiv .ProseMirror .ak-editor-annotation-blur{border-bottom-color:var(--ds-border-accent-yellow,#b38600)}
|
|
80
|
+
._1xqtt94y .ProseMirror .ak-editor-annotation-draft{padding-top:1px}
|
|
81
|
+
._1xquh2mm .ProseMirror .embedCardView-content-wrap[layout^=wrap-]{position:relative}
|
|
82
|
+
._2lx21bp4{flex-direction:column}
|
|
83
|
+
._3iqe18il .fabric-editor--full-width-mode{--ak-editor--line-length:min(calc(100cqw - var(--ak-editor--large-gutter-padding)*2),var(--ak-editor--full-width-layout-width))}
|
|
84
|
+
._3nq8idpf .ProseMirror .ak-editor-annotation-draft:has(.card){padding-left:0}
|
|
85
|
+
._43nwglyw .ProseMirror hr.ak-editor-selected-node{outline-style:none}
|
|
86
|
+
._4q241osq .fabric-editor--max-width-mode{--ak-editor--breakout-fallback-width:100%}
|
|
87
|
+
._4t3i1osq{height:100%}
|
|
88
|
+
._66yetlke .ProseMirror .ak-editor-annotation-blur{cursor:pointer}
|
|
89
|
+
._6f0lidpf .ProseMirror .ak-editor-annotation-focus{padding-left:0}
|
|
90
|
+
._7kmy1l7b .ProseMirror .ak-editor-annotation-draft:has([data-inline-card]){padding-bottom:3px}
|
|
91
|
+
._874g1l7x .ProseMirror hr{background-color:var(--ds-border,#0b120e24)}
|
|
92
|
+
._8grqv77o .ProseMirror .ak-editor-annotation-hover:has(.date-lozenger-container){padding-top:var(--ds-space-025,2px)}
|
|
93
|
+
._92g41l7b .ProseMirror .ak-editor-annotation-blur:has(.card){padding-bottom:3px}
|
|
94
|
+
._988v1osq .fabric-editor--full-width-mode{--ak-editor--breakout-fallback-width:100%}
|
|
95
|
+
._9neqidpf .ProseMirror .ak-editor-annotation-focus{padding-right:0}
|
|
96
|
+
._9onx14y2 .ProseMirror .ak-editor-annotation-blur:has([data-inline-card]){padding-top:5px}
|
|
97
|
+
._9pd8q98m .ProseMirror hr.ak-editor-selected-node{background-color:var(--ds-border-selected,#1868db)}
|
|
98
|
+
._aaynsm61::-webkit-scrollbar-thumb{background-color:var(--ds-background-neutral-subtle,#00000000)}
|
|
99
|
+
._ah88v77o .ProseMirror .ak-editor-annotation-focus:has(.date-lozenger-container){padding-top:var(--ds-space-025,2px)}
|
|
100
|
+
._ali2idpf .ProseMirror [data-layout-section] [data-layout-column]>div .mediaSingleView-content-wrap[layout^=wrap]+.ProseMirror-gapcursor+.mediaSingleView-content-wrap[layout^=wrap] .rich-media-item{margin-top:0}
|
|
101
|
+
._anrdukw8{--ak-editor--default-layout-width:760px}
|
|
102
|
+
._bxhh1osq .ProseMirror .embedCardView-content-wrap[layout^=wrap-]{max-width:100%}
|
|
103
|
+
._dcmgglyw .ProseMirror{outline-style:none}
|
|
104
|
+
._dl0n1r31 .ProseMirror hr.ak-editor-selected-node{outline-color:currentColor}
|
|
105
|
+
._dnsrtlke .ProseMirror .ak-editor-annotation-focus{cursor:pointer}
|
|
106
|
+
._drnbtlke .ProseMirror .ak-editor-annotation-hover{cursor:pointer}
|
|
107
|
+
._du1kidpf .ProseMirror .ak-editor-annotation-focus:has([data-inline-card]){padding-right:0}
|
|
108
|
+
._e519idpf .ProseMirror [layout^=wrap-]:has(+.ProseMirror-gapcursor+[layout^=wrap-]) .rich-media-item{margin-left:0}
|
|
109
|
+
._fo6014dc{--ak-editor--line-length:min(calc(100cqw - var(--ak-editor--large-gutter-padding)*2),var(--ak-editor--default-layout-width))}
|
|
110
|
+
._ghwiidpf .ProseMirror .ak-editor-annotation-draft{padding-left:0}
|
|
111
|
+
._iqym1l7b .ProseMirror .ak-editor-annotation-hover:has(.card){padding-bottom:3px}
|
|
112
|
+
._j03f1qop{--ak-editor--breakout-wide-layout-width:905px}
|
|
113
|
+
._jaboglyw::-webkit-scrollbar-corner{display:none}
|
|
114
|
+
._jd6pidpf .ProseMirror .ak-editor-annotation-blur:has([data-inline-card]){padding-right:0}
|
|
115
|
+
._jydlidpf .ProseMirror .ak-editor-annotation-hover{padding-right:0}
|
|
116
|
+
._km2cidpf .ProseMirror .ak-editor-annotation-focus:has(.card){padding-left:0}
|
|
117
|
+
._kqswh2mm{position:relative}
|
|
118
|
+
._n6a11fwx{--ak-editor--resizer-handle-spacing:12px}
|
|
119
|
+
._nv9v1o36 .ProseMirror{outline-width:medium}
|
|
120
|
+
._o1p8idpf .ProseMirror .ak-editor-annotation-blur:has([data-inline-card]){padding-left:0}
|
|
121
|
+
._o5elfeiv .ProseMirror .ak-editor-annotation-draft{border-bottom-color:var(--ds-border-accent-yellow,#b38600)}
|
|
122
|
+
._o7dvt7xp .ProseMirror .ak-editor-annotation-draft{box-shadow:var(--ds-shadow-raised,0 1px 1px #1e1f2140,0 0 1px #1e1f214f)}
|
|
123
|
+
._ojmct7xp .ProseMirror .ak-editor-annotation-focus{box-shadow:var(--ds-shadow-raised,0 1px 1px #1e1f2140,0 0 1px #1e1f214f)}
|
|
124
|
+
._pg931osq{--ak-editor--breakout-min-width:100%}
|
|
125
|
+
._pi27grho .fabric-editor--full-width-mode{--ak-editor--breakout-min-width:0px}
|
|
126
|
+
._poq41xs6 .ProseMirror p{margin-top:.75em}
|
|
127
|
+
._poq4oqnp .ProseMirror p{margin-top:.75rem}
|
|
128
|
+
._pru0idpf .ProseMirror [data-layout-section] [data-layout-column]>div .mediaSingleView-content-wrap[layout^=wrap]:has(+.mediaSingleView-content-wrap[layout^=wrap]) .rich-media-item{margin-top:0}
|
|
129
|
+
._pxl0idpf .ProseMirror [layout^=wrap-]:has(+[layout^=wrap-]) .rich-media-item{margin-left:0}
|
|
130
|
+
._q353idpf .ProseMirror .ak-editor-annotation-draft:has([data-inline-card]){padding-left:0}
|
|
131
|
+
._qgb1tlke .ProseMirror hr{cursor:pointer}
|
|
132
|
+
._qmjbxjz2{--ak-editor--breakout-full-page-guttering-padding:calc(var(--ak-editor--large-gutter-padding)*2 + var(--ak-editor--default-gutter-padding))}
|
|
133
|
+
._rc9pyh40 .ProseMirror hr{height:2px}
|
|
134
|
+
._ripsidpf .ProseMirror [layout^=wrap-]:has(+[layout^=wrap-]) .rich-media-item{margin-right:0}
|
|
135
|
+
._t7ab1vi7{--ak-editor--default-gutter-padding:32px}
|
|
136
|
+
._u8en3mia .ProseMirror{font-size:var(--ak-editor-base-font-size)}
|
|
137
|
+
._uw641q08{--ak-editor--full-width-layout-width:1800px}
|
|
138
|
+
._w0epidpf .ProseMirror .ak-editor-annotation-blur{padding-left:0}
|
|
139
|
+
._w33agrho .fabric-editor--max-width-mode{--ak-editor--breakout-min-width:0px}
|
|
140
|
+
._wmhayh40 .ProseMirror .ak-editor-annotation-focus{padding-bottom:2px}
|
|
141
|
+
._x81614y2 .ProseMirror .ak-editor-annotation-blur:has(.card){padding-top:5px}
|
|
142
|
+
._z75ousic .ProseMirror .embedCardView-content-wrap[layout=wrap-right]{float:right}
|
|
143
|
+
._z9wpidpf .ProseMirror p{margin-bottom:0}
|
|
144
|
+
._zih31bqt .ProseMirror hr.ak-editor-selected-node.danger{background-color:var(--ds-border-danger,#e2483d)}
|
|
145
|
+
._zy25uj17{--ak-editor--breakout-fallback-width:calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))}
|
|
146
|
+
._1ogl1ibz::-webkit-scrollbar-thumb:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}
|
|
147
|
+
@container editor-area (max-width: 600px){._lh101tcg{--ak-editor--large-gutter-padding:24px}}
|
|
148
|
+
@container editor-area (width >= 1266px){._1j8i1xb4 .ProseMirror{--ak-editor--breakout-wide-layout-width:1011px}}
|
|
@@ -0,0 +1,335 @@
|
|
|
1
|
+
/* EditorContentContainer-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import "./EditorContentContainer-compiled.compiled.css";
|
|
3
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
+
import React from 'react';
|
|
5
|
+
// eslint-disable-next-line import/order
|
|
6
|
+
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
|
|
7
|
+
|
|
8
|
+
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
|
|
9
|
+
// TODO: add back tableSharedStyle when migrate table styles
|
|
10
|
+
// import { richMediaClassName, tableSharedStyle } from '@atlaskit/editor-common/styles';
|
|
11
|
+
import { AnnotationSharedClassNames, richMediaClassName } from '@atlaskit/editor-common/styles';
|
|
12
|
+
import { akEditorGutterPaddingDynamic, editorFontSize } from '@atlaskit/editor-shared-styles';
|
|
13
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
15
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
16
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
17
|
+
import { useThemeObserver } from '@atlaskit/tokens';
|
|
18
|
+
import { getBaseFontSize } from '../../composable-editor/utils/getBaseFontSize';
|
|
19
|
+
|
|
20
|
+
// = akEditorDefaultLayoutWidth * breakoutWideScaleRatio = 1010.8 ~ 1011 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is > 1329px.
|
|
21
|
+
var akEditorCalculatedWideLayoutWidth = 1011;
|
|
22
|
+
// from breakoutConsts.calcWideWidth, layoutMaxWidth * breakoutConsts.wideScaleRatio = 904.8 ~ 905 This is a resulting width value that is applied to nodes that currently use breakouts (except table) and are set to `wide` when the viewport's width is <= 1266px.
|
|
23
|
+
var akEditorCalculatedWideLayoutWidthSmallViewport = 905;
|
|
24
|
+
var akEditorGutterPadding = 32;
|
|
25
|
+
var akEditorDefaultLayoutWidth = 760;
|
|
26
|
+
var akEditorFullWidthLayoutWidth = 1800;
|
|
27
|
+
// The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
|
|
28
|
+
var akEditorBreakpointForSmallDevice = "1266px";
|
|
29
|
+
var akEditorGutterPaddingReduced = 24;
|
|
30
|
+
var akEditorFullPageNarrowBreakout = 600;
|
|
31
|
+
var akEditorUltraWideLayoutWidth = 4000;
|
|
32
|
+
var blockNodesVerticalMargin = '0.75rem';
|
|
33
|
+
var scaledBlockNodesVerticalMargin = '0.75em';
|
|
34
|
+
var editorAreaNonSmallDeviceContainerQuery = "@container editor-area (width >= ".concat(akEditorBreakpointForSmallDevice, ")");
|
|
35
|
+
var editorAreaNarrowPageContainerQuery = "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)");
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* editorContentStyles is WIP to migrate styles from EditorContentContainer/styles
|
|
39
|
+
*
|
|
40
|
+
* The value {} is placeholder, fill in styles when migrating each style file
|
|
41
|
+
* Add/Delete/Re-order keys are discouraged during incremental migration due to potential merge conflicts.
|
|
42
|
+
*/
|
|
43
|
+
var editorContentStyles = {
|
|
44
|
+
aiPanelBaseFirefoxStyles: "",
|
|
45
|
+
aiPanelBaseStyles: "",
|
|
46
|
+
aiPanelDarkFirefoxStyles: "",
|
|
47
|
+
aiPanelDarkStyles: "",
|
|
48
|
+
alignMultipleWrappedImageInLayoutStyles: "_ali2idpf _14i5idpf _pru0idpf",
|
|
49
|
+
annotationStyles: "_1x2nt94y _1xqtt94y _1s25t94y _17qpt94y _1ubhidpf _172zidpf _9neqidpf _jydlidpf _1k26yh40 _1613yh40 _wmhayh40 _1qihyh40 _w0epidpf _ghwiidpf _6f0lidpf _1f3widpf _x81614y2 _9onx14y2 _1hbb14y2 _1p9g14y2 _1pjt14y2 _1t8514y2 _1fqx14y2 _1jyp14y2 _1m2zidpf _jd6pidpf _1nl9idpf _1vgtidpf _1edaidpf _du1kidpf _1g35idpf _17clidpf _92g41l7b _1wys1l7b _1xgk1l7b _7kmy1l7b _1xm91l7b _1owy1l7b _iqym1l7b _1dyh1l7b _1c0fidpf _o1p8idpf _3nq8idpf _q353idpf _km2cidpf _1xktidpf _1t0tidpf _1cr2idpf _iwzr1vrj _u5bs1vrj _1ibg1vrj _xkuf1vrj _66yetlke _19vztlke _dnsrtlke _drnbtlke _10h6v77o _1v9ev77o _ah88v77o _8grqv77o _x53a1o1l _1d6qfeiv _ojmct7xp _kn991o1l _o5elfeiv _o7dvt7xp _19vz1wug _1n0xibhp _1xmbfeiv _l0rkaetg _1c20feiv _168dt7xp",
|
|
50
|
+
backgroundColorStyles: "",
|
|
51
|
+
baseStyles: "_t7ab1vi7 _anrdukw8 _n6a11fwx _uw641q08 _fo6014dc _1gvnmqba _j03f1qop _qmjbxjz2 _zy25uj17 _pg931osq _121i1r31 _dcmgglyw _nv9v1o36 _19rk1uph _u8en3mia _3iqe18il _988v1osq _pi27grho _10zo1osq _1j8i1xb4",
|
|
52
|
+
baseStylesMaxContainerWidthFixes: "_19rk1l99",
|
|
53
|
+
blockMarksStyles: "",
|
|
54
|
+
blockquoteDangerStyles: "",
|
|
55
|
+
blockquoteSelectedNodeStyles: "",
|
|
56
|
+
blocktypeStyles: "",
|
|
57
|
+
blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes: "",
|
|
58
|
+
blocktypeStyles_fg_platform_editor_typography_ugc: "",
|
|
59
|
+
blocktypeStyles_without_fg_platform_editor_typography_ugc: "",
|
|
60
|
+
codeBlockStyles: "",
|
|
61
|
+
codeBlockStylesWithEmUnits: "",
|
|
62
|
+
codeMarkStyles: "",
|
|
63
|
+
codeMarkStylesA11yFix: "",
|
|
64
|
+
commentEditorStyles: "",
|
|
65
|
+
cursorStyles: "",
|
|
66
|
+
dangerDateStyles: "",
|
|
67
|
+
dangerRuleStyles: "_zih31bqt",
|
|
68
|
+
dateStyles: "",
|
|
69
|
+
dateVanillaStyles: "",
|
|
70
|
+
decisionDangerStyles: "",
|
|
71
|
+
decisionIconWithVisualRefresh: "",
|
|
72
|
+
decisionStyles: "",
|
|
73
|
+
diffListStyles: "",
|
|
74
|
+
editorControlsSmartCardStyles: "",
|
|
75
|
+
editorLargeGutterPuddingBaseStyles: "_1vk21ex1",
|
|
76
|
+
editorLargeGutterPuddingBaseStylesEditorControls: "_1vk2t9kd",
|
|
77
|
+
editorLargeGutterPuddingReducedBaseStyles: "_lh101tcg",
|
|
78
|
+
editorUGCSmallText: "",
|
|
79
|
+
editorUGCTokensDefault: "",
|
|
80
|
+
editorUGCTokensRefreshed: "",
|
|
81
|
+
embedCardStyles: "_bxhh1osq _1xquh2mm _1do8cs5v _15no1e5h _z75ousic _197w1hrf",
|
|
82
|
+
emojiDangerStyles: "",
|
|
83
|
+
emojiStyles: "",
|
|
84
|
+
expandStyles: "",
|
|
85
|
+
expandStylesBase: "",
|
|
86
|
+
expandStylesMixin_experiment_platform_editor_chromeless_expand_fix: "",
|
|
87
|
+
expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes: "",
|
|
88
|
+
expandStylesMixin_fg_platform_visual_refresh_icons: "",
|
|
89
|
+
expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes: "",
|
|
90
|
+
extensionDiffStyles: "",
|
|
91
|
+
findReplaceStyles: "",
|
|
92
|
+
findReplaceStylesNewWithA11Y: "",
|
|
93
|
+
findReplaceStylesNewWithCodeblockColorContrastFix: "",
|
|
94
|
+
findReplaceStylesWithCodeblockColorContrastFix: "",
|
|
95
|
+
firstBlockNodeStyles: "",
|
|
96
|
+
firstCodeBlockWithNoMargin: "",
|
|
97
|
+
firstCodeBlockWithNoMarginOld: "",
|
|
98
|
+
firstFloatingToolbarButtonStyles: "",
|
|
99
|
+
firstWrappedMediaStyles: "_e519idpf _pxl0idpf _1sn3idpf _ripsidpf",
|
|
100
|
+
fontSizeStyles: "",
|
|
101
|
+
fullPageEditorStyles: "_16jlkb7n _4t3i1osq _18m915zi _kqswh2mm _1e0c1txw _2lx21bp4 _1dm8q5uf",
|
|
102
|
+
gapCursorStyles: "",
|
|
103
|
+
gapCursorStylesVisibilityFix: "",
|
|
104
|
+
gridStyles: "",
|
|
105
|
+
hideCursorWhenHideSelectionStyles: "",
|
|
106
|
+
hideSelectionStyles: "",
|
|
107
|
+
hyperLinkFloatingToolbarStyles: "",
|
|
108
|
+
indentationStyles: "",
|
|
109
|
+
InlineNodeViewSharedStyles: "",
|
|
110
|
+
layoutBaseStyles: "",
|
|
111
|
+
layoutBaseStylesAdvanced: "",
|
|
112
|
+
layoutBaseStylesFixesUnderNestedDnDFG: "",
|
|
113
|
+
layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync: "",
|
|
114
|
+
layoutBaseStylesWithTableExcerptsFix: "",
|
|
115
|
+
layoutColumnDividerStyles: "",
|
|
116
|
+
layoutColumnDividerStylesNestedDnD: "",
|
|
117
|
+
layoutColumnMartinTopFixesNew: "",
|
|
118
|
+
layoutColumnMartinTopFixesOld: "",
|
|
119
|
+
layoutColumnResizeStyles: "",
|
|
120
|
+
layoutColumnResponsiveStyles: "",
|
|
121
|
+
layoutColumnStylesAdvanced: "",
|
|
122
|
+
layoutColumnStylesNotAdvanced: "",
|
|
123
|
+
layoutResponsiveBaseStyles: "",
|
|
124
|
+
layoutResponsiveStylesForView: "",
|
|
125
|
+
layoutSectionStylesAdvanced: "",
|
|
126
|
+
layoutSectionStylesNotAdvanced: "",
|
|
127
|
+
layoutSelectedStylesAdvanced: "",
|
|
128
|
+
layoutSelectedStylesAdvancedFix: "",
|
|
129
|
+
layoutSelectedStylesForViewAdvanced: "",
|
|
130
|
+
layoutSelectedStylesForViewNotAdvanced: "",
|
|
131
|
+
layoutSelectedStylesNotAdvanced: "",
|
|
132
|
+
layoutStylesForView: "",
|
|
133
|
+
linkingVisualRefreshV1Styles: "",
|
|
134
|
+
linkStyles: "",
|
|
135
|
+
listDangerStyles: "",
|
|
136
|
+
listItemHiddenMarkerStyles: "",
|
|
137
|
+
listSelectedNodeStyles: "",
|
|
138
|
+
listsStyles: "",
|
|
139
|
+
listsStylesMarginLayoutShiftFix: "",
|
|
140
|
+
listsStylesSafariFix: "",
|
|
141
|
+
maxModeReizeFixStyles: "_1gpc1lj4 _4q241osq _w33agrho",
|
|
142
|
+
mediaAlignmentStyles: "",
|
|
143
|
+
mediaCaptionStyles: "",
|
|
144
|
+
mediaDangerStyles: "",
|
|
145
|
+
mediaGroupStyles: "",
|
|
146
|
+
mediaStyles: "",
|
|
147
|
+
mentionDangerStyles: "",
|
|
148
|
+
mentionNodeStyles: "",
|
|
149
|
+
mentionsSelectionStyles: "",
|
|
150
|
+
mentionsSelectionStylesWithSearchMatch: "",
|
|
151
|
+
mentionsStyles: "",
|
|
152
|
+
nestedPanelBorderStylesMixin: "",
|
|
153
|
+
nestedPanelDangerStyles: "",
|
|
154
|
+
panelStyles: "",
|
|
155
|
+
panelStylesMixin: "",
|
|
156
|
+
panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes: "",
|
|
157
|
+
panelViewStyles: "",
|
|
158
|
+
paragraphStylesOld: "_1tlp1x4e _11jf78tn _15zti7a9 _poq4oqnp _z9wpidpf _181jdjp5",
|
|
159
|
+
paragraphStylesOldWithScaledMargin: "_1tlp1x4e _11jf78tn _15zti7a9 _poq41xs6 _z9wpidpf _181jdjp5",
|
|
160
|
+
paragraphStylesUGCRefreshed: "_1fi2t7zq _poq4oqnp _z9wpidpf",
|
|
161
|
+
paragraphStylesWithScaledMargin: "_1fi2t7zq _poq41xs6 _z9wpidpf",
|
|
162
|
+
placeholderOverflowStyles: "",
|
|
163
|
+
placeholderStyles: "",
|
|
164
|
+
placeholderTextStyles: "",
|
|
165
|
+
placeholderWrapStyles: "",
|
|
166
|
+
pragmaticResizerStyles: "",
|
|
167
|
+
pragmaticResizerStylesCodeBlockLegacy: "",
|
|
168
|
+
pragmaticResizerStylesCodeBlockSyncedBlockPatch: "",
|
|
169
|
+
pragmaticResizerStylesForTooltip: "",
|
|
170
|
+
pragmaticResizerStylesSyncedBlock: "",
|
|
171
|
+
pragmaticResizerStylesWithReducedEditorGutter: "",
|
|
172
|
+
pragmaticStylesLayoutFirstNodeResizeHandleFix: "",
|
|
173
|
+
resizerStyles: "",
|
|
174
|
+
ruleStyles: "_3vafglyw _yhgjt94y _1uh7swc3 _1cnzgx6n _874g1l7x _rc9pyh40 _qgb1tlke _12vh1ntv _dl0n1r31 _43nwglyw _1iod1o36 _9pd8q98m",
|
|
175
|
+
scaledEmojiStyles: "",
|
|
176
|
+
scrollbarStyles: "_1fpfolhs _1khk1mok _123b1aqn _jaboglyw _aaynsm61 _1ogl1ibz",
|
|
177
|
+
selectedNodeStyles: "",
|
|
178
|
+
selectionToolbarAnimationStyles: "",
|
|
179
|
+
shadowStyles: "",
|
|
180
|
+
showDiffDeletedNodeStyles: "",
|
|
181
|
+
showDiffDeletedNodeStylesNew: "",
|
|
182
|
+
smartCardDiffStyles: "",
|
|
183
|
+
smartCardStyles: "",
|
|
184
|
+
smartCardStylesWithSearchMatch: "",
|
|
185
|
+
smartCardStylesWithSearchMatchAndBlockMenuDangerStyles: "",
|
|
186
|
+
smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness: "",
|
|
187
|
+
smartLinksInLivePagesStyles: "",
|
|
188
|
+
statusDangerStyles: "",
|
|
189
|
+
statusStyles: "",
|
|
190
|
+
statusStylesMixin_fg_platform_component_visual_refresh: "",
|
|
191
|
+
statusStylesMixin_fg_platform_component_visual_refresh_with_search_match: "",
|
|
192
|
+
statusStylesMixin_without_fg_platform_component_visual_refresh: "",
|
|
193
|
+
statusStylesMixin_without_fg_platform_component_visual_refresh_with_search_match: "",
|
|
194
|
+
statusStylesTeam26: "",
|
|
195
|
+
syncBlockFirstNodeStyles: "",
|
|
196
|
+
syncBlockOverflowStyles: "",
|
|
197
|
+
syncBlockStyles: "",
|
|
198
|
+
syncBlockStylesBase: "",
|
|
199
|
+
tableCommentEditorStyles: "",
|
|
200
|
+
tableContainerStyles: "",
|
|
201
|
+
tableContentModeStyles: "",
|
|
202
|
+
tableEmptyRowStyles: "",
|
|
203
|
+
tableLayoutFixes: "",
|
|
204
|
+
tableLayoutFixesWithFontSize: "",
|
|
205
|
+
taskItemCheckboxStyles: "",
|
|
206
|
+
taskItemStyles: "",
|
|
207
|
+
taskItemStylesWithBlockTaskItem: "",
|
|
208
|
+
tasksAndDecisionsStyles: "",
|
|
209
|
+
telepointerColorAndCommonStyle: "",
|
|
210
|
+
telepointerStyle: "",
|
|
211
|
+
textColorStyles: "",
|
|
212
|
+
textDangerStyles: "",
|
|
213
|
+
textHighlightPaddingStyles: "",
|
|
214
|
+
textHighlightStyle: "",
|
|
215
|
+
textSelectedNodeStyles: "",
|
|
216
|
+
unsupportedStyles: "",
|
|
217
|
+
whitespaceStyles: "_18031hna _18qq1jtm"
|
|
218
|
+
};
|
|
219
|
+
var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
220
|
+
/**
|
|
221
|
+
* EditorContentStyles is a wrapper component that applies styles to its children
|
|
222
|
+
* based on the provided feature flags, view mode, and other props.
|
|
223
|
+
* It uses Emotion for styling and supports scrollable content.
|
|
224
|
+
*
|
|
225
|
+
* This will be used in near future to replace the current editor content styles from index.tsx
|
|
226
|
+
*/
|
|
227
|
+
export var EditorContentContainerCompiled = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
228
|
+
var className = props.className,
|
|
229
|
+
children = props.children,
|
|
230
|
+
viewMode = props.viewMode,
|
|
231
|
+
isScrollable = props.isScrollable,
|
|
232
|
+
appearance = props.appearance,
|
|
233
|
+
contentMode = props.contentMode,
|
|
234
|
+
useStandardNodeWidth = props.useStandardNodeWidth;
|
|
235
|
+
var _useThemeObserver = useThemeObserver(),
|
|
236
|
+
colorMode = _useThemeObserver.colorMode;
|
|
237
|
+
var isFullPage = appearance === 'full-page' || appearance === 'full-width' || (expValEqualsNoExposure('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEqualsNoExposure('confluence_max_width_content_appearance', 'isEnabled', true)) && appearance === 'max';
|
|
238
|
+
var isComment = appearance === 'comment';
|
|
239
|
+
var isChromeless = appearance === 'chromeless';
|
|
240
|
+
var baseFontSize = getBaseFontSize(appearance, contentMode);
|
|
241
|
+
var style = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
|
|
242
|
+
exposure: true
|
|
243
|
+
}) ? {
|
|
244
|
+
'--ak-editor-base-font-size': "".concat(editorFontSize({
|
|
245
|
+
theme: {
|
|
246
|
+
baseFontSize: baseFontSize
|
|
247
|
+
}
|
|
248
|
+
}), "px")
|
|
249
|
+
} : {
|
|
250
|
+
'--ak-editor-base-font-size': "".concat(editorFontSize({
|
|
251
|
+
theme: {
|
|
252
|
+
baseFontSize: baseFontSize
|
|
253
|
+
}
|
|
254
|
+
}), "px"),
|
|
255
|
+
'--ak-editor--large-gutter-padding': "".concat(akEditorGutterPaddingDynamic(), "px")
|
|
256
|
+
};
|
|
257
|
+
var browser = getBrowserInfo();
|
|
258
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
259
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
260
|
+
className: ax([editorContentStyles.baseStyles, editorContentStyles.maxModeReizeFixStyles, editorContentStyles.baseStylesMaxContainerWidthFixes, fg('platform_editor_controls_increase_full_page_gutter') && editorExperiment('platform_editor_controls', 'variant1') ? editorContentStyles.editorLargeGutterPuddingBaseStylesEditorControls : editorContentStyles.editorLargeGutterPuddingBaseStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true, {
|
|
261
|
+
exposure: true
|
|
262
|
+
}) && editorContentStyles.editorLargeGutterPuddingReducedBaseStyles, editorContentStyles.whitespaceStyles, editorContentStyles.indentationStyles, expValEquals('platform_editor_small_font_size', 'isEnabled', true) && editorContentStyles.fontSizeStyles, editorContentStyles.shadowStyles, editorContentStyles.InlineNodeViewSharedStyles, editorContentStyles.hideSelectionStyles, editorContentStyles.hideCursorWhenHideSelectionStyles, editorContentStyles.selectedNodeStyles, editorContentStyles.cursorStyles, editorContentStyles.firstFloatingToolbarButtonStyles, editorContentStyles.placeholderTextStyles, editorContentStyles.placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') && editorContentStyles.placeholderOverflowStyles, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') && editorContentStyles.placeholderWrapStyles, editorContentStyles.codeBlockStyles, contentMode === 'compact' && (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
|
|
263
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
264
|
+
expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) && editorContentStyles.codeBlockStylesWithEmUnits, !fg('platform_editor_typography_ugc') && editorContentStyles.editorUGCTokensDefault, fg('platform_editor_typography_ugc') && editorContentStyles.editorUGCTokensRefreshed, expValEquals('platform_editor_small_font_size', 'isEnabled', true) && editorContentStyles.editorUGCSmallText, editorContentStyles.blocktypeStyles, editorExperiment('platform_editor_block_menu', true, {
|
|
265
|
+
exposure: true
|
|
266
|
+
}) && editorContentStyles.blockquoteSelectedNodeStyles, editorExperiment('platform_editor_block_menu', true, {
|
|
267
|
+
exposure: true
|
|
268
|
+
}) && editorContentStyles.listSelectedNodeStyles, editorExperiment('platform_editor_block_menu', true, {
|
|
269
|
+
exposure: true
|
|
270
|
+
}) && editorContentStyles.textSelectedNodeStyles, fg('platform_editor_typography_ugc') ? editorContentStyles.blocktypeStyles_fg_platform_editor_typography_ugc : editorContentStyles.blocktypeStyles_without_fg_platform_editor_typography_ugc, fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, editorContentStyles.codeMarkStyles, expValEquals('platform_editor_a11y_scrollable_region', 'isEnabled', true) && editorContentStyles.codeMarkStylesA11yFix, editorContentStyles.textColorStyles, editorContentStyles.backgroundColorStyles, editorContentStyles.textHighlightPaddingStyles, editorContentStyles.listsStyles, expValEqualsNoExposure('platform_editor_flexible_list_schema', 'isEnabled', true) && editorContentStyles.listItemHiddenMarkerStyles, editorContentStyles.diffListStyles, expValEquals('cc_editor_ttvc_release_bundle_one', 'listLayoutShiftFix', true) && isFullPage && editorContentStyles.listsStylesMarginLayoutShiftFix, editorContentStyles.ruleStyles, editorContentStyles.smartCardDiffStyles, expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? editorContentStyles.showDiffDeletedNodeStylesNew : editorContentStyles.showDiffDeletedNodeStyles, editorContentStyles.mediaStyles, contentMode === 'compact' && (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
|
|
271
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
272
|
+
expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) && editorContentStyles.mediaCaptionStyles, fg('platform_editor_fix_media_in_renderer') && editorContentStyles.firstWrappedMediaStyles, editorContentStyles.telepointerStyle, /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */
|
|
273
|
+
editorContentStyles.telepointerColorAndCommonStyle, editorContentStyles.gapCursorStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.gapCursorStylesVisibilityFix, editorContentStyles.panelStyles, editorContentStyles.nestedPanelBorderStylesMixin, fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, editorContentStyles.panelStylesMixin, editorContentStyles.mentionsStyles, editorContentStyles.tasksAndDecisionsStyles,
|
|
274
|
+
// condense vertical spacing between tasks/decisions items when content mode dense is active
|
|
275
|
+
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
|
|
276
|
+
// TODO: uncomment and remove dynamic styles from getDenseTasksAndDecisionsStyles
|
|
277
|
+
// migrate this with packages/editor/editor-core/src/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.ts
|
|
278
|
+
// reference: https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-dynamic-styles/usage
|
|
279
|
+
// contentMode === 'compact' &&
|
|
280
|
+
// (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
|
|
281
|
+
// // eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
282
|
+
// (expValEquals('cc_editor_ai_content_mode', 'variant', 'test') &&
|
|
283
|
+
// fg('platform_editor_content_mode_button_mvp'))) &&
|
|
284
|
+
// getDenseTasksAndDecisionsStyles(baseFontSize),
|
|
285
|
+
editorContentStyles.gridStyles, editorContentStyles.blockMarksStyles, editorContentStyles.dateStyles,
|
|
286
|
+
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
|
|
287
|
+
// TODO: uncomment and remove dynamic styles from getExtensionStyles
|
|
288
|
+
// migrate this with packages/editor/editor-core/src/ui/EditorContentContainer/styles/extensionStyles.ts
|
|
289
|
+
// suggest creating a new cssMap for the variant use case from the guide below
|
|
290
|
+
// reference: https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-dynamic-styles/usage
|
|
291
|
+
// getExtensionStyles(contentMode),
|
|
292
|
+
editorContentStyles.extensionDiffStyles, editorContentStyles.expandStylesBase, !useStandardNodeWidth && editorContentStyles.expandStyles, contentMode === 'compact' && (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
|
|
293
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
294
|
+
expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) &&
|
|
295
|
+
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
|
|
296
|
+
// TODO: uncomment and remove dynamic styles from getDenseExpandTitleStyles
|
|
297
|
+
// migrate this with packages/editor/editor-core/src/ui/EditorContentContainer/styles/expandStyles.ts
|
|
298
|
+
// getDenseExpandTitleStyles(baseFontSize),
|
|
299
|
+
fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes : editorContentStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, editorContentStyles.expandStylesMixin_fg_platform_visual_refresh_icons, isChromeless && expValEquals('platform_editor_chromeless_expand_fix', 'isEnabled', true) && editorContentStyles.expandStylesMixin_experiment_platform_editor_chromeless_expand_fix, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.findReplaceStylesNewWithA11Y : editorContentStyles.findReplaceStyles, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && editorContentStyles.findReplaceStylesNewWithCodeblockColorContrastFix, !expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && editorContentStyles.findReplaceStylesWithCodeblockColorContrastFix, editorContentStyles.textHighlightStyle, editorContentStyles.decisionStyles, expValEqualsNoExposure('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true) ? editorContentStyles.taskItemStylesWithBlockTaskItem : editorContentStyles.taskItemStyles, editorContentStyles.taskItemCheckboxStyles, editorContentStyles.decisionIconWithVisualRefresh, editorContentStyles.statusStyles, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? editorContentStyles.statusStylesTeam26 : fg('platform-component-visual-refresh') ? expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.statusStylesMixin_fg_platform_component_visual_refresh_with_search_match : editorContentStyles.statusStylesMixin_fg_platform_component_visual_refresh : expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.statusStylesMixin_without_fg_platform_component_visual_refresh_with_search_match : editorContentStyles.statusStylesMixin_without_fg_platform_component_visual_refresh, editorContentStyles.annotationStyles, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorExperiment('platform_editor_block_menu', true) ? editorContentStyles.smartCardStylesWithSearchMatchAndBlockMenuDangerStyles : editorContentStyles.smartCardStylesWithSearchMatch : editorContentStyles.smartCardStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorContentStyles.smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness, (expValEqualsNoExposure('platform_editor_controls', 'cohort', 'variant1') || editorExperiment('platform_editor_preview_panel_linking_exp', true)) && editorContentStyles.editorControlsSmartCardStyles, editorContentStyles.embedCardStyles, editorContentStyles.unsupportedStyles, editorContentStyles.resizerStyles, editorContentStyles.layoutBaseStyles, expValEquals('platform_editor_table_excerpts_fix', 'isEnabled', true) && editorContentStyles.layoutBaseStylesWithTableExcerptsFix, fg('platform_editor_fix_media_in_renderer') && editorContentStyles.alignMultipleWrappedImageInLayoutStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockStylesBase, editorExperiment('platform_synced_block', true) &&
|
|
300
|
+
// Apply sync block delta styles conditionally based on useStandardNodeWidth (negative margins or not)
|
|
301
|
+
!useStandardNodeWidth && editorContentStyles.syncBlockStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockFirstNodeStyles, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutBaseStylesAdvanced, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutSectionStylesAdvanced : editorContentStyles.layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && editorContentStyles.layoutColumnDividerStyles, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutColumnDividerStylesNestedDnD, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutColumnStylesAdvanced : editorContentStyles.layoutColumnStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && editorContentStyles.layoutColumnResizeStyles, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutSelectedStylesAdvanced : editorContentStyles.layoutSelectedStylesNotAdvanced, editorExperiment('platform_synced_block', true) && editorContentStyles.layoutSelectedStylesAdvancedFix, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutColumnResponsiveStyles, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutResponsiveBaseStyles, editorExperiment('platform_synced_block', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync, !editorExperiment('platform_synced_block', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutBaseStylesFixesUnderNestedDnDFG, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.layoutColumnMartinTopFixesNew : editorContentStyles.layoutColumnMartinTopFixesOld, editorContentStyles.smartLinksInLivePagesStyles, editorContentStyles.linkingVisualRefreshV1Styles, editorContentStyles.dateVanillaStyles, fg('platform_editor_typography_ugc') ? contentMode === 'compact' && (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
|
|
302
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
303
|
+
expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) ? editorContentStyles.paragraphStylesWithScaledMargin : editorContentStyles.paragraphStylesUGCRefreshed : contentMode === 'compact' && (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
|
|
304
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
305
|
+
expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) ? editorContentStyles.paragraphStylesOldWithScaledMargin : editorContentStyles.paragraphStylesOld, editorContentStyles.linkStyles, browser.safari && editorContentStyles.listsStylesSafariFix, editorExperiment('platform_synced_block', true) && editorContentStyles.pragmaticResizerStylesSyncedBlock, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && "", editorExperiment('platform_synced_block', true) ? editorContentStyles.pragmaticResizerStylesCodeBlockSyncedBlockPatch : editorContentStyles.pragmaticResizerStylesCodeBlockLegacy, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && editorContentStyles.pragmaticStylesLayoutFirstNodeResizeHandleFix, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && editorContentStyles.pragmaticResizerStylesForTooltip, editorExperiment('platform_editor_preview_panel_responsiveness', true) && (editorExperiment('advanced_layouts', true) || expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true)) && editorContentStyles.pragmaticResizerStylesWithReducedEditorGutter, editorContentStyles.aiPanelBaseStyles, isFirefox && editorContentStyles.aiPanelBaseFirefoxStyles, colorMode === 'dark' && editorContentStyles.aiPanelDarkStyles, colorMode === 'dark' && isFirefox && editorContentStyles.aiPanelDarkFirefoxStyles, viewMode === 'view' && editorContentStyles.layoutStylesForView, viewMode === 'view' && editorExperiment('advanced_layouts', true) && editorContentStyles.layoutSelectedStylesForViewAdvanced, viewMode === 'view' && editorExperiment('advanced_layouts', false) && editorContentStyles.layoutSelectedStylesForViewNotAdvanced, viewMode === 'view' && editorExperiment('advanced_layouts', true) && editorContentStyles.layoutResponsiveStylesForView, isComment && editorContentStyles.commentEditorStyles, isComment && editorContentStyles.tableCommentEditorStyles, isFullPage && editorContentStyles.fullPageEditorStyles, isFullPage && editorContentStyles.scrollbarStyles, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.firstCodeBlockWithNoMargin : editorContentStyles.firstCodeBlockWithNoMarginOld, editorContentStyles.firstBlockNodeStyles, editorContentStyles.mentionNodeStyles, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.mentionsSelectionStylesWithSearchMatch : editorContentStyles.mentionsSelectionStyles, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? editorContentStyles.scaledEmojiStyles : editorContentStyles.emojiStyles,
|
|
306
|
+
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
|
|
307
|
+
// TODO: uncomment and remove dynamic styles from getScaledDenseEmojiStyles and getDenseEmojiStyles
|
|
308
|
+
// when migrate with packages/editor/editor-core/src/ui/EditorContentContainer/styles/emoji.ts
|
|
309
|
+
// Dense emoji scaling based on base font size
|
|
310
|
+
// contentMode === 'compact' &&
|
|
311
|
+
// (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
|
|
312
|
+
// // eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
313
|
+
// (expValEquals('cc_editor_ai_content_mode', 'variant', 'test') &&
|
|
314
|
+
// fg('platform_editor_content_mode_button_mvp')))
|
|
315
|
+
// ? expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true)
|
|
316
|
+
// ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
317
|
+
// getScaledDenseEmojiStyles(baseFontSize)
|
|
318
|
+
// : // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
319
|
+
// getDenseEmojiStyles(baseFontSize)
|
|
320
|
+
// : undefined,
|
|
321
|
+
editorContentStyles.panelViewStyles, editorContentStyles.mediaGroupStyles, editorContentStyles.mediaAlignmentStyles, expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? editorContentStyles.tableLayoutFixesWithFontSize : editorContentStyles.tableLayoutFixes, editorContentStyles.tableContainerStyles,
|
|
322
|
+
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
|
|
323
|
+
// TODO: it was from "import { tableSharedStyle } from '@atlaskit/editor-common/styles';"
|
|
324
|
+
// tableSharedStyle(),
|
|
325
|
+
editorContentStyles.tableEmptyRowStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && editorContentStyles.tableContentModeStyles, editorContentStyles.hyperLinkFloatingToolbarStyles, editorContentStyles.selectionToolbarAnimationStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.blockquoteDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.textDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.listDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.dangerDateStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.emojiDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.mentionDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.decisionDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.statusDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.dangerRuleStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.mediaDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.nestedPanelDangerStyles, className]),
|
|
326
|
+
ref: ref,
|
|
327
|
+
"data-editor-scroll-container": isScrollable ? 'true' : undefined,
|
|
328
|
+
"data-testid": "editor-content-container"
|
|
329
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
330
|
+
,
|
|
331
|
+
style: style,
|
|
332
|
+
tabIndex: isScrollable ? 0 : undefined,
|
|
333
|
+
role: isScrollable ? 'region' : undefined
|
|
334
|
+
}, children);
|
|
335
|
+
});
|