diff --git a/packages/editor-sample/src/documents/blocks/ColumnsContainer/index.tsx b/packages/editor-sample/src/documents/blocks/ColumnsContainer/index.tsx
index ea7415c..d7b7ae0 100644
--- a/packages/editor-sample/src/documents/blocks/ColumnsContainer/index.tsx
+++ b/packages/editor-sample/src/documents/blocks/ColumnsContainer/index.tsx
@@ -4,7 +4,7 @@ import { ColumnsContainer as BaseColumnsContainer } from '@usewaypoint/block-col
import { TEditorBlock } from '../../editor/core';
import { useCurrentBlockId } from '../../editor/EditorBlock';
-import { setEditorState, useDocument } from '../../editor/EditorContext';
+import { setDocument, setSelectedBlockId } from '../../editor/EditorContext';
import ReaderBlock from '../../reader/ReaderBlock';
import EditorChildrenIds from '../helpers/EditorChildrenIds';
@@ -23,7 +23,6 @@ export function ColumnsContainer({ style, props }: ColumnsContainerProps) {
const EMPTY_COLUMNS = [{ childrenIds: [] }, { childrenIds: [] }, { childrenIds: [] }];
export function EditorColumnsContainer({ style, props }: ColumnsContainerProps) {
- const document = useDocument();
const blockId = useCurrentBlockId();
const { columns, ...restProps } = props ?? {};
@@ -59,21 +58,18 @@ export function EditorColumnsContainer({ style, props }: ColumnsContainerProps)
return columnsCopy;
};
- setEditorState({
- selectedBlockId: id,
- document: {
- ...document,
- [id]: blockConfiguration,
- [blockId]: {
- type: 'ColumnsContainer',
- data: ColumnsContainerPropsSchema.parse({
- style,
- props: {
- ...restProps,
- columns: getColumns(),
- },
- }),
- },
+ setSelectedBlockId(id);
+ setDocument({
+ [id]: blockConfiguration,
+ [blockId]: {
+ type: 'ColumnsContainer',
+ data: ColumnsContainerPropsSchema.parse({
+ style,
+ props: {
+ ...restProps,
+ columns: getColumns(),
+ },
+ }),
},
});
};
diff --git a/packages/editor-sample/src/documents/blocks/Container/index.tsx b/packages/editor-sample/src/documents/blocks/Container/index.tsx
index 3f94e77..d37ec3a 100644
--- a/packages/editor-sample/src/documents/blocks/Container/index.tsx
+++ b/packages/editor-sample/src/documents/blocks/Container/index.tsx
@@ -4,7 +4,7 @@ import { Container as BaseContainer } from '@usewaypoint/block-container';
import { TEditorBlock } from '../../editor/core';
import { useCurrentBlockId } from '../../editor/EditorBlock';
-import { setEditorState, useDocument } from '../../editor/EditorContext';
+import { setDocument, setSelectedBlockId, useDocument } from '../../editor/EditorContext';
import ReaderBlock from '../../reader/ReaderBlock';
import EditorChildrenIds from '../helpers/EditorChildrenIds';
@@ -36,17 +36,14 @@ export function EditorContainer({ style, props }: ContainerProps) {
nChildrenIds = [...childrenIds.slice(0, i), id, ...childrenIds.slice(i)];
}
- setEditorState({
- selectedBlockId: id,
- document: {
- ...document,
- [id]: blockConfiguration,
- [blockId]: {
- type: 'Container',
- data: {
- ...document[blockId].data,
- props: { childrenIds: nChildrenIds },
- },
+ setSelectedBlockId(id);
+ setDocument({
+ [id]: blockConfiguration,
+ [blockId]: {
+ type: 'Container',
+ data: {
+ ...document[blockId].data,
+ props: { childrenIds: nChildrenIds },
},
},
});
diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout/index.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/index.tsx
index 6f7ed4d..58c8074 100644
--- a/packages/editor-sample/src/documents/blocks/EmailLayout/index.tsx
+++ b/packages/editor-sample/src/documents/blocks/EmailLayout/index.tsx
@@ -3,7 +3,7 @@ import { z } from 'zod';
import { TEditorBlock } from '../../editor/core';
import { useCurrentBlockId } from '../../editor/EditorBlock';
-import { setEditorState, useDocument } from '../../editor/EditorContext';
+import { setDocument, setSelectedBlockId, useDocument } from '../../editor/EditorContext';
import ReaderBlock from '../../reader/ReaderBlock';
import EditorChildrenIds from '../helpers/EditorChildrenIds';
@@ -50,30 +50,24 @@ export function EditorEmailLayout(props: EmailLayoutProps) {
return [...childrenIds.slice(0, i), id, ...childrenIds.slice(i)];
};
- setEditorState({
- selectedBlockId: id,
- document: {
- ...document,
- [id]: blockConfiguration,
- [blockId]: {
- type: 'EmailLayout',
- data: {
- ...document[blockId].data,
- childrenIds: getChildrenIds(),
- },
- } as TEditorBlock,
- },
+ setDocument({
+ [id]: blockConfiguration,
+ [blockId]: {
+ type: 'EmailLayout',
+ data: {
+ ...document[blockId].data,
+ childrenIds: getChildrenIds(),
+ },
+ } as TEditorBlock,
});
+ setSelectedBlockId(id);
};
return (
{
- setEditorState({
- selectedSidebarTab: 'styles',
- selectedBlockId: null,
- });
+ setSelectedBlockId(null);
}}
>
diff --git a/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/EditorBlockWrapper.tsx b/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/EditorBlockWrapper.tsx
index 0678095..3d68ae6 100644
--- a/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/EditorBlockWrapper.tsx
+++ b/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/EditorBlockWrapper.tsx
@@ -3,7 +3,7 @@ import React, { CSSProperties, useState } from 'react';
import { Box } from '@mui/material';
import { useCurrentBlockId } from '../../../editor/EditorBlock';
-import { setEditorState, useSelectedBlockId } from '../../../editor/EditorContext';
+import { setSelectedBlockId, useSelectedBlockId } from '../../../editor/EditorContext';
import TuneMenu from './TuneMenu';
@@ -46,11 +46,7 @@ export default function EditorBlockWrapper({ children }: TEditorBlockWrapperProp
setMouseInside(false);
}}
onClick={(ev) => {
- setEditorState({
- inspectorDrawerOpen: true,
- selectedSidebarTab: 'block-configuration',
- selectedBlockId: blockId,
- });
+ setSelectedBlockId(blockId, { inspectorDrawerOpen: true });
ev.stopPropagation();
ev.preventDefault();
}}
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
index 640ad94..50429f1 100644
--- a/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx
+++ b/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx
@@ -4,7 +4,7 @@ import { DeleteOutlined } from '@mui/icons-material';
import { IconButton, Paper, Stack, Tooltip } from '@mui/material';
import { TEditorBlock } from '../../../editor/core';
-import { setEditorState, useDocument } from '../../../editor/EditorContext';
+import { resetDocument, useDocument } from '../../../editor/EditorContext';
import { ColumnsContainerProps } from '../../ColumnsContainer/ColumnsContainerPropsSchema';
const STYLE: CSSProperties = {
@@ -68,10 +68,7 @@ export default function TuneMenu({ blockId }: Props) {
}
}
delete nDocument[blockId];
- setEditorState({
- document: nDocument,
- selectedBlockId: null,
- });
+ resetDocument(nDocument);
};
return (
diff --git a/packages/editor-sample/src/documents/editor/EditorContext.tsx b/packages/editor-sample/src/documents/editor/EditorContext.tsx
index 35a52cb..36e8abf 100644
--- a/packages/editor-sample/src/documents/editor/EditorContext.tsx
+++ b/packages/editor-sample/src/documents/editor/EditorContext.tsx
@@ -16,7 +16,7 @@ type TValue = {
samplesDrawerOpen: boolean;
};
-const useEditorState = create(() => ({
+const editorStateStore = create(() => ({
document: getConfiguration(window.location.hash),
selectedBlockId: null,
selectedSidebarTab: 'styles',
@@ -28,33 +28,77 @@ const useEditorState = create(() => ({
}));
export function useDocument() {
- return useEditorState((s) => s.document);
+ return editorStateStore((s) => s.document);
}
export function useSelectedBlockId() {
- return useEditorState((s) => s.selectedBlockId);
+ return editorStateStore((s) => s.selectedBlockId);
}
export function useSelectedScreenSize() {
- return useEditorState((s) => s.selectedScreenSize);
+ return editorStateStore((s) => s.selectedScreenSize);
}
export function useSelectedMainTab() {
- return useEditorState((s) => s.selectedMainTab);
+ return editorStateStore((s) => s.selectedMainTab);
+}
+
+export function setSelectedMainTab(selectedMainTab: TValue['selectedMainTab']) {
+ return editorStateStore.setState({ selectedMainTab });
}
export function useSelectedSidebarTab() {
- return useEditorState((s) => s.selectedSidebarTab);
+ return editorStateStore((s) => s.selectedSidebarTab);
}
export function useInspectorDrawerOpen() {
- return useEditorState((s) => s.inspectorDrawerOpen);
+ return editorStateStore((s) => s.inspectorDrawerOpen);
}
export function useSamplesDrawerOpen() {
- return useEditorState((s) => s.samplesDrawerOpen);
+ return editorStateStore((s) => s.samplesDrawerOpen);
+}
+
+type SetSelectedBlockIdOptions = {
+ inspectorDrawerOpen: boolean;
+};
+export function setSelectedBlockId(selectedBlockId: TValue['selectedBlockId'], options?: SetSelectedBlockIdOptions) {
+ const selectedSidebarTab = selectedBlockId === null ? 'styles' : 'block-configuration';
+ return editorStateStore.setState({ selectedBlockId, selectedSidebarTab, options });
+}
+
+export function setSidebarTab(selectedSidebarTab: TValue['selectedSidebarTab']) {
+ return editorStateStore.setState({ selectedSidebarTab });
+}
+
+export function resetDocument(document: TValue['document']) {
+ return editorStateStore.setState({
+ document,
+ selectedSidebarTab: 'styles',
+ selectedBlockId: null,
+ });
+}
+
+export function setDocument(document: TValue['document']) {
+ const originalDocument = editorStateStore.getState().document;
+ return editorStateStore.setState({
+ document: {
+ ...originalDocument,
+ ...document,
+ },
+ });
+}
+
+export function toggleInspectorDrawerOpen() {
+ const inspectorDrawerOpen = !editorStateStore.getState().inspectorDrawerOpen;
+ return editorStateStore.setState({ inspectorDrawerOpen });
+}
+
+export function toggleSamplesDrawerOpen() {
+ const samplesDrawerOpen = !editorStateStore.getState().samplesDrawerOpen;
+ return editorStateStore.setState({ samplesDrawerOpen });
}
-export function setEditorState(state: Partial) {
- useEditorState.setState({ ...state });
+export function setSelectedScreenSize(selectedScreenSize: TValue['selectedScreenSize']) {
+ return editorStateStore.setState({ selectedScreenSize });
}