@tldraw/editor 3.12.0-canary.2293191f9363 → 3.12.0-canary.337f4bc65d61
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-cjs/index.js +1 -1
- package/dist-cjs/lib/license/Watermark.js +8 -21
- package/dist-cjs/lib/license/Watermark.js.map +2 -2
- package/dist-cjs/version.js +3 -3
- package/dist-cjs/version.js.map +1 -1
- package/dist-esm/index.mjs +1 -1
- package/dist-esm/lib/license/Watermark.mjs +8 -21
- package/dist-esm/lib/license/Watermark.mjs.map +2 -2
- package/dist-esm/version.mjs +3 -3
- package/dist-esm/version.mjs.map +1 -1
- package/package.json +7 -7
- package/src/lib/license/Watermark.tsx +17 -31
- package/src/version.ts +3 -3
package/dist-cjs/index.js
CHANGED
|
@@ -24,7 +24,6 @@ module.exports = __toCommonJS(Watermark_exports);
|
|
|
24
24
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
25
|
var import_state_react = require("@tldraw/state-react");
|
|
26
26
|
var import_react = require("react");
|
|
27
|
-
var import_environment = require("../globals/environment");
|
|
28
27
|
var import_useCanvasEvents = require("../hooks/useCanvasEvents");
|
|
29
28
|
var import_useEditor = require("../hooks/useEditor");
|
|
30
29
|
var import_usePassThroughWheelEvents = require("../hooks/usePassThroughWheelEvents");
|
|
@@ -69,8 +68,8 @@ const WatermarkInner = (0, import_react.memo)(function WatermarkInner2({ src })
|
|
|
69
68
|
"data-mobile": isMobile,
|
|
70
69
|
draggable: false,
|
|
71
70
|
...events,
|
|
72
|
-
children:
|
|
73
|
-
"
|
|
71
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
72
|
+
"button",
|
|
74
73
|
{
|
|
75
74
|
draggable: false,
|
|
76
75
|
role: "button",
|
|
@@ -82,19 +81,6 @@ const WatermarkInner = (0, import_react.memo)(function WatermarkInner2({ src })
|
|
|
82
81
|
onClick: () => import_runtime.runtime.openWindow(url, "_blank"),
|
|
83
82
|
style: { mask: maskCss, WebkitMask: maskCss }
|
|
84
83
|
}
|
|
85
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
86
|
-
"a",
|
|
87
|
-
{
|
|
88
|
-
href: url,
|
|
89
|
-
target: "_blank",
|
|
90
|
-
rel: "noreferrer",
|
|
91
|
-
draggable: false,
|
|
92
|
-
onPointerDown: (e) => {
|
|
93
|
-
(0, import_dom.stopEventPropagation)(e);
|
|
94
|
-
},
|
|
95
|
-
title: "made with tldraw",
|
|
96
|
-
style: { mask: maskCss, WebkitMask: maskCss }
|
|
97
|
-
}
|
|
98
84
|
)
|
|
99
85
|
}
|
|
100
86
|
);
|
|
@@ -129,7 +115,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
|
|
|
129
115
|
box-sizing: content-box;
|
|
130
116
|
}
|
|
131
117
|
|
|
132
|
-
.${className} >
|
|
118
|
+
.${className} > button {
|
|
133
119
|
position: absolute;
|
|
134
120
|
width: 96px;
|
|
135
121
|
height: 32px;
|
|
@@ -137,6 +123,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
|
|
|
137
123
|
cursor: inherit;
|
|
138
124
|
color: var(--color-text);
|
|
139
125
|
opacity: .38;
|
|
126
|
+
border: 0;
|
|
140
127
|
background-color: currentColor;
|
|
141
128
|
}
|
|
142
129
|
|
|
@@ -151,13 +138,13 @@ To remove the watermark, please purchase a license at tldraw.dev.
|
|
|
151
138
|
height: 48px;
|
|
152
139
|
}
|
|
153
140
|
|
|
154
|
-
.${className}[data-mobile='true'] >
|
|
141
|
+
.${className}[data-mobile='true'] > button {
|
|
155
142
|
width: 8px;
|
|
156
143
|
height: 32px;
|
|
157
144
|
}
|
|
158
145
|
|
|
159
146
|
@media (hover: hover) {
|
|
160
|
-
.${className} >
|
|
147
|
+
.${className} > button {
|
|
161
148
|
pointer-events: none;
|
|
162
149
|
}
|
|
163
150
|
|
|
@@ -167,12 +154,12 @@ To remove the watermark, please purchase a license at tldraw.dev.
|
|
|
167
154
|
transition-delay: 0.32s;
|
|
168
155
|
}
|
|
169
156
|
|
|
170
|
-
.${className}:hover >
|
|
157
|
+
.${className}:hover > button {
|
|
171
158
|
animation: delayed_link 0.2s forwards ease-in-out;
|
|
172
159
|
animation-delay: 0.32s;
|
|
173
160
|
}
|
|
174
161
|
|
|
175
|
-
.${className} >
|
|
162
|
+
.${className} > button:focus-visible {
|
|
176
163
|
opacity: 1;
|
|
177
164
|
}
|
|
178
165
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/license/Watermark.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { memo, useRef } from 'react'\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { memo, useRef } from 'react'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'\nimport { preventDefault, stopEventPropagation } from '../utils/dom'\nimport { runtime } from '../utils/runtime'\nimport { watermarkDesktopSvg, watermarkMobileSvg } from '../watermarks'\nimport { LicenseManager } from './LicenseManager'\nimport { useLicenseContext } from './LicenseProvider'\nimport { useLicenseManagerState } from './useLicenseManagerState'\n\nconst WATERMARK_DESKTOP_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkDesktopSvg)}`\nconst WATERMARK_MOBILE_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkMobileSvg)}`\n\n/** @internal */\nexport const Watermark = memo(function Watermark() {\n\tconst licenseManager = useLicenseContext()\n\tconst editor = useEditor()\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\n\tconst licenseManagerState = useLicenseManagerState(licenseManager)\n\n\tif (!['licensed-with-watermark', 'unlicensed'].includes(licenseManagerState)) return null\n\n\treturn (\n\t\t<>\n\t\t\t<LicenseStyles />\n\t\t\t<WatermarkInner src={isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC} />\n\t\t</>\n\t)\n})\n\nconst WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('debug mode', () => editor.getInstanceState().isDebugMode, [editor])\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\tconst events = useCanvasEvents()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst maskCss = `url('${src}') center 100% / 100% no-repeat`\n\tconst url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={LicenseManager.className}\n\t\t\tdata-debug={isDebugMode}\n\t\t\tdata-mobile={isMobile}\n\t\t\tdraggable={false}\n\t\t\t{...events}\n\t\t>\n\t\t\t<button\n\t\t\t\tdraggable={false}\n\t\t\t\trole=\"button\"\n\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}}\n\t\t\t\ttitle=\"made with tldraw\"\n\t\t\t\tonClick={() => runtime.openWindow(url, '_blank')}\n\t\t\t\tstyle={{ mask: maskCss, WebkitMask: maskCss }}\n\t\t\t/>\n\t\t</div>\n\t)\n})\n\nconst LicenseStyles = memo(function LicenseStyles() {\n\tconst editor = useEditor()\n\tconst className = LicenseManager.className\n\n\tconst CSS = `/* ------------------- SEE LICENSE -------------------\nThe tldraw watermark is part of tldraw's license. It is shown for unlicensed\nor \"licensed-with-watermark\" users. By using this library, you agree to\npreserve the watermark's behavior, keeping it visible, unobscured, and\navailable to user-interaction.\n\nTo remove the watermark, please purchase a license at tldraw.dev.\n*/\n\n\t.${className} {\n\t\tposition: absolute;\n\t\tbottom: var(--space-2);\n\t\tright: var(--space-2);\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tz-index: var(--layer-watermark) !important;\n\t\tbackground-color: color-mix(in srgb, var(--color-background) 62%, transparent);\n\t\topacity: 1;\n\t\tborder-radius: 5px;\n\t\tpointer-events: all;\n\t\tpadding: 2px;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.${className} > button {\n\t\tposition: absolute;\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tpointer-events: all;\n\t\tcursor: inherit;\n\t\tcolor: var(--color-text);\n\t\topacity: .38;\n\t\tborder: 0;\n\t\tbackground-color: currentColor;\n\t}\n\n\t.${className}[data-debug='true'] {\n\t\tbottom: 46px;\n\t}\n\n\t.${className}[data-mobile='true'] {\n\t\tborder-radius: 4px 0px 0px 4px;\n\t\tright: -2px;\n\t\twidth: 8px;\n\t\theight: 48px;\n\t}\n\n\t.${className}[data-mobile='true'] > button {\n\t\twidth: 8px;\n\t\theight: 32px;\n\t}\n\n\t@media (hover: hover) {\n\t\t.${className} > button {\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.${className}:hover {\n\t\t\tbackground-color: var(--color-background);\n\t\t\ttransition: background-color 0.2s ease-in-out;\n\t\t\ttransition-delay: 0.32s;\n\t\t}\n\n\t\t.${className}:hover > button {\n\t\t\tanimation: delayed_link 0.2s forwards ease-in-out;\n\t\t\tanimation-delay: 0.32s;\n\t\t}\n\n\t\t.${className} > button:focus-visible {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\n\t@keyframes delayed_link {\n\t\t0% {\n\t\t\tcursor: inherit;\n\t\t\topacity: .38;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t100% {\n\t\t\tcursor: pointer;\n\t\t\topacity: 1;\n\t\t\tpointer-events: all;\n\t\t}\n\t}`\n\n\treturn <style nonce={editor.options.nonce}>{CSS}</style>\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Watermark", "WatermarkInner", "LicenseStyles"]
|
|
7
7
|
}
|
package/dist-cjs/version.js
CHANGED
|
@@ -22,10 +22,10 @@ __export(version_exports, {
|
|
|
22
22
|
version: () => version
|
|
23
23
|
});
|
|
24
24
|
module.exports = __toCommonJS(version_exports);
|
|
25
|
-
const version = "3.12.0-canary.
|
|
25
|
+
const version = "3.12.0-canary.337f4bc65d61";
|
|
26
26
|
const publishDates = {
|
|
27
27
|
major: "2024-09-13T14:36:29.063Z",
|
|
28
|
-
minor: "2025-04-
|
|
29
|
-
patch: "2025-04-
|
|
28
|
+
minor: "2025-04-07T17:20:49.969Z",
|
|
29
|
+
patch: "2025-04-07T17:20:49.969Z"
|
|
30
30
|
};
|
|
31
31
|
//# sourceMappingURL=version.js.map
|
package/dist-cjs/version.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/version.ts"],
|
|
4
|
-
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.12.0-canary.
|
|
4
|
+
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.12.0-canary.337f4bc65d61'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-04-07T17:20:49.969Z',\n\tpatch: '2025-04-07T17:20:49.969Z',\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist-esm/index.mjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useValue } from "@tldraw/state-react";
|
|
3
3
|
import { memo, useRef } from "react";
|
|
4
|
-
import { tlenv } from "../globals/environment.mjs";
|
|
5
4
|
import { useCanvasEvents } from "../hooks/useCanvasEvents.mjs";
|
|
6
5
|
import { useEditor } from "../hooks/useEditor.mjs";
|
|
7
6
|
import { usePassThroughWheelEvents } from "../hooks/usePassThroughWheelEvents.mjs";
|
|
@@ -46,8 +45,8 @@ const WatermarkInner = memo(function WatermarkInner2({ src }) {
|
|
|
46
45
|
"data-mobile": isMobile,
|
|
47
46
|
draggable: false,
|
|
48
47
|
...events,
|
|
49
|
-
children:
|
|
50
|
-
"
|
|
48
|
+
children: /* @__PURE__ */ jsx(
|
|
49
|
+
"button",
|
|
51
50
|
{
|
|
52
51
|
draggable: false,
|
|
53
52
|
role: "button",
|
|
@@ -59,19 +58,6 @@ const WatermarkInner = memo(function WatermarkInner2({ src }) {
|
|
|
59
58
|
onClick: () => runtime.openWindow(url, "_blank"),
|
|
60
59
|
style: { mask: maskCss, WebkitMask: maskCss }
|
|
61
60
|
}
|
|
62
|
-
) : /* @__PURE__ */ jsx(
|
|
63
|
-
"a",
|
|
64
|
-
{
|
|
65
|
-
href: url,
|
|
66
|
-
target: "_blank",
|
|
67
|
-
rel: "noreferrer",
|
|
68
|
-
draggable: false,
|
|
69
|
-
onPointerDown: (e) => {
|
|
70
|
-
stopEventPropagation(e);
|
|
71
|
-
},
|
|
72
|
-
title: "made with tldraw",
|
|
73
|
-
style: { mask: maskCss, WebkitMask: maskCss }
|
|
74
|
-
}
|
|
75
61
|
)
|
|
76
62
|
}
|
|
77
63
|
);
|
|
@@ -106,7 +92,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
|
|
|
106
92
|
box-sizing: content-box;
|
|
107
93
|
}
|
|
108
94
|
|
|
109
|
-
.${className} >
|
|
95
|
+
.${className} > button {
|
|
110
96
|
position: absolute;
|
|
111
97
|
width: 96px;
|
|
112
98
|
height: 32px;
|
|
@@ -114,6 +100,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
|
|
|
114
100
|
cursor: inherit;
|
|
115
101
|
color: var(--color-text);
|
|
116
102
|
opacity: .38;
|
|
103
|
+
border: 0;
|
|
117
104
|
background-color: currentColor;
|
|
118
105
|
}
|
|
119
106
|
|
|
@@ -128,13 +115,13 @@ To remove the watermark, please purchase a license at tldraw.dev.
|
|
|
128
115
|
height: 48px;
|
|
129
116
|
}
|
|
130
117
|
|
|
131
|
-
.${className}[data-mobile='true'] >
|
|
118
|
+
.${className}[data-mobile='true'] > button {
|
|
132
119
|
width: 8px;
|
|
133
120
|
height: 32px;
|
|
134
121
|
}
|
|
135
122
|
|
|
136
123
|
@media (hover: hover) {
|
|
137
|
-
.${className} >
|
|
124
|
+
.${className} > button {
|
|
138
125
|
pointer-events: none;
|
|
139
126
|
}
|
|
140
127
|
|
|
@@ -144,12 +131,12 @@ To remove the watermark, please purchase a license at tldraw.dev.
|
|
|
144
131
|
transition-delay: 0.32s;
|
|
145
132
|
}
|
|
146
133
|
|
|
147
|
-
.${className}:hover >
|
|
134
|
+
.${className}:hover > button {
|
|
148
135
|
animation: delayed_link 0.2s forwards ease-in-out;
|
|
149
136
|
animation-delay: 0.32s;
|
|
150
137
|
}
|
|
151
138
|
|
|
152
|
-
.${className} >
|
|
139
|
+
.${className} > button:focus-visible {
|
|
153
140
|
opacity: 1;
|
|
154
141
|
}
|
|
155
142
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/lib/license/Watermark.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { memo, useRef } from 'react'\nimport {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { memo, useRef } from 'react'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'\nimport { preventDefault, stopEventPropagation } from '../utils/dom'\nimport { runtime } from '../utils/runtime'\nimport { watermarkDesktopSvg, watermarkMobileSvg } from '../watermarks'\nimport { LicenseManager } from './LicenseManager'\nimport { useLicenseContext } from './LicenseProvider'\nimport { useLicenseManagerState } from './useLicenseManagerState'\n\nconst WATERMARK_DESKTOP_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkDesktopSvg)}`\nconst WATERMARK_MOBILE_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkMobileSvg)}`\n\n/** @internal */\nexport const Watermark = memo(function Watermark() {\n\tconst licenseManager = useLicenseContext()\n\tconst editor = useEditor()\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\n\tconst licenseManagerState = useLicenseManagerState(licenseManager)\n\n\tif (!['licensed-with-watermark', 'unlicensed'].includes(licenseManagerState)) return null\n\n\treturn (\n\t\t<>\n\t\t\t<LicenseStyles />\n\t\t\t<WatermarkInner src={isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC} />\n\t\t</>\n\t)\n})\n\nconst WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('debug mode', () => editor.getInstanceState().isDebugMode, [editor])\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\tconst events = useCanvasEvents()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst maskCss = `url('${src}') center 100% / 100% no-repeat`\n\tconst url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={LicenseManager.className}\n\t\t\tdata-debug={isDebugMode}\n\t\t\tdata-mobile={isMobile}\n\t\t\tdraggable={false}\n\t\t\t{...events}\n\t\t>\n\t\t\t<button\n\t\t\t\tdraggable={false}\n\t\t\t\trole=\"button\"\n\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}}\n\t\t\t\ttitle=\"made with tldraw\"\n\t\t\t\tonClick={() => runtime.openWindow(url, '_blank')}\n\t\t\t\tstyle={{ mask: maskCss, WebkitMask: maskCss }}\n\t\t\t/>\n\t\t</div>\n\t)\n})\n\nconst LicenseStyles = memo(function LicenseStyles() {\n\tconst editor = useEditor()\n\tconst className = LicenseManager.className\n\n\tconst CSS = `/* ------------------- SEE LICENSE -------------------\nThe tldraw watermark is part of tldraw's license. It is shown for unlicensed\nor \"licensed-with-watermark\" users. By using this library, you agree to\npreserve the watermark's behavior, keeping it visible, unobscured, and\navailable to user-interaction.\n\nTo remove the watermark, please purchase a license at tldraw.dev.\n*/\n\n\t.${className} {\n\t\tposition: absolute;\n\t\tbottom: var(--space-2);\n\t\tright: var(--space-2);\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tz-index: var(--layer-watermark) !important;\n\t\tbackground-color: color-mix(in srgb, var(--color-background) 62%, transparent);\n\t\topacity: 1;\n\t\tborder-radius: 5px;\n\t\tpointer-events: all;\n\t\tpadding: 2px;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.${className} > button {\n\t\tposition: absolute;\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tpointer-events: all;\n\t\tcursor: inherit;\n\t\tcolor: var(--color-text);\n\t\topacity: .38;\n\t\tborder: 0;\n\t\tbackground-color: currentColor;\n\t}\n\n\t.${className}[data-debug='true'] {\n\t\tbottom: 46px;\n\t}\n\n\t.${className}[data-mobile='true'] {\n\t\tborder-radius: 4px 0px 0px 4px;\n\t\tright: -2px;\n\t\twidth: 8px;\n\t\theight: 48px;\n\t}\n\n\t.${className}[data-mobile='true'] > button {\n\t\twidth: 8px;\n\t\theight: 32px;\n\t}\n\n\t@media (hover: hover) {\n\t\t.${className} > button {\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.${className}:hover {\n\t\t\tbackground-color: var(--color-background);\n\t\t\ttransition: background-color 0.2s ease-in-out;\n\t\t\ttransition-delay: 0.32s;\n\t\t}\n\n\t\t.${className}:hover > button {\n\t\t\tanimation: delayed_link 0.2s forwards ease-in-out;\n\t\t\tanimation-delay: 0.32s;\n\t\t}\n\n\t\t.${className} > button:focus-visible {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\n\t@keyframes delayed_link {\n\t\t0% {\n\t\t\tcursor: inherit;\n\t\t\topacity: .38;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t100% {\n\t\t\tcursor: pointer;\n\t\t\topacity: 1;\n\t\t\tpointer-events: all;\n\t\t}\n\t}`\n\n\treturn <style nonce={editor.options.nonce}>{CSS}</style>\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Watermark", "WatermarkInner", "LicenseStyles"]
|
|
7
7
|
}
|
package/dist-esm/version.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
const version = "3.12.0-canary.
|
|
1
|
+
const version = "3.12.0-canary.337f4bc65d61";
|
|
2
2
|
const publishDates = {
|
|
3
3
|
major: "2024-09-13T14:36:29.063Z",
|
|
4
|
-
minor: "2025-04-
|
|
5
|
-
patch: "2025-04-
|
|
4
|
+
minor: "2025-04-07T17:20:49.969Z",
|
|
5
|
+
patch: "2025-04-07T17:20:49.969Z"
|
|
6
6
|
};
|
|
7
7
|
export {
|
|
8
8
|
publishDates,
|
package/dist-esm/version.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/version.ts"],
|
|
4
|
-
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.12.0-canary.
|
|
4
|
+
"sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.12.0-canary.337f4bc65d61'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-04-07T17:20:49.969Z',\n\tpatch: '2025-04-07T17:20:49.969Z',\n}\n"],
|
|
5
5
|
"mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tldraw/editor",
|
|
3
3
|
"description": "A tiny little drawing app (editor).",
|
|
4
|
-
"version": "3.12.0-canary.
|
|
4
|
+
"version": "3.12.0-canary.337f4bc65d61",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "tldraw Inc.",
|
|
7
7
|
"email": "hello@tldraw.com"
|
|
@@ -48,12 +48,12 @@
|
|
|
48
48
|
"@tiptap/core": "^2.9.1",
|
|
49
49
|
"@tiptap/pm": "^2.9.1",
|
|
50
50
|
"@tiptap/react": "^2.9.1",
|
|
51
|
-
"@tldraw/state": "3.12.0-canary.
|
|
52
|
-
"@tldraw/state-react": "3.12.0-canary.
|
|
53
|
-
"@tldraw/store": "3.12.0-canary.
|
|
54
|
-
"@tldraw/tlschema": "3.12.0-canary.
|
|
55
|
-
"@tldraw/utils": "3.12.0-canary.
|
|
56
|
-
"@tldraw/validate": "3.12.0-canary.
|
|
51
|
+
"@tldraw/state": "3.12.0-canary.337f4bc65d61",
|
|
52
|
+
"@tldraw/state-react": "3.12.0-canary.337f4bc65d61",
|
|
53
|
+
"@tldraw/store": "3.12.0-canary.337f4bc65d61",
|
|
54
|
+
"@tldraw/tlschema": "3.12.0-canary.337f4bc65d61",
|
|
55
|
+
"@tldraw/utils": "3.12.0-canary.337f4bc65d61",
|
|
56
|
+
"@tldraw/validate": "3.12.0-canary.337f4bc65d61",
|
|
57
57
|
"@types/core-js": "^2.5.8",
|
|
58
58
|
"@use-gesture/react": "^10.3.1",
|
|
59
59
|
"classnames": "^2.5.1",
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { useValue } from '@tldraw/state-react'
|
|
2
2
|
import { memo, useRef } from 'react'
|
|
3
|
-
import { tlenv } from '../globals/environment'
|
|
4
3
|
import { useCanvasEvents } from '../hooks/useCanvasEvents'
|
|
5
4
|
import { useEditor } from '../hooks/useEditor'
|
|
6
5
|
import { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'
|
|
@@ -57,31 +56,17 @@ const WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {
|
|
|
57
56
|
draggable={false}
|
|
58
57
|
{...events}
|
|
59
58
|
>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
/>
|
|
72
|
-
) : (
|
|
73
|
-
<a
|
|
74
|
-
href={url}
|
|
75
|
-
target="_blank"
|
|
76
|
-
rel="noreferrer"
|
|
77
|
-
draggable={false}
|
|
78
|
-
onPointerDown={(e) => {
|
|
79
|
-
stopEventPropagation(e)
|
|
80
|
-
}}
|
|
81
|
-
title="made with tldraw"
|
|
82
|
-
style={{ mask: maskCss, WebkitMask: maskCss }}
|
|
83
|
-
/>
|
|
84
|
-
)}
|
|
59
|
+
<button
|
|
60
|
+
draggable={false}
|
|
61
|
+
role="button"
|
|
62
|
+
onPointerDown={(e) => {
|
|
63
|
+
stopEventPropagation(e)
|
|
64
|
+
preventDefault(e)
|
|
65
|
+
}}
|
|
66
|
+
title="made with tldraw"
|
|
67
|
+
onClick={() => runtime.openWindow(url, '_blank')}
|
|
68
|
+
style={{ mask: maskCss, WebkitMask: maskCss }}
|
|
69
|
+
/>
|
|
85
70
|
</div>
|
|
86
71
|
)
|
|
87
72
|
})
|
|
@@ -117,7 +102,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
|
|
|
117
102
|
box-sizing: content-box;
|
|
118
103
|
}
|
|
119
104
|
|
|
120
|
-
.${className} >
|
|
105
|
+
.${className} > button {
|
|
121
106
|
position: absolute;
|
|
122
107
|
width: 96px;
|
|
123
108
|
height: 32px;
|
|
@@ -125,6 +110,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
|
|
|
125
110
|
cursor: inherit;
|
|
126
111
|
color: var(--color-text);
|
|
127
112
|
opacity: .38;
|
|
113
|
+
border: 0;
|
|
128
114
|
background-color: currentColor;
|
|
129
115
|
}
|
|
130
116
|
|
|
@@ -139,13 +125,13 @@ To remove the watermark, please purchase a license at tldraw.dev.
|
|
|
139
125
|
height: 48px;
|
|
140
126
|
}
|
|
141
127
|
|
|
142
|
-
.${className}[data-mobile='true'] >
|
|
128
|
+
.${className}[data-mobile='true'] > button {
|
|
143
129
|
width: 8px;
|
|
144
130
|
height: 32px;
|
|
145
131
|
}
|
|
146
132
|
|
|
147
133
|
@media (hover: hover) {
|
|
148
|
-
.${className} >
|
|
134
|
+
.${className} > button {
|
|
149
135
|
pointer-events: none;
|
|
150
136
|
}
|
|
151
137
|
|
|
@@ -155,12 +141,12 @@ To remove the watermark, please purchase a license at tldraw.dev.
|
|
|
155
141
|
transition-delay: 0.32s;
|
|
156
142
|
}
|
|
157
143
|
|
|
158
|
-
.${className}:hover >
|
|
144
|
+
.${className}:hover > button {
|
|
159
145
|
animation: delayed_link 0.2s forwards ease-in-out;
|
|
160
146
|
animation-delay: 0.32s;
|
|
161
147
|
}
|
|
162
148
|
|
|
163
|
-
.${className} >
|
|
149
|
+
.${className} > button:focus-visible {
|
|
164
150
|
opacity: 1;
|
|
165
151
|
}
|
|
166
152
|
}
|
package/src/version.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// This file is automatically generated by internal/scripts/refresh-assets.ts.
|
|
2
2
|
// Do not edit manually. Or do, I'm a comment, not a cop.
|
|
3
3
|
|
|
4
|
-
export const version = '3.12.0-canary.
|
|
4
|
+
export const version = '3.12.0-canary.337f4bc65d61'
|
|
5
5
|
export const publishDates = {
|
|
6
6
|
major: '2024-09-13T14:36:29.063Z',
|
|
7
|
-
minor: '2025-04-
|
|
8
|
-
patch: '2025-04-
|
|
7
|
+
minor: '2025-04-07T17:20:49.969Z',
|
|
8
|
+
patch: '2025-04-07T17:20:49.969Z',
|
|
9
9
|
}
|