@haklex/rich-renderer-image 0.26.6 → 0.28.0

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 (13) hide show
  1. package/dist/ImageEditRenderer.d.ts.map +1 -1
  2. package/dist/{ImageRenderer-ew0e3cUJ.js → ImageRenderer-BUWdit_Y.js} +41 -40
  3. package/dist/atoms.d.ts.map +1 -1
  4. package/dist/image-drag-layout.d.ts +11 -0
  5. package/dist/image-drag-layout.d.ts.map +1 -0
  6. package/dist/index.mjs +192 -10
  7. package/dist/rich-renderer-image.css +1 -1
  8. package/dist/static.mjs +1 -1
  9. package/dist/styles.css.d.ts +1 -0
  10. package/dist/styles.css.d.ts.map +1 -1
  11. package/dist/useImageDragLayout.d.ts +6 -0
  12. package/dist/useImageDragLayout.d.ts.map +1 -0
  13. package/package.json +4 -4
package/dist/ImageEditRenderer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ImageEditRenderer.d.ts","sourceRoot":"","sources":["../src/ImageEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAoCxE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,+BAQ1D"}
1
+ {"version":3,"file":"ImageEditRenderer.d.ts","sourceRoot":"","sources":["../src/ImageEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAqCxE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,+BAQ1D"}
package/dist/{ImageRenderer-ew0e3cUJ.js → ImageRenderer-BUWdit_Y.js} RENAMED
@@ -29,43 +29,44 @@ var semanticClassNames = {
29
29
  resizeHandle: "rr-image-resize-handle"
30
30
  };
31
31
  var root = "_1n94osf0";
32
- var image = "_1n94osf2";
32
+ var imageDragging = "_1n94osf1";
33
+ var image = "_1n94osf3";
33
34
  var imageState = {
34
- loading: "_1n94osf3",
35
- loaded: "_1n94osf4",
36
- error: "_1n94osf5"
35
+ loading: "_1n94osf4",
36
+ loaded: "_1n94osf5",
37
+ error: "_1n94osf6"
37
38
  };
38
- var imageVisible = "_1n94osf6";
39
- var frame = "_1n94osf7";
40
- var frameEditMode = "_1n94osf8";
41
- var frameStatic = "_1n94osf9";
42
- var loader = "_1n94osfb";
43
- var errorBadge = "_1n94osfc";
44
- var caption = "_1n94osfd";
45
- var editTrigger = "_1n94osfl";
46
- var editPlaceholder = "_1n94osfm";
47
- var editToolbar = "_1n94osfn";
48
- var editToolbarVisible = "_1n94osfo";
49
- var editToolbarButton = "_1n94osfp";
50
- var editToolbarButtonDanger = "_1n94osfq";
51
- var editPanel = "_1n94osfr";
52
- var editField = "_1n94osfs";
53
- var editFieldIcon = "_1n94osft";
54
- var editInput = "_1n94osfu";
55
- var replaceUploadArea = "_1n94osfv";
56
- var replacePreview = "_1n94osfw";
57
- var panelHint = "_1n94osfx";
58
- var resizeHandle = "_1n94osfy";
59
- var resizeHandleLeft = "_1n94osfz";
60
- var resizeHandleRight = "_1n94osf10";
61
- var resizeHandleVisible = "_1n94osf11";
62
- var controlPanel = "_1n94osf12";
63
- var sizeSliderWrap = "_1n94osf13";
64
- var sizeSlider = "_1n94osf14";
65
- var sizeSliderTick = "_1n94osf15";
66
- var sizeValue = "_1n94osf16";
67
- var sizeOption = "_1n94osf17";
68
- var editToolbarButtonActive = "_1n94osf18";
39
+ var imageVisible = "_1n94osf7";
40
+ var frame = "_1n94osf8";
41
+ var frameEditMode = "_1n94osf9";
42
+ var frameStatic = "_1n94osfa";
43
+ var loader = "_1n94osfc";
44
+ var errorBadge = "_1n94osfd";
45
+ var caption = "_1n94osfe";
46
+ var editTrigger = "_1n94osfm";
47
+ var editPlaceholder = "_1n94osfn";
48
+ var editToolbar = "_1n94osfo";
49
+ var editToolbarVisible = "_1n94osfp";
50
+ var editToolbarButton = "_1n94osfq";
51
+ var editToolbarButtonDanger = "_1n94osfr";
52
+ var editPanel = "_1n94osfs";
53
+ var editField = "_1n94osft";
54
+ var editFieldIcon = "_1n94osfu";
55
+ var editInput = "_1n94osfv";
56
+ var replaceUploadArea = "_1n94osfw";
57
+ var replacePreview = "_1n94osfx";
58
+ var panelHint = "_1n94osfy";
59
+ var resizeHandle = "_1n94osfz";
60
+ var resizeHandleLeft = "_1n94osf10";
61
+ var resizeHandleRight = "_1n94osf11";
62
+ var resizeHandleVisible = "_1n94osf12";
63
+ var controlPanel = "_1n94osf13";
64
+ var sizeSliderWrap = "_1n94osf14";
65
+ var sizeSlider = "_1n94osf15";
66
+ var sizeSliderTick = "_1n94osf16";
67
+ var sizeValue = "_1n94osf17";
68
+ var sizeOption = "_1n94osf18";
69
+ var editToolbarButtonActive = "_1n94osf19";
69
70
  //#endregion
70
71
  //#region src/ImageRenderer.tsx
71
72
  var frameStateSemanticClass = {
@@ -89,7 +90,7 @@ function ImageRenderer({ src, altText, width, height, caption: caption$1, thumbh
89
90
  backgroundColor: state !== "loaded" && !placeholderUrl ? accent || vars.color.bgTertiary : "transparent",
90
91
  backgroundImage: placeholderUrl && state !== "loaded" ? `url(${placeholderUrl})` : void 0,
91
92
  backgroundSize: "cover",
92
- width: width ? Math.min(width, 1200) : void 0,
93
+ width: displayWidth !== void 0 ? "100%" : width ? Math.min(width, 1200) : void 0,
93
94
  maxWidth: "100%",
94
95
  ...width && height ? { aspectRatio: `${width} / ${height}` } : {}
95
96
  };
@@ -132,17 +133,17 @@ function ImageRenderer({ src, altText, width, height, caption: caption$1, thumbh
132
133
  onError: () => setState("error"),
133
134
  onLoad: () => setState("loaded")
134
135
  }),
135
- state === "loading" && /* @__PURE__ */ jsx("span", { className: `_1n94osfb ${semanticClassNames.loader}` }),
136
+ state === "loading" && /* @__PURE__ */ jsx("span", { className: `_1n94osfc ${semanticClassNames.loader}` }),
136
137
  state === "error" && /* @__PURE__ */ jsx("span", {
137
- className: `_1n94osfc ${semanticClassNames.errorBadge}`,
138
+ className: `_1n94osfd ${semanticClassNames.errorBadge}`,
138
139
  children: "Image failed to load"
139
140
  })
140
141
  ]
141
142
  }), captionText && /* @__PURE__ */ jsx("figcaption", {
142
- className: `_1n94osfd ${semanticClassNames.caption}`,
143
+ className: `_1n94osfe ${semanticClassNames.caption}`,
143
144
  children: captionText
144
145
  })]
145
146
  });
146
147
  }
147
148
  //#endregion
148
- export { semanticClassNames as A, replacePreview as C, resizeHandleRight as D, resizeHandleLeft as E, sizeValue as F, sizeSlider as M, sizeSliderTick as N, resizeHandleVisible as O, sizeSliderWrap as P, panelHint as S, resizeHandle as T, frameEditMode as _, editFieldIcon as a, imageVisible as b, editPlaceholder as c, editToolbarButtonActive as d, editToolbarButtonDanger as f, frame as g, errorBadge as h, editField as i, sizeOption as j, root as k, editToolbar as l, editTrigger as m, caption as n, editInput as o, editToolbarVisible as p, controlPanel as r, editPanel as s, ImageRenderer as t, editToolbarButton as u, image as v, replaceUploadArea as w, loader as x, imageState as y };
149
+ export { root as A, panelHint as C, resizeHandleLeft as D, resizeHandle as E, sizeSliderWrap as F, sizeValue as I, sizeOption as M, sizeSlider as N, resizeHandleRight as O, sizeSliderTick as P, loader as S, replaceUploadArea as T, frameEditMode as _, editFieldIcon as a, imageState as b, editPlaceholder as c, editToolbarButtonActive as d, editToolbarButtonDanger as f, frame as g, errorBadge as h, editField as i, semanticClassNames as j, resizeHandleVisible as k, editToolbar as l, editTrigger as m, caption as n, editInput as o, editToolbarVisible as p, controlPanel as r, editPanel as s, ImageRenderer as t, editToolbarButton as u, image as v, replacePreview as w, imageVisible as x, imageDragging as y };
package/dist/atoms.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"atoms.d.ts","sourceRoot":"","sources":["../src/atoms.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAG7D,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC5D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAC;AAY3C,eAAO,MAAM,OAAO;;CAAW,CAAC;AAChC,eAAO,MAAM,WAAW;;CAAW,CAAC;AACpC,eAAO,MAAM,SAAS;;CAA6B,CAAC;AACpD,eAAO,MAAM,UAAU;;CAA6B,CAAC;AACrD,eAAO,MAAM,WAAW;;CAA6B,CAAC;AACtD,eAAO,MAAM,aAAa;;CAA6B,CAAC;AACxD,eAAO,MAAM,UAAU;;CAA6B,CAAC;AACrD,eAAO,MAAM,gBAAgB;;CAA6B,CAAC;AAC3D,eAAO,MAAM,UAAU;;CAAkC,CAAC;AAG1D,eAAO,MAAM,aAAa;;CAAkC,CAAC;AAC7D,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,eAAe;;CAAc,CAAC;AAC3C,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,cAAc;;CAAc,CAAC;AAC1C,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,kBAAkB,+BAQ9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;CAAc,CAAC;AAGlD,eAAO,MAAM,WAAW;;CAAW,CAAC;AACpC,eAAO,MAAM,eAAe;;CAAW,CAAC;AACxC,eAAO,MAAM,eAAe;;CAAW,CAAC;AAGxC,eAAO,MAAM,eAAe;;CAA8B,CAAC;AAC3D,eAAO,MAAM,cAAc;;CAAW,CAAC;AACvC,eAAO,MAAM,kBAAkB;;CAA4B,CAAC;AAC5D,eAAO,MAAM,eAAe;WACnB,MAAM;YACL,MAAM;;;eADP,MAAM;gBACL,MAAM;;CACD,CAAC;AAChB,eAAO,MAAM,kBAAkB;;CAAc,CAAC;AAC9C,eAAO,MAAM,gBAAgB;;CAA4B,CAAC;AAG1D,eAAO,MAAM,cAAc;;CAEzB,CAAC;AACH,eAAO,MAAM,gBAAgB;;CAE3B,CAAC;AAGH,eAAO,MAAM,kBAAkB,0CAG7B,CAAC;AAEH,eAAO,MAAM,eAAe,0CAAoE,CAAC;AAEjG,eAAO,MAAM,cAAc,qCAgBzB,CAAC"}
1
+ {"version":3,"file":"atoms.d.ts","sourceRoot":"","sources":["../src/atoms.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAG7D,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC5D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAC;AAY3C,eAAO,MAAM,OAAO;;CAAW,CAAC;AAChC,eAAO,MAAM,WAAW;;CAAW,CAAC;AACpC,eAAO,MAAM,SAAS;;CAA6B,CAAC;AACpD,eAAO,MAAM,UAAU;;CAA6B,CAAC;AACrD,eAAO,MAAM,WAAW;;CAA6B,CAAC;AACtD,eAAO,MAAM,aAAa;;CAA6B,CAAC;AACxD,eAAO,MAAM,UAAU;;CAA6B,CAAC;AACrD,eAAO,MAAM,gBAAgB;;CAA6B,CAAC;AAC3D,eAAO,MAAM,UAAU;;CAAkC,CAAC;AAG1D,eAAO,MAAM,aAAa;;CAAkC,CAAC;AAC7D,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,eAAe;;CAAc,CAAC;AAC3C,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,cAAc;;CAAc,CAAC;AAC1C,eAAO,MAAM,YAAY;;CAAc,CAAC;AACxC,eAAO,MAAM,kBAAkB,+BAQ9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;CAAc,CAAC;AAGlD,eAAO,MAAM,WAAW;;CAAW,CAAC;AACpC,eAAO,MAAM,eAAe;;CAAW,CAAC;AACxC,eAAO,MAAM,eAAe;;CAAW,CAAC;AAGxC,eAAO,MAAM,eAAe;;CAA8B,CAAC;AAC3D,eAAO,MAAM,cAAc;;CAAW,CAAC;AACvC,eAAO,MAAM,kBAAkB;;CAA4B,CAAC;AAC5D,eAAO,MAAM,eAAe;WACnB,MAAM;YACL,MAAM;;;eADP,MAAM;gBACL,MAAM;;CACD,CAAC;AAChB,eAAO,MAAM,kBAAkB;;CAAc,CAAC;AAC9C,eAAO,MAAM,gBAAgB;;CAA4B,CAAC;AAG1D,eAAO,MAAM,cAAc;;CAEzB,CAAC;AACH,eAAO,MAAM,gBAAgB;;CAE3B,CAAC;AAGH,eAAO,MAAM,kBAAkB,0CAG7B,CAAC;AAEH,eAAO,MAAM,eAAe,0CAAoE,CAAC;AAEjG,eAAO,MAAM,cAAc,qCAiBzB,CAAC"}
package/dist/image-drag-layout.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { ImageLayout } from '@haklex/rich-editor/nodes';
2
+ import { LexicalEditor } from 'lexical';
3
+ export declare const IMAGE_DRAG_DATA_KEY = "application/x-haklex-image-drag";
4
+ export type ImageDropSide = 'left' | 'right';
5
+ type HorizontalRect = Pick<DOMRect, 'left' | 'width'>;
6
+ export declare function getImageDropSide(rootRect: HorizontalRect, clientX: number): ImageDropSide;
7
+ export declare function getImageDropLayout(side: ImageDropSide): Extract<ImageLayout, 'float-left' | 'float-right'>;
8
+ export declare function isImageDragData(dataTransfer: DataTransfer | null | undefined): boolean;
9
+ export declare function getImageDropTargetBlock(editor: LexicalEditor, rootElement: HTMLElement, event: DragEvent): HTMLElement | null;
10
+ export {};
11
+ //# sourceMappingURL=image-drag-layout.d.ts.map
package/dist/image-drag-layout.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"image-drag-layout.d.ts","sourceRoot":"","sources":["../src/image-drag-layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,mBAAmB,oCAAoC,CAAC;AAErE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAE7C,KAAK,cAAc,GAAG,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;AAEtD,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,CAEzF;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,aAAa,GAClB,OAAO,CAAC,WAAW,EAAE,YAAY,GAAG,aAAa,CAAC,CAEpD;AAED,wBAAgB,eAAe,CAAC,YAAY,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAEtF;AAuCD,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,aAAa,EACrB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,SAAS,GACf,WAAW,GAAG,IAAI,CAsBpB"}
package/dist/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { A as semanticClassNames, D as resizeHandleRight, E as resizeHandleLeft, F as sizeValue, M as sizeSlider, N as sizeSliderTick, O as resizeHandleVisible, P as sizeSliderWrap, T as resizeHandle, _ as frameEditMode, a as editFieldIcon, b as imageVisible, c as editPlaceholder, d as editToolbarButtonActive, f as editToolbarButtonDanger, g as frame, i as editField, j as sizeOption, k as root, l as editToolbar, m as editTrigger, o as editInput, p as editToolbarVisible, r as controlPanel, s as editPanel, t as ImageRenderer, u as editToolbarButton, v as image, w as replaceUploadArea, y as imageState } from "./ImageRenderer-ew0e3cUJ.js";
1
+ import { A as root, D as resizeHandleLeft, E as resizeHandle, F as sizeSliderWrap, I as sizeValue, M as sizeOption, N as sizeSlider, O as resizeHandleRight, P as sizeSliderTick, T as replaceUploadArea, _ as frameEditMode, a as editFieldIcon, b as imageState, c as editPlaceholder, d as editToolbarButtonActive, f as editToolbarButtonDanger, g as frame, i as editField, j as semanticClassNames, k as resizeHandleVisible, l as editToolbar, m as editTrigger, o as editInput, p as editToolbarVisible, r as controlPanel, s as editPanel, t as ImageRenderer, u as editToolbarButton, v as image, x as imageVisible, y as imageDragging } from "./ImageRenderer-BUWdit_Y.js";
2
2
  import { useRendererMode } from "@haklex/rich-editor/static";
3
3
  import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
4
4
  import { Provider, atom, createStore, useAtom, useAtomValue, useSetAtom, useStore } from "jotai";
@@ -6,7 +6,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
6
6
  import { computeImageMeta, decodeThumbHash } from "@haklex/rich-editor/renderers";
7
7
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
8
8
  import { ActionBar, ActionButton, Popover, PopoverPanel, PopoverTrigger, SegmentedControl } from "@haklex/rich-editor-ui";
9
- import { $getNearestNodeFromDOMNode, REDO_COMMAND, UNDO_COMMAND } from "lexical";
9
+ import { $getNearestNodeFromDOMNode, $getNodeByKey, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, REDO_COMMAND, UNDO_COMMAND } from "lexical";
10
10
  import { AlignCenterVertical, AlignEndVertical, AlignStartVertical, ArrowLeftToLine, ArrowRightToLine, Captions, CopyPlus, Download, ExternalLink, ImageIcon, Loader2, Replace, Scaling, Trash2, Type, Upload } from "lucide-react";
11
11
  import { $createImageNode, $isImageNode, sanitizeImageDisplayWidth } from "@haklex/rich-editor/nodes";
12
12
  import { useImageUpload } from "@haklex/rich-editor/plugins";
@@ -56,11 +56,12 @@ var frameStyleAtom = atom((get) => {
56
56
  const loadState = get(loadStateAtom);
57
57
  const width = get(widthAtom);
58
58
  const height = get(heightAtom);
59
+ const displayWidth = get(displayWidthAtom);
59
60
  return {
60
61
  backgroundColor: loadState !== "loaded" && !placeholderUrl ? accent || "#f5f5f5" : "transparent",
61
62
  backgroundImage: placeholderUrl && loadState !== "loaded" ? `url(${placeholderUrl})` : void 0,
62
63
  backgroundSize: "cover",
63
- width: width ? Math.min(width, 1200) : void 0,
64
+ width: displayWidth !== void 0 ? "100%" : width ? Math.min(width, 1200) : void 0,
64
65
  maxWidth: "100%",
65
66
  ...width && height ? { aspectRatio: `${width} / ${height}` } : {}
66
67
  };
@@ -438,12 +439,12 @@ var LAYOUT_OPTIONS = [
438
439
  },
439
440
  {
440
441
  value: "float-left",
441
- label: "Float left, text wraps right",
442
+ label: "Wrap left",
442
443
  Icon: ArrowLeftToLine
443
444
  },
444
445
  {
445
446
  value: "float-right",
446
- label: "Float right, text wraps left",
447
+ label: "Wrap right",
447
448
  Icon: ArrowRightToLine
448
449
  }
449
450
  ];
@@ -633,11 +634,11 @@ function ReplacePanel() {
633
634
  children: "Apply"
634
635
  })] })] }),
635
636
  replaceError && /* @__PURE__ */ jsx("span", {
636
- className: `_1n94osfx ${semanticClassNames.panelHint}`,
637
+ className: `_1n94osfy ${semanticClassNames.panelHint}`,
637
638
  children: replaceError
638
639
  }),
639
640
  replacePreview$1 && /* @__PURE__ */ jsx("div", {
640
- className: `_1n94osfw ${semanticClassNames.replacePreview}`,
641
+ className: `_1n94osfx ${semanticClassNames.replacePreview}`,
641
642
  children: /* @__PURE__ */ jsx("img", {
642
643
  alt: "Replace preview",
643
644
  src: replacePreview$1
@@ -888,6 +889,185 @@ function ResizeHandles() {
888
889
  })] });
889
890
  }
890
891
  //#endregion
892
+ //#region src/image-drag-layout.ts
893
+ var IMAGE_DRAG_DATA_KEY = "application/x-haklex-image-drag";
894
+ function getImageDropSide(rootRect, clientX) {
895
+ return clientX < rootRect.left + rootRect.width / 2 ? "left" : "right";
896
+ }
897
+ function getImageDropLayout(side) {
898
+ return side === "left" ? "float-left" : "float-right";
899
+ }
900
+ function isImageDragData(dataTransfer) {
901
+ return Boolean(dataTransfer?.types.includes(IMAGE_DRAG_DATA_KEY));
902
+ }
903
+ function getBlockElement(editor, target) {
904
+ const rootElement = editor.getRootElement();
905
+ if (!rootElement) return null;
906
+ let current = target;
907
+ while (current && current !== rootElement) {
908
+ if (current.parentElement === rootElement) return current;
909
+ current = current.parentElement;
910
+ }
911
+ return null;
912
+ }
913
+ function getNearestBlockByY(rootElement, clientY) {
914
+ const blocks = [...rootElement.children].filter((child) => child instanceof HTMLElement);
915
+ if (!blocks.length) return null;
916
+ let nearestBlock = null;
917
+ let nearestDistance = Number.POSITIVE_INFINITY;
918
+ for (const block of blocks) {
919
+ const rect = block.getBoundingClientRect();
920
+ if (rect.height <= 0) continue;
921
+ if (clientY >= rect.top && clientY <= rect.bottom) return block;
922
+ const distance = clientY < rect.top ? rect.top - clientY : clientY - rect.bottom;
923
+ if (distance < nearestDistance) {
924
+ nearestDistance = distance;
925
+ nearestBlock = block;
926
+ }
927
+ }
928
+ return nearestBlock;
929
+ }
930
+ function getImageDropTargetBlock(editor, rootElement, event) {
931
+ const rootRect = rootElement.getBoundingClientRect();
932
+ if (rootRect.width <= 0 || rootRect.height <= 0) return null;
933
+ if (event.clientY < rootRect.top || event.clientY > rootRect.bottom) return null;
934
+ const points = [{
935
+ x: event.clientX,
936
+ y: event.clientY
937
+ }];
938
+ const clampedX = Math.min(rootRect.right - 1, Math.max(rootRect.left + 1, event.clientX));
939
+ if (clampedX !== event.clientX) points.unshift({
940
+ x: clampedX,
941
+ y: event.clientY
942
+ });
943
+ for (const point of points) {
944
+ const element = document.elementFromPoint(point.x, point.y);
945
+ if (!(element instanceof HTMLElement)) continue;
946
+ const block = getBlockElement(editor, element);
947
+ if (block) return block;
948
+ }
949
+ if (event.target instanceof HTMLElement) {
950
+ const block = getBlockElement(editor, event.target);
951
+ if (block) return block;
952
+ }
953
+ return getNearestBlockByY(rootElement, event.clientY);
954
+ }
955
+ //#endregion
956
+ //#region src/useImageDragLayout.ts
957
+ var editorDragRegistrations = /* @__PURE__ */ new WeakMap();
958
+ function setDropSide(rootElement, event) {
959
+ const side = getImageDropSide(rootElement.getBoundingClientRect(), event.clientX);
960
+ rootElement.dataset.richImageDropSide = side;
961
+ }
962
+ function clearDropSide(rootElement) {
963
+ delete rootElement.dataset.richImageDropSide;
964
+ }
965
+ function registerImageDragLayout(editor) {
966
+ const existing = editorDragRegistrations.get(editor);
967
+ if (existing) {
968
+ existing.count += 1;
969
+ return () => {
970
+ existing.count -= 1;
971
+ if (existing.count > 0) return;
972
+ existing.unregister();
973
+ editorDragRegistrations.delete(editor);
974
+ };
975
+ }
976
+ const rootElement = editor.getRootElement();
977
+ if (!rootElement) return () => {};
978
+ const clear = () => clearDropSide(rootElement);
979
+ const unregisterDragOver = editor.registerCommand(DRAGOVER_COMMAND, (event) => {
980
+ if (!isImageDragData(event.dataTransfer)) return false;
981
+ event.preventDefault();
982
+ if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
983
+ if (!getImageDropTargetBlock(editor, rootElement, event)) {
984
+ clearDropSide(rootElement);
985
+ return true;
986
+ }
987
+ setDropSide(rootElement, event);
988
+ return true;
989
+ }, COMMAND_PRIORITY_HIGH);
990
+ const unregisterDrop = editor.registerCommand(DROP_COMMAND, (event) => {
991
+ const draggedKey = event.dataTransfer?.getData(IMAGE_DRAG_DATA_KEY);
992
+ if (!draggedKey) return false;
993
+ event.preventDefault();
994
+ clearDropSide(rootElement);
995
+ const block = getImageDropTargetBlock(editor, rootElement, event);
996
+ if (!block) return true;
997
+ const rect = block.getBoundingClientRect();
998
+ const targetKey = editor.getEditorState().read(() => {
999
+ return $getNearestNodeFromDOMNode(block)?.getKey() ?? null;
1000
+ }, { editor });
1001
+ if (!targetKey) return true;
1002
+ const layout = getImageDropLayout(getImageDropSide(rootElement.getBoundingClientRect(), event.clientX));
1003
+ const insertBefore = event.clientY < rect.top + rect.height / 2;
1004
+ editor.update(() => {
1005
+ const draggedNode = $getNodeByKey(draggedKey);
1006
+ if (!$isImageNode(draggedNode)) return;
1007
+ draggedNode.setLayout(layout);
1008
+ if (draggedKey === targetKey) return;
1009
+ draggedNode.remove();
1010
+ const targetNode = $getNodeByKey(targetKey);
1011
+ if (!targetNode) return;
1012
+ if (insertBefore) targetNode.insertBefore(draggedNode);
1013
+ else targetNode.insertAfter(draggedNode);
1014
+ }, { tag: "skip-scroll-into-view" });
1015
+ return true;
1016
+ }, COMMAND_PRIORITY_HIGH);
1017
+ const unregisterDragStart = editor.registerCommand(DRAGSTART_COMMAND, (event) => isImageDragData(event.dataTransfer), COMMAND_PRIORITY_HIGH);
1018
+ window.addEventListener("dragend", clear);
1019
+ window.addEventListener("drop", clear);
1020
+ const registration = {
1021
+ count: 1,
1022
+ unregister: () => {
1023
+ unregisterDragOver();
1024
+ unregisterDrop();
1025
+ unregisterDragStart();
1026
+ window.removeEventListener("dragend", clear);
1027
+ window.removeEventListener("drop", clear);
1028
+ clearDropSide(rootElement);
1029
+ }
1030
+ };
1031
+ editorDragRegistrations.set(editor, registration);
1032
+ return () => {
1033
+ registration.count -= 1;
1034
+ if (registration.count > 0) return;
1035
+ registration.unregister();
1036
+ editorDragRegistrations.delete(editor);
1037
+ };
1038
+ }
1039
+ function useImageDragLayout() {
1040
+ const [editor] = useLexicalComposerContext();
1041
+ const store = useStore();
1042
+ useEffect(() => registerImageDragLayout(editor), [editor]);
1043
+ const handleDragStart = useCallback((event) => {
1044
+ const wrapper = store.get(wrapperRefAtom).current;
1045
+ const blockWrapper = wrapper?.closest(".rich-image-wrapper");
1046
+ if (!wrapper || !event.dataTransfer) {
1047
+ event.preventDefault();
1048
+ return;
1049
+ }
1050
+ const key = editor.getEditorState().read(() => {
1051
+ const node = $getNearestNodeFromDOMNode(wrapper);
1052
+ return $isImageNode(node) ? node.getKey() : null;
1053
+ }, { editor });
1054
+ if (!key) {
1055
+ event.preventDefault();
1056
+ return;
1057
+ }
1058
+ event.dataTransfer.setData(IMAGE_DRAG_DATA_KEY, key);
1059
+ event.dataTransfer.effectAllowed = "move";
1060
+ blockWrapper?.classList.add(imageDragging);
1061
+ }, [editor, store]);
1062
+ return {
1063
+ draggable: true,
1064
+ onDragEnd: useCallback(() => {
1065
+ store.get(wrapperRefAtom).current?.closest(".rich-image-wrapper")?.classList.remove(imageDragging);
1066
+ }, [store]),
1067
+ onDragStart: handleDragStart
1068
+ };
1069
+ }
1070
+ //#endregion
891
1071
  //#region src/ImageEditRenderer.tsx
892
1072
  var frameStateSemanticClass = {
893
1073
  loading: semanticClassNames.frameLoading,
@@ -922,6 +1102,7 @@ function ImageEditContent() {
922
1102
  const setFocusCaptionOnOpen = useSetAtom(focusCaptionOnOpenAtom);
923
1103
  const displayWidth = useAtomValue(displayWidthAtom);
924
1104
  const layout = useAtomValue(layoutAtom);
1105
+ const dragLayoutProps = useImageDragLayout();
925
1106
  const handleCaptionClick = useCallback((e) => {
926
1107
  e.stopPropagation();
927
1108
  const scrollY = window.scrollY;
@@ -946,6 +1127,7 @@ function ImageEditContent() {
946
1127
  className: `${root} ${semanticClassNames.root}`,
947
1128
  "data-layout": layout,
948
1129
  style: figureStyle,
1130
+ ...dragLayoutProps,
949
1131
  children: [/* @__PURE__ */ jsxs("div", {
950
1132
  className: `${frame} ${semanticClassNames.frame} ${frameEditMode} ${imageState[loadState]} ${frameStateSemanticClass[loadState]}`.trim(),
951
1133
  style: frameStyle,
@@ -960,15 +1142,15 @@ function ImageEditContent() {
960
1142
  onError: () => setLoadState("error"),
961
1143
  onLoad: () => setLoadState("loaded")
962
1144
  }),
963
- loadState === "loading" && /* @__PURE__ */ jsx("span", { className: `_1n94osfb ${semanticClassNames.loader}` }),
1145
+ loadState === "loading" && /* @__PURE__ */ jsx("span", { className: `_1n94osfc ${semanticClassNames.loader}` }),
964
1146
  loadState === "error" && /* @__PURE__ */ jsx("span", {
965
- className: `_1n94osfc ${semanticClassNames.errorBadge}`,
1147
+ className: `_1n94osfd ${semanticClassNames.errorBadge}`,
966
1148
  children: "Image failed to load"
967
1149
  }),
968
1150
  /* @__PURE__ */ jsx(ResizeHandles, {})
969
1151
  ]
970
1152
  }), captionText && /* @__PURE__ */ jsx("figcaption", {
971
- className: `_1n94osfd ${semanticClassNames.caption}`,
1153
+ className: `_1n94osfe ${semanticClassNames.caption}`,
972
1154
  onClick: handleCaptionClick,
973
1155
  children: captionText
974
1156
  })]
package/dist/rich-renderer-image.css CHANGED
@@ -1,2 +1,2 @@
1
- :root{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--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-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", 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,[data-theme=dark]{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--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}._7eow1s0{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--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-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", 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}._7eow1s1{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--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-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", 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}._7eow1s2{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#a3a3a3;--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-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", 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 ._7eow1s0,[data-theme=dark] ._7eow1s0,.dark._7eow1s0,[data-theme=dark]._7eow1s0,.dark ._7eow1s1,[data-theme=dark] ._7eow1s1,.dark._7eow1s1,[data-theme=dark]._7eow1s1,.dark ._7eow1s2,[data-theme=dark] ._7eow1s2,.dark._7eow1s2,[data-theme=dark]._7eow1s2{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--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}@keyframes _1n94osf1{0%{opacity:.16;-webkit-mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 150% 0/400% no-repeat;mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 150% 0/400% no-repeat}to{opacity:1;-webkit-mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 0/400% no-repeat;mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 0/400% no-repeat}}@keyframes _1n94osfa{to{transform:rotate(360deg)}}@keyframes _1n94osfi{0%{opacity:0}to{opacity:1}}._1n94osf0{text-align:center;width:var(--rich-image-display-width,auto);max-width:100%;margin:1.25rem auto}._1n94osf0[data-layout=align-left]{text-align:left;margin-left:0;margin-right:auto}._1n94osf0[data-layout=align-right]{text-align:right;margin-left:auto;margin-right:0}._1n94osf0[data-layout=float-left]{float:left;width:var(--rich-image-display-width,50%);margin:.25rem 1.5rem 1rem 0}._1n94osf0[data-layout=float-right]{float:right;width:var(--rich-image-display-width,50%);margin:.25rem 0 1rem 1.5rem}.rich-image-wrapper[data-layout^=float] ._1n94osf0{float:none;width:auto;margin:0}._1n94osf2{opacity:0;width:100%;max-width:100%;height:auto;display:block;border-radius:0!important}._1n94osf6{opacity:1;animation:.42s _1n94osf1}._1n94osf7{border-radius:var(--rc-radius-md);cursor:zoom-in;justify-content:center;align-items:center;min-height:3rem;transition:transform .25s;display:inline-flex;position:relative;overflow:hidden}._1n94osf7:hover{transform:translateY(-1px)}._1n94osf8{cursor:default}._1n94osf8:hover{transform:none}._1n94osf9{cursor:default}._1n94osf9:hover{transform:none}._1n94osfb{border:2px solid color-mix(in srgb, var(--rc-text-secondary) 45%, transparent);border-top-color:color-mix(in srgb, var(--rc-text) 65%, transparent);border-radius:50%;width:1.65rem;height:1.65rem;animation:.75s linear infinite _1n94osfa;position:absolute}._1n94osfc{white-space:nowrap;font-size:var(--rc-font-size-sm);letter-spacing:-.005em;color:#fff;-webkit-backdrop-filter:blur(20px)saturate(180%);background:#ff3b30a6;border-radius:6px;padding:.3rem .7rem;font-weight:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._1n94osfd{color:var(--rc-text-tertiary);font-size:var(--rc-font-size-md);margin-top:.5rem;line-height:1.5}._1n94osfe{margin:var(--rc-space-md) 0;text-align:center}._1n94osff{border-radius:var(--rc-radius-md);transition:background-color .3s;display:inline-block;position:relative;overflow:hidden}._1n94osfg{opacity:0;transition:opacity .3s}._1n94osfh{opacity:1;transition:opacity .3s}._1n94osfj{z-index:9999;cursor:zoom-out;background-color:#000000d9;justify-content:center;align-items:center;animation:.2s _1n94osfi;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}._1n94osfk{object-fit:contain;border-radius:0;max-width:90vw;max-height:90vh}.rich-image{margin:var(--rc-space-md) 0;text-align:center}.rich-image figcaption{font-size:var(--rc-font-size-md);color:var(--rc-text-secondary);margin-top:var(--rc-space-sm);line-height:var(--rc-line-height-tight)}.rich-image-container{border-radius:var(--rc-radius-md);transition:background-color .3s;display:inline-block;position:relative;overflow:hidden}.rich-image-hidden{opacity:0;transition:opacity .3s}.rich-image-visible{opacity:1;transition:opacity .3s}.rich-image-zoom-overlay{z-index:9999;cursor:zoom-out;background-color:#000000d9;justify-content:center;align-items:center;animation:.2s _1n94osfi;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.rich-image-zoom-img{object-fit:contain;border-radius:0;max-width:90vw;max-height:90vh}._1n94osfl{cursor:default;display:block;position:relative}._1n94osfm{border:2px dashed var(--rc-border);border-radius:var(--rc-radius-md);color:var(--rc-text-secondary);font-size:var(--rc-font-size-md);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:2rem;transition:border-color .2s,color .2s,background-color .2s;display:flex}._1n94osfm:hover{border-color:var(--rc-accent);color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-accent) 8%, transparent)}._1n94osfn{z-index:20;border:1px solid var(--rc-border);background:color-mix(in srgb, var(--rc-bg) 96%, transparent);box-shadow:var(--rc-shadow-top-bar);opacity:0;pointer-events:none;border-radius:10px;align-items:center;gap:4px;padding:4px;transition:opacity .15s;display:inline-flex;position:absolute;top:-2.5rem;left:50%;transform:translate(-50%)}._1n94osfo{opacity:1;pointer-events:auto}._1n94osfp{width:30px;height:30px;color:var(--rc-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:inline-flex}._1n94osfp:hover{color:var(--rc-text);background-color:var(--rc-fill-secondary)}._1n94osfq:hover{color:var(--rc-alert-caution);background-color:color-mix(in srgb, var(--rc-alert-caution) 12%, transparent)}._1n94osfr{width:360px;font-size:var(--rc-font-size-base);font-family:var(--rc-font-family);z-index:30;flex-direction:column;gap:8px;padding:12px;display:flex;position:relative}._1n94osfs{background-color:var(--rc-bg-secondary);border-radius:6px;align-items:center;gap:8px;min-width:0;padding:6px 10px;display:flex}._1n94osft{color:var(--rc-text-secondary);flex-shrink:0}._1n94osfu{-webkit-appearance:none;appearance:none;color:inherit;font-size:var(--rc-font-size-sm);background-color:#0000;border:none;outline:none;flex:1;min-width:0;padding:0}._1n94osfu::placeholder{color:var(--rc-text-secondary)}._1n94osfv{border-radius:var(--rc-radius-md);border:1.5px dashed var(--rc-border);min-height:138px;color:var(--rc-text-secondary);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:.45rem;transition:border-color .15s,background-color .15s;display:flex}._1n94osfv:hover{border-color:color-mix(in srgb, var(--rc-accent) 45%, transparent);color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-accent) 7%, transparent)}._1n94osfw{border-radius:var(--rc-radius-md);border:1px solid var(--rc-border);background-color:color-mix(in srgb, var(--rc-text) 2%, transparent);overflow:hidden}._1n94osfw img{object-fit:cover;width:100%;max-height:188px;display:block}._1n94osfx{color:var(--rc-text-secondary);font-size:var(--rc-font-size-xs);align-items:center;gap:.4rem;display:inline-flex}._1n94osfy{cursor:ew-resize;touch-action:none;opacity:0;z-index:10;background:#ffffffeb;border:1px solid #0000002e;border-radius:9999px;width:6px;height:36px;max-height:50%;transition:opacity .15s;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 3px #00000040}._1n94osfz{left:6px}._1n94osf10{right:6px}._1n94osf11{opacity:1}._1n94osf12{font-family:var(--rc-font-family);z-index:30;align-items:center;gap:4px;padding:4px;display:flex}._1n94osf12._1n94osf12{width:-moz-fit-content;width:fit-content}._1n94osf13{align-items:center;width:132px;height:24px;display:flex;position:relative}._1n94osf14{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;width:100%;height:24px;margin:0}._1n94osf14::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--rc-text-secondary) var(--fill), var(--rc-fill) var(--fill));border-radius:9999px;height:3px}._1n94osf14::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--rc-bg);border:1px solid var(--rc-border);cursor:ew-resize;border-radius:50%;width:12px;height:12px;margin-top:-4.5px;box-shadow:0 1px 3px #0003}._1n94osf14::-moz-range-track{background:linear-gradient(to right, var(--rc-text-secondary) var(--fill), var(--rc-fill) var(--fill));border-radius:9999px;height:3px}._1n94osf14::-moz-range-thumb{-webkit-appearance:none;appearance:none;background-color:var(--rc-bg);border:1px solid var(--rc-border);cursor:ew-resize;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 3px #0003}._1n94osf15{background-color:var(--rc-bg);pointer-events:none;border-radius:50%;width:3px;height:3px;position:absolute;top:50%;transform:translate(-50%,-50%)}._1n94osf16{text-align:right;min-width:34px;font-size:var(--rc-font-size-xs);font-variant-numeric:tabular-nums;color:var(--rc-text-secondary)}._1n94osf17{height:26px;color:var(--rc-text-secondary);font-size:var(--rc-font-size-xs);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0 8px;font-weight:500;transition:background-color .15s,color .15s;display:inline-flex}._1n94osf17:hover,._1n94osf18{color:var(--rc-text);background-color:var(--rc-fill-secondary)}@media (max-width:640px){._1n94osf0[data-layout=float-left],._1n94osf0[data-layout=float-right]{float:none;width:auto;margin:1.25rem auto}}
1
+ :root{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--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-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", 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,[data-theme=dark]{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--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}._7eow1s0{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--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-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", 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}._7eow1s1{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--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-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", 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}._7eow1s2{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#a3a3a3;--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-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", 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 ._7eow1s0,[data-theme=dark] ._7eow1s0,.dark._7eow1s0,[data-theme=dark]._7eow1s0,.dark ._7eow1s1,[data-theme=dark] ._7eow1s1,.dark._7eow1s1,[data-theme=dark]._7eow1s1,.dark ._7eow1s2,[data-theme=dark] ._7eow1s2,.dark._7eow1s2,[data-theme=dark]._7eow1s2{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--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}@keyframes _1n94osf2{0%{opacity:.16;-webkit-mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 150% 0/400% no-repeat;mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 150% 0/400% no-repeat}to{opacity:1;-webkit-mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 0/400% no-repeat;mask:linear-gradient(90deg,#000 25%,#000000e6 50%,#0000) 0/400% no-repeat}}@keyframes _1n94osfb{to{transform:rotate(360deg)}}@keyframes _1n94osfj{0%{opacity:0}to{opacity:1}}._1n94osf0{text-align:center;width:var(--rich-image-display-width,auto);max-width:100%;margin:1.25rem auto}._1n94osf0[data-layout=align-left]{text-align:left;margin-left:0;margin-right:auto}._1n94osf0[data-layout=align-right]{text-align:right;margin-left:auto;margin-right:0}._1n94osf0[data-layout=float-left]{float:left;width:var(--rich-image-display-width,42%);margin:.125rem 1.25rem .875rem 0}._1n94osf0[data-layout=float-right]{float:right;width:var(--rich-image-display-width,42%);margin:.125rem 0 .875rem 1.25rem}.rich-image-wrapper[data-layout^=float] ._1n94osf0{float:none;width:auto;margin:0}._1n94osf1{opacity:.4}.rich-editor__content[data-rich-image-drop-side]{cursor:move}.rich-editor__content[data-rich-image-drop-side=left]{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--rc-accent) 70%, transparent)}.rich-editor__content[data-rich-image-drop-side=right]{box-shadow:inset -3px 0 0 color-mix(in srgb, var(--rc-accent) 70%, transparent)}._1n94osf3{opacity:0;width:100%;max-width:100%;height:auto;display:block;border-radius:0!important}._1n94osf7{opacity:1;animation:.42s _1n94osf2}._1n94osf8{border-radius:var(--rc-radius-md);cursor:zoom-in;justify-content:center;align-items:center;min-height:3rem;transition:transform .25s;display:inline-flex;position:relative;overflow:hidden}._1n94osf8:hover{transform:translateY(-1px)}._1n94osf9{cursor:default}._1n94osf9:hover{transform:none}._1n94osfa{cursor:default}._1n94osfa:hover{transform:none}._1n94osfc{border:2px solid color-mix(in srgb, var(--rc-text-secondary) 45%, transparent);border-top-color:color-mix(in srgb, var(--rc-text) 65%, transparent);border-radius:50%;width:1.65rem;height:1.65rem;animation:.75s linear infinite _1n94osfb;position:absolute}._1n94osfd{white-space:nowrap;font-size:var(--rc-font-size-sm);letter-spacing:-.005em;color:#fff;-webkit-backdrop-filter:blur(20px)saturate(180%);background:#ff3b30a6;border-radius:6px;padding:.3rem .7rem;font-weight:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._1n94osfe{color:var(--rc-text-tertiary);font-size:var(--rc-font-size-md);margin-top:.5rem;line-height:1.5}._1n94osff{margin:var(--rc-space-md) 0;text-align:center}._1n94osfg{border-radius:var(--rc-radius-md);transition:background-color .3s;display:inline-block;position:relative;overflow:hidden}._1n94osfh{opacity:0;transition:opacity .3s}._1n94osfi{opacity:1;transition:opacity .3s}._1n94osfk{z-index:9999;cursor:zoom-out;background-color:#000000d9;justify-content:center;align-items:center;animation:.2s _1n94osfj;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}._1n94osfl{object-fit:contain;border-radius:0;max-width:90vw;max-height:90vh}.rich-image{margin:var(--rc-space-md) 0;text-align:center}.rich-image figcaption{font-size:var(--rc-font-size-md);color:var(--rc-text-secondary);margin-top:var(--rc-space-sm);line-height:var(--rc-line-height-tight)}.rich-image-container{border-radius:var(--rc-radius-md);transition:background-color .3s;display:inline-block;position:relative;overflow:hidden}.rich-image-hidden{opacity:0;transition:opacity .3s}.rich-image-visible{opacity:1;transition:opacity .3s}.rich-image-zoom-overlay{z-index:9999;cursor:zoom-out;background-color:#000000d9;justify-content:center;align-items:center;animation:.2s _1n94osfj;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.rich-image-zoom-img{object-fit:contain;border-radius:0;max-width:90vw;max-height:90vh}._1n94osfm{cursor:default;display:block;position:relative}._1n94osfn{border:2px dashed var(--rc-border);border-radius:var(--rc-radius-md);color:var(--rc-text-secondary);font-size:var(--rc-font-size-md);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:2rem;transition:border-color .2s,color .2s,background-color .2s;display:flex}._1n94osfn:hover{border-color:var(--rc-accent);color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-accent) 8%, transparent)}._1n94osfo{z-index:20;border:1px solid var(--rc-border);background:color-mix(in srgb, var(--rc-bg) 96%, transparent);box-shadow:var(--rc-shadow-top-bar);opacity:0;pointer-events:none;border-radius:10px;align-items:center;gap:4px;padding:4px;transition:opacity .15s;display:inline-flex;position:absolute;top:-2.5rem;left:50%;transform:translate(-50%)}._1n94osfp{opacity:1;pointer-events:auto}._1n94osfq{width:30px;height:30px;color:var(--rc-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:inline-flex}._1n94osfq:hover{color:var(--rc-text);background-color:var(--rc-fill-secondary)}._1n94osfr:hover{color:var(--rc-alert-caution);background-color:color-mix(in srgb, var(--rc-alert-caution) 12%, transparent)}._1n94osfs{width:360px;font-size:var(--rc-font-size-base);font-family:var(--rc-font-family);z-index:30;flex-direction:column;gap:8px;padding:12px;display:flex;position:relative}._1n94osft{background-color:var(--rc-bg-secondary);border-radius:6px;align-items:center;gap:8px;min-width:0;padding:6px 10px;display:flex}._1n94osfu{color:var(--rc-text-secondary);flex-shrink:0}._1n94osfv{-webkit-appearance:none;appearance:none;color:inherit;font-size:var(--rc-font-size-sm);background-color:#0000;border:none;outline:none;flex:1;min-width:0;padding:0}._1n94osfv::placeholder{color:var(--rc-text-secondary)}._1n94osfw{border-radius:var(--rc-radius-md);border:1.5px dashed var(--rc-border);min-height:138px;color:var(--rc-text-secondary);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:.45rem;transition:border-color .15s,background-color .15s;display:flex}._1n94osfw:hover{border-color:color-mix(in srgb, var(--rc-accent) 45%, transparent);color:var(--rc-text);background-color:color-mix(in srgb, var(--rc-accent) 7%, transparent)}._1n94osfx{border-radius:var(--rc-radius-md);border:1px solid var(--rc-border);background-color:color-mix(in srgb, var(--rc-text) 2%, transparent);overflow:hidden}._1n94osfx img{object-fit:cover;width:100%;max-height:188px;display:block}._1n94osfy{color:var(--rc-text-secondary);font-size:var(--rc-font-size-xs);align-items:center;gap:.4rem;display:inline-flex}._1n94osfz{cursor:ew-resize;touch-action:none;opacity:0;z-index:10;background:#ffffffeb;border:1px solid #0000002e;border-radius:9999px;width:6px;height:36px;max-height:50%;transition:opacity .15s;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 3px #00000040}._1n94osf10{left:6px}._1n94osf11{right:6px}._1n94osf12{opacity:1}._1n94osf13{font-family:var(--rc-font-family);z-index:30;align-items:center;gap:4px;padding:4px;display:flex}._1n94osf13._1n94osf13{width:-moz-fit-content;width:fit-content}._1n94osf14{align-items:center;width:132px;height:24px;display:flex;position:relative}._1n94osf15{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;width:100%;height:24px;margin:0}._1n94osf15::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--rc-text-secondary) var(--fill), var(--rc-fill) var(--fill));border-radius:9999px;height:3px}._1n94osf15::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--rc-bg);border:1px solid var(--rc-border);cursor:ew-resize;border-radius:50%;width:12px;height:12px;margin-top:-4.5px;box-shadow:0 1px 3px #0003}._1n94osf15::-moz-range-track{background:linear-gradient(to right, var(--rc-text-secondary) var(--fill), var(--rc-fill) var(--fill));border-radius:9999px;height:3px}._1n94osf15::-moz-range-thumb{-webkit-appearance:none;appearance:none;background-color:var(--rc-bg);border:1px solid var(--rc-border);cursor:ew-resize;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 3px #0003}._1n94osf16{background-color:var(--rc-bg);pointer-events:none;border-radius:50%;width:3px;height:3px;position:absolute;top:50%;transform:translate(-50%,-50%)}._1n94osf17{text-align:right;min-width:34px;font-size:var(--rc-font-size-xs);font-variant-numeric:tabular-nums;color:var(--rc-text-secondary)}._1n94osf18{height:26px;color:var(--rc-text-secondary);font-size:var(--rc-font-size-xs);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0 8px;font-weight:500;transition:background-color .15s,color .15s;display:inline-flex}._1n94osf18:hover,._1n94osf19{color:var(--rc-text);background-color:var(--rc-fill-secondary)}@media (max-width:640px){._1n94osf0[data-layout=float-left],._1n94osf0[data-layout=float-right]{float:none;width:auto;margin:1.25rem auto}}
2
2
  /*$vite$:1*/
package/dist/static.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import { t as ImageRenderer } from "./ImageRenderer-ew0e3cUJ.js";
1
+ import { t as ImageRenderer } from "./ImageRenderer-BUWdit_Y.js";
2
2
  export { ImageRenderer };
package/dist/styles.css.d.ts CHANGED
@@ -24,6 +24,7 @@ export declare const semanticClassNames: {
24
24
  readonly resizeHandle: "rr-image-resize-handle";
25
25
  };
26
26
  export declare const root: string;
27
+ export declare const imageDragging: string;
27
28
  export declare const image: string;
28
29
  export declare const imageState: Record<"error" | "loaded" | "loading", string>;
29
30
  export declare const imageVisible: string;
package/dist/styles.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;CAwBrB,CAAC;AAEX,eAAO,MAAM,IAAI,QAsCf,CAAC;AAsBH,eAAO,MAAM,KAAK,QAOhB,CAAC;AAEH,eAAO,MAAM,UAAU,gDAIrB,CAAC;AAEH,eAAO,MAAM,YAAY,QAGvB,CAAC;AAEH,eAAO,MAAM,KAAK,QAehB,CAAC;AAEH,eAAO,MAAM,aAAa,QAOxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAOtB,CAAC;AAIH,eAAO,MAAM,MAAM,QAQjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAerB,CAAC;AAEH,eAAO,MAAM,OAAO,QAKlB,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;;;;CAO5B,CAAC;AAgCX,eAAO,MAAM,WAAW,QAA2B,CAAC;AACpD,eAAO,MAAM,gBAAgB,QAAgC,CAAC;AAC9D,eAAO,MAAM,aAAa,QAA6B,CAAC;AACxD,eAAO,MAAM,cAAc,QAA8B,CAAC;AA0B1D,eAAO,MAAM,kBAAkB,QAAkC,CAAC;AAClE,eAAO,MAAM,gBAAgB,QAAgC,CAAC;AAU9D,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,eAAe,QAoB1B,CAAC;AAEH,eAAO,MAAM,WAAW,QAiBtB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAG7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAkB5B,CAAC;AAEH,eAAO,MAAM,uBAAuB,QAOlC,CAAC;AAEH,eAAO,MAAM,SAAS,QAUpB,CAAC;AAEH,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,SAAS,QAepB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAmB5B,CAAC;AAEH,eAAO,MAAM,cAAc,QAKzB,CAAC;AASH,eAAO,MAAM,SAAS,QAMpB,CAAC;AAEH,eAAO,MAAM,YAAY,QAgBvB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAAqB,CAAC;AACnD,eAAO,MAAM,iBAAiB,QAAsB,CAAC;AAErD,eAAO,MAAM,mBAAmB,QAE9B,CAAC;AAEH,eAAO,MAAM,YAAY,QAOvB,CAAC;AAQH,eAAO,MAAM,cAAc,QAMzB,CAAC;AAaH,eAAO,MAAM,UAAU,QAwBrB,CAAC;AAEH,eAAO,MAAM,cAAc,QASzB,CAAC;AAEH,eAAO,MAAM,SAAS,QAMpB,CAAC;AAEH,eAAO,MAAM,UAAU,QAoBrB,CAAC;AAEH,eAAO,MAAM,uBAAuB,QAGlC,CAAC"}
1
+ {"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;CAwBrB,CAAC;AAIX,eAAO,MAAM,IAAI,QAsCf,CAAC;AAWH,eAAO,MAAM,aAAa,QAExB,CAAC;AAyBH,eAAO,MAAM,KAAK,QAOhB,CAAC;AAEH,eAAO,MAAM,UAAU,gDAIrB,CAAC;AAEH,eAAO,MAAM,YAAY,QAGvB,CAAC;AAEH,eAAO,MAAM,KAAK,QAehB,CAAC;AAEH,eAAO,MAAM,aAAa,QAOxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAOtB,CAAC;AAIH,eAAO,MAAM,MAAM,QAQjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAerB,CAAC;AAEH,eAAO,MAAM,OAAO,QAKlB,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;;;;CAO5B,CAAC;AAgCX,eAAO,MAAM,WAAW,QAA2B,CAAC;AACpD,eAAO,MAAM,gBAAgB,QAAgC,CAAC;AAC9D,eAAO,MAAM,aAAa,QAA6B,CAAC;AACxD,eAAO,MAAM,cAAc,QAA8B,CAAC;AA0B1D,eAAO,MAAM,kBAAkB,QAAkC,CAAC;AAClE,eAAO,MAAM,gBAAgB,QAAgC,CAAC;AAU9D,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,eAAe,QAoB1B,CAAC;AAEH,eAAO,MAAM,WAAW,QAiBtB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAG7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAkB5B,CAAC;AAEH,eAAO,MAAM,uBAAuB,QAOlC,CAAC;AAEH,eAAO,MAAM,SAAS,QAUpB,CAAC;AAEH,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,SAAS,QAepB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAmB5B,CAAC;AAEH,eAAO,MAAM,cAAc,QAKzB,CAAC;AASH,eAAO,MAAM,SAAS,QAMpB,CAAC;AAEH,eAAO,MAAM,YAAY,QAgBvB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAAqB,CAAC;AACnD,eAAO,MAAM,iBAAiB,QAAsB,CAAC;AAErD,eAAO,MAAM,mBAAmB,QAE9B,CAAC;AAEH,eAAO,MAAM,YAAY,QAOvB,CAAC;AAQH,eAAO,MAAM,cAAc,QAMzB,CAAC;AAaH,eAAO,MAAM,UAAU,QAwBrB,CAAC;AAEH,eAAO,MAAM,cAAc,QASzB,CAAC;AAEH,eAAO,MAAM,SAAS,QAMpB,CAAC;AAEH,eAAO,MAAM,UAAU,QAoBrB,CAAC;AAEH,eAAO,MAAM,uBAAuB,QAGlC,CAAC"}
package/dist/useImageDragLayout.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export declare function useImageDragLayout(): {
2
+ readonly draggable: true;
3
+ readonly onDragEnd: () => void;
4
+ readonly onDragStart: (event: React.DragEvent<HTMLElement>) => void;
5
+ };
6
+ //# sourceMappingURL=useImageDragLayout.d.ts.map
package/dist/useImageDragLayout.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useImageDragLayout.d.ts","sourceRoot":"","sources":["../src/useImageDragLayout.ts"],"names":[],"mappings":"AAgKA,wBAAgB,kBAAkB;;;kCAOtB,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;EAqCvC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haklex/rich-renderer-image",
3
- "version": "0.26.6",
3
+ "version": "0.28.0",
4
4
  "description": "Image renderer with blurhash",
5
5
  "repository": {
6
6
  "type": "git",
@@ -45,9 +45,9 @@
45
45
  "lucide-react": "^1.0.0",
46
46
  "react": ">=19",
47
47
  "react-dom": ">=19",
48
- "@haklex/rich-editor-ui": "^0.26.6",
49
- "@haklex/rich-editor": "^0.26.6",
50
- "@haklex/rich-style-token": "^0.26.6"
48
+ "@haklex/rich-style-token": "^0.28.0",
49
+ "@haklex/rich-editor": "^0.28.0",
50
+ "@haklex/rich-editor-ui": "^0.28.0"
51
51
  },
52
52
  "publishConfig": {
53
53
  "access": "public"