@underverse-ui/underverse 1.0.141 → 1.0.142

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.141",
+  "version": "1.0.142",
   "sourceEntry": "src/index.ts",
   "totalExports": 232,
   "exports": [

package/dist/index.cjs

@@ -25431,6 +25431,7 @@ var import_extension_typography = __toESM(require("@tiptap/extension-typography"
 var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"), 1);
 var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"), 1);
 var import_extension_horizontal_rule = __toESM(require("@tiptap/extension-horizontal-rule"), 1);
+var import_extension_gapcursor = __toESM(require("@tiptap/extension-gapcursor"), 1);
 var import_lowlight = require("lowlight");
 
 // src/components/UEditor/slash-command.tsx
@@ -26206,7 +26207,6 @@ var import_core8 = require("@tiptap/core");
 var import_react54 = require("@tiptap/react");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var MIN_IMAGE_SIZE_PX = 40;
-var AXIS_LOCK_THRESHOLD_PX = 4;
 var IMAGE_LAYOUTS = /* @__PURE__ */ new Set(["block", "left", "right"]);
 var IMAGE_WIDTH_PRESETS = /* @__PURE__ */ new Set(["sm", "md", "lg"]);
 function toNullableNumber(value) {
@@ -26247,6 +26247,41 @@ function getImageLayoutStyles(layout) {
   }
   return {};
 }
+function getAspectRatio({
+  img,
+  widthAttr,
+  heightAttr,
+  fallbackWidth,
+  fallbackHeight
+}) {
+  if (widthAttr && heightAttr) return widthAttr / heightAttr;
+  if (img.naturalWidth > 0 && img.naturalHeight > 0) return img.naturalWidth / img.naturalHeight;
+  if (fallbackWidth > 0 && fallbackHeight > 0) return fallbackWidth / fallbackHeight;
+  return 1;
+}
+function sizeFromWidth(width, aspect, maxWidth) {
+  let nextW = clamp8(width, MIN_IMAGE_SIZE_PX, maxWidth);
+  let nextH = nextW / aspect;
+  if (nextH < MIN_IMAGE_SIZE_PX) {
+    nextH = MIN_IMAGE_SIZE_PX;
+    nextW = clamp8(nextH * aspect, MIN_IMAGE_SIZE_PX, maxWidth);
+    nextH = nextW / aspect;
+  }
+  return { width: nextW, height: nextH };
+}
+function sizeFromHeight(height, aspect, maxWidth) {
+  let nextH = Math.max(MIN_IMAGE_SIZE_PX, height);
+  let nextW = nextH * aspect;
+  if (nextW > maxWidth) {
+    nextW = maxWidth;
+    nextH = nextW / aspect;
+  }
+  if (nextW < MIN_IMAGE_SIZE_PX) {
+    nextW = MIN_IMAGE_SIZE_PX;
+    nextH = nextW / aspect;
+  }
+  return { width: nextW, height: nextH };
+}
 function ResizableImageNodeView(props) {
   const { node, selected, updateAttributes, editor, getPos } = props;
   const wrapperRef = (0, import_react53.useRef)(null);
@@ -26257,7 +26292,6 @@ function ResizableImageNodeView(props) {
   const heightAttr = toNullableNumber(node.attrs["height"]);
   const textAlign = String(node.attrs["textAlign"] ?? "");
   const imageLayout = parseImageLayout(node.attrs["imageLayout"]);
-  const preserveAspectByDefault = imageLayout === "left" || imageLayout === "right";
   const dragStateRef = (0, import_react53.useRef)(null);
   (0, import_react53.useEffect)(() => {
     const img = imgRef.current;
@@ -26281,7 +26315,13 @@ function ResizableImageNodeView(props) {
     const maxW = editorEl ? editorEl.getBoundingClientRect().width : Number.POSITIVE_INFINITY;
     const startW = Math.max(MIN_IMAGE_SIZE_PX, rect.width);
     const startH = Math.max(MIN_IMAGE_SIZE_PX, rect.height);
-    const aspect = startH > 0 ? startW / startH : 1;
+    const aspect = getAspectRatio({
+      img,
+      widthAttr,
+      heightAttr,
+      fallbackWidth: startW,
+      fallbackHeight: startH
+    });
     dragStateRef.current = {
       pointerId: event.pointerId,
       startX: event.clientX,
@@ -26290,7 +26330,6 @@ function ResizableImageNodeView(props) {
       startH,
       lastW: startW,
       lastH: startH,
-      axis: null,
       aspect,
       maxW: Math.max(MIN_IMAGE_SIZE_PX, maxW)
     };
@@ -26304,24 +26343,9 @@ function ResizableImageNodeView(props) {
     if (event.pointerId !== drag.pointerId) return;
     const dx = event.clientX - drag.startX;
     const dy = event.clientY - drag.startY;
-    let nextW = drag.startW;
-    let nextH = drag.startH;
-    const shouldPreserveAspect = preserveAspectByDefault ? !event.ctrlKey : event.ctrlKey;
-    if (shouldPreserveAspect) {
-      if (Math.abs(dx) >= Math.abs(dy)) {
-        nextW = clamp8(drag.startW + dx, MIN_IMAGE_SIZE_PX, drag.maxW);
-        nextH = clamp8(nextW / drag.aspect, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
-      } else {
-        nextH = clamp8(drag.startH + dy, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
-        nextW = clamp8(nextH * drag.aspect, MIN_IMAGE_SIZE_PX, drag.maxW);
-      }
-    } else {
-      if (!drag.axis && (Math.abs(dx) > AXIS_LOCK_THRESHOLD_PX || Math.abs(dy) > AXIS_LOCK_THRESHOLD_PX)) {
-        drag.axis = Math.abs(dx) >= Math.abs(dy) ? "x" : "y";
-      }
-      if (drag.axis === "x") nextW = clamp8(drag.startW + dx, MIN_IMAGE_SIZE_PX, drag.maxW);
-      if (drag.axis === "y") nextH = clamp8(drag.startH + dy, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
-    }
+    const nextSize = Math.abs(dx) >= Math.abs(dy) ? sizeFromWidth(drag.startW + dx, drag.aspect, drag.maxW) : sizeFromHeight(drag.startH + dy, drag.aspect, drag.maxW);
+    const nextW = nextSize.width;
+    const nextH = nextSize.height;
     drag.lastW = nextW;
     drag.lastH = nextH;
     img.style.width = `${Math.round(nextW)}px`;
@@ -27244,6 +27268,7 @@ function buildUEditorExtensions({
       }
     }),
     import_extension_horizontal_rule.default,
+    import_extension_gapcursor.default,
     import_extension_link.default.configure({
       openOnClick: false,
       protocols: ["http", "https", "mailto", "tel"],
@@ -27593,6 +27618,43 @@ function isSelectedImage(editor) {
   const { selection } = editor.state;
   return selection instanceof import_state6.NodeSelection && selection.node.type.name === "image";
 }
+function toPositiveNumber(value) {
+  if (typeof value === "number" && Number.isFinite(value) && value > 0) return value;
+  if (typeof value === "string") {
+    const parsed = Number.parseInt(value, 10);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+  }
+  return null;
+}
+function getImageElementAtSelection(editor, pos) {
+  const nodeDom = editor.view.nodeDOM(pos);
+  if (!(nodeDom instanceof HTMLElement)) return null;
+  if (nodeDom.tagName === "IMG") return nodeDom;
+  return nodeDom.querySelector("img");
+}
+function getImageAspectRatio(editor, attrs, pos) {
+  const widthAttr = toPositiveNumber(attrs.width);
+  const heightAttr = toPositiveNumber(attrs.height);
+  if (widthAttr && heightAttr) return widthAttr / heightAttr;
+  const imageElement = typeof pos === "number" ? getImageElementAtSelection(editor, pos) : null;
+  if (!imageElement) return null;
+  if (imageElement.naturalWidth > 0 && imageElement.naturalHeight > 0) {
+    return imageElement.naturalWidth / imageElement.naturalHeight;
+  }
+  const rect = imageElement.getBoundingClientRect();
+  if (rect.width > 0 && rect.height > 0) return rect.width / rect.height;
+  const width = toPositiveNumber(imageElement.getAttribute("width")) ?? toPositiveNumber(imageElement.style.width);
+  const height = toPositiveNumber(imageElement.getAttribute("height")) ?? toPositiveNumber(imageElement.style.height);
+  return width && height ? width / height : null;
+}
+function getImagePresetAttributes(editor, width, preset, attrs, pos) {
+  const aspect = getImageAspectRatio(editor, attrs, pos);
+  return {
+    width,
+    height: aspect ? Math.round(width / aspect) : toPositiveNumber(attrs.height),
+    imageWidthPreset: preset
+  };
+}
 function applyImageLayout(editor, layout) {
   const { state, view } = editor;
   const { selection, schema } = state;
@@ -27627,15 +27689,15 @@ function applyImageWidthPreset(editor, preset) {
   const mode = attrs.imageLayout === "left" || attrs.imageLayout === "right" ? "wrap" : "block";
   const width = IMAGE_WIDTHS_BY_LAYOUT[mode][preset];
   if (!isSelectedImage(editor)) {
-    editor.chain().focus().updateAttributes("image", { width, imageWidthPreset: preset }).run();
+    editor.chain().focus().updateAttributes("image", getImagePresetAttributes(editor, width, preset, attrs)).run();
     return;
   }
   const { state, view } = editor;
   const selection = state.selection;
+  const nextAttrs = getImagePresetAttributes(editor, width, preset, selection.node.attrs, selection.from);
   const transaction = state.tr.setNodeMarkup(selection.from, void 0, {
     ...selection.node.attrs,
-    width,
-    imageWidthPreset: preset
+    ...nextAttrs
   });
   view.dispatch(transaction.scrollIntoView());
   view.focus();
@@ -29562,10 +29624,22 @@ var CustomBubbleMenu = ({
         setIsVisible(false);
         return;
       }
-      const start = view.coordsAtPos(from);
-      const end = view.coordsAtPos(to);
-      const left = (start.left + end.left) / 2;
-      const top = start.top - BUBBLE_MENU_OFFSET;
+      let start;
+      let end;
+      try {
+        start = view.coordsAtPos(from);
+        end = view.coordsAtPos(to);
+      } catch {
+        clearShowTimeout();
+        setIsVisible(false);
+        return;
+      }
+      const viewportPadding = 8;
+      const left = Math.min(
+        window.innerWidth - viewportPadding,
+        Math.max(viewportPadding, (start.left + end.left) / 2)
+      );
+      const top = Math.max(viewportPadding, start.top - BUBBLE_MENU_OFFSET);
       setPosition({ top, left });
       if (keepOpenRef.current) {
         clearShowTimeout();
@@ -29587,11 +29661,17 @@ var CustomBubbleMenu = ({
     editor.on("selectionUpdate", updatePosition);
     editor.on("focus", updatePosition);
     editor.on("blur", handleBlur);
+    editor.on("transaction", updatePosition);
+    editor.on("update", updatePosition);
+    const animationFrameId = requestAnimationFrame(updatePosition);
     return () => {
+      cancelAnimationFrame(animationFrameId);
       clearShowTimeout();
       editor.off("selectionUpdate", updatePosition);
       editor.off("focus", updatePosition);
       editor.off("blur", handleBlur);
+      editor.off("transaction", updatePosition);
+      editor.off("update", updatePosition);
     };
   }, [editor]);
   if (!isVisible) return null;
@@ -29601,7 +29681,7 @@ var CustomBubbleMenu = ({
       {
         ref: menuRef,
         "data-popover": true,
-        className: "fixed z-99999 flex rounded-xl border border-border/40 bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 zoom-in-95",
+        className: "fixed z-[99999] flex rounded-xl border border-border/40 bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 zoom-in-95",
         style: {
           top: `${position.top}px`,
           left: `${position.left}px`,
@@ -35513,6 +35593,17 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
   "[&_.is-editor-empty]:before:float-left",
   "[&_.is-editor-empty]:before:pointer-events-none",
   "[&_.is-editor-empty]:before:h-0",
+  "[&_.ProseMirror-gapcursor]:pointer-events-none",
+  "[&_.ProseMirror-gapcursor]:absolute",
+  "[&_.ProseMirror-gapcursor]:hidden",
+  "[&_.ProseMirror-gapcursor:after]:content-['']",
+  "[&_.ProseMirror-gapcursor:after]:block",
+  "[&_.ProseMirror-gapcursor:after]:absolute",
+  "[&_.ProseMirror-gapcursor:after]:top-[-2px]",
+  "[&_.ProseMirror-gapcursor:after]:w-8",
+  "[&_.ProseMirror-gapcursor:after]:border-t-2",
+  "[&_.ProseMirror-gapcursor:after]:border-primary",
+  "[&.ProseMirror-focused_.ProseMirror-gapcursor]:block",
   "[&_ul[data-type='taskList']]:list-none",
   "[&_ul[data-type='taskList']]:pl-0",
   "[&_ul[data-type='taskList']_li]:flex",