@haklex/rich-plugin-toolbar 0.0.81 → 0.0.83

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.
Files changed (3) hide show
  1. package/dist/index.mjs +570 -541
  2. package/dist/rich-plugin-toolbar.css +1 -2
  3. package/package.json +4 -4
package/dist/index.mjs CHANGED
@@ -1,15 +1,14 @@
1
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
1
2
  import { collectCommandItems } from "@haklex/rich-editor/commands";
2
- import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, createTooltipHandle } from "@haklex/rich-editor-ui";
3
- import { $isListNode, INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list";
3
+ import { TooltipTrigger, TooltipRoot, TooltipContent, DropdownMenuContent, DropdownMenuItem, DropdownMenu, DropdownMenuTrigger, createTooltipHandle, TooltipProvider } from "@haklex/rich-editor-ui";
4
+ import { $isListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_CHECK_LIST_COMMAND } from "@lexical/list";
4
5
  import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
5
6
  import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
6
7
  import { $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } from "@lexical/selection";
7
8
  import { $findMatchingParent } from "@lexical/utils";
8
- import { $createParagraphNode, $getSelection, $isElementNode, $isRangeSelection, $isRootOrShadowRoot, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, REDO_COMMAND, UNDO_COMMAND } from "lexical";
9
- import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, ChevronDown, Code, Ellipsis, Heading1, Heading2, Heading3, Highlighter, Italic, List, ListChecks, ListOrdered, Pilcrow, Redo, Strikethrough, Underline, Undo } from "lucide-react";
10
- import { useCallback, useEffect, useMemo, useState } from "react";
11
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
12
- //#region src/styles.css.ts
9
+ import { $getSelection, $isRangeSelection, $isRootOrShadowRoot, $isElementNode, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $createParagraphNode, UNDO_COMMAND, REDO_COMMAND, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND } from "lexical";
10
+ import { ChevronDown, Pilcrow, Heading1, Heading2, Heading3, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Highlighter, List, ListOrdered, ListChecks, AlignLeft, AlignCenter, AlignRight, AlignJustify, Ellipsis } from "lucide-react";
11
+ import { useState, useMemo, useCallback, useEffect } from "react";
13
12
  var toolbarContainer = "_1e1ersc0";
14
13
  var toolbarRow = "_1e1ersc1";
15
14
  var toolbarButton = "_1e1ersc2";
@@ -18,549 +17,579 @@ var toolbarDropdownTrigger = "_1e1ersc4";
18
17
  var toolbarDropdownTriggerChevron = "_1e1ersc5";
19
18
  var toolbarSeparator = "_1e1ersc6";
20
19
  var toolbarDropdownItemActive = "_1e1ersc7";
21
- //#endregion
22
- //#region src/ToolbarButton.tsx
23
- function ToolbarButton({ icon, title, shortcut, active, disabled, onClick, tooltipHandle }) {
24
- const button = /* @__PURE__ */ jsx("button", {
25
- "aria-label": title,
26
- "aria-pressed": active,
27
- className: `${toolbarButton}${active ? ` ${toolbarButtonActive}` : ""}`,
28
- disabled,
29
- type: "button",
30
- onMouseDown: (e) => {
31
- e.preventDefault();
32
- onClick();
33
- }
34
- });
35
- if (tooltipHandle) return /* @__PURE__ */ jsx(TooltipTrigger, {
36
- handle: tooltipHandle,
37
- payload: {
38
- title,
39
- shortcut
40
- },
41
- render: button,
42
- children: icon
43
- });
44
- return /* @__PURE__ */ jsxs(TooltipRoot, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
45
- render: button,
46
- children: icon
47
- }), /* @__PURE__ */ jsxs(TooltipContent, {
48
- side: "bottom",
49
- sideOffset: 4,
50
- children: [title, shortcut && /* @__PURE__ */ jsx("span", {
51
- className: "_1e1ersc8",
52
- children: shortcut
53
- })]
54
- })] });
20
+ var tooltipShortcut = "_1e1ersc8";
21
+ function ToolbarButton({
22
+ icon,
23
+ title,
24
+ shortcut,
25
+ active,
26
+ disabled,
27
+ onClick,
28
+ tooltipHandle
29
+ }) {
30
+ const button = /* @__PURE__ */ jsx(
31
+ "button",
32
+ {
33
+ "aria-label": title,
34
+ "aria-pressed": active,
35
+ className: `${toolbarButton}${active ? ` ${toolbarButtonActive}` : ""}`,
36
+ disabled,
37
+ type: "button",
38
+ onMouseDown: (e) => {
39
+ e.preventDefault();
40
+ onClick();
41
+ }
42
+ }
43
+ );
44
+ if (tooltipHandle) {
45
+ return /* @__PURE__ */ jsx(
46
+ TooltipTrigger,
47
+ {
48
+ handle: tooltipHandle,
49
+ payload: { title, shortcut },
50
+ render: button,
51
+ children: icon
52
+ }
53
+ );
54
+ }
55
+ return /* @__PURE__ */ jsxs(TooltipRoot, { children: [
56
+ /* @__PURE__ */ jsx(TooltipTrigger, { render: button, children: icon }),
57
+ /* @__PURE__ */ jsxs(TooltipContent, { side: "bottom", sideOffset: 4, children: [
58
+ title,
59
+ shortcut && /* @__PURE__ */ jsx("span", { className: tooltipShortcut, children: shortcut })
60
+ ] })
61
+ ] });
55
62
  }
56
- //#endregion
57
- //#region src/ToolbarDropdown.tsx
58
- function ToolbarDropdown({ label, title, items, triggerWidth, tooltipHandle }) {
59
- const trigger = /* @__PURE__ */ jsx(DropdownMenuTrigger, {
60
- className: toolbarDropdownTrigger,
61
- render: /* @__PURE__ */ jsx("button", { type: "button" }),
62
- style: triggerWidth ? { width: triggerWidth } : void 0
63
- });
64
- const triggerContent = /* @__PURE__ */ jsxs(Fragment, { children: [label, /* @__PURE__ */ jsx("span", {
65
- className: toolbarDropdownTriggerChevron,
66
- children: /* @__PURE__ */ jsx(ChevronDown, { size: 12 })
67
- })] });
68
- const menu = /* @__PURE__ */ jsx(DropdownMenuContent, {
69
- sideOffset: 4,
70
- children: items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
71
- className: item.active ? toolbarDropdownItemActive : void 0,
72
- style: item.style,
73
- onClick: item.onSelect,
74
- children: [item.icon && /* @__PURE__ */ jsx("span", {
75
- style: {
76
- marginRight: 8,
77
- display: "inline-flex",
78
- transform: "scale(0.8)",
79
- transformOrigin: "left center"
80
- },
81
- children: item.icon
82
- }), item.label]
83
- }, item.label))
84
- });
85
- if (tooltipHandle) return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
86
- handle: tooltipHandle,
87
- payload: { title },
88
- render: trigger,
89
- children: triggerContent
90
- }), menu] });
91
- return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(TooltipRoot, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
92
- render: trigger,
93
- children: triggerContent
94
- }), /* @__PURE__ */ jsx(TooltipContent, {
95
- side: "bottom",
96
- sideOffset: 4,
97
- children: title
98
- })] }), menu] });
63
+ function ToolbarDropdown({
64
+ label,
65
+ title,
66
+ items,
67
+ triggerWidth,
68
+ tooltipHandle
69
+ }) {
70
+ const triggerStyle = triggerWidth ? { width: triggerWidth } : void 0;
71
+ const trigger = /* @__PURE__ */ jsx(
72
+ DropdownMenuTrigger,
73
+ {
74
+ className: toolbarDropdownTrigger,
75
+ render: /* @__PURE__ */ jsx("button", { type: "button" }),
76
+ style: triggerStyle
77
+ }
78
+ );
79
+ const triggerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
80
+ label,
81
+ /* @__PURE__ */ jsx("span", { className: toolbarDropdownTriggerChevron, children: /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) })
82
+ ] });
83
+ const menu = /* @__PURE__ */ jsx(DropdownMenuContent, { sideOffset: 4, children: items.map((item) => /* @__PURE__ */ jsxs(
84
+ DropdownMenuItem,
85
+ {
86
+ className: item.active ? toolbarDropdownItemActive : void 0,
87
+ style: item.style,
88
+ onClick: item.onSelect,
89
+ children: [
90
+ item.icon && /* @__PURE__ */ jsx(
91
+ "span",
92
+ {
93
+ style: {
94
+ marginRight: 8,
95
+ display: "inline-flex",
96
+ transform: "scale(0.8)",
97
+ transformOrigin: "left center"
98
+ },
99
+ children: item.icon
100
+ }
101
+ ),
102
+ item.label
103
+ ]
104
+ },
105
+ item.label
106
+ )) });
107
+ if (tooltipHandle) {
108
+ return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
109
+ /* @__PURE__ */ jsx(
110
+ TooltipTrigger,
111
+ {
112
+ handle: tooltipHandle,
113
+ payload: { title },
114
+ render: trigger,
115
+ children: triggerContent
116
+ }
117
+ ),
118
+ menu
119
+ ] });
120
+ }
121
+ return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
122
+ /* @__PURE__ */ jsxs(TooltipRoot, { children: [
123
+ /* @__PURE__ */ jsx(TooltipTrigger, { render: trigger, children: triggerContent }),
124
+ /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", sideOffset: 4, children: title })
125
+ ] }),
126
+ menu
127
+ ] });
99
128
  }
100
- //#endregion
101
- //#region src/ToolbarSeparator.tsx
102
129
  function ToolbarSeparator() {
103
- return /* @__PURE__ */ jsx("div", { className: toolbarSeparator });
130
+ return /* @__PURE__ */ jsx("div", { className: toolbarSeparator });
104
131
  }
105
- //#endregion
106
- //#region src/ToolbarPlugin.tsx
107
- var ICON_SIZE = 15;
108
- var ICON_STROKE = 2;
109
- var FONT_FAMILIES = [
110
- {
111
- label: "默认",
112
- value: ""
113
- },
114
- {
115
- label: "宋体",
116
- value: "\"Noto Serif CJK SC\", \"Source Han Serif SC\", SimSun, serif"
117
- },
118
- {
119
- label: "黑体",
120
- value: "\"Noto Sans CJK SC\", \"Source Han Sans SC\", SimHei, sans-serif"
121
- },
122
- {
123
- label: "楷体",
124
- value: "KaiTi, STKaiti, serif"
125
- },
126
- {
127
- label: "Sans",
128
- value: "system-ui, -apple-system, sans-serif"
129
- },
130
- {
131
- label: "Serif",
132
- value: "Georgia, \"Times New Roman\", serif"
133
- },
134
- {
135
- label: "Mono",
136
- value: "ui-monospace, \"SF Mono\", \"Fira Code\", monospace"
137
- }
132
+ const ICON_SIZE = 15;
133
+ const ICON_STROKE = 2;
134
+ const FONT_FAMILIES = [
135
+ { label: "默认", value: "" },
136
+ {
137
+ label: "宋体",
138
+ value: '"Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif'
139
+ },
140
+ {
141
+ label: "黑体",
142
+ value: '"Noto Sans CJK SC", "Source Han Sans SC", SimHei, sans-serif'
143
+ },
144
+ { label: "楷体", value: "KaiTi, STKaiti, serif" },
145
+ { label: "Sans", value: "system-ui, -apple-system, sans-serif" },
146
+ { label: "Serif", value: 'Georgia, "Times New Roman", serif' },
147
+ { label: "Mono", value: 'ui-monospace, "SF Mono", "Fira Code", monospace' }
138
148
  ];
139
149
  function getFontLabel(fontFamily) {
140
- if (!fontFamily) return "默认";
141
- const match = FONT_FAMILIES.find((f) => f.value === fontFamily);
142
- if (match) return match.label;
143
- for (const def of FONT_FAMILIES) if (def.value && fontFamily.startsWith(def.value.split(",")[0])) return def.label;
144
- return "默认";
150
+ if (!fontFamily) return "默认";
151
+ const match = FONT_FAMILIES.find((f) => f.value === fontFamily);
152
+ if (match) return match.label;
153
+ for (const def of FONT_FAMILIES) {
154
+ if (def.value && fontFamily.startsWith(def.value.split(",")[0])) {
155
+ return def.label;
156
+ }
157
+ }
158
+ return "默认";
145
159
  }
146
- var BLOCK_TYPE_LABELS = {
147
- paragraph: "Text",
148
- h1: "Heading 1",
149
- h2: "Heading 2",
150
- h3: "Heading 3",
151
- bullet: "Bulleted List",
152
- number: "Numbered List",
153
- check: "To-do List",
154
- other: "Other"
160
+ const BLOCK_TYPE_LABELS = {
161
+ paragraph: "Text",
162
+ h1: "Heading 1",
163
+ h2: "Heading 2",
164
+ h3: "Heading 3",
165
+ bullet: "Bulleted List",
166
+ number: "Numbered List",
167
+ check: "To-do List",
168
+ other: "Other"
155
169
  };
156
- var INITIAL_STATE = {
157
- canUndo: false,
158
- canRedo: false,
159
- blockType: "paragraph",
160
- fontFamily: "",
161
- elementFormat: "left",
162
- isBold: false,
163
- isItalic: false,
164
- isUnderline: false,
165
- isStrikethrough: false,
166
- isCode: false,
167
- isHighlight: false
170
+ const INITIAL_STATE = {
171
+ canUndo: false,
172
+ canRedo: false,
173
+ blockType: "paragraph",
174
+ fontFamily: "",
175
+ elementFormat: "left",
176
+ isBold: false,
177
+ isItalic: false,
178
+ isUnderline: false,
179
+ isStrikethrough: false,
180
+ isCode: false,
181
+ isHighlight: false
168
182
  };
169
183
  function getBlockType(anchorNode) {
170
- if ($isHeadingNode(anchorNode)) {
171
- const tag = anchorNode.getTag();
172
- if (tag === "h1" || tag === "h2" || tag === "h3") return tag;
173
- return "other";
174
- }
175
- if ($isListNode(anchorNode)) {
176
- const listType = anchorNode.getListType();
177
- if (listType === "bullet") return "bullet";
178
- if (listType === "number") return "number";
179
- if (listType === "check") return "check";
180
- return "other";
181
- }
182
- if (anchorNode.getType() === "paragraph") return "paragraph";
183
- return "other";
184
+ if ($isHeadingNode(anchorNode)) {
185
+ const tag = anchorNode.getTag();
186
+ if (tag === "h1" || tag === "h2" || tag === "h3") return tag;
187
+ return "other";
188
+ }
189
+ if ($isListNode(anchorNode)) {
190
+ const listType = anchorNode.getListType();
191
+ if (listType === "bullet") return "bullet";
192
+ if (listType === "number") return "number";
193
+ if (listType === "check") return "check";
194
+ return "other";
195
+ }
196
+ const type = anchorNode.getType();
197
+ if (type === "paragraph") return "paragraph";
198
+ return "other";
184
199
  }
185
- var DEFAULT_MAX_VISIBLE_INSERT_ITEMS = 5;
186
- function ToolbarPlugin({ className, maxVisibleInsertItems = DEFAULT_MAX_VISIBLE_INSERT_ITEMS, insertItemOrder }) {
187
- const [editor] = useLexicalComposerContext();
188
- const [state, setState] = useState(INITIAL_STATE);
189
- const [tooltipHandle] = useState(() => createTooltipHandle());
190
- const toolbarItems = useMemo(() => {
191
- const items = collectCommandItems(editor).filter((item) => item.placement?.includes("toolbar") && item.group === "insert");
192
- if (!insertItemOrder || insertItemOrder.length === 0) return items;
193
- return items.sort((a, b) => {
194
- const ai = insertItemOrder.indexOf(a.title);
195
- const bi = insertItemOrder.indexOf(b.title);
196
- return (ai === -1 ? Infinity : ai) - (bi === -1 ? Infinity : bi);
197
- });
198
- }, [editor, insertItemOrder]);
199
- const updateToolbar = useCallback(() => {
200
- const selection = $getSelection();
201
- if (!$isRangeSelection(selection)) return;
202
- const anchorNode = selection.anchor.getNode();
203
- let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
204
- const parent = e.getParent();
205
- return parent !== null && $isRootOrShadowRoot(parent);
206
- }) ?? anchorNode.getTopLevelElementOrThrow();
207
- if ($isListNode(element)) {
208
- const parentList = $findMatchingParent(anchorNode, (node) => $isListNode(node));
209
- if (parentList) element = parentList;
210
- }
211
- const blockType = getBlockType(element);
212
- const fontFamily = $getSelectionStyleValueForProperty(selection, "font-family", "");
213
- const elementFormat = $isElementNode(element) ? element.getFormatType() : "left";
214
- setState((prev) => ({
215
- ...prev,
216
- blockType,
217
- fontFamily,
218
- elementFormat,
219
- isBold: selection.hasFormat("bold"),
220
- isItalic: selection.hasFormat("italic"),
221
- isUnderline: selection.hasFormat("underline"),
222
- isStrikethrough: selection.hasFormat("strikethrough"),
223
- isCode: selection.hasFormat("code"),
224
- isHighlight: selection.hasFormat("highlight")
225
- }));
226
- }, []);
227
- useEffect(() => {
228
- const unregisterUndo = editor.registerCommand(CAN_UNDO_COMMAND, (payload) => {
229
- setState((prev) => ({
230
- ...prev,
231
- canUndo: payload
232
- }));
233
- return false;
234
- }, COMMAND_PRIORITY_LOW);
235
- const unregisterRedo = editor.registerCommand(CAN_REDO_COMMAND, (payload) => {
236
- setState((prev) => ({
237
- ...prev,
238
- canRedo: payload
239
- }));
240
- return false;
241
- }, COMMAND_PRIORITY_LOW);
242
- const unregisterUpdate = editor.registerUpdateListener(({ editorState }) => {
243
- editorState.read(() => {
244
- updateToolbar();
245
- });
246
- });
247
- return () => {
248
- unregisterUndo();
249
- unregisterRedo();
250
- unregisterUpdate();
251
- };
252
- }, [editor, updateToolbar]);
253
- const applyFontFamily = useCallback((value) => {
254
- editor.update(() => {
255
- const selection = $getSelection();
256
- if ($isRangeSelection(selection)) $patchStyleText(selection, { "font-family": value || "" });
257
- });
258
- }, [editor]);
259
- const fontFamilyItems = useMemo(() => FONT_FAMILIES.map((def) => ({
260
- label: def.label,
261
- active: state.fontFamily === def.value,
262
- style: def.value ? { fontFamily: def.value } : void 0,
263
- onSelect: () => applyFontFamily(def.value)
264
- })), [state.fontFamily, applyFontFamily]);
265
- const headingItems = useMemo(() => [
266
- {
267
- label: "Text",
268
- icon: /* @__PURE__ */ jsx(Pilcrow, {
269
- size: ICON_SIZE,
270
- strokeWidth: ICON_STROKE
271
- }),
272
- active: state.blockType === "paragraph",
273
- onSelect: () => {
274
- editor.update(() => {
275
- const selection = $getSelection();
276
- if ($isRangeSelection(selection)) $setBlocksType(selection, () => $createParagraphNode());
277
- });
278
- }
279
- },
280
- {
281
- label: "Heading 1",
282
- icon: /* @__PURE__ */ jsx(Heading1, {
283
- size: ICON_SIZE,
284
- strokeWidth: ICON_STROKE
285
- }),
286
- active: state.blockType === "h1",
287
- onSelect: () => {
288
- editor.update(() => {
289
- const selection = $getSelection();
290
- if ($isRangeSelection(selection)) $setBlocksType(selection, () => $createHeadingNode("h1"));
291
- });
292
- }
293
- },
294
- {
295
- label: "Heading 2",
296
- icon: /* @__PURE__ */ jsx(Heading2, {
297
- size: ICON_SIZE,
298
- strokeWidth: ICON_STROKE
299
- }),
300
- active: state.blockType === "h2",
301
- onSelect: () => {
302
- editor.update(() => {
303
- const selection = $getSelection();
304
- if ($isRangeSelection(selection)) $setBlocksType(selection, () => $createHeadingNode("h2"));
305
- });
306
- }
307
- },
308
- {
309
- label: "Heading 3",
310
- icon: /* @__PURE__ */ jsx(Heading3, {
311
- size: ICON_SIZE,
312
- strokeWidth: ICON_STROKE
313
- }),
314
- active: state.blockType === "h3",
315
- onSelect: () => {
316
- editor.update(() => {
317
- const selection = $getSelection();
318
- if ($isRangeSelection(selection)) $setBlocksType(selection, () => $createHeadingNode("h3"));
319
- });
320
- }
321
- }
322
- ], [editor, state.blockType]);
323
- const containerClassName = className ? `${toolbarContainer} ${className}` : toolbarContainer;
324
- const h = tooltipHandle;
325
- return /* @__PURE__ */ jsxs(TooltipProvider, {
326
- delay: 300,
327
- children: [/* @__PURE__ */ jsx(TooltipRoot, {
328
- disableHoverablePopup: true,
329
- handle: tooltipHandle,
330
- children: ((props) => props.payload !== void 0 ? /* @__PURE__ */ jsxs(TooltipContent, {
331
- side: "bottom",
332
- sideOffset: 4,
333
- children: [props.payload.title, props.payload.shortcut && /* @__PURE__ */ jsx("span", {
334
- className: "_1e1ersc8",
335
- children: props.payload.shortcut
336
- })]
337
- }) : null)
338
- }), /* @__PURE__ */ jsx("div", {
339
- "aria-label": "Editor toolbar",
340
- className: containerClassName,
341
- role: "toolbar",
342
- children: /* @__PURE__ */ jsxs("div", {
343
- className: toolbarRow,
344
- children: [
345
- /* @__PURE__ */ jsx(ToolbarDropdown, {
346
- items: fontFamilyItems,
347
- label: getFontLabel(state.fontFamily),
348
- title: "Font family",
349
- tooltipHandle: h,
350
- triggerWidth: 76
351
- }),
352
- /* @__PURE__ */ jsx(ToolbarSeparator, {}),
353
- /* @__PURE__ */ jsx(ToolbarDropdown, {
354
- items: headingItems,
355
- label: BLOCK_TYPE_LABELS[state.blockType] ?? "Text",
356
- title: "Block type",
357
- tooltipHandle: h,
358
- triggerWidth: 120
359
- }),
360
- /* @__PURE__ */ jsx(ToolbarSeparator, {}),
361
- /* @__PURE__ */ jsx(ToolbarButton, {
362
- disabled: !state.canUndo,
363
- icon: /* @__PURE__ */ jsx(Undo, {
364
- size: ICON_SIZE,
365
- strokeWidth: ICON_STROKE
366
- }),
367
- shortcut: "Ctrl+Z",
368
- title: "Undo",
369
- tooltipHandle: h,
370
- onClick: () => editor.dispatchCommand(UNDO_COMMAND, void 0)
371
- }),
372
- /* @__PURE__ */ jsx(ToolbarButton, {
373
- disabled: !state.canRedo,
374
- icon: /* @__PURE__ */ jsx(Redo, {
375
- size: ICON_SIZE,
376
- strokeWidth: ICON_STROKE
377
- }),
378
- shortcut: "Ctrl+Y",
379
- title: "Redo",
380
- tooltipHandle: h,
381
- onClick: () => editor.dispatchCommand(REDO_COMMAND, void 0)
382
- }),
383
- /* @__PURE__ */ jsx(ToolbarSeparator, {}),
384
- /* @__PURE__ */ jsx(ToolbarButton, {
385
- active: state.isBold,
386
- icon: /* @__PURE__ */ jsx(Bold, {
387
- size: ICON_SIZE,
388
- strokeWidth: ICON_STROKE
389
- }),
390
- shortcut: "Ctrl+B",
391
- title: "Bold",
392
- tooltipHandle: h,
393
- onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")
394
- }),
395
- /* @__PURE__ */ jsx(ToolbarButton, {
396
- active: state.isItalic,
397
- icon: /* @__PURE__ */ jsx(Italic, {
398
- size: ICON_SIZE,
399
- strokeWidth: ICON_STROKE
400
- }),
401
- shortcut: "Ctrl+I",
402
- title: "Italic",
403
- tooltipHandle: h,
404
- onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")
405
- }),
406
- /* @__PURE__ */ jsx(ToolbarButton, {
407
- active: state.isUnderline,
408
- icon: /* @__PURE__ */ jsx(Underline, {
409
- size: ICON_SIZE,
410
- strokeWidth: ICON_STROKE
411
- }),
412
- shortcut: "Ctrl+U",
413
- title: "Underline",
414
- tooltipHandle: h,
415
- onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline")
416
- }),
417
- /* @__PURE__ */ jsx(ToolbarButton, {
418
- active: state.isStrikethrough,
419
- icon: /* @__PURE__ */ jsx(Strikethrough, {
420
- size: ICON_SIZE,
421
- strokeWidth: ICON_STROKE
422
- }),
423
- title: "Strikethrough",
424
- tooltipHandle: h,
425
- onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough")
426
- }),
427
- /* @__PURE__ */ jsx(ToolbarButton, {
428
- active: state.isCode,
429
- icon: /* @__PURE__ */ jsx(Code, {
430
- size: ICON_SIZE,
431
- strokeWidth: ICON_STROKE
432
- }),
433
- title: "Inline Code",
434
- tooltipHandle: h,
435
- onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code")
436
- }),
437
- /* @__PURE__ */ jsx(ToolbarSeparator, {}),
438
- /* @__PURE__ */ jsx(ToolbarButton, {
439
- active: state.isHighlight,
440
- icon: /* @__PURE__ */ jsx(Highlighter, {
441
- size: ICON_SIZE,
442
- strokeWidth: ICON_STROKE
443
- }),
444
- title: "Highlight",
445
- tooltipHandle: h,
446
- onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "highlight")
447
- }),
448
- /* @__PURE__ */ jsx(ToolbarSeparator, {}),
449
- /* @__PURE__ */ jsx(ToolbarButton, {
450
- active: state.blockType === "bullet",
451
- icon: /* @__PURE__ */ jsx(List, {
452
- size: ICON_SIZE,
453
- strokeWidth: ICON_STROKE
454
- }),
455
- title: "Bulleted List",
456
- tooltipHandle: h,
457
- onClick: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0)
458
- }),
459
- /* @__PURE__ */ jsx(ToolbarButton, {
460
- active: state.blockType === "number",
461
- icon: /* @__PURE__ */ jsx(ListOrdered, {
462
- size: ICON_SIZE,
463
- strokeWidth: ICON_STROKE
464
- }),
465
- title: "Numbered List",
466
- tooltipHandle: h,
467
- onClick: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0)
468
- }),
469
- /* @__PURE__ */ jsx(ToolbarButton, {
470
- active: state.blockType === "check",
471
- icon: /* @__PURE__ */ jsx(ListChecks, {
472
- size: ICON_SIZE,
473
- strokeWidth: ICON_STROKE
474
- }),
475
- title: "Checklist",
476
- tooltipHandle: h,
477
- onClick: () => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0)
478
- }),
479
- /* @__PURE__ */ jsx(ToolbarSeparator, {}),
480
- /* @__PURE__ */ jsx(ToolbarButton, {
481
- active: state.elementFormat === "left" || state.elementFormat === "",
482
- icon: /* @__PURE__ */ jsx(AlignLeft, {
483
- size: ICON_SIZE,
484
- strokeWidth: ICON_STROKE
485
- }),
486
- title: "Align Left",
487
- tooltipHandle: h,
488
- onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left")
489
- }),
490
- /* @__PURE__ */ jsx(ToolbarButton, {
491
- active: state.elementFormat === "center",
492
- icon: /* @__PURE__ */ jsx(AlignCenter, {
493
- size: ICON_SIZE,
494
- strokeWidth: ICON_STROKE
495
- }),
496
- title: "Align Center",
497
- tooltipHandle: h,
498
- onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center")
499
- }),
500
- /* @__PURE__ */ jsx(ToolbarButton, {
501
- active: state.elementFormat === "right",
502
- icon: /* @__PURE__ */ jsx(AlignRight, {
503
- size: ICON_SIZE,
504
- strokeWidth: ICON_STROKE
505
- }),
506
- title: "Align Right",
507
- tooltipHandle: h,
508
- onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right")
509
- }),
510
- /* @__PURE__ */ jsx(ToolbarButton, {
511
- active: state.elementFormat === "justify",
512
- icon: /* @__PURE__ */ jsx(AlignJustify, {
513
- size: ICON_SIZE,
514
- strokeWidth: ICON_STROKE
515
- }),
516
- title: "Justify",
517
- tooltipHandle: h,
518
- onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify")
519
- }),
520
- toolbarItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
521
- /* @__PURE__ */ jsx(ToolbarSeparator, {}),
522
- toolbarItems.slice(0, maxVisibleInsertItems).map((item) => /* @__PURE__ */ jsx(ToolbarButton, {
523
- icon: item.icon,
524
- shortcut: item.shortcut,
525
- title: item.title,
526
- tooltipHandle: h,
527
- onClick: () => item.onSelect(editor, "")
528
- }, item.title)),
529
- toolbarItems.length > maxVisibleInsertItems && /* @__PURE__ */ jsxs(DropdownMenu, {
530
- modal: false,
531
- children: [/* @__PURE__ */ jsx(TooltipTrigger, {
532
- handle: h,
533
- payload: { title: "More" },
534
- render: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
535
- className: "_1e1ersc2",
536
- render: /* @__PURE__ */ jsx("button", { type: "button" })
537
- }),
538
- children: /* @__PURE__ */ jsx(Ellipsis, {
539
- size: ICON_SIZE,
540
- strokeWidth: ICON_STROKE
541
- })
542
- }), /* @__PURE__ */ jsx(DropdownMenuContent, {
543
- positionMethod: "fixed",
544
- sideOffset: 4,
545
- children: toolbarItems.slice(maxVisibleInsertItems).map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
546
- onClick: () => item.onSelect(editor, ""),
547
- children: [item.icon && /* @__PURE__ */ jsx("span", {
548
- style: {
549
- marginRight: 8,
550
- display: "inline-flex",
551
- transform: "scale(0.8)",
552
- transformOrigin: "left center"
553
- },
554
- children: item.icon
555
- }), item.title]
556
- }, item.title))
557
- })]
558
- })
559
- ] })
560
- ]
561
- })
562
- })]
563
- });
200
+ const DEFAULT_MAX_VISIBLE_INSERT_ITEMS = 5;
201
+ function ToolbarPlugin({
202
+ className,
203
+ maxVisibleInsertItems = DEFAULT_MAX_VISIBLE_INSERT_ITEMS,
204
+ insertItemOrder
205
+ }) {
206
+ const [editor] = useLexicalComposerContext();
207
+ const [state, setState] = useState(INITIAL_STATE);
208
+ const [tooltipHandle] = useState(() => createTooltipHandle());
209
+ const toolbarItems = useMemo(() => {
210
+ const items = collectCommandItems(editor).filter(
211
+ (item) => item.placement?.includes("toolbar") && item.group === "insert"
212
+ );
213
+ if (!insertItemOrder || insertItemOrder.length === 0) return items;
214
+ return items.sort((a, b) => {
215
+ const ai = insertItemOrder.indexOf(a.title);
216
+ const bi = insertItemOrder.indexOf(b.title);
217
+ return (ai === -1 ? Infinity : ai) - (bi === -1 ? Infinity : bi);
218
+ });
219
+ }, [editor, insertItemOrder]);
220
+ const updateToolbar = useCallback(() => {
221
+ const selection = $getSelection();
222
+ if (!$isRangeSelection(selection)) return;
223
+ const anchorNode = selection.anchor.getNode();
224
+ let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
225
+ const parent = e.getParent();
226
+ return parent !== null && $isRootOrShadowRoot(parent);
227
+ }) ?? anchorNode.getTopLevelElementOrThrow();
228
+ if ($isListNode(element)) {
229
+ const parentList = $findMatchingParent(anchorNode, (node) => $isListNode(node));
230
+ if (parentList) {
231
+ element = parentList;
232
+ }
233
+ }
234
+ const blockType = getBlockType(element);
235
+ const fontFamily = $getSelectionStyleValueForProperty(selection, "font-family", "");
236
+ const elementFormat = $isElementNode(element) ? element.getFormatType() : "left";
237
+ setState((prev) => ({
238
+ ...prev,
239
+ blockType,
240
+ fontFamily,
241
+ elementFormat,
242
+ isBold: selection.hasFormat("bold"),
243
+ isItalic: selection.hasFormat("italic"),
244
+ isUnderline: selection.hasFormat("underline"),
245
+ isStrikethrough: selection.hasFormat("strikethrough"),
246
+ isCode: selection.hasFormat("code"),
247
+ isHighlight: selection.hasFormat("highlight")
248
+ }));
249
+ }, []);
250
+ useEffect(() => {
251
+ const unregisterUndo = editor.registerCommand(
252
+ CAN_UNDO_COMMAND,
253
+ (payload) => {
254
+ setState((prev) => ({ ...prev, canUndo: payload }));
255
+ return false;
256
+ },
257
+ COMMAND_PRIORITY_LOW
258
+ );
259
+ const unregisterRedo = editor.registerCommand(
260
+ CAN_REDO_COMMAND,
261
+ (payload) => {
262
+ setState((prev) => ({ ...prev, canRedo: payload }));
263
+ return false;
264
+ },
265
+ COMMAND_PRIORITY_LOW
266
+ );
267
+ const unregisterUpdate = editor.registerUpdateListener(({ editorState }) => {
268
+ editorState.read(() => {
269
+ updateToolbar();
270
+ });
271
+ });
272
+ return () => {
273
+ unregisterUndo();
274
+ unregisterRedo();
275
+ unregisterUpdate();
276
+ };
277
+ }, [editor, updateToolbar]);
278
+ const applyFontFamily = useCallback(
279
+ (value) => {
280
+ editor.update(() => {
281
+ const selection = $getSelection();
282
+ if ($isRangeSelection(selection)) {
283
+ $patchStyleText(selection, { "font-family": value || "" });
284
+ }
285
+ });
286
+ },
287
+ [editor]
288
+ );
289
+ const fontFamilyItems = useMemo(
290
+ () => FONT_FAMILIES.map((def) => ({
291
+ label: def.label,
292
+ active: state.fontFamily === def.value,
293
+ style: def.value ? { fontFamily: def.value } : void 0,
294
+ onSelect: () => applyFontFamily(def.value)
295
+ })),
296
+ [state.fontFamily, applyFontFamily]
297
+ );
298
+ const headingItems = useMemo(
299
+ () => [
300
+ {
301
+ label: "Text",
302
+ icon: /* @__PURE__ */ jsx(Pilcrow, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
303
+ active: state.blockType === "paragraph",
304
+ onSelect: () => {
305
+ editor.update(() => {
306
+ const selection = $getSelection();
307
+ if ($isRangeSelection(selection)) {
308
+ $setBlocksType(selection, () => $createParagraphNode());
309
+ }
310
+ });
311
+ }
312
+ },
313
+ {
314
+ label: "Heading 1",
315
+ icon: /* @__PURE__ */ jsx(Heading1, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
316
+ active: state.blockType === "h1",
317
+ onSelect: () => {
318
+ editor.update(() => {
319
+ const selection = $getSelection();
320
+ if ($isRangeSelection(selection)) {
321
+ $setBlocksType(selection, () => $createHeadingNode("h1"));
322
+ }
323
+ });
324
+ }
325
+ },
326
+ {
327
+ label: "Heading 2",
328
+ icon: /* @__PURE__ */ jsx(Heading2, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
329
+ active: state.blockType === "h2",
330
+ onSelect: () => {
331
+ editor.update(() => {
332
+ const selection = $getSelection();
333
+ if ($isRangeSelection(selection)) {
334
+ $setBlocksType(selection, () => $createHeadingNode("h2"));
335
+ }
336
+ });
337
+ }
338
+ },
339
+ {
340
+ label: "Heading 3",
341
+ icon: /* @__PURE__ */ jsx(Heading3, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
342
+ active: state.blockType === "h3",
343
+ onSelect: () => {
344
+ editor.update(() => {
345
+ const selection = $getSelection();
346
+ if ($isRangeSelection(selection)) {
347
+ $setBlocksType(selection, () => $createHeadingNode("h3"));
348
+ }
349
+ });
350
+ }
351
+ }
352
+ ],
353
+ [editor, state.blockType]
354
+ );
355
+ const containerClassName = className ? `${toolbarContainer} ${className}` : toolbarContainer;
356
+ const h = tooltipHandle;
357
+ return /* @__PURE__ */ jsxs(TooltipProvider, { delay: 300, children: [
358
+ /* @__PURE__ */ jsx(TooltipRoot, { disableHoverablePopup: true, handle: tooltipHandle, children: ((props) => props.payload !== void 0 ? /* @__PURE__ */ jsxs(TooltipContent, { side: "bottom", sideOffset: 4, children: [
359
+ props.payload.title,
360
+ props.payload.shortcut && /* @__PURE__ */ jsx("span", { className: tooltipShortcut, children: props.payload.shortcut })
361
+ ] }) : null) }),
362
+ /* @__PURE__ */ jsx("div", { "aria-label": "Editor toolbar", className: containerClassName, role: "toolbar", children: /* @__PURE__ */ jsxs("div", { className: toolbarRow, children: [
363
+ /* @__PURE__ */ jsx(
364
+ ToolbarDropdown,
365
+ {
366
+ items: fontFamilyItems,
367
+ label: getFontLabel(state.fontFamily),
368
+ title: "Font family",
369
+ tooltipHandle: h,
370
+ triggerWidth: 76
371
+ }
372
+ ),
373
+ /* @__PURE__ */ jsx(ToolbarSeparator, {}),
374
+ /* @__PURE__ */ jsx(
375
+ ToolbarDropdown,
376
+ {
377
+ items: headingItems,
378
+ label: BLOCK_TYPE_LABELS[state.blockType] ?? "Text",
379
+ title: "Block type",
380
+ tooltipHandle: h,
381
+ triggerWidth: 120
382
+ }
383
+ ),
384
+ /* @__PURE__ */ jsx(ToolbarSeparator, {}),
385
+ /* @__PURE__ */ jsx(
386
+ ToolbarButton,
387
+ {
388
+ disabled: !state.canUndo,
389
+ icon: /* @__PURE__ */ jsx(Undo, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
390
+ shortcut: "Ctrl+Z",
391
+ title: "Undo",
392
+ tooltipHandle: h,
393
+ onClick: () => editor.dispatchCommand(UNDO_COMMAND, void 0)
394
+ }
395
+ ),
396
+ /* @__PURE__ */ jsx(
397
+ ToolbarButton,
398
+ {
399
+ disabled: !state.canRedo,
400
+ icon: /* @__PURE__ */ jsx(Redo, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
401
+ shortcut: "Ctrl+Y",
402
+ title: "Redo",
403
+ tooltipHandle: h,
404
+ onClick: () => editor.dispatchCommand(REDO_COMMAND, void 0)
405
+ }
406
+ ),
407
+ /* @__PURE__ */ jsx(ToolbarSeparator, {}),
408
+ /* @__PURE__ */ jsx(
409
+ ToolbarButton,
410
+ {
411
+ active: state.isBold,
412
+ icon: /* @__PURE__ */ jsx(Bold, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
413
+ shortcut: "Ctrl+B",
414
+ title: "Bold",
415
+ tooltipHandle: h,
416
+ onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")
417
+ }
418
+ ),
419
+ /* @__PURE__ */ jsx(
420
+ ToolbarButton,
421
+ {
422
+ active: state.isItalic,
423
+ icon: /* @__PURE__ */ jsx(Italic, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
424
+ shortcut: "Ctrl+I",
425
+ title: "Italic",
426
+ tooltipHandle: h,
427
+ onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")
428
+ }
429
+ ),
430
+ /* @__PURE__ */ jsx(
431
+ ToolbarButton,
432
+ {
433
+ active: state.isUnderline,
434
+ icon: /* @__PURE__ */ jsx(Underline, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
435
+ shortcut: "Ctrl+U",
436
+ title: "Underline",
437
+ tooltipHandle: h,
438
+ onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline")
439
+ }
440
+ ),
441
+ /* @__PURE__ */ jsx(
442
+ ToolbarButton,
443
+ {
444
+ active: state.isStrikethrough,
445
+ icon: /* @__PURE__ */ jsx(Strikethrough, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
446
+ title: "Strikethrough",
447
+ tooltipHandle: h,
448
+ onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough")
449
+ }
450
+ ),
451
+ /* @__PURE__ */ jsx(
452
+ ToolbarButton,
453
+ {
454
+ active: state.isCode,
455
+ icon: /* @__PURE__ */ jsx(Code, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
456
+ title: "Inline Code",
457
+ tooltipHandle: h,
458
+ onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code")
459
+ }
460
+ ),
461
+ /* @__PURE__ */ jsx(ToolbarSeparator, {}),
462
+ /* @__PURE__ */ jsx(
463
+ ToolbarButton,
464
+ {
465
+ active: state.isHighlight,
466
+ icon: /* @__PURE__ */ jsx(Highlighter, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
467
+ title: "Highlight",
468
+ tooltipHandle: h,
469
+ onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "highlight")
470
+ }
471
+ ),
472
+ /* @__PURE__ */ jsx(ToolbarSeparator, {}),
473
+ /* @__PURE__ */ jsx(
474
+ ToolbarButton,
475
+ {
476
+ active: state.blockType === "bullet",
477
+ icon: /* @__PURE__ */ jsx(List, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
478
+ title: "Bulleted List",
479
+ tooltipHandle: h,
480
+ onClick: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0)
481
+ }
482
+ ),
483
+ /* @__PURE__ */ jsx(
484
+ ToolbarButton,
485
+ {
486
+ active: state.blockType === "number",
487
+ icon: /* @__PURE__ */ jsx(ListOrdered, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
488
+ title: "Numbered List",
489
+ tooltipHandle: h,
490
+ onClick: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0)
491
+ }
492
+ ),
493
+ /* @__PURE__ */ jsx(
494
+ ToolbarButton,
495
+ {
496
+ active: state.blockType === "check",
497
+ icon: /* @__PURE__ */ jsx(ListChecks, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
498
+ title: "Checklist",
499
+ tooltipHandle: h,
500
+ onClick: () => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0)
501
+ }
502
+ ),
503
+ /* @__PURE__ */ jsx(ToolbarSeparator, {}),
504
+ /* @__PURE__ */ jsx(
505
+ ToolbarButton,
506
+ {
507
+ active: state.elementFormat === "left" || state.elementFormat === "",
508
+ icon: /* @__PURE__ */ jsx(AlignLeft, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
509
+ title: "Align Left",
510
+ tooltipHandle: h,
511
+ onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left")
512
+ }
513
+ ),
514
+ /* @__PURE__ */ jsx(
515
+ ToolbarButton,
516
+ {
517
+ active: state.elementFormat === "center",
518
+ icon: /* @__PURE__ */ jsx(AlignCenter, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
519
+ title: "Align Center",
520
+ tooltipHandle: h,
521
+ onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center")
522
+ }
523
+ ),
524
+ /* @__PURE__ */ jsx(
525
+ ToolbarButton,
526
+ {
527
+ active: state.elementFormat === "right",
528
+ icon: /* @__PURE__ */ jsx(AlignRight, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
529
+ title: "Align Right",
530
+ tooltipHandle: h,
531
+ onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right")
532
+ }
533
+ ),
534
+ /* @__PURE__ */ jsx(
535
+ ToolbarButton,
536
+ {
537
+ active: state.elementFormat === "justify",
538
+ icon: /* @__PURE__ */ jsx(AlignJustify, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
539
+ title: "Justify",
540
+ tooltipHandle: h,
541
+ onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify")
542
+ }
543
+ ),
544
+ toolbarItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
545
+ /* @__PURE__ */ jsx(ToolbarSeparator, {}),
546
+ toolbarItems.slice(0, maxVisibleInsertItems).map((item) => /* @__PURE__ */ jsx(
547
+ ToolbarButton,
548
+ {
549
+ icon: item.icon,
550
+ shortcut: item.shortcut,
551
+ title: item.title,
552
+ tooltipHandle: h,
553
+ onClick: () => item.onSelect(editor, "")
554
+ },
555
+ item.title
556
+ )),
557
+ toolbarItems.length > maxVisibleInsertItems && /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
558
+ /* @__PURE__ */ jsx(
559
+ TooltipTrigger,
560
+ {
561
+ handle: h,
562
+ payload: { title: "More" },
563
+ render: /* @__PURE__ */ jsx(
564
+ DropdownMenuTrigger,
565
+ {
566
+ className: toolbarButton,
567
+ render: /* @__PURE__ */ jsx("button", { type: "button" })
568
+ }
569
+ ),
570
+ children: /* @__PURE__ */ jsx(Ellipsis, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
571
+ }
572
+ ),
573
+ /* @__PURE__ */ jsx(DropdownMenuContent, { positionMethod: "fixed", sideOffset: 4, children: toolbarItems.slice(maxVisibleInsertItems).map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => item.onSelect(editor, ""), children: [
574
+ item.icon && /* @__PURE__ */ jsx(
575
+ "span",
576
+ {
577
+ style: {
578
+ marginRight: 8,
579
+ display: "inline-flex",
580
+ transform: "scale(0.8)",
581
+ transformOrigin: "left center"
582
+ },
583
+ children: item.icon
584
+ }
585
+ ),
586
+ item.title
587
+ ] }, item.title)) })
588
+ ] })
589
+ ] })
590
+ ] }) })
591
+ ] });
564
592
  }
565
- //#endregion
566
- export { ToolbarPlugin };
593
+ export {
594
+ ToolbarPlugin
595
+ };
package/dist/rich-plugin-toolbar.css CHANGED
@@ -1,2 +1 @@
1
- :root{--rc-text:#000;--rc-text-secondary:#27272a;--rc-text-tertiary:#71717a;--rc-text-quaternary:#a1a1aa;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f4f4f5;--rc-fill:#e8e8ec;--rc-fill-secondary:#eeeeef;--rc-fill-tertiary:#f4f4f6;--rc-fill-quaternary:#f9f9fa;--rc-border:#f4f4f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#3f3f46;--rc-code-bg:#f4f4f5;--rc-hr-border:#e4e4e7;--rc-quote-border:#2563eb;--rc-quote-bg:#eff6ff;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}:root.dark{--rc-text:#fafafa;--rc-text-secondary:#a1a1aa;--rc-text-tertiary:#71717a;--rc-text-quaternary:#52525b;--rc-bg:#09090b;--rc-bg-secondary:#18181b;--rc-bg-tertiary:#27272a;--rc-fill:#2a2a2f;--rc-fill-secondary:#222226;--rc-fill-tertiary:#1b1b1f;--rc-fill-quaternary:#131316;--rc-border:#27272a;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#e4e4e7;--rc-code-bg:#27272a;--rc-hr-border:#27272a;--rc-quote-border:#60a5fa;--rc-quote-bg:#1e3a5f;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._88yfio0{--rc-text:#000;--rc-text-secondary:#27272a;--rc-text-tertiary:#71717a;--rc-text-quaternary:#a1a1aa;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f4f4f5;--rc-fill:#e8e8ec;--rc-fill-secondary:#eeeeef;--rc-fill-tertiary:#f4f4f6;--rc-fill-quaternary:#f9f9fa;--rc-border:#f4f4f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#3f3f46;--rc-code-bg:#f4f4f5;--rc-hr-border:#e4e4e7;--rc-quote-border:#2563eb;--rc-quote-bg:#eff6ff;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._88yfio1{--rc-text:#000;--rc-text-secondary:#27272a;--rc-text-tertiary:#71717a;--rc-text-quaternary:#a1a1aa;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f4f4f5;--rc-fill:#e8e8ec;--rc-fill-secondary:#eeeeef;--rc-fill-tertiary:#f4f4f6;--rc-fill-quaternary:#f9f9fa;--rc-border:#f4f4f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#3f3f46;--rc-code-bg:#f4f4f5;--rc-hr-border:#e4e4e7;--rc-quote-border:#2563eb;--rc-quote-bg:#eff6ff;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.8;--rc-line-height-tight:1.4;--rc-font-family:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._88yfio2{--rc-text:#000;--rc-text-secondary:#27272a;--rc-text-tertiary:#71717a;--rc-text-quaternary:#a1a1aa;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f4f4f5;--rc-fill:#e8e8ec;--rc-fill-secondary:#eeeeef;--rc-fill-tertiary:#f4f4f6;--rc-fill-quaternary:#f9f9fa;--rc-border:#f4f4f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#3f3f46;--rc-code-bg:#f4f4f5;--rc-hr-border:#e4e4e7;--rc-quote-border:#a1a1aa;--rc-quote-bg:#fafafa;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:none;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:2px;--rc-space-sm:4px;--rc-space-md:10px;--rc-space-lg:16px;--rc-space-xl:20px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:14px;--rc-font-size-small:12px;--rc-line-height:1.5;--rc-line-height-tight:1.3;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:3px;--rc-radius-md:6px;--rc-radius-lg:12px}.dark ._88yfio0,[data-theme=dark] ._88yfio0,.dark._88yfio0,[data-theme=dark]._88yfio0,.dark ._88yfio1,[data-theme=dark] ._88yfio1,.dark._88yfio1,[data-theme=dark]._88yfio1,.dark ._88yfio2,[data-theme=dark] ._88yfio2,.dark._88yfio2,[data-theme=dark]._88yfio2{--rc-text:#fafafa;--rc-text-secondary:#a1a1aa;--rc-text-tertiary:#71717a;--rc-text-quaternary:#52525b;--rc-bg:#09090b;--rc-bg-secondary:#18181b;--rc-bg-tertiary:#27272a;--rc-fill:#2a2a2f;--rc-fill-secondary:#222226;--rc-fill-tertiary:#1b1b1f;--rc-fill-quaternary:#131316;--rc-border:#27272a;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#e4e4e7;--rc-code-bg:#27272a;--rc-hr-border:#27272a;--rc-quote-border:#60a5fa;--rc-quote-bg:#1e3a5f;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006}._1e1ersc0{border:1px solid var(--rc-border);background-color:color-mix(in srgb, var(--rc-bg) 90%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--rc-shadow-top-bar);font-family:var(--rc-font-family-sans);z-index:2;max-width:var(--rc-max-width);border-radius:12px;flex-direction:column;gap:4px;margin:12px auto 0;display:flex;position:sticky;top:0}._1e1ersc1{flex-flow:wrap;align-items:center;gap:4px;min-height:36px;padding:6px 16px;display:flex}._1e1ersc2{width:32px;height:32px;color:var(--rc-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0;transition:color .15s,background-color .15s;display:flex;position:relative}._1e1ersc2:hover{background-color:var(--rc-fill-quaternary);color:var(--rc-text)}._1e1ersc2:active{background-color:var(--rc-fill-tertiary)}._1e1ersc2[data-popup-open]{background-color:var(--rc-fill-tertiary);color:var(--rc-text)}._1e1ersc2:disabled{opacity:.35;cursor:default;color:var(--rc-text-quaternary);background-color:#0000}._1e1ersc2 svg{stroke-width:2px;width:15px;height:15px}._1e1ersc3,._1e1ersc3:hover{color:var(--rc-text);background-color:var(--rc-fill-tertiary)}._1e1ersc4{height:32px;color:var(--rc-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:4px;padding:0 10px;font-size:13px;font-weight:500;line-height:1;transition:color .15s,background-color .15s;display:inline-flex}._1e1ersc4:hover{background-color:var(--rc-fill-quaternary);color:var(--rc-text)}._1e1ersc5{flex-shrink:0;margin-left:auto;display:inline-flex}._1e1ersc6{background-color:var(--rc-border);flex-shrink:0;width:1px;height:24px;margin-inline-start:6px;margin-inline-end:6px}._1e1ersc7{background-color:var(--rc-fill-tertiary);color:var(--rc-text)}._1e1ersc8{opacity:.7;margin-left:6px;font-size:11px}
2
- /*$vite$:1*/
1
+ :root{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-fill: #e8e8ec;--rc-fill-secondary: #eeeeef;--rc-fill-tertiary: #f4f4f6;--rc-fill-quaternary: #f9f9fa;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #2563eb;--rc-quote-bg: #eff6ff;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: 700px;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.7;--rc-line-height-tight: 1.4;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}:root.dark{--rc-text: #fafafa;--rc-text-secondary: #a1a1aa;--rc-text-tertiary: #71717a;--rc-text-quaternary: #52525b;--rc-bg: #09090b;--rc-bg-secondary: #18181b;--rc-bg-tertiary: #27272a;--rc-fill: #2a2a2f;--rc-fill-secondary: #222226;--rc-fill-tertiary: #1b1b1f;--rc-fill-quaternary: #131316;--rc-border: #27272a;--rc-accent: #60a5fa;--rc-accent-light: #60a5fa20;--rc-link: #60a5fa;--rc-code-text: #e4e4e7;--rc-code-bg: #27272a;--rc-hr-border: #27272a;--rc-quote-border: #60a5fa;--rc-quote-bg: #1e3a5f;--rc-alert-info: #7db9e5;--rc-alert-warning: #da864a;--rc-alert-tip: #54da48;--rc-alert-caution: #e16973;--rc-alert-important: #9966e0;--rc-max-width: 700px;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.35);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.4);--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.7;--rc-line-height-tight: 1.4;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}._88yfio0{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-fill: #e8e8ec;--rc-fill-secondary: #eeeeef;--rc-fill-tertiary: #f4f4f6;--rc-fill-quaternary: #f9f9fa;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #2563eb;--rc-quote-bg: #eff6ff;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: 700px;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.7;--rc-line-height-tight: 1.4;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}._88yfio1{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-fill: #e8e8ec;--rc-fill-secondary: #eeeeef;--rc-fill-tertiary: #f4f4f6;--rc-fill-quaternary: #f9f9fa;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #2563eb;--rc-quote-bg: #eff6ff;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: 700px;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.8;--rc-line-height-tight: 1.4;--rc-font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}._88yfio2{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-fill: #e8e8ec;--rc-fill-secondary: #eeeeef;--rc-fill-tertiary: #f4f4f6;--rc-fill-quaternary: #f9f9fa;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #a1a1aa;--rc-quote-bg: #fafafa;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: none;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);--rc-space-xs: 2px;--rc-space-sm: 4px;--rc-space-md: 10px;--rc-space-lg: 16px;--rc-space-xl: 20px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 14px;--rc-font-size-small: 12px;--rc-line-height: 1.5;--rc-line-height-tight: 1.3;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 3px;--rc-radius-md: 6px;--rc-radius-lg: 12px}.dark ._88yfio0,[data-theme=dark] ._88yfio0,.dark._88yfio0,[data-theme=dark]._88yfio0,.dark ._88yfio1,[data-theme=dark] ._88yfio1,.dark._88yfio1,[data-theme=dark]._88yfio1,.dark ._88yfio2,[data-theme=dark] ._88yfio2,.dark._88yfio2,[data-theme=dark]._88yfio2{--rc-text: #fafafa;--rc-text-secondary: #a1a1aa;--rc-text-tertiary: #71717a;--rc-text-quaternary: #52525b;--rc-bg: #09090b;--rc-bg-secondary: #18181b;--rc-bg-tertiary: #27272a;--rc-fill: #2a2a2f;--rc-fill-secondary: #222226;--rc-fill-tertiary: #1b1b1f;--rc-fill-quaternary: #131316;--rc-border: #27272a;--rc-accent: #60a5fa;--rc-accent-light: #60a5fa20;--rc-link: #60a5fa;--rc-code-text: #e4e4e7;--rc-code-bg: #27272a;--rc-hr-border: #27272a;--rc-quote-border: #60a5fa;--rc-quote-bg: #1e3a5f;--rc-alert-info: #7db9e5;--rc-alert-warning: #da864a;--rc-alert-tip: #54da48;--rc-alert-caution: #e16973;--rc-alert-important: #9966e0;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.35);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.4)}._1e1ersc0{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rc-border);border-radius:12px;background-color:color-mix(in srgb,var(--rc-bg) 90%,transparent);backdrop-filter:blur(8px);box-shadow:var(--rc-shadow-top-bar);font-family:var(--rc-font-family-sans);position:sticky;top:0;z-index:2;margin:12px auto 0;max-width:var(--rc-max-width)}._1e1ersc1{display:flex;flex-direction:row;align-items:center;gap:4px;flex-wrap:wrap;min-height:36px;padding:6px 16px}._1e1ersc2{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:6px;color:var(--rc-text-secondary);cursor:pointer;padding:0;transition:color .15s,background-color .15s}._1e1ersc2:hover{background-color:var(--rc-fill-quaternary);color:var(--rc-text)}._1e1ersc2:active{background-color:var(--rc-fill-tertiary)}._1e1ersc2[data-popup-open]{background-color:var(--rc-fill-tertiary);color:var(--rc-text)}._1e1ersc2:disabled{opacity:.35;cursor:default;background-color:transparent;color:var(--rc-text-quaternary)}._1e1ersc2 svg{width:15px;height:15px;stroke-width:2}._1e1ersc3,._1e1ersc3:hover{color:var(--rc-text);background-color:var(--rc-fill-tertiary)}._1e1ersc4{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px;border:none;background:transparent;border-radius:6px;color:var(--rc-text-secondary);cursor:pointer;font-size:13px;font-weight:500;line-height:1;transition:color .15s,background-color .15s}._1e1ersc4:hover{background-color:var(--rc-fill-quaternary);color:var(--rc-text)}._1e1ersc5{margin-left:auto;display:inline-flex;flex-shrink:0}._1e1ersc6{width:1px;height:24px;background-color:var(--rc-border);margin-inline:6px;flex-shrink:0}._1e1ersc7{background-color:var(--rc-fill-tertiary);color:var(--rc-text)}._1e1ersc8{font-size:11px;opacity:.7;margin-left:6px}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haklex/rich-plugin-toolbar",
3
- "version": "0.0.81",
3
+ "version": "0.0.83",
4
4
  "description": "Top toolbar plugin for rich editor",
5
5
  "repository": {
6
6
  "type": "git",
@@ -21,9 +21,9 @@
21
21
  "dist"
22
22
  ],
23
23
  "dependencies": {
24
- "@haklex/rich-editor": "0.0.81",
25
- "@haklex/rich-editor-ui": "0.0.81",
26
- "@haklex/rich-style-token": "0.0.81"
24
+ "@haklex/rich-editor": "0.0.83",
25
+ "@haklex/rich-editor-ui": "0.0.83",
26
+ "@haklex/rich-style-token": "0.0.83"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@lexical/list": "^0.41.0",