diff --git a/api/share.ts b/api/share.ts
new file mode 100644
index 000000000..936144ed1
--- /dev/null
+++ b/api/share.ts
@@ -0,0 +1,33 @@
+import { VercelRequest, VercelResponse } from "@vercel/node";
+import { confirmActiveSubscriptionFromToken } from "./_lib/_helpers";
+import { supabase } from "./_lib/_supabase";
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  // make sure user is logged in
+  const token = req.headers.authorization;
+  if (!token) {
+    return res.status(401).send("Unauthorized");
+  }
+  if (!confirmActiveSubscriptionFromToken(token)) {
+    return res.status(402).send("Unauthorized");
+  }
+
+  // get chartId and userEmail from request body
+  const { chartId, userEmail } = req.body;
+  if (!chartId || !userEmail) {
+    return res.status(400).send("Missing chartId or userEmail");
+  }
+
+  const result = await supabase.from("shared_charts").insert([
+    {
+      flowchart_id: chartId,
+      user_email: userEmail,
+    },
+  ]);
+
+  if (result.error) {
+    return res.status(400).send(result.error.message);
+  }
+
+  return res.status(200).send("Chart shared successfully");
+}
diff --git a/app/package.json b/app/package.json
index 9f25eb1f6..e7eefa878 100644
--- a/app/package.json
+++ b/app/package.json
@@ -54,8 +54,9 @@
     "@sentry/tracing": "^7.38.0",
     "@stripe/react-stripe-js": "^1.16.4",
     "@stripe/stripe-js": "^1.46.0",
-    "@supabase/gotrue-js": "^2",
-    "@supabase/supabase-js": "^2",
+    "@supabase/gotrue-js": "^2.12.1",
+    "@supabase/realtime-js": "^2.6.0",
+    "@supabase/supabase-js": "^2.8.0",
     "@svgr/webpack": "^6.3.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -107,6 +108,10 @@
     "svgo": "^2.8.0",
     "use-debounce": "^5.2.1",
     "web-vitals": "^1.0.1",
+    "y-monaco": "^0.1.4",
+    "y-protocols": "^1.0.5",
+    "y-websocket": "^1.4.5",
+    "yjs": "^13.5.47",
     "zustand": "^4.3.3"
   },
   "eslintConfig": {
@@ -189,6 +194,9 @@
     ],
     "transformIgnorePatterns": [
       "node_modules/(?!(react-use-localstorage)).*\\.js$"
-    ]
+    ],
+    "moduleNameMapper": {
+      "monaco-editor": "<rootDir>/node_modules/@monaco-editor/react"
+    }
   }
 }
diff --git a/app/src/components/AppContext.tsx b/app/src/components/AppContext.tsx
index fbe7a11b4..60ee333ca 100644
--- a/app/src/components/AppContext.tsx
+++ b/app/src/components/AppContext.tsx
@@ -26,7 +26,7 @@ import { colors, darkTheme } from "../slang/config";
 type Theme = typeof colors;
 
 // Stored in localStorage
-export type UserSettings = {
+type UserSettings = {
   mode: "light" | "dark";
   language?: string;
 };
diff --git a/app/src/components/CloneButton.tsx b/app/src/components/CloneButton.tsx
index 497ac8de8..3b0ca84ea 100644
--- a/app/src/components/CloneButton.tsx
+++ b/app/src/components/CloneButton.tsx
@@ -2,14 +2,15 @@ import { Trans } from "@lingui/macro";
 import { FaCopy } from "react-icons/fa";
 import { useHistory } from "react-router-dom";
 
+import { getDoc } from "../lib/docHelpers";
+import { docToString } from "../lib/docToString";
 import { randomChartName, titleToLocalStorageKey } from "../lib/helpers";
-import { docToString, useDoc } from "../lib/useDoc";
 import { Type } from "../slang";
 import styles from "./EditorWrapper.module.css";
 
 export function CloneButton() {
   const { push } = useHistory();
-  const fullText = useDoc((s) => docToString(s));
+  const fullText = docToString(getDoc());
   return (
     <button
       className={`${styles.ShareButton} ${styles.cloneBtn}`}
diff --git a/app/src/components/EditorError.tsx b/app/src/components/EditorError.tsx
index 925de36f7..b5ea0f0df 100644
--- a/app/src/components/EditorError.tsx
+++ b/app/src/components/EditorError.tsx
@@ -1,7 +1,7 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { BiErrorCircle } from "react-icons/bi";
 
-import { useParseError } from "../lib/useDoc";
+import { useParseError } from "../lib/useParseError";
 import { Box, Type } from "../slang";
 import styles from "./EditorError.module.css";
 
diff --git a/app/src/components/EditorOptions.tsx b/app/src/components/EditorOptions.tsx
index 8b031b46e..fe3e6247a 100644
--- a/app/src/components/EditorOptions.tsx
+++ b/app/src/components/EditorOptions.tsx
@@ -1,9 +1,8 @@
 import { Trans } from "@lingui/macro";
-import produce from "immer";
 import React, { ReactNode } from "react";
 
+import { setMetaImmer } from "../lib/docHelpers";
 import { parsers, useParser } from "../lib/parsers";
-import { useDoc } from "../lib/useDoc";
 import { Box, Type } from "../slang";
 import styles from "./EditorOptions.module.css";
 import { SyntaxReference } from "./SyntaxReference";
@@ -29,15 +28,9 @@ export function EditorOptions({ children }: { children: ReactNode }) {
             background="color-lineNumbers"
             value={parser}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-              useDoc.setState(
-                (state) => {
-                  return produce(state, (draft) => {
-                    draft.meta.parser = e.target.value;
-                  });
-                },
-                false,
-                "syntax"
-              );
+              setMetaImmer((draft) => {
+                draft.parser = e.target.value;
+              }, "syntax");
             }}
           >
             {parsers.map((p) => (
diff --git a/app/src/components/EditorWrapper.tsx b/app/src/components/EditorWrapper.tsx
index 6df65aeb2..85c2babe5 100644
--- a/app/src/components/EditorWrapper.tsx
+++ b/app/src/components/EditorWrapper.tsx
@@ -3,7 +3,7 @@ import { Export } from "phosphor-react";
 import { Suspense, useContext } from "react";
 
 import { useIsReadOnly, useIsValidCustomer } from "../lib/hooks";
-import { useDocDetails } from "../lib/useDoc";
+import { useDetails } from "../lib/useDetails";
 import { Box, Type } from "../slang";
 import { AppContext } from "./AppContext";
 import { CloneButton } from "./CloneButton";
@@ -17,7 +17,7 @@ import { RenameButton } from "./RenameButton";
  * Adds title and export button to the editor
  */
 export function EditorWrapper({ children }: { children: React.ReactNode }) {
-  const title = useDocDetails("title", "flowchart.fun");
+  const title = useDetails("title", "flowchart.fun");
   const { setShareModal } = useContext(AppContext);
   const isReadOnly = useIsReadOnly();
   const isValidCustomer = useIsValidCustomer();
diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
index 2b1382d59..e9ba21b31 100644
--- a/app/src/components/Graph.tsx
+++ b/app/src/components/Graph.tsx
@@ -5,8 +5,9 @@ import klay from "cytoscape-klay";
 import cytoscapeSvg from "cytoscape-svg";
 import throttle from "lodash.throttle";
 import React, {
-  memo,
+  Dispatch,
   MutableRefObject,
+  SetStateAction,
   useCallback,
   useEffect,
   useMemo,
@@ -18,9 +19,10 @@ import { useDebouncedCallback } from "use-debounce";
 
 import { buildStylesForGraph } from "../lib/buildStylesForGraph";
 import { cytoscape } from "../lib/cytoscape";
+import { getDoc, setMetaImmer, subscribeToDoc } from "../lib/docHelpers";
 import { getGetSize, TGetSize } from "../lib/getGetSize";
 import { getLayout } from "../lib/getLayout";
-import { getUserStyle } from "../lib/getTheme";
+import { getUserStyle, useUserStyle } from "../lib/getTheme";
 import { DEFAULT_GRAPH_PADDING } from "../lib/graphOptions";
 import {
   useBackgroundColor,
@@ -30,12 +32,14 @@ import {
 import { isError } from "../lib/helpers";
 import { getAnimationSettings } from "../lib/hooks";
 import { Parsers, universalParse, useParser } from "../lib/parsers";
+import { useYDoc } from "../lib/realtime";
 import { Theme } from "../lib/themes/constants";
 import original from "../lib/themes/original";
 import { useContextMenuState } from "../lib/useContextMenuState";
-import { Doc, useDoc, useParseError } from "../lib/useDoc";
+import { Doc, useDetailsStore } from "../lib/useDoc";
 import { useGraphStore } from "../lib/useGraphStore";
 import { useHoverLine } from "../lib/useHoverLine";
+import { useParseError } from "../lib/useParseError";
 import { Box } from "../slang";
 import { getNodePositionsFromCy } from "./getNodePositionsFromCy";
 import styles from "./Graph.module.css";
@@ -58,7 +62,7 @@ if (!cytoscape.prototype.hasInitialised) {
 
 const shouldAnimate = getAnimationSettings();
 
-const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
+export default function Graph({ shouldResize }: { shouldResize: number }) {
   const [initResizeNumber] = useState(shouldResize);
   const cy = useRef<undefined | Core>();
   const errorCatcher = useRef<undefined | Core>();
@@ -66,24 +70,16 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
   const themeKey = useThemeKey();
   const theme = useCurrentTheme(themeKey) as unknown as Theme;
   const bg = useBackgroundColor(theme);
+  const userStyle = useUserStyle();
+  const [graphReady, setGraphReady] = useState(false);
 
   const getSize = useRef<TGetSize>(getGetSize(theme));
   const parser = useParser();
   const handleDragFree = useCallback(() => {
     const nodePositions = getNodePositionsFromCy();
-    useDoc.setState(
-      (state) => {
-        return {
-          ...state,
-          meta: {
-            ...state.meta,
-            nodePositions,
-          },
-        };
-      },
-      false,
-      "Graph/handleDragFree"
-    );
+    setMetaImmer((draft) => {
+      draft.nodePositions = nodePositions;
+    }, "Graph/handleDragFree");
   }, []);
 
   const handleResize = useCallback(() => {
@@ -103,6 +99,7 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
 
   // Initialize Graph
   useEffect(() => {
+    if (graphInitialized.current) return;
     return initializeGraph({
       errorCatcher,
       cy,
@@ -124,21 +121,24 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
 
   // Apply theme
   useEffect(() => {
-    getStyleUpdater({ cy, errorCatcher, bg })(theme);
-  }, [bg, theme]);
+    getStyleUpdater({ cy, errorCatcher, bg, userStyle })(theme);
+  }, [bg, theme, userStyle]);
 
   const throttleUpdate = useMemo(
     () =>
-      getGraphUpdater({ cy, errorCatcher, graphInitialized, getSize, parser }),
+      getGraphUpdater({
+        cy,
+        errorCatcher,
+        graphInitialized,
+        getSize,
+        parser,
+      }),
     [parser]
   );
 
   useEffect(() => {
     throttleUpdate();
-    const unsubscribe = useDoc.subscribe((doc) => {
-      throttleUpdate(doc);
-    });
-    return unsubscribe;
+    return subscribeToDoc(throttleUpdate);
   }, [throttleUpdate]);
 
   // Update Graph when Sponsor Layouts Load
@@ -167,9 +167,7 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
       <GraphContextMenu />
     </Box>
   );
-});
-
-export default Graph;
+}
 
 function initializeGraph({
   errorCatcher,
@@ -180,7 +178,7 @@ function initializeGraph({
 }) {
   try {
     errorCatcher.current = cytoscape();
-    const bg = (useDoc.getState().meta?.background as string) ?? original.bg;
+    const bg = (getDoc().meta?.background as string) ?? original.bg;
     cy.current = cytoscape({
       container: document.getElementById("cy"), // container to render in
       elements: [],
@@ -272,7 +270,7 @@ function getGraphUpdater({
   return throttle((_doc?: Doc) => {
     if (!cy.current) return;
     if (!errorCatcher.current) return;
-    const doc = _doc || useDoc.getState();
+    const doc = _doc || getDoc();
     let elements: cytoscape.ElementDefinition[] = [];
 
     try {
@@ -284,14 +282,20 @@ function getGraphUpdater({
       // TODO: what happens if you add animate false and run() here?
       errorCatcher.current.layout(layout);
 
+      const isHosted = useDetailsStore.getState().isHosted;
+      const isReady = useYDoc.getState().isReady;
+      const isReadyToAnimate = !isHosted || isReady;
+
       // Update
       cy.current.json({ elements });
       if (layout.name !== "preset") {
         cy.current
           .layout({
-            animate: graphInitialized.current
-              ? elements.length < 200
-                ? shouldAnimate
+            animate: isReadyToAnimate
+              ? graphInitialized.current
+                ? elements.length < 200
+                  ? shouldAnimate
+                  : false
                 : false
               : false,
             animationDuration: shouldAnimate ? 333 : 0,
@@ -314,6 +318,8 @@ function getGraphUpdater({
 
       // Update Graph Store
       useGraphStore.setState({ layout, elements });
+
+      //
     } catch (e) {
       errorCatcher.current.destroy();
       errorCatcher.current = cytoscape();
@@ -330,17 +336,18 @@ function getStyleUpdater({
   cy,
   errorCatcher,
   bg,
+  userStyle = [],
 }: {
   cy: React.MutableRefObject<cytoscape.Core | undefined>;
   errorCatcher: React.MutableRefObject<cytoscape.Core | undefined>;
   bg?: string;
+  userStyle: cytoscape.StylesheetStyle[];
 }) {
   return throttle((theme: Theme) => {
     if (!cy.current) return;
     if (!errorCatcher.current) return;
     try {
-      // Prepare Styles
-      const style = buildStylesForGraph(theme, getUserStyle(), bg);
+      const style = buildStylesForGraph(theme, userStyle, bg);
 
       // Test Error First
       errorCatcher.current.json({ style });
diff --git a/app/src/components/GraphContextMenu.tsx b/app/src/components/GraphContextMenu.tsx
index aa61b3366..9cffd9720 100644
--- a/app/src/components/GraphContextMenu.tsx
+++ b/app/src/components/GraphContextMenu.tsx
@@ -15,6 +15,7 @@ import { Item, Menu, Separator, Submenu } from "react-contexify";
 import { FiDownload } from "react-icons/fi";
 import { HiOutlineClipboardCopy } from "react-icons/hi";
 
+import { getDoc, getDocText, setDocText } from "../lib/docHelpers";
 import { defaultGraphTheme, useCurrentTheme } from "../lib/graphThemes";
 import { borderStyles, shapes } from "../lib/graphUtilityClasses";
 import { useIsFirefox } from "../lib/hooks";
@@ -25,7 +26,6 @@ import {
 } from "../lib/logsnag";
 import { useParser } from "../lib/parsers";
 import { useContextMenuState } from "../lib/useContextMenuState";
-import { useDoc } from "../lib/useDoc";
 import { Box, Type } from "../slang";
 import styles from "./GraphContextMenu.module.css";
 import { smallIconSize } from "./Shared";
@@ -176,7 +176,7 @@ const sizes: {
 const borders = borderStyles.map((style) => style.selector.slice(5));
 
 function NodeSubmenu() {
-  const themeKey = useDoc((doc) => doc.meta?.theme ?? defaultGraphTheme);
+  const themeKey = getDoc().meta?.theme ?? defaultGraphTheme;
   const theme = useCurrentTheme(themeKey as string);
   const colors = theme?.colors ?? {};
   const colorNames = Object.keys(colors);
@@ -216,7 +216,7 @@ function NodeSubmenu() {
             <Item
               key={name}
               onClick={() => {
-                let newText = useDoc.getState().text;
+                let newText = getDocText();
                 for (const selection of activeSelection) {
                   if (!selection) continue;
                   newText = operate(newText, {
@@ -231,7 +231,7 @@ function NodeSubmenu() {
                     operation: ["addClassesToNode", { classNames: [name] }],
                   });
                 }
-                useDoc.setState({ text: newText }, false, "NodeSubmenu/color");
+                setDocText(newText, "NodeSubmenu/color");
               }}
             >
               <Box
@@ -243,7 +243,7 @@ function NodeSubmenu() {
           <Item
             key="remove-all"
             onClick={() => {
-              let newText = useDoc.getState().text;
+              let newText = getDocText();
               for (const selection of activeSelection) {
                 if (!selection) continue;
                 newText = operate(newText, {
@@ -254,11 +254,7 @@ function NodeSubmenu() {
                   ],
                 });
               }
-              useDoc.setState(
-                { text: newText },
-                false,
-                "NodeSubmenu/color/removeAll"
-              );
+              setDocText(newText, "NodeSubmenu/color/removeAll");
             }}
           >
             <Box className={styles.SquareButton}>
@@ -278,7 +274,7 @@ function NodeSubmenu() {
             <Item
               key={shape}
               onClick={() => {
-                let newText = useDoc.getState().text;
+                let newText = getDocText();
                 for (const selection of activeSelection) {
                   if (!selection) continue;
                   newText = operate(newText, {
@@ -293,7 +289,7 @@ function NodeSubmenu() {
                     operation: ["addClassesToNode", { classNames: [shape] }],
                   });
                 }
-                useDoc.setState({ text: newText }, false, "NodeSubmenu/shape");
+                setDocText(newText, "NodeSubmenu/shape");
               }}
             >
               <Box
@@ -310,7 +306,7 @@ function NodeSubmenu() {
           <Item
             key="remove-all"
             onClick={() => {
-              let newText = useDoc.getState().text;
+              let newText = getDocText();
               for (const selection of activeSelection) {
                 if (!selection) continue;
                 newText = operate(newText, {
@@ -321,11 +317,7 @@ function NodeSubmenu() {
                   ],
                 });
               }
-              useDoc.setState(
-                { text: newText },
-                false,
-                "NodeSubmenu/shape/removeAll"
-              );
+              setDocText(newText, "NodeSubmenu/shape/removeAll");
             }}
           >
             <Box className={styles.SquareButton}>
@@ -344,7 +336,7 @@ function NodeSubmenu() {
             <Item
               key={index}
               onClick={() => {
-                let newText = useDoc.getState().text;
+                let newText = getDocText();
                 for (const selection of activeSelection) {
                   if (!selection) continue;
                   newText = operate(newText, {
@@ -369,7 +361,7 @@ function NodeSubmenu() {
                       ],
                     });
                 }
-                useDoc.setState({ text: newText }, false, "NodeSubmenu/size");
+                setDocText(newText, "NodeSubmenu/size");
               }}
             >
               <Type size={size}>{label}</Type>
@@ -387,7 +379,7 @@ function NodeSubmenu() {
             <Item
               key={className}
               onClick={() => {
-                let newText = useDoc.getState().text;
+                let newText = getDocText();
                 for (const selection of activeSelection) {
                   if (!selection) continue;
                   newText = operate(newText, {
@@ -407,7 +399,7 @@ function NodeSubmenu() {
                       ],
                     });
                 }
-                useDoc.setState({ text: newText }, false, "NodeSubmenu/border");
+                setDocText(newText, "NodeSubmenu/border");
               }}
             >
               <span
diff --git a/app/src/components/RenameButton.tsx b/app/src/components/RenameButton.tsx
index 31bdcc5a1..59bb5f867 100644
--- a/app/src/components/RenameButton.tsx
+++ b/app/src/components/RenameButton.tsx
@@ -3,11 +3,13 @@ import { ChangeEvent, memo, ReactNode, useRef, useState } from "react";
 import { useMutation } from "react-query";
 import { useHistory } from "react-router-dom";
 
+import { getDoc } from "../lib/docHelpers";
+import { docToString } from "../lib/docToString";
 import { isError, slugify, titleToLocalStorageKey } from "../lib/helpers";
 import { useIsValidSponsor } from "../lib/hooks";
 import { makeChart, renameChart } from "../lib/queries";
 import { useRenameDialogStore } from "../lib/renameDialogStore";
-import { docToString, useDoc, useDocDetails } from "../lib/useDoc";
+import { useDetails } from "../lib/useDetails";
 import { Box, Type } from "../slang";
 import { useSession } from "./AppContext";
 import {
@@ -25,12 +27,12 @@ export const RenameButton = memo(function RenameButton({
 }: {
   children: ReactNode;
 }) {
-  const fullText = useDoc(docToString);
+  const fullText = docToString(getDoc());
   const isValidSponsor = useIsValidSponsor();
   const session = useSession();
-  const initialName = useDocDetails("title", "flowchart-fun");
-  const isHosted = useDocDetails("isHosted");
-  const id = useDocDetails("id");
+  const initialName = useDetails("title", "flowchart-fun");
+  const isHosted = useDetails("isHosted");
+  const id = useDetails("id");
   const { push } = useHistory();
   const isOpen = useRenameDialogStore((store) => store.isOpen);
   const convertToHosted = useRenameDialogStore(
diff --git a/app/src/components/Router.test.tsx b/app/src/components/Router.test.tsx
deleted file mode 100644
index 828933910..000000000
--- a/app/src/components/Router.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { screen } from "@testing-library/react";
-
-import { nextFrame, render } from "../test-utils";
-import Router from "./Router";
-
-describe("Router", () => {
-  test(
-    "home page is Edit screen",
-    async () => {
-      jest.spyOn(console, "error").mockImplementation(() => ({}));
-      jest.spyOn(console, "warn").mockImplementation(() => ({}));
-      render(<Router />);
-      await nextFrame();
-      expect(await screen.findByText(/flowchart\.fun/)).toBeInTheDocument();
-    },
-    20 * 1000
-  );
-});
diff --git a/app/src/components/ShareDialog.tsx b/app/src/components/ShareDialog.tsx
index 23f3c0160..1ec31abc6 100644
--- a/app/src/components/ShareDialog.tsx
+++ b/app/src/components/ShareDialog.tsx
@@ -13,6 +13,8 @@ import {
 } from "react";
 import { useMutation } from "react-query";
 
+import { getDoc } from "../lib/docHelpers";
+import { docToString } from "../lib/docToString";
 import {
   track_copyEditableShareLink,
   track_copyFullscreenShareLink,
@@ -24,7 +26,8 @@ import {
 } from "../lib/logsnag";
 import { toMermaidJS } from "../lib/mermaid";
 import { makeChartPublic } from "../lib/queries";
-import { docToString, useDoc, useDocDetails } from "../lib/useDoc";
+import { useDetails } from "../lib/useDetails";
+import { useDetailsStore } from "../lib/useDoc";
 import { useGraphStore } from "../lib/useGraphStore";
 import { Box, Type } from "../slang";
 import { AppContext } from "./AppContext";
@@ -33,10 +36,10 @@ import styles from "./ShareDialog.module.css";
 import Spinner from "./Spinner";
 
 export default function ShareDialog() {
-  const isHosted = useDocDetails("isHosted");
+  const isHosted = useDetails("isHosted");
   const { shareModal, setShareModal } = useContext(AppContext);
   const close = useCallback(() => setShareModal(false), [setShareModal]);
-  const docString = useDoc(docToString);
+  const docString = docToString(getDoc());
   const shareLink = useMemo(() => {
     return compressToEncodedURIComponent(docString);
   }, [docString]);
@@ -112,6 +115,32 @@ export default function ShareDialog() {
         </Title>
         <Mermaid />
       </Column>
+      {/* {isHosted ? (
+        <Column>
+          <Title>Share</Title>
+          <Button
+            onClick={() => {
+              console.log("Share with other Rob");
+              // to test if it works, first we're going to try sharing a chart we ownn
+              // then we'll try sharing a chart we don't own
+              const email = "camille.leblanc.murray@gmail.com";
+              const flowchart_id = chartId;
+              (async () => {
+                if (!supabase) return;
+                const result = await supabase.from("shared_charts").insert({
+                  email,
+                  flowchart_id,
+                });
+                console.log({
+                  result,
+                });
+              })();
+            }}
+          >
+            Share with Other Rob
+          </Button>
+        </Column>
+      ) : null} */}
     </Dialog>
   );
 }
@@ -285,11 +314,11 @@ function Mermaid() {
 }
 
 function HostedOptions() {
-  const id = useDocDetails("id");
+  const id = useDetails("id");
   if (typeof id !== "number") throw new Error("id is not a number");
 
-  const isPublic = useDocDetails("isPublic");
-  const publicId = useDocDetails("publicId");
+  const isPublic = useDetails("isPublic");
+  const publicId = useDetails("publicId");
 
   const makePublic = useMutation(
     "makeChartPublic",
@@ -297,11 +326,11 @@ function HostedOptions() {
     {
       onSuccess: (result) => {
         if (!result) return;
-        useDoc.setState(
+        useDetailsStore.setState(
           (state) => {
             return produce(state, (draft) => {
-              draft.details.isPublic = result.isPublic;
-              draft.details.publicId = result.publicId;
+              draft.isPublic = result.isPublic;
+              draft.publicId = result.publicId;
             });
           },
           false,
diff --git a/app/src/components/SignUpForm.tsx b/app/src/components/SignUpForm.tsx
index 8c266ad9a..20b1bf45c 100644
--- a/app/src/components/SignUpForm.tsx
+++ b/app/src/components/SignUpForm.tsx
@@ -1,11 +1,10 @@
 import { t, Trans } from "@lingui/macro";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import { useContext, useState } from "react";
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useMutation } from "react-query";
 
-import { AppContext } from "../components/AppContext";
 import { Button, Input, Notice } from "../components/Shared";
 import Spinner from "../components/Spinner";
 import { isError } from "../lib/helpers";
@@ -31,7 +30,6 @@ export function SignUpForm() {
       email: "",
     },
   });
-  const { theme } = useContext(AppContext);
   const [success, setSuccess] = useState(false);
   const create = useMutation(
     "createCustomer",
diff --git a/app/src/components/Tabs/EditLayoutTab.tsx b/app/src/components/Tabs/EditLayoutTab.tsx
index 28b24d10e..d60676281 100644
--- a/app/src/components/Tabs/EditLayoutTab.tsx
+++ b/app/src/components/Tabs/EditLayoutTab.tsx
@@ -1,13 +1,12 @@
 import { t, Trans } from "@lingui/macro";
-import produce from "immer";
 import { FaRegSnowflake } from "react-icons/fa";
 
 import { GraphOptionsObject } from "../../lib/constants";
+import { setMetaImmer, useSafeDoc } from "../../lib/docHelpers";
 import { defaultLayout, getLayout } from "../../lib/getLayout";
 import { directions, layouts } from "../../lib/graphOptions";
 import { hasOwnProperty } from "../../lib/helpers";
 import { useIsValidSponsor } from "../../lib/hooks";
-import { useDoc } from "../../lib/useDoc";
 import { unfreezeDoc, useIsFrozen } from "../../lib/useIsFrozen";
 import styles from "./EditLayoutTab.module.css";
 import {
@@ -21,7 +20,7 @@ import {
 
 export function EditLayoutTab() {
   const isValidSponsor = useIsValidSponsor();
-  const doc = useDoc();
+  const doc = useSafeDoc();
   const layout = (
     hasOwnProperty(doc.meta, "layout") ? doc.meta.layout : {}
   ) as GraphOptionsObject["layout"];
@@ -76,18 +75,12 @@ export function EditLayoutTab() {
             options={layouts}
             value={layoutName}
             onValueChange={(name) => {
-              useDoc.setState(
-                (state) => {
-                  return produce(state, (draft) => {
-                    if (!draft.meta.layout) draft.meta.layout = {};
-                    // This any is because typing the layout object is too restrictive
-                    (draft.meta.layout as any).name = name;
-                    delete draft.meta.nodePositions;
-                  });
-                },
-                false,
-                "EditLayoutTab/layout"
-              );
+              setMetaImmer((draft) => {
+                if (!draft.layout) draft.layout = {};
+                // This any is because typing the layout object is too restrictive
+                (draft.layout as any).name = name;
+                delete draft.nodePositions;
+              }, "EditLayoutTab/layout");
             }}
           />
         </OptionWithLabel>
@@ -98,18 +91,12 @@ export function EditLayoutTab() {
               options={directions}
               value={direction}
               onValueChange={(direction) => {
-                useDoc.setState(
-                  (state) => {
-                    return produce(state, (draft) => {
-                      if (!draft.meta.layout) draft.meta.layout = {};
-                      // This any is because typing the layout object is too restrictive
-                      (draft.meta.layout as any).rankDir = direction;
-                      delete draft.meta.nodePositions;
-                    });
-                  },
-                  false,
-                  "EditLayoutTab/direction"
-                );
+                setMetaImmer((draft) => {
+                  if (!draft.layout) draft.layout = {};
+                  // This any is because typing the layout object is too restrictive
+                  (draft.layout as any).rankDir = direction;
+                  delete draft.nodePositions;
+                }, "EditLayoutTab/direction");
               }}
             />
           </OptionWithLabel>
@@ -142,20 +129,14 @@ export function EditLayoutTab() {
                 min={0.25}
                 className={styles.numberInput}
                 onChange={(e) => {
-                  useDoc.setState(
-                    (state) => {
-                      return produce(state, (draft) => {
-                        if (!draft.meta.layout) draft.meta.layout = {};
-                        // This any is because typing the layout object is too restrictive
+                  setMetaImmer((draft) => {
+                    if (!draft.layout) draft.layout = {};
+                    // This any is because typing the layout object is too restrictive
 
-                        (draft.meta.layout as any).spacingFactor = parseFloat(
-                          e.target.value
-                        );
-                      });
-                    },
-                    false,
-                    "EditLayoutTab/spacing-number"
-                  );
+                    (draft.layout as any).spacingFactor = parseFloat(
+                      e.target.value
+                    );
+                  }, "EditLayoutTab/spacing-number");
                 }}
               />
               <Range
@@ -165,17 +146,11 @@ export function EditLayoutTab() {
                 step={0.01}
                 value={[spacingFactor || 0]}
                 onValueChange={([value]) => {
-                  useDoc.setState(
-                    (state) => {
-                      return produce(state, (draft) => {
-                        if (!draft.meta.layout) draft.meta.layout = {};
-                        // This any is because typing the layout object is too restrictive
-                        (draft.meta.layout as any).spacingFactor = value;
-                      });
-                    },
-                    false,
-                    "EditLayoutTab/spacing"
-                  );
+                  setMetaImmer((draft) => {
+                    if (!draft.layout) draft.layout = {};
+                    // This any is because typing the layout object is too restrictive
+                    (draft.layout as any).spacingFactor = value;
+                  }, "EditLayoutTab/spacing");
                 }}
               />
             </div>
diff --git a/app/src/components/Tabs/EditMetaTab.tsx b/app/src/components/Tabs/EditMetaTab.tsx
index 85bc1b574..8665a0732 100644
--- a/app/src/components/Tabs/EditMetaTab.tsx
+++ b/app/src/components/Tabs/EditMetaTab.tsx
@@ -3,15 +3,18 @@ import Editor from "@monaco-editor/react";
 import { useEffect, useState } from "react";
 
 import { editorOptions } from "../../lib/constants";
+import { setDoc, useDocMeta } from "../../lib/docHelpers";
 import { useLightOrDarkMode } from "../../lib/hooks";
-import { useDoc } from "../../lib/useDoc";
 import { Button } from "../Shared";
 
 export function EditMetaTab() {
-  const meta = useDoc((s) => s.meta);
+  const meta = useDocMeta();
   const [localMeta, setLocalMeta] = useState(JSON.stringify(meta, null, 2));
   // try to parse when changed and only allow saving if valid
   const [parsed, setParsed] = useState<false | Record<string, unknown>>(meta);
+  useEffect(() => {
+    setLocalMeta(JSON.stringify(meta, null, 2));
+  }, [meta]);
   useEffect(() => {
     try {
       const parsed = JSON.parse(localMeta);
@@ -62,7 +65,7 @@ export function EditMetaTab() {
             onClick={() => {
               try {
                 if (!parsed) return;
-                useDoc.setState({ meta: parsed }, false, "EditMetaTab/meta");
+                setDoc({ meta: parsed }, "EditMetaTab/meta");
               } catch (e) {
                 console.error(e);
               }
diff --git a/app/src/components/Tabs/EditStyleTab.tsx b/app/src/components/Tabs/EditStyleTab.tsx
index dc6812cbc..65fa69117 100644
--- a/app/src/components/Tabs/EditStyleTab.tsx
+++ b/app/src/components/Tabs/EditStyleTab.tsx
@@ -1,7 +1,7 @@
 import { t, Trans } from "@lingui/macro";
-import produce from "immer";
 import throttle from "lodash.throttle";
 
+import { setMetaImmer, useDocMeta } from "../../lib/docHelpers";
 import { themes } from "../../lib/graphOptions";
 import {
   useBackgroundColor,
@@ -9,7 +9,6 @@ import {
   useThemeKey,
 } from "../../lib/graphThemes";
 import { useIsValidSponsor } from "../../lib/hooks";
-import { useDoc } from "../../lib/useDoc";
 import { Button } from "../Shared";
 import {
   CustomSelect,
@@ -25,7 +24,7 @@ export function EditStyleTab() {
   const themeNiceName =
     themes.find((t) => t.value === themeKey)?.label() ?? "???";
   const theme = useCurrentTheme(themeKey);
-  const meta = useDoc((s) => s.meta);
+  const meta = useDocMeta();
   const bg = useBackgroundColor(theme);
   return (
     <WithLowerChild>
@@ -36,15 +35,9 @@ export function EditStyleTab() {
             options={themes}
             value={themeKey}
             onValueChange={(themeKey) => {
-              useDoc.setState(
-                (s) => {
-                  return produce(s, (draft) => {
-                    draft.meta.theme = themeKey;
-                  });
-                },
-                false,
-                "EditStyleTab/theme"
-              );
+              setMetaImmer((draft) => {
+                draft.theme = themeKey;
+              }, "EditStyleTab/theme");
             }}
           />
         </OptionWithLabel>
@@ -68,15 +61,9 @@ export function EditStyleTab() {
             {meta.background && (
               <Button
                 onClick={() => {
-                  useDoc.setState(
-                    (s) => {
-                      return produce(s, (draft) => {
-                        delete draft.meta?.background;
-                      });
-                    },
-                    false,
-                    "EditStyleTab/remove-bg"
-                  );
+                  setMetaImmer((draft) => {
+                    delete draft?.background;
+                  }, "EditStyleTab/remove-bg");
                   // find an input[type=color] and set it to the background color
                   const colorInput = document.querySelector(
                     "input[type=color]"
@@ -103,15 +90,9 @@ export function EditStyleTab() {
 
 const throttleBGUpdate = throttle(
   (bg: string) => {
-    useDoc.setState(
-      (s) => {
-        return produce(s, (draft) => {
-          draft.meta.background = bg;
-        });
-      },
-      false,
-      "EditStyleTab/bg"
-    );
+    setMetaImmer((draft) => {
+      draft.background = bg;
+    }, "EditStyleTab/bg");
   },
   75,
   {
diff --git a/app/src/components/TextEditor.tsx b/app/src/components/TextEditor.tsx
index b992e7a27..279bc7fa8 100644
--- a/app/src/components/TextEditor.tsx
+++ b/app/src/components/TextEditor.tsx
@@ -1,11 +1,13 @@
 import Editor, { EditorProps, Monaco } from "@monaco-editor/react";
 import { highlight } from "graph-selector";
 import { editor } from "monaco-editor";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { editorOptions } from "../lib/constants";
 import { useEditorHover } from "../lib/editorHooks";
+import { useLightOrDarkMode } from "../lib/hooks";
 import { useParser } from "../lib/parsers";
+import { initRealtime } from "../lib/realtime";
 import {
   languageId,
   registerLanguages,
@@ -13,19 +15,20 @@ import {
   themeNameLight,
 } from "../lib/registerLanguage";
 import { useHoverLine } from "../lib/useHoverLine";
-import { AppContext } from "./AppContext";
 import Loading from "./Loading";
 import styles from "./TextEditor.module.css";
 
 type TextEditorProps = EditorProps & {
   editorRef: React.MutableRefObject<null | editor.IStandaloneCodeEditor>;
   extendOptions?: editor.IEditorOptions;
+  bindToRealtime?: boolean;
 };
 
 /** A Monaco editor which stays in sync with the current parser */
 export function TextEditor({
   editorRef,
   extendOptions = {},
+  bindToRealtime = false,
   ...props
 }: TextEditorProps) {
   const parser = useParser();
@@ -33,7 +36,7 @@ export function TextEditor({
   const [editorIsReady, setEditorIsReady] = useState(false);
 
   const monacoRef = useRef<Monaco>();
-  const { mode } = useContext(AppContext);
+  const mode = useLightOrDarkMode();
 
   useEffect(() => {
     if (!monacoRef.current) return;
@@ -79,6 +82,15 @@ export function TextEditor({
     monacoRef.current.editor.setModelLanguage(model, languageId);
   }, [editorIsReady, languageId]);
 
+  // TODO: Remove this
+  // Bind to realtime updates
+  useEffect(() => {
+    if (!bindToRealtime) return;
+    if (!editorIsReady) return;
+    if (!editorRef.current) return;
+    initRealtime(editorRef.current);
+  }, [bindToRealtime, editorIsReady, editorRef]);
+
   return (
     <Editor
       {...props}
@@ -88,6 +100,7 @@ export function TextEditor({
       onMount={(editor, monaco) => {
         registerLanguages(monaco);
         editorRef.current = editor;
+        window.__monaco_editor = editor;
         monacoRef.current = monaco;
         // @ts-ignore
         window.monacoRef = monacoRef.current;
diff --git a/app/src/index.tsx b/app/src/index.tsx
index b1623cb1e..2a9268b0a 100644
--- a/app/src/index.tsx
+++ b/app/src/index.tsx
@@ -15,6 +15,7 @@ import reportWebVitals from "./reportWebVitals";
 declare global {
   interface Window {
     Buffer: typeof Buffer;
+    __monaco_editor?: any;
   }
 }
 window.Buffer = Buffer;
diff --git a/app/src/lib/docHelpers.ts b/app/src/lib/docHelpers.ts
new file mode 100644
index 000000000..0d608769e
--- /dev/null
+++ b/app/src/lib/docHelpers.ts
@@ -0,0 +1,336 @@
+/**
+ * This file will contain all the helpers which mutation the document
+ *
+ * It will use the doc details to know whether to mutate a zustand store
+ * or a yjs document
+ */
+
+import produce from "immer";
+import { WritableDraft } from "immer/dist/internal";
+import { useEffect, useState } from "react";
+
+import { getSafeYDoc } from "./realtime";
+import { Doc, useDetailsStore, useDoc } from "./useDoc";
+
+/**
+ * Full or partial doc mutation using spread operator
+ */
+export function setDoc(doc: Partial<Doc>, description: string) {
+  const isHosted = useDetailsStore.getState().isHosted;
+  // mutate the doc
+  if (isHosted) {
+    const ydoc = getSafeYDoc();
+    if (!ydoc) return;
+    const { text, meta } = doc;
+    ydoc.transact(() => {
+      if (text) {
+        const ytext = ydoc.getText("text");
+        if (ytext) {
+          ytext.delete(0, ytext.length);
+          ytext.insert(0, text);
+        }
+      }
+      if (meta) {
+        const ymeta = ydoc.getMap("meta");
+        if (ymeta) {
+          for (const [key, value] of Object.entries(meta)) {
+            ymeta.set(key, value);
+          }
+          // delete any keys that were removed
+          for (const key of Object.keys(ymeta.toJSON())) {
+            if (!(key in meta)) {
+              ymeta.delete(key);
+            }
+          }
+        }
+      }
+    });
+  } else {
+    // mutate the zustand store
+    useDoc.setState(
+      (cur) => ({
+        ...cur,
+        ...doc,
+      }),
+      false,
+      description
+    );
+  }
+}
+
+export function setMetaImmer(
+  cb: (draft: WritableDraft<Doc["meta"]>) => void,
+  description: string
+) {
+  const isHosted = useDetailsStore.getState().isHosted;
+  if (isHosted) {
+    const ydoc = getSafeYDoc();
+    if (!ydoc) return;
+    const meta = ydoc.getMap("meta");
+    if (!meta) return;
+    const fullMeta = meta.toJSON();
+    const newMeta = produce(fullMeta, cb);
+    ydoc.transact(() => {
+      for (const [key, value] of Object.entries(newMeta)) {
+        meta.set(key, value);
+      }
+      // delete any keys that were removed
+      for (const key of Object.keys(fullMeta)) {
+        if (!(key in newMeta)) {
+          meta.delete(key);
+        }
+      }
+    });
+  } else {
+    useDoc.setState(
+      (cur) => ({
+        ...cur,
+        meta: produce(cur.meta, cb),
+      }),
+      false,
+      description
+    );
+  }
+}
+
+/**
+ * Implicitly sets the doc text
+ *
+ * This is different than setDoc above, because setDoc actually
+ * ignores text changes, presuming that they are coming from Monaco
+ */
+export function setDocText(text: string, description: string) {
+  const isHosted = useDetailsStore.getState().isHosted;
+  if (isHosted) {
+    const ydoc = getSafeYDoc();
+    if (!ydoc) return;
+    const ytext = ydoc.getText("text");
+    if (!ytext) return;
+    ydoc.transact(() => {
+      if (!ytext) return;
+      ytext.delete(0, ytext.length);
+      ytext.insert(0, text);
+    });
+  } else {
+    useDoc.setState((cur) => ({ ...cur, text }), false, description);
+  }
+}
+
+export function subscribeToDoc(cb: (doc: Doc) => void) {
+  const isHosted = useDetailsStore.getState().isHosted;
+  if (isHosted) {
+    const ydoc = getSafeYDoc();
+    if (!ydoc) return;
+    const text = ydoc.getText("text");
+    const meta = ydoc.getMap("meta");
+    if (!text || !meta) return;
+
+    const runCallback = () =>
+      cb({
+        text: text.toString(),
+        meta: meta.toJSON(),
+      });
+
+    text.observe(runCallback);
+    meta.observe(runCallback);
+
+    return () => {
+      text.unobserve(runCallback);
+      meta.unobserve(runCallback);
+    };
+  } else {
+    // subscribe to zustand store
+    return useDoc.subscribe(cb);
+  }
+}
+
+export function getDoc(): Doc {
+  const isHosted = useDetailsStore.getState().isHosted;
+  if (isHosted) {
+    const ydoc = getSafeYDoc();
+    const fallback = { text: "", meta: {} };
+    if (!ydoc) return fallback;
+
+    const text = ydoc.getText("text");
+    const meta = ydoc.getMap("meta");
+    if (!text || !meta) return fallback;
+
+    return {
+      text: text.toString(),
+      meta: meta.toJSON(),
+    };
+  } else {
+    // get the zustand store
+    return useDoc.getState();
+  }
+}
+
+/**
+ * Returns the document text whether it's hosted or local
+ *
+ * Returns an empty string if the ydoc isn't found
+ */
+export function getDocText(): string {
+  const isHosted = useDetailsStore.getState().isHosted;
+  if (isHosted) {
+    const ydoc = getSafeYDoc();
+    if (!ydoc) return "";
+
+    const text = ydoc.getText("text");
+    if (!text) return "";
+
+    return text.toString();
+  } else {
+    // get the zustand store
+    return useDoc.getState().text;
+  }
+}
+
+function getYDocText() {
+  const ydoc = getSafeYDoc();
+  if (!ydoc) return "";
+  const text = ydoc.getText("text");
+  if (!text) return "";
+  return text.toString();
+}
+
+export function useHostedText(): string {
+  const [sharedType, setSharedType] = useState(getYDocText());
+
+  useEffect(() => {
+    const ydoc = getSafeYDoc();
+    if (!ydoc) return;
+    const text = ydoc.getText("text");
+    if (!text) return;
+    setSharedType(getYDocText());
+    // subscribe to updates of the shared type
+    const updateHandler = () => setSharedType(getYDocText());
+    text.observe(updateHandler);
+    return () => {
+      text.unobserve(updateHandler);
+      setSharedType("");
+    };
+  }, []);
+
+  return sharedType;
+}
+
+export function useDocText(): string {
+  const isHosted = useDetailsStore.getState().isHosted;
+  if (isHosted) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [sharedType, setSharedType] = useState("");
+
+    // @ts-ignore
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      const ydoc = getSafeYDoc();
+      if (!ydoc) return "";
+      const text = ydoc.getText("text");
+      if (!text) return "";
+      setSharedType(text.toString());
+
+      // subscribe to updates of the shared type
+      const updateHandler = () =>
+        setSharedType(ydoc.getText("text").toString());
+      text.observe(updateHandler);
+      return (): void => {
+        text.unobserve(updateHandler);
+      };
+    }, []);
+
+    return sharedType;
+  } else {
+    // get the zustand store
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useDoc((state) => state?.text ?? "");
+  }
+}
+
+/**
+ * Returns the document meta whether it's hosted or local
+ * Returns an empty object if the ydoc isn't found
+ */
+export function useDocMeta(): Record<string, unknown> {
+  const isHosted = useDetailsStore.getState().isHosted;
+  if (isHosted) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [sharedType, setSharedType] = useState({});
+
+    // @ts-ignore
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      const ydoc = getSafeYDoc();
+      if (!ydoc) return {};
+      const meta = ydoc.getMap("meta");
+      if (!meta) return {};
+      setSharedType(meta.toJSON());
+
+      // subscribe to updates of the shared type
+      const updateHandler = () => setSharedType(ydoc.getMap("meta").toJSON());
+      meta.observe(updateHandler);
+      return (): void => {
+        meta.unobserve(updateHandler);
+      };
+    }, []);
+
+    return sharedType;
+  } else {
+    // get the zustand store
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useDoc((state) => state.meta);
+  }
+}
+
+/**
+ * A self-updating doc that works for the ydoc
+ * and for the temporary-doc zustand store
+ */
+export function useSafeDoc(): Doc {
+  const isHosted = useDetailsStore.getState().isHosted;
+  if (isHosted) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useDocUpdate();
+  } else {
+    // get the zustand store
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useDoc();
+  }
+}
+
+/**
+ * Watch "text" and "meta" ydoc props and return an updated doc
+ * when they change
+ */
+function useDocUpdate(): Doc {
+  const [localDoc, setLocaldoc] = useState<Doc>({ text: "", meta: {} });
+
+  useEffect(() => {
+    const ydoc = getSafeYDoc();
+    if (!ydoc) return;
+
+    const text = ydoc.getText("text");
+    const meta = ydoc.getMap("meta");
+    if (!text || !meta) return;
+
+    const updateHandler = () => {
+      setLocaldoc({
+        text: text.toString(),
+        meta: meta.toJSON(),
+      });
+    };
+
+    // Needs to be run once to set the initial value
+    updateHandler();
+
+    text.observe(updateHandler);
+    meta.observe(updateHandler);
+
+    return () => {
+      text.unobserve(updateHandler);
+      meta.unobserve(updateHandler);
+    };
+  }, []);
+
+  return localDoc;
+}
diff --git a/app/src/lib/docToString.ts b/app/src/lib/docToString.ts
new file mode 100644
index 000000000..5e65e70fb
--- /dev/null
+++ b/app/src/lib/docToString.ts
@@ -0,0 +1,14 @@
+import { newDelimiters } from "./constants";
+import { Doc } from "./useDoc";
+
+/** Turns doc into the string we store in the database */
+
+export function docToString(doc: Doc) {
+  const { text, meta } = doc;
+  return [
+    text,
+    newDelimiters,
+    JSON.stringify(meta, null, 2),
+    newDelimiters,
+  ].join("\n");
+}
diff --git a/app/src/lib/getDefaultChart.ts b/app/src/lib/getDefaultChart.ts
index 5f46f4325..74905ff8d 100644
--- a/app/src/lib/getDefaultChart.ts
+++ b/app/src/lib/getDefaultChart.ts
@@ -1,7 +1,7 @@
 import { getDefaultText } from "./getDefaultText";
 
 // TODO: Should be shared with the back-end through a shared package
-export function getMetaBase() {
+function getMetaBase() {
   return `\n=====\n{"parser":"graph-selector"}\n=====`;
 }
 
diff --git a/app/src/lib/getTheme.ts b/app/src/lib/getTheme.ts
index ab6f4b309..ae7ac96cd 100644
--- a/app/src/lib/getTheme.ts
+++ b/app/src/lib/getTheme.ts
@@ -1,14 +1,14 @@
 import { StylesheetStyle } from "cytoscape";
 
-import { useDoc } from "./useDoc";
+import { getDoc, useDocMeta } from "./docHelpers";
 
 /**
  * Get the user style from the document metadata.
  */
 export function getUserStyle() {
-  return (useDoc.getState().meta?.style ?? []) as StylesheetStyle[];
+  return (getDoc().meta?.style ?? []) as StylesheetStyle[];
 }
 
-// const theme = useGraphTheme(options.graphOptions.theme);
-// That's how we're currently grabbing the theme from the name
-// Believe it does some async loading behind the scenes
+export function useUserStyle() {
+  return (useDocMeta().style ?? []) as StylesheetStyle[];
+}
diff --git a/app/src/lib/graphOptions.ts b/app/src/lib/graphOptions.ts
index ca53a3015..091e56956 100644
--- a/app/src/lib/graphOptions.ts
+++ b/app/src/lib/graphOptions.ts
@@ -36,13 +36,6 @@ export const directions: SelectOption[] = [
   { label: () => t`Bottom to Top`, value: "BT" },
 ];
 
-export const elkDirections: SelectOption[] = [
-  { label: () => t`Top to Bottom`, value: "DOWN" },
-  { label: () => t`Left to Right`, value: "RIGHT" },
-  { label: () => t`Right to Left`, value: "LEFT" },
-  { label: () => t`Bottom to Top`, value: "UP" },
-];
-
 export const themes: SelectOption[] = [
   { label: () => t`Light`, value: "original" },
   { label: () => t`Dark`, value: "original-dark" },
diff --git a/app/src/lib/graphThemes.tsx b/app/src/lib/graphThemes.tsx
index 38cdf10f8..5892e24ae 100644
--- a/app/src/lib/graphThemes.tsx
+++ b/app/src/lib/graphThemes.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from "react-query";
 
+import { useDocMeta } from "./docHelpers";
 import { Theme } from "./themes/constants";
-import { useDoc } from "./useDoc";
 
 export type GraphThemes =
   | "original"
@@ -76,7 +76,7 @@ export function useCurrentTheme(themeKey: string) {
  * Returns the current theme key in the doc or the default theme key
  */
 export function useThemeKey() {
-  const themeKey = useDoc((s) => s.meta?.theme) ?? defaultGraphTheme;
+  const themeKey = useDocMeta()["theme"] ?? defaultGraphTheme;
   return themeKey as GraphThemes;
 }
 
@@ -84,7 +84,7 @@ export function useThemeKey() {
  * Get the background color, user override, theme, or default
  */
 export function useBackgroundColor(theme?: Theme) {
-  const bgUser = useDoc((state) => state.meta?.background);
+  const bgUser = useDocMeta()["background"];
   const bgTheme = theme?.bg;
   const bgDefault = "#ffffff";
   return (bgUser ?? bgTheme ?? bgDefault) as string;
diff --git a/app/src/lib/parsers.ts b/app/src/lib/parsers.ts
index 8fb42a48d..5d437df5d 100644
--- a/app/src/lib/parsers.ts
+++ b/app/src/lib/parsers.ts
@@ -1,10 +1,10 @@
 import { ElementDefinition } from "cytoscape";
 import { parse, toCytoscapeElements } from "graph-selector";
 
+import { useDocMeta } from "./docHelpers";
 import { TGetSize } from "./getGetSize";
 import { SelectOption } from "./graphOptions";
 import { parseText } from "./parseText";
-import { useDoc } from "./useDoc";
 import { stripComments } from "./utils";
 
 /** Recognized names for support parsers */
@@ -17,7 +17,7 @@ const DEFAULT_PARSER = "graph-selector";
  * returns the parser if it is set or the default parser
  */
 export function useParser(): Parsers {
-  const meta = useDoc((state) => state.meta);
+  const meta = useDocMeta();
   const parser = meta?.parser as Parsers;
   return parser || DEFAULT_PARSER;
 }
@@ -39,6 +39,8 @@ export function universalParse(
           size = {
             width: element.data.w || "label",
             height: element.data.h || "label",
+            textMarginY: 0,
+            textMarginX: 0,
           };
         } else {
           size = getSize(
diff --git a/app/src/lib/prepareChart/prepareChart.test.ts b/app/src/lib/prepareChart/prepareChart.test.ts
index 0d19ca0a9..24a5011a1 100644
--- a/app/src/lib/prepareChart/prepareChart.test.ts
+++ b/app/src/lib/prepareChart/prepareChart.test.ts
@@ -6,7 +6,7 @@ import { prepareChart } from "./prepareChart";
 
 describe("prepareChart", () => {
   test("can migrate old files with yaml", () => {
-    expect(prepareChart(getFixture("example1"), initialDoc.details)).toEqual({
+    expect(prepareChart(getFixture("example1"))).toEqual({
       text: `This app works by typing
   Indenting creates a link to the current line
   any text: before a colon creates a label
@@ -30,12 +30,11 @@ Have fun! 🎉
         parser: "v1",
         theme: "original-dark",
       },
-      details: initialDoc.details,
     });
   });
 
   test("can migrate old files with hidden options", () => {
-    expect(prepareChart(getFixture("example2"), initialDoc.details)).toEqual({
+    expect(prepareChart(getFixture("example2"))).toEqual({
       text: `long label text
   (c)
 longer label text
@@ -50,22 +49,20 @@ longer label text
         },
         parser: "v1",
       },
-      details: initialDoc.details,
     });
   });
 
   test("can migrate old files with neither", () => {
-    expect(prepareChart(getFixture("example3"), initialDoc.details)).toEqual({
+    expect(prepareChart(getFixture("example3"))).toEqual({
       text: `i am but a simple file\n`,
       meta: {
         parser: "v1",
       },
-      details: initialDoc.details,
     });
   });
 
   test("can migrate old file with both", () => {
-    expect(prepareChart(getFixture("example4"), initialDoc.details)).toEqual({
+    expect(prepareChart(getFixture("example4"))).toEqual({
       text: `이 앱은 타이핑으로 작동합니다
   들여쓰기는 현재 줄에 대한 링크를 생성합니다
   콜론 앞의 모든 텍스트는: 레이블을 생성합니다
@@ -97,12 +94,11 @@ longer label text
         },
         parser: "v1",
       },
-      details: initialDoc.details,
     });
   });
 
   test("can migrate new file", () => {
-    expect(prepareChart(getFixture("example5"), initialDoc.details)).toEqual({
+    expect(prepareChart(getFixture("example5"))).toEqual({
       text: `hello\n  to: the world\n`,
       meta: {
         layout: {
@@ -112,12 +108,11 @@ longer label text
         theme: "eggs",
         parser: "v1",
       },
-      details: initialDoc.details,
     });
   });
 
   test("can merge a mix of old and new", () => {
-    expect(prepareChart(getFixture("example6"), initialDoc.details)).toEqual({
+    expect(prepareChart(getFixture("example6"))).toEqual({
       meta: {
         layout: {
           name: "cose",
@@ -151,12 +146,11 @@ longer label text
         y
         z
 `,
-      details: initialDoc.details,
     });
   });
 
   test("trims whitespace and adds one newline to text", () => {
-    expect(prepareChart(getFixture("example7"), initialDoc.details)).toEqual({
+    expect(prepareChart(getFixture("example7"))).toEqual({
       text: `hello\n  to the: world\n`,
       meta: {
         layout: {
@@ -166,21 +160,11 @@ longer label text
         parser: "v1",
         theme: "eggs",
       },
-      details: initialDoc.details,
     });
   });
 
   test("if a document has a parser it shouldn't change", () => {
-    expect(
-      prepareChart(getFixture("example8"), {
-        ...initialDoc.details,
-      })
-    ).toEqual({
-      details: {
-        id: "",
-        isHosted: false,
-        title: "",
-      },
+    expect(prepareChart(getFixture("example8"))).toEqual({
       meta: {
         parser: "v1",
       },
@@ -189,16 +173,7 @@ longer label text
   });
 
   test("if a document has no parser but has default text, add v1", () => {
-    expect(
-      prepareChart(getFixture("example9"), {
-        ...initialDoc.details,
-      })
-    ).toEqual({
-      details: {
-        id: "",
-        isHosted: false,
-        title: "",
-      },
+    expect(prepareChart(getFixture("example9"))).toEqual({
       meta: {
         parser: "v1",
       },
diff --git a/app/src/lib/prepareChart/prepareChart.ts b/app/src/lib/prepareChart/prepareChart.ts
index 5a9e5638a..f8fc7393a 100644
--- a/app/src/lib/prepareChart/prepareChart.ts
+++ b/app/src/lib/prepareChart/prepareChart.ts
@@ -6,7 +6,7 @@ import {
   HIDDEN_GRAPH_OPTIONS_DIVIDER,
   newDelimiters,
 } from "../constants";
-import { Details, useDoc } from "../useDoc";
+import { setDoc } from "../docHelpers";
 
 /**
  * ### Goals
@@ -21,7 +21,7 @@ import { Details, useDoc } from "../useDoc";
  * - `meta` is the meta section of the document
  */
 
-export function prepareChart(doc: string, details: Details) {
+export function prepareChart(doc: string) {
   let text = doc;
 
   let jsonMeta = {};
@@ -71,11 +71,10 @@ export function prepareChart(doc: string, details: Details) {
 
   text = `${text.trim()}\n`;
 
-  useDoc.setState({ text, meta, details }, false, "prepareChart");
+  setDoc({ text, meta }, "prepareChart");
 
   return {
     text,
     meta,
-    details,
   };
 }
diff --git a/app/src/lib/queries.ts b/app/src/lib/queries.ts
index 1d0b9a893..efb7e4aaa 100644
--- a/app/src/lib/queries.ts
+++ b/app/src/lib/queries.ts
@@ -226,12 +226,6 @@ export function useChart(id: string) {
   });
 }
 
-export async function updateChartText(chart: string, id?: string) {
-  if (!id) return;
-  if (!supabase) return;
-  return supabase.from("user_charts").update({ chart }).eq("id", id);
-}
-
 export async function deleteChart({ chartId }: { chartId: number }) {
   if (!supabase) return;
   const { data, error } = await supabase
diff --git a/app/src/lib/realtime.ts b/app/src/lib/realtime.ts
new file mode 100644
index 000000000..52a420d20
--- /dev/null
+++ b/app/src/lib/realtime.ts
@@ -0,0 +1,94 @@
+import { OnMount } from "@monaco-editor/react";
+import { MonacoBinding } from "y-monaco";
+import { WebsocketProvider } from "y-websocket";
+import * as Y from "yjs";
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+
+import { isError } from "./helpers";
+import { logError } from "./sentry";
+
+type IStandAloneCodeEditor = Parameters<OnMount>[0];
+
+type UseYDoc = {
+  ydoc?: Y.Doc;
+  provider?: WebsocketProvider;
+  isReady: boolean;
+};
+
+export const useYDoc = create<UseYDoc>()(
+  devtools<UseYDoc>(
+    () => ({
+      isReady: false,
+    }),
+    {
+      name: "useYDoc",
+    }
+  )
+);
+
+// Create a Yjs document
+export function setupYDoc(type: "hosted" | "public", id: string) {
+  const providerUrl = process.env.REACT_APP_WEBSOCKET_PROVIDER;
+  if (!providerUrl) throw new Error("REACT_APP_WEBSOCKET_PROVIDER not found");
+
+  const roomName = `${type}_${id}`;
+
+  // If the provider is already set to the correct type and id, don't do anything
+  const currentProvider = useYDoc.getState().provider;
+  if (currentProvider?.roomname === roomName) return;
+
+  // If there is a provider, disconnect it
+  if (currentProvider) currentProvider.disconnect();
+
+  const ydoc = new Y.Doc();
+
+  // Create a provider
+  const provider = new WebsocketProvider(providerUrl, roomName, ydoc);
+  provider.on("synced", (isSynced: boolean) => {
+    useYDoc.setState({ isReady: isSynced });
+  });
+
+  // set references in store
+  useYDoc.setState({ ydoc, provider });
+}
+
+export function cleanupYDoc() {
+  const provider = useYDoc.getState().provider;
+  if (provider) provider.disconnect();
+  useYDoc.setState({ ydoc: undefined, provider: undefined, isReady: false });
+}
+
+/**
+ * Returns the ydoc if it exists or false if it doesn't
+ */
+export function getSafeYDoc() {
+  const ydoc = useYDoc.getState().ydoc;
+  if (!ydoc) {
+    return false;
+  }
+  return ydoc;
+}
+
+export function initRealtime(editor: IStandAloneCodeEditor) {
+  try {
+    const ydoc = useYDoc.getState().ydoc;
+    const provider = useYDoc.getState().provider;
+    if (!ydoc) throw new Error("Y.Doc not found");
+    if (!provider) throw new Error("Y.WebsocketProvider not found");
+
+    // Define a shared text type
+    const ytext = ydoc.getText("text");
+
+    const model = editor.getModel();
+    if (!model) throw new Error("Model not found");
+
+    new MonacoBinding(ytext, model, new Set([editor]), provider.awareness);
+
+    return true;
+  } catch (e) {
+    console.error(e);
+    logError(isError(e) ? e : new Error("Realtime error"));
+    return false;
+  }
+}
diff --git a/app/src/lib/themes/_cyberpunk_unfinished.ts b/app/src/lib/themes/_cyberpunk_unfinished.ts
deleted file mode 100644
index d79c63d74..000000000
--- a/app/src/lib/themes/_cyberpunk_unfinished.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-
-import { Theme } from "./constants";
-
-const colors = {
-  black: "#333333",
-  white: "#FEFFFD",
-  green: "#6ADB7C",
-  yellow: "#FCFE3B",
-  blue: "#1CFEFE",
-  orange: "#EC7957",
-  purple: "#7842ED",
-  red: "#E65BC9",
-  gray: "#cacaca",
-};
-
-const fontFamily = "Murrx";
-const fontSize = 10;
-const backgroundColor = "#050A08";
-const arrowColor = colors.purple;
-const lineHeight = 1.2;
-const padding = 1;
-const borderWidth = 1.88;
-
-const cyberpunk: Theme = {
-  value: "cyberpunk",
-  bg: backgroundColor,
-  minWidth: 0,
-  minHeight: 0,
-  font: {
-    fontFamily,
-    fontSize,
-    lineHeight,
-    // files: [{ name: fontFamily, url: "Sporting_Grotesque-Regular_web.woff2" }],
-  },
-  styles: [
-    {
-      selector: "node[label!='']",
-      style: {
-        width: "data(shapeWidth)",
-        height: "data(shapeHeight)",
-        "text-margin-y": "data(textMarginY)" as any,
-        "text-margin-x": "data(textMarginX)" as any,
-      },
-    },
-    {
-      selector: "node",
-      style: {
-        "background-color": backgroundColor,
-        "background-opacity": 0.5,
-        "font-family": fontFamily,
-        "font-size": fontSize,
-        "border-color": arrowColor,
-        color: colors.green,
-        "text-justification": "left",
-        // "text-margin-y": -1,
-        label: "data(label)",
-        "text-wrap": "wrap",
-        "text-max-width": "data(width)",
-        "text-valign": "center",
-        // "text-shadow-color": "#ffffff",
-        // "text-shadow-blur": 2,
-        // "text-shadow-opacity": 0.5,
-        // "text-shadow-offset-x": 3,
-        // "text-shadow-offset-y": 3,
-        shape: "rectangle",
-        padding: padding,
-        "line-height": lineHeight,
-        "border-style": "solid",
-        "border-width": 0,
-        "border-color": backgroundColor,
-        // ghost: "yes",
-        // "ghost-opacity": 0.5,
-        // "ghost-offset-x": 2,
-        // "ghost-offset-y": 2,
-      },
-    },
-    {
-      selector: "edge",
-      style: {
-        "curve-style": "taxi",
-        width: borderWidth,
-        "line-color": arrowColor,
-        label: "data(label)",
-        color: colors.green,
-        "source-endpoint": "inside-to-node",
-        "font-size": fontSize,
-        "text-valign": "center",
-        "text-wrap": "wrap",
-        "font-family": fontFamily,
-        "text-background-opacity": 1,
-        "text-background-color": colors.black, // "#D09A5B",
-        // "text-background-color": colors.blue, // "#D09A5B",
-        "text-background-padding": "2px",
-        // "text-background-shape": "roundrectangle",
-        "edge-text-rotation": "autorotate",
-        "source-distance-from-node": 0,
-        "target-distance-from-node": 0,
-        // "target-arrow-shape": "vee",
-        // "target-arrow-color": colors.blue,
-        // "source-arrow-shape": "circle",
-        // "source-arrow-color": arrowColor,
-        // "arrow-scale": 1,
-        "edge-distances": "intersection",
-        // Edge
-        // "underlay-color": "#000000",
-        // "underlay-padding": 3.5,
-        // "underlay-opacity": 1,
-        // "underlay-shape": "roundrectangle",
-      },
-    },
-    {
-      selector: ":parent",
-      style: {
-        "text-valign": "top",
-        "text-halign": "center",
-        "text-margin-y": `-${padding}`,
-        "text-wrap": "none",
-      },
-    },
-    ...Object.entries(colors).map<Stylesheet>(([color, value]) => ({
-      selector: `node.${color}`,
-      style: {
-        color: `${value}`,
-        // ...(["black", "purple", "blue"].includes(color)
-        //   ? { color: colors.white }
-        //   : { color: colors.black }),
-      },
-    })),
-  ],
-};
-
-export default cyberpunk;
diff --git a/app/src/lib/useDetails.ts b/app/src/lib/useDetails.ts
new file mode 100644
index 000000000..0b2f49920
--- /dev/null
+++ b/app/src/lib/useDetails.ts
@@ -0,0 +1,13 @@
+import { Details, useDetailsStore } from "./useDoc";
+
+/**
+ * Get a type-safe version of any property
+ * of the doc details
+ */
+
+export function useDetails<K extends keyof Details>(
+  prop: K,
+  fallback?: Details[K]
+) {
+  return useDetailsStore((state) => state[prop] || fallback) as Details[K];
+}
diff --git a/app/src/lib/useDoc.ts b/app/src/lib/useDoc.ts
index 020d0f8c2..3b335b9b7 100644
--- a/app/src/lib/useDoc.ts
+++ b/app/src/lib/useDoc.ts
@@ -13,8 +13,7 @@ local storage
 import { create } from "zustand";
 import { devtools, subscribeWithSelector } from "zustand/middleware";
 
-import { newDelimiters } from "./constants";
-
+/** Details represent the chart currently being viewed. */
 export type Details = {
   /** Represents the workspace ID if local, and the db ID if hosted */
   id: string | number;
@@ -31,18 +30,18 @@ export type Details = {
 export type Doc = {
   text: string;
   meta: Record<string, unknown>;
-  /** Details are *not* stored in DB. They represent the chart currently being viewed. */
-  details: Details;
+};
+
+const initialDetails: Details = {
+  id: "",
+  title: "",
+  isHosted: false,
 };
 
 export const initialDoc = {
   text: "",
   meta: {},
-  details: {
-    id: "",
-    title: "",
-    isHosted: false,
-  },
+  details: initialDetails,
 };
 
 export const useDoc = create(
@@ -54,30 +53,11 @@ export const useDoc = create(
   )
 );
 
-export function docToString(doc: Doc) {
-  const { text, meta } = doc;
-  return [
-    text,
-    newDelimiters,
-    JSON.stringify(meta, null, 2),
-    newDelimiters,
-  ].join("\n");
-}
-
-export const useParseError = create<{ error: string; errorFromStyle: string }>(
-  () => ({
-    error: "",
-    errorFromStyle: "",
-  })
-);
-
 /**
- * Get a type-safe version of any property
- * of the doc details
+ * Custom useDocDetails store
  */
-export function useDocDetails<K extends keyof Details>(
-  prop: K,
-  fallback?: Details[K]
-) {
-  return useDoc((state) => state.details[prop] || fallback) as Details[K];
-}
+export const useDetailsStore = create<Details>()(
+  devtools(() => initialDetails, {
+    name: "useDetailsStore",
+  })
+);
diff --git a/app/src/lib/useIsFrozen.ts b/app/src/lib/useIsFrozen.ts
index e3ccd2d5f..b76432474 100644
--- a/app/src/lib/useIsFrozen.ts
+++ b/app/src/lib/useIsFrozen.ts
@@ -1,22 +1,14 @@
-import produce from "immer";
-
+import { getDoc, setMetaImmer } from "./docHelpers";
 import { getLayout } from "./getLayout";
-import { useDoc } from "./useDoc";
 
 export function unfreezeDoc() {
-  useDoc.setState(
-    (state) => {
-      return produce(state, (draft) => {
-        delete draft.meta.nodePositions;
-      });
-    },
-    false,
-    "unfreezeDoc"
-  );
+  setMetaImmer((draft) => {
+    delete draft.nodePositions;
+  }, "unfreezeDoc");
 }
 
 export function useIsFrozen() {
-  const doc = useDoc();
+  const doc = getDoc();
   const rendered = getLayout(doc);
   const frozen = "positions" in rendered;
 
diff --git a/app/src/lib/useParseError.ts b/app/src/lib/useParseError.ts
new file mode 100644
index 000000000..57d0a95b0
--- /dev/null
+++ b/app/src/lib/useParseError.ts
@@ -0,0 +1,8 @@
+import { create } from "zustand";
+
+export const useParseError = create<{ error: string; errorFromStyle: string }>(
+  () => ({
+    error: "",
+    errorFromStyle: "",
+  })
+);
diff --git a/app/src/pages/Edit.tsx b/app/src/pages/Edit.tsx
index d4f639bf1..6869c109f 100644
--- a/app/src/pages/Edit.tsx
+++ b/app/src/pages/Edit.tsx
@@ -16,11 +16,13 @@ import { EditLayoutTab } from "../components/Tabs/EditLayoutTab";
 import { EditMetaTab } from "../components/Tabs/EditMetaTab";
 import { EditStyleTab } from "../components/Tabs/EditStyleTab";
 import { TextEditor } from "../components/TextEditor";
+import { subscribeToDoc, useDocText } from "../lib/docHelpers";
+import { docToString } from "../lib/docToString";
 import { getDefaultChart } from "../lib/getDefaultChart";
 import { titleToLocalStorageKey } from "../lib/helpers";
 import { useIsValidSponsor } from "../lib/hooks";
 import { prepareChart } from "../lib/prepareChart/prepareChart";
-import { Doc, docToString, useDoc } from "../lib/useDoc";
+import { Doc, useDetailsStore, useDoc } from "../lib/useDoc";
 import { useTrackLastChart } from "../lib/useLastChart";
 import { Type } from "../slang";
 import styles from "./Edit.module.css";
@@ -49,9 +51,10 @@ const Edit = memo(function Edit() {
     );
   }, [workspace]);
 
-  useEffect(() => useDoc.subscribe(storeDoc), [storeDoc]);
+  useEffect(() => subscribeToDoc(storeDoc), [storeDoc]);
 
   const onChange = useCallback(
+    // Intentionally only using the local useDoc here
     (value) => useDoc.setState({ text: value ?? "" }, false, "Edit/text"),
     []
   );
@@ -59,7 +62,7 @@ const Edit = memo(function Edit() {
   const { url } = useRouteMatch();
   useTrackLastChart(url);
 
-  const text = useDoc((d) => d.text);
+  const text = useDocText();
 
   return (
     <EditWrapper>
@@ -140,11 +143,15 @@ function loadWorkspace(workspace: string) {
   if (!workspaceText) {
     workspaceText = getDefaultChart();
   }
-
-  prepareChart(workspaceText, {
-    id: workspace,
-    title: workspace,
-    isHosted: false,
-  });
+  prepareChart(workspaceText);
+  useDetailsStore.setState(
+    {
+      id: workspace,
+      title: workspace,
+      isHosted: false,
+    },
+    false,
+    "loadWorkspace"
+  );
   return workspaceText;
 }
diff --git a/app/src/pages/EditHosted.module.css b/app/src/pages/EditHosted.module.css
deleted file mode 100644
index 1807628ae..000000000
--- a/app/src/pages/EditHosted.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.LoadingState {
-  position: absolute;
-  display: grid;
-  bottom: 0;
-  left: 0;
-  place-content: center;
-  width: 30px;
-  height: 20px;
-  border-radius: 0px 3px 0 0;
-  background-color: var(--color-nodeHover);
-  pointer-events: none;
-}
diff --git a/app/src/pages/EditHosted.tsx b/app/src/pages/EditHosted.tsx
index 39cbe75fb..097a2631f 100644
--- a/app/src/pages/EditHosted.tsx
+++ b/app/src/pages/EditHosted.tsx
@@ -1,75 +1,74 @@
 import { Trans } from "@lingui/macro";
 import { OnMount } from "@monaco-editor/react";
 import * as Tabs from "@radix-ui/react-tabs";
-import { Check, DotsThree } from "phosphor-react";
-import { useCallback, useEffect, useRef } from "react";
-import { useMutation, useQuery } from "react-query";
+import { useEffect, useRef } from "react";
+import { useQuery } from "react-query";
 import { useParams, useRouteMatch } from "react-router-dom";
-import { useDebouncedCallback } from "use-debounce";
 
 import { ClearTextButton } from "../components/ClearTextButton";
 import EditorError from "../components/EditorError";
 import { EditorOptions } from "../components/EditorOptions";
 import { EditorWrapper } from "../components/EditorWrapper";
 import { EditWrapper } from "../components/EditWrapper";
+import Loading from "../components/Loading";
 import Main from "../components/Main";
-import Spinner from "../components/Spinner";
 import { EditLayoutTab } from "../components/Tabs/EditLayoutTab";
 import { EditMetaTab } from "../components/Tabs/EditMetaTab";
 import { EditStyleTab } from "../components/Tabs/EditStyleTab";
 import { TextEditor } from "../components/TextEditor";
+import { setDocText } from "../lib/docHelpers";
 import { useIsValidSponsor } from "../lib/hooks";
-import { prepareChart } from "../lib/prepareChart/prepareChart";
-import { getHostedChart, updateChartText } from "../lib/queries";
-import { Doc, docToString, useDoc } from "../lib/useDoc";
+import { getHostedChart } from "../lib/queries";
+import { cleanupYDoc, setupYDoc, useYDoc } from "../lib/realtime";
+import { useDetailsStore } from "../lib/useDoc";
 import { useTrackLastChart } from "../lib/useLastChart";
 import editStyles from "./Edit.module.css";
-import styles from "./EditHosted.module.css";
 
 export default function EditHosted() {
   const { id } = useParams<{ id: string }>();
-  useQuery(["useHostedDoc", id], () => loadHostedDoc(id), {
-    enabled: !!id,
-    suspense: true,
-    staleTime: 0,
-  });
-
-  const { mutate, isLoading } = useMutation((text: string) =>
-    updateChartText(text, id)
+  const { isSuccess } = useQuery(
+    ["useHostedDoc", id],
+    () => loadHostedDoc(id),
+    {
+      enabled: !!id,
+      suspense: true,
+      staleTime: 0,
+      cacheTime: 0,
+    }
   );
-  // get debounced mutate
-  const {
-    callback: debounceMutate,
-    flush,
-    pending,
-  } = useDebouncedCallback((doc: Doc) => {
-    mutate(docToString(doc));
-  }, 1000);
-  useEffect(() => useDoc.subscribe(debounceMutate), [debounceMutate]);
-
-  const text = useDoc((state) => state.text);
-
-  const editorRef = useRef<null | Parameters<OnMount>[0]>(null);
 
-  // This is to make sure we update if people exit the tab quickly
   useEffect(() => {
     return () => {
-      flush();
+      // clear details
+      useDetailsStore.setState({
+        id: undefined,
+        title: "",
+        // intentionally leave isHosted in the same position
+        isHosted: true,
+        isPublic: false,
+        publicId: undefined,
+      });
+
+      // clear y doc
+      cleanupYDoc();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onChange = useCallback(
-    (value) => useDoc.setState({ text: value ?? "" }, false, "EditHosted/text"),
-    []
-  );
+  const editorRef = useRef<null | Parameters<OnMount>[0]>(null);
 
   const { url } = useRouteMatch();
   useTrackLastChart(url);
   const isValidSponsor = useIsValidSponsor();
 
+  const isReady = useYDoc((state) => state.isReady);
+
   return (
     <EditWrapper>
+      {!isReady && (
+        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-white dark:bg-gray-900 z-50 opacity-40">
+          <Loading color="color-foreground" />
+        </div>
+      )}
       <Main>
         <EditorWrapper>
           <Tabs.Root defaultValue="Document" className={editStyles.Tabs}>
@@ -91,11 +90,7 @@ export default function EditHosted() {
             </Tabs.List>
             <Tabs.Content value="Document">
               <EditorOptions>
-                <TextEditor
-                  editorRef={editorRef}
-                  value={text}
-                  onChange={onChange}
-                />
+                <TextEditor editorRef={editorRef} bindToRealtime={isSuccess} />
               </EditorOptions>
             </Tabs.Content>
             <Tabs.Content value="Layout">
@@ -111,10 +106,9 @@ export default function EditHosted() {
             )}
           </Tabs.Root>
         </EditorWrapper>
-        <LoadingState isLoading={isLoading} pending={pending()} />
         <ClearTextButton
           handleClear={() => {
-            useDoc.setState({ text: "", meta: {} }, false, "EditHosted/clear");
+            setDocText("", "EditHosted/clear");
             if (editorRef.current) {
               editorRef.current.focus();
             }
@@ -126,39 +120,19 @@ export default function EditHosted() {
   );
 }
 
-/**
- * Shows whether the chart has synced to the server
- */
-function LoadingState({
-  pending,
-  isLoading,
-}: {
-  pending: boolean;
-  isLoading: boolean;
-}) {
-  return (
-    <div className={styles.LoadingState}>
-      {pending ? (
-        <DotsThree size={18} color="var(--palette-purple-0)" />
-      ) : isLoading ? (
-        <Spinner r={4} s={1} c="var(--palette-purple-0)" />
-      ) : (
-        <Check size={17} color="var(--palette-purple-0)" />
-      )}
-    </div>
-  );
-}
-
 async function loadHostedDoc(id: string) {
+  // Make sure user has access by loading here
   const chart = await getHostedChart(id);
   if (!chart) throw new Error("Chart not found");
-  const doc = chart.chart;
-  prepareChart(doc, {
+
+  // setup details
+  useDetailsStore.setState({
     id: chart.id,
     title: chart.name,
     isHosted: true,
     isPublic: chart.is_public,
     publicId: chart.public_id,
   });
-  return doc;
+
+  setupYDoc("hosted", id);
 }
diff --git a/app/src/pages/Public.tsx b/app/src/pages/Public.tsx
index c6be51d94..bdf255491 100644
--- a/app/src/pages/Public.tsx
+++ b/app/src/pages/Public.tsx
@@ -5,8 +5,9 @@ import { CloneButton } from "../components/CloneButton";
 import Graph from "../components/Graph";
 import GraphWrapper from "../components/GraphWrapper";
 import styles from "../components/Main.module.css";
-import { prepareChart } from "../lib/prepareChart/prepareChart";
 import { getPublicChart } from "../lib/queries";
+import { setupYDoc } from "../lib/realtime";
+import { useDetailsStore } from "../lib/useDoc";
 
 const shouldResize = 0;
 
@@ -15,6 +16,8 @@ function Public() {
   useQuery(["useHostedDoc", public_id], () => loadPublicDoc(public_id), {
     enabled: typeof public_id === "string",
     suspense: true,
+    staleTime: 0,
+    cacheTime: 0,
   });
   return (
     <GraphWrapper boxProps={{ style: { height: "100%" } }}>
@@ -31,11 +34,14 @@ export default Public;
 async function loadPublicDoc(id: string) {
   const chart = await getPublicChart(id);
   if (!chart) throw new Error("Chart not found");
-  const doc = chart.chart;
-  prepareChart(doc, {
+
+  useDetailsStore.setState({
     isHosted: true,
-    title: doc.name,
-    id: doc.id,
+    title: chart.name,
+    id: chart.id,
+    isPublic: true,
+    publicId: chart.public_id,
   });
-  return doc;
+
+  setupYDoc("public", id);
 }
diff --git a/app/src/pages/ReadOnly.tsx b/app/src/pages/ReadOnly.tsx
index 058d16825..1383a533e 100644
--- a/app/src/pages/ReadOnly.tsx
+++ b/app/src/pages/ReadOnly.tsx
@@ -9,8 +9,9 @@ import { EditorWrapper } from "../components/EditorWrapper";
 import { EditWrapper } from "../components/EditWrapper";
 import Main from "../components/Main";
 import { TextEditor } from "../components/TextEditor";
+import { getDocText } from "../lib/docHelpers";
 import { prepareChart } from "../lib/prepareChart/prepareChart";
-import { useDoc } from "../lib/useDoc";
+import { useDetailsStore } from "../lib/useDoc";
 
 function ReadOnly() {
   const { path } = useRouteMatch();
@@ -24,7 +25,8 @@ function ReadOnly() {
   });
 
   const editorRef = useRef<null | Parameters<OnMount>[0]>(null);
-  const text = useDoc((d) => d.text);
+  // TODO: should this be useDocText?
+  const text = getDocText();
 
   return (
     <EditWrapper>
@@ -55,7 +57,8 @@ async function loadReadOnly(path: string, graphText: string) {
   const initialText = isCompressed
     ? decompressFromEncodedURIComponent(graphText) ?? ""
     : decodeURIComponent(graphText);
-  prepareChart(initialText, {
+  prepareChart(initialText);
+  useDetailsStore.setState({
     isHosted: false,
     id: "read",
     title: "read-only-flowchart",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c92027fe3..f13cb2940 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,8 +93,9 @@ importers:
       '@sentry/tracing': ^7.38.0
       '@stripe/react-stripe-js': ^1.16.4
       '@stripe/stripe-js': ^1.46.0
-      '@supabase/gotrue-js': ^2
-      '@supabase/supabase-js': ^2
+      '@supabase/gotrue-js': ^2.12.1
+      '@supabase/realtime-js': ^2.6.0
+      '@supabase/supabase-js': ^2.8.0
       '@svgr/webpack': ^6.3.1
       '@testing-library/jest-dom': ^5.11.4
       '@testing-library/react': ^11.1.0
@@ -196,6 +197,10 @@ importers:
       use-debounce: ^5.2.1
       web-vitals: ^1.0.1
       web-worker: ^1.2.0
+      y-monaco: ^0.1.4
+      y-protocols: ^1.0.5
+      y-websocket: ^1.4.5
+      yjs: ^13.5.47
       zustand: ^4.3.3
     dependencies:
       '@lingui/core': 3.14.0
@@ -223,8 +228,9 @@ importers:
       '@sentry/tracing': 7.38.0
       '@stripe/react-stripe-js': 1.16.4_wuutodrnuujxynxjikyep652cy
       '@stripe/stripe-js': 1.46.0
-      '@supabase/gotrue-js': 2.1.0
-      '@supabase/supabase-js': 2.0.2
+      '@supabase/gotrue-js': 2.12.1
+      '@supabase/realtime-js': 2.6.0
+      '@supabase/supabase-js': 2.8.0
       '@svgr/webpack': 6.4.0
       '@testing-library/jest-dom': 5.16.5
       '@testing-library/react': 11.2.7_sfoxds7t5ydpegc3knd667wn6m
@@ -276,6 +282,10 @@ importers:
       svgo: 2.8.0
       use-debounce: 5.2.1_react@17.0.2
       web-vitals: 1.1.2
+      y-monaco: 0.1.4_xkgk6mmjz52pc4du3xhfls7v24
+      y-protocols: 1.0.5
+      y-websocket: 1.4.5_yjs@13.5.47
+      yjs: 13.5.47
       zustand: 4.3.3_immer@9.0.16+react@17.0.2
     devDependencies:
       '@lingui/cli': 3.14.0_tm4webiq2u57mg24iaejc4km4e
@@ -332,6 +342,29 @@ importers:
       typescript: 4.8.4
       web-worker: 1.2.0
 
+  wss:
+    specifiers:
+      '@hocuspocus/extension-database': ^1.1.0
+      '@hocuspocus/server': ^1.1.0
+      '@hocuspocus/transformer': ^1.1.0
+      '@supabase/supabase-js': ^2.8.0
+      deepmerge: ^4.2.2
+      gray-matter: ^4.0.2
+      js-base64: ^3.7.5
+      nodemon: ^2.0.20
+      yjs: ^13.5.47
+    dependencies:
+      '@hocuspocus/extension-database': 1.1.0_bjezgfodkvttvr5cbwk4e3pgwe
+      '@hocuspocus/server': 1.1.0_bjezgfodkvttvr5cbwk4e3pgwe
+      '@hocuspocus/transformer': 1.1.0_xfz7fvfpt6dw63xptlo5qrag6m
+      '@supabase/supabase-js': 2.8.0
+      deepmerge: 4.2.2
+      gray-matter: 4.0.3
+      js-base64: 3.7.5
+      yjs: 13.5.47
+    devDependencies:
+      nodemon: 2.0.20
+
 packages:
 
   /@adobe/css-tools/4.0.1:
@@ -1979,6 +2012,61 @@ packages:
       graphql: 15.8.0
     dev: false
 
+  /@hocuspocus/common/1.1.0:
+    resolution: {integrity: sha512-7a9bw7wi4fQUGNZuytlratjVuLUKm64jVlHWojS0Z06HCzokoJ/QP5H+1WtyiDM9OBiXaKGdZao2j+qxoUTPDg==}
+    dependencies:
+      lib0: 0.2.63
+    dev: false
+
+  /@hocuspocus/extension-database/1.1.0_bjezgfodkvttvr5cbwk4e3pgwe:
+    resolution: {integrity: sha512-HXGjUEE1GHlp8+8l4o0K/+dnUphAk3qGlIVN3/L9n7hZKp5RdaYNqwkUvOLKu93ss2PKjQznCPrcqcupdvR3Dg==}
+    peerDependencies:
+      yjs: ^13.5.29
+    dependencies:
+      '@hocuspocus/server': 1.1.0_bjezgfodkvttvr5cbwk4e3pgwe
+      yjs: 13.5.47
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+      - y-protocols
+    dev: false
+
+  /@hocuspocus/server/1.1.0_bjezgfodkvttvr5cbwk4e3pgwe:
+    resolution: {integrity: sha512-lcWOjbq0fl9CookGzqkxmwq2s5qQosa8dHvYYvRul7wnt3ha0S4grO4G8a+lU70EmseG9xJxeH/bwGwhDCftJA==}
+    peerDependencies:
+      y-protocols: ^1.0.5
+      yjs: ^13.5.29
+    dependencies:
+      '@hocuspocus/common': 1.1.0
+      '@types/async-lock': 1.4.0
+      '@types/uuid': 9.0.1
+      '@types/ws': 8.5.3
+      async-lock: 1.4.0
+      kleur: 4.1.5
+      lib0: 0.2.63
+      uuid: 9.0.0
+      ws: 8.11.0
+      y-protocols: 1.0.5
+      yjs: 13.5.47
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: false
+
+  /@hocuspocus/transformer/1.1.0_xfz7fvfpt6dw63xptlo5qrag6m:
+    resolution: {integrity: sha512-bcWTlew9mu4XXb8vStWuQynfnNOsotF4TvPnF+czaQiAxjTc4hiyJW/dw837p6AOP+tv5EAwxf5OrE83NZutnQ==}
+    peerDependencies:
+      '@tiptap/pm': ^2.0.0-beta.217
+      y-prosemirror: ^1.0.15
+      yjs: ^13.5.29
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+      '@tiptap/pm': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/starter-kit': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+      y-prosemirror: 1.2.0_xwmuevzqivw72i4iapvufwfbeu
+      yjs: 13.5.47
+    dev: false
+
   /@humanwhocodes/config-array/0.10.7:
     resolution: {integrity: sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==}
     engines: {node: '>=10.10.0'}
@@ -2520,6 +2608,10 @@ packages:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
     dev: false
 
+  /@linaria/core/3.0.0-beta.13:
+    resolution: {integrity: sha512-3zEi5plBCOsEzUneRVuQb+2SAx3qaC1dj0FfFAI6zIJQoDWu0dlSwKijMRack7oO9tUWrchfj3OkKQAd1LBdVg==}
+    dev: false
+
   /@linear/sdk/2.0.0:
     resolution: {integrity: sha512-IYBjjgT4br6LfJVW1xztC9X3UVM+a+IqaE4kYw1z9nadw9osdlEZGdovPDC+CBTx5p88XSTKGAls5HAJEa2ZMg==}
     engines: {node: '>=12.x', yarn: 1.x}
@@ -3929,6 +4021,38 @@ packages:
       react: 17.0.2
     dev: false
 
+  /@remirror/core-constants/2.0.0:
+    resolution: {integrity: sha512-vpePPMecHJllBqCWXl6+FIcZqS+tRUM2kSCCKFeEo1H3XUEv3ocijBIPhnlSAa7g6maX+12ATTgxrOsLpWVr2g==}
+    dependencies:
+      '@babel/runtime': 7.19.0
+    dev: false
+
+  /@remirror/core-helpers/2.0.1:
+    resolution: {integrity: sha512-s8M1pn33aBUhduvD1QR02uUQMegnFkGaTr4c1iBzxTTyg0rbQstzuQ7Q8TkL6n64JtgCdJS9jLz2dONb2meBKQ==}
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@linaria/core': 3.0.0-beta.13
+      '@remirror/core-constants': 2.0.0
+      '@remirror/types': 1.0.0
+      '@types/object.omit': 3.0.0
+      '@types/object.pick': 1.3.2
+      '@types/throttle-debounce': 2.1.0
+      case-anything: 2.1.10
+      dash-get: 1.0.2
+      deepmerge: 4.2.2
+      fast-deep-equal: 3.1.3
+      make-error: 1.3.6
+      object.omit: 3.0.0
+      object.pick: 1.3.0
+      throttle-debounce: 3.0.1
+    dev: false
+
+  /@remirror/types/1.0.0:
+    resolution: {integrity: sha512-7HQbW7k8VxrAtfzs9FxwO6XSDabn8tSFDi1wwzShOnU+cvaYpfxu0ygyTk3TpXsag1hgFKY3ZIlAfB4WVz2LkQ==}
+    dependencies:
+      type-fest: 2.19.0
+    dev: false
+
   /@rollup/plugin-babel/5.3.1_vy4anxjpv2s44kyfi2kxqu576u:
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
@@ -4149,6 +4273,14 @@ packages:
       - encoding
     dev: false
 
+  /@supabase/gotrue-js/2.12.1:
+    resolution: {integrity: sha512-r8Jfq8FvP6q4kp7sI33X1RWfEEHzJFu9uM1Q6HgiDVkY89NNgqYy2kxaRGtidPFllND7vpcJUcpoWS5oq+4u0g==}
+    dependencies:
+      cross-fetch: 3.1.5
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /@supabase/postgrest-js/1.1.0:
     resolution: {integrity: sha512-qkY8TqIu5sJuae8gjeDPjEqPrefzcTraW9PNSVJQHq4TEv98ZmwaXGwBGz0bVL63bqrGA5hqREbQHkANUTXrvA==}
     dependencies:
@@ -4157,6 +4289,14 @@ packages:
       - encoding
     dev: false
 
+  /@supabase/postgrest-js/1.4.1:
+    resolution: {integrity: sha512-aruqwV/aTggkM7OVv2JinCeXmRMKHJCZpkuS1nuoa0NgLw7g3NyILSyWOKYTBJ/PxE/zXtWsBhdxFzaaNz5uxg==}
+    dependencies:
+      cross-fetch: 3.1.5
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /@supabase/realtime-js/2.1.0:
     resolution: {integrity: sha512-iplLCofTeYjnx9FIOsIwHLhMp0+7UVyiA4/sCeq40VdOgN9eTIhjEno9Tgh4dJARi4aaXoKfRX1DTxgZaOpPAw==}
     dependencies:
@@ -4166,6 +4306,15 @@ packages:
       - supports-color
     dev: false
 
+  /@supabase/realtime-js/2.6.0:
+    resolution: {integrity: sha512-tOVulMobhpxyDuu8VIImpL8FXmZOKsGNOSyS5ihJdj2xYmPPvYG+D2J51Ewfl+MFF65tweiB6p9N9bNIW1cDNA==}
+    dependencies:
+      '@types/phoenix': 1.5.4
+      websocket: 1.0.34
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@supabase/storage-js/2.0.0:
     resolution: {integrity: sha512-7kXThdRt/xqnOOvZZxBqNkeX1CFNUWc0hYBJtNN/Uvt8ok9hD14foYmroWrHn046wEYFqUrB9U35JYsfTrvltA==}
     dependencies:
@@ -4174,6 +4323,14 @@ packages:
       - encoding
     dev: false
 
+  /@supabase/storage-js/2.3.0:
+    resolution: {integrity: sha512-YGWVCEYYYF3+UiyL8O4xC78N9n9paLbT0hHl8dmYAtd3DqyWtu5Eph9JTu0PWm+/29Zhns5TbhUZW4xpWjJfPQ==}
+    dependencies:
+      cross-fetch: 3.1.5
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /@supabase/supabase-js/2.0.2:
     resolution: {integrity: sha512-ssRxPvkMcERx8bsrEaBjvRpNRz2V4ZjObPh5ky8CVxXH1vEWIb10Qq6WMG0LB32Z5lEWplEPy0zfy+LIetcNRQ==}
     dependencies:
@@ -4188,6 +4345,20 @@ packages:
       - supports-color
     dev: false
 
+  /@supabase/supabase-js/2.8.0:
+    resolution: {integrity: sha512-uzf4J+qAKdUMhB2tnJl6BrQRUQBinwjJ2eWo2ZsDw9EUUP5JcHsxTamiq6p91DpqzmTIRg3xRAT+bItTzbfa0w==}
+    dependencies:
+      '@supabase/functions-js': 2.0.0
+      '@supabase/gotrue-js': 2.12.1
+      '@supabase/postgrest-js': 1.4.1
+      '@supabase/realtime-js': 2.6.0
+      '@supabase/storage-js': 2.3.0
+      cross-fetch: 3.1.5
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+
   /@surma/rollup-plugin-off-main-thread/2.2.3:
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
     dependencies:
@@ -4673,6 +4844,220 @@ packages:
       '@testing-library/dom': 8.18.1
     dev: false
 
+  /@tiptap/core/2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218:
+    resolution: {integrity: sha512-RCrT4AYgH+2mQtt26EkFjIkGZGsuT7vKTbknEhpXdhWgbxy/fg65WyPs8hQMyocjOqPX2vbike4PfqWi9nBqCw==}
+    peerDependencies:
+      '@tiptap/pm': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/pm': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+    dev: false
+
+  /@tiptap/extension-blockquote/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-cQ1mjWjSqe6ztglfRRBIAzZ+6Ro5jN7QpSstVMravqW3lu52omXqYx5SfDNycoO6574BoSw2Wijz36RwQLeAsQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.1
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/extension-bold/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-XKQ9QiXspGLY9LyZVhPTQFfJQEDzrwCigILG+QwM3WAp/hKNDJsUy4GXRl/Rdtx+5mfqGyh+Zlo41xF2WhoKUg==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/extension-bullet-list/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-pf4MMcM65tYLauogxfIsvmFf5pqV9hlTAsgsQhPw2L3ayceOr6JvmiGHBVlZifhNcIuSDY/3i2Ft/O4tKFncbQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/extension-code-block/2.0.0-beta.218_p7b6nzxe7qctmzbzapdik3nr64:
+    resolution: {integrity: sha512-ajmHrZ2xDgCjLaokvmdiI7fETqRyvI/qHD4jzmzMTKdIiwLzwCgTVmbU73TmZSdR1+fO+pyDTp48YIxDy9zRdA==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+      '@tiptap/pm': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+      '@tiptap/pm': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+    dev: false
+
+  /@tiptap/extension-code/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-i/gJuY78+QWTc4LeSHM613IxKCC63oqGKounl+xlBqtH6b/w9Rx8R6WJQIz78Mth5dQHKTSUPwjR5+UcmKhFRA==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/extension-document/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-bpNhUEho8sbjLVYGX+jkqZv//2OVFs0RhiNtMJ1SUbdr9LDJu+KMo86KUkTkRPPgoJPDkEViIgNrYcc66MFxmQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/extension-dropcursor/2.0.0-beta.218_p7b6nzxe7qctmzbzapdik3nr64:
+    resolution: {integrity: sha512-RvYB0koNJs3ETcVnzwda0hhDxCa2hoKW1C3WiRKg1+pYA5oW12NtiNWqViQKkSn1ugQXXzhdxMHGCSr4BczmAA==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+      '@tiptap/pm': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+      '@tiptap/pm': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+    dev: false
+
+  /@tiptap/extension-gapcursor/2.0.0-beta.218_p7b6nzxe7qctmzbzapdik3nr64:
+    resolution: {integrity: sha512-buawfpYb+wgXj+01qLb58Cv9x6dhcM4oHoFggBRo8E3mj561plfDKWK45OZIbyqRQeE8U3bbwfSYgail5wd7JA==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+      '@tiptap/pm': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+      '@tiptap/pm': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+    dev: false
+
+  /@tiptap/extension-hard-break/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-mAtjRjkEQ2I+WGTOn90SefRvpF/HVVLRji9jidPTCnTVOJzEYax5xPlr5vFh2N4wcprWWi/T5qcwybs1oV3uig==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/extension-heading/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-JYkDLk19wFdjHG1prUfNV6EzZuDt9P5psaPaiwGoAujUMHKBJTllSC+UZ4H7YL87RpUIPs5GHQMWL91HP+0RYQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/extension-history/2.0.0-beta.218_p7b6nzxe7qctmzbzapdik3nr64:
+    resolution: {integrity: sha512-4xfEKWGHU2785vUXXaIguxIaKKQ3b+z7463QhF2qhcpm5Ip6eupYbbE0jy8S12wSujhrjk88W0Ud6n3puV73xA==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+      '@tiptap/pm': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+      '@tiptap/pm': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+    dev: false
+
+  /@tiptap/extension-horizontal-rule/2.0.0-beta.218_p7b6nzxe7qctmzbzapdik3nr64:
+    resolution: {integrity: sha512-JlKMzqgheujKkx0ZQvUCO+WkIUQQKkWMiUSEsTaAvgIfzI97dKuP/r7CsgZczurtJ9edRPmQqMRwxZ4XLtC/aQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+      '@tiptap/pm': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+      '@tiptap/pm': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+    dev: false
+
+  /@tiptap/extension-italic/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-+/NRGoLQXi+CCziVT7MixB10jC72c5BCG6w15H4hfHkD+eJc/DfzLCuIaePzYCZC/xqjNI/EBNh6BP3HTMHCpQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/extension-list-item/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-ZqSA0dZAzACYgfFAM+RWCRhMPUcZiWT8JhpN/2on0egI+b1gtt2RAA4niBaNFp4skGQS8a4bCy5cttIHUNO7FA==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/extension-ordered-list/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-Oe/Kl6+mNSBOpF4fXeQxFXu7/fMFPwn3UZ2hR+DTIJkoLbviKehcxSInqWmUV0n5FbEr3usErPDYDDrCH+zEVw==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/extension-paragraph/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-qBNGJl0r/uufPoC02fqdjRQBmafE3zd+uPevtN+Nozze4kBc5VIlkLMw6VR83jMMeWKNhbQ97aCCYQYjCabaDw==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/extension-strike/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-PZ3FGmh3XkdQqRIfMZrHApFVerf/2vQu0V1IWTxUDpaUSD/TL5A1dp3R/O/dlVauhKV3zDs/XGfepXJ99fyXAg==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/extension-text/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-Z14dRRIjQwPGJD3+joD3nEs6NcQUORuPXa2BDWsFcAb6R+yPz7j9Wpn4nkcWCw2CIqnMm17ERs+KSSvKvzWY6Q==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+    dev: false
+
+  /@tiptap/pm/2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4:
+    resolution: {integrity: sha512-mRKHch3BMleLmFJbQcD7Su7oFayHBCl5zzYlQ0ws44dLCR7zlGL85Fxxfk+8wd64dwDjlbdAAZmRLQctq4JgjA==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.209
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+      prosemirror-changeset: 2.2.0
+      prosemirror-collab: 1.3.0
+      prosemirror-commands: 1.5.0
+      prosemirror-dropcursor: 1.7.0
+      prosemirror-gapcursor: 1.3.1
+      prosemirror-history: 1.3.0
+      prosemirror-inputrules: 1.2.0
+      prosemirror-keymap: 1.2.1
+      prosemirror-markdown: 1.10.1
+      prosemirror-menu: 1.2.1
+      prosemirror-model: 1.19.0
+      prosemirror-schema-basic: 1.2.1
+      prosemirror-schema-list: 1.2.2
+      prosemirror-state: 1.4.2
+      prosemirror-tables: 1.3.2
+      prosemirror-trailing-node: 2.0.3_5fcjrdljkuxznpmydz7mdgrowq
+      prosemirror-transform: 1.7.1
+      prosemirror-view: 1.30.1
+    dev: false
+
+  /@tiptap/starter-kit/2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218:
+    resolution: {integrity: sha512-oe0+xe05tj94sn3z3QM+U6cBF6psMxh3JCleKXm8c1hTj3fMK2VOhn8RJKfAF7RtOQYA8pZ0+02adEyX7nKWzw==}
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.218_@tiptap+pm@2.0.0-beta.218
+      '@tiptap/extension-blockquote': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/extension-bold': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/extension-bullet-list': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/extension-code': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/extension-code-block': 2.0.0-beta.218_p7b6nzxe7qctmzbzapdik3nr64
+      '@tiptap/extension-document': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/extension-dropcursor': 2.0.0-beta.218_p7b6nzxe7qctmzbzapdik3nr64
+      '@tiptap/extension-gapcursor': 2.0.0-beta.218_p7b6nzxe7qctmzbzapdik3nr64
+      '@tiptap/extension-hard-break': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/extension-heading': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/extension-history': 2.0.0-beta.218_p7b6nzxe7qctmzbzapdik3nr64
+      '@tiptap/extension-horizontal-rule': 2.0.0-beta.218_p7b6nzxe7qctmzbzapdik3nr64
+      '@tiptap/extension-italic': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/extension-list-item': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/extension-ordered-list': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/extension-paragraph': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/extension-strike': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+      '@tiptap/extension-text': 2.0.0-beta.218_xixjdlstfbsoyvyes7aewz3ng4
+    transitivePeerDependencies:
+      - '@tiptap/pm'
+    dev: false
+
   /@tone-row/slang/1.2.37_56jbash75ng5psbctf36wqywr4:
     resolution: {integrity: sha512-sAb+zOdDRPn1mqorkVecqWmNS9i4UMGg3/3Wb2t65geSI9hSRBvyIoFiquhL0Myx90jnIIII4xEuDkDA1vrvKg==}
     hasBin: true
@@ -4739,6 +5124,10 @@ packages:
     resolution: {integrity: sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==}
     dev: false
 
+  /@types/async-lock/1.4.0:
+    resolution: {integrity: sha512-2+rYSaWrpdbQG3SA0LmMT6YxWLrI81AqpMlSkw3QtFc2HGDufkweQSn30Eiev7x9LL0oyFrBqk1PXOnB9IEgKg==}
+    dev: false
+
   /@types/babel__core/7.1.19:
     resolution: {integrity: sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==}
     dependencies:
@@ -4994,6 +5383,14 @@ packages:
   /@types/node/18.8.3:
     resolution: {integrity: sha512-0os9vz6BpGwxGe9LOhgP/ncvYN5Tx1fNcd2TM3rD/aCGBkysb+ZWpXEocG24h6ZzOi13+VB8HndAQFezsSOw1w==}
 
+  /@types/object.omit/3.0.0:
+    resolution: {integrity: sha512-I27IoPpH250TUzc9FzXd0P1BV/BMJuzqD3jOz98ehf9dQqGkxlq+hO1bIqZGWqCg5bVOy0g4AUVJtnxe0klDmw==}
+    dev: false
+
+  /@types/object.pick/1.3.2:
+    resolution: {integrity: sha512-sn7L+qQ6RLPdXRoiaE7bZ/Ek+o4uICma/lBFPyJEKDTPTBP1W8u0c4baj3EiS4DiqLs+Hk+KUGvMVJtAw3ePJg==}
+    dev: false
+
   /@types/parse-json/4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
 
@@ -5131,6 +5528,10 @@ packages:
     dependencies:
       '@types/jest': 29.1.2
 
+  /@types/throttle-debounce/2.1.0:
+    resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==}
+    dev: false
+
   /@types/through/0.0.30:
     resolution: {integrity: sha512-FvnCJljyxhPM3gkRgWmxmDZyAQSiBQQWLI0A0VFL0K7W1oRUrPJSqNO0NvTnLkBcotdlp3lKvaT0JrnyRDkzOg==}
     dependencies:
@@ -5145,6 +5546,10 @@ packages:
     resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
     dev: false
 
+  /@types/uuid/9.0.1:
+    resolution: {integrity: sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==}
+    dev: false
+
   /@types/ws/8.5.3:
     resolution: {integrity: sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==}
     dependencies:
@@ -5568,6 +5973,30 @@ packages:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
     dev: true
 
+  /abstract-leveldown/6.2.3:
+    resolution: {integrity: sha512-BsLm5vFMRUrrLeCcRc+G0t2qOaTzpoJQLOubq2XM72eNpjF5UdU5o/5NvlNhx95XHcAvcl8OMXr4mlg/fRgUXQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      buffer: 5.7.1
+      immediate: 3.3.0
+      level-concat-iterator: 2.0.1
+      level-supports: 1.0.1
+      xtend: 4.0.2
+    dev: false
+    optional: true
+
+  /abstract-leveldown/6.3.0:
+    resolution: {integrity: sha512-TU5nlYgta8YrBMNpc9FwQzRbiXsj49gsALsXadbGHt9CROPzX5fB0rWDR5mtdpOOKa5XqRFpbj1QroPAoPzVjQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      buffer: 5.7.1
+      immediate: 3.3.0
+      level-concat-iterator: 2.0.1
+      level-supports: 1.0.1
+      xtend: 4.0.2
+    dev: false
+    optional: true
+
   /accepts/1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -5889,6 +6318,15 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /async-limiter/1.0.1:
+    resolution: {integrity: sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==}
+    dev: false
+    optional: true
+
+  /async-lock/1.4.0:
+    resolution: {integrity: sha512-coglx5yIWuetakm3/1dsX9hxCNox22h7+V80RQOu2XUUMidtArxKoZoOtHUPuR84SycKTXzgGzAUR5hJxujyJQ==}
+    dev: false
+
   /async-sema/3.1.1:
     resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
     dev: true
@@ -6334,7 +6772,6 @@ packages:
     dependencies:
       base64-js: 1.5.1
       ieee754: 1.2.1
-    dev: true
 
   /buffer/6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
@@ -6420,6 +6857,11 @@ packages:
   /caniuse-lite/1.0.30001418:
     resolution: {integrity: sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==}
 
+  /case-anything/2.1.10:
+    resolution: {integrity: sha512-JczJwVrCP0jPKh05McyVsuOg6AYosrB9XWZKbQzXeDAm2ClE/PJE/BcrrQrVyGYH7Jg8V/LDupmyL4kFlVsVFQ==}
+    engines: {node: '>=12.13'}
+    dev: false
+
   /case-sensitive-paths-webpack-plugin/2.4.0:
     resolution: {integrity: sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==}
     engines: {node: '>=4'}
@@ -6861,6 +7303,10 @@ packages:
   /create-require/1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
+  /crelt/1.0.5:
+    resolution: {integrity: sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==}
+    dev: false
+
   /cross-fetch/3.1.5:
     resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==}
     dependencies:
@@ -7188,6 +7634,10 @@ packages:
   /damerau-levenshtein/1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
+  /dash-get/1.0.2:
+    resolution: {integrity: sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ==}
+    dev: false
+
   /data-urls/2.0.0:
     resolution: {integrity: sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==}
     engines: {node: '>=10'}
@@ -7230,6 +7680,18 @@ packages:
     dependencies:
       ms: 2.1.3
 
+  /debug/3.2.7_supports-color@5.5.0:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+      supports-color: 5.5.0
+    dev: true
+
   /debug/4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -7283,6 +7745,15 @@ packages:
     resolution: {integrity: sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==}
     dev: true
 
+  /deferred-leveldown/5.3.0:
+    resolution: {integrity: sha512-a59VOT+oDy7vtAbLRCZwWgxu2BaCfd5Hk7wxJd48ei7I+nsg8Orlb9CLG0PMZienk9BSUKgeAqkO2+Lw+1+Ukw==}
+    engines: {node: '>=6'}
+    dependencies:
+      abstract-leveldown: 6.2.3
+      inherits: 2.0.4
+    dev: false
+    optional: true
+
   /define-lazy-prop/2.0.0:
     resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
     engines: {node: '>=8'}
@@ -7597,6 +8068,17 @@ packages:
     engines: {node: '>= 0.8'}
     dev: false
 
+  /encoding-down/6.3.0:
+    resolution: {integrity: sha512-QKrV0iKR6MZVJV08QY0wp1e7vF6QbhnbQhb07bwpEyuz4uZiZgPlEGdkCROuFkUwdxlFaiPIhjyarH1ee/3vhw==}
+    engines: {node: '>=6'}
+    dependencies:
+      abstract-leveldown: 6.3.0
+      inherits: 2.0.4
+      level-codec: 9.0.2
+      level-errors: 2.0.1
+    dev: false
+    optional: true
+
   /end-of-stream/1.4.4:
     resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
     dependencies:
@@ -7615,10 +8097,23 @@ packages:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
     dev: false
 
+  /entities/3.0.1:
+    resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==}
+    engines: {node: '>=0.12'}
+    dev: false
+
   /entities/4.4.0:
     resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==}
     engines: {node: '>=0.12'}
 
+  /errno/0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+    dependencies:
+      prr: 1.0.1
+    dev: false
+    optional: true
+
   /error-ex/1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
@@ -9305,10 +9800,19 @@ packages:
   /ieee754/1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
+  /ignore-by-default/1.0.1:
+    resolution: {integrity: sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==}
+    dev: true
+
   /ignore/5.2.0:
     resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==}
     engines: {node: '>= 4'}
 
+  /immediate/3.3.0:
+    resolution: {integrity: sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==}
+    dev: false
+    optional: true
+
   /immer/9.0.16:
     resolution: {integrity: sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==}
     dev: false
@@ -9494,6 +9998,13 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /is-extendable/1.0.1:
+    resolution: {integrity: sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-plain-object: 2.0.4
+    dev: false
+
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -9577,6 +10088,13 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /is-plain-object/2.0.4:
+    resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      isobject: 3.0.1
+    dev: false
+
   /is-plain-object/5.0.0:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
@@ -9662,6 +10180,11 @@ packages:
   /isexe/2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  /isobject/3.0.1:
+    resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /isomorphic-fetch/3.0.0:
     resolution: {integrity: sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==}
     dependencies:
@@ -9680,6 +10203,10 @@ packages:
       - encoding
     dev: false
 
+  /isomorphic.js/0.2.5:
+    resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
+    dev: false
+
   /istanbul-lib-coverage/3.2.0:
     resolution: {integrity: sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==}
     engines: {node: '>=8'}
@@ -10706,6 +11233,10 @@ packages:
       - ts-node
     dev: true
 
+  /js-base64/3.7.5:
+    resolution: {integrity: sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==}
+    dev: false
+
   /js-levenshtein/1.1.6:
     resolution: {integrity: sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==}
     engines: {node: '>=0.10.0'}
@@ -10907,6 +11438,11 @@ packages:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
 
+  /kleur/4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+    dev: false
+
   /klona/2.0.5:
     resolution: {integrity: sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==}
     engines: {node: '>= 8'}
@@ -10931,6 +11467,98 @@ packages:
     resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
     dev: false
 
+  /level-codec/9.0.2:
+    resolution: {integrity: sha512-UyIwNb1lJBChJnGfjmO0OR+ezh2iVu1Kas3nvBS/BzGnx79dv6g7unpKIDNPMhfdTEGoc7mC8uAu51XEtX+FHQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      buffer: 5.7.1
+    dev: false
+    optional: true
+
+  /level-concat-iterator/2.0.1:
+    resolution: {integrity: sha512-OTKKOqeav2QWcERMJR7IS9CUo1sHnke2C0gkSmcR7QuEtFNLLzHQAvnMw8ykvEcv0Qtkg0p7FOwP1v9e5Smdcw==}
+    engines: {node: '>=6'}
+    dev: false
+    optional: true
+
+  /level-errors/2.0.1:
+    resolution: {integrity: sha512-UVprBJXite4gPS+3VznfgDSU8PTRuVX0NXwoWW50KLxd2yw4Y1t2JUR5In1itQnudZqRMT9DlAM3Q//9NCjCFw==}
+    engines: {node: '>=6'}
+    dependencies:
+      errno: 0.1.8
+    dev: false
+    optional: true
+
+  /level-iterator-stream/4.0.2:
+    resolution: {integrity: sha512-ZSthfEqzGSOMWoUGhTXdX9jv26d32XJuHz/5YnuHZzH6wldfWMOVwI9TBtKcya4BKTyTt3XVA0A3cF3q5CY30Q==}
+    engines: {node: '>=6'}
+    dependencies:
+      inherits: 2.0.4
+      readable-stream: 3.6.0
+      xtend: 4.0.2
+    dev: false
+    optional: true
+
+  /level-js/5.0.2:
+    resolution: {integrity: sha512-SnBIDo2pdO5VXh02ZmtAyPP6/+6YTJg2ibLtl9C34pWvmtMEmRTWpra+qO/hifkUtBTOtfx6S9vLDjBsBK4gRg==}
+    dependencies:
+      abstract-leveldown: 6.2.3
+      buffer: 5.7.1
+      inherits: 2.0.4
+      ltgt: 2.2.1
+    dev: false
+    optional: true
+
+  /level-packager/5.1.1:
+    resolution: {integrity: sha512-HMwMaQPlTC1IlcwT3+swhqf/NUO+ZhXVz6TY1zZIIZlIR0YSn8GtAAWmIvKjNY16ZkEg/JcpAuQskxsXqC0yOQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      encoding-down: 6.3.0
+      levelup: 4.4.0
+    dev: false
+    optional: true
+
+  /level-supports/1.0.1:
+    resolution: {integrity: sha512-rXM7GYnW8gsl1vedTJIbzOrRv85c/2uCMpiiCzO2fndd06U/kUXEEU9evYn4zFggBOg36IsBW8LzqIpETwwQzg==}
+    engines: {node: '>=6'}
+    dependencies:
+      xtend: 4.0.2
+    dev: false
+    optional: true
+
+  /level/6.0.1:
+    resolution: {integrity: sha512-psRSqJZCsC/irNhfHzrVZbmPYXDcEYhA5TVNwr+V92jF44rbf86hqGp8fiT702FyiArScYIlPSBTDUASCVNSpw==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      level-js: 5.0.2
+      level-packager: 5.1.1
+      leveldown: 5.6.0
+    dev: false
+    optional: true
+
+  /leveldown/5.6.0:
+    resolution: {integrity: sha512-iB8O/7Db9lPaITU1aA2txU/cBEXAt4vWwKQRrrWuS6XDgbP4QZGj9BL2aNbwb002atoQ/lIotJkfyzz+ygQnUQ==}
+    engines: {node: '>=8.6.0'}
+    requiresBuild: true
+    dependencies:
+      abstract-leveldown: 6.2.3
+      napi-macros: 2.0.0
+      node-gyp-build: 4.1.1
+    dev: false
+    optional: true
+
+  /levelup/4.4.0:
+    resolution: {integrity: sha512-94++VFO3qN95cM/d6eBXvd894oJE0w3cInq9USsyQzzoJxmiYzPAocNcuGCPGGjoXqDVJcr3C1jzt1TSjyaiLQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      deferred-leveldown: 5.3.0
+      level-errors: 2.0.1
+      level-iterator-stream: 4.0.2
+      level-supports: 1.0.1
+      xtend: 4.0.2
+    dev: false
+    optional: true
+
   /leven/3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
@@ -10949,6 +11577,13 @@ packages:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  /lib0/0.2.63:
+    resolution: {integrity: sha512-JhUd/JXR4rnWsSP1zup904ACbVFcdRieWoIGwGAtHww4zms0gNyi8EM30Rfftnk+6A10qQMSufjLM0/ncq06xw==}
+    engines: {node: '>=14'}
+    dependencies:
+      isomorphic.js: 0.2.5
+    dev: false
+
   /lilconfig/2.0.5:
     resolution: {integrity: sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==}
     engines: {node: '>=10'}
@@ -10961,6 +11596,12 @@ packages:
   /lines-and-columns/1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  /linkify-it/4.0.1:
+    resolution: {integrity: sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==}
+    dependencies:
+      uc.micro: 1.0.6
+    dev: false
+
   /lint-staged/13.0.3:
     resolution: {integrity: sha512-9hmrwSCFroTSYLjflGI8Uk+GWAwMB4OlpU4bMJEAT5d/llQwtYKoim4bLOyLCuWFAhWEupE0vkIFqtw/WIsPug==}
     engines: {node: ^14.13.1 || >=16.0.0}
@@ -11125,6 +11766,11 @@ packages:
     dependencies:
       yallist: 4.0.0
 
+  /ltgt/2.2.1:
+    resolution: {integrity: sha512-AI2r85+4MquTw9ZYqabu4nMwy9Oftlfa/e/52t9IjtfG+mGBbTNdAoZ3RQKLHR6r0wQnwZnPIEh/Ya6XTWAKNA==}
+    dev: false
+    optional: true
+
   /lz-string/1.4.4:
     resolution: {integrity: sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==}
     hasBin: true
@@ -11157,6 +11803,17 @@ packages:
     dependencies:
       tmpl: 1.0.5
 
+  /markdown-it/13.0.1:
+    resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 3.0.1
+      linkify-it: 4.0.1
+      mdurl: 1.0.1
+      uc.micro: 1.0.6
+    dev: false
+
   /markdown-table/2.0.0:
     resolution: {integrity: sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==}
     dependencies:
@@ -11184,6 +11841,10 @@ packages:
     resolution: {integrity: sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==}
     dev: false
 
+  /mdurl/1.0.1:
+    resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
+    dev: false
+
   /media-typer/0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -11415,6 +12076,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /napi-macros/2.0.0:
+    resolution: {integrity: sha512-A0xLykHtARfueITVDernsAWdtIMbOJgKgcluwENp3AlsKN/PloyO10HtmoqnFAQAcxPkgZN7wdfPfEd0zNGxbg==}
+    dev: false
+    optional: true
+
   /natural-compare/1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -11460,6 +12126,12 @@ packages:
       lodash.get: 4.4.2
     dev: true
 
+  /node-gyp-build/4.1.1:
+    resolution: {integrity: sha512-dSq1xmcPDKPZ2EED2S6zw/b9NKsqzXRE6dVr8TVQnI3FJOTteUMuqF3Qqs6LZg+mLGYJWqQzMbIjMtJqTv87nQ==}
+    hasBin: true
+    dev: false
+    optional: true
+
   /node-gyp-build/4.5.0:
     resolution: {integrity: sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==}
     hasBin: true
@@ -11477,6 +12149,30 @@ packages:
   /node-releases/2.0.6:
     resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
 
+  /nodemon/2.0.20:
+    resolution: {integrity: sha512-Km2mWHKKY5GzRg6i1j5OxOHQtuvVsgskLfigG25yTtbyfRGn/GNvIbRyOf1PSCKJ2aT/58TiuUsuOU5UToVViw==}
+    engines: {node: '>=8.10.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      debug: 3.2.7_supports-color@5.5.0
+      ignore-by-default: 1.0.1
+      minimatch: 3.1.2
+      pstree.remy: 1.1.8
+      semver: 5.7.1
+      simple-update-notifier: 1.1.0
+      supports-color: 5.5.0
+      touch: 3.1.0
+      undefsafe: 2.0.5
+    dev: true
+
+  /nopt/1.0.10:
+    resolution: {integrity: sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==}
+    hasBin: true
+    dependencies:
+      abbrev: 1.1.1
+    dev: true
+
   /nopt/5.0.0:
     resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
     engines: {node: '>=6'}
@@ -11604,6 +12300,20 @@ packages:
       define-properties: 1.1.4
       es-abstract: 1.20.4
 
+  /object.omit/3.0.0:
+    resolution: {integrity: sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extendable: 1.0.1
+    dev: false
+
+  /object.pick/1.3.0:
+    resolution: {integrity: sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      isobject: 3.0.1
+    dev: false
+
   /object.values/1.1.5:
     resolution: {integrity: sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==}
     engines: {node: '>= 0.4'}
@@ -11713,6 +12423,10 @@ packages:
       wcwidth: 1.0.1
     dev: true
 
+  /orderedmap/2.1.0:
+    resolution: {integrity: sha512-/pIFexOm6S70EPdznemIz3BQZoJ4VTFrhqzu0ACBqBgeLsLxq8e6Jim63ImIfwW/zAD1AlXpRMlOv3aghmo4dA==}
+    dev: false
+
   /os-tmpdir/1.0.2:
     resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
     engines: {node: '>=0.10.0'}
@@ -12908,6 +13622,149 @@ packages:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  /prosemirror-changeset/2.2.0:
+    resolution: {integrity: sha512-QM7ohGtkpVpwVGmFb8wqVhaz9+6IUXcIQBGZ81YNAKYuHiFJ1ShvSzab4pKqTinJhwciZbrtBEk/2WsqSt2PYg==}
+    dependencies:
+      prosemirror-transform: 1.7.1
+    dev: false
+
+  /prosemirror-collab/1.3.0:
+    resolution: {integrity: sha512-+S/IJ69G2cUu2IM5b3PBekuxs94HO1CxJIWOFrLQXUaUDKL/JfBx+QcH31ldBlBXyDEUl+k3Vltfi1E1MKp2mA==}
+    dependencies:
+      prosemirror-state: 1.4.2
+    dev: false
+
+  /prosemirror-commands/1.5.0:
+    resolution: {integrity: sha512-zL0Fxbj3fh71GPNHn5YdYgYGX2aU2XLecZYk2ekEF0oOD259HcXtM+96VjPVi5o3h4sGUdDfEEhGiREXW6U+4A==}
+    dependencies:
+      prosemirror-model: 1.19.0
+      prosemirror-state: 1.4.2
+      prosemirror-transform: 1.7.1
+    dev: false
+
+  /prosemirror-dropcursor/1.7.0:
+    resolution: {integrity: sha512-vzab/iPd3CjWILFv6WJz4+BlOwCywOcAGhvY5G/66OYPcaZehN8IVbGtHCV3oyhXk2yAA67nwMv/oNMvBV9k1A==}
+    dependencies:
+      prosemirror-state: 1.4.2
+      prosemirror-transform: 1.7.1
+      prosemirror-view: 1.30.1
+    dev: false
+
+  /prosemirror-gapcursor/1.3.1:
+    resolution: {integrity: sha512-GKTeE7ZoMsx5uVfc51/ouwMFPq0o8YrZ7Hx4jTF4EeGbXxBveUV8CGv46mSHuBBeXGmvu50guoV2kSnOeZZnUA==}
+    dependencies:
+      prosemirror-keymap: 1.2.1
+      prosemirror-model: 1.19.0
+      prosemirror-state: 1.4.2
+      prosemirror-view: 1.30.1
+    dev: false
+
+  /prosemirror-history/1.3.0:
+    resolution: {integrity: sha512-qo/9Wn4B/Bq89/YD+eNWFbAytu6dmIM85EhID+fz9Jcl9+DfGEo8TTSrRhP15+fFEoaPqpHSxlvSzSEbmlxlUA==}
+    dependencies:
+      prosemirror-state: 1.4.2
+      prosemirror-transform: 1.7.1
+      rope-sequence: 1.3.3
+    dev: false
+
+  /prosemirror-inputrules/1.2.0:
+    resolution: {integrity: sha512-eAW/M/NTSSzpCOxfR8Abw6OagdG0MiDAiWHQMQveIsZtoKVYzm0AflSPq/ymqJd56/Su1YPbwy9lM13wgHOFmQ==}
+    dependencies:
+      prosemirror-state: 1.4.2
+      prosemirror-transform: 1.7.1
+    dev: false
+
+  /prosemirror-keymap/1.2.1:
+    resolution: {integrity: sha512-kVK6WGC+83LZwuSJnuCb9PsADQnFZllt94qPP3Rx/vLcOUV65+IbBeH2nS5cFggPyEVJhGkGrgYFRrG250WhHQ==}
+    dependencies:
+      prosemirror-state: 1.4.2
+      w3c-keyname: 2.2.6
+    dev: false
+
+  /prosemirror-markdown/1.10.1:
+    resolution: {integrity: sha512-s7iaTLiX+qO5z8kF2NcMmy2T7mIlxzkS4Sp3vTKSYChPtbMpg6YxFkU0Y06rUg2WtKlvBu7v1bXzlGBkfjUWAA==}
+    dependencies:
+      markdown-it: 13.0.1
+      prosemirror-model: 1.19.0
+    dev: false
+
+  /prosemirror-menu/1.2.1:
+    resolution: {integrity: sha512-sBirXxVfHalZO4f1ZS63WzewINK4182+7dOmoMeBkqYO8wqMBvBS7wQuwVOHnkMWPEh0+N0LJ856KYUN+vFkmQ==}
+    dependencies:
+      crelt: 1.0.5
+      prosemirror-commands: 1.5.0
+      prosemirror-history: 1.3.0
+      prosemirror-state: 1.4.2
+    dev: false
+
+  /prosemirror-model/1.19.0:
+    resolution: {integrity: sha512-/CvFGJnwc41EJSfDkQLly1cAJJJmBpZwwUJtwZPTjY2RqZJfM8HVbCreOY/jti8wTRbVyjagcylyGoeJH/g/3w==}
+    dependencies:
+      orderedmap: 2.1.0
+    dev: false
+
+  /prosemirror-schema-basic/1.2.1:
+    resolution: {integrity: sha512-vYBdIHsYKSDIqYmPBC7lnwk9DsKn8PnVqK97pMYP5MLEDFqWIX75JiaJTzndBii4bRuNqhC2UfDOfM3FKhlBHg==}
+    dependencies:
+      prosemirror-model: 1.19.0
+    dev: false
+
+  /prosemirror-schema-list/1.2.2:
+    resolution: {integrity: sha512-rd0pqSDp86p0MUMKG903g3I9VmElFkQpkZ2iOd3EOVg1vo5Cst51rAsoE+5IPy0LPXq64eGcCYlW1+JPNxOj2w==}
+    dependencies:
+      prosemirror-model: 1.19.0
+      prosemirror-state: 1.4.2
+      prosemirror-transform: 1.7.1
+    dev: false
+
+  /prosemirror-state/1.4.2:
+    resolution: {integrity: sha512-puuzLD2mz/oTdfgd8msFbe0A42j5eNudKAAPDB0+QJRw8cO1ygjLmhLrg9RvDpf87Dkd6D4t93qdef00KKNacQ==}
+    dependencies:
+      prosemirror-model: 1.19.0
+      prosemirror-transform: 1.7.1
+      prosemirror-view: 1.30.1
+    dev: false
+
+  /prosemirror-tables/1.3.2:
+    resolution: {integrity: sha512-/9JTeN6s58Zq66HXaxP6uf8PAmc7XXKZFPlOGVtLvxEd6xBP6WtzaJB9wBjiGUzwbdhdMEy7V62yuHqk/3VrnQ==}
+    dependencies:
+      prosemirror-keymap: 1.2.1
+      prosemirror-model: 1.19.0
+      prosemirror-state: 1.4.2
+      prosemirror-transform: 1.7.1
+      prosemirror-view: 1.30.1
+    dev: false
+
+  /prosemirror-trailing-node/2.0.3_5fcjrdljkuxznpmydz7mdgrowq:
+    resolution: {integrity: sha512-lGrjMrn97KWkjQSW/FjdvnhJmqFACmQIyr6lKYApvHitDnKsCoZz6XzrHB7RZYHni/0NxQmZ01p/2vyK2SkvaA==}
+    peerDependencies:
+      prosemirror-model: ^1
+      prosemirror-state: ^1
+      prosemirror-view: ^1
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@remirror/core-constants': 2.0.0
+      '@remirror/core-helpers': 2.0.1
+      escape-string-regexp: 4.0.0
+      prosemirror-model: 1.19.0
+      prosemirror-state: 1.4.2
+      prosemirror-view: 1.30.1
+    dev: false
+
+  /prosemirror-transform/1.7.1:
+    resolution: {integrity: sha512-VteoifAfpt46z0yEt6Fc73A5OID9t/y2QIeR5MgxEwTuitadEunD/V0c9jQW8ziT8pbFM54uTzRLJ/nLuQjMxg==}
+    dependencies:
+      prosemirror-model: 1.19.0
+    dev: false
+
+  /prosemirror-view/1.30.1:
+    resolution: {integrity: sha512-pZUfr7lICJkEY7XwzldAKrkflZDeIvnbfuu2RIS01N5NwJmR/dfZzDzJRzhb3SM2QtT/bM8b4Nnib8X3MGpAhA==}
+    dependencies:
+      prosemirror-model: 1.19.0
+      prosemirror-state: 1.4.2
+      prosemirror-transform: 1.7.1
+    dev: false
+
   /proxy-addr/2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -12916,6 +13773,11 @@ packages:
       ipaddr.js: 1.9.1
     dev: false
 
+  /prr/1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+    dev: false
+    optional: true
+
   /pseudolocale/1.2.0:
     resolution: {integrity: sha512-k0OQFvIlvpRdzR0dPVrrbWX7eE9EaZ6gpZtTlFSDi1Gf9tMy9wiANCNu7JZ0drcKgUri/39a2mBbH0goiQmrmQ==}
     dependencies:
@@ -12925,6 +13787,10 @@ packages:
   /psl/1.9.0:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
 
+  /pstree.remy/1.1.8:
+    resolution: {integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==}
+    dev: true
+
   /pump/3.0.0:
     resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
     dependencies:
@@ -13691,6 +14557,10 @@ packages:
       fsevents: 2.3.2
     dev: false
 
+  /rope-sequence/1.3.3:
+    resolution: {integrity: sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q==}
+    dev: false
+
   /run-async/2.4.1:
     resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
     engines: {node: '>=0.12.0'}
@@ -13845,6 +14715,11 @@ packages:
       semver: 6.3.0
     dev: true
 
+  /semver/5.7.1:
+    resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
+    hasBin: true
+    dev: true
+
   /semver/6.1.1:
     resolution: {integrity: sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ==}
     hasBin: true
@@ -13854,6 +14729,11 @@ packages:
     resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
     hasBin: true
 
+  /semver/7.0.0:
+    resolution: {integrity: sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==}
+    hasBin: true
+    dev: true
+
   /semver/7.3.8:
     resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
     engines: {node: '>=10'}
@@ -13961,6 +14841,13 @@ packages:
   /signal-exit/3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
+  /simple-update-notifier/1.1.0:
+    resolution: {integrity: sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      semver: 7.0.0
+    dev: true
+
   /sisteransi/1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -14577,6 +15464,11 @@ packages:
     resolution: {integrity: sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==}
     dev: false
 
+  /throttle-debounce/3.0.1:
+    resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==}
+    engines: {node: '>=10'}
+    dev: false
+
   /through/2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
     dev: true
@@ -14630,6 +15522,13 @@ packages:
     engines: {node: '>=0.6'}
     dev: false
 
+  /touch/3.1.0:
+    resolution: {integrity: sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==}
+    hasBin: true
+    dependencies:
+      nopt: 1.0.10
+    dev: true
+
   /tough-cookie/4.1.2:
     resolution: {integrity: sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==}
     engines: {node: '>=6'}
@@ -14842,6 +15741,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /type-fest/2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+    dev: false
+
   /type-is/1.6.18:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
@@ -14874,6 +15778,10 @@ packages:
     engines: {node: '>=4.2.0'}
     hasBin: true
 
+  /uc.micro/1.0.6:
+    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
+    dev: false
+
   /unbox-primitive/1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
     dependencies:
@@ -14882,6 +15790,10 @@ packages:
       has-symbols: 1.0.3
       which-boxed-primitive: 1.0.2
 
+  /undefsafe/2.0.5:
+    resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==}
+    dev: true
+
   /unfetch/4.2.0:
     resolution: {integrity: sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==}
     dev: false
@@ -15091,6 +16003,11 @@ packages:
     hasBin: true
     dev: false
 
+  /uuid/9.0.0:
+    resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==}
+    hasBin: true
+    dev: false
+
   /v8-compile-cache-lib/3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
@@ -15149,6 +16066,10 @@ packages:
       browser-process-hrtime: 1.0.0
     dev: false
 
+  /w3c-keyname/2.2.6:
+    resolution: {integrity: sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==}
+    dev: false
+
   /w3c-xmlserializer/2.0.0:
     resolution: {integrity: sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==}
     engines: {node: '>=10'}
@@ -15683,6 +16604,22 @@ packages:
       signal-exit: 3.0.7
     dev: true
 
+  /ws/6.2.2:
+    resolution: {integrity: sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==}
+    requiresBuild: true
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dependencies:
+      async-limiter: 1.0.1
+    dev: false
+    optional: true
+
   /ws/7.5.9:
     resolution: {integrity: sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==}
     engines: {node: '>=8.3.0'}
@@ -15729,6 +16666,71 @@ packages:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
+  /y-leveldb/0.1.2_yjs@13.5.47:
+    resolution: {integrity: sha512-6ulEn5AXfXJYi89rXPEg2mMHAyyw8+ZfeMMdOtBbV8FJpQ1NOrcgi6DTAcXof0dap84NjHPT2+9d0rb6cFsjEg==}
+    requiresBuild: true
+    peerDependencies:
+      yjs: ^13.0.0
+    dependencies:
+      level: 6.0.1
+      lib0: 0.2.63
+      yjs: 13.5.47
+    dev: false
+    optional: true
+
+  /y-monaco/0.1.4_xkgk6mmjz52pc4du3xhfls7v24:
+    resolution: {integrity: sha512-RzAvjKJ2yt3VjlKK55U8STJyd1gz5/Qm6pjt7SAVb+k+g+KaSeTuSBGt+lURN+dzzSNs73ZkIAerW3JM0mzBSw==}
+    peerDependencies:
+      monaco-editor: '>=0.20.0'
+      yjs: ^13.3.1
+    dependencies:
+      lib0: 0.2.63
+      monaco-editor: 0.34.0
+      yjs: 13.5.47
+    dev: false
+
+  /y-prosemirror/1.2.0_xwmuevzqivw72i4iapvufwfbeu:
+    resolution: {integrity: sha512-t3uxuX4HIkb1GNt8jV+dplRbNH2OmQD/BNeCCbjLD3Mq0o6JEXxHedv58ZIPFDE6ma24jljlL+u8pGvN6B37XQ==}
+    peerDependencies:
+      prosemirror-model: ^1.7.1
+      prosemirror-state: ^1.2.3
+      prosemirror-view: ^1.9.10
+      y-protocols: ^1.0.1
+      yjs: ^13.5.38
+    dependencies:
+      lib0: 0.2.63
+      prosemirror-model: 1.19.0
+      prosemirror-state: 1.4.2
+      prosemirror-view: 1.30.1
+      typescript: 4.8.4
+      y-protocols: 1.0.5
+      yjs: 13.5.47
+    dev: false
+
+  /y-protocols/1.0.5:
+    resolution: {integrity: sha512-Wil92b7cGk712lRHDqS4T90IczF6RkcvCwAD0A2OPg+adKmOe+nOiT/N2hvpQIWS3zfjmtL4CPaH5sIW1Hkm/A==}
+    dependencies:
+      lib0: 0.2.63
+    dev: false
+
+  /y-websocket/1.4.5_yjs@13.5.47:
+    resolution: {integrity: sha512-5d9LTSy0GQKqSd/FKRo5DMBlsiTlCipbKcIgPLlno+5xHtfT8bm3uQdcbY9JvLfckojilLZWauXJu0vzDZX05w==}
+    hasBin: true
+    peerDependencies:
+      yjs: ^13.5.6
+    dependencies:
+      lib0: 0.2.63
+      lodash.debounce: 4.0.8
+      y-protocols: 1.0.5
+      yjs: 13.5.47
+    optionalDependencies:
+      ws: 6.2.2
+      y-leveldb: 0.1.2_yjs@13.5.47
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: false
+
   /y18n/5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -15784,6 +16786,12 @@ packages:
       yargs-parser: 21.1.1
     dev: true
 
+  /yjs/13.5.47:
+    resolution: {integrity: sha512-F7BZ+Bt36OAt+bdSQS7TN43KSxsHjfXWfcLC526tJ3mctO1FYHGEtOrUqpLC7pSp4jPn4rKSYHv1PVQcdb/vIQ==}
+    dependencies:
+      lib0: 0.2.63
+    dev: false
+
   /yn/3.1.1:
     resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
     engines: {node: '>=6'}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 36094802c..bae731029 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,6 +1,7 @@
 packages:
   - "app"
   - "api"
+  - "wss"
   # all packages in direct subdirs of packages/
   # - "packages/*"
   # exclude packages that are inside test directories
diff --git a/wss/README.md b/wss/README.md
new file mode 100644
index 000000000..37a1a0a85
--- /dev/null
+++ b/wss/README.md
@@ -0,0 +1,5 @@
+# Web Socket Server
+
+This is the server which enables real-time collaboration between users. It is built using [Yjs](http://yjs.dev/).
+
+## Deployment
diff --git a/wss/jsconfig.json b/wss/jsconfig.json
new file mode 100644
index 000000000..08ac60b6c
--- /dev/null
+++ b/wss/jsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "checkJs": true
+  }
+}
diff --git a/wss/package.json b/wss/package.json
new file mode 100644
index 000000000..fcb72b8b2
--- /dev/null
+++ b/wss/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "wss",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.mjs",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "nodemon src/server.mjs",
+    "start": "node src/server.mjs"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@hocuspocus/extension-database": "^1.1.0",
+    "@hocuspocus/server": "^1.1.0",
+    "@hocuspocus/transformer": "^1.1.0",
+    "@supabase/supabase-js": "^2.8.0",
+    "deepmerge": "^4.2.2",
+    "gray-matter": "^4.0.2",
+    "js-base64": "^3.7.5",
+    "yjs": "^13.5.47"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.20"
+  }
+}
diff --git a/wss/src/server.mjs b/wss/src/server.mjs
new file mode 100644
index 000000000..fb42a1f51
--- /dev/null
+++ b/wss/src/server.mjs
@@ -0,0 +1,233 @@
+import { Hocuspocus } from "@hocuspocus/server";
+import { supabase } from "./supabase.mjs";
+import { Database } from "@hocuspocus/extension-database";
+import * as Y from "yjs";
+import merge from "deepmerge";
+import matter from "gray-matter";
+
+let port = 1234;
+if (process.env.RAILWAY_ENVIRONMENT) {
+  port = parseInt(process.env.PORT);
+}
+
+// Configure the server …
+const server = new Hocuspocus({
+  port,
+  extensions: [
+    new Database({
+      fetch: async ({ documentName }) => {
+        // create ydoc
+        const ydoc = new Y.Doc();
+
+        try {
+          const [docType, id] = documentName.split("_");
+
+          if (!id) throw new Error("Invalid Chart ID");
+
+          console.log("fetching document: ", id);
+          // check to see if this is in storage
+          const result = await supabase.storage
+            .from("documents")
+            .download(id + `?updated`);
+          if (result.data) {
+            // return result.data;
+            // this is the ydoc, return it
+            console.log("found in storage");
+            console.log(typeof result.data);
+            const arrayBuffer = await result.data.arrayBuffer();
+            const buffer = Buffer.from(arrayBuffer);
+            console.log("Return original");
+            return buffer;
+            // return result.data;
+            // return result.data.arrayBuffer();
+          } else {
+            console.log(result);
+            // need to create a ydoc and store in storage
+            // then return it
+            // create ytext
+            const ytext = ydoc.getText("text");
+
+            // meta
+            const ymeta = ydoc.getMap("meta");
+
+            const { data, error } = await supabase
+              .from("user_charts")
+              .select("id,name,chart,updated_at,created_at,public_id,is_public")
+              .eq("id", id);
+
+            if (error) throw error;
+            if (!data || data.length === 0) throw new Error("Invalid Chart ID");
+            if (data.length > 1) throw new Error("Multiple Charts Found");
+            /** @type {string} */
+            const flowchart = data[0].chart;
+            const { text, meta } = prepareChart(flowchart);
+
+            ydoc.transact(() => {
+              // initialize ytext with the flowchart
+              ytext.delete(0, ytext.length);
+              ytext.insert(0, text);
+              // initialize meta
+              Object.keys(meta).forEach((key) => {
+                ymeta.set(key, meta[key]);
+              });
+              // delete any keys that are no longer in the meta
+              ymeta.forEach((value, key) => {
+                if (!meta[key]) {
+                  ymeta.delete(key);
+                }
+              });
+            });
+
+            // store the ydoc in storage
+            const ydocState = Y.encodeStateAsUpdate(ydoc);
+            const { error: storageError } = await supabase.storage
+              .from("documents")
+              .upload(id + `?updated`, ydocState, {
+                upsert: true,
+                cacheControl: "0",
+              });
+            if (storageError) throw storageError;
+          }
+        } catch (e) {
+          console.log(e);
+        }
+
+        return Y.encodeStateAsUpdate(ydoc);
+      },
+      store: async ({ documentName, state }) => {
+        const [_docType, id] = documentName.split("_");
+
+        // store the ydoc in storage
+        const updatedAt = new Date().toISOString();
+        const { error, data } = await supabase.storage
+          .from("documents")
+          .upload(id + `?updated`, state, {
+            upsert: true,
+            cacheControl: "0",
+          });
+        console.log("stored successfully");
+        console.log(data);
+        if (error) {
+          console.log(error);
+          throw error;
+        }
+
+        // // get "text" string from state buffer
+        // const ydoc = new Y.Doc();
+        // Y.applyUpdate(ydoc, state);
+        // const ytext = ydoc.getText("text");
+        // const text = ytext.toString();
+
+        // // get meta
+        // const ymeta = ydoc.getMap("meta");
+        // /**
+        //  * @type {object}
+        //  * */
+        // const meta = {};
+        // ymeta.forEach((value, key) => {
+        //   meta[key] = value;
+        // });
+
+        // const chart = docToString({ text, meta });
+        // const { error } = await supabase
+        //   .from("user_charts")
+        //   .update({ chart })
+        //   .eq("id", id);
+        // if (error) throw error;
+        // return true;
+      },
+    }),
+  ],
+  async onConnect(data) {
+    console.log(`Client connected to ${data.documentName}`);
+  },
+  async onDisconnect(data) {
+    // check how many people are still connected
+    const count = data.clientsCount;
+    console.log(`Client disconnected. ${count} clients remaining.`);
+  },
+});
+
+// … and run it!
+server.listen(async () => {
+  console.log(`Server running on port ${port}`);
+});
+
+/**
+ *
+ * @param {string} doc
+ * @returns
+ */
+const newDelimiters = "=====";
+export function prepareChart(doc) {
+  const delimiters = "~~~";
+  const HIDDEN_GRAPH_OPTIONS_DIVIDER = "¼▓╬";
+  let text = doc;
+
+  let jsonMeta = {};
+  // if the doc includes the new delimiters we can skip the migration step
+  if (text.includes(newDelimiters)) {
+    const parts = text.split(newDelimiters);
+    text = parts[0];
+    const metaStr = parts[1] || "{}";
+    try {
+      jsonMeta = JSON.parse(metaStr.trim());
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  let hidden = {};
+  if (text.includes(HIDDEN_GRAPH_OPTIONS_DIVIDER)) {
+    const parts = text.split(HIDDEN_GRAPH_OPTIONS_DIVIDER);
+    text = parts[0];
+    const hiddenStr = parts[1] || "{}";
+    try {
+      hidden = JSON.parse(hiddenStr.trim());
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  let parsedData = {};
+  if (text.includes(delimiters)) {
+    const parsed = matter(text, { delimiters });
+    text = parsed.content;
+    parsedData = parsed.data;
+  }
+
+  /**
+   * @type {object}
+   */
+  const meta = merge.all([jsonMeta, parsedData, hidden]);
+
+  // Because the new getDefaultChart() will return with graph-selector in the meta
+  // and people have had to intentionally switch to graph selector thus far
+  // if we get to this point and DON'T have a parser in the meta, we can assume
+  // that it's the v1 parser, and we'll add it to keep compatibility
+  if (!meta.parser) {
+    meta.parser = "v1";
+  }
+
+  text = `${text.trim()}\n`;
+
+  return {
+    text,
+    meta,
+  };
+}
+
+/**
+ *
+ * @param {{text: string; meta: object}} doc
+ * @returns
+ */
+function docToString(doc) {
+  const { text, meta } = doc;
+  return [
+    text,
+    newDelimiters,
+    JSON.stringify(meta, null, 2),
+    newDelimiters,
+  ].join("\n");
+}
diff --git a/wss/src/supabase.mjs b/wss/src/supabase.mjs
new file mode 100644
index 000000000..f4066244c
--- /dev/null
+++ b/wss/src/supabase.mjs
@@ -0,0 +1,8 @@
+import { createClient } from "@supabase/supabase-js";
+
+const url = process.env.REACT_APP_SUPABASE_URL;
+const secret = process.env.DB_SECRET;
+
+if (!url || !secret) throw new Error("No Supabase URL or secret provided");
+
+export const supabase = createClient(url, secret);