@haklex/rich-renderer-image 0.0.81 → 0.0.83

package/dist/ImageRenderer-DyeaT08P.js

@@ -0,0 +1,130 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react-photo-view/dist/react-photo-view.css";
+import { vars } from "@haklex/rich-editor";
+import { decodeThumbHash } from "@haklex/rich-editor/renderers";
+import { useState, useMemo } from "react";
+import { PhotoProvider, PhotoView } from "react-photo-view";
+var semanticClassNames = { root: "rr-image-root", frame: "rr-image-frame", frameLoading: "rr-image-loading", frameLoaded: "rr-image-loaded", frameError: "rr-image-error", image: "rr-image-img", loader: "rr-image-loader", errorBadge: "rr-image-error", caption: "rr-image-caption", editTrigger: "rr-image-edit-trigger", editPlaceholder: "rr-image-edit-placeholder", editToolbar: "rr-image-edit-toolbar", editToolbarVisible: "rr-image-edit-toolbar-visible", editToolbarButton: "rr-image-edit-toolbar-button", editToolbarButtonDanger: "rr-image-edit-toolbar-danger", editField: "rr-image-edit-field", editFieldIcon: "rr-image-edit-field-icon", editInput: "rr-image-edit-input", replaceUploadArea: "rr-image-replace-upload-area", replacePreview: "rr-image-replace-preview", panelHint: "rr-image-panel-hint" };
+var root = "_1n94osf0";
+var image = "_1n94osf2";
+var imageState = { loading: "_1n94osf3", loaded: "_1n94osf4", error: "_1n94osf5" };
+var imageVisible = "_1n94osf6";
+var frame = "_1n94osf7";
+var frameEditMode = "_1n94osf8";
+var loader = "_1n94osfa";
+var errorBadge = "_1n94osfb";
+var caption = "_1n94osfc";
+var editTrigger = "_1n94osfk";
+var editPlaceholder = "_1n94osfl";
+var editToolbar = "_1n94osfm";
+var editToolbarVisible = "_1n94osfn";
+var editToolbarButton = "_1n94osfo";
+var editToolbarButtonDanger = "_1n94osfp";
+var editPanel = "_1n94osfq";
+var editField = "_1n94osfr";
+var editFieldIcon = "_1n94osfs";
+var editInput = "_1n94osft";
+var replaceUploadArea = "_1n94osfu";
+var replacePreview = "_1n94osfv";
+var panelHint = "_1n94osfw";
+const frameStateSemanticClass = {
+  loading: semanticClassNames.frameLoading,
+  loaded: semanticClassNames.frameLoaded,
+  error: semanticClassNames.frameError
+};
+function getCaptionText(altText, caption2) {
+  if (caption2) return caption2;
+  if (!altText) return void 0;
+  if (altText.startsWith("!") || altText.startsWith("¡")) {
+    return altText.slice(1);
+  }
+  return void 0;
+}
+const ImageRenderer = ({
+  src,
+  altText,
+  width,
+  height,
+  caption: caption$1,
+  thumbhash,
+  accent
+}) => {
+  const [state, setState] = useState("loading");
+  const captionText = useMemo(() => getCaptionText(altText, caption$1), [altText, caption$1]);
+  const placeholderUrl = useMemo(
+    () => thumbhash ? decodeThumbHash(thumbhash) : void 0,
+    [thumbhash]
+  );
+  if (!src) return null;
+  const frameStyle = {
+    backgroundColor: state !== "loaded" && !placeholderUrl ? accent || vars.color.bgTertiary : "transparent",
+    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: `${root} ${semanticClassNames.root}`, children: [
+    /* @__PURE__ */ jsx(PhotoProvider, { photoClosable: true, children: /* @__PURE__ */ jsx(PhotoView, { src, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": `Open image: ${altText || "image"}`,
+        className: `${frame} ${semanticClassNames.frame} ${imageState[state]} ${frameStateSemanticClass[state]}`.trim(),
+        role: "button",
+        style: frameStyle,
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          e.preventDefault();
+          e.currentTarget.click();
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              alt: altText,
+              className: `${image} ${state === "loaded" ? imageVisible : ""} ${semanticClassNames.image}`,
+              "data-state": state,
+              height,
+              loading: "lazy",
+              src,
+              style: width && height ? { height: "100%", objectFit: "cover" } : void 0,
+              width,
+              onError: () => setState("error"),
+              onLoad: () => setState("loaded")
+            }
+          ),
+          state === "loading" && /* @__PURE__ */ jsx("span", { className: `${loader} ${semanticClassNames.loader}` }),
+          state === "error" && /* @__PURE__ */ jsx("span", { className: `${errorBadge} ${semanticClassNames.errorBadge}`, children: "Image failed to load" })
+        ]
+      }
+    ) }) }),
+    captionText && /* @__PURE__ */ jsx("figcaption", { className: `${caption} ${semanticClassNames.caption}`, children: captionText })
+  ] });
+};
+export {
+  ImageRenderer as I,
+  editFieldIcon as a,
+  editInput as b,
+  replacePreview as c,
+  editToolbar as d,
+  editField as e,
+  editToolbarVisible as f,
+  editToolbarButton as g,
+  editPanel as h,
+  editToolbarButtonDanger as i,
+  editPlaceholder as j,
+  editTrigger as k,
+  root as l,
+  image as m,
+  imageVisible as n,
+  loader as o,
+  panelHint as p,
+  errorBadge as q,
+  replaceUploadArea as r,
+  semanticClassNames as s,
+  frame as t,
+  frameEditMode as u,
+  imageState as v,
+  caption as w
+};