fix: use ratio for columns (#65)

Author: qinluhe

src/application/types.ts

@@ -201,7 +201,7 @@ export interface SubpageNodeData extends BlockData {
 }
 
 export interface ColumnNodeData extends BlockData {
-  width?: number;
+  ratio?: number;
 }
 
 export enum MentionType {

src/components/editor/components/blocks/columns/Column.tsx

@@ -2,16 +2,12 @@ import { ColumnNode, EditorElementProps } from '@/components/editor/editor.type'
 import React, { forwardRef, memo } from 'react';
 
 export const Column = memo(
-  forwardRef<HTMLDivElement, EditorElementProps<ColumnNode>>(({ node, children, ...attributes }, ref) => {
-    const data = node.data;
-
+  forwardRef<HTMLDivElement, EditorElementProps<ColumnNode>>(({ node: _node, children, ...attributes }, ref) => {
     return (
       <div
-        ref={ref} {...attributes}
-        className={`${attributes.className ?? ''} min-w-[120px] overflow-hidden`}
-        style={{
-          width: data.width ? `${data.width}px` : '100%',
-        }}
+        ref={ref}
+        {...attributes}
+        className={`${attributes.className ?? ''} overflow-hidden`}
       >
         {children}
       </div>

src/components/editor/components/blocks/columns/Columns.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef, memo } from 'react';
 
 export const Columns = memo(
   forwardRef<HTMLDivElement, EditorElementProps<ColumnsNode>>(({ node: _node, children, ...attributes }, ref) => {
+
     return (
       <div
         ref={ref}

src/components/editor/components/blocks/image/Img.tsx

@@ -11,7 +11,6 @@ function Img({ onLoad, imgRef, url, width }: {
   width: number | string;
 }) {
   const { t } = useTranslation();
-  const [localUrl, setLocalUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [imgError, setImgError] = useState<{
     ok: boolean;
@@ -32,18 +31,18 @@ function Img({ onLoad, imgRef, url, width }: {
 
     const attemptCheck: () => Promise<boolean> = async() => {
       try {
+        console.log(`Checking ${pollingInterval}ms`);
         const result = await checkImage(url);
 
         // Success case
         if(result.ok) {
           setImgError(null);
           setLoading(false);
-          setLocalUrl(result.validatedUrl || url);
           setTimeout(() => {
             if(onLoad) {
               onLoad();
             }
-          }, 500);
+          }, 200);
 
           return true;
         }
@@ -92,7 +91,7 @@ function Img({ onLoad, imgRef, url, width }: {
     <>
       <img
         ref={imgRef}
-        src={localUrl || url}
+        src={url}
         alt={''}
         onLoad={() => {
           setLoading(false);
@@ -112,7 +111,7 @@ function Img({ onLoad, imgRef, url, width }: {
       ) : imgError ? (
         <div
           className={
-            'flex h-[48px] top-0 absolute bg-bg-body w-full items-center justify-center gap-2 rounded border border-function-error bg-red-50'
+            'flex h-[48px] w-full items-center justify-center gap-2 rounded border border-function-error bg-red-50'
           }
         >
           <ErrorOutline className={'text-function-error'} />

src/components/editor/components/element/Element.tsx

@@ -161,11 +161,27 @@ export const Element = ({
     }
   }, [type]) as FC<EditorElementProps>;
 
+  const blockStyle = useMemo(() => {
+    const type = node.type as BlockType;
+    const style = {};
+
+    if(type === BlockType.ColumnBlock) {
+      const ratio = (node.data as ColumnNodeData)?.ratio;
+
+      Object.assign(style, {
+        flexGrow: ratio ? ratio * 1000 : 500,
+        flexBasis: 0,
+        flexShrink: 0,
+      });
+    }
+
+    return style;
+  }, [node.data, node.type]);
+
   const className = useMemo(() => {
     const data = (node.data as BlockData) || {};
     const align = data.align;
     const classList = ['block-element relative flex rounded-[4px]'];
-    const type = node.type as BlockType;
 
     if(selected) {
       classList.push('selected');
@@ -175,16 +191,8 @@ export const Element = ({
       classList.push(`block-align-${align}`);
     }
 
-    if(type === BlockType.ColumnBlock) {
-      const width = (data as ColumnNodeData).width;
-
-      if(!width) {
-        classList.push('flex-1');
-      }
-    }
-
     return classList.join(' ');
-  }, [node.data, selected, node.type]);
+  }, [node.data, selected]);
 
   const style = useMemo(() => {
     const data = (node.data as BlockData) || {};
@@ -193,8 +201,17 @@ export const Element = ({
       color: data.font_color ? renderColor(data.font_color) : undefined,
     };
 
+    const type = node.type as BlockType;
+
+    if(type === BlockType.ColumnsBlock) {
+      Object.assign(properties, {
+        display: 'flex',
+        width: '100%',
+      });
+    }
+
     return properties;
-  }, [node.data, selected]);
+  }, [node.data, node.type, selected]);
 
   const fallbackRender = useMemo(() => {
     return (props: FallbackProps) => {
@@ -229,6 +246,7 @@ export const Element = ({
         {...attributes}
         data-block-type={type}
         className={className}
+        style={blockStyle}
       >
         <Component
           style={style}

src/utils/image.ts

@@ -42,9 +42,7 @@ export const checkImage = async(url: string) => {
       });
     };
 
-    const cacheBuster = `?cb=${Date.now()}`;
-
-    img.src = url + cacheBuster;
+    img.src = url;
 
   });
 };