@haklex/rich-ext-tldraw 0.0.2 → 0.0.3
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/index.mjs +3 -170
- package/package.json +7 -10
package/dist/index.mjs
CHANGED
|
@@ -2,9 +2,11 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
4
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
5
|
-
import { createContext, use, useMemo,
|
|
5
|
+
import { createContext, use, useMemo, useState, useEffect, useRef, useCallback, lazy, createElement, Suspense, Component } from "react";
|
|
6
6
|
import { useColorScheme } from "@haklex/rich-editor";
|
|
7
7
|
import { presentDialog, SegmentedControl } from "@haklex/rich-editor-ui";
|
|
8
|
+
import { usePortalTheme } from "@haklex/rich-style-token";
|
|
9
|
+
import { Pencil, Upload, Download, Clipboard, X, PenTool, ZoomIn, ZoomOut, ScanSearch, Maximize2 } from "lucide-react";
|
|
8
10
|
import { DecoratorNode, $insertNodes, $getNodeByKey, createCommand, COMMAND_PRIORITY_EDITOR } from "lexical";
|
|
9
11
|
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
|
10
12
|
const TldrawConfigContext = createContext({});
|
|
@@ -22,175 +24,6 @@ function TldrawConfigProvider({
|
|
|
22
24
|
function useTldrawConfig() {
|
|
23
25
|
return use(TldrawConfigContext);
|
|
24
26
|
}
|
|
25
|
-
const PortalThemeContext = createContext({
|
|
26
|
-
className: ""
|
|
27
|
-
});
|
|
28
|
-
function usePortalTheme() {
|
|
29
|
-
return use(PortalThemeContext);
|
|
30
|
-
}
|
|
31
|
-
const mergeClasses = (...classes) => classes.filter((className, index, array) => {
|
|
32
|
-
return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
|
|
33
|
-
}).join(" ").trim();
|
|
34
|
-
const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
35
|
-
const toCamelCase = (string) => string.replace(
|
|
36
|
-
/^([A-Z])|[\s-_]+(\w)/g,
|
|
37
|
-
(match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
|
|
38
|
-
);
|
|
39
|
-
const toPascalCase = (string) => {
|
|
40
|
-
const camelCase = toCamelCase(string);
|
|
41
|
-
return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
|
|
42
|
-
};
|
|
43
|
-
var defaultAttributes = {
|
|
44
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
45
|
-
width: 24,
|
|
46
|
-
height: 24,
|
|
47
|
-
viewBox: "0 0 24 24",
|
|
48
|
-
fill: "none",
|
|
49
|
-
stroke: "currentColor",
|
|
50
|
-
strokeWidth: 2,
|
|
51
|
-
strokeLinecap: "round",
|
|
52
|
-
strokeLinejoin: "round"
|
|
53
|
-
};
|
|
54
|
-
const hasA11yProp = (props) => {
|
|
55
|
-
for (const prop in props) {
|
|
56
|
-
if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
|
|
57
|
-
return true;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
return false;
|
|
61
|
-
};
|
|
62
|
-
const Icon = forwardRef(
|
|
63
|
-
({
|
|
64
|
-
color = "currentColor",
|
|
65
|
-
size = 24,
|
|
66
|
-
strokeWidth = 2,
|
|
67
|
-
absoluteStrokeWidth,
|
|
68
|
-
className = "",
|
|
69
|
-
children,
|
|
70
|
-
iconNode,
|
|
71
|
-
...rest
|
|
72
|
-
}, ref) => createElement(
|
|
73
|
-
"svg",
|
|
74
|
-
{
|
|
75
|
-
ref,
|
|
76
|
-
...defaultAttributes,
|
|
77
|
-
width: size,
|
|
78
|
-
height: size,
|
|
79
|
-
stroke: color,
|
|
80
|
-
strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
|
|
81
|
-
className: mergeClasses("lucide", className),
|
|
82
|
-
...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
|
|
83
|
-
...rest
|
|
84
|
-
},
|
|
85
|
-
[
|
|
86
|
-
...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
|
|
87
|
-
...Array.isArray(children) ? children : [children]
|
|
88
|
-
]
|
|
89
|
-
)
|
|
90
|
-
);
|
|
91
|
-
const createLucideIcon = (iconName, iconNode) => {
|
|
92
|
-
const Component2 = forwardRef(
|
|
93
|
-
({ className, ...props }, ref) => createElement(Icon, {
|
|
94
|
-
ref,
|
|
95
|
-
iconNode,
|
|
96
|
-
className: mergeClasses(
|
|
97
|
-
`lucide-${toKebabCase(toPascalCase(iconName))}`,
|
|
98
|
-
`lucide-${iconName}`,
|
|
99
|
-
className
|
|
100
|
-
),
|
|
101
|
-
...props
|
|
102
|
-
})
|
|
103
|
-
);
|
|
104
|
-
Component2.displayName = toPascalCase(iconName);
|
|
105
|
-
return Component2;
|
|
106
|
-
};
|
|
107
|
-
const __iconNode$9 = [
|
|
108
|
-
["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
|
|
109
|
-
[
|
|
110
|
-
"path",
|
|
111
|
-
{
|
|
112
|
-
d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2",
|
|
113
|
-
key: "116196"
|
|
114
|
-
}
|
|
115
|
-
]
|
|
116
|
-
];
|
|
117
|
-
const Clipboard = createLucideIcon("clipboard", __iconNode$9);
|
|
118
|
-
const __iconNode$8 = [
|
|
119
|
-
["path", { d: "M12 15V3", key: "m9g1x1" }],
|
|
120
|
-
["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
|
|
121
|
-
["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
|
|
122
|
-
];
|
|
123
|
-
const Download = createLucideIcon("download", __iconNode$8);
|
|
124
|
-
const __iconNode$7 = [
|
|
125
|
-
["path", { d: "M15 3h6v6", key: "1q9fwt" }],
|
|
126
|
-
["path", { d: "m21 3-7 7", key: "1l2asr" }],
|
|
127
|
-
["path", { d: "m3 21 7-7", key: "tjx5ai" }],
|
|
128
|
-
["path", { d: "M9 21H3v-6", key: "wtvkvv" }]
|
|
129
|
-
];
|
|
130
|
-
const Maximize2 = createLucideIcon("maximize-2", __iconNode$7);
|
|
131
|
-
const __iconNode$6 = [
|
|
132
|
-
[
|
|
133
|
-
"path",
|
|
134
|
-
{
|
|
135
|
-
d: "M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z",
|
|
136
|
-
key: "nt11vn"
|
|
137
|
-
}
|
|
138
|
-
],
|
|
139
|
-
[
|
|
140
|
-
"path",
|
|
141
|
-
{
|
|
142
|
-
d: "m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18",
|
|
143
|
-
key: "15qc1e"
|
|
144
|
-
}
|
|
145
|
-
],
|
|
146
|
-
["path", { d: "m2.3 2.3 7.286 7.286", key: "1wuzzi" }],
|
|
147
|
-
["circle", { cx: "11", cy: "11", r: "2", key: "xmgehs" }]
|
|
148
|
-
];
|
|
149
|
-
const PenTool = createLucideIcon("pen-tool", __iconNode$6);
|
|
150
|
-
const __iconNode$5 = [
|
|
151
|
-
[
|
|
152
|
-
"path",
|
|
153
|
-
{
|
|
154
|
-
d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
|
|
155
|
-
key: "1a8usu"
|
|
156
|
-
}
|
|
157
|
-
],
|
|
158
|
-
["path", { d: "m15 5 4 4", key: "1mk7zo" }]
|
|
159
|
-
];
|
|
160
|
-
const Pencil = createLucideIcon("pencil", __iconNode$5);
|
|
161
|
-
const __iconNode$4 = [
|
|
162
|
-
["path", { d: "M3 7V5a2 2 0 0 1 2-2h2", key: "aa7l1z" }],
|
|
163
|
-
["path", { d: "M17 3h2a2 2 0 0 1 2 2v2", key: "4qcy5o" }],
|
|
164
|
-
["path", { d: "M21 17v2a2 2 0 0 1-2 2h-2", key: "6vwrx8" }],
|
|
165
|
-
["path", { d: "M7 21H5a2 2 0 0 1-2-2v-2", key: "ioqczr" }],
|
|
166
|
-
["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }],
|
|
167
|
-
["path", { d: "m16 16-1.9-1.9", key: "1dq9hf" }]
|
|
168
|
-
];
|
|
169
|
-
const ScanSearch = createLucideIcon("scan-search", __iconNode$4);
|
|
170
|
-
const __iconNode$3 = [
|
|
171
|
-
["path", { d: "M12 3v12", key: "1x0j5s" }],
|
|
172
|
-
["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
|
|
173
|
-
["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
|
|
174
|
-
];
|
|
175
|
-
const Upload = createLucideIcon("upload", __iconNode$3);
|
|
176
|
-
const __iconNode$2 = [
|
|
177
|
-
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
178
|
-
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
179
|
-
];
|
|
180
|
-
const X = createLucideIcon("x", __iconNode$2);
|
|
181
|
-
const __iconNode$1 = [
|
|
182
|
-
["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
|
|
183
|
-
["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65", key: "13gj7c" }],
|
|
184
|
-
["line", { x1: "11", x2: "11", y1: "8", y2: "14", key: "1vmskp" }],
|
|
185
|
-
["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
|
|
186
|
-
];
|
|
187
|
-
const ZoomIn = createLucideIcon("zoom-in", __iconNode$1);
|
|
188
|
-
const __iconNode = [
|
|
189
|
-
["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
|
|
190
|
-
["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65", key: "13gj7c" }],
|
|
191
|
-
["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
|
|
192
|
-
];
|
|
193
|
-
const ZoomOut = createLucideIcon("zoom-out", __iconNode);
|
|
194
27
|
var tldrawStaticContainer = "_1vqtdre0";
|
|
195
28
|
var tldrawEditorContainer = "_1vqtdre1";
|
|
196
29
|
var tldrawLoading = "_1vqtdre2";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haklex/rich-ext-tldraw",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Tldraw whiteboard extension",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -16,7 +16,10 @@
|
|
|
16
16
|
"dist"
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"tldraw": "^3.12.0"
|
|
19
|
+
"tldraw": "^3.12.0",
|
|
20
|
+
"@haklex/rich-editor": "0.0.3",
|
|
21
|
+
"@haklex/rich-style-token": "0.0.3",
|
|
22
|
+
"@haklex/rich-editor-ui": "0.0.3"
|
|
20
23
|
},
|
|
21
24
|
"devDependencies": {
|
|
22
25
|
"@lexical/react": "^0.39.0",
|
|
@@ -30,20 +33,14 @@
|
|
|
30
33
|
"react-dom": "19.2.4",
|
|
31
34
|
"typescript": "^5.9.0",
|
|
32
35
|
"vite": "^7.3.1",
|
|
33
|
-
"vite-plugin-dts": "^4.5.0"
|
|
34
|
-
"@haklex/rich-editor": "0.0.2",
|
|
35
|
-
"@haklex/rich-editor-ui": "0.0.2",
|
|
36
|
-
"@haklex/rich-style-token": "0.0.2"
|
|
36
|
+
"vite-plugin-dts": "^4.5.0"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@lexical/react": "^0.39.0",
|
|
40
40
|
"lexical": "^0.39.0",
|
|
41
41
|
"lucide-react": "^0.574.0",
|
|
42
42
|
"react": ">=19",
|
|
43
|
-
"react-dom": ">=19"
|
|
44
|
-
"@haklex/rich-editor": "0.0.2",
|
|
45
|
-
"@haklex/rich-style-token": "0.0.2",
|
|
46
|
-
"@haklex/rich-editor-ui": "0.0.2"
|
|
43
|
+
"react-dom": ">=19"
|
|
47
44
|
},
|
|
48
45
|
"publishConfig": {
|
|
49
46
|
"access": "public"
|