Using zustand for EditorState (#41)

packages/editor-sample/package.json

@@ -18,15 +18,16 @@
     "@usewaypoint/block-container": "^0.0.1",
     "@usewaypoint/block-divider": "^0.0.3",
     "@usewaypoint/block-heading": "^0.0.2",
-    "@usewaypoint/block-html": "^0.0.1",
-    "@usewaypoint/block-image": "^0.0.3",
+    "@usewaypoint/block-html": "^0.0.2",
+    "@usewaypoint/block-image": "^0.0.4",
     "@usewaypoint/block-spacer": "^0.0.2",
-    "@usewaypoint/block-text": "^0.0.1",
+    "@usewaypoint/block-text": "^0.0.2",
     "@usewaypoint/document-core": "^0.0.1",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "zustand": "^4.5.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",

packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Box, Typography } from '@mui/material';
 
 import { TEditorBlock } from '../../../documents/editor/core';
-import { useEditorState } from '../../../documents/editor/EditorContext';
+import { setEditorState, useDocument, useSelectedBlockId } from '../../../documents/editor/EditorContext';
 
 import AvatarSidebarPanel from './input-panels/AvatarSidebarPanel';
 import ButtonSidebarPanel from './input-panels/ButtonSidebarPanel';
@@ -26,7 +26,8 @@ function renderMessage(val: string) {
 }
 
 export default function ConfigurationPanel() {
-  const [{ document, selectedBlockId }, setEditorState] = useEditorState();
+  const document = useDocument();
+  const selectedBlockId = useSelectedBlockId();
 
   if (!selectedBlockId) {
     return renderMessage('Click on a block to inspect.');

packages/editor-sample/src/App/InspectorDrawer/StylesPanel.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 
 import { TEditorBlock } from '../../documents/editor/core';
-import { useEditorState } from '../../documents/editor/EditorContext';
+import { setEditorState, useDocument } from '../../documents/editor/EditorContext';
 
 import EmailLayoutSidebarPanel from './ConfigurationPanel/input-panels/EmailLayoutSidebarPanel';
 
 export default function StylesPanel() {
-  const [{ document }, setEditorState] = useEditorState();
-
-  const block = document.root;
+  const block = useDocument().root;
   if (!block) {
     return <p>Block not found</p>;
   }

packages/editor-sample/src/App/InspectorDrawer/ToggleInspectorPanelButton.tsx

@@ -3,10 +3,11 @@ import React from 'react';
 import { AppRegistrationOutlined, LastPageOutlined } from '@mui/icons-material';
 import { IconButton } from '@mui/material';
 
-import { useEditorState } from '../../documents/editor/EditorContext';
+import { setEditorState, useInspectorDrawerOpen } from '../../documents/editor/EditorContext';
 
 export default function ToggleInspectorPanelButton() {
-  const [{ inspectorDrawerOpen }, setEditorState] = useEditorState();
+  const inspectorDrawerOpen = useInspectorDrawerOpen();
+
   const handleClick = () => {
     setEditorState({ inspectorDrawerOpen: !inspectorDrawerOpen });
   };

packages/editor-sample/src/App/InspectorDrawer/index.tsx

@@ -2,15 +2,16 @@ import React from 'react';
 
 import { Box, Drawer, Tab, Tabs } from '@mui/material';
 
-import { useEditorState } from '../../documents/editor/EditorContext';
+import { setEditorState, useInspectorDrawerOpen, useSelectedSidebarTab } from '../../documents/editor/EditorContext';
 
 import ConfigurationPanel from './ConfigurationPanel';
 import StylesPanel from './StylesPanel';
 
 export const INSPECTOR_DRAWER_WIDTH = 320;
 
 export default function InspectorDrawer() {
-  const [{ selectedSidebarTab, inspectorDrawerOpen }, setEditorState] = useEditorState();
+  const selectedSidebarTab = useSelectedSidebarTab();
+  const inspectorDrawerOpen = useInspectorDrawerOpen();
 
   const renderCurrentSidebarPanel = () => {
     switch (selectedSidebarTab) {

packages/editor-sample/src/App/SamplesDrawer/ToggleSamplesPanelButton.tsx

@@ -3,10 +3,11 @@ import React from 'react';
 import { FirstPageOutlined, MenuOutlined } from '@mui/icons-material';
 import { IconButton } from '@mui/material';
 
-import { useEditorState } from '../../documents/editor/EditorContext';
+import { setEditorState, useSamplesDrawerOpen } from '../../documents/editor/EditorContext';
 
 export default function ToggleSamplesPanelButton() {
-  const [{ samplesDrawerOpen }, setEditorState] = useEditorState();
+  const samplesDrawerOpen = useSamplesDrawerOpen();
+
   const handleClick = () => {
     setEditorState({ samplesDrawerOpen: !samplesDrawerOpen });
   };

packages/editor-sample/src/App/SamplesDrawer/index.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 
 import { Box, Button, Drawer, Link, Stack, Typography } from '@mui/material';
 
-import { useEditorState } from '../../documents/editor/EditorContext';
+import { useSamplesDrawerOpen } from '../../documents/editor/EditorContext';
 
 import logo from './waypoint.svg';
 
 export const SAMPLES_DRAWER_WIDTH = 240;
 
 export default function SamplesDrawer() {
-  const [{ samplesDrawerOpen }] = useEditorState();
+  const samplesDrawerOpen = useSamplesDrawerOpen();
 
   const select = (val: string) => {
     window.location.hash = `#sample/${val}`;

packages/editor-sample/src/App/TemplatePanel/HtmlPanel.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 
-import { useEditorState } from '../../documents/editor/EditorContext';
+import { useDocument } from '../../documents/editor/EditorContext';
 import ReaderBlock from '../../documents/reader/ReaderBlock';
 import { ReaderProvider } from '../../documents/reader/ReaderContext';
 
 export default function HtmlPanel() {
-  const [{ document }] = useEditorState();
+  const document = useDocument();
+
   const string = React.useMemo(() => {
     return renderToStaticMarkup(
       <ReaderProvider value={document}>

packages/editor-sample/src/App/TemplatePanel/ShareButton.tsx

@@ -3,10 +3,10 @@ import React, { useState } from 'react';
 import { IosShareOutlined } from '@mui/icons-material';
 import { IconButton, Snackbar, Tooltip } from '@mui/material';
 
-import { useEditorState } from '../../documents/editor/EditorContext';
+import { useDocument } from '../../documents/editor/EditorContext';
 
 export default function ShareButton() {
-  const [{ document }] = useEditorState();
+  const document = useDocument();
   const [message, setMessage] = useState<string | null>(null);
 
   const onClick = async () => {

packages/editor-sample/src/App/TemplatePanel/index.tsx

@@ -4,7 +4,7 @@ import { CodeOutlined, DataObjectOutlined, EditOutlined, PreviewOutlined } from
 import { Box, Stack, Tab, Tabs, Tooltip } from '@mui/material';
 
 import EditorBlock from '../../documents/editor/EditorBlock';
-import { useEditorState } from '../../documents/editor/EditorContext';
+import { setEditorState, useDocument, useSelectedMainTab } from '../../documents/editor/EditorContext';
 import ReaderBlock from '../../documents/reader/ReaderBlock';
 import { ReaderProvider } from '../../documents/reader/ReaderContext';
 import ToggleInspectorPanelButton from '../InspectorDrawer/ToggleInspectorPanelButton';
@@ -14,7 +14,8 @@ import HtmlPanel from './HtmlPanel';
 import ShareButton from './ShareButton';
 
 export default function TemplatePanel() {
-  const [{ document, selectedMainTab }, setEditorState] = useEditorState();
+  const document = useDocument();
+  const selectedMainTab = useSelectedMainTab();
 
   const renderMainPanel = () => {
     switch (selectedMainTab) {

packages/editor-sample/src/App/index.tsx

@@ -1,16 +1,27 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Stack, useTheme } from '@mui/material';
 
-import { useEditorState } from '../documents/editor/EditorContext';
+import { setEditorState, useInspectorDrawerOpen, useSamplesDrawerOpen } from '../documents/editor/EditorContext';
+import getConfiguration from '../getConfiguration';
 
 import InspectorDrawer, { INSPECTOR_DRAWER_WIDTH } from './InspectorDrawer';
 import SamplesDrawer, { SAMPLES_DRAWER_WIDTH } from './SamplesDrawer';
 import TemplatePanel from './TemplatePanel';
 
 export default function App() {
   const theme = useTheme();
-  const [{ inspectorDrawerOpen, samplesDrawerOpen }] = useEditorState();
+  const inspectorDrawerOpen = useInspectorDrawerOpen();
+  const samplesDrawerOpen = useSamplesDrawerOpen();
+
+  useEffect(() => {
+    function refresh() {
+      setEditorState({ document: getConfiguration(window.location.hash) });
+    }
+    refresh();
+    window.addEventListener('hashchange', refresh);
+    return () => window.removeEventListener('hashchange', refresh);
+  });
 
   return (
     <>

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 { useEditorState } from '../../editor/EditorContext';
+import { setEditorState, useDocument } from '../../editor/EditorContext';
 import ReaderBlock from '../../reader/ReaderBlock';
 import EditorChildrenIds from '../helpers/EditorChildrenIds';
 
@@ -23,7 +23,7 @@ export function ColumnsContainer({ style, props }: ColumnsContainerProps) {
 const EMPTY_COLUMNS = [{ childrenIds: [] }, { childrenIds: [] }, { childrenIds: [] }];
 
 export function EditorColumnsContainer({ style, props }: ColumnsContainerProps) {
-  const [{ document }, setEditorState] = useEditorState();
+  const document = useDocument();
   const blockId = useCurrentBlockId();
 
   const { columns, ...restProps } = props ?? {};

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 { useEditorState } from '../../editor/EditorContext';
+import { setEditorState, useDocument } from '../../editor/EditorContext';
 import ReaderBlock from '../../reader/ReaderBlock';
 import EditorChildrenIds from '../helpers/EditorChildrenIds';
 
@@ -24,7 +24,7 @@ export function Container({ style, props }: ContainerProps) {
 export function EditorContainer({ style, props }: ContainerProps) {
   const childrenIds = props?.childrenIds ?? [];
 
-  const [{ document }, setEditorState] = useEditorState();
+  const document = useDocument();
   const blockId = useCurrentBlockId();
 
   const insertBlock = (blockConfiguration: TEditorBlock, i: number | null) => {

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 { useEditorState } from '../../editor/EditorContext';
+import { setEditorState, useDocument } from '../../editor/EditorContext';
 import ReaderBlock from '../../reader/ReaderBlock';
 import EditorChildrenIds from '../helpers/EditorChildrenIds';
 
@@ -37,7 +37,7 @@ export function EmailLayout(props: EmailLayoutProps) {
 }
 
 export function EditorEmailLayout(props: EmailLayoutProps) {
-  const [{ document }, setEditorState] = useEditorState();
+  const document = useDocument();
   const blockId = useCurrentBlockId();
   const childrenIds = props.childrenIds;
 

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 { useEditorState } from '../../../editor/EditorContext';
+import { setEditorState, useSelectedBlockId } from '../../../editor/EditorContext';
 
 import TuneMenu from './TuneMenu';
 
@@ -12,7 +12,7 @@ type TEditorBlockWrapperProps = {
 };
 
 export default function EditorBlockWrapper({ children }: TEditorBlockWrapperProps) {
-  const [{ selectedBlockId }, setEditorState] = useEditorState();
+  const selectedBlockId = useSelectedBlockId();
   const [mouseInside, setMouseInside] = useState(false);
   const blockId = useCurrentBlockId();
 

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 { useEditorState } from '../../../editor/EditorContext';
+import { setEditorState, useDocument } from '../../../editor/EditorContext';
 import { ColumnsContainerProps } from '../../ColumnsContainer/ColumnsContainerPropsSchema';
 
 const STYLE: CSSProperties = {
@@ -18,7 +18,7 @@ type Props = {
   blockId: string;
 };
 export default function TuneMenu({ blockId }: Props) {
-  const [{ document }, setEditorState] = useEditorState();
+  const document = useDocument();
 
   const handleDeleteClick = () => {
     const nDocument: typeof document = { ...document };