@underverse-ui/underverse 1.0.63 → 1.0.64

package/dist/index.js

@@ -708,7 +708,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",
@@ -932,7 +940,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",
@@ -1156,7 +1172,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",
@@ -1379,7 +1403,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",
@@ -22381,6 +22413,8 @@ import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 import { jsx as jsx73, jsxs as jsxs63 } from "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") {
@@ -22392,6 +22426,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 = useRef25(null);
@@ -22401,6 +22462,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 = useRef25(null);
   useEffect30(() => {
     const img = imgRef.current;
@@ -22449,7 +22512,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);
@@ -22476,7 +22540,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) => {
@@ -22494,14 +22559,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__ */ jsxs63(
     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) => {
@@ -22571,6 +22637,25 @@ var ResizableImage = Image3.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 } : {};
+        }
       }
     };
   },
@@ -22758,6 +22843,7 @@ import {
   Palette as Palette2,
   Quote as QuoteIcon,
   Redo as RedoIcon,
+  RotateCcw as RotateCcw2,
   Smile as Smile3,
   Strikethrough as StrikethroughIcon,
   Subscript as SubscriptIcon,
@@ -22833,6 +22919,96 @@ var EditorColorPalette = ({
   )) })
 ] });
 
+// src/components/UEditor/image-commands.ts
+import { NodeSelection, TextSelection } from "@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 NodeSelection && selection.node.type.name === "image";
+}
+function applyImageLayout(editor, layout) {
+  const { state, view } = editor;
+  const { selection, schema } = state;
+  if (!(selection instanceof 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(TextSelection.near(resolvedPos));
+  } else {
+    const resolvedPos = transaction.doc.resolve(selection.from);
+    transaction = transaction.setSelection(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
 import { useEffect as useEffect31, useRef as useRef26, useState as useState42 } from "react";
 import { Check as Check10, X as X18 } from "lucide-react";
@@ -23169,6 +23345,10 @@ var EditorToolbar = ({
   const fileInputRef = useRef28(null);
   const [isUploadingImage, setIsUploadingImage] = useState44(false);
   const [imageUploadError, setImageUploadError] = useState44(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);
@@ -23501,6 +23681,85 @@ var EditorToolbar = ({
                 void insertImageFiles(files);
               }
             }
+          ),
+          /* @__PURE__ */ jsx77("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ jsx77(
+            DropdownMenuItem,
+            {
+              icon: AlignCenter,
+              label: t("toolbar.imageLayoutBlock"),
+              onClick: () => applyImageLayout(editor, "block"),
+              active: isImageSelected && imageLayout === "block",
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ jsx77(
+            DropdownMenuItem,
+            {
+              icon: AlignLeft,
+              label: t("toolbar.imageLayoutLeft"),
+              onClick: () => applyImageLayout(editor, "left"),
+              active: isImageSelected && imageLayout === "left",
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ jsx77(
+            DropdownMenuItem,
+            {
+              icon: AlignRight,
+              label: t("toolbar.imageLayoutRight"),
+              onClick: () => applyImageLayout(editor, "right"),
+              active: isImageSelected && imageLayout === "right",
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ jsx77("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ jsx77(
+            DropdownMenuItem,
+            {
+              label: t("toolbar.imageWidthSm"),
+              onClick: () => applyImageWidthPreset(editor, "sm"),
+              active: isImageSelected && imageWidthPreset === "sm",
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ jsx77(
+            DropdownMenuItem,
+            {
+              label: t("toolbar.imageWidthMd"),
+              onClick: () => applyImageWidthPreset(editor, "md"),
+              active: isImageSelected && imageWidthPreset === "md",
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ jsx77(
+            DropdownMenuItem,
+            {
+              label: t("toolbar.imageWidthLg"),
+              onClick: () => applyImageWidthPreset(editor, "lg"),
+              active: isImageSelected && imageWidthPreset === "lg",
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ jsx77("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ jsx77(
+            DropdownMenuItem,
+            {
+              icon: RotateCcw2,
+              label: t("toolbar.imageResetSize"),
+              onClick: () => resetImageSize(editor),
+              disabled: !isImageSelected
+            }
+          ),
+          /* @__PURE__ */ jsx77(
+            DropdownMenuItem,
+            {
+              icon: Trash22,
+              label: t("toolbar.imageDelete"),
+              onClick: () => deleteSelectedImage(editor),
+              disabled: !isImageSelected,
+              destructive: true
+            }
           )
         ] })
       }
@@ -23619,6 +23878,9 @@ var EditorToolbar = ({
 import React70, { useCallback as useCallback17, useEffect as useEffect33, useMemo as useMemo22, useRef as useRef29, useState as useState45 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import {
+  AlignCenter as AlignCenter2,
+  AlignLeft as AlignLeft2,
+  AlignRight as AlignRight2,
   Bold as BoldIcon2,
   Code as CodeIcon2,
   FileCode as FileCode4,
@@ -23634,9 +23896,11 @@ import {
   Palette as Palette3,
   Plus as Plus3,
   Quote as QuoteIcon2,
+  RotateCcw as RotateCcw3,
   Subscript as SubscriptIcon2,
   Superscript as SuperscriptIcon2,
   Table as TableIcon2,
+  Trash2 as Trash23,
   Type as Type3,
   Underline as UnderlineIcon2,
   Strikethrough as StrikethroughIcon2
@@ -23835,6 +24099,10 @@ var BubbleMenuContent = ({
   const { textColors, highlightColors } = useEditorColors();
   const [showLinkInput, setShowLinkInput] = useState45(false);
   const [showEditorColorPalette, setShowEditorColorPalette] = useState45(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;
   useEffect33(() => {
     onKeepOpenChange?.(showLinkInput);
   }, [onKeepOpenChange, showLinkInput]);
@@ -23909,6 +24177,20 @@ var BubbleMenuContent = ({
       ) })
     ] });
   }
+  if (isImageSelected) {
+    return /* @__PURE__ */ jsxs68("div", { className: "flex items-center gap-0.5 p-1", children: [
+      /* @__PURE__ */ jsx78(ToolbarButton, { onClick: () => applyImageLayout(editor, "block"), active: imageLayout === "block", title: t("toolbar.imageLayoutBlock"), children: /* @__PURE__ */ jsx78(AlignCenter2, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsx78(ToolbarButton, { onClick: () => applyImageLayout(editor, "left"), active: imageLayout === "left", title: t("toolbar.imageLayoutLeft"), children: /* @__PURE__ */ jsx78(AlignLeft2, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsx78(ToolbarButton, { onClick: () => applyImageLayout(editor, "right"), active: imageLayout === "right", title: t("toolbar.imageLayoutRight"), children: /* @__PURE__ */ jsx78(AlignRight2, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsx78("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+      /* @__PURE__ */ jsx78(ToolbarButton, { onClick: () => applyImageWidthPreset(editor, "sm"), active: imageWidthPreset === "sm", title: t("toolbar.imageWidthSm"), children: /* @__PURE__ */ jsx78("span", { className: "text-[10px] font-semibold", children: "S" }) }),
+      /* @__PURE__ */ jsx78(ToolbarButton, { onClick: () => applyImageWidthPreset(editor, "md"), active: imageWidthPreset === "md", title: t("toolbar.imageWidthMd"), children: /* @__PURE__ */ jsx78("span", { className: "text-[10px] font-semibold", children: "M" }) }),
+      /* @__PURE__ */ jsx78(ToolbarButton, { onClick: () => applyImageWidthPreset(editor, "lg"), active: imageWidthPreset === "lg", title: t("toolbar.imageWidthLg"), children: /* @__PURE__ */ jsx78("span", { className: "text-[10px] font-semibold", children: "L" }) }),
+      /* @__PURE__ */ jsx78("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+      /* @__PURE__ */ jsx78(ToolbarButton, { onClick: () => resetImageSize(editor), title: t("toolbar.imageResetSize"), children: /* @__PURE__ */ jsx78(RotateCcw3, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsx78(ToolbarButton, { onClick: () => deleteSelectedImage(editor), title: t("toolbar.imageDelete"), className: "text-destructive hover:text-destructive", children: /* @__PURE__ */ jsx78(Trash23, { className: "w-4 h-4" }) })
+    ] });
+  }
   return /* @__PURE__ */ jsxs68("div", { className: "flex items-center gap-0.5 p-1", children: [
     /* @__PURE__ */ jsx78(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ jsx78(BoldIcon2, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ jsx78(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ jsx78(ItalicIcon2, { className: "w-4 h-4" }) }),
@@ -23961,19 +24243,28 @@ var BubbleMenuContent = ({
   ] });
 };
 var CustomBubbleMenu = ({ editor }) => {
+  const SHOW_DELAY_MS = 180;
   const [isVisible, setIsVisible] = useState45(false);
   const [position, setPosition] = useState45({ top: 0, left: 0 });
   const menuRef = useRef29(null);
   const keepOpenRef = useRef29(false);
+  const showTimeoutRef = useRef29(null);
   const setKeepOpen = useCallback17((next) => {
     keepOpenRef.current = next;
     if (next) setIsVisible(true);
   }, []);
   useEffect33(() => {
+    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;
       }
@@ -23982,15 +24273,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);
@@ -24474,7 +24778,21 @@ var UEditor = React71.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"
         )
       }
     },