@teriusu/rich-editor 0.8.2 → 0.8.4
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/dist/components/BubbleToolbar.svelte +53 -29
- package/dist/components/BubbleToolbar.svelte.d.ts.map +1 -1
- package/dist/components/FixedToolbar.svelte +116 -42
- package/dist/components/FixedToolbar.svelte.d.ts +9 -0
- package/dist/components/FixedToolbar.svelte.d.ts.map +1 -1
- package/dist/components/TipTapEditor.svelte +10 -4
- package/dist/components/TipTapEditor.svelte.d.ts +3 -0
- package/dist/components/TipTapEditor.svelte.d.ts.map +1 -1
- package/dist/styles/editor.css +1 -1
- package/package.json +1 -1
|
@@ -36,6 +36,30 @@
|
|
|
36
36
|
onPromptLink?: PromptHandler;
|
|
37
37
|
} = $props();
|
|
38
38
|
|
|
39
|
+
/*
|
|
40
|
+
* ⚠️ **툴바가 스스로 다시 그려지게 하는 장치.**
|
|
41
|
+
*
|
|
42
|
+
* `editor` 는 TipTap 이 만든 평범한 객체라 `$state` 가 아니다. 그래서 선택이 바뀌거나
|
|
43
|
+
* 서식이 켜져도 Svelte 는 아무것도 모르고, `editor.isActive('bold')` 를 다시 읽지 않는다
|
|
44
|
+
* — 버튼이 영영 비활성 모양으로 남는다(실측: `isActive` 는 true 인데 클래스는 그대로).
|
|
45
|
+
*
|
|
46
|
+
* 예전엔 `onTransaction` 에서 `editor = editor` 로 밀어 줬는데 그건 **Svelte 4 관용구**다.
|
|
47
|
+
* rune 에서는 같은 참조를 다시 대입해도 아무 일도 일어나지 않는다.
|
|
48
|
+
*
|
|
49
|
+
* 대신 트랜잭션마다 카운터를 올리고, 활성 여부를 읽는 자리에서 그 카운터를 함께 읽는다
|
|
50
|
+
* (쉼표 연산자). 그러면 Svelte 가 "이 표현식은 tick 에 의존한다"고 알아채 다시 계산한다.
|
|
51
|
+
*/
|
|
52
|
+
let tick = $state(0);
|
|
53
|
+
$effect(() => {
|
|
54
|
+
const bump = () => tick++;
|
|
55
|
+
editor.on("transaction", bump);
|
|
56
|
+
return () => {
|
|
57
|
+
editor.off("transaction", bump);
|
|
58
|
+
};
|
|
59
|
+
});
|
|
60
|
+
const isActive = (...args: Parameters<Editor["isActive"]>) =>
|
|
61
|
+
(tick, editor.isActive(...args));
|
|
62
|
+
|
|
39
63
|
const has = (f: ToolbarFeature) => features.has(f);
|
|
40
64
|
|
|
41
65
|
let showBlockMenu = $state(false);
|
|
@@ -58,23 +82,23 @@
|
|
|
58
82
|
];
|
|
59
83
|
|
|
60
84
|
function getCurrentBlockLabel(): string {
|
|
61
|
-
if (
|
|
62
|
-
if (
|
|
63
|
-
if (
|
|
64
|
-
if (
|
|
65
|
-
if (
|
|
66
|
-
if (
|
|
67
|
-
if (
|
|
85
|
+
if (isActive("heading", { level: 1 })) return "제목 1";
|
|
86
|
+
if (isActive("heading", { level: 2 })) return "제목 2";
|
|
87
|
+
if (isActive("heading", { level: 3 })) return "제목 3";
|
|
88
|
+
if (isActive("bulletList")) return "글머리 목록";
|
|
89
|
+
if (isActive("orderedList")) return "번호 목록";
|
|
90
|
+
if (isActive("taskList")) return "체크리스트";
|
|
91
|
+
if (isActive("blockquote")) return "인용문";
|
|
68
92
|
return "본문";
|
|
69
93
|
}
|
|
70
94
|
|
|
71
95
|
function isParagraphActive(): boolean {
|
|
72
96
|
return (
|
|
73
|
-
!
|
|
74
|
-
!
|
|
75
|
-
!
|
|
76
|
-
!
|
|
77
|
-
!
|
|
97
|
+
!isActive("heading") &&
|
|
98
|
+
!isActive("bulletList") &&
|
|
99
|
+
!isActive("orderedList") &&
|
|
100
|
+
!isActive("taskList") &&
|
|
101
|
+
!isActive("blockquote")
|
|
78
102
|
);
|
|
79
103
|
}
|
|
80
104
|
|
|
@@ -181,7 +205,7 @@
|
|
|
181
205
|
class={cn(
|
|
182
206
|
"w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
|
|
183
207
|
isParagraphActive()
|
|
184
|
-
? "
|
|
208
|
+
? "hce-active"
|
|
185
209
|
: "text-white/70 hover:text-white hover:bg-white/10",
|
|
186
210
|
)}
|
|
187
211
|
onclick={() => {
|
|
@@ -198,8 +222,8 @@
|
|
|
198
222
|
type="button"
|
|
199
223
|
class={cn(
|
|
200
224
|
"w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
|
|
201
|
-
|
|
202
|
-
? "
|
|
225
|
+
isActive("heading", { level })
|
|
226
|
+
? "hce-active"
|
|
203
227
|
: "text-white/70 hover:text-white hover:bg-white/10",
|
|
204
228
|
)}
|
|
205
229
|
onclick={() => {
|
|
@@ -220,8 +244,8 @@
|
|
|
220
244
|
type="button"
|
|
221
245
|
class={cn(
|
|
222
246
|
"w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
|
|
223
|
-
|
|
224
|
-
? "
|
|
247
|
+
isActive("bulletList")
|
|
248
|
+
? "hce-active"
|
|
225
249
|
: "text-white/70 hover:text-white hover:bg-white/10",
|
|
226
250
|
)}
|
|
227
251
|
onclick={() => {
|
|
@@ -237,8 +261,8 @@
|
|
|
237
261
|
type="button"
|
|
238
262
|
class={cn(
|
|
239
263
|
"w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
|
|
240
|
-
|
|
241
|
-
? "
|
|
264
|
+
isActive("orderedList")
|
|
265
|
+
? "hce-active"
|
|
242
266
|
: "text-white/70 hover:text-white hover:bg-white/10",
|
|
243
267
|
)}
|
|
244
268
|
onclick={() => {
|
|
@@ -254,8 +278,8 @@
|
|
|
254
278
|
type="button"
|
|
255
279
|
class={cn(
|
|
256
280
|
"w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
|
|
257
|
-
|
|
258
|
-
? "
|
|
281
|
+
isActive("taskList")
|
|
282
|
+
? "hce-active"
|
|
259
283
|
: "text-white/70 hover:text-white hover:bg-white/10",
|
|
260
284
|
)}
|
|
261
285
|
onclick={() => {
|
|
@@ -271,8 +295,8 @@
|
|
|
271
295
|
type="button"
|
|
272
296
|
class={cn(
|
|
273
297
|
"w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
|
|
274
|
-
|
|
275
|
-
? "
|
|
298
|
+
isActive("blockquote")
|
|
299
|
+
? "hce-active"
|
|
276
300
|
: "text-white/70 hover:text-white hover:bg-white/10",
|
|
277
301
|
)}
|
|
278
302
|
onclick={() => {
|
|
@@ -299,7 +323,7 @@
|
|
|
299
323
|
aria-label="굵게"
|
|
300
324
|
class={cn(
|
|
301
325
|
"p-1.5 rounded-full transition-colors",
|
|
302
|
-
|
|
326
|
+
isActive("bold")
|
|
303
327
|
? "bg-white/20 text-white"
|
|
304
328
|
: "text-white/70 hover:text-white hover:bg-white/10",
|
|
305
329
|
)}
|
|
@@ -315,7 +339,7 @@
|
|
|
315
339
|
aria-label="기울임"
|
|
316
340
|
class={cn(
|
|
317
341
|
"p-1.5 rounded-full transition-colors",
|
|
318
|
-
|
|
342
|
+
isActive("italic")
|
|
319
343
|
? "bg-white/20 text-white"
|
|
320
344
|
: "text-white/70 hover:text-white hover:bg-white/10",
|
|
321
345
|
)}
|
|
@@ -331,7 +355,7 @@
|
|
|
331
355
|
aria-label="밑줄"
|
|
332
356
|
class={cn(
|
|
333
357
|
"p-1.5 rounded-full transition-colors",
|
|
334
|
-
|
|
358
|
+
isActive("underline")
|
|
335
359
|
? "bg-white/20 text-white"
|
|
336
360
|
: "text-white/70 hover:text-white hover:bg-white/10",
|
|
337
361
|
)}
|
|
@@ -347,7 +371,7 @@
|
|
|
347
371
|
aria-label="취소선"
|
|
348
372
|
class={cn(
|
|
349
373
|
"p-1.5 rounded-full transition-colors",
|
|
350
|
-
|
|
374
|
+
isActive("strike")
|
|
351
375
|
? "bg-white/20 text-white"
|
|
352
376
|
: "text-white/70 hover:text-white hover:bg-white/10",
|
|
353
377
|
)}
|
|
@@ -368,7 +392,7 @@
|
|
|
368
392
|
aria-label="하이라이트"
|
|
369
393
|
class={cn(
|
|
370
394
|
"p-1.5 rounded-full transition-colors",
|
|
371
|
-
|
|
395
|
+
isActive("highlight")
|
|
372
396
|
? "bg-white/20 text-white"
|
|
373
397
|
: "text-white/70 hover:text-white hover:bg-white/10",
|
|
374
398
|
)}
|
|
@@ -449,7 +473,7 @@
|
|
|
449
473
|
aria-label="링크"
|
|
450
474
|
class={cn(
|
|
451
475
|
"p-1.5 rounded-full transition-colors",
|
|
452
|
-
|
|
476
|
+
isActive("link")
|
|
453
477
|
? "bg-white/20 text-white"
|
|
454
478
|
: "text-white/70 hover:text-white hover:bg-white/10",
|
|
455
479
|
)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BubbleToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BubbleToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAuB3C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;
|
|
1
|
+
{"version":3,"file":"BubbleToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BubbleToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAuB3C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;AAoXJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { Editor } from "@tiptap/core";
|
|
3
|
+
import type { Snippet } from "svelte";
|
|
3
4
|
import {
|
|
4
5
|
Bold,
|
|
5
6
|
Italic,
|
|
@@ -28,6 +29,7 @@
|
|
|
28
29
|
Paperclip,
|
|
29
30
|
Columns2,
|
|
30
31
|
Columns3,
|
|
32
|
+
SquareDashed,
|
|
31
33
|
Tv,
|
|
32
34
|
Plus,
|
|
33
35
|
Pilcrow,
|
|
@@ -45,6 +47,7 @@
|
|
|
45
47
|
onPromptLink,
|
|
46
48
|
onPromptImage,
|
|
47
49
|
onPromptMbus,
|
|
50
|
+
toolbarEnd,
|
|
48
51
|
}: {
|
|
49
52
|
editor: Editor;
|
|
50
53
|
features: Set<ToolbarFeature>;
|
|
@@ -53,8 +56,40 @@
|
|
|
53
56
|
onPromptLink?: PromptHandler;
|
|
54
57
|
onPromptImage?: PromptHandler;
|
|
55
58
|
onPromptMbus?: PromptHandler;
|
|
59
|
+
/**
|
|
60
|
+
* 툴바 **오른쪽 끝**에 호스트가 끼워 넣는 조각(예: HTML ↔ 에디터 토글).
|
|
61
|
+
*
|
|
62
|
+
* 이게 없으면 호스트는 툴바 위에 `position: absolute` 로 띄우는 수밖에 없는데,
|
|
63
|
+
* 그러면 툴바 버튼들과 세로 정렬이 맞지 않고(사용자 지적) 좁은 폭에서는 겹친다.
|
|
64
|
+
* 여기에 넣으면 툴바의 flex 행에 그대로 얹혀 정렬이 저절로 맞는다.
|
|
65
|
+
*/
|
|
66
|
+
toolbarEnd?: Snippet;
|
|
56
67
|
} = $props();
|
|
57
68
|
|
|
69
|
+
/*
|
|
70
|
+
* ⚠️ **툴바가 스스로 다시 그려지게 하는 장치.**
|
|
71
|
+
*
|
|
72
|
+
* `editor` 는 TipTap 이 만든 평범한 객체라 `$state` 가 아니다. 그래서 선택이 바뀌거나
|
|
73
|
+
* 서식이 켜져도 Svelte 는 아무것도 모르고, `editor.isActive('bold')` 를 다시 읽지 않는다
|
|
74
|
+
* — 버튼이 영영 비활성 모양으로 남는다(실측: `isActive` 는 true 인데 클래스는 그대로).
|
|
75
|
+
*
|
|
76
|
+
* 예전엔 `onTransaction` 에서 `editor = editor` 로 밀어 줬는데 그건 **Svelte 4 관용구**다.
|
|
77
|
+
* rune 에서는 같은 참조를 다시 대입해도 아무 일도 일어나지 않는다.
|
|
78
|
+
*
|
|
79
|
+
* 대신 트랜잭션마다 카운터를 올리고, 활성 여부를 읽는 자리에서 그 카운터를 함께 읽는다
|
|
80
|
+
* (쉼표 연산자). 그러면 Svelte 가 "이 표현식은 tick 에 의존한다"고 알아채 다시 계산한다.
|
|
81
|
+
*/
|
|
82
|
+
let tick = $state(0);
|
|
83
|
+
$effect(() => {
|
|
84
|
+
const bump = () => tick++;
|
|
85
|
+
editor.on("transaction", bump);
|
|
86
|
+
return () => {
|
|
87
|
+
editor.off("transaction", bump);
|
|
88
|
+
};
|
|
89
|
+
});
|
|
90
|
+
const isActive = (...args: Parameters<Editor["isActive"]>) =>
|
|
91
|
+
(tick, editor.isActive(...args));
|
|
92
|
+
|
|
58
93
|
const has = (f: ToolbarFeature) => features.has(f);
|
|
59
94
|
|
|
60
95
|
const iconSize = 16;
|
|
@@ -107,7 +142,7 @@
|
|
|
107
142
|
async function addLink() {
|
|
108
143
|
insertMenuOpen = false;
|
|
109
144
|
if (onPromptLink) {
|
|
110
|
-
const previous =
|
|
145
|
+
const previous = isActive("link")
|
|
111
146
|
? (editor.getAttributes("link").href as string) || ""
|
|
112
147
|
: "";
|
|
113
148
|
const url = await onPromptLink(previous);
|
|
@@ -150,14 +185,14 @@
|
|
|
150
185
|
}
|
|
151
186
|
|
|
152
187
|
const currentBlockLabel = $derived.by(() => {
|
|
153
|
-
if (
|
|
154
|
-
if (
|
|
155
|
-
if (
|
|
156
|
-
if (
|
|
157
|
-
if (
|
|
158
|
-
if (
|
|
159
|
-
if (
|
|
160
|
-
if (
|
|
188
|
+
if (isActive("heading", { level: 1 })) return "제목 1";
|
|
189
|
+
if (isActive("heading", { level: 2 })) return "제목 2";
|
|
190
|
+
if (isActive("heading", { level: 3 })) return "제목 3";
|
|
191
|
+
if (isActive("bulletList")) return "글머리 목록";
|
|
192
|
+
if (isActive("orderedList")) return "번호 목록";
|
|
193
|
+
if (isActive("taskList")) return "체크리스트";
|
|
194
|
+
if (isActive("blockquote")) return "인용문";
|
|
195
|
+
if (isActive("details")) return "토글";
|
|
161
196
|
return "본문";
|
|
162
197
|
});
|
|
163
198
|
|
|
@@ -262,14 +297,14 @@
|
|
|
262
297
|
type="button"
|
|
263
298
|
class={cn(
|
|
264
299
|
"w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted",
|
|
265
|
-
!
|
|
266
|
-
!
|
|
267
|
-
!
|
|
268
|
-
!
|
|
269
|
-
!
|
|
270
|
-
!
|
|
271
|
-
!
|
|
272
|
-
"
|
|
300
|
+
!isActive("heading") &&
|
|
301
|
+
!isActive("bulletList") &&
|
|
302
|
+
!isActive("orderedList") &&
|
|
303
|
+
!isActive("taskList") &&
|
|
304
|
+
!isActive("blockquote") &&
|
|
305
|
+
!isActive("codeBlock") &&
|
|
306
|
+
!isActive("details") &&
|
|
307
|
+
"hce-active",
|
|
273
308
|
)}
|
|
274
309
|
onclick={() =>
|
|
275
310
|
runBlock(() => editor.chain().focus().setParagraph().run())}
|
|
@@ -281,7 +316,7 @@
|
|
|
281
316
|
type="button"
|
|
282
317
|
class={cn(
|
|
283
318
|
"w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted",
|
|
284
|
-
|
|
319
|
+
isActive("heading", { level: 1 }) && "hce-active",
|
|
285
320
|
)}
|
|
286
321
|
onclick={() =>
|
|
287
322
|
runBlock(() =>
|
|
@@ -296,7 +331,7 @@
|
|
|
296
331
|
type="button"
|
|
297
332
|
class={cn(
|
|
298
333
|
"w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted",
|
|
299
|
-
|
|
334
|
+
isActive("heading", { level: 2 }) && "hce-active",
|
|
300
335
|
)}
|
|
301
336
|
onclick={() =>
|
|
302
337
|
runBlock(() =>
|
|
@@ -311,7 +346,7 @@
|
|
|
311
346
|
type="button"
|
|
312
347
|
class={cn(
|
|
313
348
|
"w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted",
|
|
314
|
-
|
|
349
|
+
isActive("heading", { level: 3 }) && "hce-active",
|
|
315
350
|
)}
|
|
316
351
|
onclick={() =>
|
|
317
352
|
runBlock(() =>
|
|
@@ -329,7 +364,7 @@
|
|
|
329
364
|
type="button"
|
|
330
365
|
class={cn(
|
|
331
366
|
"w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted",
|
|
332
|
-
|
|
367
|
+
isActive("bulletList") && "hce-active",
|
|
333
368
|
)}
|
|
334
369
|
onclick={() =>
|
|
335
370
|
runBlock(() => editor.chain().focus().toggleBulletList().run())}
|
|
@@ -342,7 +377,7 @@
|
|
|
342
377
|
type="button"
|
|
343
378
|
class={cn(
|
|
344
379
|
"w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted",
|
|
345
|
-
|
|
380
|
+
isActive("orderedList") && "hce-active",
|
|
346
381
|
)}
|
|
347
382
|
onclick={() =>
|
|
348
383
|
runBlock(() => editor.chain().focus().toggleOrderedList().run())}
|
|
@@ -355,7 +390,7 @@
|
|
|
355
390
|
type="button"
|
|
356
391
|
class={cn(
|
|
357
392
|
"w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted",
|
|
358
|
-
|
|
393
|
+
isActive("taskList") && "hce-active",
|
|
359
394
|
)}
|
|
360
395
|
onclick={() =>
|
|
361
396
|
runBlock(() => editor.chain().focus().toggleTaskList().run())}
|
|
@@ -371,7 +406,7 @@
|
|
|
371
406
|
type="button"
|
|
372
407
|
class={cn(
|
|
373
408
|
"w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted",
|
|
374
|
-
|
|
409
|
+
isActive("blockquote") && "hce-active",
|
|
375
410
|
)}
|
|
376
411
|
onclick={() =>
|
|
377
412
|
runBlock(() => editor.chain().focus().toggleBlockquote().run())}
|
|
@@ -384,7 +419,7 @@
|
|
|
384
419
|
type="button"
|
|
385
420
|
class={cn(
|
|
386
421
|
"w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted",
|
|
387
|
-
|
|
422
|
+
isActive("details") && "hce-active",
|
|
388
423
|
)}
|
|
389
424
|
onclick={() =>
|
|
390
425
|
runBlock(() => editor.chain().focus().setDetails().run())}
|
|
@@ -409,8 +444,8 @@
|
|
|
409
444
|
aria-label="굵게"
|
|
410
445
|
class={cn(
|
|
411
446
|
"p-1.5 rounded-md transition-colors",
|
|
412
|
-
|
|
413
|
-
? "
|
|
447
|
+
isActive("bold")
|
|
448
|
+
? "hce-active"
|
|
414
449
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
415
450
|
)}
|
|
416
451
|
>
|
|
@@ -425,8 +460,8 @@
|
|
|
425
460
|
aria-label="기울임"
|
|
426
461
|
class={cn(
|
|
427
462
|
"p-1.5 rounded-md transition-colors",
|
|
428
|
-
|
|
429
|
-
? "
|
|
463
|
+
isActive("italic")
|
|
464
|
+
? "hce-active"
|
|
430
465
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
431
466
|
)}
|
|
432
467
|
>
|
|
@@ -441,8 +476,8 @@
|
|
|
441
476
|
aria-label="밑줄"
|
|
442
477
|
class={cn(
|
|
443
478
|
"p-1.5 rounded-md transition-colors",
|
|
444
|
-
|
|
445
|
-
? "
|
|
479
|
+
isActive("underline")
|
|
480
|
+
? "hce-active"
|
|
446
481
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
447
482
|
)}
|
|
448
483
|
>
|
|
@@ -457,8 +492,8 @@
|
|
|
457
492
|
aria-label="취소선"
|
|
458
493
|
class={cn(
|
|
459
494
|
"p-1.5 rounded-md transition-colors",
|
|
460
|
-
|
|
461
|
-
? "
|
|
495
|
+
isActive("strike")
|
|
496
|
+
? "hce-active"
|
|
462
497
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
463
498
|
)}
|
|
464
499
|
>
|
|
@@ -475,7 +510,7 @@
|
|
|
475
510
|
class={cn(
|
|
476
511
|
"flex items-center gap-0.5 p-1.5 rounded-md transition-colors",
|
|
477
512
|
editor.getAttributes('textStyle').color
|
|
478
|
-
? "
|
|
513
|
+
? "hce-active"
|
|
479
514
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
480
515
|
)}
|
|
481
516
|
>
|
|
@@ -543,8 +578,8 @@
|
|
|
543
578
|
aria-label="왼쪽 정렬"
|
|
544
579
|
class={cn(
|
|
545
580
|
"p-1.5 rounded-md transition-colors",
|
|
546
|
-
|
|
547
|
-
? "
|
|
581
|
+
isActive({ textAlign: 'left' })
|
|
582
|
+
? "hce-active"
|
|
548
583
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
549
584
|
)}
|
|
550
585
|
>
|
|
@@ -559,8 +594,8 @@
|
|
|
559
594
|
aria-label="가운데 정렬"
|
|
560
595
|
class={cn(
|
|
561
596
|
"p-1.5 rounded-md transition-colors",
|
|
562
|
-
|
|
563
|
-
? "
|
|
597
|
+
isActive({ textAlign: 'center' })
|
|
598
|
+
? "hce-active"
|
|
564
599
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
565
600
|
)}
|
|
566
601
|
>
|
|
@@ -575,8 +610,8 @@
|
|
|
575
610
|
aria-label="오른쪽 정렬"
|
|
576
611
|
class={cn(
|
|
577
612
|
"p-1.5 rounded-md transition-colors",
|
|
578
|
-
|
|
579
|
-
? "
|
|
613
|
+
isActive({ textAlign: 'right' })
|
|
614
|
+
? "hce-active"
|
|
580
615
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
581
616
|
)}
|
|
582
617
|
>
|
|
@@ -651,7 +686,7 @@
|
|
|
651
686
|
</button>
|
|
652
687
|
{/if}
|
|
653
688
|
|
|
654
|
-
{#if has('horizontal-rule') || has('columns-2') || has('columns-3')}
|
|
689
|
+
{#if has('horizontal-rule') || has('columns-2') || has('columns-3') || has('card')}
|
|
655
690
|
<div class="h-px bg-border my-1"></div>
|
|
656
691
|
{/if}
|
|
657
692
|
{#if has('horizontal-rule')}
|
|
@@ -686,6 +721,15 @@
|
|
|
686
721
|
<Columns3 size={14} /> 3단 컬럼
|
|
687
722
|
</button>
|
|
688
723
|
{/if}
|
|
724
|
+
{#if has('card')}
|
|
725
|
+
<button
|
|
726
|
+
type="button"
|
|
727
|
+
class="w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted"
|
|
728
|
+
onclick={() => runInsert(() => editor.chain().focus().setCard().run())}
|
|
729
|
+
>
|
|
730
|
+
<SquareDashed size={14} /> 카드
|
|
731
|
+
</button>
|
|
732
|
+
{/if}
|
|
689
733
|
|
|
690
734
|
{#if has('image') || has('link') || has('mbus')}
|
|
691
735
|
<div class="h-px bg-border my-1"></div>
|
|
@@ -728,7 +772,7 @@
|
|
|
728
772
|
<InputModal
|
|
729
773
|
title="링크 URL 입력"
|
|
730
774
|
placeholder="https://example.com"
|
|
731
|
-
defaultValue={
|
|
775
|
+
defaultValue={isActive("link") ? editor.getAttributes("link").href || "" : ""}
|
|
732
776
|
onConfirm={(url) => {
|
|
733
777
|
editor
|
|
734
778
|
.chain()
|
|
@@ -763,6 +807,10 @@
|
|
|
763
807
|
onCancel={() => (modalState = null)}
|
|
764
808
|
/>
|
|
765
809
|
{/if}
|
|
810
|
+
|
|
811
|
+
{#if toolbarEnd}
|
|
812
|
+
<div class="hce-toolbar-end">{@render toolbarEnd()}</div>
|
|
813
|
+
{/if}
|
|
766
814
|
</div>
|
|
767
815
|
|
|
768
816
|
<style>
|
|
@@ -778,6 +826,32 @@
|
|
|
778
826
|
cursor: default;
|
|
779
827
|
}
|
|
780
828
|
|
|
829
|
+
/*
|
|
830
|
+
* ── 활성 표시 ──────────────────────────────────────────────────────────
|
|
831
|
+
* ⚠️ **이 규칙은 반드시 위 리셋보다 구체적이어야 한다.** 바로 위
|
|
832
|
+
* `.hce-toolbar :global(button)` 이 `background: transparent; color: inherit` 을 걸어
|
|
833
|
+
* (0,2,1), 유틸리티 클래스 하나짜리(0,1,0)로는 절대 못 이긴다. 그래서 켜진 버튼이
|
|
834
|
+
* **아무 표시도 안 났다** — 오래된 버그다(사용자 지적).
|
|
835
|
+
*
|
|
836
|
+
* 색은 `color-mix` 로 만든다. 호스트 앱이 `--primary` 를 hex 로 주기 때문에 Tailwind 의
|
|
837
|
+
* `bg-primary/10` 같은 투명도 변형은 아예 생성되지 않는다(`.claude/rules/rich-editor.md`).
|
|
838
|
+
*/
|
|
839
|
+
.hce-toolbar :global(button.hce-active) {
|
|
840
|
+
background-color: color-mix(in srgb, var(--primary, #3382f2) 12%, transparent);
|
|
841
|
+
color: var(--primary, #3382f2);
|
|
842
|
+
}
|
|
843
|
+
|
|
844
|
+
.hce-toolbar :global(button.hce-active:hover) {
|
|
845
|
+
background-color: color-mix(in srgb, var(--primary, #3382f2) 18%, transparent);
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
/* 오른쪽 끝으로 밀어 붙인다 — 툴바가 flex 라 auto 마진이면 충분하다. */
|
|
849
|
+
.hce-toolbar-end {
|
|
850
|
+
margin-left: auto;
|
|
851
|
+
display: flex;
|
|
852
|
+
align-items: center;
|
|
853
|
+
}
|
|
854
|
+
|
|
781
855
|
.hce-toolbar-group {
|
|
782
856
|
display: flex;
|
|
783
857
|
align-items: center;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Editor } from "@tiptap/core";
|
|
2
|
+
import type { Snippet } from "svelte";
|
|
2
3
|
import type { ToolbarFeature, PromptHandler } from "../types";
|
|
3
4
|
type $$ComponentProps = {
|
|
4
5
|
editor: Editor;
|
|
@@ -8,6 +9,14 @@ type $$ComponentProps = {
|
|
|
8
9
|
onPromptLink?: PromptHandler;
|
|
9
10
|
onPromptImage?: PromptHandler;
|
|
10
11
|
onPromptMbus?: PromptHandler;
|
|
12
|
+
/**
|
|
13
|
+
* 툴바 **오른쪽 끝**에 호스트가 끼워 넣는 조각(예: HTML ↔ 에디터 토글).
|
|
14
|
+
*
|
|
15
|
+
* 이게 없으면 호스트는 툴바 위에 `position: absolute` 로 띄우는 수밖에 없는데,
|
|
16
|
+
* 그러면 툴바 버튼들과 세로 정렬이 맞지 않고(사용자 지적) 좁은 폭에서는 겹친다.
|
|
17
|
+
* 여기에 넣으면 툴바의 flex 행에 그대로 얹혀 정렬이 저절로 맞는다.
|
|
18
|
+
*/
|
|
19
|
+
toolbarEnd?: Snippet;
|
|
11
20
|
};
|
|
12
21
|
declare const FixedToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
13
22
|
type FixedToolbar = ReturnType<typeof FixedToolbar>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FixedToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FixedToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"FixedToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FixedToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAqCtC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAyjBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import type { Snippet } from "svelte";
|
|
2
3
|
import { onMount, onDestroy } from "svelte";
|
|
3
4
|
import { Editor } from "@tiptap/core";
|
|
4
5
|
import StarterKit from "@tiptap/starter-kit";
|
|
@@ -118,6 +119,7 @@
|
|
|
118
119
|
onPromptImage,
|
|
119
120
|
onPromptMbus,
|
|
120
121
|
onPromptCardBackground,
|
|
122
|
+
toolbarEnd,
|
|
121
123
|
extensions: extraExtensions = [],
|
|
122
124
|
editable = true,
|
|
123
125
|
toolbar = 'full',
|
|
@@ -134,6 +136,8 @@
|
|
|
134
136
|
onPromptMbus?: PromptHandler;
|
|
135
137
|
/** 카드 배경 고르기. 미제공 시 window.prompt 폴백 */
|
|
136
138
|
onPromptCardBackground?: PromptHandler;
|
|
139
|
+
/** 고정 툴바 오른쪽 끝에 끼워 넣을 조각 */
|
|
140
|
+
toolbarEnd?: Snippet;
|
|
137
141
|
extensions?: AnyExtension[];
|
|
138
142
|
editable?: boolean;
|
|
139
143
|
toolbar?: ToolbarMode;
|
|
@@ -486,10 +490,11 @@
|
|
|
486
490
|
scrollThreshold: 100,
|
|
487
491
|
scrollMargin: 100,
|
|
488
492
|
},
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
+
/*
|
|
494
|
+
* ⚠️ 예전엔 여기서 `editor = editor` 로 Svelte 를 밀었다. 그건 Svelte 4 관용구고
|
|
495
|
+
* rune 에서는 **같은 참조 재대입이라 아무 일도 일어나지 않는다** — 툴바 활성 표시가
|
|
496
|
+
* 영영 갱신되지 않았다. 이제 각 툴바가 `transaction` 을 직접 구독해 스스로 다시 그린다.
|
|
497
|
+
*/
|
|
493
498
|
});
|
|
494
499
|
|
|
495
500
|
editor.on("update", handleUpdate);
|
|
@@ -568,6 +573,7 @@
|
|
|
568
573
|
{onPromptLink}
|
|
569
574
|
{onPromptImage}
|
|
570
575
|
{onPromptMbus}
|
|
576
|
+
{toolbarEnd}
|
|
571
577
|
onPdfClick={() => pdfInputEl?.click()}
|
|
572
578
|
onFileClick={onUploadFile ? () => fileInputEl?.click() : undefined}
|
|
573
579
|
/>
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { Snippet } from "svelte";
|
|
1
2
|
import { type AnyExtension } from "@tiptap/core";
|
|
2
3
|
import type { UploadHandler, PromptHandler, ToolbarMode, ToolbarFeature } from "../types";
|
|
3
4
|
import type { FileResolver } from "../extensions/FileAttachment";
|
|
@@ -13,6 +14,8 @@ type $$ComponentProps = {
|
|
|
13
14
|
onPromptMbus?: PromptHandler;
|
|
14
15
|
/** 카드 배경 고르기. 미제공 시 window.prompt 폴백 */
|
|
15
16
|
onPromptCardBackground?: PromptHandler;
|
|
17
|
+
/** 고정 툴바 오른쪽 끝에 끼워 넣을 조각 */
|
|
18
|
+
toolbarEnd?: Snippet;
|
|
16
19
|
extensions?: AnyExtension[];
|
|
17
20
|
editable?: boolean;
|
|
18
21
|
toolbar?: ToolbarMode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TipTapEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TipTapEditor.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TipTapEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TipTapEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AA6BtC,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAc5D,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,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,wCAAwC;IACxC,sBAAsB,CAAC,EAAE,aAAa,CAAC;IACvC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,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;AA8lBJ,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}.collapse{visibility:collapse}.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-2{margin-top:.5rem}.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-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-px{height:1px}.w-10{width:2.5rem}.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}.min-w-\[96px\]{min-width:96px}.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}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.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\/40{background-color:rgba(0,0,0,.4)}.bg-border{background-color:var(--border)}.bg-foreground{background-color:var(--foreground)}.bg-muted{background-color:var(--muted)}.bg-popover{background-color:var(--popover)}.bg-primary{background-color:var(--primary)}.bg-transparent{background-color:transparent}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.p-0{padding:0}.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-bottom:.5rem}.pt-2,.py-2{padding-top:.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-bold{font-weight:700}.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-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\/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}.hce-color-divider{border-top:1px solid hsla(0,0%,100%,.15)}.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}.tiptap>*+*{margin-top:.25em}.tiptap p{margin:.5em 0!important;line-height:1.5}.tiptap p:first-child{margin-top:0!important}.tiptap p:last-child{margin-bottom:0!important}.tiptap p:empty,.tiptap p:has(>br:only-child){min-height:1.5em}.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:.4em 0;line-height:1.7}.tiptap li>p{margin:0!important;line-height:inherit!important}.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:.3em 0;line-height:1.7;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]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:1.1em;height:1.1em;margin:0;padding:0;cursor:pointer;background-color:var(--background,#fff);border:1.5px solid var(--border);border-radius:4px;transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;display:inline-block;vertical-align:middle;flex-shrink:0}.tiptap ul[data-type=taskList] li>label input[type=checkbox]:hover{border-color:var(--muted-foreground)}.tiptap ul[data-type=taskList] li>label input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 2px var(--background,#fff),0 0 0 4px var(--primary)}.tiptap ul[data-type=taskList] li>label input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-6.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.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:1em;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;margin:.75em 0;cursor:pointer;transition:box-shadow .15s}.tiptap [data-type=pdfBlock].ProseMirror-selectednode>div,.tiptap img{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:6px;padding:0;margin:.5em 0;background:transparent;display:grid;grid-template-columns:26px 1fr;align-items:start;transition:background .12s}.tiptap [data-type=details]:hover{background:var(--muted)}.tiptap [data-type=details]>button{background:none;border:none;cursor:pointer;padding:0;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted-foreground);border-radius:4px;transition:transform .2s,color .15s;flex-shrink:0;margin-top:13px;margin-left:4px}.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]:hover>button{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:pointer;padding:10px 8px 10px 0;display:block;border-bottom:1px solid transparent;transition:border-color .15s}.tiptap [data-type=details].is-open>div>summary{border-bottom-color:var(--border,#e5e7eb)}.tiptap [data-type=detailsContent]{padding:8px 8px 8px 0;border-left:none}.tiptap [data-type=detailsContent][hidden]{display:none}.tiptap details{border:none;border-radius:6px;padding:0;margin:.5em 0;background:transparent;transition:background .12s}.tiptap details:hover{background:var(--muted)}.tiptap details summary{font-weight:600;cursor:pointer;padding:10px 8px 10px 26px;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-bottom:1px solid transparent;position:relative;list-style:none;transition:border-color .15s}.tiptap details[open]>summary{border-bottom-color:var(--border,#e5e7eb)}.tiptap details summary::-webkit-details-marker{display:none}.tiptap details summary::marker{content:""}.tiptap details summary:before{content:"";position:absolute;left:8px;top:50%;width:0;height:0;border-left:5px solid var(--muted-foreground);border-top:4px solid transparent;border-bottom:4px solid transparent;transform:translateY(-50%);transition:transform .2s,border-left-color .15s}.tiptap details:hover summary:before{border-left-color:var(--foreground)}.tiptap details[open]>summary:before{transform:translateY(-50%) rotate(90deg)}.tiptap details[open]>:not(summary){margin-top:8px;padding-left:26px;padding-right:8px}.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-type=pdfBlock]):before,.ProseMirror-selectednoderange:not([data-type=pdfBlock]):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:16px;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 6px;border:1px dashed var(--border);border-radius:8px}.tiptap[contenteditable=true] 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}.hce-card-frame,.tiptap [data-type=card]{position:relative}.hce-card-frame{box-sizing:border-box;width:100%;margin:12px 0;padding:26px 30px;display:flex;flex-direction:column;justify-content:center;gap:12px;overflow:hidden;border:1px solid hsla(0,0%,100%,.52);border-radius:8px;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.28),0 8px 24px rgba(15,23,42,.08);overflow-wrap:anywhere;isolation:isolate}.hce-card-frame:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,hsla(0,0%,100%,.14),hsla(0,0%,100%,.04) 48%,rgba(15,23,42,.08));pointer-events:none}.hce-card-content{position:relative;z-index:1;box-sizing:border-box;width:100%;max-height:100%;min-height:0;padding:18px 20px;display:flex;flex-direction:column;gap:10px;overflow:hidden;border:1px solid hsla(0,0%,100%,.56);border-radius:8px;background:hsla(0,0%,100%,.82);color:#111827;box-shadow:0 14px 42px rgba(15,23,42,.12),inset 0 1px 0 hsla(0,0%,100%,.52);backdrop-filter:blur(18px) saturate(1.16);-webkit-backdrop-filter:blur(18px) saturate(1.16)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hce-card-content{background:hsla(0,0%,100%,.9)}}.hce-card-header{flex:0 0 auto}.hce-card-title{margin:0;font-size:1.65rem;font-weight:700;line-height:1.18;color:#111827}.hce-card-title[hidden]{display:none}.hce-card-title-input{box-sizing:border-box;width:100%;padding:8px 12px;border:1px solid rgba(17,24,39,.12);border-radius:6px;background:hsla(0,0%,100%,.7);color:#111827;font:inherit;font-size:1.15rem;font-weight:700;outline:none}.hce-card-title-input:focus{border-color:var(--primary,#3382f2)}.hce-card-body{flex:1 1 auto;min-height:0;overflow:auto;font-size:1rem;line-height:1.55;color:#111827}.hce-card-body>p:first-child{margin-top:0}.hce-card-body>p:last-child{margin-bottom:0}.hce-card-bg-button{position:absolute;top:8px;right:8px;z-index:3;padding:4px 10px;border:1px solid rgba(17,24,39,.12);border-radius:6px;background:hsla(0,0%,100%,.86);color:#111827;font-size:.8125rem;line-height:1.4;cursor:pointer}.hce-card-bg-button:hover{background:#fff}@media (max-width:640px){.hce-card-frame{padding:18px}.hce-card-content{padding:14px 16px}.hce-card-title{font-size:1.35rem}}.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}
|
|
1
|
+
.pointer-events-none{pointer-events:none}.visible{visibility:visible}.collapse{visibility:collapse}.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-2{margin-top:.5rem}.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-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-px{height:1px}.w-10{width:2.5rem}.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}.min-w-\[96px\]{min-width:96px}.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}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.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\/40{background-color:rgba(0,0,0,.4)}.bg-border{background-color:var(--border)}.bg-foreground{background-color:var(--foreground)}.bg-muted{background-color:var(--muted)}.bg-popover{background-color:var(--popover)}.bg-primary{background-color:var(--primary)}.bg-transparent{background-color:transparent}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.p-0{padding:0}.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-bottom:.5rem}.pt-2,.py-2{padding-top:.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-bold{font-weight:700}.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-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\/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}.hce-color-divider{border-top:1px solid hsla(0,0%,100%,.15)}.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}.tiptap>*+*{margin-top:.25em}.tiptap p{margin:.5em 0!important;line-height:1.5}.tiptap p:first-child{margin-top:0!important}.tiptap p:last-child{margin-bottom:0!important}.tiptap p:empty,.tiptap p:has(>br:only-child){min-height:1.5em}.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:.4em 0;line-height:1.7}.tiptap li>p{margin:0!important;line-height:inherit!important}.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:.3em 0;line-height:1.7;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]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:1.1em;height:1.1em;margin:0;padding:0;cursor:pointer;background-color:var(--background,#fff);border:1.5px solid var(--border);border-radius:4px;transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;display:inline-block;vertical-align:middle;flex-shrink:0}.tiptap ul[data-type=taskList] li>label input[type=checkbox]:hover{border-color:var(--muted-foreground)}.tiptap ul[data-type=taskList] li>label input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 2px var(--background,#fff),0 0 0 4px var(--primary)}.tiptap ul[data-type=taskList] li>label input[type=checkbox]:checked{background-color:var(--primary);border-color:var(--primary);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-6.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.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:1em;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;margin:.75em 0;cursor:pointer;transition:box-shadow .15s}.tiptap [data-type=pdfBlock].ProseMirror-selectednode>div,.tiptap img{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:6px;padding:0;margin:.5em 0;background:transparent;display:grid;grid-template-columns:26px 1fr;align-items:start;transition:background .12s}.tiptap [data-type=details]:hover{background:var(--muted)}.tiptap [data-type=details]>button{background:none;border:none;cursor:pointer;padding:0;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted-foreground);border-radius:4px;transition:transform .2s,color .15s;flex-shrink:0;margin-top:13px;margin-left:4px}.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]:hover>button{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:pointer;padding:10px 8px 10px 0;display:block;border-bottom:1px solid transparent;transition:border-color .15s}.tiptap [data-type=details].is-open>div>summary{border-bottom-color:var(--border,#e5e7eb)}.tiptap [data-type=detailsContent]{padding:8px 8px 8px 0;border-left:none}.tiptap [data-type=detailsContent][hidden]{display:none}.tiptap details{border:none;border-radius:6px;padding:0;margin:.5em 0;background:transparent;transition:background .12s}.tiptap details:hover{background:var(--muted)}.tiptap details summary{font-weight:600;cursor:pointer;padding:10px 8px 10px 26px;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-bottom:1px solid transparent;position:relative;list-style:none;transition:border-color .15s}.tiptap details[open]>summary{border-bottom-color:var(--border,#e5e7eb)}.tiptap details summary::-webkit-details-marker{display:none}.tiptap details summary::marker{content:""}.tiptap details summary:before{content:"";position:absolute;left:8px;top:50%;width:0;height:0;border-left:5px solid var(--muted-foreground);border-top:4px solid transparent;border-bottom:4px solid transparent;transform:translateY(-50%);transition:transform .2s,border-left-color .15s}.tiptap details:hover summary:before{border-left-color:var(--foreground)}.tiptap details[open]>summary:before{transform:translateY(-50%) rotate(90deg)}.tiptap details[open]>:not(summary){margin-top:8px;padding-left:26px;padding-right:8px}.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-type=pdfBlock]):before,.ProseMirror-selectednoderange:not([data-type=pdfBlock]):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:16px;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 6px;border:1px dashed var(--border);border-radius:8px}.tiptap[contenteditable=true] 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}.hce-card-frame,.tiptap [data-type=card]{position:relative}.hce-card-frame{box-sizing:border-box;width:100%;margin:12px 0;padding:26px 30px;display:flex;flex-direction:column;justify-content:center;gap:12px;overflow:hidden;border:1px solid hsla(0,0%,100%,.52);border-radius:8px;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.28),0 8px 24px rgba(15,23,42,.08);overflow-wrap:anywhere;isolation:isolate}.hce-card-frame:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,hsla(0,0%,100%,.14),hsla(0,0%,100%,.04) 48%,rgba(15,23,42,.08));pointer-events:none}.hce-card-content{position:relative;z-index:1;box-sizing:border-box;width:100%;max-height:100%;min-height:0;padding:18px 20px;display:flex;flex-direction:column;gap:10px;overflow:hidden;border:1px solid hsla(0,0%,100%,.56);border-radius:8px;background:hsla(0,0%,100%,.82);color:#111827;box-shadow:0 14px 42px rgba(15,23,42,.12),inset 0 1px 0 hsla(0,0%,100%,.52);backdrop-filter:blur(18px) saturate(1.16);-webkit-backdrop-filter:blur(18px) saturate(1.16)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hce-card-content{background:hsla(0,0%,100%,.9)}}.hce-card-header{flex:0 0 auto}.hce-card-title{margin:0;font-size:1.65rem;font-weight:700;line-height:1.18;color:#111827}.hce-card-title[hidden]{display:none}.hce-card-title-input{box-sizing:border-box;width:100%;padding:8px 12px;border:1px solid rgba(17,24,39,.12);border-radius:6px;background:hsla(0,0%,100%,.7);color:#111827;font:inherit;font-size:1.15rem;font-weight:700;outline:none}.hce-card-title-input:focus{border-color:var(--primary,#3382f2)}.hce-card-body{flex:1 1 auto;min-height:0;overflow:auto;font-size:1rem;line-height:1.55;color:#111827}.hce-card-body>p:first-child{margin-top:0}.hce-card-body>p:last-child{margin-bottom:0}.hce-card-bg-button{position:absolute;top:8px;right:8px;z-index:3;padding:4px 10px;border:1px solid rgba(17,24,39,.12);border-radius:6px;background:hsla(0,0%,100%,.86);color:#111827;font-size:.8125rem;line-height:1.4;cursor:pointer}.hce-card-bg-button:hover{background:#fff}@media (max-width:640px){.hce-card-frame{padding:18px}.hce-card-content{padding:14px 16px}.hce-card-title{font-size:1.35rem}}.hce-active{background-color:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}.hce-active:hover{background-color:color-mix(in srgb,var(--primary) 18%,transparent)}.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}
|