@haklex/rich-compose 0.22.1 → 0.24.0

package/dist/litexml-html-preview-client.css

@@ -2687,6 +2687,7 @@
   }
 }
 .gxfui12 {
+  display: flow-root;
   font-family: var(--rc-font-family);
   font-size: var(--rc-font-size-base);
   line-height: var(--rc-line-height);
@@ -3458,6 +3459,48 @@
 .gxfui1x > :last-child {
   margin-bottom: 0;
 }
+figure.rich-image {
+  width: var(--rich-image-display-width, auto);
+  max-width: 100%;
+  margin-inline: auto;
+}
+figure.rich-image[data-layout="align-left"] {
+  margin-left: 0;
+  margin-right: auto;
+  text-align: left;
+}
+figure.rich-image[data-layout="align-right"] {
+  margin-left: auto;
+  margin-right: 0;
+  text-align: right;
+}
+figure.rich-image[data-layout="float-left"] {
+  float: left;
+  width: var(--rich-image-display-width, 50%);
+  margin: 0.25rem 1.5rem 1rem 0;
+}
+figure.rich-image[data-layout="float-right"] {
+  float: right;
+  width: var(--rich-image-display-width, 50%);
+  margin: 0.25rem 0 1rem 1.5rem;
+}
+.rich-image-wrapper[data-layout="float-left"] {
+  float: left;
+  width: 50%;
+  max-width: 100%;
+  margin: 0.25rem 1.5rem 1rem 0;
+}
+.rich-image-wrapper[data-layout="float-right"] {
+  float: right;
+  width: 50%;
+  max-width: 100%;
+  margin: 0.25rem 0 1rem 1.5rem;
+}
+.rich-image-wrapper[data-layout^="float"] figure.rich-image {
+  float: none;
+  width: auto;
+  margin: 0;
+}
 @supports (animation-timeline: view()) {
   .gxfui1b {
     --rc-hl-highlighted: 0;
@@ -3465,6 +3508,18 @@
     animation-timeline: view();
     animation-range: entry 100% cover 10%;
   }
+}
+@media (max-width: 640px) {
+  figure.rich-image[data-layout^="float"] {
+    float: none;
+    width: auto;
+    margin: 1.25rem auto;
+  }
+  .rich-image-wrapper[data-layout^="float"] {
+    float: none;
+    width: 100% !important;
+    margin: 0;
+  }
 }._1pkof4r0 {
   margin: var(--rc-space-md) 0;
   border: none;
@@ -4586,6 +4641,7 @@
   overflow: hidden;
   border: 1px solid color-mix(in srgb, var(--rc-border) 60%, transparent);
   background: var(--rc-code-bg);
+  font-family: var(--rc-font-family-sans);
   font-size: var(--rc-font-size-md);
 }
 ._1v9rg4b1 {
@@ -5312,6 +5368,7 @@
   justify-content: space-between;
   padding: var(--rc-space-sm) var(--rc-space-md);
   border-bottom: 1px solid var(--rc-border);
+  font-family: var(--rc-font-family-sans);
   font-size: var(--rc-font-size-md);
   color: var(--rc-text-secondary);
   user-select: none;
@@ -5363,6 +5420,7 @@
   justify-content: space-between;
   padding: var(--rc-space-sm) var(--rc-space-md);
   border-bottom: 1px solid var(--rc-border);
+  font-family: var(--rc-font-family-sans);
   font-size: var(--rc-font-size-md);
   color: var(--rc-text-secondary);
   user-select: none;
@@ -5503,6 +5561,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  font-family: var(--rc-font-family-sans);
   padding: 0.75rem 1rem;
   margin: 1rem 0;
   border-radius: 0.5rem;
@@ -5808,7 +5867,7 @@
   border-bottom: 1px solid var(--rc-hr-border);
   padding: var(--rc-space-lg) 0;
   margin: var(--rc-space-lg) 0;
-  font-family: inherit;
+  font-family: var(--rc-font-family-sans);
 }
 ._1cvhw6k1 {
   font-size: 0.7rem;
@@ -5948,6 +6007,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  font-family: var(--rc-font-family-sans);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.02em;
@@ -6026,6 +6086,7 @@
   display: flex;
   align-items: center;
   gap: var(--rc-space-sm);
+  font-family: var(--rc-font-family-sans);
   font-weight: 600;
   margin-bottom: var(--rc-space-xs);
   font-size: var(--rc-font-size-md);
@@ -6264,7 +6325,7 @@
   border: 1px solid color-mix(in srgb, rgb(var(--_1pymbyu0)) 25%, transparent);
   border-radius: 12px;
   background-color: color-mix(in srgb, rgb(var(--_1pymbyu0)) 12%, transparent);
-  font-family: var(--rc-font-family);
+  font-family: var(--rc-font-family-sans);
   font-size: var(--rc-font-size-md);
   transition: border-color 0.15s ease, background-color 0.15s ease;
 }
@@ -6454,7 +6515,7 @@
   border: 1px solid color-mix(in srgb, rgb(var(--_1kngc4r0)) 25%, transparent);
   border-radius: 12px;
   background-color: color-mix(in srgb, rgb(var(--_1kngc4r0)) 8%, transparent);
-  font-family: var(--rc-font-family);
+  font-family: var(--rc-font-family-sans);
   font-size: var(--rc-font-size-md);
   margin: 8px 0;
 }
@@ -7723,8 +7784,35 @@
   }
 }
 .yvdzu0 {
-  margin: 1.25rem 0;
+  margin: 1.25rem auto;
   text-align: center;
+  width: var(--rich-image-display-width, auto);
+  max-width: 100%;
+}
+.yvdzu0[data-layout="align-left"] {
+  margin-left: 0;
+  margin-right: auto;
+  text-align: left;
+}
+.yvdzu0[data-layout="align-right"] {
+  margin-left: auto;
+  margin-right: 0;
+  text-align: right;
+}
+.yvdzu0[data-layout="float-left"] {
+  float: left;
+  width: var(--rich-image-display-width, 50%);
+  margin: 0.25rem 1.5rem 1rem 0;
+}
+.yvdzu0[data-layout="float-right"] {
+  float: right;
+  width: var(--rich-image-display-width, 50%);
+  margin: 0.25rem 0 1rem 1.5rem;
+}
+.rich-image-wrapper[data-layout^="float"] .yvdzu0 {
+  float: none;
+  width: auto;
+  margin: 0;
 }
 .yvdzu2 {
   display: block;
@@ -8014,6 +8102,136 @@
   gap: 0.4rem;
   color: var(--rc-text-secondary);
   font-size: var(--rc-font-size-xs);
+}
+.yvdzuy {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 36px;
+  max-height: 50%;
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.18);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  cursor: ew-resize;
+  touch-action: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 10;
+}
+.yvdzuz {
+  left: 6px;
+}
+.yvdzu10 {
+  right: 6px;
+}
+.yvdzu11 {
+  opacity: 1;
+}
+.yvdzu12 {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  font-family: var(--rc-font-family);
+  z-index: 30;
+}
+.yvdzu12.yvdzu12 {
+  width: fit-content;
+}
+.yvdzu13 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 132px;
+  height: 24px;
+}
+.yvdzu14 {
+  appearance: none;
+  width: 100%;
+  height: 24px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.yvdzu14::-webkit-slider-runnable-track {
+  height: 3px;
+  border-radius: 9999px;
+  background: linear-gradient(to right, var(--rc-text-secondary) var(--fill), var(--rc-fill) var(--fill));
+}
+.yvdzu14::-webkit-slider-thumb {
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--rc-bg);
+  border: 1px solid var(--rc-border);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  cursor: ew-resize;
+  margin-top: -4.5px;
+}
+.yvdzu14::-moz-range-track {
+  height: 3px;
+  border-radius: 9999px;
+  background: linear-gradient(to right, var(--rc-text-secondary) var(--fill), var(--rc-fill) var(--fill));
+}
+.yvdzu14::-moz-range-thumb {
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--rc-bg);
+  border: 1px solid var(--rc-border);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  cursor: ew-resize;
+}
+.yvdzu15 {
+  position: absolute;
+  top: 50%;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background-color: var(--rc-bg);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.yvdzu16 {
+  min-width: 34px;
+  text-align: right;
+  font-size: var(--rc-font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--rc-text-secondary);
+}
+.yvdzu17 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 26px;
+  padding: 0 8px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--rc-text-secondary);
+  font-size: var(--rc-font-size-xs);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.yvdzu17:hover {
+  color: var(--rc-text);
+  background-color: var(--rc-fill-secondary);
+}
+.yvdzu18 {
+  color: var(--rc-text);
+  background-color: var(--rc-fill-secondary);
+}
+@media (max-width: 640px) {
+  .yvdzu0[data-layout="float-left"], .yvdzu0[data-layout="float-right"] {
+    float: none;
+    width: auto;
+    margin: 1.25rem auto;
+  }
 }@keyframes vwn881f {
   0%, 100% {
     opacity: 1;
@@ -8681,6 +8899,7 @@
   animation: _1fjmgdr3 0.5s ease forwards;
 }
 ._1fjmgdr5 {
+  font-family: var(--rc-font-family-sans);
   position: absolute;
   left: 2rem;
   right: 2rem;

package/dist/litexml-html-preview-client.js

@@ -65855,7 +65855,7 @@
 	}));
 	//#endregion
 	//#region ../rich-editor/src/components/renderers/ImageRenderer.tsx
-	function ImageRenderer$1({ src, altText, width, height, caption, thumbhash, accent }) {
+	function ImageRenderer$1({ src, altText, width, height, caption, thumbhash, accent, displayWidth, layout }) {
 		const [loaded, setLoaded] = (0, import_react$167.useState)(false);
 		const [zoomed, setZoomed] = (0, import_react$167.useState)(false);
 		const handleLoad = (0, import_react$167.useCallback)(() => setLoaded(true), []);
@@ -65894,6 +65894,8 @@
 		} : { maxWidth: "100%" };
 		return /* @__PURE__ */ (0, import_jsx_runtime$215.jsxs)("figure", {
 			className: "rich-image",
+			"data-layout": layout,
+			style: displayWidth ? { "--rich-image-display-width": `${displayWidth}%` } : void 0,
 			children: [
 				/* @__PURE__ */ (0, import_jsx_runtime$215.jsx)("div", {
 					"aria-label": loaded ? `Zoom image: ${altText}` : void 0,
@@ -65967,10 +65969,23 @@
 		if (/^(?:rgb|hsl)a?\([^)]+\)$/i.test(trimmed)) return trimmed;
 		if (/^[a-z]{3,20}$/i.test(trimmed)) return trimmed;
 	}
+	function sanitizeImageDisplayWidth(value) {
+		if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
+		return Math.round(Math.min(100, Math.max(10, value)));
+	}
+	function sanitizeImageLayout(value) {
+		return IMAGE_LAYOUTS.includes(value) ? value : void 0;
+	}
+	function applyLayoutToDOM(dom, layout, displayWidth) {
+		if (layout) dom.dataset.layout = layout;
+		else delete dom.dataset.layout;
+		const isFloat = layout === "float-left" || layout === "float-right";
+		dom.style.width = isFloat && displayWidth !== void 0 ? `${displayWidth}%` : "";
+	}
 	function $createImageNode(payload) {
 		return new ImageNode(payload);
 	}
-	var import_react$166, ImageNode;
+	var import_react$166, IMAGE_LAYOUTS, ImageNode;
 	var init_ImageNode = __esmMin((() => {
 		init_Lexical_prod();
 		init_lucide_react();
@@ -65980,6 +65995,12 @@
 		init_image_upload_command();
 		init_renderer_keys();
 		init_defineProperty();
+		IMAGE_LAYOUTS = [
+			"align-left",
+			"align-right",
+			"float-left",
+			"float-right"
+		];
 		ImageNode = class ImageNode extends yo$2 {
 			static getType() {
 				return "image";
@@ -65992,7 +66013,9 @@
 					height: node.__height,
 					caption: node.__caption,
 					thumbhash: node.__thumbhash,
-					accent: node.__accent
+					accent: node.__accent,
+					displayWidth: node.__displayWidth,
+					layout: node.__layout
 				}, node.__key);
 			}
 			constructor(payload, key) {
@@ -66004,6 +66027,8 @@
 				_defineProperty$2(this, "__caption", void 0);
 				_defineProperty$2(this, "__thumbhash", void 0);
 				_defineProperty$2(this, "__accent", void 0);
+				_defineProperty$2(this, "__displayWidth", void 0);
+				_defineProperty$2(this, "__layout", void 0);
 				this.__src = sanitizeImageSrc(payload.src);
 				this.__altText = payload.altText;
 				this.__width = payload.width;
@@ -66011,13 +66036,17 @@
 				this.__caption = payload.caption;
 				this.__thumbhash = payload.thumbhash;
 				this.__accent = sanitizeColor(payload.accent);
+				this.__displayWidth = sanitizeImageDisplayWidth(payload.displayWidth);
+				this.__layout = sanitizeImageLayout(payload.layout);
 			}
 			createDOM(_config) {
 				const div = document.createElement("div");
 				div.className = "rich-image-wrapper";
+				applyLayoutToDOM(div, this.__layout, this.__displayWidth);
 				return div;
 			}
-			updateDOM() {
+			updateDOM(prevNode, dom) {
+				if (prevNode.__layout !== this.__layout || prevNode.__displayWidth !== this.__displayWidth) applyLayoutToDOM(dom, this.__layout, this.__displayWidth);
 				return false;
 			}
 			isInline() {
@@ -66031,7 +66060,9 @@
 					height: serializedNode.height,
 					caption: serializedNode.caption,
 					thumbhash: serializedNode.thumbhash,
-					accent: serializedNode.accent
+					accent: serializedNode.accent,
+					displayWidth: serializedNode.displayWidth,
+					layout: serializedNode.layout
 				});
 			}
 			exportJSON() {
@@ -66045,6 +66076,8 @@
 					caption: this.__caption,
 					thumbhash: this.__thumbhash,
 					accent: this.__accent,
+					displayWidth: this.__displayWidth,
+					layout: this.__layout,
 					version: 1
 				};
 			}
@@ -66073,6 +66106,14 @@
 				const writable = this.getWritable();
 				writable.__accent = sanitizeColor(accent);
 			}
+			setDisplayWidth(width) {
+				const writable = this.getWritable();
+				writable.__displayWidth = sanitizeImageDisplayWidth(width);
+			}
+			setLayout(layout) {
+				const writable = this.getWritable();
+				writable.__layout = sanitizeImageLayout(layout);
+			}
 			getSrc() {
 				return this.__src;
 			}
@@ -66094,6 +66135,12 @@
 			getAccent() {
 				return this.__accent;
 			}
+			getDisplayWidth() {
+				return this.__displayWidth;
+			}
+			getLayout() {
+				return this.__layout;
+			}
 			decorate(_editor, _config) {
 				return createRendererDecoration(IMAGE_NODE_KEY, ImageRenderer$1, {
 					src: this.__src,
@@ -66102,7 +66149,9 @@
 					height: this.__height,
 					caption: this.__caption,
 					thumbhash: this.__thumbhash,
-					accent: this.__accent
+					accent: this.__accent,
+					displayWidth: this.__displayWidth,
+					layout: this.__layout
 				});
 			}
 		};
@@ -478022,7 +478071,8 @@ TTD mermaid definition render errror: ${M.message}`, "color: yellow"), le("ai",
 		editInput: "rr-image-edit-input",
 		replaceUploadArea: "rr-image-replace-upload-area",
 		replacePreview: "rr-image-replace-preview",
-		panelHint: "rr-image-panel-hint"
+		panelHint: "rr-image-panel-hint",
+		resizeHandle: "rr-image-resize-handle"
 	};
 	var root$1 = "yvdzu0";
 	var image$1 = "yvdzu2";
@@ -478047,7 +478097,7 @@ TTD mermaid definition render errror: ${M.message}`, "color: yellow"), le("ai",
 		if (!altText) return void 0;
 		if (altText.startsWith("!") || altText.startsWith("¡")) return altText.slice(1);
 	}
-	function ImageRenderer({ src, altText, width, height, caption: caption$1, thumbhash, accent, onActivate, ref }) {
+	function ImageRenderer({ src, altText, width, height, caption: caption$1, thumbhash, accent, displayWidth, layout, onActivate, ref }) {
 		const [state, setState] = (0, import_react$186.useState)("loading");
 		const imgRef = (0, import_react$186.useRef)(null);
 		const captionText = (0, import_react$186.useMemo)(() => getCaptionText(altText, caption$1), [altText, caption$1]);
@@ -478070,9 +478120,12 @@ TTD mermaid definition render errror: ${M.message}`, "color: yellow"), le("ai",
 			e.preventDefault();
 			activate();
 		};
+		const figureStyle = displayWidth ? { "--rich-image-display-width": `${displayWidth}%` } : void 0;
 		return /* @__PURE__ */ (0, import_jsx_runtime$232.jsxs)("figure", {
 			className: `${root$1} ${semanticClassNames$4.root}`,
+			"data-layout": layout,
 			ref,
+			style: figureStyle,
 			children: [/* @__PURE__ */ (0, import_jsx_runtime$232.jsxs)("div", {
 				"aria-label": interactive ? `Open image: ${altText || "image"}` : void 0,
 				className: `${frame} ${interactive ? "" : frameStatic} ${semanticClassNames$4.frame} ${imageState[state]} ${frameStateSemanticClass[state]}`.trim(),