Add notes

src/pages/editor.jsx

@@ -11,12 +11,14 @@ export const LayoutContext = createContext();
 export const TableContext = createContext();
 export const AreaContext = createContext();
 export const TabContext = createContext();
+export const NoteContext = createContext();
 
 export default function Editor(props) {
   const [code, setCode] = useState("");
   const [tables, setTables] = useState([]);
   const [relationships, setRelationships] = useState([]);
   const [areas, setAreas] = useState([]);
+  const [notes, setNotes] = useState([]);
   const [resize, setResize] = useState(false);
   const [width, setWidth] = useState(340);
   const [selectedTable, setSelectedTable] = useState("");
@@ -30,7 +32,7 @@ export default function Editor(props) {
     relationships: true,
     issues: true,
     editor: true,
-    shapes: true,
+    notes: true,
     fullscreen: false,
   });
 
@@ -50,41 +52,43 @@ export default function Editor(props) {
         value={{ tables, setTables, relationships, setRelationships }}
       >
         <AreaContext.Provider value={{ areas, setAreas }}>
-          <TabContext.Provider value={{ tab, setTab }}>
-            <div className="h-[100vh] overflow-hidden">
-              <ControlPanel />
-              <div
-                className={
-                  layout.header
-                    ? `flex h-[calc(100vh-123.93px)]`
-                    : `flex h-[calc(100vh-51.97px)]`
-                }
-                onMouseUp={() => setResize(false)}
-                onMouseMove={dragHandler}
-              >
-                <DndProvider backend={HTML5Backend}>
-                  {layout.sidebar && (
-                    <EditorPanel
+          <NoteContext.Provider value={{ notes, setNotes }}>
+            <TabContext.Provider value={{ tab, setTab }}>
+              <div className="h-[100vh] overflow-hidden">
+                <ControlPanel />
+                <div
+                  className={
+                    layout.header
+                      ? `flex h-[calc(100vh-123.93px)]`
+                      : `flex h-[calc(100vh-51.97px)]`
+                  }
+                  onMouseUp={() => setResize(false)}
+                  onMouseMove={dragHandler}
+                >
+                  <DndProvider backend={HTML5Backend}>
+                    {layout.sidebar && (
+                      <EditorPanel
+                        code={code}
+                        setCode={setCode}
+                        resize={resize}
+                        setResize={setResize}
+                        width={width}
+                        selectedTable={selectedTable}
+                        setSelectedTable={setSelectedTable}
+                      />
+                    )}
+                    <Canvas
                       code={code}
                       setCode={setCode}
-                      resize={resize}
-                      setResize={setResize}
-                      width={width}
                       selectedTable={selectedTable}
                       setSelectedTable={setSelectedTable}
                     />
-                  )}
-                  <Canvas
-                    code={code}
-                    setCode={setCode}
-                    selectedTable={selectedTable}
-                    setSelectedTable={setSelectedTable}
-                  />
-                </DndProvider>
-                {layout.services && <Sidebar />}
+                  </DndProvider>
+                  {layout.services && <Sidebar />}
+                </div>
               </div>
-            </div>
-          </TabContext.Provider>
+            </TabContext.Provider>
+          </NoteContext.Provider>
         </AreaContext.Provider>
       </TableContext.Provider>
     </LayoutContext.Provider>