@cyberyozh/text-editor 0.1.12 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",

package/src/editor/dialogs/image-dialog/image-dialog.tsx

@@ -49,14 +49,43 @@ export const ImageDialog = ({
     ? resolveImageSrc({ fileId: initialAttrs.fileId, src: initialAttrs.src }, { getImageById })
     : "";
 
+  const getConstrainedDimensions = () => {
+    if (!initialAttrs?.width || !initialAttrs?.height) {
+      return { width: 0, height: 0 };
+    }
+
+    let maxWidth: number | undefined;
+    try {
+      const editorElement = document.querySelector(".tiptap-content-wrapper") as HTMLElement;
+      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] = useState<ImageFormState>({
     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: File | undefined) => {
@@ -179,6 +208,8 @@ export const ImageDialog = ({
       alt: formState.alt,
       title: formState.title,
       caption: formState.caption,
+      width: formState.width || undefined,
+      height: formState.height || undefined,
     });
 
     handleClose();

package/src/editor/editor.tsx

@@ -77,7 +77,7 @@ function TiptapContent({
 }: TiptapProps) {
   const [linkDialogContext, setLinkDialogContext] = useState<LinkDialogContextProps | null>(null);
   const [katexDialogContext, setKatexDialogContext] = useState<KatexDialogContextProps | null>(
-    null
+    null,
   );
   const [editFigureContext, setEditFigureContext] = useState<{
     attrs: FigureAttrs;
@@ -136,7 +136,7 @@ function TiptapContent({
       onCreate: ({ editor }) => handleChange?.(editor.getJSON()),
       onBlur: ({ editor }) => handleChange?.(editor.getJSON()),
     },
-    [lang]
+    [lang],
   );
 
   useEffect(() => {

package/src/editor/index.ts

@@ -1,3 +1,4 @@
 export { Tiptap } from "./editor";
 export type { SupportedLanguage as TiptapSupportedLanguages } from "../utils/get-translations";
 export { type JSONContent } from "@tiptap/react";
+export { htmlToTiptapContent } from "../utils/html-to-tiptap-content";

package/src/extensions/editor/figure.ts

@@ -17,7 +17,7 @@ export const Figure = BaseFigure.extend({
       const attrs = node.attrs;
 
       const imageExtension = editor.extensionManager.extensions.find(
-        (ext) => ext.name === "image"
+        (ext) => ext.name === "image",
       ) as typeof BaseFigure | undefined;
       const getImageById = imageExtension?.options.getImageById;
 
@@ -79,6 +79,25 @@ export const Figure = BaseFigure.extend({
         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);

package/src/render/index.ts

@@ -20,3 +20,4 @@
  */
 
 export { TiptapRender } from "./tiptap-render";
+export { htmlToTiptapContent } from "../utils/html-to-tiptap-content";

package/src/utils/html-to-tiptap-content.ts

@@ -0,0 +1,41 @@
+import { generateJSON, type JSONContent } from "@tiptap/core";
+import { getSharedExtensions } from "./get-shared-extensions";
+import { BaseFigure } from "@/extensions/base/figure";
+
+function isJSONContent(value: unknown): value is JSONContent {
+  return (
+    typeof value === "object" && value !== null && "type" in value && typeof value.type === "string"
+  );
+}
+
+export function htmlToTiptapContent(content: string | JSONContent): JSONContent {
+  if (isJSONContent(content)) {
+    return content;
+  }
+
+  if (typeof content === "string") {
+    try {
+      const parsed = JSON.parse(content);
+      if (isJSONContent(parsed)) {
+        return parsed;
+      }
+    } catch {
+      // Not valid JSON, treat as HTML
+    }
+  }
+
+  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" }] };
+  }
+}