@haklex/rich-renderer-image 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2024 Innei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+Additional Terms and Conditions
+
+----------------
+
+Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.

package/README.md

@@ -0,0 +1,48 @@
+# @haklex/rich-renderer-image
+
+图片渲染器，支持 Thumbhash 模糊占位和灯箱。
+
+## 安装
+
+```bash
+pnpm add @haklex/rich-renderer-image @haklex/rich-editor
+```
+
+## 导出
+
+```ts
+export { ImageRenderer } from './ImageRenderer'
+export { ImageEditRenderer } from './ImageEditRenderer'
+```
+
+## 功能
+
+- Thumbhash 模糊占位
+- 图片灯箱（react-photo-view）
+- 图片说明
+- 加载状态
+
+## 使用
+
+```tsx
+import { ImageRenderer } from '@haklex/rich-renderer-image'
+import type { RendererConfig } from '@haklex/rich-editor'
+
+const config: RendererConfig = {
+  Image: ImageRenderer,
+}
+```
+
+## 依赖
+
+```json
+{
+  "@haklex/rich-editor": "workspace:*",
+  "react-photo-view": "^1.2.0",
+  "thumbhash": "^0.1.0"
+}
+```
+
+## License
+
+MIT

package/dist/ImageEditRenderer.d.ts

@@ -0,0 +1,3 @@
+import { ImageRendererProps } from '@haklex/rich-editor';
+export declare function ImageEditRenderer(props: ImageRendererProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImageEditRenderer.d.ts.map

package/dist/ImageEditRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditRenderer.d.ts","sourceRoot":"","sources":["../src/ImageEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,qBAAqB,CAAA;AAqB5B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,2CAQ1D"}

package/dist/ImageRenderer.d.ts

@@ -0,0 +1,4 @@
+import { ImageRendererProps } from '@haklex/rich-editor';
+import { ComponentType } from 'react';
+export declare const ImageRenderer: ComponentType<ImageRendererProps>;
+//# sourceMappingURL=ImageRenderer.d.ts.map

package/dist/ImageRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../src/ImageRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,4CAA4C,CAAA;AACnD,OAAO,cAAc,CAAA;AAErB,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,OAAO,CAAA;AAezD,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,kBAAkB,CA4E3D,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { ImageEditRenderer } from './ImageEditRenderer';
+export { ImageRenderer } from './ImageRenderer';
+export { ImageRenderer as default } from './ImageRenderer';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.mjs

@@ -0,0 +1,335 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { decodeThumbHash, useRendererMode } from "@haklex/rich-editor";
+import { Popover, PopoverTrigger, PopoverPanel } from "@haklex/rich-editor-ui";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getNearestNodeFromDOMNode } from "lexical";
+import { ImageIcon, Type, ExternalLink, Trash2 } from "lucide-react";
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import { PhotoProvider, PhotoView } from "react-photo-view";
+function getCaptionText$1(altText, caption) {
+  if (caption) return caption;
+  if (!altText) return void 0;
+  if (altText.startsWith("!") || altText.startsWith("¡")) {
+    return altText.slice(1);
+  }
+  return void 0;
+}
+const ImageRenderer = ({
+  src,
+  altText,
+  width,
+  height,
+  caption,
+  thumbhash,
+  accent
+}) => {
+  const [state, setState] = useState("loading");
+  const captionText = useMemo(
+    () => getCaptionText$1(altText, caption),
+    [altText, caption]
+  );
+  const placeholderUrl = useMemo(
+    () => thumbhash ? decodeThumbHash(thumbhash) : void 0,
+    [thumbhash]
+  );
+  if (!src) return null;
+  const frameStyle = {
+    backgroundColor: !placeholderUrl ? accent || "#f5f5f5" : void 0,
+    backgroundImage: placeholderUrl && state !== "loaded" ? `url(${placeholderUrl})` : void 0,
+    backgroundSize: "cover",
+    width: width ? Math.min(width, 1200) : void 0,
+    maxWidth: "100%",
+    ...width && height ? { aspectRatio: `${width} / ${height}` } : {}
+  };
+  return /* @__PURE__ */ jsxs("figure", { className: "rr-image-root", children: [
+    /* @__PURE__ */ jsx(PhotoProvider, { photoClosable: true, children: /* @__PURE__ */ jsx(PhotoView, { src, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `rr-image-frame rr-image-${state}`,
+        style: frameStyle,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": `Open image: ${altText || "image"}`,
+        onKeyDown: (e) => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          e.preventDefault();
+          e.currentTarget.click();
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: altText,
+              width,
+              height,
+              loading: "lazy",
+              className: "rr-image-img",
+              onLoad: () => setState("loaded"),
+              onError: () => setState("error")
+            }
+          ),
+          state === "loading" && /* @__PURE__ */ jsx("span", { className: "rr-image-loader" }),
+          state === "error" && /* @__PURE__ */ jsx("span", { className: "rr-image-error", children: "Image failed to load" })
+        ]
+      }
+    ) }) }),
+    captionText && /* @__PURE__ */ jsx("figcaption", { className: "rr-image-caption", children: captionText })
+  ] });
+};
+function getCaptionText(altText, caption) {
+  if (caption) return caption;
+  if (!altText) return void 0;
+  if (altText.startsWith("!") || altText.startsWith("¡")) {
+    return altText.slice(1);
+  }
+  return void 0;
+}
+function ImageEditRenderer(props) {
+  const mode = useRendererMode();
+  if (mode !== "editor") {
+    return /* @__PURE__ */ jsx(ImageRenderer, { ...props });
+  }
+  return /* @__PURE__ */ jsx(ImageEditRendererInner, { ...props });
+}
+function ImageEditRendererInner({
+  src,
+  altText,
+  width,
+  height,
+  caption,
+  thumbhash,
+  accent
+}) {
+  const [editor] = useLexicalComposerContext();
+  const editable = editor.isEditable();
+  const wrapperRef = useRef(null);
+  const srcInputRef = useRef(null);
+  const [open, setOpen] = useState(!src);
+  const [editSrc, setEditSrc] = useState(src);
+  const [editAltText, setEditAltText] = useState(altText);
+  const [editCaption, setEditCaption] = useState(caption || "");
+  const [state, setState] = useState("loading");
+  useEffect(() => {
+    setEditSrc(src);
+    setEditAltText(altText);
+    setEditCaption(caption || "");
+  }, [src, altText, caption]);
+  useEffect(() => {
+    if (!src) setOpen(true);
+  }, [src]);
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => srcInputRef.current?.focus());
+    }
+  }, [open]);
+  const placeholderUrl = useMemo(
+    () => thumbhash ? decodeThumbHash(thumbhash) : void 0,
+    [thumbhash]
+  );
+  const captionText = useMemo(
+    () => getCaptionText(altText, caption),
+    [altText, caption]
+  );
+  const commitChanges = useCallback(() => {
+    const trimmedSrc = editSrc.trim();
+    if (!trimmedSrc) return;
+    if (/^(?:javascript\s*:|vbscript\s*:|data\s*:(?!image\/))/i.test(trimmedSrc))
+      return;
+    if (!wrapperRef.current) return;
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(wrapperRef.current);
+      if (!node) return;
+      const writable = node.getWritable();
+      writable.__src = trimmedSrc;
+      writable.__altText = editAltText.trim();
+      writable.__caption = editCaption.trim() || void 0;
+    });
+    setOpen(false);
+  }, [editor, editSrc, editAltText, editCaption]);
+  const handleDelete = useCallback(() => {
+    if (!wrapperRef.current) return;
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(wrapperRef.current);
+      if (node) node.remove();
+    });
+    setOpen(false);
+  }, [editor]);
+  const handleOpen = useCallback(() => {
+    if (src) window.open(src, "_blank", "noopener,noreferrer");
+  }, [src]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitChanges();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setEditSrc(src);
+        setEditAltText(altText);
+        setEditCaption(caption || "");
+        setOpen(false);
+      }
+    },
+    [commitChanges, src, altText, caption]
+  );
+  if (!editable) {
+    return /* @__PURE__ */ jsx(
+      ImageRenderer,
+      {
+        src,
+        altText,
+        width,
+        height,
+        caption,
+        thumbhash,
+        accent
+      }
+    );
+  }
+  const frameStyle = {
+    backgroundColor: !placeholderUrl ? accent || "#f5f5f5" : void 0,
+    backgroundImage: placeholderUrl && state !== "loaded" ? `url(${placeholderUrl})` : void 0,
+    backgroundSize: "cover",
+    width: width ? Math.min(width, 1200) : void 0,
+    maxWidth: "100%",
+    ...width && height ? { aspectRatio: `${width} / ${height}` } : {}
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+          setEditSrc(src);
+          setEditAltText(altText);
+          setEditCaption(caption || "");
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          PopoverTrigger,
+          {
+            render: /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: "rr-image-edit-trigger" }),
+            children: src ? /* @__PURE__ */ jsxs("figure", { className: "rr-image-root", children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `rr-image-frame rr-image-${state}`,
+                  style: frameStyle,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src,
+                        alt: altText,
+                        width,
+                        height,
+                        loading: "lazy",
+                        className: "rr-image-img",
+                        onLoad: () => setState("loaded"),
+                        onError: () => setState("error")
+                      }
+                    ),
+                    state === "loading" && /* @__PURE__ */ jsx("span", { className: "rr-image-loader" }),
+                    state === "error" && /* @__PURE__ */ jsx("span", { className: "rr-image-error", children: "Image failed to load" })
+                  ]
+                }
+              ),
+              captionText && /* @__PURE__ */ jsx("figcaption", { className: "rr-image-caption", children: captionText })
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "rr-image-edit-placeholder", children: [
+              /* @__PURE__ */ jsx(ImageIcon, { size: 24 }),
+              /* @__PURE__ */ jsx("span", { children: "Click to add image" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          PopoverPanel,
+          {
+            side: "bottom",
+            sideOffset: 8,
+            className: "rr-image-edit-panel",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "rr-image-edit-field", children: [
+                /* @__PURE__ */ jsx(ImageIcon, { className: "rr-image-edit-field-icon", size: 14 }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: srcInputRef,
+                    className: "rr-image-edit-input",
+                    type: "url",
+                    value: editSrc,
+                    onChange: (e) => setEditSrc(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    placeholder: "Image URL"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "rr-image-edit-field", children: [
+                /* @__PURE__ */ jsx(Type, { className: "rr-image-edit-field-icon", size: 14 }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: "rr-image-edit-input",
+                    type: "text",
+                    value: editAltText,
+                    onChange: (e) => setEditAltText(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    placeholder: "Alt text"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "rr-image-edit-field", children: [
+                /* @__PURE__ */ jsx(Type, { className: "rr-image-edit-field-icon", size: 14 }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: "rr-image-edit-input",
+                    type: "text",
+                    value: editCaption,
+                    onChange: (e) => setEditCaption(e.target.value),
+                    onBlur: commitChanges,
+                    onKeyDown: handleKeyDown,
+                    placeholder: "Caption (optional)"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "rr-image-edit-actions", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: "rr-image-edit-action-btn",
+                    type: "button",
+                    onClick: handleOpen,
+                    children: [
+                      /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
+                      "Open"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: "rr-image-edit-action-btn rr-image-edit-action-btn--end",
+                    type: "button",
+                    onClick: handleDelete,
+                    children: [
+                      /* @__PURE__ */ jsx(Trash2, { size: 14 }),
+                      "Remove"
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ImageEditRenderer,
+  ImageRenderer,
+  ImageRenderer as default
+};

package/dist/rich-renderer-image.css

@@ -0,0 +1,211 @@
+@keyframes _1n94osf0 {
+  0% {
+    mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 150% 0 / 400% no-repeat;
+    opacity: 0.16;
+  }
+  100% {
+    mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 0 / 400% no-repeat;
+    opacity: 1;
+  }
+}
+@keyframes _1n94osf1 {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes _1n94osf2 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.rr-image-root {
+  margin: 1.25rem 0;
+  text-align: center;
+}
+.rr-image-frame {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--rc-radius-md);
+  cursor: zoom-in;
+  min-height: 3rem;
+  transition: transform 0.25s ease;
+}
+.rr-image-frame:hover {
+  transform: translateY(-1px);
+}
+.rr-image-img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  opacity: 0;
+  transition: opacity 280ms ease;
+  border-radius: 0px !important;
+}
+.rr-image-loaded .rr-image-img {
+  opacity: 1;
+  animation: _1n94osf0 420ms ease;
+}
+.rr-image-error .rr-image-img {
+  display: none;
+}
+.rr-image-loader {
+  position: absolute;
+  width: 1.65rem;
+  height: 1.65rem;
+  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%;
+  animation: _1n94osf1 0.75s linear infinite;
+}
+.rr-image-error {
+  font-size: 0.8rem;
+  color: var(--rc-alert-caution);
+  background: color-mix(in srgb, var(--rc-bg) 86%, transparent);
+  border-radius: 999px;
+  padding: 0.15rem 0.6rem;
+}
+.rr-image-caption {
+  margin-top: 0.5rem;
+  color: var(--rc-text-secondary);
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+.rich-image {
+  margin: var(--rc-space-md) 0;
+  text-align: center;
+}
+.rich-image figcaption {
+  font-size: var(--rc-font-size-small);
+  color: var(--rc-text-secondary);
+  margin-top: var(--rc-space-sm);
+  line-height: var(--rc-line-height-tight);
+}
+.rich-image-container {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  border-radius: var(--rc-radius-md);
+  transition: background-color 0.3s ease;
+}
+.rich-image-hidden {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.rich-image-visible {
+  opacity: 1;
+  transition: opacity 0.3s ease;
+}
+.rich-image-zoom-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.85);
+  cursor: zoom-out;
+  animation: _1n94osf2 0.2s ease;
+}
+.rich-image-zoom-img {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 0;
+}
+.rr-image-edit-trigger {
+  display: block;
+  cursor: pointer;
+}
+.rr-image-edit-trigger .rr-image-frame {
+  cursor: pointer;
+}
+.rr-image-edit-trigger .rr-image-frame:hover {
+  transform: none;
+}
+.rr-image-edit-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 2rem;
+  border: 2px dashed var(--rc-border);
+  border-radius: var(--rc-radius-md);
+  color: var(--rc-text-secondary);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s;
+}
+.rr-image-edit-placeholder:hover {
+  border-color: var(--rc-accent);
+  color: var(--rc-text);
+}
+.rr-image-edit-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 340px;
+  padding: 12px;
+  font-size: 13px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+.rr-image-edit-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background-color: var(--rc-bg-secondary);
+  border-radius: 6px;
+  min-width: 0;
+}
+.rr-image-edit-field-icon {
+  flex-shrink: 0;
+  color: var(--rc-text-secondary);
+}
+.rr-image-edit-input {
+  flex: 1;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  font-size: 13px;
+  padding: 0;
+  outline: none;
+  min-width: 0;
+}
+.rr-image-edit-input::placeholder {
+  color: var(--rc-text-secondary);
+}
+.rr-image-edit-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.rr-image-edit-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  appearance: none;
+  border: none;
+  background: none;
+  color: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: color 0.15s ease, background-color 0.15s ease;
+  white-space: nowrap;
+}
+.rr-image-edit-action-btn:hover {
+  background-color: var(--rc-bg-secondary);
+}
+.rr-image-edit-action-btn--end {
+  margin-left: auto;
+}.PhotoView-Portal{direction:ltr;height:100%;left:0;overflow:hidden;position:fixed;top:0;touch-action:none;width:100%;z-index:2000}@keyframes PhotoView__rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes PhotoView__delayIn{0%,50%{opacity:0}to{opacity:1}}.PhotoView__Spinner{animation:PhotoView__delayIn .4s linear both}.PhotoView__Spinner svg{animation:PhotoView__rotate .6s linear infinite}.PhotoView__Photo{cursor:grab;max-width:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PhotoView__Photo:active{cursor:grabbing}.PhotoView__icon{display:inline-block;left:0;position:absolute;top:0;transform:translate(-50%,-50%)}.PhotoView__PhotoBox,.PhotoView__PhotoWrap{bottom:0;direction:ltr;left:0;position:absolute;right:0;top:0;touch-action:none;width:100%}.PhotoView__PhotoWrap{overflow:hidden;z-index:10}.PhotoView__PhotoBox{transform-origin:left top}@keyframes PhotoView__fade{0%{opacity:0}to{opacity:1}}.PhotoView-Slider__clean .PhotoView-Slider__ArrowLeft,.PhotoView-Slider__clean .PhotoView-Slider__ArrowRight,.PhotoView-Slider__clean .PhotoView-Slider__BannerWrap,.PhotoView-Slider__clean .PhotoView-Slider__Overlay,.PhotoView-Slider__willClose .PhotoView-Slider__BannerWrap:hover{opacity:0}.PhotoView-Slider__Backdrop{background:#000;height:100%;left:0;position:absolute;top:0;transition-property:background-color;width:100%;z-index:-1}.PhotoView-Slider__fadeIn{animation:PhotoView__fade linear both;opacity:0}.PhotoView-Slider__fadeOut{animation:PhotoView__fade linear reverse both;opacity:0}.PhotoView-Slider__BannerWrap{align-items:center;background-color:rgba(0,0,0,.5);color:#fff;display:flex;height:44px;justify-content:space-between;left:0;position:absolute;top:0;transition:opacity .2s ease-out;width:100%;z-index:20}.PhotoView-Slider__BannerWrap:hover{opacity:1}.PhotoView-Slider__Counter{font-size:14px;opacity:.75;padding:0 10px}.PhotoView-Slider__BannerRight{align-items:center;display:flex;height:100%}.PhotoView-Slider__toolbarIcon{fill:#fff;box-sizing:border-box;cursor:pointer;opacity:.75;padding:10px;transition:opacity .2s linear}.PhotoView-Slider__toolbarIcon:hover{opacity:1}.PhotoView-Slider__ArrowLeft,.PhotoView-Slider__ArrowRight{align-items:center;bottom:0;cursor:pointer;display:flex;height:100px;justify-content:center;margin:auto;opacity:.75;position:absolute;top:0;transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:70px;z-index:20}.PhotoView-Slider__ArrowLeft:hover,.PhotoView-Slider__ArrowRight:hover{opacity:1}.PhotoView-Slider__ArrowLeft svg,.PhotoView-Slider__ArrowRight svg{fill:#fff;background:rgba(0,0,0,.3);box-sizing:content-box;height:24px;padding:10px;width:24px}.PhotoView-Slider__ArrowLeft{left:0}.PhotoView-Slider__ArrowRight{right:0}

package/dist/styles.css.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@haklex/rich-renderer-image",
+  "version": "0.0.1",
+  "description": "Image renderer with blurhash and lightbox",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/rich-renderer-image.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "lucide-react": "^0.574.0",
+    "react-photo-view": "^1.2.6",
+    "thumbhash": "^0.1.1"
+  },
+  "devDependencies": {
+    "@lexical/react": "^0.39.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/vite-plugin": "^4.0.20",
+    "lexical": "^0.39.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-editor-ui": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "peerDependencies": {
+    "@lexical/react": "^0.39.0",
+    "lexical": "^0.39.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-editor-ui": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}