dishui 0.0.78 → 0.0.80

package/dist/components/pro/RichTextEditor/extensions/ResizableImage.js

@@ -0,0 +1,94 @@
+import { useNodeEditable as e } from "./MarkdownBlock.js";
+import { useCallback as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { NodeViewWrapper as o, ReactNodeViewRenderer as s } from "@tiptap/react";
+import c from "@tiptap/extension-image";
+//#region src/components/pro/RichTextEditor/extensions/ResizableImage.tsx
+var l = 40, u = ({ node: s, updateAttributes: c, selected: u, editor: d }) => {
+	let f = e(d), p = n(null), [m, h] = r(!1), { src: g, alt: _, title: v, width: y, align: b } = s.attrs, x = t((e) => (t) => {
+		if (!f) return;
+		t.preventDefault(), t.stopPropagation();
+		let n = p.current;
+		if (!n) return;
+		let r = "touches" in t ? t.touches[0].clientX : t.clientX, i = n.getBoundingClientRect().width, a = n.naturalHeight && n.naturalWidth ? n.naturalHeight / n.naturalWidth : 0, o = e === "nw" || e === "sw" ? -1 : 1, s = n.parentElement?.parentElement?.getBoundingClientRect().width ?? Infinity;
+		h(!0);
+		let u = (e) => {
+			let t = (e - r) * o, n = Math.round(Math.min(s, Math.max(l, i + t)));
+			c({
+				width: n,
+				height: a ? Math.round(n * a) : null
+			});
+		}, d = (e) => u(e.clientX), m = (e) => {
+			e.cancelable && e.preventDefault(), u(e.touches[0].clientX);
+		}, g = () => {
+			h(!1), window.removeEventListener("mousemove", d), window.removeEventListener("mouseup", g), window.removeEventListener("touchmove", m), window.removeEventListener("touchend", g), window.removeEventListener("touchcancel", g);
+		};
+		window.addEventListener("mousemove", d), window.addEventListener("mouseup", g), window.addEventListener("touchmove", m, { passive: !1 }), window.addEventListener("touchend", g), window.addEventListener("touchcancel", g);
+	}, [f, c]), S = f && (u || m);
+	return /* @__PURE__ */ i(o, {
+		className: "rte-resizable-image",
+		"data-align": b || "left",
+		"data-active": S ? "true" : void 0,
+		children: /* @__PURE__ */ a("span", {
+			className: "rte-resizable-image__frame",
+			style: { width: y ? `${y}px` : void 0 },
+			children: [/* @__PURE__ */ i("img", {
+				ref: p,
+				src: g,
+				alt: _ || "",
+				title: v || void 0,
+				draggable: !1,
+				style: { width: y ? `${y}px` : void 0 }
+			}), S && [
+				"nw",
+				"ne",
+				"sw",
+				"se"
+			].map((e) => /* @__PURE__ */ i("span", {
+				className: `rte-resizable-image__handle rte-resizable-image__handle--${e}`,
+				onMouseDown: x(e),
+				onTouchStart: x(e),
+				role: "presentation"
+			}, e))]
+		})
+	});
+}, d = c.extend({
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			width: {
+				default: null,
+				parseHTML: (e) => {
+					let t = e.getAttribute("width");
+					if (t) return parseInt(t, 10) || null;
+					let n = e.style.width;
+					return n && parseInt(n, 10) || null;
+				},
+				renderHTML: (e) => e.width ? {
+					width: e.width,
+					style: `width: ${e.width}px`
+				} : {}
+			},
+			height: {
+				default: null,
+				parseHTML: (e) => {
+					let t = e.getAttribute("height");
+					return t && parseInt(t, 10) || null;
+				},
+				renderHTML: (e) => e.height ? { height: e.height } : {}
+			},
+			align: {
+				default: "left",
+				parseHTML: (e) => e.getAttribute("data-align") || "left",
+				renderHTML: (e) => e.align ? { "data-align": e.align } : {}
+			}
+		};
+	},
+	addNodeView() {
+		return s(u);
+	}
+});
+//#endregion
+export { d as ResizableImage, d as default };
+
+//# sourceMappingURL=ResizableImage.js.map

package/dist/components/pro/RichTextEditor/extensions/ResizableImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableImage.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/extensions/ResizableImage.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport Image from '@tiptap/extension-image';\nimport { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';\nimport type { NodeViewProps } from '@tiptap/react';\nimport { useNodeEditable } from './MarkdownBlock';\n\n/**\n * ResizableImage extends the stock Tiptap Image node with:\n * - persisted `width` / `height` / `align` attributes (serialized to HTML)\n * - a React NodeView that renders drag handles on the four corners so users can\n *   resize the image by dragging (mouse + touch), keeping the aspect ratio.\n *\n * The public API is unchanged: `editor.chain().setImage({ src })` still works,\n * and existing documents (plain `<img>`) upgrade transparently.\n */\n\nconst MIN_WIDTH = 40;\n\ntype Corner = 'nw' | 'ne' | 'sw' | 'se';\n\nconst ResizableImageNodeView: React.FC<NodeViewProps> = ({ node, updateAttributes, selected, editor }) => {\n  const editable = useNodeEditable(editor);\n  const imgRef = useRef<HTMLImageElement>(null);\n  const [resizing, setResizing] = useState(false);\n\n  const { src, alt, title, width, align } = node.attrs as {\n    src: string;\n    alt?: string;\n    title?: string;\n    width?: number | null;\n    height?: number | null;\n    align?: 'left' | 'center' | 'right' | null;\n  };\n\n  const startResize = useCallback(\n    (corner: Corner) => (event: React.MouseEvent | React.TouchEvent) => {\n      if (!editable) return;\n      event.preventDefault();\n      event.stopPropagation();\n\n      const img = imgRef.current;\n      if (!img) return;\n\n      const isTouch = 'touches' in event;\n      const startX = isTouch ? event.touches[0].clientX : (event as React.MouseEvent).clientX;\n      const startWidth = img.getBoundingClientRect().width;\n      const ratio = img.naturalHeight && img.naturalWidth ? img.naturalHeight / img.naturalWidth : 0;\n      // Left-side handles grow the image when dragged leftwards.\n      const dir = corner === 'nw' || corner === 'sw' ? -1 : 1;\n      const maxWidth = img.parentElement?.parentElement?.getBoundingClientRect().width ?? Infinity;\n\n      setResizing(true);\n\n      const move = (clientX: number) => {\n        const delta = (clientX - startX) * dir;\n        const next = Math.round(Math.min(maxWidth, Math.max(MIN_WIDTH, startWidth + delta)));\n        updateAttributes({ width: next, height: ratio ? Math.round(next * ratio) : null });\n      };\n\n      const onMouseMove = (e: MouseEvent) => move(e.clientX);\n      const onTouchMove = (e: TouchEvent) => {\n        if (e.cancelable) e.preventDefault();\n        move(e.touches[0].clientX);\n      };\n      const stop = () => {\n        setResizing(false);\n        window.removeEventListener('mousemove', onMouseMove);\n        window.removeEventListener('mouseup', stop);\n        window.removeEventListener('touchmove', onTouchMove);\n        window.removeEventListener('touchend', stop);\n        window.removeEventListener('touchcancel', stop);\n      };\n\n      window.addEventListener('mousemove', onMouseMove);\n      window.addEventListener('mouseup', stop);\n      window.addEventListener('touchmove', onTouchMove, { passive: false });\n      window.addEventListener('touchend', stop);\n      window.addEventListener('touchcancel', stop);\n    },\n    [editable, updateAttributes],\n  );\n\n  const active = editable && (selected || resizing);\n  const corners: Corner[] = ['nw', 'ne', 'sw', 'se'];\n\n  return (\n    <NodeViewWrapper\n      className=\"rte-resizable-image\"\n      data-align={align || 'left'}\n      data-active={active ? 'true' : undefined}\n    >\n      <span className=\"rte-resizable-image__frame\" style={{ width: width ? `${width}px` : undefined }}>\n        <img\n          ref={imgRef}\n          src={src}\n          alt={alt || ''}\n          title={title || undefined}\n          draggable={false}\n          style={{ width: width ? `${width}px` : undefined }}\n        />\n        {active &&\n          corners.map((corner) => (\n            <span\n              key={corner}\n              className={`rte-resizable-image__handle rte-resizable-image__handle--${corner}`}\n              onMouseDown={startResize(corner)}\n              onTouchStart={startResize(corner)}\n              role=\"presentation\"\n            />\n          ))}\n      </span>\n    </NodeViewWrapper>\n  );\n};\n\nexport const ResizableImage = Image.extend({\n  addAttributes() {\n    return {\n      ...this.parent?.(),\n      width: {\n        default: null,\n        parseHTML: (element) => {\n          const attr = element.getAttribute('width');\n          if (attr) return parseInt(attr, 10) || null;\n          const style = element.style.width;\n          return style ? parseInt(style, 10) || null : null;\n        },\n        renderHTML: (attributes) =>\n          attributes.width ? { width: attributes.width, style: `width: ${attributes.width}px` } : {},\n      },\n      height: {\n        default: null,\n        parseHTML: (element) => {\n          const attr = element.getAttribute('height');\n          return attr ? parseInt(attr, 10) || null : null;\n        },\n        renderHTML: (attributes) => (attributes.height ? { height: attributes.height } : {}),\n      },\n      align: {\n        default: 'left',\n        parseHTML: (element) => element.getAttribute('data-align') || 'left',\n        renderHTML: (attributes) => (attributes.align ? { 'data-align': attributes.align } : {}),\n      },\n    };\n  },\n  addNodeView() {\n    return ReactNodeViewRenderer(ResizableImageNodeView);\n  },\n});\n\nexport default ResizableImage;\n"],"mappings":"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"}

package/dist/components/pro/RichTextEditor/index.d.ts

@@ -10,6 +10,7 @@ export { default as ContextMenu } from './ContextMenu';
 export { MarkdownBlockExtension } from './extensions/MarkdownBlock';
 export { CodeBlockExtension } from './extensions/CodeBlockView';
 export { default as FontSizeExtension } from './extensions/FontSize';
+export { ResizableImage } from './extensions/ResizableImage';
 export { FloatingDialogExtension, getNextFloatZIndex } from './extensions/FloatingDialog';
 export { CommentMark } from './extensions/CommentMark';
 export { default as RichTextToolbar } from './Toolbar';