@teriusu/rich-editor 0.5.3 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +43 -10
- package/dist/components/BubbleToolbar.svelte +26 -16
- package/dist/components/BubbleToolbar.svelte.d.ts +2 -1
- package/dist/components/BubbleToolbar.svelte.d.ts.map +1 -1
- package/dist/components/FixedToolbar.svelte +100 -77
- package/dist/components/FixedToolbar.svelte.d.ts +3 -1
- package/dist/components/FixedToolbar.svelte.d.ts.map +1 -1
- package/dist/components/InputModal.svelte +19 -16
- package/dist/components/InputModal.svelte.d.ts.map +1 -1
- package/dist/components/SlashCommandMenu.svelte +165 -38
- package/dist/components/SlashCommandMenu.svelte.d.ts +3 -1
- package/dist/components/SlashCommandMenu.svelte.d.ts.map +1 -1
- package/dist/components/TableBubbleMenu.svelte +16 -16
- package/dist/components/TipTapEditor.svelte +12 -2
- package/dist/components/TipTapEditor.svelte.d.ts +3 -1
- package/dist/components/TipTapEditor.svelte.d.ts.map +1 -1
- package/dist/styles/editor.css +1 -1
- package/dist/types.d.ts +10 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +2 -2
- package/package.json +2 -2
|
@@ -21,11 +21,35 @@
|
|
|
21
21
|
Columns2,
|
|
22
22
|
Columns3,
|
|
23
23
|
} from "lucide-svelte";
|
|
24
|
-
import type { SlashMenuItem, ToolbarFeature } from "../types";
|
|
24
|
+
import type { SlashMenuItem, ToolbarFeature, PromptHandler } from "../types";
|
|
25
25
|
import type { Component } from "svelte";
|
|
26
26
|
|
|
27
27
|
const SI = 14;
|
|
28
28
|
|
|
29
|
+
/** 각 feature가 속하는 섹션 라벨 */
|
|
30
|
+
const SECTION_MAP: Record<string, string> = {
|
|
31
|
+
h1: "기본",
|
|
32
|
+
h2: "기본",
|
|
33
|
+
h3: "기본",
|
|
34
|
+
"bullet-list": "리스트",
|
|
35
|
+
"ordered-list": "리스트",
|
|
36
|
+
checklist: "리스트",
|
|
37
|
+
toggle: "리스트",
|
|
38
|
+
blockquote: "블록",
|
|
39
|
+
"horizontal-rule": "블록",
|
|
40
|
+
"code-block": "블록",
|
|
41
|
+
table: "레이아웃",
|
|
42
|
+
"columns-2": "레이아웃",
|
|
43
|
+
"columns-3": "레이아웃",
|
|
44
|
+
link: "미디어",
|
|
45
|
+
image: "미디어",
|
|
46
|
+
youtube: "미디어",
|
|
47
|
+
pdf: "미디어",
|
|
48
|
+
video: "미디어",
|
|
49
|
+
file: "미디어",
|
|
50
|
+
};
|
|
51
|
+
const SECTION_ORDER = ["기본", "리스트", "블록", "레이아웃", "미디어"];
|
|
52
|
+
|
|
29
53
|
const SLASH_MENU_ITEMS_DATA: {
|
|
30
54
|
feature: ToolbarFeature;
|
|
31
55
|
label: string;
|
|
@@ -187,6 +211,8 @@
|
|
|
187
211
|
onPdfUpload,
|
|
188
212
|
onFileUpload,
|
|
189
213
|
onVideoUpload,
|
|
214
|
+
onPromptLink,
|
|
215
|
+
onPromptImage,
|
|
190
216
|
}: {
|
|
191
217
|
editor: Editor;
|
|
192
218
|
features: Set<ToolbarFeature>;
|
|
@@ -195,8 +221,30 @@
|
|
|
195
221
|
onPdfUpload?: () => void;
|
|
196
222
|
onFileUpload?: () => void;
|
|
197
223
|
onVideoUpload?: () => void;
|
|
224
|
+
onPromptLink?: PromptHandler;
|
|
225
|
+
onPromptImage?: PromptHandler;
|
|
198
226
|
} = $props();
|
|
199
227
|
|
|
228
|
+
async function runItem(item: (typeof SLASH_MENU_ITEMS_DATA)[number]) {
|
|
229
|
+
if (item.feature === "link" && onPromptLink) {
|
|
230
|
+
const url = await onPromptLink("");
|
|
231
|
+
if (url)
|
|
232
|
+
editor
|
|
233
|
+
.chain()
|
|
234
|
+
.focus()
|
|
235
|
+
.extendMarkRange("link")
|
|
236
|
+
.setLink({ href: url })
|
|
237
|
+
.run();
|
|
238
|
+
return;
|
|
239
|
+
}
|
|
240
|
+
if (item.feature === "image" && onPromptImage) {
|
|
241
|
+
const url = await onPromptImage("");
|
|
242
|
+
if (url) editor.chain().focus().setImage({ src: url }).run();
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
item.command(editor);
|
|
246
|
+
}
|
|
247
|
+
|
|
200
248
|
let selectedIndex = $state(0);
|
|
201
249
|
let menuEl: HTMLDivElement | undefined = $state();
|
|
202
250
|
let mouseMovedSinceKeyboard = $state(true);
|
|
@@ -274,8 +322,9 @@
|
|
|
274
322
|
} else if (e.key === "Enter") {
|
|
275
323
|
e.preventDefault();
|
|
276
324
|
if (filtered[selectedIndex]) {
|
|
325
|
+
const item = filtered[selectedIndex];
|
|
277
326
|
onClose();
|
|
278
|
-
|
|
327
|
+
runItem(item);
|
|
279
328
|
}
|
|
280
329
|
} else if (e.key === "Escape") {
|
|
281
330
|
e.preventDefault();
|
|
@@ -290,49 +339,127 @@
|
|
|
290
339
|
{#if filtered.length === 0}
|
|
291
340
|
<div
|
|
292
341
|
bind:this={menuEl}
|
|
293
|
-
class="z-50 bg-popover border border-border rounded-
|
|
294
|
-
style="width: 180px"
|
|
342
|
+
class="slash-menu z-50 bg-popover border border-border rounded-xl shadow-xl p-2"
|
|
295
343
|
>
|
|
296
344
|
<p class="text-xs text-muted-foreground px-2 py-1">결과 없음</p>
|
|
297
345
|
</div>
|
|
298
346
|
{:else}
|
|
299
347
|
<div
|
|
300
348
|
bind:this={menuEl}
|
|
301
|
-
class="z-50 bg-popover border border-border rounded-
|
|
302
|
-
style="width: 180px; max-height: 200px"
|
|
349
|
+
class="slash-menu z-50 bg-popover border border-border rounded-xl shadow-xl overflow-y-auto py-1.5"
|
|
303
350
|
>
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
</button>
|
|
351
|
+
{#each SECTION_ORDER as section}
|
|
352
|
+
{@const sectionItems = filtered.filter(
|
|
353
|
+
(it) => (SECTION_MAP[it.feature] ?? '기본') === section,
|
|
354
|
+
)}
|
|
355
|
+
{#if sectionItems.length > 0}
|
|
356
|
+
<p class="slash-section">{section}</p>
|
|
357
|
+
{#each sectionItems as item}
|
|
358
|
+
{@const i = filtered.indexOf(item)}
|
|
359
|
+
<button
|
|
360
|
+
type="button"
|
|
361
|
+
data-index={i}
|
|
362
|
+
class="slash-item {i === selectedIndex ? 'is-selected' : ''}"
|
|
363
|
+
onmousemove={() => {
|
|
364
|
+
if (!mouseMovedSinceKeyboard) {
|
|
365
|
+
mouseMovedSinceKeyboard = true;
|
|
366
|
+
return;
|
|
367
|
+
}
|
|
368
|
+
selectedIndex = i;
|
|
369
|
+
}}
|
|
370
|
+
onclick={() => {
|
|
371
|
+
onClose();
|
|
372
|
+
runItem(item);
|
|
373
|
+
}}
|
|
374
|
+
>
|
|
375
|
+
<span class="slash-icon">
|
|
376
|
+
<item.icon size={SI} />
|
|
377
|
+
</span>
|
|
378
|
+
<span class="slash-label">{item.label}</span>
|
|
379
|
+
</button>
|
|
380
|
+
{/each}
|
|
381
|
+
{/if}
|
|
336
382
|
{/each}
|
|
337
383
|
</div>
|
|
338
384
|
{/if}
|
|
385
|
+
|
|
386
|
+
<style>
|
|
387
|
+
.slash-menu {
|
|
388
|
+
width: 220px;
|
|
389
|
+
max-height: 320px;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.slash-section {
|
|
393
|
+
margin: 0;
|
|
394
|
+
padding: 6px 12px 4px;
|
|
395
|
+
font-size: var(--text-xs, 11px);
|
|
396
|
+
font-weight: 600;
|
|
397
|
+
color: var(--muted-foreground);
|
|
398
|
+
letter-spacing: 0.02em;
|
|
399
|
+
}
|
|
400
|
+
.slash-section:not(:first-of-type) {
|
|
401
|
+
margin-top: 4px;
|
|
402
|
+
padding-top: 8px;
|
|
403
|
+
border-top: 1px solid var(--border);
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
.slash-item {
|
|
407
|
+
position: relative;
|
|
408
|
+
display: flex;
|
|
409
|
+
align-items: center;
|
|
410
|
+
gap: 10px;
|
|
411
|
+
width: 100%;
|
|
412
|
+
padding: 6px 12px;
|
|
413
|
+
text-align: left;
|
|
414
|
+
font-size: var(--text-sm, 13px);
|
|
415
|
+
font-weight: 500;
|
|
416
|
+
color: var(--foreground);
|
|
417
|
+
background: transparent;
|
|
418
|
+
border: 0;
|
|
419
|
+
cursor: pointer;
|
|
420
|
+
transition: background-color 0.12s;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.slash-item:hover,
|
|
424
|
+
.slash-item.is-selected {
|
|
425
|
+
background: color-mix(in srgb, var(--primary) 8%, transparent);
|
|
426
|
+
color: var(--primary);
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.slash-item.is-selected::before {
|
|
430
|
+
content: '';
|
|
431
|
+
position: absolute;
|
|
432
|
+
left: 0;
|
|
433
|
+
top: 4px;
|
|
434
|
+
bottom: 4px;
|
|
435
|
+
width: 3px;
|
|
436
|
+
border-radius: 0 2px 2px 0;
|
|
437
|
+
background: var(--primary);
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.slash-icon {
|
|
441
|
+
display: inline-flex;
|
|
442
|
+
align-items: center;
|
|
443
|
+
justify-content: center;
|
|
444
|
+
flex-shrink: 0;
|
|
445
|
+
width: 24px;
|
|
446
|
+
height: 24px;
|
|
447
|
+
border-radius: var(--radius-md, 6px);
|
|
448
|
+
background: var(--muted);
|
|
449
|
+
color: var(--muted-foreground);
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.slash-item.is-selected .slash-icon,
|
|
453
|
+
.slash-item:hover .slash-icon {
|
|
454
|
+
background: color-mix(in srgb, var(--primary) 14%, transparent);
|
|
455
|
+
color: var(--primary);
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.slash-label {
|
|
459
|
+
flex: 1;
|
|
460
|
+
min-width: 0;
|
|
461
|
+
overflow: hidden;
|
|
462
|
+
text-overflow: ellipsis;
|
|
463
|
+
white-space: nowrap;
|
|
464
|
+
}
|
|
465
|
+
</style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Editor } from "@tiptap/core";
|
|
2
|
-
import type { ToolbarFeature } from "../types";
|
|
2
|
+
import type { ToolbarFeature, PromptHandler } from "../types";
|
|
3
3
|
import type { Component } from "svelte";
|
|
4
4
|
type $$ComponentProps = {
|
|
5
5
|
editor: Editor;
|
|
@@ -9,6 +9,8 @@ type $$ComponentProps = {
|
|
|
9
9
|
onPdfUpload?: () => void;
|
|
10
10
|
onFileUpload?: () => void;
|
|
11
11
|
onVideoUpload?: () => void;
|
|
12
|
+
onPromptLink?: PromptHandler;
|
|
13
|
+
onPromptImage?: PromptHandler;
|
|
12
14
|
};
|
|
13
15
|
declare const SlashCommandMenu: Component<$$ComponentProps, {}, "">;
|
|
14
16
|
type SlashCommandMenu = ReturnType<typeof SlashCommandMenu>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlashCommandMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/SlashCommandMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAsB3C,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"SlashCommandMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/SlashCommandMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAsB3C,OAAO,KAAK,EAAiB,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEvC,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AA4VJ,QAAA,MAAM,gBAAgB,qCAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
style="top: {pos.top}px; left: {pos.left}px; width: {pos.width}px"
|
|
125
125
|
>
|
|
126
126
|
<div
|
|
127
|
-
class="flex items-center justify-center gap-0.5 px-1.5 py-1 bg-foreground rounded-
|
|
127
|
+
class="flex items-center justify-center gap-0.5 px-1.5 py-1 bg-foreground rounded-full shadow-xl w-fit mx-auto"
|
|
128
128
|
>
|
|
129
129
|
<!-- Row/Col buttons -->
|
|
130
130
|
<div class="hce-table-btn-wrap">
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
onclick={() => editor.chain().focus().addRowBefore().run()}
|
|
134
134
|
disabled={!editor.can().addRowBefore()}
|
|
135
135
|
class={cn(
|
|
136
|
-
"p-1.5 rounded-
|
|
136
|
+
"p-1.5 rounded-full transition-colors",
|
|
137
137
|
"text-white/70 hover:text-white hover:bg-white/10",
|
|
138
138
|
!editor.can().addRowBefore() && "opacity-30 pointer-events-none",
|
|
139
139
|
)}
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
onclick={() => editor.chain().focus().addRowAfter().run()}
|
|
150
150
|
disabled={!editor.can().addRowAfter()}
|
|
151
151
|
class={cn(
|
|
152
|
-
"p-1.5 rounded-
|
|
152
|
+
"p-1.5 rounded-full transition-colors",
|
|
153
153
|
"text-white/70 hover:text-white hover:bg-white/10",
|
|
154
154
|
!editor.can().addRowAfter() && "opacity-30 pointer-events-none",
|
|
155
155
|
)}
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
onclick={() => editor.chain().focus().addColumnBefore().run()}
|
|
166
166
|
disabled={!editor.can().addColumnBefore()}
|
|
167
167
|
class={cn(
|
|
168
|
-
"p-1.5 rounded-
|
|
168
|
+
"p-1.5 rounded-full transition-colors",
|
|
169
169
|
"text-white/70 hover:text-white hover:bg-white/10",
|
|
170
170
|
!editor.can().addColumnBefore() &&
|
|
171
171
|
"opacity-30 pointer-events-none",
|
|
@@ -182,7 +182,7 @@
|
|
|
182
182
|
onclick={() => editor.chain().focus().addColumnAfter().run()}
|
|
183
183
|
disabled={!editor.can().addColumnAfter()}
|
|
184
184
|
class={cn(
|
|
185
|
-
"p-1.5 rounded-
|
|
185
|
+
"p-1.5 rounded-full transition-colors",
|
|
186
186
|
"text-white/70 hover:text-white hover:bg-white/10",
|
|
187
187
|
!editor.can().addColumnAfter() &&
|
|
188
188
|
"opacity-30 pointer-events-none",
|
|
@@ -201,7 +201,7 @@
|
|
|
201
201
|
onclick={() => editor.chain().focus().toggleHeaderRow().run()}
|
|
202
202
|
disabled={!editor.can().toggleHeaderRow()}
|
|
203
203
|
class={cn(
|
|
204
|
-
"p-1.5 rounded-
|
|
204
|
+
"p-1.5 rounded-full transition-colors",
|
|
205
205
|
"text-white/70 hover:text-white hover:bg-white/10",
|
|
206
206
|
!editor.can().toggleHeaderRow() &&
|
|
207
207
|
"opacity-30 pointer-events-none",
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
onclick={() => editor.chain().focus().toggleHeaderColumn().run()}
|
|
219
219
|
disabled={!editor.can().toggleHeaderColumn()}
|
|
220
220
|
class={cn(
|
|
221
|
-
"p-1.5 rounded-
|
|
221
|
+
"p-1.5 rounded-full transition-colors",
|
|
222
222
|
"text-white/70 hover:text-white hover:bg-white/10",
|
|
223
223
|
!editor.can().toggleHeaderColumn() &&
|
|
224
224
|
"opacity-30 pointer-events-none",
|
|
@@ -235,7 +235,7 @@
|
|
|
235
235
|
onclick={() => editor.chain().focus().mergeCells().run()}
|
|
236
236
|
disabled={!editor.can().mergeCells()}
|
|
237
237
|
class={cn(
|
|
238
|
-
"p-1.5 rounded-
|
|
238
|
+
"p-1.5 rounded-full transition-colors",
|
|
239
239
|
"text-white/70 hover:text-white hover:bg-white/10",
|
|
240
240
|
!editor.can().mergeCells() && "opacity-30 pointer-events-none",
|
|
241
241
|
)}
|
|
@@ -251,7 +251,7 @@
|
|
|
251
251
|
onclick={() => editor.chain().focus().splitCell().run()}
|
|
252
252
|
disabled={!editor.can().splitCell()}
|
|
253
253
|
class={cn(
|
|
254
|
-
"p-1.5 rounded-
|
|
254
|
+
"p-1.5 rounded-full transition-colors",
|
|
255
255
|
"text-white/70 hover:text-white hover:bg-white/10",
|
|
256
256
|
!editor.can().splitCell() && "opacity-30 pointer-events-none",
|
|
257
257
|
)}
|
|
@@ -272,7 +272,7 @@
|
|
|
272
272
|
showLineHeight = !showLineHeight;
|
|
273
273
|
showColors = false;
|
|
274
274
|
}}
|
|
275
|
-
class="p-1.5 rounded-
|
|
275
|
+
class="p-1.5 rounded-full transition-colors text-white/70 hover:text-white hover:bg-white/10"
|
|
276
276
|
>
|
|
277
277
|
<UnfoldVertical size={iconSize} />
|
|
278
278
|
</button>
|
|
@@ -325,6 +325,7 @@
|
|
|
325
325
|
<div class="hce-table-btn-wrap">
|
|
326
326
|
<button
|
|
327
327
|
type="button"
|
|
328
|
+
class="p-1.5 rounded-full transition-colors text-white/70 hover:text-white hover:bg-white/10"
|
|
328
329
|
onclick={() => {
|
|
329
330
|
const { tableNode, tablePos } = findTableNode();
|
|
330
331
|
if (!tableNode || tablePos < 0) return;
|
|
@@ -360,7 +361,6 @@
|
|
|
360
361
|
);
|
|
361
362
|
editor.view.dispatch(tr);
|
|
362
363
|
}}
|
|
363
|
-
class="p-1.5 rounded-md transition-colors text-white/70 hover:text-white hover:bg-white/10"
|
|
364
364
|
>
|
|
365
365
|
<EqualApproximately size={iconSize} />
|
|
366
366
|
</button>
|
|
@@ -376,7 +376,7 @@
|
|
|
376
376
|
showColors = !showColors;
|
|
377
377
|
showLineHeight = false;
|
|
378
378
|
}}
|
|
379
|
-
class="p-1.5 rounded-
|
|
379
|
+
class="p-1.5 rounded-full transition-colors text-white/70 hover:text-white hover:bg-white/10"
|
|
380
380
|
>
|
|
381
381
|
<Paintbrush size={iconSize} />
|
|
382
382
|
</button>
|
|
@@ -388,7 +388,7 @@
|
|
|
388
388
|
style="min-width: 160px"
|
|
389
389
|
>
|
|
390
390
|
<p
|
|
391
|
-
class="text-
|
|
391
|
+
class="text-xs font-medium text-white/60 mb-1.5 px-1"
|
|
392
392
|
>
|
|
393
393
|
배경색
|
|
394
394
|
</p>
|
|
@@ -426,7 +426,7 @@
|
|
|
426
426
|
onclick={() => editor.chain().focus().deleteRow().run()}
|
|
427
427
|
disabled={!editor.can().deleteRow()}
|
|
428
428
|
class={cn(
|
|
429
|
-
"p-1.5 rounded-
|
|
429
|
+
"p-1.5 rounded-full transition-colors",
|
|
430
430
|
"text-white/70 hover:text-red-300 hover:bg-white/10",
|
|
431
431
|
!editor.can().deleteRow() && "opacity-30 pointer-events-none",
|
|
432
432
|
)}
|
|
@@ -442,7 +442,7 @@
|
|
|
442
442
|
onclick={() => editor.chain().focus().deleteColumn().run()}
|
|
443
443
|
disabled={!editor.can().deleteColumn()}
|
|
444
444
|
class={cn(
|
|
445
|
-
"p-1.5 rounded-
|
|
445
|
+
"p-1.5 rounded-full transition-colors",
|
|
446
446
|
"text-white/70 hover:text-red-300 hover:bg-white/10",
|
|
447
447
|
!editor.can().deleteColumn() && "opacity-30 pointer-events-none",
|
|
448
448
|
)}
|
|
@@ -458,7 +458,7 @@
|
|
|
458
458
|
onclick={() => editor.chain().focus().deleteTable().run()}
|
|
459
459
|
disabled={!editor.can().deleteTable()}
|
|
460
460
|
class={cn(
|
|
461
|
-
"p-1.5 rounded-
|
|
461
|
+
"p-1.5 rounded-full transition-colors",
|
|
462
462
|
"text-white/70 hover:text-red-300 hover:bg-white/10",
|
|
463
463
|
!editor.can().deleteTable() && "opacity-30 pointer-events-none",
|
|
464
464
|
)}
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
import BubbleToolbar from "./BubbleToolbar.svelte";
|
|
42
42
|
import SlashCommandMenu from "./SlashCommandMenu.svelte";
|
|
43
43
|
import TableBubbleMenu from "./TableBubbleMenu.svelte";
|
|
44
|
-
import type { UploadHandler, ToolbarMode, ToolbarFeature } from "../types";
|
|
44
|
+
import type { UploadHandler, PromptHandler, ToolbarMode, ToolbarFeature } from "../types";
|
|
45
45
|
import { resolveFeatures } from "../types";
|
|
46
46
|
import type { FileResolver } from "../extensions/FileAttachment";
|
|
47
47
|
|
|
@@ -113,6 +113,8 @@
|
|
|
113
113
|
placeholder = "'/'를 눌러 명령어를 입력하세요...",
|
|
114
114
|
onUploadFile,
|
|
115
115
|
onResolveFile,
|
|
116
|
+
onPromptLink,
|
|
117
|
+
onPromptImage,
|
|
116
118
|
extensions: extraExtensions = [],
|
|
117
119
|
editable = true,
|
|
118
120
|
toolbar = 'full',
|
|
@@ -123,6 +125,8 @@
|
|
|
123
125
|
placeholder?: string;
|
|
124
126
|
onUploadFile?: UploadHandler;
|
|
125
127
|
onResolveFile?: FileResolver;
|
|
128
|
+
onPromptLink?: PromptHandler;
|
|
129
|
+
onPromptImage?: PromptHandler;
|
|
126
130
|
extensions?: AnyExtension[];
|
|
127
131
|
editable?: boolean;
|
|
128
132
|
toolbar?: ToolbarMode;
|
|
@@ -332,6 +336,8 @@
|
|
|
332
336
|
})]),
|
|
333
337
|
Placeholder.configure({
|
|
334
338
|
placeholder: ({ node }) => {
|
|
339
|
+
// 코드블록·인용·목록 등 컨테이너/의미 있는 노드에는 placeholder 안 띄움
|
|
340
|
+
if (node.type.name === "codeBlock") return "";
|
|
335
341
|
if (node.type.name === "heading") {
|
|
336
342
|
const level = node.attrs.level;
|
|
337
343
|
if (level === 1) return "제목 1";
|
|
@@ -567,6 +573,8 @@
|
|
|
567
573
|
<FixedToolbar
|
|
568
574
|
{editor}
|
|
569
575
|
{features}
|
|
576
|
+
{onPromptLink}
|
|
577
|
+
{onPromptImage}
|
|
570
578
|
onPdfClick={() => pdfInputEl?.click()}
|
|
571
579
|
onFileClick={onUploadFile ? () => fileInputEl?.click() : undefined}
|
|
572
580
|
onVideoClick={onUploadFile ? () => videoInputEl?.click() : undefined}
|
|
@@ -577,7 +585,7 @@
|
|
|
577
585
|
|
|
578
586
|
{#if editor && editable}
|
|
579
587
|
{#if features.has('bubble-toolbar')}
|
|
580
|
-
<BubbleToolbar {editor} {features} />
|
|
588
|
+
<BubbleToolbar {editor} {features} {onPromptLink} />
|
|
581
589
|
{/if}
|
|
582
590
|
|
|
583
591
|
{#if features.has('table-menu')}
|
|
@@ -602,6 +610,8 @@
|
|
|
602
610
|
<SlashCommandMenu
|
|
603
611
|
{editor}
|
|
604
612
|
{features}
|
|
613
|
+
{onPromptLink}
|
|
614
|
+
{onPromptImage}
|
|
605
615
|
query={slashQuery}
|
|
606
616
|
onClose={closeSlashMenu}
|
|
607
617
|
onPdfUpload={onUploadFile && features.has('pdf')
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type AnyExtension } from "@tiptap/core";
|
|
2
|
-
import type { UploadHandler, ToolbarMode, ToolbarFeature } from "../types";
|
|
2
|
+
import type { UploadHandler, PromptHandler, ToolbarMode, ToolbarFeature } from "../types";
|
|
3
3
|
import type { FileResolver } from "../extensions/FileAttachment";
|
|
4
4
|
type $$ComponentProps = {
|
|
5
5
|
content: string;
|
|
@@ -7,6 +7,8 @@ type $$ComponentProps = {
|
|
|
7
7
|
placeholder?: string;
|
|
8
8
|
onUploadFile?: UploadHandler;
|
|
9
9
|
onResolveFile?: FileResolver;
|
|
10
|
+
onPromptLink?: PromptHandler;
|
|
11
|
+
onPromptImage?: PromptHandler;
|
|
10
12
|
extensions?: AnyExtension[];
|
|
11
13
|
editable?: boolean;
|
|
12
14
|
toolbar?: ToolbarMode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TipTapEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TipTapEditor.svelte.ts"],"names":[],"mappings":"AAgCA,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAa5D,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"TipTapEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TipTapEditor.svelte.ts"],"names":[],"mappings":"AAgCA,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAa5D,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEhE,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B,CAAC;AA+mBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
package/dist/styles/editor.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.bottom-0{bottom:0}.bottom-full{bottom:100%}.left-0{left:0}.left-1\/2{left:50%}.top-full{top:100%}.z-30{z-index:30}.z-50{z-index:50}.mx-0{margin-left:0;margin-right:0}.mx-0\.5{margin-left:.125rem;margin-right:.125rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mt-1{margin-top:.25rem}.mt-3{margin-top:.75rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-9{height:2.25rem}.h-px{height:1px}.w-4{width:1rem}.w-6{width:1.5rem}.w-80{width:20rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-px{width:1px}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.columns-2{-moz-columns:2;column-count:2}.columns-3{-moz-columns:3;column-count:3}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-border{border-color:var(--border)}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.bg-accent{background-color:var(--accent)}.bg-background{background-color:var(--background)}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-border{background-color:var(--border)}.bg-foreground{background-color:var(--foreground)}.bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.bg-popover{background-color:var(--popover)}.bg-primary{background-color:var(--primary)}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-\[10px\]{font-size:10px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.tracking-wider{letter-spacing:.05em}.text-accent-foreground{color:var(--accent-foreground)}.text-destructive{color:var(--destructive)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/80{color:hsla(0,0%,100%,.8)}.underline{text-decoration-line:underline}.opacity-30{opacity:.3}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hce-editor-wrapper{overflow:visible!important}.tiptap{font-size:1.0625rem;line-height:1.8;color:var(--foreground);padding:1.5rem 1rem 1.5rem 0}.tiptap>*+*{margin-top:.5em}.tiptap>*{margin-left:1.5rem;margin-right:1.5rem}.tiptap p{margin:.25em 0}.tiptap p:empty,.tiptap p:has(>br:only-child){min-height:1.8em}.tiptap h1,.tiptap h2,.tiptap h3,.tiptap li,.tiptap p{white-space:pre-wrap}.tiptap h1{font-size:2rem;font-weight:700;margin:1.5em 0 .5em;line-height:1.25}.tiptap h2{font-size:1.5rem;font-weight:600;margin:1.2em 0 .4em;line-height:1.3}.tiptap h3{font-size:1.25rem;font-weight:600;margin:1em 0 .3em;line-height:1.35}.tiptap ul{list-style:disc}.tiptap ol,.tiptap ul{padding-left:1.5em;margin:.5em 0}.tiptap ol{list-style:decimal}.tiptap ul ul{list-style:circle}.tiptap ul ul ul{list-style:square}.tiptap ol ol{list-style:lower-alpha}.tiptap ol ol ol{list-style:lower-roman}.tiptap li{margin:.25em 0}.tiptap ul[data-type=taskList]{list-style:none;padding-left:0}.tiptap ul[data-type=taskList] li{display:flex;align-items:baseline;gap:.5rem;margin:.1em 0;list-style:none;list-style-type:none}.tiptap ul[data-type=taskList] li>label{flex-shrink:0;display:flex;align-items:center;height:1.5em}.tiptap ul[data-type=taskList] li>label input[type=checkbox]{accent-color:var(--primary);width:1.1em;height:1.1em;cursor:pointer;margin:0}.tiptap ul[data-type=taskList] li>div{flex:1}.tiptap ul[data-type=taskList] li[data-checked=true]>div{text-decoration:line-through;opacity:.6}.tiptap blockquote{border-left:3px solid var(--border);padding:.5rem 1rem;margin:.75em 0;color:var(--muted-foreground);font-style:italic}.tiptap hr{border:none;border-top:1px solid var(--border);margin:1.5em 0}.tiptap code{background:var(--muted);border-radius:4px;padding:.15em .35em;font-size:.9em}.tiptap pre{background:#282c34;color:#abb2bf;border-radius:8px;padding:1em;margin:.75em 0;overflow-x:auto;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.9em;line-height:1.6}.tiptap pre code{background:none;padding:0;border-radius:0;color:#abb2bf;font-size:inherit}.tiptap pre code .hljs-keyword,.tiptap pre code .hljs-operator{color:#c678dd}.tiptap pre code .hljs-addition,.tiptap pre code .hljs-doctag,.tiptap pre code .hljs-regexp,.tiptap pre code .hljs-string{color:#98c379}.tiptap pre code .hljs-attr,.tiptap pre code .hljs-number,.tiptap pre code .hljs-selector-class,.tiptap pre code .hljs-template-variable,.tiptap pre code .hljs-type,.tiptap pre code .hljs-variable{color:#d19a66}.tiptap pre code .hljs-function,.tiptap pre code .hljs-section,.tiptap pre code .hljs-title,.tiptap pre code .hljs-title.class_{color:#61aeee}.tiptap pre code .hljs-params,.tiptap pre code .hljs-punctuation{color:#abb2bf}.tiptap pre code .hljs-comment,.tiptap pre code .hljs-quote{color:#5c6370;font-style:italic}.tiptap pre code .hljs-built_in,.tiptap pre code .hljs-formula{color:#e6c07b}.tiptap pre code .hljs-meta,.tiptap pre code .hljs-meta .hljs-keyword{color:#61aeee}.tiptap pre code .hljs-meta .hljs-string{color:#98c379}.tiptap pre code .hljs-attribute,.tiptap pre code .hljs-deletion,.tiptap pre code .hljs-name,.tiptap pre code .hljs-property,.tiptap pre code .hljs-selector-tag,.tiptap pre code .hljs-subst,.tiptap pre code .hljs-tag{color:#e06c75}.tiptap pre code .hljs-literal{color:#56b6c2}.tiptap pre code .hljs-selector-attr,.tiptap pre code .hljs-selector-id,.tiptap pre code .hljs-selector-pseudo{color:#61aeee}.tiptap pre code .hljs-link{color:#61aeee;text-decoration:underline}.tiptap pre code .hljs-bullet,.tiptap pre code .hljs-symbol{color:#61aeee}.tiptap pre code .hljs-emphasis{font-style:italic}.tiptap pre code .hljs-strong{font-weight:700}.tiptap img{max-width:100%;height:auto;border-radius:8px;margin:.75em 0;cursor:pointer;transition:box-shadow .15s}.tiptap [data-type=pdfBlock].ProseMirror-selectednode>div,.tiptap div[data-youtube-video].ProseMirror-selectednode iframe,.tiptap img.ProseMirror-selectednode{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}.tiptap [data-type=pdfBlock].ProseMirror-selectednode>div{border-radius:8px}.tiptap a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}.tiptap a:hover{opacity:.8}.tiptap mark{background-color:#fef08a;border-radius:2px;padding:.05em .1em}.tiptap [data-type=details]{border:none;border-radius:0;padding:.25em 0;margin:.5em 0;background:transparent;display:flex;align-items:flex-start;gap:.25em}.tiptap [data-type=details]>button{background:none;border:none;cursor:pointer;padding:0;width:1.4em;height:1.4em;display:inline-flex;align-items:center;justify-content:center;color:var(--muted-foreground);border-radius:4px;transition:transform .15s,background .15s;flex-shrink:0;margin-top:.25em}.tiptap [data-type=details]>button:after{content:"";display:block;width:0;height:0;border-left:5px solid;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}.tiptap [data-type=details]>button:hover{background:var(--muted);color:var(--foreground)}.tiptap [data-type=details].is-open>button{transform:rotate(90deg)}.tiptap [data-type=details]>div{flex:1;min-width:0}.tiptap [data-type=details] summary{font-weight:600;cursor:text;padding:.25em 0;display:block}.tiptap [data-type=detailsContent]{margin-top:.5em;padding-left:.5em;border-left:2px solid var(--border)}.tiptap [data-type=detailsContent][hidden]{display:none}.tiptap details{border:1px solid var(--border);border-radius:8px;padding:.5em 1em;margin:.75em 0;background:var(--background)}.tiptap details summary{font-weight:600;cursor:pointer;padding:.25em 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tiptap details summary::marker{color:var(--muted-foreground)}.tiptap details[open]>:not(summary){margin-top:.5em}.tiptap div[data-youtube-video]{margin:1em 0}.tiptap div[data-youtube-video] iframe{width:100%;aspect-ratio:16/9;border-radius:8px;border:none}.tiptap table{border-collapse:collapse;margin:1em 0;table-layout:fixed;border:2px solid var(--border);max-width:100%}.tiptap .tableWrapper{overflow-x:auto;max-width:100%}.tiptap td,.tiptap th{border:1px solid var(--border);padding:.6em .8em;min-width:60px;vertical-align:middle;position:relative;box-sizing:border-box;overflow:hidden;word-break:break-word;line-height:1.5}.tiptap th{background:var(--muted);font-weight:600;text-align:left}.tiptap td{background:var(--background)}.tiptap .selectedCell:after{content:"";position:absolute;inset:0;background:var(--primary);opacity:.12;pointer-events:none;z-index:1}.tiptap .column-resize-handle{position:absolute;right:-3px;top:0;bottom:0;width:6px;background:var(--primary);opacity:0;cursor:col-resize;z-index:20;border-radius:2px;transition:opacity .15s}.tiptap table:hover .column-resize-handle{opacity:.4}.tiptap .column-resize-handle:hover{opacity:1}.tiptap.resize-cursor{cursor:col-resize}.tableWrapper{overflow-x:auto;overflow-y:hidden;margin:1em 0;max-width:100%;padding-right:4px}.tiptap table .grip-column,.tiptap table .grip-row,.tiptap table .grip-table{display:none!important}.tiptap .is-empty:before{content:attr(data-placeholder);float:left;color:var(--muted-foreground);opacity:.5;pointer-events:none;height:0}.tiptap h1.is-empty:before{font-size:2rem;font-weight:700}.tiptap h2.is-empty:before{font-size:1.5rem;font-weight:600}.tiptap h3.is-empty:before{font-size:1.25rem;font-weight:600}.ProseMirror-gapcursor{display:none;pointer-events:none;position:relative}.ProseMirror-gapcursor:after{content:"";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid var(--foreground);animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}.ProseMirror-focused .ProseMirror-gapcursor{display:block}.ProseMirror-dropcursor{border-top:2px solid var(--primary);margin:-1px 0}.tiptap ::-moz-selection{background-color:color-mix(in srgb,var(--primary) 15%,transparent)}.tiptap ::selection{background-color:color-mix(in srgb,var(--primary) 15%,transparent)}.ProseMirror-noderangeselection ::-moz-selection{background:transparent}.ProseMirror-noderangeselection ::selection{background:transparent}.ProseMirror-noderangeselection *{caret-color:transparent}.ProseMirror-selectednode,.ProseMirror-selectednoderange{position:relative}.ProseMirror-selectednode:not(img):not([data-youtube-video]):not([data-type=pdfBlock]):before,.ProseMirror-selectednoderange:before{content:"";position:absolute;inset:-.25rem;background-color:color-mix(in srgb,var(--primary) 10%,transparent);border:2px solid color-mix(in srgb,var(--primary) 30%,transparent);border-radius:.5rem;pointer-events:none;z-index:-1}.bubble-toolbar-container{z-index:50}.hce-floating-plus{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--background);color:var(--muted-foreground);cursor:pointer;transition:all .15s}.hce-floating-plus:hover{color:var(--foreground);border-color:var(--foreground);background:var(--muted)}.hce-drag-handle{display:flex;align-items:center;gap:2px}.hce-drag-handle__plus{display:flex;align-items:center;justify-content:center;padding:4px;border-radius:4px;border:none;background:transparent;color:var(--muted-foreground);opacity:.5;cursor:pointer;transition:opacity .15s,background-color .15s}.hce-drag-handle__plus:hover{opacity:1;background:var(--muted)}.hce-drag-handle__grip{display:flex;align-items:center;justify-content:center;padding:2px;border-radius:4px;color:var(--muted-foreground);opacity:.5;cursor:grab;transition:opacity .15s,background-color .15s}.hce-drag-handle__grip:hover{opacity:1;background:var(--muted)}.hce-drag-handle__grip:active{cursor:grabbing}.tiptap div[data-type=columns]{display:grid;gap:24px;margin:1em 0}.tiptap div[data-type=columns][data-columns="2"]{grid-template-columns:1fr 1fr}.tiptap div[data-type=columns][data-columns="3"]{grid-template-columns:1fr 1fr 1fr}.tiptap div[data-type=column]{min-width:0;padding:4px 8px;border:1px dashed var(--border);border-radius:8px}.tiptap div[data-type=column]:focus-within{border-color:var(--primary);border-style:solid}.tiptap div[data-type=columns].ProseMirror-selectednode{outline:2px solid color-mix(in srgb,var(--primary) 30%,transparent);border-radius:8px}@media (max-width:640px){.tiptap div[data-type=columns]{grid-template-columns:1fr!important}}.hce-editor-wrapper button[data-tooltip]{position:relative}.hce-editor-wrapper button[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;padding:4px 8px;font-size:11px;line-height:1.2;white-space:nowrap;color:#fff;background:#1e293b;border-radius:6px;pointer-events:none;z-index:60}.hce-table-btn-wrap{position:relative;display:inline-flex}.hce-table-btn-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;padding:4px 8px;font-size:11px;line-height:1.2;white-space:nowrap;color:#fff;background:#1e293b;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:60}.hce-table-btn-wrap:hover .hce-table-btn-tooltip{opacity:1}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:bg-muted:hover{background-color:var(--muted)}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:text-destructive:hover{color:var(--destructive)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:text-red-300:hover{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-primary:focus{--tw-ring-color:var(--primary)}.disabled\:opacity-30:disabled{opacity:.3}@media (prefers-color-scheme:dark){.dark\:bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}}
|
|
1
|
+
.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.bottom-0{bottom:0}.bottom-full{bottom:100%}.left-0{left:0}.left-1\/2{left:50%}.top-full{top:100%}.z-30{z-index:30}.z-50{z-index:50}.mx-0\.5{margin-left:.125rem;margin-right:.125rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-4{height:1rem}.h-5{height:1.25rem}.h-7{height:1.75rem}.h-9{height:2.25rem}.h-px{height:1px}.w-4{width:1rem}.w-\[360px\]{width:360px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-\[90vw\]{max-width:90vw}.flex-shrink{flex-shrink:1}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.columns-2{-moz-columns:2;column-count:2}.columns-3{-moz-columns:3;column-count:3}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:var(--radius-md,4px)}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius-xl,8px)}.rounded-md{border-radius:var(--radius-md,6px)}.rounded-xl{border-radius:var(--radius-2xl,12px)}.rounded-t-xl{border-top-left-radius:var(--radius-2xl,12px);border-top-right-radius:var(--radius-2xl,12px)}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-border{border-color:var(--border)}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.bg-background{background-color:var(--background)}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-border{background-color:var(--border)}.bg-foreground{background-color:var(--foreground)}.bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.bg-popover{background-color:var(--popover)}.bg-primary{background-color:var(--primary)}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-destructive{color:var(--destructive)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/80{color:hsla(0,0%,100%,.8)}.underline{text-decoration-line:underline}.opacity-30{opacity:.3}.shadow-lg{--tw-shadow:var(--shadow-dropdown,0 10px 15px -3px rgba(0,0,0,.1));--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--shadow-dropdown,0 1px 2px 0 rgba(0,0,0,.05));--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:var(--shadow-popup,0 20px 25px -5px rgba(0,0,0,.1));--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hce-editor-wrapper{overflow:visible!important}.bubble-toolbar-container button,.hce-editor-wrapper button,.slash-menu button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;box-sizing:border-box}.bubble-toolbar-container button:disabled,.hce-editor-wrapper button:disabled,.slash-menu button:disabled{cursor:default}.tiptap{font-size:1.0625rem;line-height:1.8;color:var(--foreground);padding:1.5rem 1rem 1.5rem 0}.tiptap>*+*{margin-top:.5em}.tiptap>*{margin-left:1.5rem;margin-right:1.5rem}.tiptap p{margin:.25em 0}.tiptap p:empty,.tiptap p:has(>br:only-child){min-height:1.8em}.tiptap h1,.tiptap h2,.tiptap h3,.tiptap li,.tiptap p{white-space:pre-wrap}.tiptap h1{font-size:2rem;font-weight:700;margin:1.5em 0 .5em;line-height:1.25}.tiptap h2{font-size:1.5rem;font-weight:600;margin:1.2em 0 .4em;line-height:1.3}.tiptap h3{font-size:1.25rem;font-weight:600;margin:1em 0 .3em;line-height:1.35}.tiptap ul{list-style:disc}.tiptap ol,.tiptap ul{padding-left:1.5em;margin:.5em 0}.tiptap ol{list-style:decimal}.tiptap ul ul{list-style:circle}.tiptap ul ul ul{list-style:square}.tiptap ol ol{list-style:lower-alpha}.tiptap ol ol ol{list-style:lower-roman}.tiptap li{margin:.25em 0}.tiptap ul[data-type=taskList]{list-style:none;padding-left:0}.tiptap ul[data-type=taskList] li{display:flex;align-items:baseline;gap:.5rem;margin:.1em 0;list-style:none;list-style-type:none}.tiptap ul[data-type=taskList] li>label{flex-shrink:0;display:flex;align-items:center;height:1.5em}.tiptap ul[data-type=taskList] li>label input[type=checkbox]{accent-color:var(--primary);width:1.1em;height:1.1em;cursor:pointer;margin:0}.tiptap ul[data-type=taskList] li>div{flex:1}.tiptap ul[data-type=taskList] li[data-checked=true]>div{text-decoration:line-through;opacity:.6}.tiptap blockquote{border-left:3px solid var(--border);padding:.5rem 1rem;margin:.75em 0;color:var(--muted-foreground);font-style:italic}.tiptap hr{border:none;border-top:2px solid color-mix(in srgb,var(--foreground) 38%,transparent);margin:1.5em 0}.tiptap code{background:var(--muted);border-radius:4px;padding:.15em .35em;font-size:.9em}.tiptap pre{background:#282c34;color:#abb2bf;border-radius:8px;padding:1em;margin:.75em 0;overflow-x:auto;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.9em;line-height:1.6}.tiptap pre code{background:none;padding:0;border-radius:0;color:#abb2bf;font-size:inherit}.tiptap pre code .hljs-keyword,.tiptap pre code .hljs-operator{color:#c678dd}.tiptap pre code .hljs-addition,.tiptap pre code .hljs-doctag,.tiptap pre code .hljs-regexp,.tiptap pre code .hljs-string{color:#98c379}.tiptap pre code .hljs-attr,.tiptap pre code .hljs-number,.tiptap pre code .hljs-selector-class,.tiptap pre code .hljs-template-variable,.tiptap pre code .hljs-type,.tiptap pre code .hljs-variable{color:#d19a66}.tiptap pre code .hljs-function,.tiptap pre code .hljs-section,.tiptap pre code .hljs-title,.tiptap pre code .hljs-title.class_{color:#61aeee}.tiptap pre code .hljs-params,.tiptap pre code .hljs-punctuation{color:#abb2bf}.tiptap pre code .hljs-comment,.tiptap pre code .hljs-quote{color:#5c6370;font-style:italic}.tiptap pre code .hljs-built_in,.tiptap pre code .hljs-formula{color:#e6c07b}.tiptap pre code .hljs-meta,.tiptap pre code .hljs-meta .hljs-keyword{color:#61aeee}.tiptap pre code .hljs-meta .hljs-string{color:#98c379}.tiptap pre code .hljs-attribute,.tiptap pre code .hljs-deletion,.tiptap pre code .hljs-name,.tiptap pre code .hljs-property,.tiptap pre code .hljs-selector-tag,.tiptap pre code .hljs-subst,.tiptap pre code .hljs-tag{color:#e06c75}.tiptap pre code .hljs-literal{color:#56b6c2}.tiptap pre code .hljs-selector-attr,.tiptap pre code .hljs-selector-id,.tiptap pre code .hljs-selector-pseudo{color:#61aeee}.tiptap pre code .hljs-link{color:#61aeee;text-decoration:underline}.tiptap pre code .hljs-bullet,.tiptap pre code .hljs-symbol{color:#61aeee}.tiptap pre code .hljs-emphasis{font-style:italic}.tiptap pre code .hljs-strong{font-weight:700}.tiptap img{max-width:100%;height:auto;border-radius:8px;margin:.75em 0;cursor:pointer;transition:box-shadow .15s}.tiptap [data-type=pdfBlock].ProseMirror-selectednode>div,.tiptap div[data-youtube-video].ProseMirror-selectednode iframe,.tiptap img.ProseMirror-selectednode{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}.tiptap [data-type=pdfBlock].ProseMirror-selectednode>div{border-radius:8px}.tiptap a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}.tiptap a:hover{opacity:.8}.tiptap mark{background-color:#fef08a;border-radius:2px;padding:.05em .1em}.tiptap [data-type=details]{border:none;border-radius:0;padding:.25em 0;margin:.5em 0;background:transparent;display:flex;align-items:flex-start;gap:.25em}.tiptap [data-type=details]>button{background:none;border:none;cursor:pointer;padding:0;width:1.4em;height:1.4em;display:inline-flex;align-items:center;justify-content:center;color:var(--muted-foreground);border-radius:4px;transition:transform .15s,background .15s;flex-shrink:0;margin-top:.25em}.tiptap [data-type=details]>button:after{content:"";display:block;width:0;height:0;border-left:5px solid;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}.tiptap [data-type=details]>button:hover{background:var(--muted);color:var(--foreground)}.tiptap [data-type=details].is-open>button{transform:rotate(90deg)}.tiptap [data-type=details]>div{flex:1;min-width:0}.tiptap [data-type=details] summary{font-weight:600;cursor:text;padding:.25em 0;display:block}.tiptap [data-type=detailsContent]{margin-top:.5em;padding-left:.5em;border-left:2px solid var(--border)}.tiptap [data-type=detailsContent][hidden]{display:none}.tiptap details{border:1px solid var(--border);border-radius:8px;padding:.5em 1em;margin:.75em 0;background:var(--background)}.tiptap details summary{font-weight:600;cursor:pointer;padding:.25em 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tiptap details summary::marker{color:var(--muted-foreground)}.tiptap details[open]>:not(summary){margin-top:.5em}.tiptap div[data-youtube-video]{margin:1em 0}.tiptap div[data-youtube-video] iframe{width:100%;aspect-ratio:16/9;border-radius:8px;border:none}.tiptap table{border-collapse:collapse;margin:1em 0;table-layout:fixed;border:2px solid var(--border);max-width:100%}.tiptap .tableWrapper{overflow-x:auto;max-width:100%}.tiptap td,.tiptap th{border:1px solid var(--border);padding:.6em .8em;min-width:60px;vertical-align:middle;position:relative;box-sizing:border-box;overflow:hidden;word-break:break-word;line-height:1.5}.tiptap th{background:var(--muted);font-weight:600;text-align:left}.tiptap td{background:var(--background)}.tiptap .selectedCell:after{content:"";position:absolute;inset:0;background:var(--primary);opacity:.12;pointer-events:none;z-index:1}.tiptap .column-resize-handle{position:absolute;right:-3px;top:0;bottom:0;width:6px;background:var(--primary);opacity:0;cursor:col-resize;z-index:20;border-radius:2px;transition:opacity .15s}.tiptap table:hover .column-resize-handle{opacity:.4}.tiptap .column-resize-handle:hover{opacity:1}.tiptap.resize-cursor{cursor:col-resize}.tableWrapper{overflow-x:auto;overflow-y:hidden;margin:1em 0;max-width:100%;padding-right:4px}.tiptap table .grip-column,.tiptap table .grip-row,.tiptap table .grip-table{display:none!important}.tiptap .is-empty:before{content:attr(data-placeholder);float:left;color:var(--muted-foreground);opacity:.5;pointer-events:none;height:0}.tiptap h1.is-empty:before{font-size:2rem;font-weight:700}.tiptap h2.is-empty:before{font-size:1.5rem;font-weight:600}.tiptap h3.is-empty:before{font-size:1.25rem;font-weight:600}.ProseMirror-gapcursor{display:none;pointer-events:none;position:relative}.ProseMirror-gapcursor:after{content:"";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid var(--foreground);animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}.ProseMirror-focused .ProseMirror-gapcursor{display:block}.ProseMirror-dropcursor{border-top:2px solid var(--primary);margin:-1px 0}.tiptap ::-moz-selection{background-color:color-mix(in srgb,var(--primary) 15%,transparent)}.tiptap ::selection{background-color:color-mix(in srgb,var(--primary) 15%,transparent)}.ProseMirror-noderangeselection ::-moz-selection{background:transparent}.ProseMirror-noderangeselection ::selection{background:transparent}.ProseMirror-noderangeselection *{caret-color:transparent}.ProseMirror-selectednode,.ProseMirror-selectednoderange{position:relative}.ProseMirror-selectednode:not(img):not([data-youtube-video]):not([data-type=pdfBlock]):before,.ProseMirror-selectednoderange:before{content:"";position:absolute;inset:-.25rem;background-color:color-mix(in srgb,var(--primary) 10%,transparent);border:2px solid color-mix(in srgb,var(--primary) 30%,transparent);border-radius:.5rem;pointer-events:none;z-index:-1}.bubble-toolbar-container{z-index:50}.hce-floating-plus{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--background);color:var(--muted-foreground);cursor:pointer;transition:all .15s}.hce-floating-plus:hover{color:var(--foreground);border-color:var(--foreground);background:var(--muted)}.hce-drag-handle{display:flex;align-items:center;gap:2px}.hce-drag-handle__plus{display:flex;align-items:center;justify-content:center;padding:4px;border-radius:4px;border:none;background:transparent;color:var(--muted-foreground);opacity:.5;cursor:pointer;transition:opacity .15s,background-color .15s}.hce-drag-handle__plus:hover{opacity:1;background:var(--muted)}.hce-drag-handle__grip{display:flex;align-items:center;justify-content:center;padding:2px;border-radius:4px;color:var(--muted-foreground);opacity:.5;cursor:grab;transition:opacity .15s,background-color .15s}.hce-drag-handle__grip:hover{opacity:1;background:var(--muted)}.hce-drag-handle__grip:active{cursor:grabbing}.tiptap div[data-type=columns]{display:grid;gap:24px;margin:1em 0}.tiptap div[data-type=columns][data-columns="2"]{grid-template-columns:1fr 1fr}.tiptap div[data-type=columns][data-columns="3"]{grid-template-columns:1fr 1fr 1fr}.tiptap div[data-type=column]{min-width:0;padding:4px 8px;border:1px dashed var(--border);border-radius:8px}.tiptap div[data-type=column]:focus-within{border-color:var(--primary);border-style:solid}.tiptap div[data-type=columns].ProseMirror-selectednode{outline:2px solid color-mix(in srgb,var(--primary) 30%,transparent);border-radius:8px}@media (max-width:640px){.tiptap div[data-type=columns]{grid-template-columns:1fr!important}}.hce-editor-wrapper button[data-tooltip]{position:relative}.hce-editor-wrapper button[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;padding:4px 8px;font-size:11px;line-height:1.2;white-space:nowrap;color:#fff;background:#1e293b;border-radius:6px;pointer-events:none;z-index:60}.hce-table-btn-wrap{position:relative;display:inline-flex}.hce-table-btn-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;padding:4px 8px;font-size:11px;line-height:1.2;white-space:nowrap;color:#fff;background:#1e293b;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:60}.hce-table-btn-wrap:hover .hce-table-btn-tooltip{opacity:1}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:bg-muted:hover{background-color:var(--muted)}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:text-destructive:hover{color:var(--destructive)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:text-red-300:hover{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.focus\:border-primary:focus{border-color:var(--primary)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.disabled\:opacity-30:disabled{opacity:.3}@media (prefers-color-scheme:dark){.dark\:bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}}
|
package/dist/types.d.ts
CHANGED
|
@@ -3,6 +3,12 @@ import type { Component } from "svelte";
|
|
|
3
3
|
import type { FileResolver } from "./extensions/FileAttachment";
|
|
4
4
|
/** 파일 업로드 핸들러 -- 호스트 앱에서 구현 */
|
|
5
5
|
export type UploadHandler = (file: File) => Promise<string>;
|
|
6
|
+
/**
|
|
7
|
+
* URL 프롬프트 핸들러 -- 호스트 앱에서 Dialog 등으로 구현.
|
|
8
|
+
* 제공되지 않으면 내장 InputModal (링크/이미지) 또는 window.prompt (Bubble)로 폴백.
|
|
9
|
+
* null 반환 = 취소.
|
|
10
|
+
*/
|
|
11
|
+
export type PromptHandler = (defaultValue: string) => Promise<string | null>;
|
|
6
12
|
/** 툴바 모드 */
|
|
7
13
|
export type ToolbarMode = 'minimal' | 'standard' | 'full';
|
|
8
14
|
/** 개별 툴바 기능 ID */
|
|
@@ -19,6 +25,10 @@ export interface TipTapEditorProps {
|
|
|
19
25
|
onUploadFile?: UploadHandler;
|
|
20
26
|
/** 파일 ID → URL 변환. 하이브리드 파일 저장 시 사용 */
|
|
21
27
|
onResolveFile?: FileResolver;
|
|
28
|
+
/** 링크 URL 프롬프트. 미제공 시 내장 InputModal (FixedToolbar) / window.prompt (BubbleToolbar) 폴백 */
|
|
29
|
+
onPromptLink?: PromptHandler;
|
|
30
|
+
/** 이미지 URL 프롬프트. 미제공 시 내장 InputModal 폴백 */
|
|
31
|
+
onPromptImage?: PromptHandler;
|
|
22
32
|
/** 툴바 모드: 'minimal' | 'standard' | 'full' (기본값 'full') */
|
|
23
33
|
toolbar?: ToolbarMode;
|
|
24
34
|
/** 개별 기능 커스터마이징. 설정 시 toolbar 모드 프리셋 대신 이 배열을 사용 */
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE,+BAA+B;AAC/B,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAE5D,YAAY;AACZ,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAE1D,kBAAkB;AAClB,MAAM,MAAM,cAAc,GAEvB,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,GACxD,aAAa,GAAG,WAAW,GAAG,MAAM,GAEpC,YAAY,GAAG,cAAc,GAAG,aAAa,GAE7C,IAAI,GAAG,IAAI,GAAG,IAAI,GAElB,aAAa,GAAG,cAAc,GAAG,WAAW,GAC5C,YAAY,GAAG,iBAAiB,GAAG,QAAQ,GAE3C,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAEvD,WAAW,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,GAElD,MAAM,GAAG,MAAM,GAEf,eAAe,GAAG,gBAAgB,GAAG,YAAY,GACjD,YAAY,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAEvD,yBAAyB;AACzB,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,EAAE,CA4BjE,CAAC;AAEF,mEAAmE;AACnE,wBAAgB,eAAe,CAC9B,OAAO,EAAE,WAAW,EACpB,QAAQ,CAAC,EAAE,cAAc,EAAE,GACzB,GAAG,CAAC,cAAc,CAAC,CAErB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,uCAAuC;IACvC,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE,+BAA+B;AAC/B,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAE5D;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;AAE7E,YAAY;AACZ,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAE1D,kBAAkB;AAClB,MAAM,MAAM,cAAc,GAEvB,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,GACxD,aAAa,GAAG,WAAW,GAAG,MAAM,GAEpC,YAAY,GAAG,cAAc,GAAG,aAAa,GAE7C,IAAI,GAAG,IAAI,GAAG,IAAI,GAElB,aAAa,GAAG,cAAc,GAAG,WAAW,GAC5C,YAAY,GAAG,iBAAiB,GAAG,QAAQ,GAE3C,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAEvD,WAAW,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,GAElD,MAAM,GAAG,MAAM,GAEf,eAAe,GAAG,gBAAgB,GAAG,YAAY,GACjD,YAAY,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAEvD,yBAAyB;AACzB,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,EAAE,CA4BjE,CAAC;AAEF,mEAAmE;AACnE,wBAAgB,eAAe,CAC9B,OAAO,EAAE,WAAW,EACpB,QAAQ,CAAC,EAAE,cAAc,EAAE,GACzB,GAAG,CAAC,cAAc,CAAC,CAErB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,uCAAuC;IACvC,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,yFAAyF;IACzF,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC"}
|
package/dist/types.js
CHANGED
|
@@ -10,7 +10,7 @@ export const TOOLBAR_PRESETS = {
|
|
|
10
10
|
'link', 'image', 'pdf', 'youtube', 'video', 'file',
|
|
11
11
|
'columns-2', 'columns-3', 'table', 'code-block',
|
|
12
12
|
'undo', 'redo',
|
|
13
|
-
'fixed-toolbar', '
|
|
13
|
+
'fixed-toolbar', 'slash-menu',
|
|
14
14
|
'table-menu', 'character-count', 'upload-overlay'
|
|
15
15
|
],
|
|
16
16
|
standard: [
|
|
@@ -20,7 +20,7 @@ export const TOOLBAR_PRESETS = {
|
|
|
20
20
|
'blockquote', 'horizontal-rule', 'toggle',
|
|
21
21
|
'link', 'image', 'pdf', 'youtube', 'video', 'file',
|
|
22
22
|
'columns-2', 'columns-3', 'table', 'code-block',
|
|
23
|
-
'fixed-toolbar', '
|
|
23
|
+
'fixed-toolbar', 'slash-menu', 'table-menu'
|
|
24
24
|
],
|
|
25
25
|
minimal: [
|
|
26
26
|
'bold', 'italic', 'strike', 'code',
|