@jhits/plugin-blog 0.0.5 → 0.0.7

package/src/views/CanvasEditor/BlockWrapper.tsx

@@ -274,7 +274,7 @@ export function BlockWrapper({
         >
             {/* Left Margin Controls - Visible on Hover */}
             <div
-                className={`absolute -left-16 top-1/2 -translate-y-1/2 flex flex-col gap-2 transition-all duration-200 z-20 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'
+                className={`absolute -left-16 top-1/2 -translate-y-1/2 flex flex-col gap-2 transition-all duration-200 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'
                     }`}
                 onMouseEnter={() => setIsControlsHovered(true)}
                 onMouseLeave={() => setIsControlsHovered(false)}
@@ -321,7 +321,7 @@ export function BlockWrapper({
 
             {/* Block Header - Positioned above the component */}
             <div
-                className={`mb-2 transition-all relative z-[100] ${isHovered || showControls || showSettingsMenu
+                className={`mb-2 transition-all relative ${isHovered || showControls || showSettingsMenu
                     ? 'opacity-100 translate-y-0'
                     : 'opacity-0 -translate-y-2 pointer-events-none'
                     }`}
@@ -339,7 +339,7 @@ export function BlockWrapper({
                         </span>
 
                         {/* Layout Block Settings - Inline in header */}
-                        {block.type === 'section' && (
+                        {/* {block.type === 'section' && (
                             <div className="flex items-center gap-2 ml-4 flex-1 min-w-0">
                                 <select
                                     value={(block.data.padding as string) || 'md'}
@@ -363,31 +363,95 @@ export function BlockWrapper({
                                     <option value="CREAM">Cream</option>
                                 </select>
                             </div>
-                        )}
-
-                        {block.type === 'columns' && (
-                            <select
-                                value={(block.data.layout as string) || '50-50'}
-                                onChange={(e) => onUpdate({ layout: e.target.value })}
-                                onClick={(e) => e.stopPropagation()}
-                                className="text-[10px] font-bold bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 px-2 py-1 rounded outline-none focus:border-primary transition-all dark:text-neutral-100 ml-4"
-                            >
-                                <option value="50-50">50% / 50%</option>
-                                <option value="33-66">33% / 66%</option>
-                                <option value="66-33">66% / 33%</option>
-                                <option value="25-25-25-25">25% / 25% / 25% / 25%</option>
-                                <option value="25-75">25% / 75%</option>
-                                <option value="75-25">75% / 25%</option>
-                            </select>
-                        )}
+                        )} */}
+
+                        {block.type === 'columns' && (() => {
+                            const columnCount = block.data.columnCount as number | undefined;
+                            const layout = block.data.layout as string | undefined;
+                            
+                            // Determine number of columns
+                            let numColumns: number;
+                            if (columnCount !== undefined && columnCount > 0) {
+                                numColumns = columnCount;
+                            } else if (layout) {
+                                // Legacy layout system
+                                const layoutMap: Record<string, number> = {
+                                    '50-50': 2,
+                                    '33-66': 2,
+                                    '66-33': 2,
+                                    '25-25-25-25': 4,
+                                    '25-75': 2,
+                                    '75-25': 2,
+                                };
+                                numColumns = layoutMap[layout] || 2;
+                            } else {
+                                numColumns = 2;
+                            }
+                            
+                            // Get column widths
+                            const storedWidths = block.data.columnWidths as number[] | undefined;
+                            const columnWidths = storedWidths && storedWidths.length === numColumns
+                                ? storedWidths
+                                : Array(numColumns).fill(Math.floor(100 / numColumns));
+                            
+                            return (
+                                <div className="flex items-center gap-1.5 ml-4 flex-1 min-w-0">
+                                    {Array.from({ length: numColumns }).map((_, colIndex) => (
+                                        <div key={colIndex} className="flex items-center gap-1">
+                                            <input
+                                                type="number"
+                                                min="10"
+                                                max="90"
+                                                step="1"
+                                                value={columnWidths[colIndex] || 50}
+                                                onChange={(e) => {
+                                                    const newWidth = parseInt(e.target.value) || 50;
+                                                    const newWidths = [...columnWidths];
+                                                    newWidths[colIndex] = Math.max(10, Math.min(90, newWidth));
+                                                    
+                                                    // Normalize remaining columns to sum to 100
+                                                    const remainingTotal = newWidths.reduce((sum, w, i) => i === colIndex ? sum : sum + w, 0);
+                                                    const remainingTarget = 100 - newWidths[colIndex];
+                                                    if (remainingTotal > 0 && remainingTarget > 0) {
+                                                        const scale = remainingTarget / remainingTotal;
+                                                        newWidths.forEach((w, i) => {
+                                                            if (i !== colIndex) {
+                                                                newWidths[i] = Math.round(w * scale);
+                                                            }
+                                                        });
+                                                    }
+                                                    
+                                                    // Ensure sum is exactly 100
+                                                    const finalTotal = newWidths.reduce((sum, w) => sum + w, 0);
+                                                    if (finalTotal !== 100) {
+                                                        const diff = 100 - finalTotal;
+                                                        const lastIndex = newWidths.length - 1;
+                                                        newWidths[lastIndex] = Math.max(10, newWidths[lastIndex] + diff);
+                                                    }
+                                                    
+                                                    onUpdate({
+                                                        ...block.data,
+                                                        columnWidths: newWidths,
+                                                        layout: undefined, // Clear layout when using custom widths
+                                                    });
+                                                }}
+                                                onClick={(e) => e.stopPropagation()}
+                                                className="w-12 text-[10px] font-bold bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 px-1.5 py-0.5 rounded outline-none focus:border-primary transition-all dark:text-neutral-100 text-center"
+                                            />
+                                            <span className="text-[9px] text-neutral-400 dark:text-neutral-500">%</span>
+                                        </div>
+                                    ))}
+                                </div>
+                            );
+                        })()}
                     </div>
-                    <div className="relative shrink-0 z-[200]" ref={settingsMenuRef}>
+                    <div className="relative shrink-0 z-20" ref={settingsMenuRef}>
                         <button
                             onClick={(e) => {
                                 e.stopPropagation();
                                 setShowSettingsMenu(!showSettingsMenu);
                             }}
-                            className="p-1 rounded transition-colors text-neutral-400 dark:text-neutral-500 hover:text-neutral-950 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 relative z-[200]"
+                            className="p-1 rounded transition-colors text-neutral-400 dark:text-neutral-500 hover:text-neutral-950 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 relative z-20"
                             title="Block settings"
                         >
                             <Settings2 size={12} />
@@ -395,7 +459,7 @@ export function BlockWrapper({
 
                         {/* Settings Dropdown Menu */}
                         {showSettingsMenu && (
-                            <div className="absolute right-0 top-full mt-1 w-40 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg shadow-xl z-[200] overflow-hidden">
+                            <div className="absolute right-0 top-full mt-1 w-40 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg shadow-xl z-20 overflow-hidden">
                                 <button
                                     onClick={(e) => {
                                         e.stopPropagation();
@@ -418,7 +482,6 @@ export function BlockWrapper({
                     ? 'border-primary/60 dark:border-primary/40 bg-primary/5 dark:bg-primary/10'
                     : 'border-neutral-200 dark:border-neutral-700 bg-transparent'
                     }`}
-                style={{ zIndex: 1 }}
             >
                 {/* Edit Component - No padding, let the component control its own spacing */}
                 <div className="relative" style={{ userSelect: 'text' }}>