changes

src/editor/FigureView.tsx

@@ -1,4 +1,6 @@
+import { useRef, useState } from "react";
 import { NodeViewWrapper, type NodeViewProps } from "@tiptap/react";
+import { FIGURE_WIDTH, isResizablePlacement, type FigurePlacement } from "../model/book";
 
 const PLACEMENTS = [
   { key: "inline", label: "Inline" },
@@ -7,13 +9,51 @@ const PLACEMENTS = [
   { key: "float-top", label: "Float" },
 ];
 
+const clampWidth = (value: number) => Math.min(100, Math.max(20, Math.round(value)));
+
 export function FigureView({ node, updateAttributes, selected }: NodeViewProps) {
   const { src, alt, caption, placement } = node.attrs;
+  const frameRef = useRef<HTMLDivElement>(null);
+  const [dragWidth, setDragWidth] = useState<number | null>(null);
+
+  const resizable = isResizablePlacement(placement as FigurePlacement);
+  const baseWidth = node.attrs.width ?? FIGURE_WIDTH[placement as FigurePlacement] ?? 100;
+  const width = resizable ? (dragWidth ?? baseWidth) : null;
+
+  const startResize = (e: React.PointerEvent) => {
+    e.preventDefault();
+    const wrapper = frameRef.current?.closest(".figure") as HTMLElement | null;
+    const container = wrapper?.parentElement;
+    if (!wrapper || !container) return;
+    const startX = e.clientX;
+    const startPx = wrapper.getBoundingClientRect().width;
+    const containerPx = container.clientWidth || 1;
+    const percentAt = (clientX: number) => clampWidth(((startPx + clientX - startX) / containerPx) * 100);
+
+    const onMove = (ev: PointerEvent) => setDragWidth(percentAt(ev.clientX));
+    const onUp = (ev: PointerEvent) => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      updateAttributes({ width: percentAt(ev.clientX) });
+      setDragWidth(null);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
 
   return (
-    <NodeViewWrapper className="figure" data-placement={placement} data-selected={selected} contentEditable={false}>
-      <div className="figure-frame">
+    <NodeViewWrapper
+      className="figure"
+      data-placement={placement}
+      data-selected={selected}
+      style={width != null ? { width: `${width}%` } : undefined}
+      contentEditable={false}
+    >
+      <div className="figure-frame" ref={frameRef}>
         {src ? <img src={src} alt={alt} /> : <div className="figure-empty">No image</div>}
+        {selected && src && resizable && (
+          <div className="figure-handle" onPointerDown={startResize} title="Drag to resize" />
+        )}
       </div>
       <input
         className="figure-caption"
@@ -28,6 +68,7 @@ export function FigureView({ node, updateAttributes, selected }: NodeViewProps)
               {p.label}
             </button>
           ))}
+          {resizable && src && <span className="figure-width">{Math.round(width ?? baseWidth)}%</span>}
         </div>
       )}
     </NodeViewWrapper>

src/editor/figure.ts

@@ -1,5 +1,6 @@
 import { Node, mergeAttributes } from "@tiptap/core";
 import { ReactNodeViewRenderer } from "@tiptap/react";
+import { isResizablePlacement } from "../model/book";
 import { FigureView } from "./FigureView";
 
 export const Figure = Node.create({
@@ -15,6 +16,7 @@ export const Figure = Node.create({
       alt: { default: "" },
       caption: { default: "" },
       placement: { default: "full-width" },
+      width: { default: null },
     };
   },
 
@@ -23,10 +25,11 @@ export const Figure = Node.create({
   },
 
   renderHTML({ HTMLAttributes }) {
-    const { src, alt, caption, placement } = HTMLAttributes;
+    const { src, alt, caption, placement, width } = HTMLAttributes;
+    const style = width != null && isResizablePlacement(placement) ? `width:${width}%` : null;
     return [
       "figure",
-      mergeAttributes({ "data-figure": "", "data-placement": placement }),
+      mergeAttributes({ "data-figure": "", "data-placement": placement, style }),
       ["img", { src, alt }],
       ["figcaption", {}, caption ?? ""],
     ];