@cyberyozh/text-editor 0.1.11 → 0.1.13

package/dist/styles/index.css

@@ -570,11 +570,13 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-width: 100%;
   margin: 24px auto;
 }
 .figure-image-container {
   display: inline-block;
   position: relative;
+  max-width: 100%;
 }
 .figure-image-container img {
   display: block;
@@ -582,6 +584,11 @@
   height: auto;
   border-radius: 12px;
 }
+[data-resize-wrapper] .figure-image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
 .figure-edit-button {
   display: flex;
   position: absolute;
@@ -624,6 +631,64 @@
   letter-spacing: -0.32px;
   text-align: center;
 }
+.tiptap-resize-container {
+  display: inline-block;
+  position: relative;
+  justify-content: center;
+  max-width: 100%;
+  margin: 0 auto;
+}
+.tiptap-resize-wrapper {
+  display: inline-block;
+  position: relative;
+  margin: 0 auto;
+}
+[data-resize-handle] {
+  z-index: 10;
+  position: absolute;
+  background: var(--tiptap-color-primary, #3b82f6);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+[data-resize-container]:hover [data-resize-handle],
+[data-resize-container].is-resizing [data-resize-handle] {
+  opacity: 1;
+}
+[data-resize-handle=top-left],
+[data-resize-handle=top-right],
+[data-resize-handle=bottom-left],
+[data-resize-handle=bottom-right] {
+  width: 10px;
+  height: 10px;
+  border: 1px solid white;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+[data-resize-handle=top-left] {
+  top: -4px !important;
+  left: -4px !important;
+  cursor: nwse-resize;
+}
+[data-resize-handle=top-right] {
+  top: -4px !important;
+  right: -4px !important;
+  cursor: nesw-resize;
+}
+[data-resize-handle=bottom-left] {
+  left: -4px !important;
+  cursor: nesw-resize;
+}
+[data-resize-handle=bottom-right] {
+  right: -4px !important;
+  cursor: nwse-resize;
+}
+[data-resize-container].is-resizing {
+  user-select: none;
+}
+[data-resize-container].is-resizing [data-resize-handle] {
+  background: var(--tiptap-color-primary-active, #2563eb);
+  opacity: 1;
+}
 
 /* src/styles/extensions/table.css */
 :root {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.1.11",
+  "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) => {
@@ -67,15 +96,37 @@ export const ImageDialog = ({
     img.src = imageUrl;
 
     img.onload = () => {
-      const { width, height } = img;
+      const naturalWidth = img.width;
+      const naturalHeight = img.height;
+      const naturalAspectRatio = naturalHeight / naturalWidth;
+
+      let maxWidth: number | undefined;
+      try {
+        const editorElement = document.querySelector(".tiptap-content-wrapper") as HTMLElement;
+        if (editorElement && editorElement.clientWidth > 0) {
+          maxWidth = editorElement.clientWidth - 32;
+        }
+      } catch {}
+
+      let finalWidth: number;
+      let finalHeight: number;
+
+      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,
       }));
     };
   };
@@ -157,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/base/figure.ts

@@ -1,10 +1,9 @@
 import { mergeAttributes, nodePasteRule } from "@tiptap/core";
-import Image from "@tiptap/extension-image";
+import Image, { ImageOptions } from "@tiptap/extension-image";
 import { resolveImageSrc } from "../../utils/image-src-resolver";
 import type { FigureAttrs } from "../../types";
 
-export interface FigureOptions {
-  HTMLAttributes: Record<string, unknown>;
+export interface FigureOptions extends ImageOptions {
   getImageById?: (fileId: string) => string | null;
   onFigureClick?: (attrs: FigureAttrs, pos: number) => void;
 }
@@ -27,11 +26,12 @@ export const BaseFigure = Image.extend<FigureOptions>({
   selectable: false,
 
   addOptions() {
+    const parentOptions = this.parent?.() || {};
     return {
-      HTMLAttributes: {},
+      ...parentOptions,
       getImageById: undefined,
       onFigureClick: undefined,
-    };
+    } as FigureOptions;
   },
 
   addAttributes() {

package/src/extensions/editor/figure.ts

@@ -1,11 +1,213 @@
 import { ReactNodeViewRenderer } from "@tiptap/react";
+import { ResizableNodeView } from "@tiptap/core";
 import { BaseFigure } from "../base";
 import { FigureView } from "../views/node-views";
 import { BaseLegacyFigure } from "../base/compatibility";
 
 export const Figure = BaseFigure.extend({
   addNodeView() {
-    return ReactNodeViewRenderer(FigureView);
+    const resizeOptions = this.options.resize;
+
+    if (!resizeOptions) {
+      return ReactNodeViewRenderer(FigureView);
+    }
+
+    return (props) => {
+      const { node, getPos, editor } = props;
+      const attrs = node.attrs;
+
+      const imageExtension = editor.extensionManager.extensions.find(
+        (ext) => ext.name === "image",
+      ) as typeof BaseFigure | undefined;
+      const getImageById = imageExtension?.options.getImageById;
+
+      let imgSrc = attrs.src;
+      if (attrs.fileId && getImageById) {
+        const resolvedSrc = getImageById(attrs.fileId);
+        if (resolvedSrc) imgSrc = resolvedSrc;
+      }
+
+      let maxWidth: number | undefined;
+      try {
+        if (editor.view?.dom) {
+          const contentWrapper = editor.view.dom.closest(".tiptap-content-wrapper") as HTMLElement;
+          if (contentWrapper && contentWrapper.clientWidth > 0) {
+            maxWidth = contentWrapper.clientWidth - 32;
+          }
+        }
+      } catch {}
+
+      let naturalAspectRatio: number | undefined;
+      let maxHeight: number | undefined;
+
+      const constrainDimensions = (w: number, h: number) => {
+        let constrainedW = w;
+        let constrainedH = h;
+
+        if (maxWidth && maxHeight && naturalAspectRatio && w >= maxWidth) {
+          constrainedW = maxWidth;
+          constrainedH = maxHeight;
+        }
+
+        return { width: constrainedW, height: constrainedH };
+      };
+
+      const updateImageDimensions = (width: number, height: number) => {
+        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 } : undefined,
+          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),
+      };
+    };
   },
 });
 

package/src/extensions/editor/get-editor-extensions.ts

@@ -61,8 +61,14 @@ export function getEditorExtensions(options: GetExtensionsOptions) {
     PromptContent,
     Video,
 
-    // Configure with optional getImageById for URL resolution and onFigureClick callback
-    Figure.configure({ getImageById, onFigureClick }),
+    Figure.configure({
+      getImageById,
+      onFigureClick,
+      resize: {
+        enabled: true,
+        directions: ["top-left", "top-right", "bottom-left", "bottom-right"],
+      },
+    }),
     Mathematics.configure({
       katexOptions: {
         throwOnError: false,

package/src/extensions/editor/index.ts

@@ -1,25 +1 @@
-// export { Callout, BookAlert, BookTip } from "./callout";
-// export { CodeBlock } from "./code-block";
-// export { Commands } from "./commands";
-// export { CopyableText } from "./copyable-text";
-// export {
-//   CustomQuote,
-//   CustomQuoteText,
-//   CustomQuoteAuthor,
-//   CustomQuoteSign,
-//   CustomBlockquote,
-//   CustomQuoteSE,
-// } from "./custom-quote";
-// export { Figure, LegacyFigure, type FigureAttrs } from "./figure";
-// export { InlineLatexSE } from "./inline-latex";
-// export {
-//   Prompt,
-//   PromptHeader,
-//   PromptContent,
-//   PromptSE,
-//   PromptSEHeader,
-//   PromptSEContent,
-// } from "./prompt";
-// export { Video, YouTube } from "./video";
-
 export { getEditorExtensions } from "./get-editor-extensions";

package/src/extensions/render/get-render-extensions.ts

@@ -46,9 +46,8 @@ export function getRenderExtensions() {
     BaseVideo,
     BaseFigure,
 
-    // Need to update
     TableKit.configure({
-      table: { resizable: false },
+      table: { resizable: false, renderWrapper: true },
     }),
 
     Mathematics.configure({

package/src/extensions/views/components/index.ts

@@ -4,5 +4,4 @@ export { CopyableText } from "./copyable-text";
 export { CustomQuote, CustomQuoteText, CustomQuoteAuthor, CustomQuoteSign } from "./custom-quote";
 export { Figure } from "./figure";
 export { PromptHeader, PromptContent } from "./prompt";
-export { Table } from "./table";
 export { Video } from "./video";

package/src/extensions/views/node-views/figure.tsx

@@ -6,7 +6,7 @@ import { FigureAttrs } from "../../../types";
 import { Figure } from "../components";
 
 export const FigureView = ({ node, getPos, editor }: NodeViewProps) => {
-  const { fileId, src, alt, title, caption, width, height, storageKey } = node.attrs as FigureAttrs;
+  const { fileId, src, alt, title, caption, width, height } = node.attrs as FigureAttrs;
 
   const imageExtension = editor.extensionManager.extensions.find((ext) => ext.name === "image");
   const getImageById = imageExtension?.options.getImageById;

package/src/render/index.ts

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

package/src/render/static-renderer-config.tsx

@@ -24,7 +24,6 @@ import {
   CustomQuoteSign,
   PromptHeader,
   PromptContent,
-  Table,
   Video,
   Figure,
 } from "@/extensions/views/components";
@@ -95,9 +94,6 @@ export const getNodeMapping = (getImageById?: (fileId: string) => string | null)
   video({ node }: any) {
     return <Video src={node.attrs.src} />;
   },
-  table({ children }: any) {
-    return <Table>{children}</Table>;
-  },
   figure({ node }: any) {
     return (
       <Figure

package/src/styles/extensions/figure.css

@@ -2,12 +2,14 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-width: 100%;
   margin: 24px auto;
 }
 
 .figure-image-container {
   display: inline-block;
   position: relative;
+  max-width: 100%;
 }
 
 .figure-image-container img {
@@ -17,6 +19,12 @@
   border-radius: 12px;
 }
 
+[data-resize-wrapper] .figure-image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .figure-edit-button {
   display: flex;
   position: absolute;
@@ -64,3 +72,72 @@
   letter-spacing: -0.32px;
   text-align: center;
 }
+
+.tiptap-resize-container {
+  display: inline-block;
+  position: relative;
+  justify-content: center;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.tiptap-resize-wrapper {
+  display: inline-block;
+  position: relative;
+  margin: 0 auto;
+}
+
+[data-resize-handle] {
+  z-index: 10;
+  position: absolute;
+  background: var(--tiptap-color-primary, #3b82f6);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+[data-resize-container]:hover [data-resize-handle],
+[data-resize-container].is-resizing [data-resize-handle] {
+  opacity: 1;
+}
+
+[data-resize-handle="top-left"],
+[data-resize-handle="top-right"],
+[data-resize-handle="bottom-left"],
+[data-resize-handle="bottom-right"] {
+  width: 10px;
+  height: 10px;
+  border: 1px solid white;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+[data-resize-handle="top-left"] {
+  top: -4px !important;
+  left: -4px !important;
+  cursor: nwse-resize;
+}
+
+[data-resize-handle="top-right"] {
+  top: -4px !important;
+  right: -4px !important;
+  cursor: nesw-resize;
+}
+
+[data-resize-handle="bottom-left"] {
+  left: -4px !important;
+  cursor: nesw-resize;
+}
+
+[data-resize-handle="bottom-right"] {
+  right: -4px !important;
+  cursor: nwse-resize;
+}
+
+[data-resize-container].is-resizing {
+  user-select: none;
+}
+
+[data-resize-container].is-resizing [data-resize-handle] {
+  background: var(--tiptap-color-primary-active, #2563eb);
+  opacity: 1;
+}