@cyberyozh/text-editor 0.1.11 → 0.1.13

package/dist/editor.mjs

@@ -1,5 +1,5 @@
 // src/editor/editor.tsx
-import { useState as useState13, useEffect as useEffect10 } from "react";
+import { useState as useState12, useEffect as useEffect9 } from "react";
 import { NodeSelection } from "@tiptap/pm/state";
 import { Slice } from "@tiptap/pm/model";
 import { useEditor, EditorContent } from "@tiptap/react";
@@ -1892,14 +1892,39 @@ var ImageDialog = ({
   const [dragActive, setDragActive] = useState6(false);
   const inputRef = useRef6(null);
   const resolvedInitialUrl = initialAttrs ? resolveImageSrc({ fileId: initialAttrs.fileId, src: initialAttrs.src }, { getImageById }) : "";
+  const getConstrainedDimensions = () => {
+    if (!initialAttrs?.width || !initialAttrs?.height) {
+      return { width: 0, height: 0 };
+    }
+    let maxWidth;
+    try {
+      const editorElement = document.querySelector(".tiptap-content-wrapper");
+      if (editorElement && editorElement.clientWidth > 0) {
+        maxWidth = editorElement.clientWidth - 32;
+      }
+    } catch {
+    }
+    if (maxWidth && initialAttrs.width > maxWidth) {
+      const aspectRatio = initialAttrs.height / initialAttrs.width;
+      return {
+        width: maxWidth,
+        height: Math.round(maxWidth * aspectRatio)
+      };
+    }
+    return {
+      width: initialAttrs.width,
+      height: initialAttrs.height
+    };
+  };
+  const constrainedDimensions = getConstrainedDimensions();
   const [formState, setFormState] = useState6({
     file: null,
     title: initialAttrs?.title || "",
     alt: initialAttrs?.alt || "",
     caption: initialAttrs?.caption || "",
     fileUrl: resolvedInitialUrl,
-    width: initialAttrs?.width || 0,
-    height: initialAttrs?.height || 0
+    width: constrainedDimensions.width,
+    height: constrainedDimensions.height
   });
   const handleSelectFile = (file) => {
     if (!file) return;
@@ -1907,15 +1932,34 @@ var ImageDialog = ({
     const img = new Image();
     img.src = imageUrl;
     img.onload = () => {
-      const { width, height } = img;
+      const naturalWidth = img.width;
+      const naturalHeight = img.height;
+      const naturalAspectRatio = naturalHeight / naturalWidth;
+      let maxWidth;
+      try {
+        const editorElement = document.querySelector(".tiptap-content-wrapper");
+        if (editorElement && editorElement.clientWidth > 0) {
+          maxWidth = editorElement.clientWidth - 32;
+        }
+      } catch {
+      }
+      let finalWidth;
+      let finalHeight;
+      if (maxWidth && naturalWidth > maxWidth) {
+        finalWidth = maxWidth;
+        finalHeight = Math.round(maxWidth * naturalAspectRatio);
+      } else {
+        finalWidth = naturalWidth;
+        finalHeight = naturalHeight;
+      }
       setFormState((prev) => ({
         ...prev,
         file,
         fileUrl: imageUrl,
         title: file.name,
         alt: file.name,
-        width,
-        height
+        width: finalWidth,
+        height: finalHeight
       }));
     };
   };
@@ -1983,7 +2027,9 @@ var ImageDialog = ({
     onImageEdit({
       alt: formState.alt,
       title: formState.title,
-      caption: formState.caption
+      caption: formState.caption,
+      width: formState.width || void 0,
+      height: formState.height || void 0
     });
     handleClose();
   };
@@ -3222,8 +3268,9 @@ var BaseFigure = Image2.extend({
   isolating: true,
   selectable: false,
   addOptions() {
+    const parentOptions = this.parent?.() || {};
     return {
-      HTMLAttributes: {},
+      ...parentOptions,
       getImageById: void 0,
       onFigureClick: void 0
     };
@@ -3757,7 +3804,7 @@ var BaseLegacyFigure = Image3.extend({
 
 // src/extensions/views/node-views/callout.tsx
 import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
-import { useState as useState11 } from "react";
+import { useState as useState10 } from "react";
 
 // src/icons/color/TiptapCalloutError.tsx
 import { jsx as jsx71, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -4346,27 +4393,23 @@ var PromptContent = ({ children, isEmpty, placeholder }) => /* @__PURE__ */ jsx8
   }
 ) });
 
-// src/extensions/views/components/table.tsx
-import { useEffect as useEffect8, useRef as useRef10, useState as useState10 } from "react";
-import { jsx as jsx82, jsxs as jsxs33 } from "react/jsx-runtime";
-
 // src/extensions/views/components/video.tsx
-import { jsx as jsx83, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs33 } from "react/jsx-runtime";
 var Video = ({ src, children }) => {
   const videoInfo = detectVideoHosting(src);
   if (!videoInfo?.embedUrl) {
-    return /* @__PURE__ */ jsxs34("div", { className: "video-node", children: [
-      /* @__PURE__ */ jsx83("div", { className: "video-error", children: /* @__PURE__ */ jsx83("span", { children: "Unsupported or invalid video URL" }) }),
+    return /* @__PURE__ */ jsxs33("div", { className: "video-node", children: [
+      /* @__PURE__ */ jsx82("div", { className: "video-error", children: /* @__PURE__ */ jsx82("span", { children: "Unsupported or invalid video URL" }) }),
       children
     ] });
   }
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: "video-node",
       "data-video": "",
       children: [
-        /* @__PURE__ */ jsx83("div", { className: "video-player-wrapper", children: /* @__PURE__ */ jsx83(
+        /* @__PURE__ */ jsx82("div", { className: "video-player-wrapper", children: /* @__PURE__ */ jsx82(
           "iframe",
           {
             className: "video-iframe",
@@ -4383,13 +4426,13 @@ var Video = ({ src, children }) => {
 };
 
 // src/editor/controls/emoji-picker.tsx
-import { useEffect as useEffect9, useRef as useRef11 } from "react";
+import { useEffect as useEffect8, useRef as useRef10 } from "react";
 import EmojiPicker from "emoji-picker-react";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var EmojiPickerComponent = ({ isOpen, onClose, onEmojiSelect }) => {
-  const pickerRef = useRef11(null);
+  const pickerRef = useRef10(null);
   const translations2 = useTiptapTranslations();
-  useEffect9(() => {
+  useEffect8(() => {
     const handleClickOutside = (event) => {
       if (pickerRef.current && !pickerRef.current.contains(event.target)) {
         onClose();
@@ -4403,12 +4446,12 @@ var EmojiPickerComponent = ({ isOpen, onClose, onEmojiSelect }) => {
     };
   }, [isOpen, onClose]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx83(
     "div",
     {
       ref: pickerRef,
       className: "tiptap__emoji-picker-wrapper",
-      children: /* @__PURE__ */ jsx84(
+      children: /* @__PURE__ */ jsx83(
         EmojiPicker,
         {
           skinTonesDisabled: true,
@@ -4433,12 +4476,12 @@ var EmojiPickerComponent = ({ isOpen, onClose, onEmojiSelect }) => {
 };
 
 // src/extensions/views/node-views/callout.tsx
-import { jsx as jsx85, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs34 } from "react/jsx-runtime";
 var CalloutView = (props) => {
   const type = props.node.attrs.type || "info";
   const bgColor = props.node.attrs.bgColor;
   const emoji = props.node.attrs.emoji;
-  const [showEmojiPicker, setShowEmojiPicker] = useState11(false);
+  const [showEmojiPicker, setShowEmojiPicker] = useState10(false);
   const handleIconClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -4448,23 +4491,23 @@ var CalloutView = (props) => {
     props.updateAttributes({ emoji: newEmoji });
     setShowEmojiPicker(false);
   };
-  return /* @__PURE__ */ jsx85(NodeViewWrapper, { children: /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx84(NodeViewWrapper, { children: /* @__PURE__ */ jsx84(
     Callout,
     {
       type,
       bgColor,
       emoji,
-      iconWrapper: (icon) => /* @__PURE__ */ jsxs35("div", { className: "callout-icon-wrapper", children: [
-        /* @__PURE__ */ jsx85(
+      iconWrapper: (icon) => /* @__PURE__ */ jsxs34("div", { className: "callout-icon-wrapper", children: [
+        /* @__PURE__ */ jsx84(
           "button",
           {
             className: "callout-icon-button",
             onClick: handleIconClick,
             type: "button",
-            children: /* @__PURE__ */ jsx85("div", { className: "callout-icon", children: icon })
+            children: /* @__PURE__ */ jsx84("div", { className: "callout-icon", children: icon })
           }
         ),
-        /* @__PURE__ */ jsx85(
+        /* @__PURE__ */ jsx84(
           EmojiPickerComponent,
           {
             isOpen: showEmojiPicker,
@@ -4473,101 +4516,101 @@ var CalloutView = (props) => {
           }
         )
       ] }),
-      children: /* @__PURE__ */ jsx85(NodeViewContent, { as: "div" })
+      children: /* @__PURE__ */ jsx84(NodeViewContent, { as: "div" })
     }
   ) });
 };
 
 // src/extensions/views/node-views/code-block.tsx
-import { useState as useState12 } from "react";
+import { useState as useState11 } from "react";
 import { NodeViewContent as NodeViewContent2, NodeViewWrapper as NodeViewWrapper2 } from "@tiptap/react";
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var CodeBlockView = (props) => {
-  const [selectedLanguage, setSelectedLanguage] = useState12(props.node.attrs.language ?? "");
+  const [selectedLanguage, setSelectedLanguage] = useState11(props.node.attrs.language ?? "");
   const translations2 = useTiptapTranslations();
   const handleLanguageChange = (language) => {
     props.updateAttributes({ language });
     setSelectedLanguage(language);
   };
-  return /* @__PURE__ */ jsx86(NodeViewWrapper2, { children: /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx85(NodeViewWrapper2, { children: /* @__PURE__ */ jsx85(
     CodeBlock,
     {
       language: selectedLanguage,
       isEditable: props.editor.isEditable,
       onLanguageChange: handleLanguageChange,
       translations: translations2,
-      children: /* @__PURE__ */ jsx86(NodeViewContent2, {})
+      children: /* @__PURE__ */ jsx85(NodeViewContent2, {})
     }
   ) });
 };
 
 // src/extensions/views/node-views/copyable-text.tsx
 import { MarkViewContent } from "@tiptap/react";
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 var CopyableTextView = () => {
-  return /* @__PURE__ */ jsx87(CopyableText2, { children: /* @__PURE__ */ jsx87(MarkViewContent, {}) });
+  return /* @__PURE__ */ jsx86(CopyableText2, { children: /* @__PURE__ */ jsx86(MarkViewContent, {}) });
 };
 
 // src/extensions/views/node-views/custom-quote.tsx
 import { NodeViewContent as NodeViewContent3, NodeViewWrapper as NodeViewWrapper3 } from "@tiptap/react";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var CustomQuoteView = () => {
-  return /* @__PURE__ */ jsx88(NodeViewWrapper3, { children: /* @__PURE__ */ jsx88(CustomQuote, { children: /* @__PURE__ */ jsx88(NodeViewContent3, {}) }) });
+  return /* @__PURE__ */ jsx87(NodeViewWrapper3, { children: /* @__PURE__ */ jsx87(CustomQuote, { children: /* @__PURE__ */ jsx87(NodeViewContent3, {}) }) });
 };
 var CustomQuoteTextView = (props) => {
   const isEmpty = !props.node.content.size;
   const translations2 = useTiptapTranslations();
-  return /* @__PURE__ */ jsx88(NodeViewWrapper3, { children: /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx87(NodeViewWrapper3, { children: /* @__PURE__ */ jsx87(
     CustomQuoteText,
     {
       isEmpty,
       placeholder: translations2.customQuote.textPlaceholder,
-      children: /* @__PURE__ */ jsx88(NodeViewContent3, { className: isEmpty ? "is-empty" : "" })
+      children: /* @__PURE__ */ jsx87(NodeViewContent3, { className: isEmpty ? "is-empty" : "" })
     }
   ) });
 };
 var CustomQuoteAuthorView = (props) => {
   const isEmpty = !props.node.content.size;
   const translations2 = useTiptapTranslations();
-  return /* @__PURE__ */ jsx88(NodeViewWrapper3, { children: /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx87(NodeViewWrapper3, { children: /* @__PURE__ */ jsx87(
     CustomQuoteAuthor,
     {
       isEmpty,
       placeholder: translations2.customQuote.authorPlaceholder,
-      children: /* @__PURE__ */ jsx88(NodeViewContent3, { className: isEmpty ? "is-empty" : "" })
+      children: /* @__PURE__ */ jsx87(NodeViewContent3, { className: isEmpty ? "is-empty" : "" })
     }
   ) });
 };
 var CustomQuoteSignView = (props) => {
   const isEmpty = !props.node.content.size;
   const translations2 = useTiptapTranslations();
-  return /* @__PURE__ */ jsx88(NodeViewWrapper3, { children: /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx87(NodeViewWrapper3, { children: /* @__PURE__ */ jsx87(
     CustomQuoteSign,
     {
       isEmpty,
       placeholder: translations2.customQuote.signPlaceholder,
-      children: /* @__PURE__ */ jsx88(NodeViewContent3, { className: isEmpty ? "is-empty" : "" })
+      children: /* @__PURE__ */ jsx87(NodeViewContent3, { className: isEmpty ? "is-empty" : "" })
     }
   ) });
 };
 
 // src/extensions/views/node-views/figure.tsx
 import { NodeViewWrapper as NodeViewWrapper4 } from "@tiptap/react";
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 var FigureView = ({ node, getPos, editor }) => {
-  const { fileId, src, alt, title, caption, width, height, storageKey } = node.attrs;
+  const { fileId, src, alt, title, caption, width, height } = node.attrs;
   const imageExtension = editor.extensionManager.extensions.find((ext) => ext.name === "image");
   const getImageById = imageExtension?.options.getImageById;
   const onFigureClick = imageExtension?.options.onFigureClick;
   const handleEditClick = () => {
     onFigureClick?.(node.attrs, getPos());
   };
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx88(
     NodeViewWrapper4,
     {
       className: "figure-node-view",
       "data-drag-handle": true,
-      children: /* @__PURE__ */ jsx89(
+      children: /* @__PURE__ */ jsx88(
         Figure,
         {
           fileId,
@@ -4588,38 +4631,38 @@ var FigureView = ({ node, getPos, editor }) => {
 
 // src/extensions/views/node-views/prompt.tsx
 import { NodeViewContent as NodeViewContent4, NodeViewWrapper as NodeViewWrapper5 } from "@tiptap/react";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var PromptHeaderView = (props) => {
   const isEmpty = !props.node.content.size;
   const translations2 = useTiptapTranslations();
-  return /* @__PURE__ */ jsx90(NodeViewWrapper5, { children: /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx89(NodeViewWrapper5, { children: /* @__PURE__ */ jsx89(
     PromptHeader,
     {
       isEmpty,
       placeholder: translations2.prompt.headerPlaceholder,
-      children: /* @__PURE__ */ jsx90(NodeViewContent4, { className: isEmpty ? "is-empty" : "" })
+      children: /* @__PURE__ */ jsx89(NodeViewContent4, { className: isEmpty ? "is-empty" : "" })
     }
   ) });
 };
 var PromptContentView = (props) => {
   const isEmpty = !props.node.content.size;
   const translations2 = useTiptapTranslations();
-  return /* @__PURE__ */ jsx90(NodeViewWrapper5, { children: /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx89(NodeViewWrapper5, { children: /* @__PURE__ */ jsx89(
     PromptContent,
     {
       isEmpty,
       placeholder: translations2.prompt.contentPlaceholder,
-      children: /* @__PURE__ */ jsx90(NodeViewContent4, { className: isEmpty ? "is-empty" : "" })
+      children: /* @__PURE__ */ jsx89(NodeViewContent4, { className: isEmpty ? "is-empty" : "" })
     }
   ) });
 };
 
 // src/extensions/views/node-views/video.tsx
 import { NodeViewContent as NodeViewContent5, NodeViewWrapper as NodeViewWrapper6 } from "@tiptap/react";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var VideoView = (props) => {
   const { src } = props.node.attrs;
-  return /* @__PURE__ */ jsx91(NodeViewWrapper6, { children: /* @__PURE__ */ jsx91(Video, { src, children: /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx90(NodeViewWrapper6, { children: /* @__PURE__ */ jsx90(Video, { src, children: /* @__PURE__ */ jsx90(
     NodeViewContent5,
     {
       as: "div",
@@ -5138,9 +5181,172 @@ var LegacyPromptSEContent = BaseLegacyPromptSEContent.extend({
 
 // src/extensions/editor/figure.ts
 import { ReactNodeViewRenderer as ReactNodeViewRenderer6 } from "@tiptap/react";
+import { ResizableNodeView } from "@tiptap/core";
 var Figure2 = BaseFigure.extend({
   addNodeView() {
-    return ReactNodeViewRenderer6(FigureView);
+    const resizeOptions = this.options.resize;
+    if (!resizeOptions) {
+      return ReactNodeViewRenderer6(FigureView);
+    }
+    return (props) => {
+      const { node, getPos, editor } = props;
+      const attrs = node.attrs;
+      const imageExtension = editor.extensionManager.extensions.find(
+        (ext) => ext.name === "image"
+      );
+      const getImageById = imageExtension?.options.getImageById;
+      let imgSrc = attrs.src;
+      if (attrs.fileId && getImageById) {
+        const resolvedSrc = getImageById(attrs.fileId);
+        if (resolvedSrc) imgSrc = resolvedSrc;
+      }
+      let maxWidth;
+      try {
+        if (editor.view?.dom) {
+          const contentWrapper = editor.view.dom.closest(".tiptap-content-wrapper");
+          if (contentWrapper && contentWrapper.clientWidth > 0) {
+            maxWidth = contentWrapper.clientWidth - 32;
+          }
+        }
+      } catch {
+      }
+      let naturalAspectRatio;
+      let maxHeight;
+      const constrainDimensions = (w, h) => {
+        let constrainedW = w;
+        let constrainedH = h;
+        if (maxWidth && maxHeight && naturalAspectRatio && w >= maxWidth) {
+          constrainedW = maxWidth;
+          constrainedH = maxHeight;
+        }
+        return { width: constrainedW, height: constrainedH };
+      };
+      const updateImageDimensions = (width, height) => {
+        imageContainer.style.width = `${width}px`;
+        imageContainer.style.height = `${height}px`;
+      };
+      const figure = document.createElement("figure");
+      figure.setAttribute("data-drag-handle", "");
+      const imageContainer = document.createElement("div");
+      imageContainer.className = "figure-image-container";
+      const img = document.createElement("img");
+      img.src = imgSrc || "";
+      if (attrs.alt) img.alt = attrs.alt;
+      if (attrs.title) img.title = attrs.title;
+      if (attrs.width && attrs.height) {
+        imageContainer.style.width = `${attrs.width}px`;
+        imageContainer.style.height = `${attrs.height}px`;
+      }
+      img.onload = () => {
+        naturalAspectRatio = img.naturalHeight / img.naturalWidth;
+        if (maxWidth && naturalAspectRatio) {
+          maxHeight = Math.round(maxWidth * naturalAspectRatio);
+        }
+        if (attrs.width && attrs.height && maxWidth && attrs.width > maxWidth) {
+          const width = maxWidth;
+          const height = Math.round(attrs.height / attrs.width * maxWidth);
+          imageContainer.style.width = `${width}px`;
+          imageContainer.style.height = `${height}px`;
+          const pos = getPos();
+          if (typeof pos === "number") {
+            editor.chain().updateAttributes("image", {
+              width: Math.round(width),
+              height: Math.round(height)
+            }).run();
+          }
+        }
+      };
+      imageContainer.appendChild(img);
+      if (editor.isEditable) {
+        const editButton = document.createElement("button");
+        editButton.type = "button";
+        editButton.className = "figure-edit-button";
+        editButton.contentEditable = "false";
+        editButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none"><path d="M2.52441 14.3751V17.5001H5.64941L14.8661 8.28346L11.7411 5.15846L2.52441 14.3751ZM17.2827 5.8668C17.6077 5.5418 17.6077 5.0168 17.2827 4.6918L15.3327 2.7418C15.0077 2.4168 14.4827 2.4168 14.1577 2.7418L12.6327 4.2668L15.7577 7.3918L17.2827 5.8668Z" fill="currentColor"/></svg>';
+        editButton.addEventListener("click", () => {
+          const onFigureClick = imageExtension?.options.onFigureClick;
+          const pos = getPos();
+          if (onFigureClick && typeof pos === "number") {
+            onFigureClick(attrs, pos);
+          }
+        });
+        imageContainer.appendChild(editButton);
+      }
+      const resizableView = new ResizableNodeView({
+        element: imageContainer,
+        node,
+        getPos,
+        onResize: (w, h) => {
+          const { width, height } = constrainDimensions(w, h);
+          updateImageDimensions(width, height);
+        },
+        onCommit: (w, h) => {
+          const { width, height } = constrainDimensions(w, h);
+          const pos = getPos();
+          if (typeof pos === "number") {
+            updateImageDimensions(Math.round(width), Math.round(height));
+            editor.chain().focus().setNodeSelection(pos).updateAttributes("image", {
+              width: Math.round(width),
+              height: Math.round(height)
+            }).run();
+          }
+        },
+        onUpdate: (updatedNode) => {
+          if (updatedNode.attrs.width) {
+            imageContainer.style.width = `${updatedNode.attrs.width}px`;
+          }
+          if (updatedNode.attrs.height) {
+            imageContainer.style.height = `${updatedNode.attrs.height}px`;
+          }
+          const existingCaption = figure.querySelector("figcaption");
+          if (updatedNode.attrs.caption && !existingCaption) {
+            const figcaption = document.createElement("figcaption");
+            figcaption.textContent = updatedNode.attrs.caption;
+            figure.appendChild(figcaption);
+          } else if (existingCaption) {
+            if (updatedNode.attrs.caption) {
+              existingCaption.textContent = updatedNode.attrs.caption;
+            } else {
+              existingCaption.remove();
+            }
+          }
+          if (updatedNode.type !== node.type) return false;
+          return true;
+        },
+        options: {
+          directions: resizeOptions.directions || [
+            "bottom-right",
+            "bottom-left",
+            "top-right",
+            "top-left"
+          ],
+          min: {
+            width: resizeOptions.minWidth || 100,
+            height: resizeOptions.minHeight || 100
+          },
+          max: maxWidth && maxHeight ? { width: maxWidth, height: maxHeight } : void 0,
+          preserveAspectRatio: true,
+          className: {
+            container: "tiptap-resize-container",
+            wrapper: "tiptap-resize-wrapper",
+            handle: "tiptap-resize-handle",
+            resizing: "is-resizing"
+          }
+        }
+      });
+      figure.appendChild(resizableView.dom);
+      if (attrs.caption) {
+        const figcaption = document.createElement("figcaption");
+        figcaption.textContent = attrs.caption;
+        figure.appendChild(figcaption);
+      }
+      return {
+        dom: figure,
+        contentDOM: resizableView.contentDOM,
+        update: resizableView.update.bind(resizableView),
+        destroy: resizableView.destroy?.bind(resizableView)
+      };
+    };
   }
 });
 var LegacyFigure = BaseLegacyFigure.extend({
@@ -5174,8 +5380,14 @@ function getEditorExtensions(options) {
     PromptHeader2,
     PromptContent2,
     Video2,
-    // Configure with optional getImageById for URL resolution and onFigureClick callback
-    Figure2.configure({ getImageById, onFigureClick }),
+    Figure2.configure({
+      getImageById,
+      onFigureClick,
+      resize: {
+        enabled: true,
+        directions: ["top-left", "top-right", "bottom-left", "bottom-right"]
+      }
+    }),
     Mathematics.configure({
       katexOptions: {
         throwOnError: false
@@ -5618,7 +5830,7 @@ var filterCommandItems = (items, query) => {
 };
 
 // src/editor/commands/suggestion.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var component = null;
 var closeMenu = () => {
   if (component) {
@@ -5632,7 +5844,7 @@ var mapCommandMenuItemToCommandItem = (item) => {
   const IconComponent = item.icon;
   return {
     title: item.title,
-    icon: /* @__PURE__ */ jsx92(IconComponent, {}),
+    icon: /* @__PURE__ */ jsx91(IconComponent, {}),
     command: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).run();
       item.onClick(editor);
@@ -6063,7 +6275,7 @@ function getTranslations(lang) {
 }
 
 // src/editor/editor.tsx
-import { Fragment as Fragment3, jsx as jsx93, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx92, jsxs as jsxs35 } from "react/jsx-runtime";
 function TiptapContent({
   content,
   handleChange,
@@ -6073,12 +6285,12 @@ function TiptapContent({
   lang,
   error
 }) {
-  const [linkDialogContext, setLinkDialogContext] = useState13(null);
-  const [katexDialogContext, setKatexDialogContext] = useState13(
+  const [linkDialogContext, setLinkDialogContext] = useState12(null);
+  const [katexDialogContext, setKatexDialogContext] = useState12(
     null
   );
-  const [editFigureContext, setEditFigureContext] = useState13(null);
-  const [savedDialogCursorPos, setSavedDialogCursorPos] = useState13(void 0);
+  const [editFigureContext, setEditFigureContext] = useState12(null);
+  const [savedDialogCursorPos, setSavedDialogCursorPos] = useState12(void 0);
   const { activeDialog, closeDialogCommand, openDialogCommand } = useDialogCommand();
   const translations2 = useTiptapTranslations();
   let safeContent;
@@ -6129,7 +6341,7 @@ function TiptapContent({
     },
     [lang]
   );
-  useEffect10(() => {
+  useEffect9(() => {
     if (activeDialog && editor && !editor.isDestroyed) {
       const pos = editor.state.selection.from;
       setSavedDialogCursorPos(pos);
@@ -6156,7 +6368,7 @@ function TiptapContent({
     const katexHandler = createHandleKatexAdd(editor, handleCloseDialog, savedDialogCursorPos);
     katexHandler(latex, katexDialogContext?.pos);
   };
-  useEffect10(() => {
+  useEffect9(() => {
     if (!editor || editor.isDestroyed) return;
     editor.commands.setContent(safeContent, {
       emitUpdate: false
@@ -6175,16 +6387,16 @@ function TiptapContent({
     return true;
   };
   if (!editor) return null;
-  return /* @__PURE__ */ jsxs36(Fragment3, { children: [
-    /* @__PURE__ */ jsx93(DragHandle, { editor }),
-    isEditable && !isDisabled && /* @__PURE__ */ jsx93(TableMenu, { editor }),
-    isEditable && !isDisabled && /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsxs35(Fragment3, { children: [
+    /* @__PURE__ */ jsx92(DragHandle, { editor }),
+    isEditable && !isDisabled && /* @__PURE__ */ jsx92(TableMenu, { editor }),
+    isEditable && !isDisabled && /* @__PURE__ */ jsx92(
       BubbleMenu,
       {
         shouldShow: shouldBubbleMenuShow,
         editor,
         options: { placement: "bottom", offset: 8, flip: true },
-        children: /* @__PURE__ */ jsx93(
+        children: /* @__PURE__ */ jsx92(
           BubbleMenuContent,
           {
             editor,
@@ -6193,19 +6405,19 @@ function TiptapContent({
         )
       }
     ),
-    /* @__PURE__ */ jsxs36(
+    /* @__PURE__ */ jsxs35(
       "div",
       {
         className: `tiptap-content-wrapper ${!!error ? "has-error" : ""} ${isDisabled ? "is-disabled" : ""}`,
         children: [
-          /* @__PURE__ */ jsx93(EditorContent, { editor }),
-          isEditable && !isDisabled && /* @__PURE__ */ jsx93(CharacterCount, { editor })
+          /* @__PURE__ */ jsx92(EditorContent, { editor }),
+          isEditable && !isDisabled && /* @__PURE__ */ jsx92(CharacterCount, { editor })
         ]
       }
     ),
-    !!error && /* @__PURE__ */ jsx93("p", { className: "tiptap-error-message", children: error }),
-    isEditable && /* @__PURE__ */ jsxs36(Fragment3, { children: [
-      activeDialog === "image" && /* @__PURE__ */ jsx93(
+    !!error && /* @__PURE__ */ jsx92("p", { className: "tiptap-error-message", children: error }),
+    isEditable && /* @__PURE__ */ jsxs35(Fragment3, { children: [
+      activeDialog === "image" && /* @__PURE__ */ jsx92(
         ImageDialog,
         {
           open: true,
@@ -6218,7 +6430,7 @@ function TiptapContent({
           mode: editFigureContext ? "edit" : "add"
         }
       ),
-      activeDialog === "link" && /* @__PURE__ */ jsx93(
+      activeDialog === "link" && /* @__PURE__ */ jsx92(
         AddLinkDialog,
         {
           open: true,
@@ -6227,7 +6439,7 @@ function TiptapContent({
           linkDialogContext
         }
       ),
-      activeDialog === "video" && /* @__PURE__ */ jsx93(
+      activeDialog === "video" && /* @__PURE__ */ jsx92(
         AddVideoDialog,
         {
           open: true,
@@ -6235,7 +6447,7 @@ function TiptapContent({
           onVideoAdd: handleVideoAdd
         }
       ),
-      activeDialog === "katex" && /* @__PURE__ */ jsx93(
+      activeDialog === "katex" && /* @__PURE__ */ jsx92(
         AddKatexDialog,
         {
           open: true,
@@ -6250,9 +6462,41 @@ function TiptapContent({
 var Tiptap = (props) => {
   const { lang = "ru" } = props;
   const translations2 = getTranslations(lang);
-  return /* @__PURE__ */ jsx93(TiptapTranslationsProvider, { translations: translations2, children: /* @__PURE__ */ jsx93(DialogCommandProvider, { children: /* @__PURE__ */ jsx93(TiptapContent, { ...props }) }) });
+  return /* @__PURE__ */ jsx92(TiptapTranslationsProvider, { translations: translations2, children: /* @__PURE__ */ jsx92(DialogCommandProvider, { children: /* @__PURE__ */ jsx92(TiptapContent, { ...props }) }) });
 };
+
+// src/utils/html-to-tiptap-content.ts
+import { generateJSON } from "@tiptap/core";
+function isJSONContent(value) {
+  return typeof value === "object" && value !== null && "type" in value && typeof value.type === "string";
+}
+function htmlToTiptapContent(content) {
+  if (isJSONContent(content)) {
+    return content;
+  }
+  if (typeof content === "string") {
+    try {
+      const parsed = JSON.parse(content);
+      if (isJSONContent(parsed)) {
+        return parsed;
+      }
+    } catch {
+    }
+  }
+  if (!content || content.trim() === "") {
+    return { type: "doc", content: [{ type: "paragraph" }] };
+  }
+  const sharedExtensions = getSharedExtensions();
+  const extensions = [...sharedExtensions, BaseFigure];
+  try {
+    return generateJSON(content, extensions);
+  } catch (error) {
+    console.error("Failed to convert HTML to Tiptap content:", error);
+    return { type: "doc", content: [{ type: "paragraph" }] };
+  }
+}
 export {
-  Tiptap
+  Tiptap,
+  htmlToTiptapContent
 };
 //# sourceMappingURL=editor.mjs.map