diff --git a/packages/editor/src/core/components/Cell/Inner/index.tsx b/packages/editor/src/core/components/Cell/Inner/index.tsx index 29b1348ef..b97962bd7 100644 --- a/packages/editor/src/core/components/Cell/Inner/index.tsx +++ b/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(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) => { @@ -96,21 +84,7 @@ const Inner: React.FC<{ nodeId: string }> = ({ nodeId }) => { {...innerDivProps} > - {hasChildren ? ( - -
- {children} -
-
- ) : ( - children - )} + {children} {insertAllowed ? ( + <> {rowIds.map((id) => ( ))} - + ); }; diff --git a/packages/editor/src/core/components/Row/ResizableRowCell.tsx b/packages/editor/src/core/components/Row/ResizableRowCell.tsx index 352a3ca83..7ae7d92a7 100644 --- a/packages/editor/src/core/components/Row/ResizableRowCell.tsx +++ b/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 = ({ - 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 = ({ nodeId }) => { + const [ref] = useMeasure(); return ( <> - - {showResizeHandle ? ( - { - 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]} - > -
e.stopPropagation()} - >
-
- ) : null} ); }; diff --git a/packages/editor/src/core/components/Row/index.tsx b/packages/editor/src/core/components/Row/index.tsx index 471676e4f..bb697444a 100644 --- a/packages/editor/src/core/components/Row/index.tsx +++ b/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 }) => {
= ({ nodeId }) => { Boolean(hoverPosition), })} /> - {childrenWithOffsets.map(({ offset, id, size, maxSize }, index) => ( + {childrenWithOffsets.map(({ id }, index) => ( ))}
diff --git a/packages/plugins/content/image/src/Renderer/ImageHtmlRenderer.tsx b/packages/plugins/content/image/src/Renderer/ImageHtmlRenderer.tsx index 9468ce852..9c775fbd1 100644 --- a/packages/plugins/content/image/src/Renderer/ImageHtmlRenderer.tsx +++ b/packages/plugins/content/image/src/Renderer/ImageHtmlRenderer.tsx @@ -35,10 +35,8 @@ const ImageHtmlRenderer: React.FC> = ( )} ) : ( -
-
- -
+
+
); };