@madie/madie-design-system 1.2.69 → 1.2.71
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/components/RichTextEditor/RichTextEditor.stories.js +1 -7
- package/components/RichTextEditor/index.jsx +3 -3
- package/dist/browser.js +1 -1
- package/dist/index.js +1 -1
- package/dist/react/index.js +1 -1
- package/dist/react/index.js.map +1 -1
- package/package.json +9 -2
- package/styles/components/_rich-text-editor.scss +163 -139
- package/styles/qppds/components/_rich-text-editor.scss +138 -114
- package/test/components/RichTextEditor.test.js +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@madie/madie-design-system",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.71",
|
|
4
4
|
"description": "Shared style guide across the Madie program.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",
|
|
@@ -153,6 +153,13 @@
|
|
|
153
153
|
"trim-newlines": "^3.0.1",
|
|
154
154
|
"glob-parent": "^6.0.1",
|
|
155
155
|
"semver": "^7.5.3",
|
|
156
|
-
"optionator": "0.9.3"
|
|
156
|
+
"optionator": "0.9.3",
|
|
157
|
+
"@cmsgov/design-system": {
|
|
158
|
+
"inquirer": {
|
|
159
|
+
"external-editor": {
|
|
160
|
+
"tmp": "^0.2.4"
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
157
164
|
}
|
|
158
165
|
}
|
|
@@ -1,3 +1,122 @@
|
|
|
1
|
+
/* --- Heading styles --- */
|
|
2
|
+
@mixin heading-styles {
|
|
3
|
+
h1,
|
|
4
|
+
h2,
|
|
5
|
+
h3,
|
|
6
|
+
h4,
|
|
7
|
+
h5,
|
|
8
|
+
h6 {
|
|
9
|
+
line-height: 1.1;
|
|
10
|
+
margin-top: 2.5rem;
|
|
11
|
+
text-wrap: pretty;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
h1,
|
|
15
|
+
h2 {
|
|
16
|
+
margin-top: 3.5rem;
|
|
17
|
+
margin-bottom: 1.5rem;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
h1 {
|
|
21
|
+
font-size: 1.4rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
h2 {
|
|
25
|
+
font-size: 1.2rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h3 {
|
|
29
|
+
font-size: 1.1rem;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
h4,
|
|
33
|
+
h5,
|
|
34
|
+
h6 {
|
|
35
|
+
font-size: 1rem;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* --- List styles --- */
|
|
40
|
+
@mixin list-styles {
|
|
41
|
+
ul,
|
|
42
|
+
ol {
|
|
43
|
+
padding: 0 1rem;
|
|
44
|
+
margin: 1.25rem 1rem 1.25rem 0.4rem;
|
|
45
|
+
|
|
46
|
+
li p {
|
|
47
|
+
margin-top: 0.25em;
|
|
48
|
+
margin-bottom: 0.25em;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
ul {
|
|
53
|
+
list-style: disc;
|
|
54
|
+
li {
|
|
55
|
+
margin-bottom: 5px;
|
|
56
|
+
}
|
|
57
|
+
li:before {
|
|
58
|
+
margin-right: 10px;
|
|
59
|
+
color: #000;
|
|
60
|
+
text-align: center;
|
|
61
|
+
display: inline-block;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
ol {
|
|
66
|
+
counter-reset: item;
|
|
67
|
+
list-style: decimal;
|
|
68
|
+
li {
|
|
69
|
+
counter-increment: item;
|
|
70
|
+
margin-bottom: 5px;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* --- Code and preformatted text styles --- */
|
|
76
|
+
@mixin code-styles {
|
|
77
|
+
code {
|
|
78
|
+
background-color: var(--purple-light);
|
|
79
|
+
border-radius: 0.4rem;
|
|
80
|
+
color: var(--black);
|
|
81
|
+
font-size: 0.85rem;
|
|
82
|
+
padding: 0.25em 0.3em;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
pre {
|
|
86
|
+
background: var(--black);
|
|
87
|
+
border-radius: 0.5rem;
|
|
88
|
+
color: var(--white);
|
|
89
|
+
font-family: "JetBrainsMono", monospace;
|
|
90
|
+
margin: 1.5rem 0;
|
|
91
|
+
padding: 0.75rem 1rem;
|
|
92
|
+
|
|
93
|
+
code {
|
|
94
|
+
background: none;
|
|
95
|
+
color: inherit;
|
|
96
|
+
font-size: 0.8rem;
|
|
97
|
+
padding: 0;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* --- blockquote styles --- */
|
|
103
|
+
@mixin blockquote-style {
|
|
104
|
+
blockquote {
|
|
105
|
+
border-left: 3px solid var(--gray-3);
|
|
106
|
+
margin: 1.5rem 0;
|
|
107
|
+
padding-left: 1rem;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* --- hr styles --- */
|
|
112
|
+
@mixin hr-style {
|
|
113
|
+
hr {
|
|
114
|
+
border: none;
|
|
115
|
+
border-top: 1px solid var(--gray-2);
|
|
116
|
+
margin: 2rem 0;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
1
120
|
.rich-text-editor {
|
|
2
121
|
.control-group {
|
|
3
122
|
border: solid 1px #9c9c9c;
|
|
@@ -16,130 +135,28 @@
|
|
|
16
135
|
}
|
|
17
136
|
/* Basic editor styles */
|
|
18
137
|
.ProseMirror {
|
|
138
|
+
@include heading-styles;
|
|
139
|
+
@include list-styles;
|
|
140
|
+
@include code-styles;
|
|
141
|
+
@include blockquote-style;
|
|
142
|
+
@include hr-style;
|
|
143
|
+
|
|
19
144
|
border: solid 1px #9c9c9c;
|
|
20
145
|
border-top: 0;
|
|
21
146
|
border-bottom-left-radius: 3px;
|
|
22
147
|
border-bottom-right-radius: 3px;
|
|
23
|
-
padding
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
&.has-error {
|
|
27
|
-
border: 1.5px solid #ae1c1c;
|
|
28
|
-
}
|
|
148
|
+
padding: 8px 14px;
|
|
149
|
+
box-sizing: border-box;
|
|
29
150
|
|
|
30
151
|
:first-child {
|
|
31
152
|
margin-top: 0;
|
|
32
153
|
}
|
|
33
|
-
|
|
34
|
-
/* List styles */
|
|
35
|
-
ul,
|
|
36
|
-
ol {
|
|
37
|
-
padding: 0 1rem;
|
|
38
|
-
margin: 1.25rem 1rem 1.25rem 0.4rem;
|
|
39
|
-
|
|
40
|
-
li p {
|
|
41
|
-
margin-top: 0.25em;
|
|
42
|
-
margin-bottom: 0.25em;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
//unorder
|
|
46
|
-
ul {
|
|
47
|
-
list-style: disc;
|
|
48
|
-
li {
|
|
49
|
-
margin-bottom: 5px;
|
|
50
|
-
}
|
|
51
|
-
li:before {
|
|
52
|
-
margin-right: 10px;
|
|
53
|
-
color: #000;
|
|
54
|
-
text-align: center;
|
|
55
|
-
display: inline-block;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
//order
|
|
60
|
-
ol {
|
|
61
|
-
counter-reset: item;
|
|
62
|
-
list-style: decimal;
|
|
63
|
-
li {
|
|
64
|
-
counter-increment: item;
|
|
65
|
-
margin-bottom: 5px;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* Heading styles */
|
|
70
|
-
h1,
|
|
71
|
-
h2,
|
|
72
|
-
h3,
|
|
73
|
-
h4,
|
|
74
|
-
h5,
|
|
75
|
-
h6 {
|
|
76
|
-
line-height: 1.1;
|
|
77
|
-
margin-top: 2.5rem;
|
|
78
|
-
text-wrap: pretty;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
h1,
|
|
82
|
-
h2 {
|
|
83
|
-
margin-top: 3.5rem;
|
|
84
|
-
margin-bottom: 1.5rem;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
h1 {
|
|
88
|
-
font-size: 1.4rem;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
h2 {
|
|
92
|
-
font-size: 1.2rem;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
h3 {
|
|
96
|
-
font-size: 1.1rem;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
h4,
|
|
100
|
-
h5,
|
|
101
|
-
h6 {
|
|
102
|
-
font-size: 1rem;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
/* Code and preformatted text styles */
|
|
106
|
-
code {
|
|
107
|
-
background-color: var(--purple-light);
|
|
108
|
-
border-radius: 0.4rem;
|
|
109
|
-
color: var(--black);
|
|
110
|
-
font-size: 0.85rem;
|
|
111
|
-
padding: 0.25em 0.3em;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
pre {
|
|
115
|
-
background: var(--black);
|
|
116
|
-
border-radius: 0.5rem;
|
|
117
|
-
color: var(--white);
|
|
118
|
-
font-family: "JetBrainsMono", monospace;
|
|
119
|
-
margin: 1.5rem 0;
|
|
120
|
-
padding: 0.75rem 1rem;
|
|
121
|
-
|
|
122
|
-
code {
|
|
123
|
-
background: none;
|
|
124
|
-
color: inherit;
|
|
125
|
-
font-size: 0.8rem;
|
|
126
|
-
padding: 0;
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
blockquote {
|
|
131
|
-
border-left: 3px solid var(--gray-3);
|
|
132
|
-
margin: 1.5rem 0;
|
|
133
|
-
padding-left: 1rem;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
hr {
|
|
137
|
-
border: none;
|
|
138
|
-
border-top: 1px solid var(--gray-2);
|
|
139
|
-
margin: 2rem 0;
|
|
140
|
-
}
|
|
141
154
|
}
|
|
142
155
|
|
|
156
|
+
.has-error .ProseMirror {
|
|
157
|
+
border: 1.5px solid #ae1c1c;
|
|
158
|
+
}
|
|
159
|
+
|
|
143
160
|
/* Bubble menu */
|
|
144
161
|
.bubble-menu {
|
|
145
162
|
background-color: var(--white);
|
|
@@ -194,11 +211,18 @@
|
|
|
194
211
|
}
|
|
195
212
|
|
|
196
213
|
.rich-text-editor_read_only {
|
|
214
|
+
@include heading-styles;
|
|
215
|
+
@include list-styles;
|
|
216
|
+
@include code-styles;
|
|
217
|
+
@include blockquote-style;
|
|
218
|
+
@include hr-style;
|
|
219
|
+
|
|
220
|
+
//preserve spacing/line breaks
|
|
197
221
|
white-space: pre-wrap;
|
|
198
222
|
}
|
|
199
|
-
|
|
223
|
+
|
|
200
224
|
/* Table-specific styling */
|
|
201
|
-
|
|
225
|
+
table {
|
|
202
226
|
border-collapse: collapse;
|
|
203
227
|
margin: 0;
|
|
204
228
|
overflow: hidden;
|
|
@@ -207,37 +231,37 @@
|
|
|
207
231
|
|
|
208
232
|
td,
|
|
209
233
|
th {
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
234
|
+
border: 1px solid #9c9c9c;
|
|
235
|
+
box-sizing: border-box;
|
|
236
|
+
min-width: 1em;
|
|
237
|
+
padding: 6px 8px;
|
|
238
|
+
position: relative;
|
|
239
|
+
vertical-align: top;
|
|
240
|
+
|
|
241
|
+
> * {
|
|
242
|
+
margin-bottom: 0;
|
|
243
|
+
}
|
|
220
244
|
}
|
|
221
245
|
|
|
222
246
|
th {
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
247
|
+
background-color: #3d25140d;
|
|
248
|
+
font-weight: bold;
|
|
249
|
+
text-align: left;
|
|
226
250
|
}
|
|
227
251
|
|
|
228
252
|
.column-resize-handle {
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
253
|
+
background-color: #209fa6;
|
|
254
|
+
bottom: -2px;
|
|
255
|
+
pointer-events: none;
|
|
256
|
+
position: absolute;
|
|
257
|
+
right: -2px;
|
|
258
|
+
top: 0;
|
|
259
|
+
width: 4px;
|
|
236
260
|
}
|
|
237
|
-
|
|
261
|
+
}
|
|
238
262
|
|
|
239
|
-
|
|
263
|
+
.tableWrapper {
|
|
240
264
|
margin: 1.5rem 0;
|
|
241
265
|
overflow-x: auto;
|
|
242
|
-
|
|
266
|
+
}
|
|
243
267
|
}
|
|
@@ -1,3 +1,122 @@
|
|
|
1
|
+
/* --- Heading styles --- */
|
|
2
|
+
@mixin heading-styles {
|
|
3
|
+
h1,
|
|
4
|
+
h2,
|
|
5
|
+
h3,
|
|
6
|
+
h4,
|
|
7
|
+
h5,
|
|
8
|
+
h6 {
|
|
9
|
+
line-height: 1.1;
|
|
10
|
+
margin-top: 2.5rem;
|
|
11
|
+
text-wrap: pretty;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
h1,
|
|
15
|
+
h2 {
|
|
16
|
+
margin-top: 3.5rem;
|
|
17
|
+
margin-bottom: 1.5rem;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
h1 {
|
|
21
|
+
font-size: 1.4rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
h2 {
|
|
25
|
+
font-size: 1.2rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h3 {
|
|
29
|
+
font-size: 1.1rem;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
h4,
|
|
33
|
+
h5,
|
|
34
|
+
h6 {
|
|
35
|
+
font-size: 1rem;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* --- List styles --- */
|
|
40
|
+
@mixin list-styles {
|
|
41
|
+
ul,
|
|
42
|
+
ol {
|
|
43
|
+
padding: 0 1rem;
|
|
44
|
+
margin: 1.25rem 1rem 1.25rem 0.4rem;
|
|
45
|
+
|
|
46
|
+
li p {
|
|
47
|
+
margin-top: 0.25em;
|
|
48
|
+
margin-bottom: 0.25em;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
ul {
|
|
53
|
+
list-style: disc;
|
|
54
|
+
li {
|
|
55
|
+
margin-bottom: 5px;
|
|
56
|
+
}
|
|
57
|
+
li:before {
|
|
58
|
+
margin-right: 10px;
|
|
59
|
+
color: #000;
|
|
60
|
+
text-align: center;
|
|
61
|
+
display: inline-block;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
ol {
|
|
66
|
+
counter-reset: item;
|
|
67
|
+
list-style: decimal;
|
|
68
|
+
li {
|
|
69
|
+
counter-increment: item;
|
|
70
|
+
margin-bottom: 5px;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* --- Code and preformatted text styles --- */
|
|
76
|
+
@mixin code-styles {
|
|
77
|
+
code {
|
|
78
|
+
background-color: var(--purple-light);
|
|
79
|
+
border-radius: 0.4rem;
|
|
80
|
+
color: var(--black);
|
|
81
|
+
font-size: 0.85rem;
|
|
82
|
+
padding: 0.25em 0.3em;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
pre {
|
|
86
|
+
background: var(--black);
|
|
87
|
+
border-radius: 0.5rem;
|
|
88
|
+
color: var(--white);
|
|
89
|
+
font-family: "JetBrainsMono", monospace;
|
|
90
|
+
margin: 1.5rem 0;
|
|
91
|
+
padding: 0.75rem 1rem;
|
|
92
|
+
|
|
93
|
+
code {
|
|
94
|
+
background: none;
|
|
95
|
+
color: inherit;
|
|
96
|
+
font-size: 0.8rem;
|
|
97
|
+
padding: 0;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* --- blockquote styles --- */
|
|
103
|
+
@mixin blockquote-style {
|
|
104
|
+
blockquote {
|
|
105
|
+
border-left: 3px solid var(--gray-3);
|
|
106
|
+
margin: 1.5rem 0;
|
|
107
|
+
padding-left: 1rem;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* --- hr styles --- */
|
|
112
|
+
@mixin hr-style {
|
|
113
|
+
hr {
|
|
114
|
+
border: none;
|
|
115
|
+
border-top: 1px solid var(--gray-2);
|
|
116
|
+
margin: 2rem 0;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
1
120
|
.rich-text-editor {
|
|
2
121
|
.control-group {
|
|
3
122
|
border: solid 1px #9c9c9c;
|
|
@@ -16,130 +135,28 @@
|
|
|
16
135
|
}
|
|
17
136
|
/* Basic editor styles */
|
|
18
137
|
.ProseMirror {
|
|
138
|
+
@include heading-styles;
|
|
139
|
+
@include list-styles;
|
|
140
|
+
@include code-styles;
|
|
141
|
+
@include blockquote-style;
|
|
142
|
+
@include hr-style;
|
|
143
|
+
|
|
19
144
|
border: solid 1px #9c9c9c;
|
|
20
145
|
border-top: 0;
|
|
21
146
|
border-bottom-left-radius: 3px;
|
|
22
147
|
border-bottom-right-radius: 3px;
|
|
23
|
-
padding
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
&.has-error {
|
|
27
|
-
border: 1.5px solid #ae1c1c;
|
|
28
|
-
}
|
|
148
|
+
padding: 8px 14px;
|
|
149
|
+
box-sizing: border-box;
|
|
29
150
|
|
|
30
151
|
:first-child {
|
|
31
152
|
margin-top: 0;
|
|
32
153
|
}
|
|
33
|
-
|
|
34
|
-
/* List styles */
|
|
35
|
-
ul,
|
|
36
|
-
ol {
|
|
37
|
-
padding: 0 1rem;
|
|
38
|
-
margin: 1.25rem 1rem 1.25rem 0.4rem;
|
|
39
|
-
|
|
40
|
-
li p {
|
|
41
|
-
margin-top: 0.25em;
|
|
42
|
-
margin-bottom: 0.25em;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
//unorder
|
|
46
|
-
ul {
|
|
47
|
-
list-style: disc;
|
|
48
|
-
li {
|
|
49
|
-
margin-bottom: 5px;
|
|
50
|
-
}
|
|
51
|
-
li:before {
|
|
52
|
-
margin-right: 10px;
|
|
53
|
-
color: #000;
|
|
54
|
-
text-align: center;
|
|
55
|
-
display: inline-block;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
//order
|
|
60
|
-
ol {
|
|
61
|
-
counter-reset: item;
|
|
62
|
-
list-style: decimal;
|
|
63
|
-
li {
|
|
64
|
-
counter-increment: item;
|
|
65
|
-
margin-bottom: 5px;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* Heading styles */
|
|
70
|
-
h1,
|
|
71
|
-
h2,
|
|
72
|
-
h3,
|
|
73
|
-
h4,
|
|
74
|
-
h5,
|
|
75
|
-
h6 {
|
|
76
|
-
line-height: 1.1;
|
|
77
|
-
margin-top: 2.5rem;
|
|
78
|
-
text-wrap: pretty;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
h1,
|
|
82
|
-
h2 {
|
|
83
|
-
margin-top: 3.5rem;
|
|
84
|
-
margin-bottom: 1.5rem;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
h1 {
|
|
88
|
-
font-size: 1.4rem;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
h2 {
|
|
92
|
-
font-size: 1.2rem;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
h3 {
|
|
96
|
-
font-size: 1.1rem;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
h4,
|
|
100
|
-
h5,
|
|
101
|
-
h6 {
|
|
102
|
-
font-size: 1rem;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
/* Code and preformatted text styles */
|
|
106
|
-
code {
|
|
107
|
-
background-color: var(--purple-light);
|
|
108
|
-
border-radius: 0.4rem;
|
|
109
|
-
color: var(--black);
|
|
110
|
-
font-size: 0.85rem;
|
|
111
|
-
padding: 0.25em 0.3em;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
pre {
|
|
115
|
-
background: var(--black);
|
|
116
|
-
border-radius: 0.5rem;
|
|
117
|
-
color: var(--white);
|
|
118
|
-
font-family: "JetBrainsMono", monospace;
|
|
119
|
-
margin: 1.5rem 0;
|
|
120
|
-
padding: 0.75rem 1rem;
|
|
121
|
-
|
|
122
|
-
code {
|
|
123
|
-
background: none;
|
|
124
|
-
color: inherit;
|
|
125
|
-
font-size: 0.8rem;
|
|
126
|
-
padding: 0;
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
blockquote {
|
|
131
|
-
border-left: 3px solid var(--gray-3);
|
|
132
|
-
margin: 1.5rem 0;
|
|
133
|
-
padding-left: 1rem;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
hr {
|
|
137
|
-
border: none;
|
|
138
|
-
border-top: 1px solid var(--gray-2);
|
|
139
|
-
margin: 2rem 0;
|
|
140
|
-
}
|
|
141
154
|
}
|
|
142
155
|
|
|
156
|
+
.has-error .ProseMirror {
|
|
157
|
+
border: 1.5px solid #ae1c1c;
|
|
158
|
+
}
|
|
159
|
+
|
|
143
160
|
/* Bubble menu */
|
|
144
161
|
.bubble-menu {
|
|
145
162
|
background-color: var(--white);
|
|
@@ -194,6 +211,13 @@
|
|
|
194
211
|
}
|
|
195
212
|
|
|
196
213
|
.rich-text-editor_read_only {
|
|
214
|
+
@include heading-styles;
|
|
215
|
+
@include list-styles;
|
|
216
|
+
@include code-styles;
|
|
217
|
+
@include blockquote-style;
|
|
218
|
+
@include hr-style;
|
|
219
|
+
|
|
220
|
+
// preserve spacing/line breaks
|
|
197
221
|
white-space: pre-wrap;
|
|
198
222
|
}
|
|
199
223
|
|