@underverse-ui/underverse 1.0.63 → 1.0.64

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.63",
+  "version": "1.0.64",
   "sourceEntry": "src/index.ts",
   "totalExports": 217,
   "exports": [

package/dist/index.cjs

@@ -890,7 +890,15 @@ var en_default = {
       heading1: "Heading 1",
       heading2: "Heading 2",
       heading3: "Heading 3",
-      emoji: "Insert Emoji"
+      emoji: "Insert Emoji",
+      imageLayoutBlock: "Image Block",
+      imageLayoutLeft: "Wrap Text Right",
+      imageLayoutRight: "Wrap Text Left",
+      imageWidthSm: "Image Width Small",
+      imageWidthMd: "Image Width Medium",
+      imageWidthLg: "Image Width Large",
+      imageResetSize: "Reset Image Size",
+      imageDelete: "Delete Image"
     },
     slashCommand: {
       basicBlocks: "Basic Blocks",
@@ -1114,7 +1122,15 @@ var vi_default = {
       heading1: "Ti\xEAu \u0111\u1EC1 1",
       heading2: "Ti\xEAu \u0111\u1EC1 2",
       heading3: "Ti\xEAu \u0111\u1EC1 3",
-      emoji: "Ch\xE8n Emoji"
+      emoji: "Ch\xE8n Emoji",
+      imageLayoutBlock: "\u1EA2nh D\u1EA1ng Kh\u1ED1i",
+      imageLayoutLeft: "\u1EA2nh Tr\xE1i, Ch\u1EEF Ph\u1EA3i",
+      imageLayoutRight: "\u1EA2nh Ph\u1EA3i, Ch\u1EEF Tr\xE1i",
+      imageWidthSm: "\u1EA2nh Nh\u1ECF",
+      imageWidthMd: "\u1EA2nh V\u1EEBa",
+      imageWidthLg: "\u1EA2nh L\u1EDBn",
+      imageResetSize: "\u0110\u1EB7t L\u1EA1i K\xEDch Th\u01B0\u1EDBc \u1EA2nh",
+      imageDelete: "X\xF3a \u1EA2nh"
     },
     slashCommand: {
       basicBlocks: "Kh\u1ED1i c\u01A1 b\u1EA3n",
@@ -1338,7 +1354,15 @@ var ko_default = {
       heading1: "\uC81C\uBAA9 1",
       heading2: "\uC81C\uBAA9 2",
       heading3: "\uC81C\uBAA9 3",
-      emoji: "\uC774\uBAA8\uC9C0 \uC0BD\uC785"
+      emoji: "\uC774\uBAA8\uC9C0 \uC0BD\uC785",
+      imageLayoutBlock: "\uC774\uBBF8\uC9C0 \uBE14\uB85D",
+      imageLayoutLeft: "\uC67C\uCABD \uC774\uBBF8\uC9C0, \uC624\uB978\uCABD \uD14D\uC2A4\uD2B8",
+      imageLayoutRight: "\uC624\uB978\uCABD \uC774\uBBF8\uC9C0, \uC67C\uCABD \uD14D\uC2A4\uD2B8",
+      imageWidthSm: "\uC791\uC740 \uC774\uBBF8\uC9C0",
+      imageWidthMd: "\uC911\uAC04 \uC774\uBBF8\uC9C0",
+      imageWidthLg: "\uD070 \uC774\uBBF8\uC9C0",
+      imageResetSize: "\uC774\uBBF8\uC9C0 \uD06C\uAE30 \uCD08\uAE30\uD654",
+      imageDelete: "\uC774\uBBF8\uC9C0 \uC0AD\uC81C"
     },
     slashCommand: {
       basicBlocks: "\uAE30\uBCF8 \uBE14\uB85D",
@@ -1561,7 +1585,15 @@ var ja_default = {
       heading1: "\u898B\u51FA\u3057 1",
       heading2: "\u898B\u51FA\u3057 2",
       heading3: "\u898B\u51FA\u3057 3",
-      emoji: "\u7D75\u6587\u5B57\u3092\u633F\u5165"
+      emoji: "\u7D75\u6587\u5B57\u3092\u633F\u5165",
+      imageLayoutBlock: "\u753B\u50CF\u30D6\u30ED\u30C3\u30AF",
+      imageLayoutLeft: "\u753B\u50CF\u3092\u5DE6\u3001\u6587\u5B57\u3092\u53F3\u306B\u56DE\u308A\u8FBC\u307F",
+      imageLayoutRight: "\u753B\u50CF\u3092\u53F3\u3001\u6587\u5B57\u3092\u5DE6\u306B\u56DE\u308A\u8FBC\u307F",
+      imageWidthSm: "\u753B\u50CF \u5C0F",
+      imageWidthMd: "\u753B\u50CF \u4E2D",
+      imageWidthLg: "\u753B\u50CF \u5927",
+      imageResetSize: "\u753B\u50CF\u30B5\u30A4\u30BA\u3092\u30EA\u30BB\u30C3\u30C8",
+      imageDelete: "\u753B\u50CF\u3092\u524A\u9664"
     },
     slashCommand: {
       basicBlocks: "\u57FA\u672C\u30D6\u30ED\u30C3\u30AF",
@@ -22535,6 +22567,8 @@ var import_react44 = require("@tiptap/react");
 var import_jsx_runtime73 = 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) {
   if (typeof value === "number" && Number.isFinite(value)) return value;
   if (typeof value === "string") {
@@ -22546,6 +22580,33 @@ function toNullableNumber(value) {
 function clamp8(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
+function parseImageLayout(value) {
+  if (typeof value === "string" && IMAGE_LAYOUTS.has(value)) {
+    return value;
+  }
+  return "block";
+}
+function parseImageWidthPreset(value) {
+  if (typeof value === "string" && IMAGE_WIDTH_PRESETS.has(value)) {
+    return value;
+  }
+  return null;
+}
+function getImageLayoutStyles(layout) {
+  if (layout === "left") {
+    return {
+      "data-image-layout": "left",
+      style: "float:left;display:block;margin:0.25rem 1rem 0.75rem 0;"
+    };
+  }
+  if (layout === "right") {
+    return {
+      "data-image-layout": "right",
+      style: "float:right;display:block;margin:0.25rem 0 0.75rem 1rem;"
+    };
+  }
+  return {};
+}
 function ResizableImageNodeView(props) {
   const { node, selected, updateAttributes, editor, getPos } = props;
   const wrapperRef = (0, import_react43.useRef)(null);
@@ -22555,6 +22616,8 @@ function ResizableImageNodeView(props) {
   const widthAttr = toNullableNumber(node.attrs["width"]);
   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_react43.useRef)(null);
   (0, import_react43.useEffect)(() => {
     const img = imgRef.current;
@@ -22603,7 +22666,8 @@ function ResizableImageNodeView(props) {
     const dy = event.clientY - drag.startY;
     let nextW = drag.startW;
     let nextH = drag.startH;
-    if (event.ctrlKey) {
+    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);
@@ -22630,7 +22694,8 @@ function ResizableImageNodeView(props) {
     if (!drag) return;
     updateAttributes({
       width: Math.round(drag.lastW),
-      height: Math.round(drag.lastH)
+      height: Math.round(drag.lastH),
+      imageWidthPreset: null
     });
   };
   const onResizePointerUp = (event) => {
@@ -22648,14 +22713,15 @@ function ResizableImageNodeView(props) {
     finishResize();
   };
   const showHandle = selected || isHovered || isResizing;
-  const wrapperAlignClass = textAlign === "center" ? "mx-auto" : textAlign === "right" ? "ml-auto" : textAlign === "justify" ? "mx-auto" : "";
-  const wrapperWidthClass = "w-fit";
+  const wrapperAlignClass = imageLayout === "block" ? textAlign === "center" ? "mx-auto" : textAlign === "right" ? "ml-auto" : textAlign === "justify" ? "mx-auto" : "" : "";
+  const wrapperLayoutClass = imageLayout === "left" ? "float-left mr-4 mb-3 mt-1 clear-none max-w-[min(45%,20rem)]" : imageLayout === "right" ? "float-right ml-4 mb-3 mt-1 clear-none max-w-[min(45%,20rem)]" : "w-fit";
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     import_react44.NodeViewWrapper,
     {
       as: "div",
       ref: wrapperRef,
-      className: ["relative block align-middle max-w-full my-4", wrapperWidthClass, wrapperAlignClass].filter(Boolean).join(" "),
+      "data-image-layout": imageLayout,
+      className: ["relative block align-middle max-w-full my-4", wrapperLayoutClass, wrapperAlignClass].filter(Boolean).join(" "),
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       onClick: (e) => {
@@ -22725,6 +22791,25 @@ var ResizableImage = import_extension_image.default.extend({
           return Number.isFinite(parsed) ? parsed : null;
         },
         renderHTML: (attrs) => typeof attrs.height === "number" ? { height: attrs.height } : {}
+      },
+      imageLayout: {
+        default: "block",
+        parseHTML: (element) => {
+          const explicit = element.getAttribute("data-image-layout");
+          if (explicit) return parseImageLayout(explicit);
+          const floatValue = element.style.float;
+          if (floatValue === "left" || floatValue === "right") return floatValue;
+          return "block";
+        },
+        renderHTML: (attrs) => getImageLayoutStyles(parseImageLayout(attrs.imageLayout))
+      },
+      imageWidthPreset: {
+        default: null,
+        parseHTML: (element) => parseImageWidthPreset(element.getAttribute("data-image-size")),
+        renderHTML: (attrs) => {
+          const preset = parseImageWidthPreset(attrs.imageWidthPreset);
+          return preset ? { "data-image-size": preset } : {};
+        }
       }
     };
   },
@@ -22953,6 +23038,96 @@ var EditorColorPalette = ({
   )) })
 ] });
 
+// src/components/UEditor/image-commands.ts
+var import_state4 = require("@tiptap/pm/state");
+var IMAGE_WIDTHS_BY_LAYOUT = {
+  block: {
+    sm: 180,
+    md: 280,
+    lg: 380
+  },
+  wrap: {
+    sm: 140,
+    md: 200,
+    lg: 260
+  }
+};
+function isSelectedImage(editor) {
+  const { selection } = editor.state;
+  return selection instanceof import_state4.NodeSelection && selection.node.type.name === "image";
+}
+function applyImageLayout(editor, layout) {
+  const { state, view } = editor;
+  const { selection, schema } = state;
+  if (!(selection instanceof import_state4.NodeSelection) || selection.node.type.name !== "image") {
+    editor.chain().focus().updateAttributes("image", { imageLayout: layout }).run();
+    return;
+  }
+  let transaction = state.tr.setNodeMarkup(selection.from, void 0, {
+    ...selection.node.attrs,
+    imageLayout: layout
+  });
+  if (layout !== "block") {
+    const nextPos = transaction.mapping.map(selection.to);
+    const nextNode = transaction.doc.nodeAt(nextPos);
+    if (!nextNode || nextNode.type.name !== "paragraph") {
+      const paragraph = schema.nodes.paragraph?.create();
+      if (paragraph) {
+        transaction = transaction.insert(nextPos, paragraph);
+      }
+    }
+    const resolvedPos = transaction.doc.resolve(Math.min(nextPos + 1, transaction.doc.content.size));
+    transaction = transaction.setSelection(import_state4.TextSelection.near(resolvedPos));
+  } else {
+    const resolvedPos = transaction.doc.resolve(selection.from);
+    transaction = transaction.setSelection(import_state4.NodeSelection.create(transaction.doc, resolvedPos.pos));
+  }
+  view.dispatch(transaction.scrollIntoView());
+  view.focus();
+}
+function applyImageWidthPreset(editor, preset) {
+  const attrs = editor.getAttributes("image");
+  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();
+    return;
+  }
+  const { state, view } = editor;
+  const selection = state.selection;
+  const transaction = state.tr.setNodeMarkup(selection.from, void 0, {
+    ...selection.node.attrs,
+    width,
+    imageWidthPreset: preset
+  });
+  view.dispatch(transaction.scrollIntoView());
+  view.focus();
+}
+function resetImageSize(editor) {
+  if (!isSelectedImage(editor)) {
+    editor.chain().focus().updateAttributes("image", {
+      width: null,
+      height: null,
+      imageWidthPreset: null
+    }).run();
+    return;
+  }
+  const { state, view } = editor;
+  const selection = state.selection;
+  const transaction = state.tr.setNodeMarkup(selection.from, void 0, {
+    ...selection.node.attrs,
+    width: null,
+    height: null,
+    imageWidthPreset: null
+  });
+  view.dispatch(transaction.scrollIntoView());
+  view.focus();
+}
+function deleteSelectedImage(editor) {
+  if (!isSelectedImage(editor)) return;
+  editor.chain().focus().deleteSelection().run();
+}
+
 // src/components/UEditor/inputs.tsx
 var import_react46 = require("react");
 var import_lucide_react42 = require("lucide-react");
@@ -23289,6 +23464,10 @@ var EditorToolbar = ({
   const fileInputRef = (0, import_react48.useRef)(null);
   const [isUploadingImage, setIsUploadingImage] = (0, import_react48.useState)(false);
   const [imageUploadError, setImageUploadError] = (0, import_react48.useState)(null);
+  const isImageSelected = editor.isActive("image");
+  const imageAttrs = editor.getAttributes("image");
+  const imageLayout = imageAttrs.imageLayout === "left" || imageAttrs.imageLayout === "right" ? imageAttrs.imageLayout : "block";
+  const imageWidthPreset = imageAttrs.imageWidthPreset === "sm" || imageAttrs.imageWidthPreset === "md" || imageAttrs.imageWidthPreset === "lg" ? imageAttrs.imageWidthPreset : null;
   const insertImageFiles = async (files) => {
     if (files.length === 0) return;
     setIsUploadingImage(true);
@@ -23621,6 +23800,85 @@ var EditorToolbar = ({
                 void insertImageFiles(files);
               }
             }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.AlignCenter,
+              label: t("toolbar.imageLayoutBlock"),
+              onClick: () => applyImageLayout(editor, "block"),
+              active: isImageSelected && imageLayout === "block",
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.AlignLeft,
+              label: t("toolbar.imageLayoutLeft"),
+              onClick: () => applyImageLayout(editor, "left"),
+              active: isImageSelected && imageLayout === "left",
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.AlignRight,
+              label: t("toolbar.imageLayoutRight"),
+              onClick: () => applyImageLayout(editor, "right"),
+              active: isImageSelected && imageLayout === "right",
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            DropdownMenuItem,
+            {
+              label: t("toolbar.imageWidthSm"),
+              onClick: () => applyImageWidthPreset(editor, "sm"),
+              active: isImageSelected && imageWidthPreset === "sm",
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            DropdownMenuItem,
+            {
+              label: t("toolbar.imageWidthMd"),
+              onClick: () => applyImageWidthPreset(editor, "md"),
+              active: isImageSelected && imageWidthPreset === "md",
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            DropdownMenuItem,
+            {
+              label: t("toolbar.imageWidthLg"),
+              onClick: () => applyImageWidthPreset(editor, "lg"),
+              active: isImageSelected && imageWidthPreset === "lg",
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.RotateCcw,
+              label: t("toolbar.imageResetSize"),
+              onClick: () => resetImageSize(editor),
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.Trash2,
+              label: t("toolbar.imageDelete"),
+              onClick: () => deleteSelectedImage(editor),
+              disabled: !isImageSelected,
+              destructive: true
+            }
           )
         ] })
       }
@@ -23933,6 +24191,10 @@ var BubbleMenuContent = ({
   const { textColors, highlightColors } = useEditorColors();
   const [showLinkInput, setShowLinkInput] = (0, import_react49.useState)(false);
   const [showEditorColorPalette, setShowEditorColorPalette] = (0, import_react49.useState)(false);
+  const isImageSelected = editor.isActive("image");
+  const imageAttrs = editor.getAttributes("image");
+  const imageLayout = imageAttrs.imageLayout === "left" || imageAttrs.imageLayout === "right" ? imageAttrs.imageLayout : "block";
+  const imageWidthPreset = imageAttrs.imageWidthPreset === "sm" || imageAttrs.imageWidthPreset === "md" || imageAttrs.imageWidthPreset === "lg" ? imageAttrs.imageWidthPreset : null;
   (0, import_react49.useEffect)(() => {
     onKeepOpenChange?.(showLinkInput);
   }, [onKeepOpenChange, showLinkInput]);
@@ -24007,6 +24269,20 @@ var BubbleMenuContent = ({
       ) })
     ] });
   }
+  if (isImageSelected) {
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-0.5 p-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ToolbarButton, { onClick: () => applyImageLayout(editor, "block"), active: imageLayout === "block", title: t("toolbar.imageLayoutBlock"), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react45.AlignCenter, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ToolbarButton, { onClick: () => applyImageLayout(editor, "left"), active: imageLayout === "left", title: t("toolbar.imageLayoutLeft"), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react45.AlignLeft, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ToolbarButton, { onClick: () => applyImageLayout(editor, "right"), active: imageLayout === "right", title: t("toolbar.imageLayoutRight"), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react45.AlignRight, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ToolbarButton, { onClick: () => applyImageWidthPreset(editor, "sm"), active: imageWidthPreset === "sm", title: t("toolbar.imageWidthSm"), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-[10px] font-semibold", children: "S" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ToolbarButton, { onClick: () => applyImageWidthPreset(editor, "md"), active: imageWidthPreset === "md", title: t("toolbar.imageWidthMd"), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-[10px] font-semibold", children: "M" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ToolbarButton, { onClick: () => applyImageWidthPreset(editor, "lg"), active: imageWidthPreset === "lg", title: t("toolbar.imageWidthLg"), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-[10px] font-semibold", children: "L" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ToolbarButton, { onClick: () => resetImageSize(editor), title: t("toolbar.imageResetSize"), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react45.RotateCcw, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ToolbarButton, { onClick: () => deleteSelectedImage(editor), title: t("toolbar.imageDelete"), className: "text-destructive hover:text-destructive", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react45.Trash2, { className: "w-4 h-4" }) })
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-0.5 p-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react45.Bold, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react45.Italic, { className: "w-4 h-4" }) }),
@@ -24059,19 +24335,28 @@ var BubbleMenuContent = ({
   ] });
 };
 var CustomBubbleMenu = ({ editor }) => {
+  const SHOW_DELAY_MS = 180;
   const [isVisible, setIsVisible] = (0, import_react49.useState)(false);
   const [position, setPosition] = (0, import_react49.useState)({ top: 0, left: 0 });
   const menuRef = (0, import_react49.useRef)(null);
   const keepOpenRef = (0, import_react49.useRef)(false);
+  const showTimeoutRef = (0, import_react49.useRef)(null);
   const setKeepOpen = (0, import_react49.useCallback)((next) => {
     keepOpenRef.current = next;
     if (next) setIsVisible(true);
   }, []);
   (0, import_react49.useEffect)(() => {
+    const clearShowTimeout = () => {
+      if (showTimeoutRef.current) {
+        clearTimeout(showTimeoutRef.current);
+        showTimeoutRef.current = null;
+      }
+    };
     const updatePosition = () => {
       const { state, view } = editor;
       const { from, to, empty } = state.selection;
       if (!keepOpenRef.current && (empty || !view.hasFocus())) {
+        clearShowTimeout();
         setIsVisible(false);
         return;
       }
@@ -24080,15 +24365,28 @@ var CustomBubbleMenu = ({ editor }) => {
       const left = (start.left + end.left) / 2;
       const top = start.top - 10;
       setPosition({ top, left });
-      setIsVisible(true);
+      if (keepOpenRef.current) {
+        clearShowTimeout();
+        setIsVisible(true);
+        return;
+      }
+      clearShowTimeout();
+      showTimeoutRef.current = setTimeout(() => {
+        setIsVisible(true);
+        showTimeoutRef.current = null;
+      }, SHOW_DELAY_MS);
     };
     const handleBlur = () => {
-      if (!keepOpenRef.current) setIsVisible(false);
+      if (!keepOpenRef.current) {
+        clearShowTimeout();
+        setIsVisible(false);
+      }
     };
     editor.on("selectionUpdate", updatePosition);
     editor.on("focus", updatePosition);
     editor.on("blur", handleBlur);
     return () => {
+      clearShowTimeout();
       editor.off("selectionUpdate", updatePosition);
       editor.off("focus", updatePosition);
       editor.off("blur", handleBlur);
@@ -24572,7 +24870,21 @@ var UEditor = import_react50.default.forwardRef(({
           "[&_blockquote]:rounded-r-lg",
           "[&_blockquote]:italic",
           "[&_blockquote]:text-muted-foreground",
-          "[&_blockquote_p]:my-0"
+          "[&_blockquote_p]:my-0",
+          "[&_[data-image-layout='left']+p]:mt-1",
+          "[&_[data-image-layout='left']+p]:min-h-[5rem]",
+          "[&_[data-image-layout='right']+p]:mt-1",
+          "[&_[data-image-layout='right']+p]:min-h-[5rem]",
+          "max-md:[&_[data-image-layout='left']]:float-none",
+          "max-md:[&_[data-image-layout='left']]:mr-0",
+          "max-md:[&_[data-image-layout='left']]:ml-0",
+          "max-md:[&_[data-image-layout='left']]:max-w-full",
+          "max-md:[&_[data-image-layout='right']]:float-none",
+          "max-md:[&_[data-image-layout='right']]:mr-0",
+          "max-md:[&_[data-image-layout='right']]:ml-0",
+          "max-md:[&_[data-image-layout='right']]:max-w-full",
+          "max-md:[&_[data-image-layout='left']+p]:min-h-0",
+          "max-md:[&_[data-image-layout='right']+p]:min-h-0"
         )
       }
     },