@firestitch/markdown-editor 18.0.0 → 18.0.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.
Files changed (19) hide show
  1. package/app/modules/markdown-editor/components/markdown-editor/markdown-editor.component.d.ts +4 -4
  2. package/app/modules/markdown-editor/services/milkdown-loader.service.d.ts +2 -2
  3. package/assets/milkdown/milkdown.js +993 -0
  4. package/assets/milkdown/theme/common/block-edit.css +131 -0
  5. package/assets/milkdown/theme/common/code-mirror.css +333 -0
  6. package/assets/milkdown/theme/common/cursor.css +22 -0
  7. package/assets/milkdown/theme/common/image-block.css +384 -0
  8. package/assets/milkdown/theme/common/latex.css +44 -0
  9. package/assets/milkdown/theme/common/link-tooltip.css +107 -0
  10. package/assets/milkdown/theme/common/list-item.css +50 -0
  11. package/assets/milkdown/theme/common/placeholder.css +11 -0
  12. package/assets/milkdown/theme/common/table.css +219 -0
  13. package/assets/milkdown/theme/common/toolbar.css +50 -0
  14. package/assets/milkdown/theme/nord/style.css +29 -0
  15. package/esm2022/app/modules/markdown-editor/components/markdown-editor/markdown-editor.component.mjs +16 -15
  16. package/esm2022/app/modules/markdown-editor/services/milkdown-loader.service.mjs +52 -43
  17. package/fesm2022/firestitch-markdown-editor.mjs +66 -56
  18. package/fesm2022/firestitch-markdown-editor.mjs.map +1 -1
  19. package/package.json +1 -3
package/assets/milkdown/theme/common/image-block.css ADDED
@@ -0,0 +1,384 @@
1
+ .milkdown .milkdown-image-inline {
2
+ outline: none;
3
+ display: inline-flex;
4
+ vertical-align: text-bottom;
5
+ }
6
+
7
+ .milkdown .milkdown-image-inline input {
8
+ background: transparent;
9
+ outline: none;
10
+ border: 0;
11
+ caret-color: var(--crepe-color-outline);
12
+ }
13
+
14
+ .milkdown .milkdown-image-inline > .empty-image-inline {
15
+ display: inline-flex;
16
+ }
17
+
18
+ .milkdown .milkdown-image-inline > .empty-image-inline .confirm {
19
+ cursor: pointer;
20
+ }
21
+
22
+ .milkdown .milkdown-image-inline > .empty-image-inline .link-importer {
23
+ position: relative;
24
+ flex: 1;
25
+ }
26
+
27
+ .milkdown .milkdown-image-inline > .empty-image-inline .link-importer > .link-input-area {
28
+ width: 208px;
29
+ color: var(--crepe-color-on-background);
30
+ display: flex;
31
+ }
32
+
33
+ .milkdown .milkdown-image-inline > .empty-image-inline .link-importer .placeholder {
34
+ position: absolute;
35
+ top: 0;
36
+ left: 0;
37
+ bottom: 0;
38
+ display: flex;
39
+ align-items: center;
40
+ cursor: text;
41
+ }
42
+
43
+ .milkdown .milkdown-image-inline > .empty-image-inline .link-importer .placeholder .uploader {
44
+ cursor: pointer;
45
+ display: flex;
46
+ }
47
+
48
+ .milkdown .milkdown-image-inline .hidden {
49
+ display: none !important;
50
+ }
51
+
52
+ .milkdown .milkdown-image-inline.empty.selected {
53
+ background: none;
54
+ outline: none;
55
+ }
56
+
57
+ .milkdown .milkdown-image-inline.empty.selected .empty-image-inline {
58
+ box-shadow: var(--crepe-shadow-1);
59
+ }
60
+
61
+ .milkdown .milkdown-image-inline.selected {
62
+ background: none;
63
+ outline: 1px solid var(--crepe-color-primary);
64
+ }
65
+
66
+ .milkdown .milkdown-image-inline.selected :not(input)::-moz-selection {
67
+ background: transparent;
68
+ }
69
+
70
+ .milkdown .milkdown-image-inline.selected :not(input)::selection {
71
+ background: transparent;
72
+ }
73
+
74
+ .milkdown .milkdown-image-inline .empty-image-inline {
75
+ align-items: center;
76
+ padding: 4px 10px;
77
+ gap: 10px;
78
+ background: var(--crepe-color-surface);
79
+ font-family: var(--crepe-font-default);
80
+ border-radius: 8px;
81
+ font-size: 16px;
82
+ }
83
+
84
+ .milkdown .milkdown-image-inline .empty-image-inline .image-icon svg {
85
+ width: 18px;
86
+ height: 18px;
87
+ fill: var(--crepe-color-outline);
88
+ }
89
+
90
+ .milkdown .milkdown-image-inline .empty-image-inline .image-icon {
91
+ padding: 3px;
92
+ width: 24px;
93
+ height: 24px;
94
+ }
95
+
96
+ .milkdown .milkdown-image-inline .empty-image-inline .link-importer {
97
+ height: 24px;
98
+ }
99
+
100
+ .milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder {
101
+ color: color-mix(
102
+ in srgb,
103
+ var(--crepe-color-on-background),
104
+ transparent 60%
105
+ );
106
+ }
107
+
108
+ .milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder :not(input)::-moz-selection {
109
+ background: transparent;
110
+ }
111
+
112
+ .milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder :not(input)::selection {
113
+ background: transparent;
114
+ }
115
+
116
+ .milkdown .milkdown-image-inline .empty-image-inline .link-importer .link-input-area {
117
+ line-height: 24px;
118
+ }
119
+
120
+ .milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder .uploader {
121
+ gap: 8px;
122
+ color: var(--crepe-color-primary);
123
+ justify-content: center;
124
+ transition: color 0.2s;
125
+ font-family: var(--crepe-font-default);
126
+ }
127
+
128
+ .milkdown .milkdown-image-inline .empty-image-inline .link-importer.focus .placeholder .uploader {
129
+ color: unset;
130
+ }
131
+
132
+ .milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder .uploader:hover {
133
+ color: var(--crepe-color-primary);
134
+ }
135
+
136
+ .milkdown .milkdown-image-inline .empty-image-inline .link-importer .placeholder .text {
137
+ margin-left: 8px;
138
+ }
139
+
140
+ .milkdown .milkdown-image-inline .empty-image-inline .confirm svg {
141
+ width: 18px;
142
+ height: 18px;
143
+ }
144
+
145
+ .milkdown .milkdown-image-inline .empty-image-inline .confirm {
146
+ display: flex;
147
+ width: 24px;
148
+ height: 24px;
149
+ padding: 3px;
150
+ border-radius: 8px;
151
+ color: var(--crepe-color-primary);
152
+ }
153
+
154
+ .milkdown .milkdown-image-inline .empty-image-inline .confirm:hover {
155
+ background: var(--crepe-color-hover);
156
+ }
157
+ .milkdown .milkdown-image-block {
158
+ outline: none;
159
+ margin: 4px 0;
160
+ display: block;
161
+ }
162
+ .milkdown .milkdown-image-block > .image-wrapper {
163
+ position: relative;
164
+ width: -moz-fit-content;
165
+ width: fit-content;
166
+ margin: 0 auto;
167
+ min-width: 100px;
168
+ }
169
+ .milkdown .milkdown-image-block > .image-wrapper .operation {
170
+ position: absolute;
171
+ display: flex;
172
+ }
173
+ .milkdown .milkdown-image-block > .image-wrapper .operation > .operation-item {
174
+ cursor: pointer;
175
+ }
176
+ .milkdown .milkdown-image-block > .image-wrapper img {
177
+ max-width: 100%;
178
+ min-height: 100px;
179
+ display: block;
180
+ -o-object-fit: cover;
181
+ object-fit: cover;
182
+ }
183
+ .milkdown .milkdown-image-block > .image-wrapper > .image-resize-handle {
184
+ position: absolute;
185
+ left: 50%;
186
+ transform: translateX(-50%);
187
+ }
188
+ .milkdown .milkdown-image-block > .image-wrapper > .image-resize-handle:hover {
189
+ cursor: row-resize;
190
+ }
191
+ .milkdown .milkdown-image-block input {
192
+ background: transparent;
193
+ outline: none;
194
+ border: 0;
195
+ caret-color: var(--crepe-color-outline);
196
+ }
197
+ .milkdown .milkdown-image-block > .caption-input {
198
+ display: block;
199
+ width: 100%;
200
+ text-align: center;
201
+ color: var(--crepe-color-on-background);
202
+ }
203
+ .milkdown .milkdown-image-block > .image-edit {
204
+ display: flex;
205
+ }
206
+ .milkdown .milkdown-image-block > .image-edit .confirm {
207
+ cursor: pointer;
208
+ }
209
+ .milkdown .milkdown-image-block > .image-edit .link-importer {
210
+ position: relative;
211
+ flex: 1;
212
+ }
213
+ .milkdown .milkdown-image-block > .image-edit .link-importer > .link-input-area {
214
+ width: 100%;
215
+ }
216
+ .milkdown .milkdown-image-block > .image-edit .link-importer .placeholder {
217
+ position: absolute;
218
+ top: 0;
219
+ left: 0;
220
+ bottom: 0;
221
+ display: flex;
222
+ align-items: center;
223
+ cursor: text;
224
+ }
225
+ .milkdown .milkdown-image-block > .image-edit .link-importer .placeholder .uploader {
226
+ cursor: pointer;
227
+ display: flex;
228
+ }
229
+ .milkdown .milkdown-image-block .hidden {
230
+ display: none !important;
231
+ }
232
+ .milkdown .milkdown-image-block.selected > .image-edit:not(:has(input:focus)) {
233
+ position: relative;
234
+ }
235
+ .milkdown .milkdown-image-block.selected > .image-edit:not(:has(input:focus))::before {
236
+ content: '';
237
+ position: absolute;
238
+ top: 0;
239
+ left: 0;
240
+ right: 0;
241
+ bottom: 0;
242
+ background: color-mix(
243
+ in srgb,
244
+ var(--crepe-color-selected),
245
+ transparent 60%
246
+ );
247
+ pointer-events: none;
248
+ }
249
+ .milkdown .milkdown-image-block.selected > .image-wrapper {
250
+ position: relative;
251
+ }
252
+ .milkdown .milkdown-image-block.selected > .image-wrapper::before {
253
+ content: '';
254
+ position: absolute;
255
+ top: 0;
256
+ left: 0;
257
+ right: 0;
258
+ bottom: 0;
259
+ background: color-mix(
260
+ in srgb,
261
+ var(--crepe-color-selected),
262
+ transparent 60%
263
+ );
264
+ }
265
+ .milkdown .milkdown-image-block.selected :not(input)::-moz-selection {
266
+ background: transparent;
267
+ }
268
+ .milkdown .milkdown-image-block.selected :not(input)::selection {
269
+ background: transparent;
270
+ }
271
+ .milkdown .milkdown-image-block .image-wrapper {
272
+ display: flex;
273
+ justify-content: center;
274
+ align-items: center;
275
+ }
276
+ .milkdown .milkdown-image-block .image-wrapper .operation {
277
+ gap: 12px;
278
+ right: 12px;
279
+ top: 12px;
280
+ opacity: 0;
281
+ transition: all 0.2s;
282
+ }
283
+ .milkdown .milkdown-image-block:hover > .image-wrapper .operation {
284
+ opacity: 1;
285
+ }
286
+ .milkdown .milkdown-image-block .image-wrapper .operation > .operation-item {
287
+ color: var(--crepe-color-on-inverse);
288
+ padding: 4px;
289
+ background: var(--crepe-color-inverse);
290
+ opacity: 0.6;
291
+ border-radius: 50%;
292
+ width: 32px;
293
+ height: 32px;
294
+ }
295
+ .milkdown .milkdown-image-block .image-wrapper .operation > .operation-item svg {
296
+ width: 24px;
297
+ height: 24px;
298
+ }
299
+ .milkdown .milkdown-image-block .image-wrapper .image-resize-handle {
300
+ height: 4px;
301
+ bottom: -2px;
302
+ max-width: 160px;
303
+ width: 100%;
304
+ background: var(--crepe-color-outline);
305
+ opacity: 0;
306
+ transition: all 0.2s;
307
+ border-radius: 4px;
308
+ }
309
+ .milkdown .milkdown-image-block:hover > .image-wrapper .image-resize-handle {
310
+ opacity: 1;
311
+ }
312
+ .milkdown .milkdown-image-block .caption-input {
313
+ margin: 4px auto;
314
+ font-family: var(--crepe-font-default);
315
+ }
316
+ .milkdown .milkdown-image-block .image-edit {
317
+ align-items: center;
318
+ padding: 16px 24px;
319
+ gap: 16px;
320
+ background: var(--crepe-color-surface);
321
+ height: 56px;
322
+ }
323
+ .milkdown .milkdown-image-block .image-edit .image-icon {
324
+ color: var(--crepe-color-outline);
325
+ }
326
+ .milkdown .milkdown-image-block .image-edit .image-icon svg {
327
+ width: 24px;
328
+ height: 24px;
329
+ display: flex;
330
+ justify-content: center;
331
+ align-items: center;
332
+ fill: var(--crepe-color-outline);
333
+ }
334
+ .milkdown .milkdown-image-block .image-edit .link-importer .placeholder {
335
+ color: color-mix(
336
+ in srgb,
337
+ var(--crepe-color-on-background),
338
+ transparent 60%
339
+ );
340
+ }
341
+ .milkdown .milkdown-image-block .image-edit .link-importer .placeholder :not(input)::-moz-selection {
342
+ background: transparent;
343
+ }
344
+ .milkdown .milkdown-image-block .image-edit .link-importer .placeholder :not(input)::selection {
345
+ background: transparent;
346
+ }
347
+ .milkdown .milkdown-image-block .image-edit .link-importer .link-input-area {
348
+ line-height: 24px;
349
+ color: var(--crepe-color-on-background);
350
+ }
351
+ .milkdown .milkdown-image-block .image-edit .link-importer .placeholder .uploader {
352
+ gap: 8px;
353
+ color: var(--crepe-color-primary);
354
+ justify-content: center;
355
+ transition: color 0.2s;
356
+ font-weight: 600;
357
+ }
358
+ .milkdown .milkdown-image-block .image-edit .link-importer.focus .placeholder .uploader {
359
+ color: unset;
360
+ }
361
+ .milkdown .milkdown-image-block .image-edit .link-importer .placeholder .uploader:hover {
362
+ color: var(--crepe-color-primary);
363
+ }
364
+ .milkdown .milkdown-image-block .image-edit .link-importer .placeholder .text {
365
+ margin-left: 8px;
366
+ }
367
+ .milkdown .milkdown-image-block .image-edit .confirm {
368
+ background: var(--crepe-color-secondary);
369
+ color: var(--crepe-color-on-secondary);
370
+ line-height: 40px;
371
+ padding: 0 24px;
372
+ border-radius: 100px;
373
+ font-size: 14px;
374
+ font-weight: 600;
375
+ }
376
+ .milkdown .milkdown-image-block .image-edit .confirm:hover {
377
+ background:
378
+ linear-gradient(
379
+ 0deg,
380
+ rgba(29, 25, 43, 0.08) 0%,
381
+ rgba(29, 25, 43, 0.08) 100%
382
+ ),
383
+ var(--crepe-color-secondary);
384
+ }
package/assets/milkdown/theme/common/latex.css ADDED
@@ -0,0 +1,44 @@
1
+ @import 'katex/dist/katex.min.css';
2
+
3
+ .milkdown span[data-type='math_inline'] {
4
+ padding: 0 4px;
5
+ display: inline-block;
6
+ vertical-align: bottom;
7
+ color: var(--crepe-color-primary);
8
+ }
9
+
10
+ .milkdown .milkdown-latex-inline-edit[data-show='false'] {
11
+ display: none;
12
+ }
13
+
14
+ .milkdown .milkdown-latex-inline-edit{
15
+ position: absolute;
16
+ background: var(--crepe-color-surface);
17
+ box-shadow: var(--crepe-shadow-1);
18
+ border-radius: 8px;
19
+ padding: 2px 6px 2px 12px;
20
+ }
21
+
22
+ .milkdown .milkdown-latex-inline-edit .container {
23
+ display: flex;
24
+ gap: 6px;
25
+ align-items: flex-start;
26
+ }
27
+
28
+ .milkdown .milkdown-latex-inline-edit .container button {
29
+ width: 24px;
30
+ height: 24px;
31
+ cursor: pointer;
32
+ border-radius: 8px;
33
+ }
34
+
35
+ .milkdown .milkdown-latex-inline-edit .container button:hover {
36
+ background: var(--crepe-color-hover);
37
+ }
38
+
39
+ .milkdown .milkdown-latex-inline-edit .ProseMirror {
40
+ padding: 0;
41
+ min-width: 174px;
42
+ max-width: 294px;
43
+ font-family: var(--crepe-font-code);
44
+ }
package/assets/milkdown/theme/common/link-tooltip.css ADDED
@@ -0,0 +1,107 @@
1
+ .milkdown .milkdown-link-preview {
2
+ position: absolute;
3
+ z-index: 10;
4
+ }
5
+ .milkdown .milkdown-link-preview[data-show='false'] {
6
+ display: none;
7
+ }
8
+ .milkdown .milkdown-link-preview > .link-preview {
9
+ height: 32px;
10
+ display: flex;
11
+ justify-content: center;
12
+ padding: 4px 10px;
13
+ background: var(--crepe-color-surface);
14
+ gap: 10px;
15
+ border-radius: 8px;
16
+ cursor: pointer;
17
+ box-shadow: var(--crepe-shadow-1);
18
+ }
19
+ .milkdown .milkdown-link-preview > .link-preview > .link-display {
20
+ text-decoration: none;
21
+ color: unset;
22
+ }
23
+ .milkdown .milkdown-link-preview > .link-preview > .link-display:hover:before {
24
+ display: block;
25
+ }
26
+ .milkdown .milkdown-link-preview > .link-preview > .link-icon > svg {
27
+ width: 18px;
28
+ height: 18px;
29
+ color: var(--crepe-color-outline);
30
+ fill: var(--crepe-color-outline);
31
+ }
32
+ .milkdown .milkdown-link-preview > .link-preview > .link-icon {
33
+ border-radius: 8px;
34
+ padding: 3px;
35
+ line-height: 24px;
36
+ }
37
+ .milkdown .milkdown-link-preview > .link-preview > .link-icon:hover {
38
+ background: var(--crepe-color-hover);
39
+ }
40
+ .milkdown .milkdown-link-preview > .link-preview > .link-display {
41
+ width: 240px;
42
+ line-height: 24px;
43
+ overflow: hidden;
44
+ text-overflow: ellipsis;
45
+ font-size: 14px;
46
+ white-space: nowrap;
47
+ }
48
+ .milkdown .milkdown-link-preview > .link-preview > .link-display:hover {
49
+ text-decoration: underline;
50
+ }
51
+ .milkdown .milkdown-link-preview > .link-preview > .button > svg {
52
+ width: 18px;
53
+ height: 18px;
54
+ color: var(--crepe-color-outline);
55
+ fill: var(--crepe-color-outline);
56
+ }
57
+ .milkdown .milkdown-link-preview > .link-preview > .button {
58
+ padding: 3px;
59
+ border-radius: 8px;
60
+ line-height: 24px;
61
+ }
62
+ .milkdown .milkdown-link-preview > .link-preview > .button:hover {
63
+ background: var(--crepe-color-hover);
64
+ }
65
+ .milkdown .milkdown-link-edit {
66
+ position: absolute;
67
+ z-index: 10;
68
+ }
69
+ .milkdown .milkdown-link-edit[data-show='false'] {
70
+ display: none;
71
+ }
72
+ .milkdown .milkdown-link-edit > .link-edit {
73
+ height: 32px;
74
+ display: flex;
75
+ justify-content: center;
76
+ padding: 4px 10px 4px 20px;
77
+ background: var(--crepe-color-surface);
78
+ gap: 8px;
79
+ border-radius: 8px;
80
+ box-shadow: var(--crepe-shadow-1);
81
+ }
82
+ .milkdown .milkdown-link-edit > .link-edit > .input-area {
83
+ outline: none;
84
+ background: transparent;
85
+ width: 200px;
86
+ font-size: 14px;
87
+ color: var(--crepe-color-on-background);
88
+ }
89
+ .milkdown .milkdown-link-edit > .link-edit > .button > svg {
90
+ width: 18px;
91
+ height: 18px;
92
+ color: var(--crepe-color-outline);
93
+ fill: var(--crepe-color-outline);
94
+ }
95
+ .milkdown .milkdown-link-edit > .link-edit > .button {
96
+ padding: 3px;
97
+ cursor: pointer;
98
+ border-radius: 8px;
99
+ font-size: 12px;
100
+ line-height: 24px;
101
+ }
102
+ .milkdown .milkdown-link-edit > .link-edit > .button:hover {
103
+ background: var(--crepe-color-hover);
104
+ }
105
+ .milkdown .milkdown-link-edit > .link-edit > .button.hidden {
106
+ visibility: hidden;
107
+ }
package/assets/milkdown/theme/common/list-item.css ADDED
@@ -0,0 +1,50 @@
1
+ .milkdown .milkdown-list-item-block {
2
+ display: block;
3
+ padding: 0;
4
+ }
5
+
6
+ .milkdown .milkdown-list-item-block > .list-item {
7
+ display: flex;
8
+ align-items: flex-start;
9
+ }
10
+
11
+ .milkdown .milkdown-list-item-block > .list-item > .children {
12
+ min-width: 0;
13
+ flex: 1;
14
+ }
15
+
16
+ .milkdown .milkdown-list-item-block li {
17
+ gap: 10px;
18
+ }
19
+
20
+ .milkdown .milkdown-list-item-block li .label-wrapper {
21
+ color: var(--crepe-color-outline);
22
+ }
23
+
24
+ .milkdown .milkdown-list-item-block li .label-wrapper svg {
25
+ fill: var(--crepe-color-outline);
26
+ }
27
+
28
+ .milkdown .milkdown-list-item-block li .label-wrapper {
29
+ height: 32px;
30
+ width: 24px;
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ }
35
+
36
+ .milkdown .milkdown-list-item-block li .label-wrapper .label {
37
+ height: 32px;
38
+ padding: 4px 0;
39
+ width: 24px;
40
+ text-align: right;
41
+ }
42
+
43
+ .milkdown .milkdown-list-item-block li .label-wrapper .checked,
44
+ .milkdown .milkdown-list-item-block li .label-wrapper .unchecked {
45
+ cursor: pointer;
46
+ }
47
+
48
+ .milkdown .milkdown-list-item-block li .label-wrapper .readonly {
49
+ cursor: not-allowed;
50
+ }
package/assets/milkdown/theme/common/placeholder.css ADDED
@@ -0,0 +1,11 @@
1
+ .milkdown .crepe-placeholder::before {
2
+ position: absolute;
3
+ color: color-mix(
4
+ in srgb,
5
+ var(--crepe-color-on-background),
6
+ transparent 60%
7
+ );
8
+ pointer-events: none;
9
+ height: 0;
10
+ content: attr(data-placeholder);
11
+ }