Add block movement support to sample editor (#124)

usewaypoint · Aug 8, 2024 · 029ca67 · 029ca67
1 parent b257872
commit 029ca67
Showing 1 changed file with 77 additions and 1 deletion.
diff --git a/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx b/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx
@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react';
 
-import { DeleteOutlined } from '@mui/icons-material';
+import { ArrowDownwardOutlined, ArrowUpwardOutlined, DeleteOutlined } from '@mui/icons-material';
 import { IconButton, Paper, Stack, Tooltip } from '@mui/material';
 
 import { TEditorBlock } from '../../../editor/core';
@@ -77,9 +77,85 @@ export default function TuneMenu({ blockId }: Props) {
  resetDocument(nDocument);
  };
 
+ const handleMoveClick = (direction: 'up' | 'down') => {
+ const moveChildrenIds = (childrenIds: string[] | null | undefined) => {
+ if (!childrenIds) {
+ return childrenIds;
+ }
+ const index = childrenIds.indexOf(blockId);
+ if (index !== -1) {
+ if (direction === 'up' && index > 0) {
+ [childrenIds[index], childrenIds[index - 1]] = [childrenIds[index - 1], childrenIds[index]];
+ } else if (direction === 'down' && index < childrenIds.length - 1) {
+ [childrenIds[index], childrenIds[index + 1]] = [childrenIds[index + 1], childrenIds[index]];
+ }
+ }
+
+ return childrenIds;
+ };
+ const nDocument: typeof document = { ...document };
+ for (const [id, b] of Object.entries(nDocument)) {
+ const block = b as TEditorBlock;
+ if (id === blockId) {
+ continue;
+ }
+ switch (block.type) {
+ case 'EmailLayout':
+ nDocument[id] = {
+ ...block,
+ data: {
+ ...block.data,
+ childrenIds: moveChildrenIds(block.data.childrenIds),
+ },
+ };
+ break;
+ case 'Container':
+ nDocument[id] = {
+ ...block,
+ data: {
+ ...block.data,
+ props: {
+ ...block.data.props,
+ childrenIds: moveChildrenIds(block.data.props?.childrenIds),
+ },
+ },
+ };
+ break;
+ case 'ColumnsContainer':
+ nDocument[id] = {
+ type: 'ColumnsContainer',
+ data: {
+ style: block.data.style,
+ props: {
+ ...block.data.props,
+ columns: block.data.props?.columns?.map((c) => ({
+ childrenIds: moveChildrenIds(c.childrenIds),
+ })),
+ },
+ } as ColumnsContainerProps,
+ };
+ break;
+ default:
+ nDocument[id] = block;
+ }
+ }
+ console.log(nDocument);
+ resetDocument(nDocument);
+ };
+
  return (
  <Paper style={STYLE} onClick={(ev) => ev.stopPropagation()}>
  <Stack>
+ <Tooltip title="Move Up" placement="left-start">
+ <IconButton onClick={() => handleMoveClick('up')} sx={{ color: 'text.primary' }}>
+ <ArrowUpwardOutlined fontSize="small" />
+ </IconButton>
+ </Tooltip>
+ <Tooltip title="Move Down" placement="left-start">
+ <IconButton onClick={() => handleMoveClick('down')} sx={{ color: 'text.primary' }}>
+ <ArrowDownwardOutlined fontSize="small" />
+ </IconButton>
+ </Tooltip>
  <Tooltip title="Delete" placement="left-start">
  <IconButton onClick={handleDeleteClick} sx={{ color: 'text.primary' }}>
  <DeleteOutlined fontSize="small" />