@haklex/rich-ext-tldraw 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +28 -0
- package/README.md +59 -0
- package/dist/TldrawConfigContext.d.ts +10 -0
- package/dist/TldrawConfigContext.d.ts.map +1 -0
- package/dist/TldrawEditRenderer.d.ts +7 -0
- package/dist/TldrawEditRenderer.d.ts.map +1 -0
- package/dist/TldrawNode.d.ts +24 -0
- package/dist/TldrawNode.d.ts.map +1 -0
- package/dist/TldrawPlugin.d.ts +3 -0
- package/dist/TldrawPlugin.d.ts.map +1 -0
- package/dist/TldrawRenderer.d.ts +3 -0
- package/dist/TldrawRenderer.d.ts.map +1 -0
- package/dist/TldrawStaticRenderer.d.ts +6 -0
- package/dist/TldrawStaticRenderer.d.ts.map +1 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.mjs +1004 -0
- package/dist/rich-ext-tldraw.css +306 -0
- package/dist/styles.css.d.ts +25 -0
- package/dist/styles.css.d.ts.map +1 -0
- package/dist/useTldrawData.d.ts +8 -0
- package/dist/useTldrawData.d.ts.map +1 -0
- package/package.json +56 -0
|
@@ -0,0 +1,306 @@
|
|
|
1
|
+
@keyframes _1vqtdre3 {
|
|
2
|
+
to {
|
|
3
|
+
transform: rotate(360deg);
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
._1vqtdre0 {
|
|
7
|
+
position: relative;
|
|
8
|
+
width: 100%;
|
|
9
|
+
aspect-ratio: 16 / 10;
|
|
10
|
+
margin: 1rem 0;
|
|
11
|
+
border-radius: 0.5rem;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
}
|
|
14
|
+
._1vqtdre1 {
|
|
15
|
+
position: relative;
|
|
16
|
+
width: 100%;
|
|
17
|
+
aspect-ratio: 16 / 10;
|
|
18
|
+
margin: 1rem 0;
|
|
19
|
+
border-radius: 0.5rem;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
border: 1px solid var(--rc-border);
|
|
22
|
+
}
|
|
23
|
+
._1vqtdre2 {
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
position: absolute;
|
|
28
|
+
inset: 0;
|
|
29
|
+
color: var(--rc-text-secondary);
|
|
30
|
+
font-size: 0.875rem;
|
|
31
|
+
}
|
|
32
|
+
._1vqtdre2::after {
|
|
33
|
+
content: "";
|
|
34
|
+
display: inline-block;
|
|
35
|
+
width: 16px;
|
|
36
|
+
height: 16px;
|
|
37
|
+
margin-left: 8px;
|
|
38
|
+
border: 2px solid currentColor;
|
|
39
|
+
border-right-color: transparent;
|
|
40
|
+
border-radius: 50%;
|
|
41
|
+
animation: _1vqtdre3 0.6s linear infinite;
|
|
42
|
+
}
|
|
43
|
+
._1vqtdre4 {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
position: absolute;
|
|
48
|
+
inset: 0;
|
|
49
|
+
padding: 0.75rem 1rem;
|
|
50
|
+
background-color: color-mix(in srgb, var(--rc-alert-caution) 10%, transparent);
|
|
51
|
+
color: var(--rc-alert-caution);
|
|
52
|
+
font-size: 0.875rem;
|
|
53
|
+
}
|
|
54
|
+
._1vqtdre5 {
|
|
55
|
+
position: absolute;
|
|
56
|
+
bottom: 8px;
|
|
57
|
+
right: 8px;
|
|
58
|
+
z-index: 10;
|
|
59
|
+
display: flex;
|
|
60
|
+
gap: 4px;
|
|
61
|
+
border-radius: 6px;
|
|
62
|
+
padding: 2px;
|
|
63
|
+
background-color: color-mix(in srgb, currentColor 8%, transparent);
|
|
64
|
+
backdrop-filter: blur(8px);
|
|
65
|
+
}
|
|
66
|
+
._1vqtdre6 {
|
|
67
|
+
display: flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
width: 28px;
|
|
71
|
+
height: 28px;
|
|
72
|
+
border-radius: 4px;
|
|
73
|
+
border: none;
|
|
74
|
+
background: transparent;
|
|
75
|
+
color: var(--rc-text-secondary);
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
transition: background 0.15s, color 0.15s;
|
|
78
|
+
}
|
|
79
|
+
._1vqtdre6:hover {
|
|
80
|
+
background: color-mix(in srgb, currentColor 12%, transparent);
|
|
81
|
+
color: var(--rc-text);
|
|
82
|
+
}
|
|
83
|
+
._1vqtdre6 svg {
|
|
84
|
+
width: 16px;
|
|
85
|
+
height: 16px;
|
|
86
|
+
}
|
|
87
|
+
._1vqtdre7._1vqtdre7 {
|
|
88
|
+
position: fixed;
|
|
89
|
+
inset: 0;
|
|
90
|
+
top: 0;
|
|
91
|
+
left: 0;
|
|
92
|
+
transform: none;
|
|
93
|
+
width: 100vw;
|
|
94
|
+
height: 100vh;
|
|
95
|
+
max-width: 100vw;
|
|
96
|
+
max-height: 100vh;
|
|
97
|
+
margin: 0;
|
|
98
|
+
padding: 0;
|
|
99
|
+
gap: 0;
|
|
100
|
+
border-radius: 0;
|
|
101
|
+
border: none;
|
|
102
|
+
display: flex;
|
|
103
|
+
flex-direction: column;
|
|
104
|
+
background: var(--rc-bg);
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
}
|
|
107
|
+
._1vqtdre7._1vqtdre7[data-open] {
|
|
108
|
+
animation: none;
|
|
109
|
+
}
|
|
110
|
+
._1vqtdre7._1vqtdre7[data-closed] {
|
|
111
|
+
animation: none;
|
|
112
|
+
}
|
|
113
|
+
._1vqtdre8 {
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
height: 48px;
|
|
117
|
+
flex-shrink: 0;
|
|
118
|
+
padding: 0 12px 0 16px;
|
|
119
|
+
border-bottom: 1px solid var(--rc-border);
|
|
120
|
+
gap: 10px;
|
|
121
|
+
}
|
|
122
|
+
._1vqtdre9 {
|
|
123
|
+
width: 8px;
|
|
124
|
+
height: 8px;
|
|
125
|
+
border-radius: 50%;
|
|
126
|
+
flex-shrink: 0;
|
|
127
|
+
transition: background-color 0.3s;
|
|
128
|
+
}
|
|
129
|
+
._1vqtdrea {
|
|
130
|
+
font-size: 0.875rem;
|
|
131
|
+
font-weight: 600;
|
|
132
|
+
color: var(--rc-text);
|
|
133
|
+
line-height: 1;
|
|
134
|
+
}
|
|
135
|
+
._1vqtdreb {
|
|
136
|
+
font-size: 0.8125rem;
|
|
137
|
+
color: var(--rc-text-secondary);
|
|
138
|
+
line-height: 1;
|
|
139
|
+
padding-left: 10px;
|
|
140
|
+
border-left: 1px solid var(--rc-border);
|
|
141
|
+
}
|
|
142
|
+
._1vqtdrec {
|
|
143
|
+
margin-left: auto;
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
gap: 2px;
|
|
147
|
+
}
|
|
148
|
+
._1vqtdred {
|
|
149
|
+
margin-left: 8px;
|
|
150
|
+
flex-shrink: 0;
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
justify-content: center;
|
|
154
|
+
width: 32px;
|
|
155
|
+
height: 32px;
|
|
156
|
+
border-radius: 6px;
|
|
157
|
+
border: none;
|
|
158
|
+
background: transparent;
|
|
159
|
+
color: var(--rc-text-secondary);
|
|
160
|
+
cursor: pointer;
|
|
161
|
+
transition: background 0.15s, color 0.15s;
|
|
162
|
+
}
|
|
163
|
+
._1vqtdred:hover {
|
|
164
|
+
background: color-mix(in srgb, currentColor 8%, transparent);
|
|
165
|
+
color: var(--rc-text);
|
|
166
|
+
}
|
|
167
|
+
._1vqtdree {
|
|
168
|
+
display: inline-flex;
|
|
169
|
+
align-items: center;
|
|
170
|
+
gap: 4px;
|
|
171
|
+
padding: 4px 10px;
|
|
172
|
+
border-radius: 4px;
|
|
173
|
+
border: none;
|
|
174
|
+
background: transparent;
|
|
175
|
+
color: var(--rc-text-secondary);
|
|
176
|
+
cursor: pointer;
|
|
177
|
+
font-size: 0.8125rem;
|
|
178
|
+
white-space: nowrap;
|
|
179
|
+
transition: background 0.15s, color 0.15s;
|
|
180
|
+
}
|
|
181
|
+
._1vqtdree:hover {
|
|
182
|
+
background: color-mix(in srgb, currentColor 8%, transparent);
|
|
183
|
+
color: var(--rc-text);
|
|
184
|
+
}
|
|
185
|
+
._1vqtdree:disabled {
|
|
186
|
+
opacity: 0.4;
|
|
187
|
+
pointer-events: none;
|
|
188
|
+
}
|
|
189
|
+
._1vqtdree svg {
|
|
190
|
+
width: 14px;
|
|
191
|
+
height: 14px;
|
|
192
|
+
flex-shrink: 0;
|
|
193
|
+
}
|
|
194
|
+
._1vqtdref {
|
|
195
|
+
width: 1px;
|
|
196
|
+
height: 16px;
|
|
197
|
+
margin: 0 4px;
|
|
198
|
+
background: var(--rc-border);
|
|
199
|
+
flex-shrink: 0;
|
|
200
|
+
}
|
|
201
|
+
._1vqtdreg {
|
|
202
|
+
margin-left: auto;
|
|
203
|
+
display: inline-flex;
|
|
204
|
+
align-items: center;
|
|
205
|
+
gap: 6px;
|
|
206
|
+
padding: 3px 10px;
|
|
207
|
+
border-radius: 4px;
|
|
208
|
+
background: color-mix(in srgb, currentColor 4%, transparent);
|
|
209
|
+
color: var(--rc-text-secondary);
|
|
210
|
+
font-size: 0.75rem;
|
|
211
|
+
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
|
212
|
+
max-width: 50%;
|
|
213
|
+
overflow: hidden;
|
|
214
|
+
text-overflow: ellipsis;
|
|
215
|
+
white-space: nowrap;
|
|
216
|
+
cursor: pointer;
|
|
217
|
+
border: none;
|
|
218
|
+
transition: background 0.15s;
|
|
219
|
+
}
|
|
220
|
+
._1vqtdreg:hover {
|
|
221
|
+
background: color-mix(in srgb, currentColor 8%, transparent);
|
|
222
|
+
}
|
|
223
|
+
._1vqtdreh {
|
|
224
|
+
flex: 1;
|
|
225
|
+
position: relative;
|
|
226
|
+
min-height: 0;
|
|
227
|
+
}
|
|
228
|
+
._1vqtdrei {
|
|
229
|
+
display: flex;
|
|
230
|
+
justify-content: flex-end;
|
|
231
|
+
gap: 8px;
|
|
232
|
+
}
|
|
233
|
+
._1vqtdrej {
|
|
234
|
+
padding: 6px 14px;
|
|
235
|
+
border-radius: 6px;
|
|
236
|
+
border: 1px solid var(--rc-border);
|
|
237
|
+
background: transparent;
|
|
238
|
+
font-size: 0.8125rem;
|
|
239
|
+
font-weight: 500;
|
|
240
|
+
cursor: pointer;
|
|
241
|
+
transition: background 0.15s;
|
|
242
|
+
color: var(--rc-text);
|
|
243
|
+
}
|
|
244
|
+
._1vqtdrej:hover {
|
|
245
|
+
background: color-mix(in srgb, currentColor 6%, transparent);
|
|
246
|
+
}
|
|
247
|
+
._1vqtdrek {
|
|
248
|
+
padding: 6px 14px;
|
|
249
|
+
border-radius: 6px;
|
|
250
|
+
border: 1px solid var(--rc-accent);
|
|
251
|
+
background: var(--rc-accent);
|
|
252
|
+
font-size: 0.8125rem;
|
|
253
|
+
font-weight: 500;
|
|
254
|
+
cursor: pointer;
|
|
255
|
+
transition: opacity 0.15s;
|
|
256
|
+
color: #fff;
|
|
257
|
+
}
|
|
258
|
+
._1vqtdrek:hover {
|
|
259
|
+
opacity: 0.9;
|
|
260
|
+
}
|
|
261
|
+
._1vqtdrel {
|
|
262
|
+
padding: 6px 14px;
|
|
263
|
+
border-radius: 6px;
|
|
264
|
+
border: 1px solid var(--rc-alert-caution);
|
|
265
|
+
background: transparent;
|
|
266
|
+
font-size: 0.8125rem;
|
|
267
|
+
font-weight: 500;
|
|
268
|
+
cursor: pointer;
|
|
269
|
+
transition: background 0.15s;
|
|
270
|
+
color: var(--rc-alert-caution);
|
|
271
|
+
}
|
|
272
|
+
._1vqtdrel:hover {
|
|
273
|
+
background: color-mix(in srgb, var(--rc-alert-caution) 10%, transparent);
|
|
274
|
+
}
|
|
275
|
+
._1vqtdrem {
|
|
276
|
+
position: absolute;
|
|
277
|
+
inset: 0;
|
|
278
|
+
z-index: 5;
|
|
279
|
+
display: flex;
|
|
280
|
+
align-items: center;
|
|
281
|
+
justify-content: center;
|
|
282
|
+
cursor: pointer;
|
|
283
|
+
background: transparent;
|
|
284
|
+
border: none;
|
|
285
|
+
transition: background 0.2s;
|
|
286
|
+
}
|
|
287
|
+
._1vqtdrem:hover {
|
|
288
|
+
background: color-mix(in srgb, currentColor 6%, transparent);
|
|
289
|
+
}
|
|
290
|
+
._1vqtdren {
|
|
291
|
+
display: flex;
|
|
292
|
+
align-items: center;
|
|
293
|
+
gap: 6px;
|
|
294
|
+
padding: 6px 14px;
|
|
295
|
+
border-radius: 6px;
|
|
296
|
+
background: var(--rc-bg);
|
|
297
|
+
border: 1px solid var(--rc-border);
|
|
298
|
+
color: var(--rc-text);
|
|
299
|
+
font-size: 0.8125rem;
|
|
300
|
+
font-weight: 500;
|
|
301
|
+
opacity: 0;
|
|
302
|
+
transition: opacity 0.2s;
|
|
303
|
+
}
|
|
304
|
+
._1vqtdrem:hover ._1vqtdren {
|
|
305
|
+
opacity: 1;
|
|
306
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export declare const tldrawStaticContainer: string;
|
|
2
|
+
export declare const tldrawEditorContainer: string;
|
|
3
|
+
export declare const tldrawLoading: string;
|
|
4
|
+
export declare const tldrawError: string;
|
|
5
|
+
export declare const tldrawActionGroup: string;
|
|
6
|
+
export declare const tldrawActionButton: string;
|
|
7
|
+
declare const _tldrawFullscreenPopup: string;
|
|
8
|
+
export { _tldrawFullscreenPopup as tldrawFullscreenPopup };
|
|
9
|
+
export declare const tldrawDialogHeader: string;
|
|
10
|
+
export declare const tldrawStatusDot: string;
|
|
11
|
+
export declare const tldrawDialogTitle: string;
|
|
12
|
+
export declare const tldrawDialogMeta: string;
|
|
13
|
+
export declare const tldrawHeaderActions: string;
|
|
14
|
+
export declare const tldrawHeaderClose: string;
|
|
15
|
+
export declare const tldrawActionBarBtn: string;
|
|
16
|
+
export declare const tldrawActionBarSep: string;
|
|
17
|
+
export declare const tldrawActionBarUrl: string;
|
|
18
|
+
export declare const tldrawDialogCanvas: string;
|
|
19
|
+
export declare const tldrawConfirmActions: string;
|
|
20
|
+
export declare const tldrawConfirmBtn: string;
|
|
21
|
+
export declare const tldrawConfirmBtnPrimary: string;
|
|
22
|
+
export declare const tldrawConfirmBtnDanger: string;
|
|
23
|
+
export declare const tldrawEditOverlay: string;
|
|
24
|
+
export declare const tldrawEditLabel: string;
|
|
25
|
+
//# sourceMappingURL=styles.css.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,qBAAqB,QAOhC,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAQhC,CAAA;AAEF,eAAO,MAAM,aAAa,QAQxB,CAAA;AAkBF,eAAO,MAAM,WAAW,QAUtB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAW5B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAgB7B,CAAA;AASF,QAAA,MAAM,sBAAsB,QAAY,CAAA;AA2BxC,OAAO,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,CAAA;AAI1D,eAAO,MAAM,kBAAkB,QAQ7B,CAAA;AAEF,eAAO,MAAM,eAAe,QAM1B,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAK9B,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAkB5B,CAAA;AAIF,eAAO,MAAM,kBAAkB,QAuB7B,CAAA;AAQF,eAAO,MAAM,kBAAkB,QAM7B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAqB7B,CAAA;AAIF,eAAO,MAAM,kBAAkB,QAI7B,CAAA;AAIF,eAAO,MAAM,oBAAoB,QAI/B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAa3B,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAalC,CAAA;AAEF,eAAO,MAAM,sBAAsB,QAajC,CAAA;AAIF,eAAO,MAAM,iBAAiB,QAc5B,CAAA;AAEF,eAAO,MAAM,eAAe,QAkB1B,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTldrawData.d.ts","sourceRoot":"","sources":["../src/useTldrawData.ts"],"names":[],"mappings":"AAIA,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;IACzC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,CA0F3D"}
|
package/package.json
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@haklex/rich-ext-tldraw",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Tldraw whiteboard extension",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/index.mjs",
|
|
10
|
+
"types": "./dist/index.d.ts"
|
|
11
|
+
},
|
|
12
|
+
"./style.css": "./dist/rich-ext-tldraw.css"
|
|
13
|
+
},
|
|
14
|
+
"main": "./dist/index.mjs",
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"tldraw": "^3.12.0"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@lexical/react": "^0.39.0",
|
|
23
|
+
"@types/react": "^19.0.0",
|
|
24
|
+
"@types/react-dom": "^19.0.0",
|
|
25
|
+
"@vanilla-extract/css": "^1.17.1",
|
|
26
|
+
"@vanilla-extract/vite-plugin": "^4.0.20",
|
|
27
|
+
"lexical": "^0.39.0",
|
|
28
|
+
"lucide-react": "^0.574.0",
|
|
29
|
+
"react": "19.2.4",
|
|
30
|
+
"react-dom": "19.2.4",
|
|
31
|
+
"typescript": "^5.9.0",
|
|
32
|
+
"vite": "^7.3.1",
|
|
33
|
+
"vite-plugin-dts": "^4.5.0",
|
|
34
|
+
"@haklex/rich-editor": "0.0.1",
|
|
35
|
+
"@haklex/rich-editor-ui": "0.0.1",
|
|
36
|
+
"@haklex/rich-style-token": "0.0.1"
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"@lexical/react": "^0.39.0",
|
|
40
|
+
"lexical": "^0.39.0",
|
|
41
|
+
"lucide-react": "^0.574.0",
|
|
42
|
+
"react": ">=19",
|
|
43
|
+
"react-dom": ">=19",
|
|
44
|
+
"@haklex/rich-editor": "0.0.1",
|
|
45
|
+
"@haklex/rich-editor-ui": "0.0.1",
|
|
46
|
+
"@haklex/rich-style-token": "0.0.1"
|
|
47
|
+
},
|
|
48
|
+
"publishConfig": {
|
|
49
|
+
"access": "public"
|
|
50
|
+
},
|
|
51
|
+
"scripts": {
|
|
52
|
+
"build": "vite build",
|
|
53
|
+
"dev:build": "vite build --watch"
|
|
54
|
+
},
|
|
55
|
+
"types": "./dist/index.d.ts"
|
|
56
|
+
}
|