@mp-lb/mdkit 0.2.5 → 0.3.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 (30) hide show
  1. package/README.md +1 -0
  2. package/dist/document/useMdKitDocument.js +1 -1
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +1 -0
  5. package/dist/markdown/MarkdownBubbleMenu.js +4 -2
  6. package/dist/markdown/MarkdownPasteExtension.d.ts +3 -0
  7. package/dist/markdown/MarkdownPasteExtension.js +62 -0
  8. package/dist/markdown/MarkdownSearchExtension.d.ts +9 -0
  9. package/dist/markdown/MarkdownSearchExtension.js +42 -0
  10. package/dist/markdown/MarkdownSearchPanel.d.ts +13 -0
  11. package/dist/markdown/MarkdownSearchPanel.js +25 -0
  12. package/dist/markdown/MdKitEditor.d.ts +2 -0
  13. package/dist/markdown/MdKitView.d.ts +2 -1
  14. package/dist/markdown/MdKitView.js +6 -2
  15. package/dist/markdown/TiptapMarkdownSurface.d.ts +4 -0
  16. package/dist/markdown/TiptapMarkdownSurface.js +168 -7
  17. package/dist/markdown/createMdKitTiptapExtensions.js +5 -1
  18. package/dist/markdown/yamlFrontMatter.d.ts +16 -0
  19. package/dist/markdown/yamlFrontMatter.js +88 -0
  20. package/dist/theme/editorTheme.js +4 -4
  21. package/dist/yjs/MdKitMarkdownYjs.d.ts +1 -0
  22. package/dist/yjs/MdKitMarkdownYjs.js +23 -4
  23. package/docs/.vitepress/config.ts +2 -0
  24. package/docs/api.md +6 -0
  25. package/docs/index.md +5 -1
  26. package/docs/plain-text.md +131 -0
  27. package/docs/shadcn.md +5 -1
  28. package/docs/styling.md +6 -1
  29. package/package.json +2 -1
  30. package/src/styles.css +230 -13
package/src/styles.css CHANGED
@@ -19,18 +19,38 @@
19
19
  --mp-lb-mdkit-muted: var(--muted, #f3f4f6);
20
20
  --mp-lb-mdkit-muted-foreground: var(--muted-foreground, #6b7280);
21
21
  --mp-lb-mdkit-border: var(--border, #e5e7eb);
22
+ --mp-lb-mdkit-input: var(--input, var(--mp-lb-mdkit-border));
23
+ --mp-lb-mdkit-input-background: color-mix(
24
+ in srgb,
25
+ var(--mp-lb-mdkit-input) 30%,
26
+ transparent
27
+ );
28
+ --mp-lb-mdkit-input-background-hover: color-mix(
29
+ in srgb,
30
+ var(--mp-lb-mdkit-input) 50%,
31
+ transparent
32
+ );
33
+ --mp-lb-mdkit-popover: var(--popover, var(--mp-lb-mdkit-background));
34
+ --mp-lb-mdkit-popover-foreground: var(
35
+ --popover-foreground,
36
+ var(--mp-lb-mdkit-foreground)
37
+ );
38
+ --mp-lb-mdkit-ring: var(--ring, #94a3b8);
22
39
  --mp-lb-mdkit-accent: var(--primary, #111827);
23
40
  --mp-lb-mdkit-accent-foreground: var(--primary-foreground, #ffffff);
24
41
  --mp-lb-mdkit-link: #4f46e5;
25
42
  --mp-lb-mdkit-font-family: inherit;
26
43
  --mp-lb-mdkit-font-size: 1rem;
27
- --mp-lb-mdkit-line-height: 1.7;
44
+ --mp-lb-mdkit-line-height: 1.55;
28
45
  --mp-lb-mdkit-surface-padding: 1rem;
29
- --mp-lb-mdkit-block-gap: 0.75rem;
46
+ --mp-lb-mdkit-block-gap: 0.72em;
47
+ --mp-lb-mdkit-tight-gap: 0.35em;
48
+ --mp-lb-mdkit-section-gap: 1.25em;
30
49
  --mp-lb-mdkit-list-item-gap: 0.125rem;
31
50
  --mp-lb-mdkit-heading-font-weight: 650;
32
51
  --mp-lb-mdkit-heading-1-size: 1.5rem;
33
52
  --mp-lb-mdkit-heading-2-size: 1.25rem;
53
+ --mp-lb-mdkit-heading-3-size: 1.125rem;
34
54
  --mp-lb-mdkit-code-background: var(--mp-lb-mdkit-muted);
35
55
  --mp-lb-mdkit-code-radius: 0.35rem;
36
56
  --mp-lb-mdkit-code-block-radius: 0.75rem;
@@ -108,6 +128,7 @@
108
128
  }
109
129
 
110
130
  .mp-lb-mdkit-editor-surface {
131
+ position: relative;
111
132
  width: 100%;
112
133
  min-height: 0;
113
134
  overflow: visible;
@@ -115,6 +136,168 @@
115
136
  padding: var(--mp-lb-mdkit-surface-padding);
116
137
  }
117
138
 
139
+ .mp-lb-mdkit-search-panel {
140
+ position: sticky;
141
+ z-index: 5;
142
+ top: 0.5rem;
143
+ margin: calc(var(--mp-lb-mdkit-surface-padding) * -0.5) 0
144
+ var(--mp-lb-mdkit-block-gap) auto;
145
+ width: min(100%, 27rem);
146
+ min-height: 2.75rem;
147
+ display: flex;
148
+ align-items: center;
149
+ gap: 0.375rem;
150
+ border: 0;
151
+ border-radius: var(--radius-xl, 0.875rem);
152
+ background: var(--mp-lb-mdkit-popover);
153
+ box-shadow:
154
+ 0 1px 2px rgb(15 23 42 / 6%),
155
+ 0 0.5rem 1.25rem rgb(15 23 42 / 10%);
156
+ color: var(--mp-lb-mdkit-popover-foreground);
157
+ padding: 0.375rem;
158
+ }
159
+
160
+ .mp-lb-mdkit-search-icon {
161
+ width: 1rem;
162
+ height: 1rem;
163
+ flex: 0 0 auto;
164
+ color: var(--mp-lb-mdkit-muted-foreground);
165
+ margin-left: 0.5rem;
166
+ }
167
+
168
+ .mp-lb-mdkit-search-input {
169
+ height: 2rem;
170
+ min-width: 0;
171
+ flex: 1 1 auto;
172
+ border: 0;
173
+ border-radius: var(--radius-md, 0.5rem);
174
+ background: var(--mp-lb-mdkit-input-background);
175
+ color: inherit;
176
+ font: inherit;
177
+ font-size: 0.875rem;
178
+ line-height: 1.25rem;
179
+ outline: none;
180
+ padding: 0 0.5rem;
181
+ transition:
182
+ background-color 120ms ease,
183
+ box-shadow 120ms ease;
184
+ }
185
+
186
+ .mp-lb-mdkit-markdown-editor .mp-lb-mdkit-search-input {
187
+ border-color: transparent;
188
+ border-style: solid;
189
+ border-width: 0;
190
+ box-shadow: none;
191
+ outline: none;
192
+ }
193
+
194
+ .mp-lb-mdkit-search-input::placeholder {
195
+ color: var(--mp-lb-mdkit-muted-foreground);
196
+ }
197
+
198
+ .mp-lb-mdkit-search-input:focus {
199
+ outline: none;
200
+ background: var(--mp-lb-mdkit-input-background-hover);
201
+ }
202
+
203
+ .mp-lb-mdkit-markdown-editor .mp-lb-mdkit-search-input:focus,
204
+ .mp-lb-mdkit-markdown-editor .mp-lb-mdkit-search-input:focus-visible {
205
+ border-color: transparent;
206
+ border-width: 0;
207
+ box-shadow: none;
208
+ outline: none;
209
+ }
210
+
211
+ .mp-lb-mdkit-search-input::-webkit-search-cancel-button {
212
+ appearance: none;
213
+ width: 1rem;
214
+ height: 1rem;
215
+ background-color: var(--mp-lb-mdkit-muted-foreground);
216
+ cursor: pointer;
217
+ opacity: 0.75;
218
+ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4.22 3.28a.75.75 0 0 0-.94.94L7.06 8l-3.78 3.78a.75.75 0 1 0 .94.94L8 8.94l3.78 3.78a.75.75 0 1 0 .94-.94L8.94 8l3.78-3.78a.75.75 0 1 0-.94-.94L8 7.06 4.22 3.28Z'/%3E%3C/svg%3E")
219
+ center / 1rem 1rem no-repeat;
220
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4.22 3.28a.75.75 0 0 0-.94.94L7.06 8l-3.78 3.78a.75.75 0 1 0 .94.94L8 8.94l3.78 3.78a.75.75 0 1 0 .94-.94L8.94 8l3.78-3.78a.75.75 0 1 0-.94-.94L8 7.06 4.22 3.28Z'/%3E%3C/svg%3E")
221
+ center / 1rem 1rem no-repeat;
222
+ }
223
+
224
+ .mp-lb-mdkit-search-input::-webkit-search-cancel-button:hover {
225
+ opacity: 1;
226
+ }
227
+
228
+ .mp-lb-mdkit-search-status {
229
+ flex: 0 0 auto;
230
+ color: var(--mp-lb-mdkit-muted-foreground);
231
+ font-size: 0.75rem;
232
+ line-height: 1rem;
233
+ padding: 0 0.375rem;
234
+ white-space: nowrap;
235
+ }
236
+
237
+ .mp-lb-mdkit-search-button {
238
+ width: 2rem;
239
+ height: 2rem;
240
+ display: inline-flex;
241
+ align-items: center;
242
+ justify-content: center;
243
+ flex: 0 0 auto;
244
+ border: 0;
245
+ border-radius: var(--radius-4xl, 999px);
246
+ background: transparent;
247
+ color: var(--mp-lb-mdkit-muted-foreground);
248
+ cursor: pointer;
249
+ padding: 0;
250
+ transition:
251
+ background-color 120ms ease,
252
+ color 120ms ease,
253
+ box-shadow 120ms ease;
254
+ }
255
+
256
+ .mp-lb-mdkit-search-button:hover:not(:disabled),
257
+ .mp-lb-mdkit-search-button:focus-visible {
258
+ background: var(--mp-lb-mdkit-input-background-hover);
259
+ color: var(--mp-lb-mdkit-foreground);
260
+ }
261
+
262
+ .mp-lb-mdkit-search-button:focus-visible {
263
+ outline: none;
264
+ box-shadow: 0 0 0 3px
265
+ color-mix(in srgb, var(--mp-lb-mdkit-ring) 50%, transparent);
266
+ }
267
+
268
+ .mp-lb-mdkit-search-button:disabled {
269
+ cursor: default;
270
+ opacity: 0.45;
271
+ }
272
+
273
+ .mp-lb-mdkit-search-button svg {
274
+ width: 1rem;
275
+ height: 1rem;
276
+ }
277
+
278
+ .mp-lb-mdkit-search-match {
279
+ border-radius: 0;
280
+ background: transparent;
281
+ box-shadow: inset 0 -3px 0 #3b82f6;
282
+ }
283
+
284
+ .mp-lb-mdkit-search-match-active {
285
+ background: transparent;
286
+ box-shadow: inset 0 -3px 0 #2563eb;
287
+ }
288
+
289
+ @media (max-width: 42rem) {
290
+ .mp-lb-mdkit-search-panel {
291
+ width: 100%;
292
+ }
293
+
294
+ .mp-lb-mdkit-search-status {
295
+ max-width: 5.75rem;
296
+ overflow: hidden;
297
+ text-overflow: ellipsis;
298
+ }
299
+ }
300
+
118
301
  .mp-lb-mdkit-markdown-editor-fill-height .mp-lb-mdkit-editor-surface {
119
302
  display: flex;
120
303
  overflow: auto;
@@ -162,34 +345,68 @@
162
345
  flex: 0 0 auto;
163
346
  }
164
347
 
348
+ .mp-lb-mdkit-tiptap
349
+ :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, table) {
350
+ margin: 0;
351
+ }
352
+
165
353
  .mp-lb-mdkit-tiptap > * + * {
166
354
  margin-top: var(--mp-lb-mdkit-block-gap);
167
355
  }
168
356
 
357
+ .mp-lb-mdkit-tiptap h1,
358
+ .mp-lb-mdkit-tiptap h2,
359
+ .mp-lb-mdkit-tiptap h3,
360
+ .mp-lb-mdkit-tiptap h4,
361
+ .mp-lb-mdkit-tiptap h5,
362
+ .mp-lb-mdkit-tiptap h6 {
363
+ font-weight: var(--mp-lb-mdkit-heading-font-weight);
364
+ }
365
+
169
366
  .mp-lb-mdkit-tiptap h1 {
170
- margin: 0 0 var(--mp-lb-mdkit-block-gap);
171
367
  font-size: var(--mp-lb-mdkit-heading-1-size);
172
- font-weight: var(--mp-lb-mdkit-heading-font-weight);
173
368
  line-height: 1.25;
174
369
  }
175
370
 
176
371
  .mp-lb-mdkit-tiptap h2 {
177
- margin: 0 0 var(--mp-lb-mdkit-block-gap);
178
372
  font-size: var(--mp-lb-mdkit-heading-2-size);
179
- font-weight: var(--mp-lb-mdkit-heading-font-weight);
180
373
  line-height: 1.3;
181
374
  }
182
375
 
183
- .mp-lb-mdkit-tiptap p {
184
- margin: 0 0 var(--mp-lb-mdkit-block-gap);
376
+ .mp-lb-mdkit-tiptap h3,
377
+ .mp-lb-mdkit-tiptap h4,
378
+ .mp-lb-mdkit-tiptap h5,
379
+ .mp-lb-mdkit-tiptap h6 {
380
+ font-size: var(--mp-lb-mdkit-heading-3-size);
381
+ line-height: 1.35;
185
382
  }
186
383
 
187
384
  .mp-lb-mdkit-tiptap ul,
188
385
  .mp-lb-mdkit-tiptap ol {
189
- margin: 0 0 var(--mp-lb-mdkit-block-gap);
386
+ margin: 0;
190
387
  padding-left: 1.5rem;
191
388
  }
192
389
 
390
+ .mp-lb-mdkit-tiptap
391
+ > :is(h1, h2, h3)
392
+ + :is(p, ul, ol, blockquote, pre, table) {
393
+ margin-top: var(--mp-lb-mdkit-tight-gap);
394
+ }
395
+
396
+ .mp-lb-mdkit-tiptap > p + p {
397
+ margin-top: var(--mp-lb-mdkit-block-gap);
398
+ }
399
+
400
+ .mp-lb-mdkit-tiptap > :is(p, ul, ol) + :is(ul, ol, p) {
401
+ margin-top: var(--mp-lb-mdkit-tight-gap);
402
+ }
403
+
404
+ .mp-lb-mdkit-tiptap
405
+ > :is(p, ul, ol, blockquote, pre, table, hr)
406
+ + :is(h1, h2, h3) {
407
+ margin-top: var(--mp-lb-mdkit-section-gap);
408
+ }
409
+
193
410
  .mp-lb-mdkit-tiptap ul {
194
411
  list-style: disc;
195
412
  list-style-position: outside;
@@ -220,7 +437,7 @@
220
437
  }
221
438
 
222
439
  .mp-lb-mdkit-tiptap pre {
223
- margin: 0 0 var(--mp-lb-mdkit-block-gap);
440
+ margin: 0;
224
441
  padding: 0.75rem 0.875rem;
225
442
  overflow-x: auto;
226
443
  border: 1px solid var(--mp-lb-mdkit-border);
@@ -242,7 +459,7 @@
242
459
  }
243
460
 
244
461
  .mp-lb-mdkit-tiptap blockquote {
245
- margin: 0 0 var(--mp-lb-mdkit-block-gap);
462
+ margin: 0;
246
463
  padding-left: 0.875rem;
247
464
  border-left: 3px solid var(--mp-lb-mdkit-quote-border-color);
248
465
  color: var(--mp-lb-mdkit-muted-foreground);
@@ -252,7 +469,7 @@
252
469
  height: 1px;
253
470
  border: 0;
254
471
  background: var(--mp-lb-mdkit-border);
255
- margin: var(--mp-lb-mdkit-block-gap) 0;
472
+ margin: var(--mp-lb-mdkit-section-gap) 0;
256
473
  }
257
474
 
258
475
  .mp-lb-mdkit-tiptap img {
@@ -263,7 +480,7 @@
263
480
  .mp-lb-mdkit-tiptap table {
264
481
  width: 100%;
265
482
  border-collapse: collapse;
266
- margin: 0 0 var(--mp-lb-mdkit-block-gap);
483
+ margin: 0;
267
484
  }
268
485
 
269
486
  .mp-lb-mdkit-tiptap th,