@andreagiugni/tailwind-dashboard-ui 0.5.2 → 0.5.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/README.md +5 -5
- package/dist/{Editor-uOYxR3HX.d.cts → Editor-CHBOfOWf.d.cts} +1 -1
- package/dist/{Editor-uOYxR3HX.d.ts → Editor-CHBOfOWf.d.ts} +1 -1
- package/dist/{chunk-4OETC46A.js → chunk-DXUWFHPF.js} +31 -3
- package/dist/chunk-DXUWFHPF.js.map +1 -0
- package/dist/chunk-LXA5UOBC.js +291 -0
- package/dist/chunk-LXA5UOBC.js.map +1 -0
- package/dist/{chunk-W7SNEBD7.cjs → chunk-S4ADL5B7.cjs} +33 -3
- package/dist/chunk-S4ADL5B7.cjs.map +1 -0
- package/dist/chunk-T55WXZNL.cjs +293 -0
- package/dist/chunk-T55WXZNL.cjs.map +1 -0
- package/dist/components/ColorPicker/ColorPicker.cjs +2 -2
- package/dist/components/ColorPicker/ColorPicker.js +1 -1
- package/dist/components/Editor/Editor.cjs +2 -2
- package/dist/components/Editor/Editor.d.cts +1 -1
- package/dist/components/Editor/Editor.d.ts +1 -1
- package/dist/components/Editor/Editor.js +1 -1
- package/dist/index.cjs +10 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +8 -8
- package/dist/index.js.map +1 -1
- package/package.json +11 -1
- package/dist/chunk-4OETC46A.js.map +0 -1
- package/dist/chunk-MYN5LDMO.cjs +0 -184
- package/dist/chunk-MYN5LDMO.cjs.map +0 -1
- package/dist/chunk-P7LI2FSR.js +0 -182
- package/dist/chunk-P7LI2FSR.js.map +0 -1
- package/dist/chunk-W7SNEBD7.cjs.map +0 -1
package/README.md
CHANGED
|
@@ -32,13 +32,13 @@ data-viz component:
|
|
|
32
32
|
| `BarChart`, `LineChart` | `apexcharts`, `react-apexcharts` |
|
|
33
33
|
| `Calendar` | `@fullcalendar/core`, `@fullcalendar/react`, `@fullcalendar/daygrid`, `@fullcalendar/timegrid`, `@fullcalendar/list`, `@fullcalendar/interaction` |
|
|
34
34
|
| `CountryMap` | `@react-jvectormap/core`, `@react-jvectormap/world` |
|
|
35
|
-
| `Editor` (WYSIWYG) | `@tiptap/react`, `@tiptap/pm`, `@tiptap/starter-kit`, `@tiptap/extension-link`, `@tiptap/extension-placeholder` |
|
|
35
|
+
| `Editor` (WYSIWYG) | `@tiptap/react`, `@tiptap/pm`, `@tiptap/starter-kit`, `@tiptap/extension-link`, `@tiptap/extension-placeholder`, `@tiptap/extension-superscript`, `@tiptap/extension-subscript` |
|
|
36
36
|
|
|
37
37
|
Install only the ones for the components you use, e.g.:
|
|
38
38
|
|
|
39
39
|
```bash
|
|
40
40
|
npm i apexcharts react-apexcharts # for BarChart / LineChart
|
|
41
|
-
npm i @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-placeholder # for Editor
|
|
41
|
+
npm i @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-placeholder @tiptap/extension-superscript @tiptap/extension-subscript # for Editor
|
|
42
42
|
```
|
|
43
43
|
|
|
44
44
|
> **SSR note:** the data-viz components and the `Editor` touch `window`/the DOM at render time.
|
|
@@ -205,7 +205,7 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
|
|
|
205
205
|
| `DatePicker` | `id`, `mode` (single/multiple/range/time), `defaultDate`, `onChange`, `label`, `placeholder` |
|
|
206
206
|
| `DateTimePicker` | `id`, `label?`, `placeholder?`, `defaultDate?`, `defaultTime?` (`"HH:MM"`), `onChange?({ date, time })` — flatpickr date calendar + a compact `HH:MM` time input |
|
|
207
207
|
| `Slider` | `value` / `defaultValue`, `onChange(value)`, `min`, `max`, `step`, `color`, `label?`, `showValue?`, `disabled` |
|
|
208
|
-
| `ColorPicker` | `defaultValue?` (hex), `defaultFormat?` / `formats?` (`hex`/`rgb`/`rgba`/`hsl`/`hsla`), `showInput?`, `withEyeDropper?`, `label?`, `onChange?(value, color)` — saturation/hue/alpha
|
|
208
|
+
| `ColorPicker` | `defaultValue?` (hex), `defaultFormat?` / `formats?` (`hex`/`rgb`/`rgba`/`hsl`/`hsla`), `showInput?`, `withEyeDropper?`, `label?`, `onChange?(value, color)` — compact swatch + formatted value trigger opening a saturation/hue/alpha popup with a value input and format switcher; built on `react-beautiful-color` (bundled), client-only, **import its CSS** (see ColorPicker note above) |
|
|
209
209
|
| `Editor` (WYSIWYG) | `content`, `onChange(html)`, `placeholder?`, `editable?`, `toolbar?` (ordered tool ids or custom buttons), `editorClassName?` — optional Tiptap peers; render client-only (see Data viz) |
|
|
210
210
|
|
|
211
211
|
### Data viz
|
|
@@ -226,8 +226,8 @@ in [Peer dependencies](#peer-dependencies)).
|
|
|
226
226
|
|
|
227
227
|
The `Editor` is a Tiptap-powered rich-text editor with a fully customizable toolbar. Pass an
|
|
228
228
|
ordered `toolbar` array of built-in tool ids (`"bold" | "italic" | "strike" | "code" |
|
|
229
|
-
"
|
|
230
|
-
"codeBlock" | "link" | "undo" | "redo" | "divider"`) or custom `{ id, icon, title, onClick,
|
|
229
|
+
"superscript" | "subscript" | "heading1" | "heading2" | "heading3" | "bulletList" |
|
|
230
|
+
"orderedList" | "blockquote" | "codeBlock" | "link" | "undo" | "redo" | "divider"`) or custom `{ id, icon, title, onClick,
|
|
231
231
|
isActive? }` button objects. Set `editable={false}` for a read-only view (toolbar hidden).
|
|
232
232
|
|
|
233
233
|
```tsx
|
|
@@ -12,7 +12,7 @@ interface ColorOverrideProps {
|
|
|
12
12
|
declare function styleOverride({ bgColor, textColor, borderColor, }: ColorOverrideProps): CSSProperties;
|
|
13
13
|
|
|
14
14
|
/** Built-in toolbar tool ids. */
|
|
15
|
-
type ToolbarItemId = "bold" | "italic" | "strike" | "code" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "blockquote" | "codeBlock" | "link" | "undo" | "redo" | "divider";
|
|
15
|
+
type ToolbarItemId = "bold" | "italic" | "strike" | "code" | "superscript" | "subscript" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "blockquote" | "codeBlock" | "link" | "undo" | "redo" | "divider";
|
|
16
16
|
/** A fully custom toolbar button. */
|
|
17
17
|
interface CustomToolbarItem {
|
|
18
18
|
id: string;
|
|
@@ -12,7 +12,7 @@ interface ColorOverrideProps {
|
|
|
12
12
|
declare function styleOverride({ bgColor, textColor, borderColor, }: ColorOverrideProps): CSSProperties;
|
|
13
13
|
|
|
14
14
|
/** Built-in toolbar tool ids. */
|
|
15
|
-
type ToolbarItemId = "bold" | "italic" | "strike" | "code" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "blockquote" | "codeBlock" | "link" | "undo" | "redo" | "divider";
|
|
15
|
+
type ToolbarItemId = "bold" | "italic" | "strike" | "code" | "superscript" | "subscript" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "blockquote" | "codeBlock" | "link" | "undo" | "redo" | "divider";
|
|
16
16
|
/** A fully custom toolbar button. */
|
|
17
17
|
interface CustomToolbarItem {
|
|
18
18
|
id: string;
|
|
@@ -5,6 +5,8 @@ import { useEditor, EditorContent } from '@tiptap/react';
|
|
|
5
5
|
import StarterKit from '@tiptap/starter-kit';
|
|
6
6
|
import Link from '@tiptap/extension-link';
|
|
7
7
|
import Placeholder from '@tiptap/extension-placeholder';
|
|
8
|
+
import Superscript from '@tiptap/extension-superscript';
|
|
9
|
+
import Subscript from '@tiptap/extension-subscript';
|
|
8
10
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
9
11
|
|
|
10
12
|
var base = {
|
|
@@ -91,11 +93,23 @@ var RedoIcon = () => /* @__PURE__ */ jsxs("svg", { ...base, children: [
|
|
|
91
93
|
/* @__PURE__ */ jsx("path", { d: "M21 7v6h-6" }),
|
|
92
94
|
/* @__PURE__ */ jsx("path", { d: "M21 13a9 9 0 1 1-3-7.7L21 8" })
|
|
93
95
|
] });
|
|
96
|
+
var SuperscriptIcon = () => /* @__PURE__ */ jsxs("svg", { ...base, children: [
|
|
97
|
+
/* @__PURE__ */ jsx("path", { d: "m4 19 8-10" }),
|
|
98
|
+
/* @__PURE__ */ jsx("path", { d: "m12 19-8-10" }),
|
|
99
|
+
/* @__PURE__ */ jsx("path", { d: "M20 9h-4c0-1.5.44-2 1.5-2.5S20 5.6 20 4.5C20 3.7 19.3 3 18.5 3S17 3.7 17 4.5" })
|
|
100
|
+
] });
|
|
101
|
+
var SubscriptIcon = () => /* @__PURE__ */ jsxs("svg", { ...base, children: [
|
|
102
|
+
/* @__PURE__ */ jsx("path", { d: "m4 5 8 10" }),
|
|
103
|
+
/* @__PURE__ */ jsx("path", { d: "m12 5-8 10" }),
|
|
104
|
+
/* @__PURE__ */ jsx("path", { d: "M20 21h-4c0-1.5.44-2 1.5-2.5S20 17.6 20 16.5c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5" })
|
|
105
|
+
] });
|
|
94
106
|
var DEFAULT_TOOLBAR = [
|
|
95
107
|
"bold",
|
|
96
108
|
"italic",
|
|
97
109
|
"strike",
|
|
98
110
|
"code",
|
|
111
|
+
"superscript",
|
|
112
|
+
"subscript",
|
|
99
113
|
"divider",
|
|
100
114
|
"heading1",
|
|
101
115
|
"heading2",
|
|
@@ -136,6 +150,18 @@ var BUILTINS = {
|
|
|
136
150
|
onClick: (e) => e.chain().focus().toggleCode().run(),
|
|
137
151
|
isActive: (e) => e.isActive("code")
|
|
138
152
|
},
|
|
153
|
+
superscript: {
|
|
154
|
+
icon: /* @__PURE__ */ jsx(SuperscriptIcon, {}),
|
|
155
|
+
title: "Superscript",
|
|
156
|
+
onClick: (e) => e.chain().focus().toggleSuperscript().run(),
|
|
157
|
+
isActive: (e) => e.isActive("superscript")
|
|
158
|
+
},
|
|
159
|
+
subscript: {
|
|
160
|
+
icon: /* @__PURE__ */ jsx(SubscriptIcon, {}),
|
|
161
|
+
title: "Subscript",
|
|
162
|
+
onClick: (e) => e.chain().focus().toggleSubscript().run(),
|
|
163
|
+
isActive: (e) => e.isActive("subscript")
|
|
164
|
+
},
|
|
139
165
|
heading1: {
|
|
140
166
|
icon: /* @__PURE__ */ jsx(Heading1Icon, {}),
|
|
141
167
|
title: "Heading 1",
|
|
@@ -234,7 +260,9 @@ var Editor = ({
|
|
|
234
260
|
extensions: [
|
|
235
261
|
StarterKit,
|
|
236
262
|
Link.configure({ openOnClick: false }),
|
|
237
|
-
Placeholder.configure({ placeholder })
|
|
263
|
+
Placeholder.configure({ placeholder }),
|
|
264
|
+
Superscript,
|
|
265
|
+
Subscript
|
|
238
266
|
],
|
|
239
267
|
content,
|
|
240
268
|
editable,
|
|
@@ -349,5 +377,5 @@ var Editor = ({
|
|
|
349
377
|
};
|
|
350
378
|
|
|
351
379
|
export { Editor };
|
|
352
|
-
//# sourceMappingURL=chunk-
|
|
353
|
-
//# sourceMappingURL=chunk-
|
|
380
|
+
//# sourceMappingURL=chunk-DXUWFHPF.js.map
|
|
381
|
+
//# sourceMappingURL=chunk-DXUWFHPF.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Editor/icons.tsx","../src/components/Editor/Editor.tsx"],"names":["jsx","editor","jsxs","active"],"mappings":";;;;;;;;;;AAQA,IAAM,IAAA,GAAO;AAAA,EACX,KAAA,EAAO,EAAA;AAAA,EACP,MAAA,EAAQ,EAAA;AAAA,EACR,OAAA,EAAS,WAAA;AAAA,EACT,IAAA,EAAM,MAAA;AAAA,EACN,MAAA,EAAQ,cAAA;AAAA,EACR,WAAA,EAAa,CAAA;AAAA,EACb,aAAA,EAAe,OAAA;AAAA,EACf,cAAA,EAAgB,OAAA;AAAA,EAChB,KAAA,EAAO;AACT,CAAA;AAEO,IAAM,QAAA,GAAqB,sBAChC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,yBAAA,EAA0B,CAAA;AAAA,kBAClC,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,0BAAA,EAA2B;AAAA,CAAA,EACrC,CAAA;AAGK,IAAM,UAAA,GAAuB,sBAClC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,IAAG,IAAA,EAAK,EAAA,EAAG,KAAI,EAAA,EAAG,IAAA,EAAK,IAAG,GAAA,EAAI,CAAA;AAAA,kBACpC,GAAA,CAAC,UAAK,EAAA,EAAG,IAAA,EAAK,IAAG,IAAA,EAAK,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,IAAA,EAAK,CAAA;AAAA,kBACrC,GAAA,CAAC,UAAK,EAAA,EAAG,IAAA,EAAK,IAAG,GAAA,EAAI,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,IAAA,EAAK;AAAA,CAAA,EACtC,CAAA;AAGK,IAAM,UAAA,GAAuB,sBAClC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,0BAAA,EAA2B,CAAA;AAAA,kBACnC,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,wBAAA,EAAyB,CAAA;AAAA,kBACjC,GAAA,CAAC,UAAK,EAAA,EAAG,GAAA,EAAI,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK;AAAA,CAAA,EACvC,CAAA;AAGK,IAAM,QAAA,GAAqB,sBAChC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAS,QAAO,kBAAA,EAAmB,CAAA;AAAA,kBACpC,GAAA,CAAC,UAAA,EAAA,EAAS,MAAA,EAAO,eAAA,EAAgB;AAAA,CAAA,EACnC,CAAA;AAGK,IAAM,YAAA,GAAyB,sBACpC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,SAAA,EAAU,CAAA;AAAA,kBAClB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,SAAA,EAAU,CAAA;AAAA,kBAClB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,kBACnB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,cAAA,EAAe;AAAA,CAAA,EACzB,CAAA;AAGK,IAAM,YAAA,GAAyB,sBACpC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,SAAA,EAAU,CAAA;AAAA,kBAClB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,SAAA,EAAU,CAAA;AAAA,kBAClB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,kBACnB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,yCAAA,EAA0C;AAAA,CAAA,EACpD,CAAA;AAGK,IAAM,YAAA,GAAyB,sBACpC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,SAAA,EAAU,CAAA;AAAA,kBAClB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,SAAA,EAAU,CAAA;AAAA,kBAClB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,kBACnB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,0CAAA,EAA2C;AAAA,CAAA,EACrD,CAAA;AAGK,IAAM,cAAA,GAA2B,sBACtC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,IAAG,GAAA,EAAI,EAAA,EAAG,KAAI,EAAA,EAAG,IAAA,EAAK,IAAG,GAAA,EAAI,CAAA;AAAA,kBACnC,GAAA,CAAC,UAAK,EAAA,EAAG,GAAA,EAAI,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA;AAAA,kBACrC,GAAA,CAAC,UAAK,EAAA,EAAG,GAAA,EAAI,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA;AAAA,sBACpC,QAAA,EAAA,EAAO,EAAA,EAAG,KAAI,EAAA,EAAG,GAAA,EAAI,GAAE,GAAA,EAAI,CAAA;AAAA,sBAC3B,QAAA,EAAA,EAAO,EAAA,EAAG,KAAI,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,sBAC5B,QAAA,EAAA,EAAO,EAAA,EAAG,KAAI,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI;AAAA,CAAA,EAC/B,CAAA;AAGK,IAAM,eAAA,GAA4B,sBACvC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,IAAG,IAAA,EAAK,EAAA,EAAG,KAAI,EAAA,EAAG,IAAA,EAAK,IAAG,GAAA,EAAI,CAAA;AAAA,kBACpC,GAAA,CAAC,UAAK,EAAA,EAAG,IAAA,EAAK,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA;AAAA,kBACtC,GAAA,CAAC,UAAK,EAAA,EAAG,IAAA,EAAK,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA;AAAA,kBACtC,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,cAAA,EAAe,CAAA;AAAA,kBACvB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,gBAAA,EAAiB,CAAA;AAAA,kBACzB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,aAAA,EAAc;AAAA,CAAA,EACxB,CAAA;AAGK,IAAM,cAAA,GAA2B,sBACtC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,2BAAA,EAA4B,CAAA;AAAA,kBACpC,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,6BAAA,EAA8B;AAAA,CAAA,EACxC,CAAA;AAGK,IAAM,aAAA,GAA0B,sBACrC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,GAAA,EAAI,CAAA,EAAE,GAAA,EAAI,OAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,EAAA,EAAG,GAAA,EAAI,CAAA;AAAA,kBAChD,GAAA,CAAC,UAAA,EAAA,EAAS,MAAA,EAAO,eAAA,EAAgB,CAAA;AAAA,kBACjC,GAAA,CAAC,UAAA,EAAA,EAAS,MAAA,EAAO,kBAAA,EAAmB;AAAA,CAAA,EACtC,CAAA;AAGK,IAAM,QAAA,GAAqB,sBAChC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,6CAAA,EAA8C,CAAA;AAAA,kBACtD,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,6CAAA,EAA8C;AAAA,CAAA,EACxD,CAAA;AAGK,IAAM,QAAA,GAAqB,sBAChC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,UAAA,EAAW,CAAA;AAAA,kBACnB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,2BAAA,EAA4B;AAAA,CAAA,EACtC,CAAA;AAGK,IAAM,QAAA,GAAqB,sBAChC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,YAAA,EAAa,CAAA;AAAA,kBACrB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,6BAAA,EAA8B;AAAA,CAAA,EACxC,CAAA;AAGK,IAAM,eAAA,GAA4B,sBACvC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,YAAA,EAAa,CAAA;AAAA,kBACrB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,aAAA,EAAc,CAAA;AAAA,kBACtB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,8EAAA,EAA+E;AAAA,CAAA,EACzF,CAAA;AAGK,IAAM,aAAA,GAA0B,sBACrC,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EACP,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,WAAA,EAAY,CAAA;AAAA,kBACpB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,YAAA,EAAa,CAAA;AAAA,kBACrB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,iFAAA,EAAkF;AAAA,CAAA,EAC5F,CAAA;ACnEF,IAAM,eAAA,GAAoC;AAAA,EACxC,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA;AAWA,IAAM,QAAA,GAAkE;AAAA,EACtE,IAAA,EAAM;AAAA,IACJ,IAAA,kBAAMA,GAAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAAA,IAChB,KAAA,EAAO,MAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,UAAA,EAAW,CAAE,GAAA,EAAI;AAAA,IACnD,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,MAAM;AAAA,GACpC;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,kBAAMA,GAAAA,CAAC,UAAA,EAAA,EAAW,CAAA;AAAA,IAClB,KAAA,EAAO,QAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,YAAA,EAAa,CAAE,GAAA,EAAI;AAAA,IACrD,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,QAAQ;AAAA,GACtC;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,kBAAMA,GAAAA,CAAC,UAAA,EAAA,EAAW,CAAA;AAAA,IAClB,KAAA,EAAO,eAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,YAAA,EAAa,CAAE,GAAA,EAAI;AAAA,IACrD,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,QAAQ;AAAA,GACtC;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,kBAAMA,GAAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAAA,IAChB,KAAA,EAAO,aAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,UAAA,EAAW,CAAE,GAAA,EAAI;AAAA,IACnD,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,MAAM;AAAA,GACpC;AAAA,EACA,WAAA,EAAa;AAAA,IACX,IAAA,kBAAMA,GAAAA,CAAC,eAAA,EAAA,EAAgB,CAAA;AAAA,IACvB,KAAA,EAAO,aAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,iBAAA,EAAkB,CAAE,GAAA,EAAI;AAAA,IAC1D,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,aAAa;AAAA,GAC3C;AAAA,EACA,SAAA,EAAW;AAAA,IACT,IAAA,kBAAMA,GAAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,IACrB,KAAA,EAAO,WAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,eAAA,EAAgB,CAAE,GAAA,EAAI;AAAA,IACxD,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,WAAW;AAAA,GACzC;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,kBAAMA,GAAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,IACpB,KAAA,EAAO,WAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,OAAM,CAAE,KAAA,EAAM,CAAE,aAAA,CAAc,EAAE,KAAA,EAAO,CAAA,EAAG,EAAE,GAAA,EAAI;AAAA,IAClE,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,SAAA,EAAW,EAAE,KAAA,EAAO,CAAA,EAAG;AAAA,GACrD;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,kBAAMA,GAAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,IACpB,KAAA,EAAO,WAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,OAAM,CAAE,KAAA,EAAM,CAAE,aAAA,CAAc,EAAE,KAAA,EAAO,CAAA,EAAG,EAAE,GAAA,EAAI;AAAA,IAClE,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,SAAA,EAAW,EAAE,KAAA,EAAO,CAAA,EAAG;AAAA,GACrD;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,kBAAMA,GAAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,IACpB,KAAA,EAAO,WAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,OAAM,CAAE,KAAA,EAAM,CAAE,aAAA,CAAc,EAAE,KAAA,EAAO,CAAA,EAAG,EAAE,GAAA,EAAI;AAAA,IAClE,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,SAAA,EAAW,EAAE,KAAA,EAAO,CAAA,EAAG;AAAA,GACrD;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,kBAAMA,GAAAA,CAAC,cAAA,EAAA,EAAe,CAAA;AAAA,IACtB,KAAA,EAAO,aAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,gBAAA,EAAiB,CAAE,GAAA,EAAI;AAAA,IACzD,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,YAAY;AAAA,GAC1C;AAAA,EACA,WAAA,EAAa;AAAA,IACX,IAAA,kBAAMA,GAAAA,CAAC,eAAA,EAAA,EAAgB,CAAA;AAAA,IACvB,KAAA,EAAO,cAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,iBAAA,EAAkB,CAAE,GAAA,EAAI;AAAA,IAC1D,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,aAAa;AAAA,GAC3C;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,kBAAMA,GAAAA,CAAC,cAAA,EAAA,EAAe,CAAA;AAAA,IACtB,KAAA,EAAO,YAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,gBAAA,EAAiB,CAAE,GAAA,EAAI;AAAA,IACzD,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,YAAY;AAAA,GAC1C;AAAA,EACA,SAAA,EAAW;AAAA,IACT,IAAA,kBAAMA,GAAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,IACrB,KAAA,EAAO,YAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,eAAA,EAAgB,CAAE,GAAA,EAAI;AAAA,IACxD,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,WAAW;AAAA,GACzC;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,kBAAMA,GAAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAAA,IAChB,KAAA,EAAO,MAAA;AAAA;AAAA;AAAA,IAGP,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,MAAA,MAAM,IAAA,GAAQ,CAAA,CAAE,aAAA,CAAc,MAAM,EAAwB,IAAA,IAAQ,EAAA;AACpE,MAAA,MAAM,GAAA,GACJ,OAAO,MAAA,KAAW,WAAA,GACd,OAAO,MAAA,CAAO,WAAA,EAAa,IAAI,CAAA,GAC/B,IAAA;AACN,MAAA,IAAI,QAAQ,IAAA,EAAM;AAClB,MAAA,IAAI,QAAQ,EAAA,EAAI;AACd,QAAA,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,gBAAgB,MAAM,CAAA,CAAE,SAAA,EAAU,CAAE,GAAA,EAAI;AAC1D,QAAA;AAAA,MACF;AACA,MAAA,CAAA,CAAE,KAAA,EAAM,CAAE,KAAA,EAAM,CAAE,eAAA,CAAgB,MAAM,CAAA,CAAE,OAAA,CAAQ,EAAE,IAAA,EAAM,GAAA,EAAK,EAAE,GAAA,EAAI;AAAA,IACvE,CAAA;AAAA,IACA,QAAA,EAAU,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,MAAM;AAAA,GACpC;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,kBAAMA,GAAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAAA,IAChB,KAAA,EAAO,MAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,IAAA,EAAK,CAAE,GAAA,EAAI;AAAA,IAC7C,YAAY,CAAC,CAAA,KAAM,CAAC,CAAA,CAAE,GAAA,GAAM,IAAA;AAAK,GACnC;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,kBAAMA,GAAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAAA,IAChB,KAAA,EAAO,MAAA;AAAA,IACP,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,KAAA,EAAM,CAAE,IAAA,EAAK,CAAE,GAAA,EAAI;AAAA,IAC7C,YAAY,CAAC,CAAA,KAAM,CAAC,CAAA,CAAE,GAAA,GAAM,IAAA;AAAK;AAErC,CAAA;AAEA,IAAM,eAAA,GAAkB,CAAC,MAAA,KACvB,EAAA;AAAA,EACE,qFAAA;AAAA,EACA,uFAAA;AAAA,EACA,wEAAA;AAAA,EACA,MAAA,IACE;AACJ,CAAA;AAEF,IAAM,OAAA,GAAoB,sBACxBA,GAAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACC,aAAA,EAAW,IAAA;AAAA,IACX,SAAA,EAAU;AAAA;AACZ,CAAA;AAUK,IAAM,SAAgC,CAAC;AAAA,EAC5C,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,qBAAA;AAAA,EACd,QAAA,GAAW,IAAA;AAAA,EACX,OAAA,GAAU,eAAA;AAAA,EACV,SAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,SAAS,SAAA,CAAU;AAAA,IACvB,UAAA,EAAY;AAAA,MACV,UAAA;AAAA,MACA,IAAA,CAAK,SAAA,CAAU,EAAE,WAAA,EAAa,OAAO,CAAA;AAAA,MACrC,WAAA,CAAY,SAAA,CAAU,EAAE,WAAA,EAAa,CAAA;AAAA,MACrC,WAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA,EAAmB,KAAA;AAAA,IACnB,WAAA,EAAa;AAAA,MACX,UAAA,EAAY;AAAA,QACV,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,QAAA,EAAU,CAAC,EAAE,MAAA,EAAAC,SAAO,KAAM,QAAA,GAAWA,OAAAA,CAAO,OAAA,EAAS;AAAA,GACtD,CAAA;AAGD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,MAAA,EAAQ,YAAY,QAAQ,CAAA;AAAA,EAC9B,CAAA,EAAG,CAAC,MAAA,EAAQ,QAAQ,CAAC,CAAA;AAGrB,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,uBACEC,IAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,+EAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,QAAA,oBACCF,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oFAAA,EAAqF,CAAA;AAAA,0BAEtGA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gEAAA,EAAiE;AAAA;AAAA;AAAA,KAClF;AAAA,EAEJ;AAEA,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAA,IAAI,UAAA,GAAa,CAAA;AACjB,IAAA,OAAO,OAAA,CAAQ,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AAElC,MAAA,IAAI,OAAO,SAAS,QAAA,EAAU;AAC5B,QAAA,MAAMG,OAAAA,GAAS,IAAA,CAAK,QAAA,GAAW,MAAM,CAAA,IAAK,KAAA;AAC1C,QAAA,uBACEH,GAAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,OAAO,IAAA,CAAK,KAAA;AAAA,YACZ,cAAY,IAAA,CAAK,KAAA;AAAA,YACjB,cAAA,EAAcG,OAAAA;AAAA,YACd,OAAA,EAAS,MAAM,IAAA,CAAK,OAAA,CAAQ,MAAM,CAAA;AAAA,YAClC,SAAA,EAAW,gBAAgBA,OAAM,CAAA;AAAA,YAEhC,QAAA,EAAA,IAAA,CAAK;AAAA,WAAA;AAAA,UARD,IAAA,CAAK,EAAA,IAAM,CAAA,OAAA,EAAU,KAAK,CAAA;AAAA,SASjC;AAAA,MAEJ;AAEA,MAAA,IAAI,SAAS,SAAA,EAAW;AACtB,QAAA,uBAAOH,GAAAA,CAAC,OAAA,EAAA,EAAA,EAAa,CAAA,QAAA,EAAW,YAAY,CAAA,CAAI,CAAA;AAAA,MAClD;AAEA,MAAA,MAAM,GAAA,GAAM,SAAS,IAAI,CAAA;AACzB,MAAA,IAAI,CAAC,KAAK,OAAO,IAAA;AACjB,MAAA,MAAM,MAAA,GAAS,GAAA,CAAI,QAAA,GAAW,MAAM,CAAA,IAAK,KAAA;AACzC,MAAA,MAAM,QAAA,GAAW,GAAA,CAAI,UAAA,GAAa,MAAM,CAAA,IAAK,KAAA;AAC7C,MAAA,uBACEA,GAAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UAEC,IAAA,EAAK,QAAA;AAAA,UACL,OAAO,GAAA,CAAI,KAAA;AAAA,UACX,cAAY,GAAA,CAAI,KAAA;AAAA,UAChB,cAAA,EAAc,MAAA;AAAA,UACd,QAAA;AAAA,UACA,OAAA,EAAS,MAAM,GAAA,CAAI,OAAA,CAAQ,MAAM,CAAA;AAAA,UACjC,SAAA,EAAW,gBAAgB,MAAM,CAAA;AAAA,UAEhC,QAAA,EAAA,GAAA,CAAI;AAAA,SAAA;AAAA,QATA;AAAA,OAUP;AAAA,IAEJ,CAAC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,uBACEE,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,6HAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA,oBACCF,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+HAAA,EACZ,yBAAc,EACjB,CAAA;AAAA,wBAEFA,GAAAA;AAAA,UAAC,aAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,SAAA,EAAW,EAAA;AAAA,cACT,kEAAA;AAAA,cACA,cAAA;AAAA;AAAA,cAEA,8DAAA;AAAA,cACA,6GAAA;AAAA,cACA,4GAAA;AAAA,cACA,4GAAA;AAAA,cACA,kCAAA;AAAA,cACA,0CAAA;AAAA,cACA,6CAAA;AAAA,cACA,2BAAA;AAAA,cACA,2FAAA;AAAA,cACA,2NAAA;AAAA,cACA,oMAAA;AAAA,cACA,0KAAA;AAAA,cACA,wEAAA;AAAA,cACA,gEAAA;AAAA;AAAA,cAEA,4VAAA;AAAA,cACA;AAAA;AACF;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"chunk-DXUWFHPF.js","sourcesContent":["import React from \"react\";\n\n/**\n * Small inline stroke icons (16–18px) for the editor toolbar.\n * They inherit color via `stroke=\"currentColor\"` so the active/inactive\n * button states drive their appearance.\n */\n\nconst base = {\n width: 18,\n height: 18,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 2,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n xmlns: \"http://www.w3.org/2000/svg\",\n};\n\nexport const BoldIcon: React.FC = () => (\n <svg {...base}>\n <path d=\"M6 4h7a4 4 0 0 1 0 8H6z\" />\n <path d=\"M6 12h8a4 4 0 0 1 0 8H6z\" />\n </svg>\n);\n\nexport const ItalicIcon: React.FC = () => (\n <svg {...base}>\n <line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\" />\n <line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\" />\n <line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\" />\n </svg>\n);\n\nexport const StrikeIcon: React.FC = () => (\n <svg {...base}>\n <path d=\"M16 4H9a3 3 0 0 0-2.83 4\" />\n <path d=\"M14 12a4 4 0 0 1 0 8H6\" />\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\" />\n </svg>\n);\n\nexport const CodeIcon: React.FC = () => (\n <svg {...base}>\n <polyline points=\"16 18 22 12 16 6\" />\n <polyline points=\"8 6 2 12 8 18\" />\n </svg>\n);\n\nexport const Heading1Icon: React.FC = () => (\n <svg {...base}>\n <path d=\"M4 12h8\" />\n <path d=\"M4 18V6\" />\n <path d=\"M12 18V6\" />\n <path d=\"M17 12l3-2v8\" />\n </svg>\n);\n\nexport const Heading2Icon: React.FC = () => (\n <svg {...base}>\n <path d=\"M4 12h8\" />\n <path d=\"M4 18V6\" />\n <path d=\"M12 18V6\" />\n <path d=\"M17 10c2 0 3 1 3 2.5S18 15 17 16l-2 2h5\" />\n </svg>\n);\n\nexport const Heading3Icon: React.FC = () => (\n <svg {...base}>\n <path d=\"M4 12h8\" />\n <path d=\"M4 18V6\" />\n <path d=\"M12 18V6\" />\n <path d=\"M17 10c2.5-1 3.5 1 2.5 2c1 1 0.5 4-2.5 3\" />\n </svg>\n);\n\nexport const BulletListIcon: React.FC = () => (\n <svg {...base}>\n <line x1=\"9\" y1=\"6\" x2=\"20\" y2=\"6\" />\n <line x1=\"9\" y1=\"12\" x2=\"20\" y2=\"12\" />\n <line x1=\"9\" y1=\"18\" x2=\"20\" y2=\"18\" />\n <circle cx=\"4\" cy=\"6\" r=\"1\" />\n <circle cx=\"4\" cy=\"12\" r=\"1\" />\n <circle cx=\"4\" cy=\"18\" r=\"1\" />\n </svg>\n);\n\nexport const OrderedListIcon: React.FC = () => (\n <svg {...base}>\n <line x1=\"10\" y1=\"6\" x2=\"20\" y2=\"6\" />\n <line x1=\"10\" y1=\"12\" x2=\"20\" y2=\"12\" />\n <line x1=\"10\" y1=\"18\" x2=\"20\" y2=\"18\" />\n <path d=\"M4 6V3.5L3 4\" />\n <path d=\"M3 12h2l-2 3h2\" />\n <path d=\"M3 17h2v3H3\" />\n </svg>\n);\n\nexport const BlockquoteIcon: React.FC = () => (\n <svg {...base}>\n <path d=\"M3 21c3 0 7-1 7-8V5H3v7h4\" />\n <path d=\"M14 21c3 0 7-1 7-8V5h-7v7h4\" />\n </svg>\n);\n\nexport const CodeBlockIcon: React.FC = () => (\n <svg {...base}>\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\" />\n <polyline points=\"9 9 7 12 9 15\" />\n <polyline points=\"15 9 17 12 15 15\" />\n </svg>\n);\n\nexport const LinkIcon: React.FC = () => (\n <svg {...base}>\n <path d=\"M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1\" />\n <path d=\"M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1\" />\n </svg>\n);\n\nexport const UndoIcon: React.FC = () => (\n <svg {...base}>\n <path d=\"M3 7v6h6\" />\n <path d=\"M3 13a9 9 0 1 0 3-7.7L3 8\" />\n </svg>\n);\n\nexport const RedoIcon: React.FC = () => (\n <svg {...base}>\n <path d=\"M21 7v6h-6\" />\n <path d=\"M21 13a9 9 0 1 1-3-7.7L21 8\" />\n </svg>\n);\n\nexport const SuperscriptIcon: React.FC = () => (\n <svg {...base}>\n <path d=\"m4 19 8-10\" />\n <path d=\"m12 19-8-10\" />\n <path d=\"M20 9h-4c0-1.5.44-2 1.5-2.5S20 5.6 20 4.5C20 3.7 19.3 3 18.5 3S17 3.7 17 4.5\" />\n </svg>\n);\n\nexport const SubscriptIcon: React.FC = () => (\n <svg {...base}>\n <path d=\"m4 5 8 10\" />\n <path d=\"m12 5-8 10\" />\n <path d=\"M20 21h-4c0-1.5.44-2 1.5-2.5S20 17.6 20 16.5c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5\" />\n </svg>\n);\n","\"use client\";\nimport React from \"react\";\nimport { useEditor, EditorContent, type Editor as TiptapEditor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport Link from \"@tiptap/extension-link\";\nimport Placeholder from \"@tiptap/extension-placeholder\";\nimport Superscript from \"@tiptap/extension-superscript\";\nimport Subscript from \"@tiptap/extension-subscript\";\nimport { cn } from \"../../lib/cn\";\nimport { type ColorOverrideProps } from \"../../lib/styleOverride\";\nimport {\n BoldIcon,\n ItalicIcon,\n StrikeIcon,\n CodeIcon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n BulletListIcon,\n OrderedListIcon,\n BlockquoteIcon,\n CodeBlockIcon,\n LinkIcon,\n UndoIcon,\n RedoIcon,\n SuperscriptIcon,\n SubscriptIcon,\n} from \"./icons\";\n\n/** Built-in toolbar tool ids. */\nexport type ToolbarItemId =\n | \"bold\"\n | \"italic\"\n | \"strike\"\n | \"code\"\n | \"superscript\"\n | \"subscript\"\n | \"heading1\"\n | \"heading2\"\n | \"heading3\"\n | \"bulletList\"\n | \"orderedList\"\n | \"blockquote\"\n | \"codeBlock\"\n | \"link\"\n | \"undo\"\n | \"redo\"\n | \"divider\";\n\n/** A fully custom toolbar button. */\nexport interface CustomToolbarItem {\n id: string;\n icon: React.ReactNode;\n title: string;\n onClick: (editor: TiptapEditor) => void;\n isActive?: (editor: TiptapEditor) => boolean;\n}\n\n/** A toolbar entry: either a built-in id or a custom button object. */\nexport type EditorToolItem = ToolbarItemId | CustomToolbarItem;\n\n/** @deprecated Alias kept for naming flexibility. Use `EditorToolItem`. */\nexport type ToolbarItem = EditorToolItem;\n\nexport interface EditorProps extends ColorOverrideProps {\n /** Initial HTML content. */\n content?: string;\n /** Fires with the current HTML whenever the document changes. */\n onChange?: (html: string) => void;\n /** Placeholder shown when the document is empty. */\n placeholder?: string;\n /** When false the editor is read-only and the toolbar is hidden. */\n editable?: boolean;\n /** Ordered toolbar configuration. Defaults to a sensible full set. */\n toolbar?: EditorToolItem[];\n /** Wrapper class. */\n className?: string;\n /** Class for the prose content area. */\n editorClassName?: string;\n}\n\nconst DEFAULT_TOOLBAR: EditorToolItem[] = [\n \"bold\",\n \"italic\",\n \"strike\",\n \"code\",\n \"superscript\",\n \"subscript\",\n \"divider\",\n \"heading1\",\n \"heading2\",\n \"heading3\",\n \"divider\",\n \"bulletList\",\n \"orderedList\",\n \"blockquote\",\n \"codeBlock\",\n \"divider\",\n \"link\",\n \"divider\",\n \"undo\",\n \"redo\",\n];\n\ninterface BuiltInDef {\n icon: React.ReactNode;\n title: string;\n onClick: (editor: TiptapEditor) => void;\n isActive?: (editor: TiptapEditor) => boolean;\n /** Disable callback (used for undo/redo). */\n isDisabled?: (editor: TiptapEditor) => boolean;\n}\n\nconst BUILTINS: Record<Exclude<ToolbarItemId, \"divider\">, BuiltInDef> = {\n bold: {\n icon: <BoldIcon />,\n title: \"Bold\",\n onClick: (e) => e.chain().focus().toggleBold().run(),\n isActive: (e) => e.isActive(\"bold\"),\n },\n italic: {\n icon: <ItalicIcon />,\n title: \"Italic\",\n onClick: (e) => e.chain().focus().toggleItalic().run(),\n isActive: (e) => e.isActive(\"italic\"),\n },\n strike: {\n icon: <StrikeIcon />,\n title: \"Strikethrough\",\n onClick: (e) => e.chain().focus().toggleStrike().run(),\n isActive: (e) => e.isActive(\"strike\"),\n },\n code: {\n icon: <CodeIcon />,\n title: \"Inline code\",\n onClick: (e) => e.chain().focus().toggleCode().run(),\n isActive: (e) => e.isActive(\"code\"),\n },\n superscript: {\n icon: <SuperscriptIcon />,\n title: \"Superscript\",\n onClick: (e) => e.chain().focus().toggleSuperscript().run(),\n isActive: (e) => e.isActive(\"superscript\"),\n },\n subscript: {\n icon: <SubscriptIcon />,\n title: \"Subscript\",\n onClick: (e) => e.chain().focus().toggleSubscript().run(),\n isActive: (e) => e.isActive(\"subscript\"),\n },\n heading1: {\n icon: <Heading1Icon />,\n title: \"Heading 1\",\n onClick: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n },\n heading2: {\n icon: <Heading2Icon />,\n title: \"Heading 2\",\n onClick: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n },\n heading3: {\n icon: <Heading3Icon />,\n title: \"Heading 3\",\n onClick: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n },\n bulletList: {\n icon: <BulletListIcon />,\n title: \"Bullet list\",\n onClick: (e) => e.chain().focus().toggleBulletList().run(),\n isActive: (e) => e.isActive(\"bulletList\"),\n },\n orderedList: {\n icon: <OrderedListIcon />,\n title: \"Ordered list\",\n onClick: (e) => e.chain().focus().toggleOrderedList().run(),\n isActive: (e) => e.isActive(\"orderedList\"),\n },\n blockquote: {\n icon: <BlockquoteIcon />,\n title: \"Blockquote\",\n onClick: (e) => e.chain().focus().toggleBlockquote().run(),\n isActive: (e) => e.isActive(\"blockquote\"),\n },\n codeBlock: {\n icon: <CodeBlockIcon />,\n title: \"Code block\",\n onClick: (e) => e.chain().focus().toggleCodeBlock().run(),\n isActive: (e) => e.isActive(\"codeBlock\"),\n },\n link: {\n icon: <LinkIcon />,\n title: \"Link\",\n // Minimal UX: window.prompt for the URL (no extra UI deps). Empty input\n // clears any existing link on the selection.\n onClick: (e) => {\n const prev = (e.getAttributes(\"link\") as { href?: string }).href ?? \"\";\n const url =\n typeof window !== \"undefined\"\n ? window.prompt(\"Enter URL\", prev)\n : null;\n if (url === null) return; // cancelled\n if (url === \"\") {\n e.chain().focus().extendMarkRange(\"link\").unsetLink().run();\n return;\n }\n e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n },\n isActive: (e) => e.isActive(\"link\"),\n },\n undo: {\n icon: <UndoIcon />,\n title: \"Undo\",\n onClick: (e) => e.chain().focus().undo().run(),\n isDisabled: (e) => !e.can().undo(),\n },\n redo: {\n icon: <RedoIcon />,\n title: \"Redo\",\n onClick: (e) => e.chain().focus().redo().run(),\n isDisabled: (e) => !e.can().redo(),\n },\n};\n\nconst toolButtonClass = (active: boolean) =>\n cn(\n \"inline-flex h-8 w-8 items-center justify-center rounded-lg text-gray-600 transition\",\n \"hover:bg-gray-100 hover:text-gray-800 disabled:cursor-not-allowed disabled:opacity-40\",\n \"dark:text-gray-400 dark:hover:bg-white/[0.06] dark:hover:text-gray-200\",\n active &&\n \"bg-brand-50 text-brand-600 hover:bg-brand-50 hover:text-brand-600 dark:bg-brand-500/15 dark:text-brand-400 dark:hover:bg-brand-500/15 dark:hover:text-brand-400\"\n );\n\nconst Divider: React.FC = () => (\n <span\n aria-hidden\n className=\"mx-1 h-5 w-px self-center bg-gray-200 dark:bg-gray-700\"\n />\n);\n\n/**\n * Tiptap-powered WYSIWYG editor.\n *\n * Heavy, optional peer-dependency component (`@tiptap/*`). It is a client\n * component and touches the DOM at import time, so in SSR frameworks render it\n * client-only (e.g. next/dynamic with `ssr:false`), like the charts.\n */\nexport const Editor: React.FC<EditorProps> = ({\n content,\n onChange,\n placeholder = \"Start writing…\",\n editable = true,\n toolbar = DEFAULT_TOOLBAR,\n className,\n editorClassName,\n}) => {\n const editor = useEditor({\n extensions: [\n StarterKit,\n Link.configure({ openOnClick: false }),\n Placeholder.configure({ placeholder }),\n Superscript,\n Subscript,\n ],\n content,\n editable,\n immediatelyRender: false,\n editorProps: {\n attributes: {\n class: \"focus:outline-none\",\n },\n },\n onUpdate: ({ editor }) => onChange?.(editor.getHTML()),\n });\n\n // Keep editability in sync if the prop changes after mount.\n React.useEffect(() => {\n editor?.setEditable(editable);\n }, [editor, editable]);\n\n // Not yet mounted (SSR / first paint): render a skeleton placeholder.\n if (!editor) {\n return (\n <div\n className={cn(\n \"w-full overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800\",\n className\n )}\n >\n {editable && (\n <div className=\"h-12 border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-white/[0.02]\" />\n )}\n <div className=\"min-h-[200px] animate-pulse bg-gray-50/50 dark:bg-white/[0.01]\" />\n </div>\n );\n }\n\n const renderToolbar = () => {\n let dividerKey = 0;\n return toolbar.map((item, index) => {\n // Custom button object.\n if (typeof item === \"object\") {\n const active = item.isActive?.(editor) ?? false;\n return (\n <button\n key={item.id || `custom-${index}`}\n type=\"button\"\n title={item.title}\n aria-label={item.title}\n aria-pressed={active}\n onClick={() => item.onClick(editor)}\n className={toolButtonClass(active)}\n >\n {item.icon}\n </button>\n );\n }\n\n if (item === \"divider\") {\n return <Divider key={`divider-${dividerKey++}`} />;\n }\n\n const def = BUILTINS[item];\n if (!def) return null;\n const active = def.isActive?.(editor) ?? false;\n const disabled = def.isDisabled?.(editor) ?? false;\n return (\n <button\n key={item}\n type=\"button\"\n title={def.title}\n aria-label={def.title}\n aria-pressed={active}\n disabled={disabled}\n onClick={() => def.onClick(editor)}\n className={toolButtonClass(active)}\n >\n {def.icon}\n </button>\n );\n });\n };\n\n return (\n <div\n className={cn(\n \"w-full overflow-hidden rounded-xl border border-gray-200 bg-white shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.02]\",\n className\n )}\n >\n {editable && (\n <div className=\"flex flex-wrap items-center gap-0.5 border-b border-gray-200 bg-gray-50 px-2 py-1.5 dark:border-gray-800 dark:bg-white/[0.02]\">\n {renderToolbar()}\n </div>\n )}\n <EditorContent\n editor={editor}\n className={cn(\n \"min-h-[200px] px-4 py-3 text-sm text-gray-700 dark:text-gray-300\",\n \"rounded-b-xl\",\n // Explicit element styling (no @tailwindcss/typography assumed).\n \"[&_.ProseMirror]:min-h-[180px] [&_.ProseMirror]:outline-none\",\n \"[&_h1]:mb-3 [&_h1]:mt-4 [&_h1]:text-2xl [&_h1]:font-semibold [&_h1]:text-gray-900 dark:[&_h1]:text-white/90\",\n \"[&_h2]:mb-2 [&_h2]:mt-4 [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:text-gray-900 dark:[&_h2]:text-white/90\",\n \"[&_h3]:mb-2 [&_h3]:mt-3 [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:text-gray-900 dark:[&_h3]:text-white/90\",\n \"[&_p]:my-2 [&_p]:leading-relaxed\",\n \"[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-6\",\n \"[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-6\",\n \"[&_li]:my-1 [&_li>p]:my-0\",\n \"[&_a]:text-brand-500 [&_a]:underline hover:[&_a]:text-brand-600 dark:[&_a]:text-brand-400\",\n \"[&_blockquote]:my-3 [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-gray-600 dark:[&_blockquote]:border-gray-700 dark:[&_blockquote]:text-gray-400\",\n \"[&_code]:rounded [&_code]:bg-gray-100 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-brand-600 dark:[&_code]:bg-white/[0.06] dark:[&_code]:text-brand-400\",\n \"[&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-sm [&_pre]:text-gray-100 dark:[&_pre]:bg-black/40\",\n \"[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-inherit\",\n \"[&_hr]:my-4 [&_hr]:border-gray-200 dark:[&_hr]:border-gray-800\",\n // Placeholder styling for the empty-document first node.\n \"[&_.is-editor-empty:first-child::before]:pointer-events-none [&_.is-editor-empty:first-child::before]:float-left [&_.is-editor-empty:first-child::before]:h-0 [&_.is-editor-empty:first-child::before]:text-gray-400 [&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] dark:[&_.is-editor-empty:first-child::before]:text-gray-600\",\n editorClassName\n )}\n />\n </div>\n );\n};\n"]}
|
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from './chunk-ZLIYUUA4.js';
|
|
3
|
+
import { useState, useMemo, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
|
|
4
|
+
import { createPortal } from 'react-dom';
|
|
5
|
+
import { Color, ColorPicker as ColorPicker$1 } from 'react-beautiful-color';
|
|
6
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
var ALL_FORMATS = ["hex", "rgb", "rgba", "hsl", "hsla"];
|
|
9
|
+
function parseValue(text, format) {
|
|
10
|
+
const t = text.trim();
|
|
11
|
+
if (format === "hex") {
|
|
12
|
+
return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t) ? { type: "hex", value: t } : null;
|
|
13
|
+
}
|
|
14
|
+
const n = t.match(/-?\d*\.?\d+/g)?.map(Number) ?? [];
|
|
15
|
+
if (format === "rgb" && n.length >= 3) return { type: "rgb", r: n[0], g: n[1], b: n[2] };
|
|
16
|
+
if (format === "rgba" && n.length >= 4)
|
|
17
|
+
return { type: "rgba", r: n[0], g: n[1], b: n[2], a: n[3] };
|
|
18
|
+
if (format === "hsl" && n.length >= 3) return { type: "hsl", h: n[0], s: n[1], l: n[2] };
|
|
19
|
+
if (format === "hsla" && n.length >= 4)
|
|
20
|
+
return { type: "hsla", h: n[0], s: n[1], l: n[2], a: n[3] };
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
function colorToString(color, format) {
|
|
24
|
+
switch (format) {
|
|
25
|
+
case "hex": {
|
|
26
|
+
const { r, g, b } = color.getRgb();
|
|
27
|
+
const a = color.getRgba().a;
|
|
28
|
+
const hex = `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, "0")).join("")}`;
|
|
29
|
+
return a < 1 ? `${hex}${Math.round(a * 255).toString(16).padStart(2, "0")}` : hex;
|
|
30
|
+
}
|
|
31
|
+
case "rgb": {
|
|
32
|
+
const { r, g, b } = color.getRgb();
|
|
33
|
+
return `rgb(${r}, ${g}, ${b})`;
|
|
34
|
+
}
|
|
35
|
+
case "rgba": {
|
|
36
|
+
const { r, g, b, a } = color.getRgba();
|
|
37
|
+
return `rgba(${r}, ${g}, ${b}, ${a})`;
|
|
38
|
+
}
|
|
39
|
+
case "hsl": {
|
|
40
|
+
const { h, s, l } = color.getHsl();
|
|
41
|
+
return `hsl(${h}, ${s}%, ${l}%)`;
|
|
42
|
+
}
|
|
43
|
+
case "hsla": {
|
|
44
|
+
const { h, s, l, a } = color.getHsla();
|
|
45
|
+
return `hsla(${h}, ${s}%, ${l}%, ${a})`;
|
|
46
|
+
}
|
|
47
|
+
default:
|
|
48
|
+
return color.getHex();
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
var pipetteIcon = /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
52
|
+
"path",
|
|
53
|
+
{
|
|
54
|
+
d: "M19.5 3.5a2.12 2.12 0 0 0-3 0l-2.3 2.3-1-1-1.4 1.4 1 1L4 14.9V19h4.1l7.7-7.7 1 1 1.4-1.4-1-1 2.3-2.3a2.12 2.12 0 0 0 0-3ZM7.3 17.6H6v-1.3l6.6-6.6 1.3 1.3-6.6 6.6Z",
|
|
55
|
+
fill: "currentColor"
|
|
56
|
+
}
|
|
57
|
+
) });
|
|
58
|
+
var ColorPicker = ({
|
|
59
|
+
defaultValue = "#3641f5",
|
|
60
|
+
defaultFormat = "hex",
|
|
61
|
+
formats = ALL_FORMATS,
|
|
62
|
+
showInput = true,
|
|
63
|
+
withEyeDropper = false,
|
|
64
|
+
label,
|
|
65
|
+
onChange,
|
|
66
|
+
className,
|
|
67
|
+
...rest
|
|
68
|
+
}) => {
|
|
69
|
+
const [hsva, setHsva] = useState(
|
|
70
|
+
() => new Color({ type: "hex", value: defaultValue }).getHsva()
|
|
71
|
+
);
|
|
72
|
+
const [format, setFormat] = useState(defaultFormat);
|
|
73
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
74
|
+
const [popupPosition, setPopupPosition] = useState({
|
|
75
|
+
left: 0,
|
|
76
|
+
top: 0,
|
|
77
|
+
width: 320
|
|
78
|
+
});
|
|
79
|
+
const [draft, setDraft] = useState(null);
|
|
80
|
+
const [exact, setExact] = useState(
|
|
81
|
+
() => ({ format: "hex", value: defaultValue })
|
|
82
|
+
);
|
|
83
|
+
const colorInput = useMemo(() => ({ type: "hsva", ...hsva }), [hsva]);
|
|
84
|
+
const currentColor = useMemo(() => new Color(colorInput), [colorInput]);
|
|
85
|
+
const display = exact && exact.format === format ? exact.value : colorToString(currentColor, format);
|
|
86
|
+
const inputValue = draft ?? display;
|
|
87
|
+
const hsvaRef = useRef(hsva);
|
|
88
|
+
hsvaRef.current = hsva;
|
|
89
|
+
const formatRef = useRef(format);
|
|
90
|
+
formatRef.current = format;
|
|
91
|
+
const onChangeRef = useRef(onChange);
|
|
92
|
+
onChangeRef.current = onChange;
|
|
93
|
+
const rootRef = useRef(null);
|
|
94
|
+
const triggerRef = useRef(null);
|
|
95
|
+
const popupRef = useRef(null);
|
|
96
|
+
useEffect(() => {
|
|
97
|
+
if (!isOpen) return;
|
|
98
|
+
const handlePointerDown = (event) => {
|
|
99
|
+
const target = event.target;
|
|
100
|
+
if (rootRef.current && !rootRef.current.contains(target) && !popupRef.current?.contains(target)) {
|
|
101
|
+
setIsOpen(false);
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
const handleEscape = (event) => {
|
|
105
|
+
if (event.key === "Escape") setIsOpen(false);
|
|
106
|
+
};
|
|
107
|
+
document.addEventListener("mousedown", handlePointerDown);
|
|
108
|
+
document.addEventListener("keydown", handleEscape);
|
|
109
|
+
return () => {
|
|
110
|
+
document.removeEventListener("mousedown", handlePointerDown);
|
|
111
|
+
document.removeEventListener("keydown", handleEscape);
|
|
112
|
+
};
|
|
113
|
+
}, [isOpen]);
|
|
114
|
+
const updatePopupPosition = useCallback(() => {
|
|
115
|
+
const trigger = triggerRef.current;
|
|
116
|
+
if (!trigger) return;
|
|
117
|
+
const rect = trigger.getBoundingClientRect();
|
|
118
|
+
const viewportPadding = 16;
|
|
119
|
+
const gap = 8;
|
|
120
|
+
const width = Math.min(320, window.innerWidth - viewportPadding * 2);
|
|
121
|
+
const popupHeight = popupRef.current?.offsetHeight ?? 306;
|
|
122
|
+
const fitsBelow = window.innerHeight - rect.bottom - gap >= popupHeight;
|
|
123
|
+
const top = fitsBelow || rect.top < popupHeight + gap ? rect.bottom + gap : rect.top - popupHeight - gap;
|
|
124
|
+
const left = Math.min(
|
|
125
|
+
Math.max(rect.left, viewportPadding),
|
|
126
|
+
window.innerWidth - width - viewportPadding
|
|
127
|
+
);
|
|
128
|
+
setPopupPosition({ left, top: Math.max(viewportPadding, top), width });
|
|
129
|
+
}, []);
|
|
130
|
+
useLayoutEffect(() => {
|
|
131
|
+
if (!isOpen) return;
|
|
132
|
+
updatePopupPosition();
|
|
133
|
+
window.addEventListener("resize", updatePopupPosition);
|
|
134
|
+
window.addEventListener("scroll", updatePopupPosition, true);
|
|
135
|
+
return () => {
|
|
136
|
+
window.removeEventListener("resize", updatePopupPosition);
|
|
137
|
+
window.removeEventListener("scroll", updatePopupPosition, true);
|
|
138
|
+
};
|
|
139
|
+
}, [isOpen, updatePopupPosition]);
|
|
140
|
+
const handlePickerChange = useCallback((next) => {
|
|
141
|
+
const nv = next.getHsva();
|
|
142
|
+
const cur = hsvaRef.current;
|
|
143
|
+
if (nv.h === cur.h && nv.s === cur.s && nv.v === cur.v && nv.a === cur.a) return;
|
|
144
|
+
setHsva(nv);
|
|
145
|
+
setExact(null);
|
|
146
|
+
setDraft(null);
|
|
147
|
+
onChangeRef.current?.(colorToString(next, formatRef.current), next);
|
|
148
|
+
}, []);
|
|
149
|
+
const handleFormatChange = (f) => {
|
|
150
|
+
setFormat(f);
|
|
151
|
+
setDraft(null);
|
|
152
|
+
onChange?.(
|
|
153
|
+
exact && exact.format === f ? exact.value : colorToString(currentColor, f),
|
|
154
|
+
currentColor
|
|
155
|
+
);
|
|
156
|
+
};
|
|
157
|
+
const handleInputChange = (text) => {
|
|
158
|
+
setDraft(text);
|
|
159
|
+
const parsed = parseValue(text, format);
|
|
160
|
+
if (parsed) {
|
|
161
|
+
const c = new Color(parsed);
|
|
162
|
+
setHsva(c.getHsva());
|
|
163
|
+
setExact({ format, value: text.trim() });
|
|
164
|
+
onChange?.(text.trim(), c);
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
return /* @__PURE__ */ jsxs(
|
|
168
|
+
"div",
|
|
169
|
+
{
|
|
170
|
+
ref: rootRef,
|
|
171
|
+
className: cn("relative w-full max-w-xs", className),
|
|
172
|
+
...rest,
|
|
173
|
+
children: [
|
|
174
|
+
label && /* @__PURE__ */ jsx("span", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400", children: label }),
|
|
175
|
+
/* @__PURE__ */ jsxs(
|
|
176
|
+
"button",
|
|
177
|
+
{
|
|
178
|
+
ref: triggerRef,
|
|
179
|
+
type: "button",
|
|
180
|
+
"aria-haspopup": "dialog",
|
|
181
|
+
"aria-expanded": isOpen,
|
|
182
|
+
"aria-label": label ? `Open ${label} color picker` : "Open color picker",
|
|
183
|
+
onClick: () => setIsOpen((open) => !open),
|
|
184
|
+
className: "flex h-11 w-full items-center gap-3 rounded-lg border border-gray-300 bg-white px-3 text-left shadow-theme-xs transition hover:bg-gray-50 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-white/[0.03] dark:focus:border-brand-800",
|
|
185
|
+
children: [
|
|
186
|
+
/* @__PURE__ */ jsx(
|
|
187
|
+
"span",
|
|
188
|
+
{
|
|
189
|
+
"aria-hidden": "true",
|
|
190
|
+
className: "h-7 w-7 shrink-0 rounded-md border border-gray-200 dark:border-gray-700",
|
|
191
|
+
style: { backgroundColor: currentColor.format("rgba") }
|
|
192
|
+
}
|
|
193
|
+
),
|
|
194
|
+
/* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-sm text-gray-800 dark:text-white/90", children: display }),
|
|
195
|
+
/* @__PURE__ */ jsx(
|
|
196
|
+
"svg",
|
|
197
|
+
{
|
|
198
|
+
"aria-hidden": "true",
|
|
199
|
+
className: cn(
|
|
200
|
+
"h-4 w-4 shrink-0 text-gray-500 transition-transform dark:text-gray-400",
|
|
201
|
+
isOpen && "rotate-180"
|
|
202
|
+
),
|
|
203
|
+
viewBox: "0 0 24 24",
|
|
204
|
+
fill: "none",
|
|
205
|
+
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
206
|
+
}
|
|
207
|
+
)
|
|
208
|
+
]
|
|
209
|
+
}
|
|
210
|
+
),
|
|
211
|
+
isOpen && typeof document !== "undefined" && createPortal(
|
|
212
|
+
/* @__PURE__ */ jsxs(
|
|
213
|
+
"div",
|
|
214
|
+
{
|
|
215
|
+
ref: popupRef,
|
|
216
|
+
role: "dialog",
|
|
217
|
+
"aria-label": label ? `${label} color picker` : "Color picker",
|
|
218
|
+
className: "fixed z-999 rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900",
|
|
219
|
+
style: {
|
|
220
|
+
left: popupPosition.left,
|
|
221
|
+
top: popupPosition.top,
|
|
222
|
+
width: popupPosition.width
|
|
223
|
+
},
|
|
224
|
+
children: [
|
|
225
|
+
/* @__PURE__ */ jsxs(
|
|
226
|
+
ColorPicker$1,
|
|
227
|
+
{
|
|
228
|
+
color: colorInput,
|
|
229
|
+
onChange: handlePickerChange,
|
|
230
|
+
className: "h-auto w-full",
|
|
231
|
+
children: [
|
|
232
|
+
/* @__PURE__ */ jsx(ColorPicker$1.Saturation, { className: "mb-4 h-40 rounded-lg" }),
|
|
233
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
234
|
+
withEyeDropper && /* @__PURE__ */ jsx(ColorPicker$1.EyeDropper, { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]", children: pipetteIcon }),
|
|
235
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3", children: [
|
|
236
|
+
/* @__PURE__ */ jsx(ColorPicker$1.Hue, { className: "h-4" }),
|
|
237
|
+
/* @__PURE__ */ jsx(ColorPicker$1.Alpha, { className: "h-4" })
|
|
238
|
+
] })
|
|
239
|
+
] })
|
|
240
|
+
]
|
|
241
|
+
}
|
|
242
|
+
),
|
|
243
|
+
showInput && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-stretch gap-2", children: [
|
|
244
|
+
formats.length > 1 && /* @__PURE__ */ jsxs("span", { className: "relative shrink-0", children: [
|
|
245
|
+
/* @__PURE__ */ jsx(
|
|
246
|
+
"select",
|
|
247
|
+
{
|
|
248
|
+
"aria-label": "Color format",
|
|
249
|
+
value: format,
|
|
250
|
+
onChange: (e) => handleFormatChange(e.target.value),
|
|
251
|
+
className: "h-11 appearance-none rounded-lg border border-gray-300 bg-transparent pl-3 pr-8 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:text-gray-300",
|
|
252
|
+
children: formats.map((f) => /* @__PURE__ */ jsx("option", { value: f, children: f.toUpperCase() }, f))
|
|
253
|
+
}
|
|
254
|
+
),
|
|
255
|
+
/* @__PURE__ */ jsx(
|
|
256
|
+
"svg",
|
|
257
|
+
{
|
|
258
|
+
"aria-hidden": "true",
|
|
259
|
+
className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
|
|
260
|
+
width: "14",
|
|
261
|
+
height: "14",
|
|
262
|
+
viewBox: "0 0 24 24",
|
|
263
|
+
fill: "none",
|
|
264
|
+
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
265
|
+
}
|
|
266
|
+
)
|
|
267
|
+
] }),
|
|
268
|
+
/* @__PURE__ */ jsx(
|
|
269
|
+
"input",
|
|
270
|
+
{
|
|
271
|
+
"aria-label": "Color value",
|
|
272
|
+
value: inputValue,
|
|
273
|
+
onChange: (e) => handleInputChange(e.target.value),
|
|
274
|
+
onBlur: () => setDraft(null),
|
|
275
|
+
className: "h-11 min-w-0 flex-1 rounded-lg border border-gray-300 bg-transparent px-3 font-mono text-sm text-gray-800 focus:outline-hidden dark:border-gray-700 dark:text-white/90"
|
|
276
|
+
}
|
|
277
|
+
)
|
|
278
|
+
] })
|
|
279
|
+
]
|
|
280
|
+
}
|
|
281
|
+
),
|
|
282
|
+
document.body
|
|
283
|
+
)
|
|
284
|
+
]
|
|
285
|
+
}
|
|
286
|
+
);
|
|
287
|
+
};
|
|
288
|
+
|
|
289
|
+
export { ColorPicker };
|
|
290
|
+
//# sourceMappingURL=chunk-LXA5UOBC.js.map
|
|
291
|
+
//# sourceMappingURL=chunk-LXA5UOBC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"names":["RBColorPicker"],"mappings":"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","file":"chunk-LXA5UOBC.js","sourcesContent":["\"use client\";\nimport React, {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ColorPicker as RBColorPicker, Color } from \"react-beautiful-color\";\nimport { cn } from \"../../lib/cn\";\n\n// `react-beautiful-color` doesn't re-export these types from its entry, so\n// derive them from the values its API does expose.\ntype Hsva = ReturnType<Color[\"getHsva\"]>;\ntype ColorInput = ConstructorParameters<typeof Color>[0] & { type: string };\n\nexport type ColorPickerFormat = \"hex\" | \"rgb\" | \"rgba\" | \"hsl\" | \"hsla\";\n\nexport interface ColorPickerProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n /** Initial color (uncontrolled). Any hex string, e.g. `\"#3641f5\"`. */\n defaultValue?: string;\n /** Format selected on first render. Default: `\"hex\"`. */\n defaultFormat?: ColorPickerFormat;\n /** Formats offered in the switcher. Default: all five. */\n formats?: ColorPickerFormat[];\n /** Render the value input + format switcher. Default: `true`. */\n showInput?: boolean;\n /** Show the native eye-dropper button (browser support varies). */\n withEyeDropper?: boolean;\n /** Optional label rendered above the picker. */\n label?: string;\n /** Fires on every change with the formatted string and the `Color` instance. */\n onChange?: (value: string, color: Color) => void;\n}\n\nconst ALL_FORMATS: ColorPickerFormat[] = [\"hex\", \"rgb\", \"rgba\", \"hsl\", \"hsla\"];\n\n/** Parse the text in the input back into a `ColorInput`, or `null` if invalid. */\nfunction parseValue(text: string, format: ColorPickerFormat): ColorInput | null {\n const t = text.trim();\n if (format === \"hex\") {\n return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)\n ? { type: \"hex\", value: t }\n : null;\n }\n const n = t.match(/-?\\d*\\.?\\d+/g)?.map(Number) ?? [];\n if (format === \"rgb\" && n.length >= 3) return { type: \"rgb\", r: n[0], g: n[1], b: n[2] };\n if (format === \"rgba\" && n.length >= 4)\n return { type: \"rgba\", r: n[0], g: n[1], b: n[2], a: n[3] };\n if (format === \"hsl\" && n.length >= 3) return { type: \"hsl\", h: n[0], s: n[1], l: n[2] };\n if (format === \"hsla\" && n.length >= 4)\n return { type: \"hsla\", h: n[0], s: n[1], l: n[2], a: n[3] };\n return null;\n}\n\n/** Format a `Color` into the requested CSS string. */\nfunction colorToString(color: Color, format: ColorPickerFormat): string {\n switch (format) {\n case \"hex\": {\n const { r, g, b } = color.getRgb();\n const a = color.getRgba().a;\n const hex = `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, \"0\")).join(\"\")}`;\n return a < 1\n ? `${hex}${Math.round(a * 255).toString(16).padStart(2, \"0\")}`\n : hex;\n }\n case \"rgb\": {\n const { r, g, b } = color.getRgb();\n return `rgb(${r}, ${g}, ${b})`;\n }\n case \"rgba\": {\n const { r, g, b, a } = color.getRgba();\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n }\n case \"hsl\": {\n const { h, s, l } = color.getHsl();\n return `hsl(${h}, ${s}%, ${l}%)`;\n }\n case \"hsla\": {\n const { h, s, l, a } = color.getHsla();\n return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n }\n default:\n return color.getHex();\n }\n}\n\nconst pipetteIcon = (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M19.5 3.5a2.12 2.12 0 0 0-3 0l-2.3 2.3-1-1-1.4 1.4 1 1L4 14.9V19h4.1l7.7-7.7 1 1 1.4-1.4-1-1 2.3-2.3a2.12 2.12 0 0 0 0-3ZM7.3 17.6H6v-1.3l6.6-6.6 1.3 1.3-6.6 6.6Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({\n defaultValue = \"#3641f5\",\n defaultFormat = \"hex\",\n formats = ALL_FORMATS,\n showInput = true,\n withEyeDropper = false,\n label,\n onChange,\n className,\n ...rest\n}) => {\n // Internal state lives in full-fidelity HSVA — the picker's native space.\n // Feeding anything lossier (e.g. hex) back into the controlled picker makes\n // the knobs fight the cursor (hue/alpha collapse on round-trip), which is\n // why drag would freeze or snap.\n const [hsva, setHsva] = useState<Hsva>(() =>\n new Color({ type: \"hex\", value: defaultValue }).getHsva()\n );\n const [format, setFormat] = useState<ColorPickerFormat>(defaultFormat);\n const [isOpen, setIsOpen] = useState(false);\n const [popupPosition, setPopupPosition] = useState({\n left: 0,\n top: 0,\n width: 320,\n });\n // While the input is focused we keep a raw draft so partial/invalid typing\n // isn't clobbered by the normalized value.\n const [draft, setDraft] = useState<string | null>(null);\n // HSVA is integer-quantized, so we keep the user's exact text (defaultValue\n // or typed) and show it verbatim until the picker actually changes color.\n const [exact, setExact] = useState<{ format: ColorPickerFormat; value: string } | null>(\n () => ({ format: \"hex\", value: defaultValue })\n );\n\n const colorInput = useMemo(() => ({ type: \"hsva\" as const, ...hsva }), [hsva]);\n const currentColor = useMemo(() => new Color(colorInput), [colorInput]);\n const display =\n exact && exact.format === format ? exact.value : colorToString(currentColor, format);\n const inputValue = draft ?? display;\n\n // The picker's internal drag layer unbinds its document listeners whenever\n // the `onChange` identity changes (its cleanup effect depends on it), which\n // would kill an in-flight drag after the first tick. Keep the handler\n // identity-stable and read mutable values through refs.\n const hsvaRef = useRef(hsva);\n hsvaRef.current = hsva;\n const formatRef = useRef(format);\n formatRef.current = format;\n const onChangeRef = useRef(onChange);\n onChangeRef.current = onChange;\n const rootRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!isOpen) return;\n\n const handlePointerDown = (event: MouseEvent) => {\n const target = event.target as Node;\n if (\n rootRef.current &&\n !rootRef.current.contains(target) &&\n !popupRef.current?.contains(target)\n ) {\n setIsOpen(false);\n }\n };\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") setIsOpen(false);\n };\n\n document.addEventListener(\"mousedown\", handlePointerDown);\n document.addEventListener(\"keydown\", handleEscape);\n return () => {\n document.removeEventListener(\"mousedown\", handlePointerDown);\n document.removeEventListener(\"keydown\", handleEscape);\n };\n }, [isOpen]);\n\n const updatePopupPosition = useCallback(() => {\n const trigger = triggerRef.current;\n if (!trigger) return;\n\n const rect = trigger.getBoundingClientRect();\n const viewportPadding = 16;\n const gap = 8;\n const width = Math.min(320, window.innerWidth - viewportPadding * 2);\n const popupHeight = popupRef.current?.offsetHeight ?? 306;\n const fitsBelow = window.innerHeight - rect.bottom - gap >= popupHeight;\n const top = fitsBelow || rect.top < popupHeight + gap\n ? rect.bottom + gap\n : rect.top - popupHeight - gap;\n const left = Math.min(\n Math.max(rect.left, viewportPadding),\n window.innerWidth - width - viewportPadding\n );\n\n setPopupPosition({ left, top: Math.max(viewportPadding, top), width });\n }, []);\n\n useLayoutEffect(() => {\n if (!isOpen) return;\n\n updatePopupPosition();\n window.addEventListener(\"resize\", updatePopupPosition);\n window.addEventListener(\"scroll\", updatePopupPosition, true);\n return () => {\n window.removeEventListener(\"resize\", updatePopupPosition);\n window.removeEventListener(\"scroll\", updatePopupPosition, true);\n };\n }, [isOpen, updatePopupPosition]);\n\n const handlePickerChange = useCallback((next: Color) => {\n const nv = next.getHsva();\n const cur = hsvaRef.current;\n // The picker re-emits the current color on mount; ignore no-op changes so\n // the exact defaultValue isn't clobbered.\n if (nv.h === cur.h && nv.s === cur.s && nv.v === cur.v && nv.a === cur.a) return;\n setHsva(nv);\n setExact(null);\n setDraft(null);\n onChangeRef.current?.(colorToString(next, formatRef.current), next);\n }, []);\n\n const handleFormatChange = (f: ColorPickerFormat) => {\n setFormat(f);\n setDraft(null);\n onChange?.(\n exact && exact.format === f ? exact.value : colorToString(currentColor, f),\n currentColor\n );\n };\n\n const handleInputChange = (text: string) => {\n setDraft(text);\n const parsed = parseValue(text, format);\n if (parsed) {\n const c = new Color(parsed);\n setHsva(c.getHsva());\n setExact({ format, value: text.trim() });\n onChange?.(text.trim(), c);\n }\n };\n\n return (\n <div\n ref={rootRef}\n className={cn(\"relative w-full max-w-xs\", className)}\n {...rest}\n >\n {label && (\n <span className=\"mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400\">\n {label}\n </span>\n )}\n <button\n ref={triggerRef}\n type=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={isOpen}\n aria-label={label ? `Open ${label} color picker` : \"Open color picker\"}\n onClick={() => setIsOpen((open) => !open)}\n className=\"flex h-11 w-full items-center gap-3 rounded-lg border border-gray-300 bg-white px-3 text-left shadow-theme-xs transition hover:bg-gray-50 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-white/[0.03] dark:focus:border-brand-800\"\n >\n <span\n aria-hidden=\"true\"\n className=\"h-7 w-7 shrink-0 rounded-md border border-gray-200 dark:border-gray-700\"\n style={{ backgroundColor: currentColor.format(\"rgba\") }}\n />\n <span className=\"min-w-0 flex-1 truncate font-mono text-sm text-gray-800 dark:text-white/90\">\n {display}\n </span>\n <svg\n aria-hidden=\"true\"\n className={cn(\n \"h-4 w-4 shrink-0 text-gray-500 transition-transform dark:text-gray-400\",\n isOpen && \"rotate-180\"\n )}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path d=\"m6 9 6 6 6-6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </button>\n\n {isOpen && typeof document !== \"undefined\" && createPortal(\n <div\n ref={popupRef}\n role=\"dialog\"\n aria-label={label ? `${label} color picker` : \"Color picker\"}\n className=\"fixed z-999 rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900\"\n style={{\n left: popupPosition.left,\n top: popupPosition.top,\n width: popupPosition.width,\n }}\n >\n <RBColorPicker\n color={colorInput}\n onChange={handlePickerChange}\n className=\"h-auto w-full\"\n >\n {/* Overflow would clip the drag knobs beyond the track bounds. */}\n <RBColorPicker.Saturation className=\"mb-4 h-40 rounded-lg\" />\n <div className=\"flex items-center gap-3\">\n {withEyeDropper && (\n <RBColorPicker.EyeDropper className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]\">\n {pipetteIcon}\n </RBColorPicker.EyeDropper>\n )}\n <div className=\"flex flex-1 flex-col gap-3\">\n <RBColorPicker.Hue className=\"h-4\" />\n <RBColorPicker.Alpha className=\"h-4\" />\n </div>\n </div>\n </RBColorPicker>\n\n {showInput && (\n <div className=\"mt-4 flex items-stretch gap-2\">\n {formats.length > 1 && (\n <span className=\"relative shrink-0\">\n <select\n aria-label=\"Color format\"\n value={format}\n onChange={(e) => handleFormatChange(e.target.value as ColorPickerFormat)}\n className=\"h-11 appearance-none rounded-lg border border-gray-300 bg-transparent pl-3 pr-8 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:text-gray-300\"\n >\n {formats.map((f) => (\n <option key={f} value={f}>\n {f.toUpperCase()}\n </option>\n ))}\n </select>\n <svg\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path d=\"m6 9 6 6 6-6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </span>\n )}\n <input\n aria-label=\"Color value\"\n value={inputValue}\n onChange={(e) => handleInputChange(e.target.value)}\n onBlur={() => setDraft(null)}\n className=\"h-11 min-w-0 flex-1 rounded-lg border border-gray-300 bg-transparent px-3 font-mono text-sm text-gray-800 focus:outline-hidden dark:border-gray-700 dark:text-white/90\"\n />\n </div>\n )}\n </div>,\n document.body\n )}\n </div>\n );\n};\n"]}
|
|
@@ -7,6 +7,8 @@ var react = require('@tiptap/react');
|
|
|
7
7
|
var StarterKit = require('@tiptap/starter-kit');
|
|
8
8
|
var Link = require('@tiptap/extension-link');
|
|
9
9
|
var Placeholder = require('@tiptap/extension-placeholder');
|
|
10
|
+
var Superscript = require('@tiptap/extension-superscript');
|
|
11
|
+
var Subscript = require('@tiptap/extension-subscript');
|
|
10
12
|
var jsxRuntime = require('react/jsx-runtime');
|
|
11
13
|
|
|
12
14
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -15,6 +17,8 @@ var React__default = /*#__PURE__*/_interopDefault(React);
|
|
|
15
17
|
var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
|
|
16
18
|
var Link__default = /*#__PURE__*/_interopDefault(Link);
|
|
17
19
|
var Placeholder__default = /*#__PURE__*/_interopDefault(Placeholder);
|
|
20
|
+
var Superscript__default = /*#__PURE__*/_interopDefault(Superscript);
|
|
21
|
+
var Subscript__default = /*#__PURE__*/_interopDefault(Subscript);
|
|
18
22
|
|
|
19
23
|
var base = {
|
|
20
24
|
width: 18,
|
|
@@ -100,11 +104,23 @@ var RedoIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, children:
|
|
|
100
104
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 7v6h-6" }),
|
|
101
105
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 13a9 9 0 1 1-3-7.7L21 8" })
|
|
102
106
|
] });
|
|
107
|
+
var SuperscriptIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, children: [
|
|
108
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m4 19 8-10" }),
|
|
109
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 19-8-10" }),
|
|
110
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 9h-4c0-1.5.44-2 1.5-2.5S20 5.6 20 4.5C20 3.7 19.3 3 18.5 3S17 3.7 17 4.5" })
|
|
111
|
+
] });
|
|
112
|
+
var SubscriptIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, children: [
|
|
113
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m4 5 8 10" }),
|
|
114
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 5-8 10" }),
|
|
115
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 21h-4c0-1.5.44-2 1.5-2.5S20 17.6 20 16.5c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5" })
|
|
116
|
+
] });
|
|
103
117
|
var DEFAULT_TOOLBAR = [
|
|
104
118
|
"bold",
|
|
105
119
|
"italic",
|
|
106
120
|
"strike",
|
|
107
121
|
"code",
|
|
122
|
+
"superscript",
|
|
123
|
+
"subscript",
|
|
108
124
|
"divider",
|
|
109
125
|
"heading1",
|
|
110
126
|
"heading2",
|
|
@@ -145,6 +161,18 @@ var BUILTINS = {
|
|
|
145
161
|
onClick: (e) => e.chain().focus().toggleCode().run(),
|
|
146
162
|
isActive: (e) => e.isActive("code")
|
|
147
163
|
},
|
|
164
|
+
superscript: {
|
|
165
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(SuperscriptIcon, {}),
|
|
166
|
+
title: "Superscript",
|
|
167
|
+
onClick: (e) => e.chain().focus().toggleSuperscript().run(),
|
|
168
|
+
isActive: (e) => e.isActive("superscript")
|
|
169
|
+
},
|
|
170
|
+
subscript: {
|
|
171
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(SubscriptIcon, {}),
|
|
172
|
+
title: "Subscript",
|
|
173
|
+
onClick: (e) => e.chain().focus().toggleSubscript().run(),
|
|
174
|
+
isActive: (e) => e.isActive("subscript")
|
|
175
|
+
},
|
|
148
176
|
heading1: {
|
|
149
177
|
icon: /* @__PURE__ */ jsxRuntime.jsx(Heading1Icon, {}),
|
|
150
178
|
title: "Heading 1",
|
|
@@ -243,7 +271,9 @@ var Editor = ({
|
|
|
243
271
|
extensions: [
|
|
244
272
|
StarterKit__default.default,
|
|
245
273
|
Link__default.default.configure({ openOnClick: false }),
|
|
246
|
-
Placeholder__default.default.configure({ placeholder })
|
|
274
|
+
Placeholder__default.default.configure({ placeholder }),
|
|
275
|
+
Superscript__default.default,
|
|
276
|
+
Subscript__default.default
|
|
247
277
|
],
|
|
248
278
|
content,
|
|
249
279
|
editable,
|
|
@@ -358,5 +388,5 @@ var Editor = ({
|
|
|
358
388
|
};
|
|
359
389
|
|
|
360
390
|
exports.Editor = Editor;
|
|
361
|
-
//# sourceMappingURL=chunk-
|
|
362
|
-
//# sourceMappingURL=chunk-
|
|
391
|
+
//# sourceMappingURL=chunk-S4ADL5B7.cjs.map
|
|
392
|
+
//# sourceMappingURL=chunk-S4ADL5B7.cjs.map
|