@cyberyozh/text-editor 0.1.9 → 0.1.11

package/package.json

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

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 
 interface TableProps {
   children: ReactNode;
@@ -9,7 +9,10 @@ interface TableProps {
  * Applies column widths from Tiptap table cells
  */
 export function Table({ children }: TableProps) {
-  let colWidths: number[] = [];
+  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];
@@ -19,24 +22,48 @@ export function Table({ children }: TableProps) {
         ? firstRow.props.children
         : [firstRow.props.children];
 
-      colWidths = cells
-        .map((cell: any) => cell?.props?.node?.attrs?.colwidth?.[0])
-        .filter((width: number | undefined) => width !== undefined);
+      colWidths = cells.map((cell: any) => cell?.props?.node?.attrs?.colwidth?.[0]);
     }
   }
 
+  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 - 2;
+      const calculatedWidth = Math.floor(remainingSpace / undefinedCount);
+      setUndefinedColWidth(calculatedWidth > 0 ? calculatedWidth : undefined);
+    }
+  }, [totalDefinedWidth, undefinedCount]);
+
   const tableWidth =
-    colWidths.length > 0 ? colWidths.reduce((total, width) => total + width, 0) : null;
+    undefinedCount > 0 && undefinedColWidth
+      ? totalDefinedWidth + undefinedColWidth * undefinedCount + 2
+      : totalDefinedWidth > 0
+      ? totalDefinedWidth + 2
+      : undefined;
 
   return (
-    <div className="tableWrapper">
+    <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}px` }}
+                style={
+                  width
+                    ? { width: `${width}px` }
+                    : undefinedColWidth
+                    ? { width: `${undefinedColWidth}px` }
+                    : undefined
+                }
               />
             ))}
           </colgroup>