initiate slaughter of tree depth

packages/editor/src/core/components/Cell/Inner/index.tsx

@@ -1,13 +1,9 @@
 import React from 'react';
-import {
-  getPluginCellSpacing,
-  normalizeCellSpacing,
-} from '../../../utils/getCellSpacing';
+import { getPluginCellSpacing } from '../../../utils/getCellSpacing';
 import {
   useCellData,
   useCellHasPlugin,
   useCellInnerDivStylingProps,
-  useCellSpacing,
   useCellSpacingProvider,
   useFocusCell,
   useIsEditMode,
@@ -33,20 +29,12 @@ const Inner: React.FC<{ nodeId: string }> = ({ nodeId }) => {
   const focus = useFocusCell(nodeId);
   const focused = useIsFocused(nodeId);
   const childrenIds = useNodeChildrenIds(nodeId);
-  const cellSpacing = useCellSpacing();
   const ref = React.useRef<HTMLDivElement>(null);
 
   const hasChildren = childrenIds.length > 0;
 
   const data = useCellData(nodeId);
   const pluginCellSpacing = getPluginCellSpacing(plugin, data);
-  const [Provider, providerValue] = useCellSpacingProvider(pluginCellSpacing);
-  let cellSpacingY = 0;
-  if (typeof pluginCellSpacing !== 'undefined' && pluginCellSpacing != null) {
-    cellSpacingY = normalizeCellSpacing(pluginCellSpacing)?.y ?? 0;
-  } else {
-    cellSpacingY = cellSpacing?.y ?? 0;
-  }
 
   const onClick = React.useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
@@ -96,21 +84,7 @@ const Inner: React.FC<{ nodeId: string }> = ({ nodeId }) => {
           {...innerDivProps}
         >
           <PluginComponent nodeId={nodeId} hasChildren={hasChildren}>
-            {hasChildren ? (
-              <Provider value={providerValue}>
-                <div
-                  style={
-                    cellSpacingY !== 0
-                      ? { margin: `${-cellSpacingY / 2}px 0` }
-                      : undefined
-                  }
-                >
-                  {children}
-                </div>
-              </Provider>
-            ) : (
-              children
-            )}
+            {children}
             {insertAllowed ? (
               <InsertNewWithDefault
                 parentCellId={nodeId}

packages/editor/src/core/components/Cell/Rows/index.tsx

@@ -8,11 +8,11 @@ const Rows: React.FC<{
   const rowIds = useNodeChildrenIds(nodeId);
 
   return (
-    <div className="react-page-cell-rows">
+    <>
       {rowIds.map((id) => (
         <Row nodeId={id} key={id} />
       ))}
-    </div>
+    </>
   );
 };
 

packages/editor/src/core/components/Row/ResizableRowCell.tsx

@@ -1,90 +1,18 @@
 import React from 'react';
-import Draggable from 'react-draggable';
 import { useMeasure } from 'react-use';
 import Cell from '../Cell';
-import {
-  useIsEditMode,
-  useIsPreviewMode,
-  useIsResizeMode,
-  useResizeCell,
-  useCellSpacing,
-  useOption,
-} from '../hooks';
 
 type Props = {
   nodeId: string;
-  rowWidth: number;
   rowHasInlineChildrenPosition?: string | null;
   isLast: boolean;
-  offset: number;
-  size: number;
-  maxSize: number;
 };
-const ResizableRowCell: React.FC<Props> = ({
-  nodeId,
-  rowWidth,
-  rowHasInlineChildrenPosition,
-  isLast,
-  offset,
-  size,
-  maxSize,
-}) => {
-  const stepWidth = rowWidth / 12; // we're going to keep it a real number to preserve some precision
-  const allowResizeInEditMode = useOption('allowResizeInEditMode');
-  const isResizeMode = useIsResizeMode();
-  const isEditMode = useIsEditMode();
-  const isPreviewMode = useIsPreviewMode();
-  const resize = useResizeCell(nodeId);
-  const [ref, { height: cellHeight }] = useMeasure();
-  const { y: cellSpacingY } = useCellSpacing() ?? { y: 0 };
-
-  const showResizeHandle =
-    !isPreviewMode &&
-    !isLast &&
-    (isResizeMode || (allowResizeInEditMode && isEditMode));
+const ResizableRowCell: React.FC<Props> = ({ nodeId }) => {
+  const [ref] = useMeasure();
 
   return (
     <>
       <Cell nodeId={nodeId} measureRef={ref} />
-
-      {showResizeHandle ? (
-        <Draggable
-          bounds={{
-            top: 0,
-            bottom: 0,
-            left: Math.round(stepWidth),
-            right: Math.round(rowWidth - stepWidth),
-          }}
-          position={{
-            x:
-              rowHasInlineChildrenPosition === 'right'
-                ? Math.round(stepWidth * (12 - offset))
-                : Math.round(stepWidth * offset),
-            y: 0,
-          }}
-          axis="x"
-          onDrag={(e, data) => {
-            const diff = Math.round(data.deltaX / stepWidth);
-            const newSize =
-              rowHasInlineChildrenPosition === 'right'
-                ? size - diff
-                : size + diff;
-            if (newSize > 0 && newSize <= maxSize) resize(newSize);
-          }}
-          grid={[Math.round(stepWidth), 0]}
-        >
-          <div
-            className="resize-handle"
-            style={{
-              // fix floating style
-              height: rowHasInlineChildrenPosition ? cellHeight : 'auto',
-              margin:
-                cellSpacingY !== 0 ? `${cellSpacingY / 2}px 0` : undefined,
-            }}
-            onClick={(e) => e.stopPropagation()}
-          ></div>
-        </Draggable>
-      ) : null}
     </>
   );
 };

packages/editor/src/core/components/Row/index.tsx

@@ -1,36 +1,20 @@
 import classNames from 'classnames';
 import React from 'react';
-import { useMeasure } from 'react-use';
 import type { Node } from '../../types/node';
 import { isRow, Row } from '../../types/node';
 import { useCellSpacing, useNodeHoverPosition, useNodeProps } from '../hooks';
 import Droppable from './Droppable';
 import ResizableRowCell from './ResizableRowCell';
 
-const reduceToIdAndSizeArray = (
-  acc: { offset: number; id: string; size: number; maxSize: number }[],
-  node: Node,
-  index: number,
-  array: Node[]
-) => {
-  const nextNode = array[index + 1];
-
-  const size = isRow(node) ? 12 : node.size ?? 12;
-  const nextSize = !nextNode || isRow(nextNode) ? 0 : nextNode.size ?? 12;
-  const offset = size + (acc[index - 1]?.offset ?? 0);
+const reduceToIdAndSizeArray = (acc: { id: string }[], node: Node) => {
   return [
     ...acc,
     {
       id: node.id,
-      size,
-      maxSize: size + nextSize - 1,
-      offset,
     },
   ];
 };
 const Row: React.FC<{ nodeId: string }> = ({ nodeId }) => {
-  const [ref, { width: rowWidth }] = useMeasure();
-
   const hoverPosition = useNodeHoverPosition(nodeId);
 
   const childrenWithOffsets = useNodeProps(nodeId, (node) =>
@@ -51,7 +35,6 @@ const Row: React.FC<{ nodeId: string }> = ({ nodeId }) => {
     <Droppable nodeId={nodeId}>
       <div
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ref={ref as any}
         className={classNames('react-page-row', {
           'react-page-row-has-floating-children': Boolean(
             rowHasInlineChildrenPosition
@@ -84,16 +67,12 @@ const Row: React.FC<{ nodeId: string }> = ({ nodeId }) => {
               Boolean(hoverPosition),
           })}
         />
-        {childrenWithOffsets.map(({ offset, id, size, maxSize }, index) => (
+        {childrenWithOffsets.map(({ id }, index) => (
           <ResizableRowCell
             key={id}
             isLast={index === childrenWithOffsets.length - 1}
-            rowWidth={rowWidth}
             nodeId={id}
             rowHasInlineChildrenPosition={rowHasInlineChildrenPosition}
-            offset={offset}
-            size={size}
-            maxSize={maxSize}
           />
         ))}
       </div>

packages/plugins/content/image/src/Renderer/ImageHtmlRenderer.tsx

@@ -35,10 +35,8 @@ const ImageHtmlRenderer: React.FC<CellPluginComponentProps<ImageState>> = (
       )}
     </div>
   ) : (
-    <div>
-      <div className="react-page-plugins-content-image-placeholder">
-        <ImageIcon style={iconStyle} />
-      </div>
+    <div className="react-page-plugins-content-image-placeholder">
+      <ImageIcon style={iconStyle} />
     </div>
   );
 };