@tiptap/core 3.9.0 → 3.10.0

package/dist/index.cjs

@@ -32,6 +32,7 @@ __export(index_exports, {
   NodePos: () => NodePos,
   NodeView: () => NodeView,
   PasteRule: () => PasteRule,
+  ResizableNodeview: () => ResizableNodeview,
   Tracker: () => Tracker,
   callOrReturn: () => callOrReturn,
   canInsertNode: () => canInsertNode,
@@ -3647,9 +3648,13 @@ var ExtensionManager = class {
         if (!addNodeView) {
           return [];
         }
+        const nodeViewResult = addNodeView();
+        if (!nodeViewResult) {
+          return [];
+        }
         const nodeview = (node, view, getPos, decorations, innerDecorations) => {
           const HTMLAttributes = getRenderedAttributes(node, extensionAttributes);
-          return addNodeView()({
+          return nodeViewResult({
             // pass-through
             node,
             view,
@@ -5136,6 +5141,539 @@ var h = (tag, attributes) => {
   return [tag, rest, children];
 };
 
+// src/lib/ResizableNodeview.ts
+var isTouchEvent = (e) => {
+  return "touches" in e;
+};
+var ResizableNodeview = class {
+  /**
+   * Creates a new ResizableNodeview instance.
+   *
+   * The constructor sets up the resize handles, applies initial sizing from
+   * node attributes, and configures all resize behavior options.
+   *
+   * @param options - Configuration options for the resizable node view
+   */
+  constructor(options) {
+    /** Active resize handle directions */
+    this.directions = ["bottom-left", "bottom-right", "top-left", "top-right"];
+    /** Minimum allowed dimensions */
+    this.minSize = {
+      height: 8,
+      width: 8
+    };
+    /** Whether to always preserve aspect ratio */
+    this.preserveAspectRatio = false;
+    /** CSS class names for elements */
+    this.classNames = {
+      container: "",
+      wrapper: "",
+      handle: "",
+      resizing: ""
+    };
+    /** Initial width of the element (for aspect ratio calculation) */
+    this.initialWidth = 0;
+    /** Initial height of the element (for aspect ratio calculation) */
+    this.initialHeight = 0;
+    /** Calculated aspect ratio (width / height) */
+    this.aspectRatio = 1;
+    /** Whether a resize operation is currently active */
+    this.isResizing = false;
+    /** The handle currently being dragged */
+    this.activeHandle = null;
+    /** Starting mouse X position when resize began */
+    this.startX = 0;
+    /** Starting mouse Y position when resize began */
+    this.startY = 0;
+    /** Element width when resize began */
+    this.startWidth = 0;
+    /** Element height when resize began */
+    this.startHeight = 0;
+    /** Whether Shift key is currently pressed (for temporary aspect ratio lock) */
+    this.isShiftKeyPressed = false;
+    /**
+     * Handles mouse movement during an active resize.
+     *
+     * Calculates the delta from the starting position, computes new dimensions
+     * based on the active handle direction, applies constraints and aspect ratio,
+     * then updates the element's style and calls the onResize callback.
+     *
+     * @param event - The mouse move event
+     */
+    this.handleMouseMove = (event) => {
+      if (!this.isResizing || !this.activeHandle) {
+        return;
+      }
+      const deltaX = event.clientX - this.startX;
+      const deltaY = event.clientY - this.startY;
+      this.handleResize(deltaX, deltaY);
+    };
+    this.handleTouchMove = (event) => {
+      if (!this.isResizing || !this.activeHandle) {
+        return;
+      }
+      const touch = event.touches[0];
+      if (!touch) {
+        return;
+      }
+      const deltaX = touch.clientX - this.startX;
+      const deltaY = touch.clientY - this.startY;
+      this.handleResize(deltaX, deltaY);
+    };
+    /**
+     * Completes the resize operation when the mouse button is released.
+     *
+     * Captures final dimensions, calls the onCommit callback to persist changes,
+     * removes the resizing state and class, and cleans up document-level listeners.
+     */
+    this.handleMouseUp = () => {
+      if (!this.isResizing) {
+        return;
+      }
+      const finalWidth = this.element.offsetWidth;
+      const finalHeight = this.element.offsetHeight;
+      this.onCommit(finalWidth, finalHeight);
+      this.isResizing = false;
+      this.activeHandle = null;
+      this.container.dataset.resizeState = "false";
+      if (this.classNames.resizing) {
+        this.container.classList.remove(this.classNames.resizing);
+      }
+      document.removeEventListener("mousemove", this.handleMouseMove);
+      document.removeEventListener("mouseup", this.handleMouseUp);
+      document.removeEventListener("keydown", this.handleKeyDown);
+      document.removeEventListener("keyup", this.handleKeyUp);
+    };
+    /**
+     * Tracks Shift key state to enable temporary aspect ratio locking.
+     *
+     * When Shift is pressed during resize, aspect ratio is preserved even if
+     * preserveAspectRatio is false.
+     *
+     * @param event - The keyboard event
+     */
+    this.handleKeyDown = (event) => {
+      if (event.key === "Shift") {
+        this.isShiftKeyPressed = true;
+      }
+    };
+    /**
+     * Tracks Shift key release to disable temporary aspect ratio locking.
+     *
+     * @param event - The keyboard event
+     */
+    this.handleKeyUp = (event) => {
+      if (event.key === "Shift") {
+        this.isShiftKeyPressed = false;
+      }
+    };
+    var _a, _b, _c, _d, _e;
+    this.node = options.node;
+    this.element = options.element;
+    this.contentElement = options.contentElement;
+    this.getPos = options.getPos;
+    this.onResize = options.onResize;
+    this.onCommit = options.onCommit;
+    this.onUpdate = options.onUpdate;
+    if ((_a = options.options) == null ? void 0 : _a.min) {
+      this.minSize = {
+        ...this.minSize,
+        ...options.options.min
+      };
+    }
+    if ((_b = options.options) == null ? void 0 : _b.max) {
+      this.maxSize = options.options.max;
+    }
+    if ((_c = options == null ? void 0 : options.options) == null ? void 0 : _c.directions) {
+      this.directions = options.options.directions;
+    }
+    if ((_d = options.options) == null ? void 0 : _d.preserveAspectRatio) {
+      this.preserveAspectRatio = options.options.preserveAspectRatio;
+    }
+    if ((_e = options.options) == null ? void 0 : _e.className) {
+      this.classNames = {
+        container: options.options.className.container || "",
+        wrapper: options.options.className.wrapper || "",
+        handle: options.options.className.handle || "",
+        resizing: options.options.className.resizing || ""
+      };
+    }
+    this.wrapper = this.createWrapper();
+    this.container = this.createContainer();
+    this.applyInitialSize();
+    this.attachHandles();
+  }
+  /**
+   * Returns the top-level DOM node that should be placed in the editor.
+   *
+   * This is required by the ProseMirror NodeView interface. The container
+   * includes the wrapper, handles, and the actual content element.
+   *
+   * @returns The container element to be inserted into the editor
+   */
+  get dom() {
+    return this.container;
+  }
+  get contentDOM() {
+    return this.contentElement;
+  }
+  /**
+   * Called when the node's content or attributes change.
+   *
+   * Updates the internal node reference. If a custom `onUpdate` callback
+   * was provided, it will be called to handle additional update logic.
+   *
+   * @param node - The new/updated node
+   * @param decorations - Node decorations
+   * @param innerDecorations - Inner decorations
+   * @returns `false` if the node type has changed (requires full rebuild), otherwise the result of `onUpdate` or `true`
+   */
+  update(node, decorations, innerDecorations) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+    this.node = node;
+    if (this.onUpdate) {
+      return this.onUpdate(node, decorations, innerDecorations);
+    }
+    return true;
+  }
+  /**
+   * Cleanup method called when the node view is being removed.
+   *
+   * Removes all event listeners to prevent memory leaks. This is required
+   * by the ProseMirror NodeView interface. If a resize is active when
+   * destroy is called, it will be properly cancelled.
+   */
+  destroy() {
+    if (this.isResizing) {
+      this.container.dataset.resizeState = "false";
+      if (this.classNames.resizing) {
+        this.container.classList.remove(this.classNames.resizing);
+      }
+      document.removeEventListener("mousemove", this.handleMouseMove);
+      document.removeEventListener("mouseup", this.handleMouseUp);
+      document.removeEventListener("keydown", this.handleKeyDown);
+      document.removeEventListener("keyup", this.handleKeyUp);
+      this.isResizing = false;
+      this.activeHandle = null;
+    }
+    this.container.remove();
+  }
+  /**
+   * Creates the outer container element.
+   *
+   * The container is the top-level element returned by the NodeView and
+   * wraps the entire resizable node. It's set up with flexbox to handle
+   * alignment and includes data attributes for styling and identification.
+   *
+   * @returns The container element
+   */
+  createContainer() {
+    const element = document.createElement("div");
+    element.dataset.resizeContainer = "";
+    element.dataset.node = this.node.type.name;
+    element.style.display = "flex";
+    element.style.justifyContent = "flex-start";
+    element.style.alignItems = "flex-start";
+    if (this.classNames.container) {
+      element.className = this.classNames.container;
+    }
+    element.appendChild(this.wrapper);
+    return element;
+  }
+  /**
+   * Creates the wrapper element that contains the content and handles.
+   *
+   * The wrapper uses relative positioning so that resize handles can be
+   * positioned absolutely within it. This is the direct parent of the
+   * content element being made resizable.
+   *
+   * @returns The wrapper element
+   */
+  createWrapper() {
+    const element = document.createElement("div");
+    element.style.position = "relative";
+    element.style.display = "block";
+    element.dataset.resizeWrapper = "";
+    if (this.classNames.wrapper) {
+      element.className = this.classNames.wrapper;
+    }
+    element.appendChild(this.element);
+    return element;
+  }
+  /**
+   * Creates a resize handle element for a specific direction.
+   *
+   * Each handle is absolutely positioned and includes a data attribute
+   * identifying its direction for styling purposes.
+   *
+   * @param direction - The resize direction for this handle
+   * @returns The handle element
+   */
+  createHandle(direction) {
+    const handle = document.createElement("div");
+    handle.dataset.resizeHandle = direction;
+    handle.style.position = "absolute";
+    if (this.classNames.handle) {
+      handle.className = this.classNames.handle;
+    }
+    return handle;
+  }
+  /**
+   * Positions a handle element according to its direction.
+   *
+   * Corner handles (e.g., 'top-left') are positioned at the intersection
+   * of two edges. Edge handles (e.g., 'top') span the full width or height.
+   *
+   * @param handle - The handle element to position
+   * @param direction - The direction determining the position
+   */
+  positionHandle(handle, direction) {
+    const isTop = direction.includes("top");
+    const isBottom = direction.includes("bottom");
+    const isLeft = direction.includes("left");
+    const isRight = direction.includes("right");
+    if (isTop) {
+      handle.style.top = "0";
+    }
+    if (isBottom) {
+      handle.style.bottom = "0";
+    }
+    if (isLeft) {
+      handle.style.left = "0";
+    }
+    if (isRight) {
+      handle.style.right = "0";
+    }
+    if (direction === "top" || direction === "bottom") {
+      handle.style.left = "0";
+      handle.style.right = "0";
+    }
+    if (direction === "left" || direction === "right") {
+      handle.style.top = "0";
+      handle.style.bottom = "0";
+    }
+  }
+  /**
+   * Creates and attaches all resize handles to the wrapper.
+   *
+   * Iterates through the configured directions, creates a handle for each,
+   * positions it, attaches the mousedown listener, and appends it to the DOM.
+   */
+  attachHandles() {
+    this.directions.forEach((direction) => {
+      const handle = this.createHandle(direction);
+      this.positionHandle(handle, direction);
+      handle.addEventListener("mousedown", (event) => this.handleResizeStart(event, direction));
+      handle.addEventListener("touchstart", (event) => this.handleResizeStart(event, direction));
+      this.wrapper.appendChild(handle);
+    });
+  }
+  /**
+   * Applies initial sizing from node attributes to the element.
+   *
+   * If width/height attributes exist on the node, they're applied to the element.
+   * Otherwise, the element's natural/current dimensions are measured. The aspect
+   * ratio is calculated for later use in aspect-ratio-preserving resizes.
+   */
+  applyInitialSize() {
+    const width = this.node.attrs.width;
+    const height = this.node.attrs.height;
+    if (width) {
+      this.element.style.width = `${width}px`;
+      this.initialWidth = width;
+    } else {
+      this.initialWidth = this.element.offsetWidth;
+    }
+    if (height) {
+      this.element.style.height = `${height}px`;
+      this.initialHeight = height;
+    } else {
+      this.initialHeight = this.element.offsetHeight;
+    }
+    if (this.initialWidth > 0 && this.initialHeight > 0) {
+      this.aspectRatio = this.initialWidth / this.initialHeight;
+    }
+  }
+  /**
+   * Initiates a resize operation when a handle is clicked.
+   *
+   * Captures the starting mouse position and element dimensions, sets up
+   * the resize state, adds the resizing class and state attribute, and
+   * attaches document-level listeners for mouse movement and keyboard input.
+   *
+   * @param event - The mouse down event
+   * @param direction - The direction of the handle being dragged
+   */
+  handleResizeStart(event, direction) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isResizing = true;
+    this.activeHandle = direction;
+    if (isTouchEvent(event)) {
+      this.startX = event.touches[0].clientX;
+      this.startY = event.touches[0].clientY;
+    } else {
+      this.startX = event.clientX;
+      this.startY = event.clientY;
+    }
+    this.startWidth = this.element.offsetWidth;
+    this.startHeight = this.element.offsetHeight;
+    if (this.startWidth > 0 && this.startHeight > 0) {
+      this.aspectRatio = this.startWidth / this.startHeight;
+    }
+    const pos = this.getPos();
+    if (pos !== void 0) {
+    }
+    this.container.dataset.resizeState = "true";
+    if (this.classNames.resizing) {
+      this.container.classList.add(this.classNames.resizing);
+    }
+    document.addEventListener("mousemove", this.handleMouseMove);
+    document.addEventListener("touchmove", this.handleTouchMove);
+    document.addEventListener("mouseup", this.handleMouseUp);
+    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keyup", this.handleKeyUp);
+  }
+  handleResize(deltaX, deltaY) {
+    if (!this.activeHandle) {
+      return;
+    }
+    const shouldPreserveAspectRatio = this.preserveAspectRatio || this.isShiftKeyPressed;
+    const { width, height } = this.calculateNewDimensions(this.activeHandle, deltaX, deltaY);
+    const constrained = this.applyConstraints(width, height, shouldPreserveAspectRatio);
+    this.element.style.width = `${constrained.width}px`;
+    this.element.style.height = `${constrained.height}px`;
+    if (this.onResize) {
+      this.onResize(constrained.width, constrained.height);
+    }
+  }
+  /**
+   * Calculates new dimensions based on mouse delta and resize direction.
+   *
+   * Takes the starting dimensions and applies the mouse movement delta
+   * according to the handle direction. For corner handles, both dimensions
+   * are affected. For edge handles, only one dimension changes. If aspect
+   * ratio should be preserved, delegates to applyAspectRatio.
+   *
+   * @param direction - The active resize handle direction
+   * @param deltaX - Horizontal mouse movement since resize start
+   * @param deltaY - Vertical mouse movement since resize start
+   * @returns The calculated width and height
+   */
+  calculateNewDimensions(direction, deltaX, deltaY) {
+    let newWidth = this.startWidth;
+    let newHeight = this.startHeight;
+    const isRight = direction.includes("right");
+    const isLeft = direction.includes("left");
+    const isBottom = direction.includes("bottom");
+    const isTop = direction.includes("top");
+    if (isRight) {
+      newWidth = this.startWidth + deltaX;
+    } else if (isLeft) {
+      newWidth = this.startWidth - deltaX;
+    }
+    if (isBottom) {
+      newHeight = this.startHeight + deltaY;
+    } else if (isTop) {
+      newHeight = this.startHeight - deltaY;
+    }
+    if (direction === "right" || direction === "left") {
+      newWidth = this.startWidth + (isRight ? deltaX : -deltaX);
+    }
+    if (direction === "top" || direction === "bottom") {
+      newHeight = this.startHeight + (isBottom ? deltaY : -deltaY);
+    }
+    const shouldPreserveAspectRatio = this.preserveAspectRatio || this.isShiftKeyPressed;
+    if (shouldPreserveAspectRatio) {
+      return this.applyAspectRatio(newWidth, newHeight, direction);
+    }
+    return { width: newWidth, height: newHeight };
+  }
+  /**
+   * Applies min/max constraints to dimensions.
+   *
+   * When aspect ratio is NOT preserved, constraints are applied independently
+   * to width and height. When aspect ratio IS preserved, constraints are
+   * applied while maintaining the aspect ratio—if one dimension hits a limit,
+   * the other is recalculated proportionally.
+   *
+   * This ensures that aspect ratio is never broken when constrained.
+   *
+   * @param width - The unconstrained width
+   * @param height - The unconstrained height
+   * @param preserveAspectRatio - Whether to maintain aspect ratio while constraining
+   * @returns The constrained dimensions
+   */
+  applyConstraints(width, height, preserveAspectRatio) {
+    var _a, _b, _c, _d;
+    if (!preserveAspectRatio) {
+      let constrainedWidth2 = Math.max(this.minSize.width, width);
+      let constrainedHeight2 = Math.max(this.minSize.height, height);
+      if ((_a = this.maxSize) == null ? void 0 : _a.width) {
+        constrainedWidth2 = Math.min(this.maxSize.width, constrainedWidth2);
+      }
+      if ((_b = this.maxSize) == null ? void 0 : _b.height) {
+        constrainedHeight2 = Math.min(this.maxSize.height, constrainedHeight2);
+      }
+      return { width: constrainedWidth2, height: constrainedHeight2 };
+    }
+    let constrainedWidth = width;
+    let constrainedHeight = height;
+    if (constrainedWidth < this.minSize.width) {
+      constrainedWidth = this.minSize.width;
+      constrainedHeight = constrainedWidth / this.aspectRatio;
+    }
+    if (constrainedHeight < this.minSize.height) {
+      constrainedHeight = this.minSize.height;
+      constrainedWidth = constrainedHeight * this.aspectRatio;
+    }
+    if (((_c = this.maxSize) == null ? void 0 : _c.width) && constrainedWidth > this.maxSize.width) {
+      constrainedWidth = this.maxSize.width;
+      constrainedHeight = constrainedWidth / this.aspectRatio;
+    }
+    if (((_d = this.maxSize) == null ? void 0 : _d.height) && constrainedHeight > this.maxSize.height) {
+      constrainedHeight = this.maxSize.height;
+      constrainedWidth = constrainedHeight * this.aspectRatio;
+    }
+    return { width: constrainedWidth, height: constrainedHeight };
+  }
+  /**
+   * Adjusts dimensions to maintain the original aspect ratio.
+   *
+   * For horizontal handles (left/right), uses width as the primary dimension
+   * and calculates height from it. For vertical handles (top/bottom), uses
+   * height as primary and calculates width. For corner handles, uses width
+   * as the primary dimension.
+   *
+   * @param width - The new width
+   * @param height - The new height
+   * @param direction - The active resize direction
+   * @returns Dimensions adjusted to preserve aspect ratio
+   */
+  applyAspectRatio(width, height, direction) {
+    const isHorizontal = direction === "left" || direction === "right";
+    const isVertical = direction === "top" || direction === "bottom";
+    if (isHorizontal) {
+      return {
+        width,
+        height: width / this.aspectRatio
+      };
+    }
+    if (isVertical) {
+      return {
+        width: height * this.aspectRatio,
+        height
+      };
+    }
+    return {
+      width,
+      height: width / this.aspectRatio
+    };
+  }
+};
+
 // src/utilities/canInsertNode.ts
 var import_state22 = require("@tiptap/pm/state");
 function canInsertNode(state, nodeType) {
@@ -6087,6 +6625,7 @@ var Tracker = class {
   NodePos,
   NodeView,
   PasteRule,
+  ResizableNodeview,
   Tracker,
   callOrReturn,
   canInsertNode,