@haklex/rich-renderer-image 0.0.79 → 0.0.81

package/dist/ImageRenderer-BUTTEOl6.js

@@ -0,0 +1,131 @@
+import { vars } from "@haklex/rich-editor";
+import { useMemo, useState } from "react";
+import { decodeThumbHash } from "@haklex/rich-editor/renderers";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react-photo-view/dist/react-photo-view.css";
+import { PhotoProvider, PhotoView } from "react-photo-view";
+//#region src/styles.css.ts
+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",
+	editPanel: "rr-image-edit-panel",
+	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";
+//#endregion
+//#region src/ImageRenderer.tsx
+var frameStateSemanticClass = {
+	loading: semanticClassNames.frameLoading,
+	loaded: semanticClassNames.frameLoaded,
+	error: semanticClassNames.frameError
+};
+function getCaptionText(altText, caption) {
+	if (caption) return caption;
+	if (!altText) return void 0;
+	if (altText.startsWith("!") || altText.startsWith("¡")) return altText.slice(1);
+}
+var 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: `_1n94osfa ${semanticClassNames.loader}` }),
+						state === "error" && /* @__PURE__ */ jsx("span", {
+							className: `_1n94osfb ${semanticClassNames.errorBadge}`,
+							children: "Image failed to load"
+						})
+					]
+				})
+			})
+		}), captionText && /* @__PURE__ */ jsx("figcaption", {
+			className: `_1n94osfc ${semanticClassNames.caption}`,
+			children: captionText
+		})]
+	});
+};
+//#endregion
+export { root as C, replaceUploadArea as S, imageState as _, editInput as a, panelHint as b, editToolbar as c, editToolbarVisible as d, editTrigger as f, image as g, frameEditMode as h, editFieldIcon as i, editToolbarButton as l, frame as m, caption as n, editPanel as o, errorBadge as p, editField as r, editPlaceholder as s, ImageRenderer as t, editToolbarButtonDanger as u, imageVisible as v, semanticClassNames as w, replacePreview as x, loader as y };