@cyberyozh/text-editor 0.1.10 → 0.1.12

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.10",
+  "version": "0.1.12",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",

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

@@ -67,15 +67,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,
       }));
     };
   };

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,194 @@
 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);
+        }
+      };
+
+      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/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;
+}

package/src/extensions/views/components/table.tsx

@@ -1,74 +0,0 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
-
-interface TableProps {
-  children: ReactNode;
-}
-
-/**
- * Table component for static rendering
- * Applies column widths from Tiptap table cells
- */
-export function Table({ children }: TableProps) {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const [undefinedColWidth, setUndefinedColWidth] = useState<number | undefined>(undefined);
-
-  let colWidths: (number | undefined)[] = [];
-
-  if (Array.isArray(children) && children.length > 0) {
-    const firstRow = children[0];
-
-    if (firstRow?.props?.children) {
-      const cells = Array.isArray(firstRow.props.children)
-        ? firstRow.props.children
-        : [firstRow.props.children];
-
-      colWidths = cells.map((cell: any) => cell?.props?.node?.attrs?.colwidth?.[0]);
-    }
-  }
-
-  // Calculate widths based on container
-  const definedWidths = colWidths.filter((w): w is number => w !== undefined);
-  const totalDefinedWidth = definedWidths.reduce((total, width) => total + width, 0);
-  const undefinedCount = colWidths.filter((w) => w === undefined).length;
-
-  useEffect(() => {
-    if (wrapperRef.current && undefinedCount > 0) {
-      const containerWidth = wrapperRef.current.clientWidth;
-      const remainingSpace = containerWidth - totalDefinedWidth;
-      const calculatedWidth = Math.floor(remainingSpace / undefinedCount);
-      setUndefinedColWidth(calculatedWidth > 0 ? calculatedWidth : undefined);
-    }
-  }, [totalDefinedWidth, undefinedCount]);
-
-  // Calculate total table width
-  const tableWidth =
-    undefinedCount > 0 && undefinedColWidth
-      ? totalDefinedWidth + (undefinedColWidth * undefinedCount)
-      : totalDefinedWidth > 0
-      ? totalDefinedWidth
-      : undefined;
-
-  return (
-    <div ref={wrapperRef} className="tableWrapper">
-      <table style={tableWidth ? { width: `${tableWidth}px` } : undefined}>
-        {colWidths.length > 0 && (
-          <colgroup>
-            {colWidths.map((width, index) => (
-              <col
-                key={index}
-                style={
-                  width
-                    ? { width: `${width}px` }
-                    : undefinedColWidth
-                    ? { width: `${undefinedColWidth}px` }
-                    : undefined
-                }
-              />
-            ))}
-          </colgroup>
-        )}
-        <tbody>{children}</tbody>
-      </table>
-    </div>
-  );
-}