@haklex/rich-plugin-block-handle 0.0.82 → 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 +533 -562
  2. package/dist/rich-plugin-block-handle.css +1 -2
  3. package/package.json +3 -3
package/dist/index.mjs CHANGED
@@ -1,590 +1,561 @@
1
- import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@haklex/rich-editor-ui";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator } from "@haklex/rich-editor-ui";
2
3
  import { usePortalTheme } from "@haklex/rich-style-token";
3
4
  import { $createCodeNode } from "@lexical/code";
4
5
  import { INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list";
5
6
  import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
6
7
  import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode";
7
- import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
8
+ import { $createQuoteNode, $createHeadingNode } from "@lexical/rich-text";
8
9
  import { $setBlocksType } from "@lexical/selection";
9
- import { $createParagraphNode, $getNearestNodeFromDOMNode, $getNodeByKey, $getSelection, $isElementNode, $isRangeSelection, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND } from "lexical";
10
- import { ArrowDown, ArrowUp, Code2, Copy, GripVertical, Heading1, Heading2, Heading3, List, ListChecks, ListOrdered, Minus, Plus, TextQuote, Trash2, Type } from "lucide-react";
11
- import { useCallback, useEffect, useRef, useState } from "react";
10
+ import { $getNearestNodeFromDOMNode, $getNodeByKey, $createParagraphNode, $isElementNode, $getSelection, $isRangeSelection, DRAGOVER_COMMAND, COMMAND_PRIORITY_HIGH, DROP_COMMAND, DRAGSTART_COMMAND } from "lexical";
11
+ import { Plus, GripVertical, Type, Heading1, Heading2, Heading3, List, ListOrdered, ListChecks, TextQuote, Minus, Code2, Copy, ArrowUp, ArrowDown, Trash2 } from "lucide-react";
12
+ import { useState, useRef, useCallback, useEffect } from "react";
12
13
  import { createPortal } from "react-dom";
13
- import { jsx, jsxs } from "react/jsx-runtime";
14
- //#region src/styles.css.ts
15
14
  var handleContainer = "iihqkc0";
16
15
  var handleContainerVisible = "iihqkc1";
17
16
  var handleBtn = "iihqkc2";
18
17
  var draggingBlock = "iihqkc3";
19
18
  var dragPreview = "iihqkc4";
19
+ var dropIndicator = "iihqkc5";
20
20
  var menuItemDestructive = "iihqkc6";
21
- //#endregion
22
- //#region src/BlockHandlePlugin.tsx
23
- var DRAG_DATA_KEY = "application/x-rich-editor-drag";
24
- var HIDE_DELAY = 300;
25
- var HANDLE_OFFSET = 52;
26
- var TURN_INTO_ITEMS = [
27
- {
28
- key: "paragraph",
29
- label: "Text",
30
- icon: Type
31
- },
32
- {
33
- key: "h1",
34
- label: "Heading 1",
35
- icon: Heading1
36
- },
37
- {
38
- key: "h2",
39
- label: "Heading 2",
40
- icon: Heading2
41
- },
42
- {
43
- key: "h3",
44
- label: "Heading 3",
45
- icon: Heading3
46
- },
47
- {
48
- key: "bullet",
49
- label: "Bullet List",
50
- icon: List
51
- },
52
- {
53
- key: "numbered",
54
- label: "Numbered List",
55
- icon: ListOrdered
56
- },
57
- {
58
- key: "todo",
59
- label: "To-do",
60
- icon: ListChecks
61
- },
62
- {
63
- key: "quote",
64
- label: "Quote",
65
- icon: TextQuote
66
- },
67
- {
68
- key: "divider",
69
- label: "Divider",
70
- icon: Minus
71
- },
72
- {
73
- key: "code",
74
- label: "Code",
75
- icon: Code2
76
- }
21
+ const DRAG_DATA_KEY = "application/x-rich-editor-drag";
22
+ const HIDE_DELAY = 300;
23
+ const HANDLE_OFFSET = 52;
24
+ const TURN_INTO_ITEMS = [
25
+ { key: "paragraph", label: "Text", icon: Type },
26
+ { key: "h1", label: "Heading 1", icon: Heading1 },
27
+ { key: "h2", label: "Heading 2", icon: Heading2 },
28
+ { key: "h3", label: "Heading 3", icon: Heading3 },
29
+ { key: "bullet", label: "Bullet List", icon: List },
30
+ { key: "numbered", label: "Numbered List", icon: ListOrdered },
31
+ { key: "todo", label: "To-do", icon: ListChecks },
32
+ { key: "quote", label: "Quote", icon: TextQuote },
33
+ { key: "divider", label: "Divider", icon: Minus },
34
+ { key: "code", label: "Code", icon: Code2 }
77
35
  ];
78
36
  function getBlockElement(editor, target) {
79
- const rootElement = editor.getRootElement();
80
- if (!rootElement) return null;
81
- let current = target;
82
- while (current && current !== rootElement) {
83
- if (current.parentElement === rootElement) return current;
84
- current = current.parentElement;
85
- }
86
- return null;
37
+ const rootElement = editor.getRootElement();
38
+ if (!rootElement) return null;
39
+ let current = target;
40
+ while (current && current !== rootElement) {
41
+ if (current.parentElement === rootElement) return current;
42
+ current = current.parentElement;
43
+ }
44
+ return null;
87
45
  }
88
46
  function getNearestBlockByY(rootElement, clientY) {
89
- const blocks = [...rootElement.children].filter((child) => child instanceof HTMLElement);
90
- if (!blocks.length) return null;
91
- let nearestBlock = null;
92
- let nearestDistance = Number.POSITIVE_INFINITY;
93
- for (const block of blocks) {
94
- const rect = block.getBoundingClientRect();
95
- if (rect.height <= 0) continue;
96
- if (clientY >= rect.top && clientY <= rect.bottom) return block;
97
- const distance = clientY < rect.top ? rect.top - clientY : clientY - rect.bottom;
98
- if (distance < nearestDistance) {
99
- nearestDistance = distance;
100
- nearestBlock = block;
101
- }
102
- }
103
- return nearestBlock;
47
+ const blocks = [...rootElement.children].filter(
48
+ (child) => child instanceof HTMLElement
49
+ );
50
+ if (!blocks.length) return null;
51
+ let nearestBlock = null;
52
+ let nearestDistance = Number.POSITIVE_INFINITY;
53
+ for (const block of blocks) {
54
+ const rect = block.getBoundingClientRect();
55
+ if (rect.height <= 0) continue;
56
+ if (clientY >= rect.top && clientY <= rect.bottom) return block;
57
+ const distance = clientY < rect.top ? rect.top - clientY : clientY - rect.bottom;
58
+ if (distance < nearestDistance) {
59
+ nearestDistance = distance;
60
+ nearestBlock = block;
61
+ }
62
+ }
63
+ return nearestBlock;
104
64
  }
105
65
  function getDropTargetBlock(editor, rootElement, event) {
106
- const rootRect = rootElement.getBoundingClientRect();
107
- if (rootRect.width <= 0 || rootRect.height <= 0) return null;
108
- if (event.clientY < rootRect.top || event.clientY > rootRect.bottom) return null;
109
- const points = [{
110
- x: event.clientX,
111
- y: event.clientY
112
- }];
113
- const clampedX = Math.min(rootRect.right - 1, Math.max(rootRect.left + 1, event.clientX));
114
- if (clampedX !== event.clientX) points.unshift({
115
- x: clampedX,
116
- y: event.clientY
117
- });
118
- for (const point of points) {
119
- const element = document.elementFromPoint(point.x, point.y);
120
- if (!(element instanceof HTMLElement)) continue;
121
- const block = getBlockElement(editor, element);
122
- if (block) return block;
123
- }
124
- const { target } = event;
125
- if (target instanceof HTMLElement) {
126
- const block = getBlockElement(editor, target);
127
- if (block) return block;
128
- }
129
- return getNearestBlockByY(rootElement, event.clientY);
66
+ const rootRect = rootElement.getBoundingClientRect();
67
+ if (rootRect.width <= 0 || rootRect.height <= 0) return null;
68
+ if (event.clientY < rootRect.top || event.clientY > rootRect.bottom) {
69
+ return null;
70
+ }
71
+ const points = [{ x: event.clientX, y: event.clientY }];
72
+ const clampedX = Math.min(rootRect.right - 1, Math.max(rootRect.left + 1, event.clientX));
73
+ if (clampedX !== event.clientX) {
74
+ points.unshift({ x: clampedX, y: event.clientY });
75
+ }
76
+ for (const point of points) {
77
+ const element = document.elementFromPoint(point.x, point.y);
78
+ if (!(element instanceof HTMLElement)) continue;
79
+ const block = getBlockElement(editor, element);
80
+ if (block) return block;
81
+ }
82
+ const { target } = event;
83
+ if (target instanceof HTMLElement) {
84
+ const block = getBlockElement(editor, target);
85
+ if (block) return block;
86
+ }
87
+ return getNearestBlockByY(rootElement, event.clientY);
130
88
  }
131
89
  function toPagePosition(rect) {
132
- return {
133
- top: rect.top + window.scrollY,
134
- left: rect.left + window.scrollX
135
- };
90
+ return {
91
+ top: rect.top + window.scrollY,
92
+ left: rect.left + window.scrollX
93
+ };
136
94
  }
137
95
  function $cloneNode(node) {
138
- const Klass = node.constructor;
139
- const serialized = node.exportJSON();
140
- const clone = Klass.importJSON(serialized);
141
- if ($isElementNode(node) && $isElementNode(clone)) for (const child of node.getChildren()) clone.append($cloneNode(child));
142
- return clone;
96
+ const Klass = node.constructor;
97
+ const serialized = node.exportJSON();
98
+ const clone = Klass.importJSON(serialized);
99
+ if ($isElementNode(node) && $isElementNode(clone)) {
100
+ for (const child of node.getChildren()) {
101
+ clone.append($cloneNode(child));
102
+ }
103
+ }
104
+ return clone;
143
105
  }
144
106
  function BlockHandleInner({ editor }) {
145
- const { className: portalClassName, theme } = usePortalTheme();
146
- const [handle, setHandle] = useState({
147
- visible: false,
148
- top: 0,
149
- left: 0,
150
- nodeKey: null
151
- });
152
- const [dropLine, setDropLine] = useState({
153
- visible: false,
154
- top: 0,
155
- left: 0,
156
- width: 0
157
- });
158
- const activeBlockRef = useRef(null);
159
- const hideTimerRef = useRef(null);
160
- const hoveringHandleRef = useRef(false);
161
- const menuOpenCountRef = useRef(0);
162
- const dragPreviewRef = useRef(null);
163
- const draggingBlockRef = useRef(null);
164
- const clearHideTimer = useCallback(() => {
165
- if (hideTimerRef.current) {
166
- clearTimeout(hideTimerRef.current);
167
- hideTimerRef.current = null;
168
- }
169
- }, []);
170
- const scheduleHide = useCallback(() => {
171
- clearHideTimer();
172
- hideTimerRef.current = setTimeout(() => {
173
- if (!hoveringHandleRef.current && menuOpenCountRef.current === 0) {
174
- activeBlockRef.current = null;
175
- setHandle((s) => ({
176
- ...s,
177
- visible: false,
178
- nodeKey: null
179
- }));
180
- }
181
- }, HIDE_DELAY);
182
- }, [clearHideTimer]);
183
- const onHandleEnter = useCallback(() => {
184
- hoveringHandleRef.current = true;
185
- clearHideTimer();
186
- }, [clearHideTimer]);
187
- const onHandleLeave = useCallback(() => {
188
- hoveringHandleRef.current = false;
189
- scheduleHide();
190
- }, [scheduleHide]);
191
- const onMenuOpenChange = useCallback((open) => {
192
- menuOpenCountRef.current += open ? 1 : -1;
193
- if (!open) scheduleHide();
194
- else clearHideTimer();
195
- }, [scheduleHide, clearHideTimer]);
196
- const updatePositionFromBlock = useCallback((block) => {
197
- if (block !== void 0) activeBlockRef.current = block;
198
- const el = activeBlockRef.current;
199
- if (!el || !el.isConnected) {
200
- activeBlockRef.current = null;
201
- setHandle((s) => s.visible ? {
202
- ...s,
203
- visible: false,
204
- nodeKey: null
205
- } : s);
206
- return;
207
- }
208
- const rootElement = editor.getRootElement();
209
- if (!rootElement) return;
210
- const blockRect = el.getBoundingClientRect();
211
- const rootRect = rootElement.getBoundingClientRect();
212
- const page = toPagePosition(blockRect);
213
- let nodeKey = null;
214
- editor.read(() => {
215
- const node = $getNearestNodeFromDOMNode(el);
216
- if (node) nodeKey = node.getKey();
217
- });
218
- setHandle({
219
- visible: true,
220
- top: page.top,
221
- left: toPagePosition(rootRect).left - HANDLE_OFFSET,
222
- nodeKey
223
- });
224
- }, [editor]);
225
- useEffect(() => {
226
- const rootElement = editor.getRootElement();
227
- if (!rootElement) return;
228
- let rafId = null;
229
- const onMouseMove = (e) => {
230
- if (rafId !== null) return;
231
- rafId = requestAnimationFrame(() => {
232
- rafId = null;
233
- const target = e.target;
234
- const block = getBlockElement(editor, target);
235
- if (block) {
236
- clearHideTimer();
237
- updatePositionFromBlock(block);
238
- }
239
- });
240
- };
241
- const onMouseLeave = () => {
242
- if (!hoveringHandleRef.current && menuOpenCountRef.current === 0) scheduleHide();
243
- };
244
- rootElement.addEventListener("mousemove", onMouseMove);
245
- rootElement.addEventListener("mouseleave", onMouseLeave);
246
- return () => {
247
- if (rafId !== null) cancelAnimationFrame(rafId);
248
- rootElement.removeEventListener("mousemove", onMouseMove);
249
- rootElement.removeEventListener("mouseleave", onMouseLeave);
250
- clearHideTimer();
251
- };
252
- }, [
253
- editor,
254
- clearHideTimer,
255
- scheduleHide,
256
- updatePositionFromBlock
257
- ]);
258
- useEffect(() => {
259
- const update = () => updatePositionFromBlock();
260
- window.addEventListener("scroll", update, true);
261
- window.addEventListener("resize", update);
262
- return () => {
263
- window.removeEventListener("scroll", update, true);
264
- window.removeEventListener("resize", update);
265
- };
266
- }, [updatePositionFromBlock]);
267
- useEffect(() => editor.registerUpdateListener(() => updatePositionFromBlock()), [editor, updatePositionFromBlock]);
268
- const handleAddBlock = useCallback(() => {
269
- if (!handle.nodeKey) return;
270
- editor.update(() => {
271
- const node = $getNodeByKey(handle.nodeKey);
272
- if (!node) return;
273
- const p = $createParagraphNode();
274
- node.insertAfter(p);
275
- p.selectStart();
276
- });
277
- }, [editor, handle.nodeKey]);
278
- const handleTurnInto = useCallback((type) => {
279
- const { nodeKey } = handle;
280
- if (!nodeKey) return;
281
- if ([
282
- "bullet",
283
- "numbered",
284
- "todo",
285
- "divider"
286
- ].includes(type)) {
287
- editor.update(() => {
288
- const node = $getNodeByKey(nodeKey);
289
- if (!node) return;
290
- if ($isElementNode(node)) node.selectStart();
291
- });
292
- const commands = {
293
- bullet: INSERT_UNORDERED_LIST_COMMAND,
294
- numbered: INSERT_ORDERED_LIST_COMMAND,
295
- todo: INSERT_CHECK_LIST_COMMAND,
296
- divider: INSERT_HORIZONTAL_RULE_COMMAND
297
- };
298
- editor.dispatchCommand(commands[type], void 0);
299
- return;
300
- }
301
- editor.update(() => {
302
- const node = $getNodeByKey(nodeKey);
303
- if (!node || !$isElementNode(node)) return;
304
- node.selectStart();
305
- const sel = $getSelection();
306
- if (!$isRangeSelection(sel)) return;
307
- const create = {
308
- paragraph: () => $createParagraphNode(),
309
- h1: () => $createHeadingNode("h1"),
310
- h2: () => $createHeadingNode("h2"),
311
- h3: () => $createHeadingNode("h3"),
312
- quote: () => $createQuoteNode(),
313
- code: () => $createCodeNode()
314
- }[type];
315
- if (create) $setBlocksType(sel, create);
316
- });
317
- }, [editor, handle.nodeKey]);
318
- const handleDelete = useCallback(() => {
319
- if (!handle.nodeKey) return;
320
- editor.update(() => {
321
- $getNodeByKey(handle.nodeKey)?.remove();
322
- });
323
- setHandle((s) => ({
324
- ...s,
325
- visible: false,
326
- nodeKey: null
327
- }));
328
- }, [editor, handle.nodeKey]);
329
- const handleDuplicate = useCallback(() => {
330
- if (!handle.nodeKey) return;
331
- editor.update(() => {
332
- const node = $getNodeByKey(handle.nodeKey);
333
- if (!node) return;
334
- const clone = $cloneNode(node);
335
- node.insertAfter(clone);
336
- });
337
- }, [editor, handle.nodeKey]);
338
- const handleMoveUp = useCallback(() => {
339
- if (!handle.nodeKey) return;
340
- editor.update(() => {
341
- const node = $getNodeByKey(handle.nodeKey);
342
- if (!node) return;
343
- const prev = node.getPreviousSibling();
344
- if (prev) {
345
- node.remove();
346
- prev.insertBefore(node);
347
- }
348
- });
349
- }, [editor, handle.nodeKey]);
350
- const handleMoveDown = useCallback(() => {
351
- if (!handle.nodeKey) return;
352
- editor.update(() => {
353
- const node = $getNodeByKey(handle.nodeKey);
354
- if (!node) return;
355
- const next = node.getNextSibling();
356
- if (next) {
357
- node.remove();
358
- next.insertAfter(node);
359
- }
360
- });
361
- }, [editor, handle.nodeKey]);
362
- const [gripMenuOpen, setGripMenuOpen] = useState(false);
363
- const dragStartedRef = useRef(false);
364
- const clearDragVisualState = useCallback(() => {
365
- const preview = dragPreviewRef.current;
366
- if (preview) {
367
- preview.remove();
368
- dragPreviewRef.current = null;
369
- }
370
- const draggingBlock$1 = draggingBlockRef.current;
371
- if (draggingBlock$1) {
372
- draggingBlock$1.classList.remove(draggingBlock);
373
- draggingBlockRef.current = null;
374
- }
375
- }, []);
376
- const onGripDragStart = useCallback((e) => {
377
- dragStartedRef.current = true;
378
- if (!e.dataTransfer || !handle.nodeKey) return;
379
- e.dataTransfer.setData(DRAG_DATA_KEY, handle.nodeKey);
380
- e.dataTransfer.effectAllowed = "move";
381
- const block = activeBlockRef.current;
382
- if (!block) return;
383
- clearDragVisualState();
384
- const rect = block.getBoundingClientRect();
385
- const preview = block.cloneNode(true);
386
- preview.classList.add(dragPreview);
387
- preview.style.width = `${rect.width}px`;
388
- if (portalClassName) {
389
- const wrapper = document.createElement("div");
390
- wrapper.className = portalClassName;
391
- wrapper.setAttribute("data-theme", theme);
392
- wrapper.style.cssText = "position:fixed;top:-10000px;left:-10000px;pointer-events:none";
393
- wrapper.appendChild(preview);
394
- document.body.append(wrapper);
395
- dragPreviewRef.current = wrapper;
396
- } else {
397
- document.body.append(preview);
398
- dragPreviewRef.current = preview;
399
- }
400
- draggingBlockRef.current = block;
401
- block.classList.add(draggingBlock);
402
- const offsetX = Math.max(12, Math.min(rect.width - 12, e.clientX - rect.left));
403
- const offsetY = Math.max(8, Math.min(rect.height - 8, e.clientY - rect.top));
404
- e.dataTransfer.setDragImage(preview, offsetX, offsetY);
405
- }, [
406
- clearDragVisualState,
407
- handle.nodeKey,
408
- portalClassName,
409
- theme
410
- ]);
411
- const onGripOpenChange = useCallback((open) => {
412
- setGripMenuOpen((prev) => {
413
- if (prev === open) return prev;
414
- onMenuOpenChange(open);
415
- return open;
416
- });
417
- }, [onMenuOpenChange]);
418
- const onGripMouseDownCapture = useCallback((e) => {
419
- dragStartedRef.current = false;
420
- if (e.button === 0) e.stopPropagation();
421
- }, []);
422
- const onGripClick = useCallback((e) => {
423
- if (e.detail === 0) return;
424
- e.preventDefault();
425
- e.stopPropagation();
426
- if (dragStartedRef.current) {
427
- dragStartedRef.current = false;
428
- return;
429
- }
430
- onGripOpenChange(!gripMenuOpen);
431
- }, [gripMenuOpen, onGripOpenChange]);
432
- useEffect(() => {
433
- const rootElement = editor.getRootElement();
434
- if (!rootElement) return;
435
- const unregDragOver = editor.registerCommand(DRAGOVER_COMMAND, (event) => {
436
- if (!event.dataTransfer?.types.includes(DRAG_DATA_KEY)) return false;
437
- event.preventDefault();
438
- event.dataTransfer.dropEffect = "move";
439
- const block = getDropTargetBlock(editor, rootElement, event);
440
- if (!block) {
441
- setDropLine((s) => s.visible ? {
442
- ...s,
443
- visible: false
444
- } : s);
445
- return true;
446
- }
447
- const rect = block.getBoundingClientRect();
448
- const rootRect = rootElement.getBoundingClientRect();
449
- const midY = rect.top + rect.height / 2;
450
- setDropLine({
451
- visible: true,
452
- top: (event.clientY < midY ? rect.top : rect.bottom) + window.scrollY,
453
- left: rootRect.left + window.scrollX,
454
- width: rootRect.width
455
- });
456
- return true;
457
- }, COMMAND_PRIORITY_HIGH);
458
- const unregDrop = editor.registerCommand(DROP_COMMAND, (event) => {
459
- const draggedKey = event.dataTransfer?.getData(DRAG_DATA_KEY);
460
- if (!draggedKey) return false;
461
- event.preventDefault();
462
- setDropLine((s) => ({
463
- ...s,
464
- visible: false
465
- }));
466
- clearDragVisualState();
467
- const block = getDropTargetBlock(editor, rootElement, event);
468
- if (!block) return false;
469
- editor.update(() => {
470
- const draggedNode = $getNodeByKey(draggedKey);
471
- const targetNode = $getNearestNodeFromDOMNode(block);
472
- if (!draggedNode || !targetNode || draggedNode === targetNode) return;
473
- const rect = block.getBoundingClientRect();
474
- const midY = rect.top + rect.height / 2;
475
- draggedNode.remove();
476
- if (event.clientY < midY) targetNode.insertBefore(draggedNode);
477
- else targetNode.insertAfter(draggedNode);
478
- });
479
- return true;
480
- }, COMMAND_PRIORITY_HIGH);
481
- const unregDragStart = editor.registerCommand(DRAGSTART_COMMAND, (event) => {
482
- if (!event.dataTransfer?.types.includes(DRAG_DATA_KEY)) return false;
483
- return true;
484
- }, COMMAND_PRIORITY_HIGH);
485
- const clearDropLine = () => {
486
- setDropLine((s) => s.visible ? {
487
- ...s,
488
- visible: false
489
- } : s);
490
- };
491
- const clearDragState = () => {
492
- clearDropLine();
493
- clearDragVisualState();
494
- };
495
- const onDragLeave = (e) => {
496
- if (e.relatedTarget === null || !rootElement.contains(e.relatedTarget)) clearDropLine();
497
- };
498
- window.addEventListener("dragend", clearDragState);
499
- window.addEventListener("drop", clearDragState);
500
- rootElement.addEventListener("dragleave", onDragLeave);
501
- return () => {
502
- unregDragOver();
503
- unregDrop();
504
- unregDragStart();
505
- window.removeEventListener("dragend", clearDragState);
506
- window.removeEventListener("drop", clearDragState);
507
- rootElement.removeEventListener("dragleave", onDragLeave);
508
- clearDragState();
509
- };
510
- }, [clearDragVisualState, editor]);
511
- return /* @__PURE__ */ jsxs("div", {
512
- ...portalClassName ? {
513
- "className": portalClassName,
514
- "data-theme": theme,
515
- "style": { display: "contents" }
516
- } : {},
517
- children: [/* @__PURE__ */ jsxs("div", {
518
- className: `${handleContainer} ${handle.visible ? handleContainerVisible : ""}`,
519
- style: {
520
- top: handle.top,
521
- left: handle.left
522
- },
523
- onMouseEnter: onHandleEnter,
524
- onMouseLeave: onHandleLeave,
525
- children: [/* @__PURE__ */ jsx("button", {
526
- "aria-label": "Add block",
527
- className: handleBtn,
528
- onClick: handleAddBlock,
529
- children: /* @__PURE__ */ jsx(Plus, { size: 14 })
530
- }), /* @__PURE__ */ jsxs(DropdownMenu, {
531
- open: gripMenuOpen,
532
- onOpenChange: onGripOpenChange,
533
- children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
534
- draggable: true,
535
- "aria-label": "Block actions",
536
- className: handleBtn,
537
- onClick: onGripClick,
538
- onDragStart: onGripDragStart,
539
- onMouseDownCapture: onGripMouseDownCapture,
540
- children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
541
- }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
542
- align: "start",
543
- side: "bottom",
544
- sideOffset: 4,
545
- children: [
546
- /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "TURN INTO" }), TURN_INTO_ITEMS.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
547
- onClick: () => handleTurnInto(item.key),
548
- children: [/* @__PURE__ */ jsx(item.icon, {}), item.label]
549
- }, item.key))] }),
550
- /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
551
- /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
552
- /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "ACTIONS" }),
553
- /* @__PURE__ */ jsxs(DropdownMenuItem, {
554
- onClick: handleDuplicate,
555
- children: [/* @__PURE__ */ jsx(Copy, {}), "Duplicate"]
556
- }),
557
- /* @__PURE__ */ jsxs(DropdownMenuItem, {
558
- onClick: handleMoveUp,
559
- children: [/* @__PURE__ */ jsx(ArrowUp, {}), "Move Up"]
560
- }),
561
- /* @__PURE__ */ jsxs(DropdownMenuItem, {
562
- onClick: handleMoveDown,
563
- children: [/* @__PURE__ */ jsx(ArrowDown, {}), "Move Down"]
564
- })
565
- ] }),
566
- /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
567
- /* @__PURE__ */ jsxs(DropdownMenuItem, {
568
- className: menuItemDestructive,
569
- onClick: handleDelete,
570
- children: [/* @__PURE__ */ jsx(Trash2, {}), "Delete"]
571
- })
572
- ]
573
- })]
574
- })]
575
- }), dropLine.visible && /* @__PURE__ */ jsx("div", {
576
- className: "iihqkc5",
577
- style: {
578
- top: dropLine.top,
579
- left: dropLine.left,
580
- width: dropLine.width
581
- }
582
- })]
583
- });
107
+ const { className: portalClassName, theme } = usePortalTheme();
108
+ const [handle, setHandle] = useState({
109
+ visible: false,
110
+ top: 0,
111
+ left: 0,
112
+ nodeKey: null
113
+ });
114
+ const [dropLine, setDropLine] = useState({
115
+ visible: false,
116
+ top: 0,
117
+ left: 0,
118
+ width: 0
119
+ });
120
+ const activeBlockRef = useRef(null);
121
+ const hideTimerRef = useRef(null);
122
+ const hoveringHandleRef = useRef(false);
123
+ const menuOpenCountRef = useRef(0);
124
+ const dragPreviewRef = useRef(null);
125
+ const draggingBlockRef = useRef(null);
126
+ const clearHideTimer = useCallback(() => {
127
+ if (hideTimerRef.current) {
128
+ clearTimeout(hideTimerRef.current);
129
+ hideTimerRef.current = null;
130
+ }
131
+ }, []);
132
+ const scheduleHide = useCallback(() => {
133
+ clearHideTimer();
134
+ hideTimerRef.current = setTimeout(() => {
135
+ if (!hoveringHandleRef.current && menuOpenCountRef.current === 0) {
136
+ activeBlockRef.current = null;
137
+ setHandle((s) => ({ ...s, visible: false, nodeKey: null }));
138
+ }
139
+ }, HIDE_DELAY);
140
+ }, [clearHideTimer]);
141
+ const onHandleEnter = useCallback(() => {
142
+ hoveringHandleRef.current = true;
143
+ clearHideTimer();
144
+ }, [clearHideTimer]);
145
+ const onHandleLeave = useCallback(() => {
146
+ hoveringHandleRef.current = false;
147
+ scheduleHide();
148
+ }, [scheduleHide]);
149
+ const onMenuOpenChange = useCallback(
150
+ (open) => {
151
+ menuOpenCountRef.current += open ? 1 : -1;
152
+ if (!open) scheduleHide();
153
+ else clearHideTimer();
154
+ },
155
+ [scheduleHide, clearHideTimer]
156
+ );
157
+ const updatePositionFromBlock = useCallback(
158
+ (block) => {
159
+ if (block !== void 0) activeBlockRef.current = block;
160
+ const el = activeBlockRef.current;
161
+ if (!el || !el.isConnected) {
162
+ activeBlockRef.current = null;
163
+ setHandle((s) => s.visible ? { ...s, visible: false, nodeKey: null } : s);
164
+ return;
165
+ }
166
+ const rootElement = editor.getRootElement();
167
+ if (!rootElement) return;
168
+ const blockRect = el.getBoundingClientRect();
169
+ const rootRect = rootElement.getBoundingClientRect();
170
+ const page = toPagePosition(blockRect);
171
+ let nodeKey = null;
172
+ editor.read(() => {
173
+ const node = $getNearestNodeFromDOMNode(el);
174
+ if (node) nodeKey = node.getKey();
175
+ });
176
+ setHandle({
177
+ visible: true,
178
+ top: page.top,
179
+ left: toPagePosition(rootRect).left - HANDLE_OFFSET,
180
+ nodeKey
181
+ });
182
+ },
183
+ [editor]
184
+ );
185
+ useEffect(() => {
186
+ const rootElement = editor.getRootElement();
187
+ if (!rootElement) return;
188
+ let rafId = null;
189
+ const onMouseMove = (e) => {
190
+ if (rafId !== null) return;
191
+ rafId = requestAnimationFrame(() => {
192
+ rafId = null;
193
+ const target = e.target;
194
+ const block = getBlockElement(editor, target);
195
+ if (block) {
196
+ clearHideTimer();
197
+ updatePositionFromBlock(block);
198
+ }
199
+ });
200
+ };
201
+ const onMouseLeave = () => {
202
+ if (!hoveringHandleRef.current && menuOpenCountRef.current === 0) {
203
+ scheduleHide();
204
+ }
205
+ };
206
+ rootElement.addEventListener("mousemove", onMouseMove);
207
+ rootElement.addEventListener("mouseleave", onMouseLeave);
208
+ return () => {
209
+ if (rafId !== null) cancelAnimationFrame(rafId);
210
+ rootElement.removeEventListener("mousemove", onMouseMove);
211
+ rootElement.removeEventListener("mouseleave", onMouseLeave);
212
+ clearHideTimer();
213
+ };
214
+ }, [editor, clearHideTimer, scheduleHide, updatePositionFromBlock]);
215
+ useEffect(() => {
216
+ const update = () => updatePositionFromBlock();
217
+ window.addEventListener("scroll", update, true);
218
+ window.addEventListener("resize", update);
219
+ return () => {
220
+ window.removeEventListener("scroll", update, true);
221
+ window.removeEventListener("resize", update);
222
+ };
223
+ }, [updatePositionFromBlock]);
224
+ useEffect(
225
+ () => editor.registerUpdateListener(() => updatePositionFromBlock()),
226
+ [editor, updatePositionFromBlock]
227
+ );
228
+ const handleAddBlock = useCallback(() => {
229
+ if (!handle.nodeKey) return;
230
+ editor.update(() => {
231
+ const node = $getNodeByKey(handle.nodeKey);
232
+ if (!node) return;
233
+ const p = $createParagraphNode();
234
+ node.insertAfter(p);
235
+ p.selectStart();
236
+ });
237
+ }, [editor, handle.nodeKey]);
238
+ const handleTurnInto = useCallback(
239
+ (type) => {
240
+ const { nodeKey } = handle;
241
+ if (!nodeKey) return;
242
+ if (["bullet", "numbered", "todo", "divider"].includes(type)) {
243
+ editor.update(() => {
244
+ const node = $getNodeByKey(nodeKey);
245
+ if (!node) return;
246
+ if ($isElementNode(node)) node.selectStart();
247
+ });
248
+ const commands = {
249
+ bullet: INSERT_UNORDERED_LIST_COMMAND,
250
+ numbered: INSERT_ORDERED_LIST_COMMAND,
251
+ todo: INSERT_CHECK_LIST_COMMAND,
252
+ divider: INSERT_HORIZONTAL_RULE_COMMAND
253
+ };
254
+ editor.dispatchCommand(commands[type], void 0);
255
+ return;
256
+ }
257
+ editor.update(() => {
258
+ const node = $getNodeByKey(nodeKey);
259
+ if (!node || !$isElementNode(node)) return;
260
+ node.selectStart();
261
+ const sel = $getSelection();
262
+ if (!$isRangeSelection(sel)) return;
263
+ const creators = {
264
+ paragraph: () => $createParagraphNode(),
265
+ h1: () => $createHeadingNode("h1"),
266
+ h2: () => $createHeadingNode("h2"),
267
+ h3: () => $createHeadingNode("h3"),
268
+ quote: () => $createQuoteNode(),
269
+ code: () => $createCodeNode()
270
+ };
271
+ const create = creators[type];
272
+ if (create) $setBlocksType(sel, create);
273
+ });
274
+ },
275
+ [editor, handle.nodeKey]
276
+ );
277
+ const handleDelete = useCallback(() => {
278
+ if (!handle.nodeKey) return;
279
+ editor.update(() => {
280
+ const node = $getNodeByKey(handle.nodeKey);
281
+ node?.remove();
282
+ });
283
+ setHandle((s) => ({ ...s, visible: false, nodeKey: null }));
284
+ }, [editor, handle.nodeKey]);
285
+ const handleDuplicate = useCallback(() => {
286
+ if (!handle.nodeKey) return;
287
+ editor.update(() => {
288
+ const node = $getNodeByKey(handle.nodeKey);
289
+ if (!node) return;
290
+ const clone = $cloneNode(node);
291
+ node.insertAfter(clone);
292
+ });
293
+ }, [editor, handle.nodeKey]);
294
+ const handleMoveUp = useCallback(() => {
295
+ if (!handle.nodeKey) return;
296
+ editor.update(() => {
297
+ const node = $getNodeByKey(handle.nodeKey);
298
+ if (!node) return;
299
+ const prev = node.getPreviousSibling();
300
+ if (prev) {
301
+ node.remove();
302
+ prev.insertBefore(node);
303
+ }
304
+ });
305
+ }, [editor, handle.nodeKey]);
306
+ const handleMoveDown = useCallback(() => {
307
+ if (!handle.nodeKey) return;
308
+ editor.update(() => {
309
+ const node = $getNodeByKey(handle.nodeKey);
310
+ if (!node) return;
311
+ const next = node.getNextSibling();
312
+ if (next) {
313
+ node.remove();
314
+ next.insertAfter(node);
315
+ }
316
+ });
317
+ }, [editor, handle.nodeKey]);
318
+ const [gripMenuOpen, setGripMenuOpen] = useState(false);
319
+ const dragStartedRef = useRef(false);
320
+ const clearDragVisualState = useCallback(() => {
321
+ const preview = dragPreviewRef.current;
322
+ if (preview) {
323
+ preview.remove();
324
+ dragPreviewRef.current = null;
325
+ }
326
+ const draggingBlock$1 = draggingBlockRef.current;
327
+ if (draggingBlock$1) {
328
+ draggingBlock$1.classList.remove(draggingBlock);
329
+ draggingBlockRef.current = null;
330
+ }
331
+ }, []);
332
+ const onGripDragStart = useCallback(
333
+ (e) => {
334
+ dragStartedRef.current = true;
335
+ if (!e.dataTransfer || !handle.nodeKey) return;
336
+ e.dataTransfer.setData(DRAG_DATA_KEY, handle.nodeKey);
337
+ e.dataTransfer.effectAllowed = "move";
338
+ const block = activeBlockRef.current;
339
+ if (!block) return;
340
+ clearDragVisualState();
341
+ const rect = block.getBoundingClientRect();
342
+ const preview = block.cloneNode(true);
343
+ preview.classList.add(dragPreview);
344
+ preview.style.width = `${rect.width}px`;
345
+ if (portalClassName) {
346
+ const wrapper = document.createElement("div");
347
+ wrapper.className = portalClassName;
348
+ wrapper.setAttribute("data-theme", theme);
349
+ wrapper.style.cssText = "position:fixed;top:-10000px;left:-10000px;pointer-events:none";
350
+ wrapper.appendChild(preview);
351
+ document.body.append(wrapper);
352
+ dragPreviewRef.current = wrapper;
353
+ } else {
354
+ document.body.append(preview);
355
+ dragPreviewRef.current = preview;
356
+ }
357
+ draggingBlockRef.current = block;
358
+ block.classList.add(draggingBlock);
359
+ const offsetX = Math.max(12, Math.min(rect.width - 12, e.clientX - rect.left));
360
+ const offsetY = Math.max(8, Math.min(rect.height - 8, e.clientY - rect.top));
361
+ e.dataTransfer.setDragImage(preview, offsetX, offsetY);
362
+ },
363
+ [clearDragVisualState, handle.nodeKey, portalClassName, theme]
364
+ );
365
+ const onGripOpenChange = useCallback(
366
+ (open) => {
367
+ setGripMenuOpen((prev) => {
368
+ if (prev === open) return prev;
369
+ onMenuOpenChange(open);
370
+ return open;
371
+ });
372
+ },
373
+ [onMenuOpenChange]
374
+ );
375
+ const onGripMouseDownCapture = useCallback((e) => {
376
+ dragStartedRef.current = false;
377
+ if (e.button === 0) e.stopPropagation();
378
+ }, []);
379
+ const onGripClick = useCallback(
380
+ (e) => {
381
+ if (e.detail === 0) return;
382
+ e.preventDefault();
383
+ e.stopPropagation();
384
+ if (dragStartedRef.current) {
385
+ dragStartedRef.current = false;
386
+ return;
387
+ }
388
+ onGripOpenChange(!gripMenuOpen);
389
+ },
390
+ [gripMenuOpen, onGripOpenChange]
391
+ );
392
+ useEffect(() => {
393
+ const rootElement = editor.getRootElement();
394
+ if (!rootElement) return;
395
+ const unregDragOver = editor.registerCommand(
396
+ DRAGOVER_COMMAND,
397
+ (event) => {
398
+ if (!event.dataTransfer?.types.includes(DRAG_DATA_KEY)) return false;
399
+ event.preventDefault();
400
+ event.dataTransfer.dropEffect = "move";
401
+ const block = getDropTargetBlock(editor, rootElement, event);
402
+ if (!block) {
403
+ setDropLine((s) => s.visible ? { ...s, visible: false } : s);
404
+ return true;
405
+ }
406
+ const rect = block.getBoundingClientRect();
407
+ const rootRect = rootElement.getBoundingClientRect();
408
+ const midY = rect.top + rect.height / 2;
409
+ const y = event.clientY < midY ? rect.top : rect.bottom;
410
+ setDropLine({
411
+ visible: true,
412
+ top: y + window.scrollY,
413
+ left: rootRect.left + window.scrollX,
414
+ width: rootRect.width
415
+ });
416
+ return true;
417
+ },
418
+ COMMAND_PRIORITY_HIGH
419
+ );
420
+ const unregDrop = editor.registerCommand(
421
+ DROP_COMMAND,
422
+ (event) => {
423
+ const draggedKey = event.dataTransfer?.getData(DRAG_DATA_KEY);
424
+ if (!draggedKey) return false;
425
+ event.preventDefault();
426
+ setDropLine((s) => ({ ...s, visible: false }));
427
+ clearDragVisualState();
428
+ const block = getDropTargetBlock(editor, rootElement, event);
429
+ if (!block) return false;
430
+ editor.update(() => {
431
+ const draggedNode = $getNodeByKey(draggedKey);
432
+ const targetNode = $getNearestNodeFromDOMNode(block);
433
+ if (!draggedNode || !targetNode || draggedNode === targetNode) return;
434
+ const rect = block.getBoundingClientRect();
435
+ const midY = rect.top + rect.height / 2;
436
+ draggedNode.remove();
437
+ if (event.clientY < midY) {
438
+ targetNode.insertBefore(draggedNode);
439
+ } else {
440
+ targetNode.insertAfter(draggedNode);
441
+ }
442
+ });
443
+ return true;
444
+ },
445
+ COMMAND_PRIORITY_HIGH
446
+ );
447
+ const unregDragStart = editor.registerCommand(
448
+ DRAGSTART_COMMAND,
449
+ (event) => {
450
+ if (!event.dataTransfer?.types.includes(DRAG_DATA_KEY)) return false;
451
+ return true;
452
+ },
453
+ COMMAND_PRIORITY_HIGH
454
+ );
455
+ const clearDropLine = () => {
456
+ setDropLine((s) => s.visible ? { ...s, visible: false } : s);
457
+ };
458
+ const clearDragState = () => {
459
+ clearDropLine();
460
+ clearDragVisualState();
461
+ };
462
+ const onDragLeave = (e) => {
463
+ if (e.relatedTarget === null || !rootElement.contains(e.relatedTarget)) {
464
+ clearDropLine();
465
+ }
466
+ };
467
+ window.addEventListener("dragend", clearDragState);
468
+ window.addEventListener("drop", clearDragState);
469
+ rootElement.addEventListener("dragleave", onDragLeave);
470
+ return () => {
471
+ unregDragOver();
472
+ unregDrop();
473
+ unregDragStart();
474
+ window.removeEventListener("dragend", clearDragState);
475
+ window.removeEventListener("drop", clearDragState);
476
+ rootElement.removeEventListener("dragleave", onDragLeave);
477
+ clearDragState();
478
+ };
479
+ }, [clearDragVisualState, editor]);
480
+ const themeWrapperProps = portalClassName ? {
481
+ "className": portalClassName,
482
+ "data-theme": theme,
483
+ "style": { display: "contents" }
484
+ } : {};
485
+ return /* @__PURE__ */ jsxs("div", { ...themeWrapperProps, children: [
486
+ /* @__PURE__ */ jsxs(
487
+ "div",
488
+ {
489
+ className: `${handleContainer} ${handle.visible ? handleContainerVisible : ""}`,
490
+ style: { top: handle.top, left: handle.left },
491
+ onMouseEnter: onHandleEnter,
492
+ onMouseLeave: onHandleLeave,
493
+ children: [
494
+ /* @__PURE__ */ jsx("button", { "aria-label": "Add block", className: handleBtn, onClick: handleAddBlock, children: /* @__PURE__ */ jsx(Plus, { size: 14 }) }),
495
+ /* @__PURE__ */ jsxs(DropdownMenu, { open: gripMenuOpen, onOpenChange: onGripOpenChange, children: [
496
+ /* @__PURE__ */ jsx(
497
+ DropdownMenuTrigger,
498
+ {
499
+ draggable: true,
500
+ "aria-label": "Block actions",
501
+ className: handleBtn,
502
+ onClick: onGripClick,
503
+ onDragStart: onGripDragStart,
504
+ onMouseDownCapture: onGripMouseDownCapture,
505
+ children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
506
+ }
507
+ ),
508
+ /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", side: "bottom", sideOffset: 4, children: [
509
+ /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
510
+ /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "TURN INTO" }),
511
+ TURN_INTO_ITEMS.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => handleTurnInto(item.key), children: [
512
+ /* @__PURE__ */ jsx(item.icon, {}),
513
+ item.label
514
+ ] }, item.key))
515
+ ] }),
516
+ /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
517
+ /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
518
+ /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "ACTIONS" }),
519
+ /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleDuplicate, children: [
520
+ /* @__PURE__ */ jsx(Copy, {}),
521
+ "Duplicate"
522
+ ] }),
523
+ /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleMoveUp, children: [
524
+ /* @__PURE__ */ jsx(ArrowUp, {}),
525
+ "Move Up"
526
+ ] }),
527
+ /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleMoveDown, children: [
528
+ /* @__PURE__ */ jsx(ArrowDown, {}),
529
+ "Move Down"
530
+ ] })
531
+ ] }),
532
+ /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
533
+ /* @__PURE__ */ jsxs(DropdownMenuItem, { className: menuItemDestructive, onClick: handleDelete, children: [
534
+ /* @__PURE__ */ jsx(Trash2, {}),
535
+ "Delete"
536
+ ] })
537
+ ] })
538
+ ] })
539
+ ]
540
+ }
541
+ ),
542
+ dropLine.visible && /* @__PURE__ */ jsx(
543
+ "div",
544
+ {
545
+ className: dropIndicator,
546
+ style: {
547
+ top: dropLine.top,
548
+ left: dropLine.left,
549
+ width: dropLine.width
550
+ }
551
+ }
552
+ )
553
+ ] });
584
554
  }
585
555
  function BlockHandlePlugin() {
586
- const [editor] = useLexicalComposerContext();
587
- return createPortal(/* @__PURE__ */ jsx(BlockHandleInner, { editor }), document.body);
556
+ const [editor] = useLexicalComposerContext();
557
+ return createPortal(/* @__PURE__ */ jsx(BlockHandleInner, { editor }), document.body);
588
558
  }
589
- //#endregion
590
- export { BlockHandlePlugin };
559
+ export {
560
+ BlockHandlePlugin
561
+ };
package/dist/rich-plugin-block-handle.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}._1bfi5uc0{--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}._1bfi5uc1{--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}._1bfi5uc2{--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 ._1bfi5uc0,[data-theme=dark] ._1bfi5uc0,.dark._1bfi5uc0,[data-theme=dark]._1bfi5uc0,.dark ._1bfi5uc1,[data-theme=dark] ._1bfi5uc1,.dark._1bfi5uc1,[data-theme=dark]._1bfi5uc1,.dark ._1bfi5uc2,[data-theme=dark] ._1bfi5uc2,.dark._1bfi5uc2,[data-theme=dark]._1bfi5uc2{--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}.iihqkc0{z-index:30;opacity:0;pointer-events:none;align-items:center;gap:1px;transition:opacity .15s;display:flex;position:absolute}.iihqkc1{opacity:1;pointer-events:auto}.iihqkc2{width:24px;height:24px;color:color-mix(in srgb, var(--rc-text) 35%, transparent);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:flex}.iihqkc2:hover{background:color-mix(in srgb, var(--rc-text) 8%, transparent);color:color-mix(in srgb, var(--rc-text) 70%, transparent)}.iihqkc3{opacity:.35}.iihqkc4{z-index:40;pointer-events:none;box-sizing:border-box;opacity:.9;background-color:var(--rc-bg);border:1px solid var(--rc-border);border-radius:var(--rc-radius-sm);box-shadow:var(--rc-shadow-top-bar);margin:0;position:fixed;top:-10000px;left:-10000px}.iihqkc5{background:var(--rc-accent);z-index:30;pointer-events:none;border-radius:1px;height:2px;position:absolute}.iihqkc6{color:var(--rc-alert-caution)}.iihqkc6[data-highlighted]{color:var(--rc-alert-caution);background-color:color-mix(in srgb, var(--rc-alert-caution) 8%, transparent)}.iihqkc6 svg,.iihqkc6[data-highlighted] svg{color:var(--rc-alert-caution)}
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}._1bfi5uc0{--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}._1bfi5uc1{--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}._1bfi5uc2{--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 ._1bfi5uc0,[data-theme=dark] ._1bfi5uc0,.dark._1bfi5uc0,[data-theme=dark]._1bfi5uc0,.dark ._1bfi5uc1,[data-theme=dark] ._1bfi5uc1,.dark._1bfi5uc1,[data-theme=dark]._1bfi5uc1,.dark ._1bfi5uc2,[data-theme=dark] ._1bfi5uc2,.dark._1bfi5uc2,[data-theme=dark]._1bfi5uc2{--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)}.iihqkc0{display:flex;align-items:center;gap:1px;position:absolute;z-index:30;opacity:0;pointer-events:none;transition:opacity .15s}.iihqkc1{opacity:1;pointer-events:auto}.iihqkc2{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;border:none;background:transparent;color:color-mix(in srgb,var(--rc-text) 35%,transparent);cursor:pointer;padding:0;transition:background-color .15s,color .15s}.iihqkc2:hover{background:color-mix(in srgb,var(--rc-text) 8%,transparent);color:color-mix(in srgb,var(--rc-text) 70%,transparent)}.iihqkc3{opacity:.35}.iihqkc4{position:fixed;top:-10000px;left:-10000px;z-index:40;pointer-events:none;margin:0;box-sizing:border-box;opacity:.9;background-color:var(--rc-bg);border:1px solid var(--rc-border);border-radius:var(--rc-radius-sm);box-shadow:var(--rc-shadow-top-bar)}.iihqkc5{position:absolute;height:2px;background:var(--rc-accent);border-radius:1px;z-index:30;pointer-events:none}.iihqkc6{color:var(--rc-alert-caution)}.iihqkc6[data-highlighted]{color:var(--rc-alert-caution);background-color:color-mix(in srgb,var(--rc-alert-caution) 8%,transparent)}.iihqkc6 svg{color:var(--rc-alert-caution)}.iihqkc6[data-highlighted] svg{color:var(--rc-alert-caution)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haklex/rich-plugin-block-handle",
3
- "version": "0.0.82",
3
+ "version": "0.0.83",
4
4
  "description": "Block handle plugin with add button and context menu",
5
5
  "repository": {
6
6
  "type": "git",
@@ -22,8 +22,8 @@
22
22
  ],
23
23
  "dependencies": {
24
24
  "@lexical/code": "npm:lexical-code-no-prism@0.41.0",
25
- "@haklex/rich-editor-ui": "0.0.82",
26
- "@haklex/rich-style-token": "0.0.82"
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",