From e33f0943bf0552e2bf5ecf6ed6635578acef7b29 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Sun, 26 Feb 2023 18:01:50 -0500
Subject: [PATCH 01/19] fix: move doc details into own store

---
 app/package.json                         |   9 +-
 app/src/components/ShareDialog.tsx       |  42 ++-
 app/src/components/TextEditor.tsx        |   9 +
 app/src/lib/prepareChart/prepareChart.ts |   6 +-
 app/src/lib/useDoc.ts                    |  27 +-
 pnpm-lock.yaml                           | 452 ++++++++++++++++++++++-
 6 files changed, 524 insertions(+), 21 deletions(-)

diff --git a/app/package.json b/app/package.json
index 9f25eb1f..3d5fceda 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": {
diff --git a/app/src/components/ShareDialog.tsx b/app/src/components/ShareDialog.tsx
index 23f3c016..487a9c1a 100644
--- a/app/src/components/ShareDialog.tsx
+++ b/app/src/components/ShareDialog.tsx
@@ -13,6 +13,7 @@ import {
 } from "react";
 import { useMutation } from "react-query";
 
+import { useChartId } from "../lib/hooks";
 import {
   track_copyEditableShareLink,
   track_copyFullscreenShareLink,
@@ -24,7 +25,13 @@ import {
 } from "../lib/logsnag";
 import { toMermaidJS } from "../lib/mermaid";
 import { makeChartPublic } from "../lib/queries";
-import { docToString, useDoc, useDocDetails } from "../lib/useDoc";
+import { supabase } from "../lib/supabaseClient";
+import {
+  docToString,
+  useDoc,
+  useDocDetails,
+  useDocDetailsStore,
+} from "../lib/useDoc";
 import { useGraphStore } from "../lib/useGraphStore";
 import { Box, Type } from "../slang";
 import { AppContext } from "./AppContext";
@@ -43,6 +50,7 @@ export default function ShareDialog() {
   const fullscreen = `${new URL(window.location.href).origin}/f#${shareLink}`;
   const readOnly = `${new URL(window.location.href).origin}/c#${shareLink}`;
   const editable = `${new URL(window.location.href).origin}/n#${shareLink}`;
+  const chartId = useChartId();
 
   return (
     <Dialog
@@ -112,6 +120,32 @@ export default function ShareDialog() {
         </Title>
         <Mermaid />
       </Column>
+      {isHosted ? (
+        <Column>
+          <Title>Share TODO</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 = "rchristopher.gordon@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>
   );
 }
@@ -297,11 +331,11 @@ function HostedOptions() {
     {
       onSuccess: (result) => {
         if (!result) return;
-        useDoc.setState(
+        useDocDetailsStore.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/TextEditor.tsx b/app/src/components/TextEditor.tsx
index b992e7a2..0da54869 100644
--- a/app/src/components/TextEditor.tsx
+++ b/app/src/components/TextEditor.tsx
@@ -79,6 +79,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}
diff --git a/app/src/lib/prepareChart/prepareChart.ts b/app/src/lib/prepareChart/prepareChart.ts
index 5a9e5638..6e0fd64d 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 { Details, useDoc, useDocDetailsStore } from "../useDoc";
 
 /**
  * ### Goals
@@ -71,7 +71,9 @@ export function prepareChart(doc: string, details: Details) {
 
   text = `${text.trim()}\n`;
 
-  useDoc.setState({ text, meta, details }, false, "prepareChart");
+  useDoc.setState({ text, meta }, false, "prepareChart");
+  // set the useDocDetailsStore too
+  useDocDetailsStore.setState(details, false, "prepareChart");
 
   return {
     text,
diff --git a/app/src/lib/useDoc.ts b/app/src/lib/useDoc.ts
index 020d0f8c..27965d9f 100644
--- a/app/src/lib/useDoc.ts
+++ b/app/src/lib/useDoc.ts
@@ -15,6 +15,7 @@ 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 +32,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,6 +55,7 @@ export const useDoc = create(
   )
 );
 
+/** Turns doc into the string we store in the database */
 export function docToString(doc: Doc) {
   const { text, meta } = doc;
   return [
@@ -71,6 +73,15 @@ export const useParseError = create<{ error: string; errorFromStyle: string }>(
   })
 );
 
+/**
+ * Custom useDocDetails store
+ */
+export const useDocDetailsStore = create<Details>()(
+  devtools(() => initialDetails, {
+    name: "useDocDetailsStore",
+  })
+);
+
 /**
  * Get a type-safe version of any property
  * of the doc details
@@ -79,5 +90,5 @@ export function useDocDetails<K extends keyof Details>(
   prop: K,
   fallback?: Details[K]
 ) {
-  return useDoc((state) => state.details[prop] || fallback) as Details[K];
+  return useDocDetailsStore((state) => state[prop] || fallback) as Details[K];
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c92027fe..a9f9a688 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,15 @@ importers:
       typescript: 4.8.4
       web-worker: 1.2.0
 
+  wss:
+    specifiers:
+      '@hocuspocus/server': ^1.1.0
+      nodemon: ^2.0.20
+    dependencies:
+      '@hocuspocus/server': 1.1.0_bjezgfodkvttvr5cbwk4e3pgwe
+    devDependencies:
+      nodemon: 2.0.20
+
 packages:
 
   /@adobe/css-tools/4.0.1:
@@ -1979,6 +1998,34 @@ 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/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
+
   /@humanwhocodes/config-array/0.10.7:
     resolution: {integrity: sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==}
     engines: {node: '>=10.10.0'}
@@ -4149,6 +4196,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 +4212,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 +4229,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 +4246,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 +4268,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:
@@ -4739,6 +4833,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:
@@ -5145,6 +5243,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 +5670,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 +6015,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 +6469,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==}
@@ -7230,6 +7364,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 +7429,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 +7752,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:
@@ -7619,6 +7785,14 @@ packages:
     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 +9479,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
@@ -9680,6 +9863,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'}
@@ -10907,6 +11094,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 +11123,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 +11233,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'}
@@ -11125,6 +11416,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
@@ -11415,6 +11711,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 +11761,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 +11784,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'}
@@ -12916,6 +13247,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 +13261,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:
@@ -13845,6 +14185,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 +14199,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 +14311,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==}
 
@@ -14630,6 +14987,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'}
@@ -14882,6 +15246,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 +15459,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==}
 
@@ -15683,6 +16056,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 +16118,53 @@ 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-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 +16220,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'}

From b4a340774264886df9f1ec9055a5a5a828545b3c Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Mon, 27 Feb 2023 12:18:21 -0500
Subject: [PATCH 02/19] feat(wss): basic websocket server working

---
 api/share.ts                              |  33 ++
 app/src/components/CloneButton.tsx        |   5 +-
 app/src/components/EditorError.tsx        |   2 +-
 app/src/components/EditorOptions.tsx      |  15 +-
 app/src/components/EditorWrapper.tsx      |   4 +-
 app/src/components/Graph.tsx              |  35 +-
 app/src/components/GraphContextMenu.tsx   |  36 +-
 app/src/components/RenameButton.tsx       |  12 +-
 app/src/components/ShareDialog.tsx        |  22 +-
 app/src/components/Tabs/EditLayoutTab.tsx |  77 +--
 app/src/components/Tabs/EditMetaTab.tsx   |   6 +-
 app/src/components/Tabs/EditStyleTab.tsx  |  41 +-
 app/src/components/TextEditor.tsx         |  15 +-
 app/src/lib/docHelpers.ts                 |  76 +++
 app/src/lib/docToString.ts                |  14 +
 app/src/lib/getTheme.ts                   |   4 +-
 app/src/lib/graphThemes.tsx               |   6 +-
 app/src/lib/parsers.ts                    |   4 +-
 app/src/lib/prepareChart/prepareChart.ts  |   8 +-
 app/src/lib/realtime.ts                   |  87 ++++
 app/src/lib/useDetails.ts                 |  13 +
 app/src/lib/useDoc.ts                     |  35 +-
 app/src/lib/useIsFrozen.ts                |  18 +-
 app/src/lib/useParseError.ts              |   8 +
 app/src/pages/Edit.tsx                    |  12 +-
 app/src/pages/EditHosted.tsx              |  31 +-
 app/src/pages/ReadOnly.tsx                |   4 +-
 pnpm-lock.yaml                            | 566 ++++++++++++++++++++++
 pnpm-workspace.yaml                       |   1 +
 wss/jsconfig.json                         |   5 +
 wss/package.json                          |  26 +
 wss/src/index.mjs                         | 192 ++++++++
 wss/src/supabase.mjs                      |   8 +
 33 files changed, 1182 insertions(+), 239 deletions(-)
 create mode 100644 api/share.ts
 create mode 100644 app/src/lib/docHelpers.ts
 create mode 100644 app/src/lib/docToString.ts
 create mode 100644 app/src/lib/realtime.ts
 create mode 100644 app/src/lib/useDetails.ts
 create mode 100644 app/src/lib/useParseError.ts
 create mode 100644 wss/jsconfig.json
 create mode 100644 wss/package.json
 create mode 100644 wss/src/index.mjs
 create mode 100644 wss/src/supabase.mjs

diff --git a/api/share.ts b/api/share.ts
new file mode 100644
index 00000000..936144ed
--- /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/src/components/CloneButton.tsx b/app/src/components/CloneButton.tsx
index 497ac8de..3b0ca84e 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 925de36f..b5ea0f0d 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 8b031b46..a0608082 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 { setDocImmer } 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"
-              );
+              setDocImmer((draft) => {
+                draft.meta.parser = e.target.value;
+              }, "syntax");
             }}
           >
             {parsers.map((p) => (
diff --git a/app/src/components/EditorWrapper.tsx b/app/src/components/EditorWrapper.tsx
index 6df65aeb..85c2babe 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 2b1382d5..4676feee 100644
--- a/app/src/components/Graph.tsx
+++ b/app/src/components/Graph.tsx
@@ -18,6 +18,7 @@ import { useDebouncedCallback } from "use-debounce";
 
 import { buildStylesForGraph } from "../lib/buildStylesForGraph";
 import { cytoscape } from "../lib/cytoscape";
+import { getDoc, setDoc, subscribeToDoc } from "../lib/docHelpers";
 import { getGetSize, TGetSize } from "../lib/getGetSize";
 import { getLayout } from "../lib/getLayout";
 import { getUserStyle } from "../lib/getTheme";
@@ -33,9 +34,10 @@ import { Parsers, universalParse, useParser } from "../lib/parsers";
 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 } 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";
@@ -71,19 +73,15 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
   const parser = useParser();
   const handleDragFree = useCallback(() => {
     const nodePositions = getNodePositionsFromCy();
-    useDoc.setState(
-      (state) => {
-        return {
-          ...state,
-          meta: {
-            ...state.meta,
-            nodePositions,
-          },
-        };
-      },
-      false,
-      "Graph/handleDragFree"
-    );
+    setDoc((state) => {
+      return {
+        ...state,
+        meta: {
+          ...state.meta,
+          nodePositions,
+        },
+      };
+    }, "Graph/handleDragFree");
   }, []);
 
   const handleResize = useCallback(() => {
@@ -135,10 +133,7 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
 
   useEffect(() => {
     throttleUpdate();
-    const unsubscribe = useDoc.subscribe((doc) => {
-      throttleUpdate(doc);
-    });
-    return unsubscribe;
+    return subscribeToDoc(throttleUpdate);
   }, [throttleUpdate]);
 
   // Update Graph when Sponsor Layouts Load
@@ -180,7 +175,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 +267,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 {
diff --git a/app/src/components/GraphContextMenu.tsx b/app/src/components/GraphContextMenu.tsx
index aa61b336..bc75b405 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, setDoc } 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 = getDoc().text;
                 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");
+                setDoc({ text: newText }, "NodeSubmenu/color");
               }}
             >
               <Box
@@ -243,7 +243,7 @@ function NodeSubmenu() {
           <Item
             key="remove-all"
             onClick={() => {
-              let newText = useDoc.getState().text;
+              let newText = getDoc().text;
               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"
-              );
+              setDoc({ text: 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 = getDoc().text;
                 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");
+                setDoc({ text: newText }, "NodeSubmenu/shape");
               }}
             >
               <Box
@@ -310,7 +306,7 @@ function NodeSubmenu() {
           <Item
             key="remove-all"
             onClick={() => {
-              let newText = useDoc.getState().text;
+              let newText = getDoc().text;
               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"
-              );
+              setDoc({ text: 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 = getDoc().text;
                 for (const selection of activeSelection) {
                   if (!selection) continue;
                   newText = operate(newText, {
@@ -369,7 +361,7 @@ function NodeSubmenu() {
                       ],
                     });
                 }
-                useDoc.setState({ text: newText }, false, "NodeSubmenu/size");
+                setDoc({ text: 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 = getDoc().text;
                 for (const selection of activeSelection) {
                   if (!selection) continue;
                   newText = operate(newText, {
@@ -407,7 +399,7 @@ function NodeSubmenu() {
                       ],
                     });
                 }
-                useDoc.setState({ text: newText }, false, "NodeSubmenu/border");
+                setDoc({ text: newText }, "NodeSubmenu/border");
               }}
             >
               <span
diff --git a/app/src/components/RenameButton.tsx b/app/src/components/RenameButton.tsx
index 31bdcc5a..59bb5f86 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/ShareDialog.tsx b/app/src/components/ShareDialog.tsx
index 487a9c1a..88e3ba9f 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 { useChartId } from "../lib/hooks";
 import {
   track_copyEditableShareLink,
@@ -26,12 +28,8 @@ import {
 import { toMermaidJS } from "../lib/mermaid";
 import { makeChartPublic } from "../lib/queries";
 import { supabase } from "../lib/supabaseClient";
-import {
-  docToString,
-  useDoc,
-  useDocDetails,
-  useDocDetailsStore,
-} 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";
@@ -40,10 +38,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]);
@@ -319,11 +317,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",
@@ -331,7 +329,7 @@ function HostedOptions() {
     {
       onSuccess: (result) => {
         if (!result) return;
-        useDocDetailsStore.setState(
+        useDetailsStore.setState(
           (state) => {
             return produce(state, (draft) => {
               draft.isPublic = result.isPublic;
diff --git a/app/src/components/Tabs/EditLayoutTab.tsx b/app/src/components/Tabs/EditLayoutTab.tsx
index 28b24d10..6ad42e0d 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 { getDoc, setDocImmer } 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 = getDoc();
   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"
-              );
+              setDocImmer((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;
+              }, "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"
-                );
+                setDocImmer((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;
+                }, "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
+                  setDocImmer((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 = parseFloat(
-                          e.target.value
-                        );
-                      });
-                    },
-                    false,
-                    "EditLayoutTab/spacing-number"
-                  );
+                    (draft.meta.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"
-                  );
+                  setDocImmer((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;
+                  }, "EditLayoutTab/spacing");
                 }}
               />
             </div>
diff --git a/app/src/components/Tabs/EditMetaTab.tsx b/app/src/components/Tabs/EditMetaTab.tsx
index 85bc1b57..452a7dde 100644
--- a/app/src/components/Tabs/EditMetaTab.tsx
+++ b/app/src/components/Tabs/EditMetaTab.tsx
@@ -3,12 +3,12 @@ import Editor from "@monaco-editor/react";
 import { useEffect, useState } from "react";
 
 import { editorOptions } from "../../lib/constants";
+import { getDoc, setDoc } 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 = getDoc().meta;
   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);
@@ -62,7 +62,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 dc6812cb..558866a4 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 { getDoc, setDocImmer } 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 = getDoc().meta;
   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"
-              );
+              setDocImmer((draft) => {
+                draft.meta.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"
-                  );
+                  setDocImmer((draft) => {
+                    delete draft.meta?.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"
-    );
+    setDocImmer((draft) => {
+      draft.meta.background = bg;
+    }, "EditStyleTab/bg");
   },
   75,
   {
diff --git a/app/src/components/TextEditor.tsx b/app/src/components/TextEditor.tsx
index 0da54869..a7c5871c 100644
--- a/app/src/components/TextEditor.tsx
+++ b/app/src/components/TextEditor.tsx
@@ -6,6 +6,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { editorOptions } from "../lib/constants";
 import { useEditorHover } from "../lib/editorHooks";
 import { useParser } from "../lib/parsers";
+import { initRealtime } from "../lib/realtime";
 import {
   languageId,
   registerLanguages,
@@ -20,12 +21,14 @@ 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();
@@ -81,12 +84,12 @@ export function TextEditor({
 
   // TODO: Remove this
   // Bind to realtime updates
-  // useEffect(() => {
-  //   if (!bindToRealtime) return;
-  //   if (!editorIsReady) return;
-  //   if (!editorRef.current) return;
-  //   initRealtime(editorRef.current);
-  // }, [bindToRealtime, editorIsReady, editorRef]);
+  useEffect(() => {
+    if (!bindToRealtime) return;
+    if (!editorIsReady) return;
+    if (!editorRef.current) return;
+    initRealtime(editorRef.current);
+  }, [bindToRealtime, editorIsReady, editorRef]);
 
   return (
     <Editor
diff --git a/app/src/lib/docHelpers.ts b/app/src/lib/docHelpers.ts
new file mode 100644
index 00000000..03c73057
--- /dev/null
+++ b/app/src/lib/docHelpers.ts
@@ -0,0 +1,76 @@
+/**
+ * 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 { Doc, useDetailsStore, useDoc } from "./useDoc";
+
+/**
+ * Full or partial doc mutation using spread operator
+ */
+export function setDoc(
+  doc: Partial<Doc> | ((doc: Doc) => Partial<Doc>),
+  description: string
+) {
+  const isHosted = useDetailsStore.getState().isHosted;
+  // mutate the doc
+  if (isHosted) {
+    // mutate the yjs document
+    console.debug("mutating yjs document", doc, description);
+  } else {
+    // mutate the zustand store
+    useDoc.setState(
+      typeof doc === "function"
+        ? doc
+        : (cur) => ({
+            ...cur,
+            ...doc,
+          }),
+      false,
+      description
+    );
+  }
+}
+
+type SetDocImmerCallback = (draft: WritableDraft<Doc>) => void;
+
+export function setDocImmer(cb: SetDocImmerCallback, description: string) {
+  const isHosted = useDetailsStore.getState().isHosted;
+  // mutate the doc
+  if (isHosted) {
+    // mutate the yjs document
+    console.debug("mutating yjs document", description);
+  } else {
+    // mutate the zustand store
+    useDoc.setState((cur) => produce(cur, cb), false, description);
+  }
+}
+
+export function subscribeToDoc(cb: (doc: Doc) => void) {
+  const isHosted = useDetailsStore.getState().isHosted;
+  if (isHosted) {
+    // subscribe to yjs document
+    console.debug("subscribing to yjs document");
+    return () => console.debug("unsubscribing from yjs document");
+  } else {
+    // subscribe to zustand store
+    return useDoc.subscribe(cb);
+  }
+}
+
+export function getDoc(): Doc {
+  const isHosted = useDetailsStore.getState().isHosted;
+  if (isHosted) {
+    // get the yjs document
+    console.debug("getting yjs document");
+    return {} as Doc;
+  } else {
+    // get the zustand store
+    return useDoc.getState();
+  }
+}
diff --git a/app/src/lib/docToString.ts b/app/src/lib/docToString.ts
new file mode 100644
index 00000000..5e65e70f
--- /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/getTheme.ts b/app/src/lib/getTheme.ts
index ab6f4b30..781c3022 100644
--- a/app/src/lib/getTheme.ts
+++ b/app/src/lib/getTheme.ts
@@ -1,12 +1,12 @@
 import { StylesheetStyle } from "cytoscape";
 
-import { useDoc } from "./useDoc";
+import { getDoc } 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);
diff --git a/app/src/lib/graphThemes.tsx b/app/src/lib/graphThemes.tsx
index 38cdf10f..6114ebc0 100644
--- a/app/src/lib/graphThemes.tsx
+++ b/app/src/lib/graphThemes.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from "react-query";
 
+import { getDoc } 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 = getDoc().meta?.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 = getDoc().meta?.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 8fb42a48..57979b7c 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 { getDoc } 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 = getDoc().meta;
   const parser = meta?.parser as Parsers;
   return parser || DEFAULT_PARSER;
 }
diff --git a/app/src/lib/prepareChart/prepareChart.ts b/app/src/lib/prepareChart/prepareChart.ts
index 6e0fd64d..e6787acf 100644
--- a/app/src/lib/prepareChart/prepareChart.ts
+++ b/app/src/lib/prepareChart/prepareChart.ts
@@ -6,7 +6,8 @@ import {
   HIDDEN_GRAPH_OPTIONS_DIVIDER,
   newDelimiters,
 } from "../constants";
-import { Details, useDoc, useDocDetailsStore } from "../useDoc";
+import { setDoc } from "../docHelpers";
+import { Details, useDetailsStore } from "../useDoc";
 
 /**
  * ### Goals
@@ -71,13 +72,12 @@ export function prepareChart(doc: string, details: Details) {
 
   text = `${text.trim()}\n`;
 
-  useDoc.setState({ text, meta }, false, "prepareChart");
+  setDoc({ text, meta }, "prepareChart");
   // set the useDocDetailsStore too
-  useDocDetailsStore.setState(details, false, "prepareChart");
+  useDetailsStore.setState(details, false, "prepareChart");
 
   return {
     text,
     meta,
-    details,
   };
 }
diff --git a/app/src/lib/realtime.ts b/app/src/lib/realtime.ts
new file mode 100644
index 00000000..32a5aae0
--- /dev/null
+++ b/app/src/lib/realtime.ts
@@ -0,0 +1,87 @@
+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];
+
+export const useYDoc = create<{
+  ydoc?: Y.Doc;
+  provider?: WebsocketProvider;
+}>()(
+  devtools(() => ({}), {
+    name: "useYDoc",
+  })
+);
+
+// Create a Yjs document
+export function setupYDoc(type: "hosted", id: string) {
+  const ydoc = new Y.Doc();
+
+  // Create a provider
+  const provider = new WebsocketProvider(
+    "ws://localhost:1234",
+    `${type}-${id}`,
+    ydoc
+  );
+
+  // set references in store
+  useYDoc.setState({ ydoc, provider });
+}
+
+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");
+    // Define a shared map type
+    // const ymeta = ydoc.getText("meta");
+
+    // Initialize the text if it doesn't match the current text
+    // if (ytext.toString() !== text) ytext.insert(0, text);
+    // if (ymap.toString() !== JSON.stringify(meta))
+    //   ymap.insert(0, JSON.stringify(meta));
+
+    const model = editor.getModel();
+    if (!model) throw new Error("Model not found");
+
+    new MonacoBinding(ytext, model, new Set([editor]), provider.awareness);
+
+    // subscribe to doc meta changes and update state
+    // useDoc.subscribe(
+    //   (doc) => doc.meta,
+    //   (meta) => {
+    //     ymeta.delete(0, ymeta.length);
+    //     ymeta.insert(0, JSON.stringify(meta));
+    //   }
+    // );
+
+    // when meta changes set doc meta
+    // ymeta.observe((event) => {
+    //   try {
+    //     const str = event.target.toString();
+    //     if (str) {
+    //       const meta = JSON.parse(str);
+    //       useDoc.setState({ meta });
+    //     }
+    //   } catch (e) {
+    //     console.error(e);
+    //   }
+    // });
+
+    return true;
+  } catch (e) {
+    console.error(e);
+    logError(isError(e) ? e : new Error("Realtime error"));
+    return false;
+  }
+}
diff --git a/app/src/lib/useDetails.ts b/app/src/lib/useDetails.ts
new file mode 100644
index 00000000..0b2f4992
--- /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 27965d9f..3b335b9b 100644
--- a/app/src/lib/useDoc.ts
+++ b/app/src/lib/useDoc.ts
@@ -13,8 +13,6 @@ 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 */
@@ -55,40 +53,11 @@ export const useDoc = create(
   )
 );
 
-/** 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");
-}
-
-export const useParseError = create<{ error: string; errorFromStyle: string }>(
-  () => ({
-    error: "",
-    errorFromStyle: "",
-  })
-);
-
 /**
  * Custom useDocDetails store
  */
-export const useDocDetailsStore = create<Details>()(
+export const useDetailsStore = create<Details>()(
   devtools(() => initialDetails, {
-    name: "useDocDetailsStore",
+    name: "useDetailsStore",
   })
 );
-
-/**
- * Get a type-safe version of any property
- * of the doc details
- */
-export function useDocDetails<K extends keyof Details>(
-  prop: K,
-  fallback?: Details[K]
-) {
-  return useDocDetailsStore((state) => state[prop] || fallback) as Details[K];
-}
diff --git a/app/src/lib/useIsFrozen.ts b/app/src/lib/useIsFrozen.ts
index e3ccd2d5..05413aa3 100644
--- a/app/src/lib/useIsFrozen.ts
+++ b/app/src/lib/useIsFrozen.ts
@@ -1,22 +1,14 @@
-import produce from "immer";
-
+import { getDoc, setDocImmer } 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"
-  );
+  setDocImmer((draft) => {
+    delete draft.meta.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 00000000..57d0a95b
--- /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 d4f639bf..1b8d9318 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 { getDoc, setDoc, subscribeToDoc } 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 } from "../lib/useDoc";
 import { useTrackLastChart } from "../lib/useLastChart";
 import { Type } from "../slang";
 import styles from "./Edit.module.css";
@@ -49,17 +51,17 @@ const Edit = memo(function Edit() {
     );
   }, [workspace]);
 
-  useEffect(() => useDoc.subscribe(storeDoc), [storeDoc]);
+  useEffect(() => subscribeToDoc(storeDoc), [storeDoc]);
 
   const onChange = useCallback(
-    (value) => useDoc.setState({ text: value ?? "" }, false, "Edit/text"),
+    (value) => setDoc({ text: value ?? "" }, "Edit/text"),
     []
   );
 
   const { url } = useRouteMatch();
   useTrackLastChart(url);
 
-  const text = useDoc((d) => d.text);
+  const text = getDoc().text;
 
   return (
     <EditWrapper>
@@ -117,7 +119,7 @@ const Edit = memo(function Edit() {
         </EditorWrapper>
         <ClearTextButton
           handleClear={() => {
-            useDoc.setState({ text: "", meta: {} }, false, "Edit/clear");
+            setDoc({ text: "", meta: {} }, "Edit/clear");
             if (editorRef.current) {
               editorRef.current.focus();
             }
diff --git a/app/src/pages/EditHosted.tsx b/app/src/pages/EditHosted.tsx
index 39cbe75f..38718433 100644
--- a/app/src/pages/EditHosted.tsx
+++ b/app/src/pages/EditHosted.tsx
@@ -18,21 +18,28 @@ import { EditLayoutTab } from "../components/Tabs/EditLayoutTab";
 import { EditMetaTab } from "../components/Tabs/EditMetaTab";
 import { EditStyleTab } from "../components/Tabs/EditStyleTab";
 import { TextEditor } from "../components/TextEditor";
+import { getDoc, setDoc, subscribeToDoc } from "../lib/docHelpers";
+import { docToString } from "../lib/docToString";
 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 { setupYDoc } from "../lib/realtime";
+import { Doc } 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 { isSuccess } = useQuery(
+    ["useHostedDoc", id],
+    () => loadHostedDoc(id),
+    {
+      enabled: !!id,
+      suspense: true,
+      staleTime: 0,
+    }
+  );
 
   const { mutate, isLoading } = useMutation((text: string) =>
     updateChartText(text, id)
@@ -45,9 +52,9 @@ export default function EditHosted() {
   } = useDebouncedCallback((doc: Doc) => {
     mutate(docToString(doc));
   }, 1000);
-  useEffect(() => useDoc.subscribe(debounceMutate), [debounceMutate]);
+  useEffect(() => subscribeToDoc(debounceMutate), [debounceMutate]);
 
-  const text = useDoc((state) => state.text);
+  const text = getDoc().text;
 
   const editorRef = useRef<null | Parameters<OnMount>[0]>(null);
 
@@ -60,7 +67,7 @@ export default function EditHosted() {
   }, []);
 
   const onChange = useCallback(
-    (value) => useDoc.setState({ text: value ?? "" }, false, "EditHosted/text"),
+    (value) => setDoc({ text: value ?? "" }, "EditHosted/text"),
     []
   );
 
@@ -95,6 +102,7 @@ export default function EditHosted() {
                   editorRef={editorRef}
                   value={text}
                   onChange={onChange}
+                  bindToRealtime={isSuccess}
                 />
               </EditorOptions>
             </Tabs.Content>
@@ -114,7 +122,7 @@ export default function EditHosted() {
         <LoadingState isLoading={isLoading} pending={pending()} />
         <ClearTextButton
           handleClear={() => {
-            useDoc.setState({ text: "", meta: {} }, false, "EditHosted/clear");
+            setDoc({ text: "", meta: {} }, "EditHosted/clear");
             if (editorRef.current) {
               editorRef.current.focus();
             }
@@ -150,6 +158,9 @@ function LoadingState({
 }
 
 async function loadHostedDoc(id: string) {
+  // we need to create the ydoc
+  setupYDoc("hosted", id);
+
   const chart = await getHostedChart(id);
   if (!chart) throw new Error("Chart not found");
   const doc = chart.chart;
diff --git a/app/src/pages/ReadOnly.tsx b/app/src/pages/ReadOnly.tsx
index 058d1682..a712e903 100644
--- a/app/src/pages/ReadOnly.tsx
+++ b/app/src/pages/ReadOnly.tsx
@@ -9,8 +9,8 @@ import { EditorWrapper } from "../components/EditorWrapper";
 import { EditWrapper } from "../components/EditWrapper";
 import Main from "../components/Main";
 import { TextEditor } from "../components/TextEditor";
+import { getDoc } from "../lib/docHelpers";
 import { prepareChart } from "../lib/prepareChart/prepareChart";
-import { useDoc } from "../lib/useDoc";
 
 function ReadOnly() {
   const { path } = useRouteMatch();
@@ -24,7 +24,7 @@ function ReadOnly() {
   });
 
   const editorRef = useRef<null | Parameters<OnMount>[0]>(null);
-  const text = useDoc((d) => d.text);
+  const text = getDoc().text;
 
   return (
     <EditWrapper>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a9f9a688..f13cb294 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -344,10 +344,24 @@ importers:
 
   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
 
@@ -2004,6 +2018,19 @@ packages:
       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:
@@ -2026,6 +2053,20 @@ packages:
       - 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'}
@@ -2567,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}
@@ -3976,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'}
@@ -4767,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
@@ -5092,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==}
 
@@ -5229,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:
@@ -6554,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'}
@@ -6995,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:
@@ -7322,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'}
@@ -7781,6 +8097,11 @@ 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'}
@@ -9677,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'}
@@ -9760,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'}
@@ -9845,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:
@@ -10893,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'}
@@ -11252,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}
@@ -11453,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:
@@ -11480,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'}
@@ -11935,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'}
@@ -12044,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'}
@@ -13239,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'}
@@ -14031,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'}
@@ -14934,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
@@ -15206,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'}
@@ -15238,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:
@@ -15522,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'}
@@ -16141,6 +16689,24 @@ packages:
       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:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 36094802..bae73102 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/jsconfig.json b/wss/jsconfig.json
new file mode 100644
index 00000000..08ac60b6
--- /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 00000000..3187a289
--- /dev/null
+++ b/wss/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "wss",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "nodemon src/index.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/index.mjs b/wss/src/index.mjs
new file mode 100644
index 00000000..ba6b5800
--- /dev/null
+++ b/wss/src/index.mjs
@@ -0,0 +1,192 @@
+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";
+const port = 1234 || parseInt(process.env.PORT);
+
+// Configure the server …
+const server = new Hocuspocus({
+  port,
+  extensions: [
+    new Database({
+      fetch: async ({ documentName }) => {
+        const [_docType, id] = documentName.split("-");
+        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);
+
+        // create ydoc
+        const ydoc = new Y.Doc();
+
+        // create ytext
+        const ytext = ydoc.getText("text");
+
+        // initialize ytext with the flowchart
+        ytext.insert(0, text);
+
+        // meta
+        const ymeta = ydoc.getMap("meta");
+        Object.keys(meta).forEach((key) => {
+          ymeta.set(key, meta[key]);
+        });
+
+        return Y.encodeStateAsUpdate(ydoc);
+      },
+      store: async ({ documentName, state }) => {
+        const [_docType, id] = documentName.split("-");
+
+        // 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;
+        });
+        console.log("text", text);
+        console.log("meta", meta);
+
+        const chart = docToString({ text, meta });
+        const { error } = await supabase
+          .from("user_charts")
+          .update({ chart })
+          .eq("id", id);
+        if (error) throw error;
+        return true;
+      },
+    }),
+  ],
+
+  // async onChange(data) {
+  //   console.log("Data changed:", data);
+  // },
+
+  // async onLoadDocument({ document, documentName }) {
+  //   const [_docType, id] = documentName.split("-");
+
+  //   // If we're missing the text
+  //   if (document.isEmpty("text")) {
+  //     console.log("Loading text for", documentName);
+  //     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");
+  //     const result = data[0];
+  //     console.log("result", result);
+  //   }
+
+  //   return {
+  //     id,
+  //     data: { hello: "world" },
+  //   };
+  // },
+});
+
+// … and run it!
+server.listen();
+
+/**
+
+TODO
+- ~~make sure we can request a specific document~~
+- make sure that only authenticated users can connect to documents
+
+*/
+
+/**
+ *
+ * @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 00000000..f4066244
--- /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);

From 5bf8674394511aa7808028822da9d0868a416f1a Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Mon, 27 Feb 2023 16:39:07 -0500
Subject: [PATCH 03/19] feat(realtime): update getters and setters

---
 app/src/components/Graph.tsx              |  12 +-
 app/src/components/GraphContextMenu.tsx   |  26 +--
 app/src/components/Tabs/EditLayoutTab.tsx |   4 +-
 app/src/components/Tabs/EditMetaTab.tsx   |   4 +-
 app/src/components/Tabs/EditStyleTab.tsx  |   4 +-
 app/src/lib/docHelpers.ts                 | 259 ++++++++++++++++++++--
 app/src/lib/graphThemes.tsx               |   6 +-
 app/src/lib/parsers.ts                    |   4 +-
 app/src/lib/realtime.ts                   |  12 +
 app/src/pages/Edit.tsx                    |   4 +-
 app/src/pages/EditHosted.tsx              |  47 ++--
 app/src/pages/ReadOnly.tsx                |   5 +-
 wss/README.md                             |   5 +
 wss/src/index.mjs                         |  35 ---
 14 files changed, 314 insertions(+), 113 deletions(-)
 create mode 100644 wss/README.md

diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
index 4676feee..8eecb515 100644
--- a/app/src/components/Graph.tsx
+++ b/app/src/components/Graph.tsx
@@ -18,7 +18,7 @@ import { useDebouncedCallback } from "use-debounce";
 
 import { buildStylesForGraph } from "../lib/buildStylesForGraph";
 import { cytoscape } from "../lib/cytoscape";
-import { getDoc, setDoc, subscribeToDoc } from "../lib/docHelpers";
+import { getDoc, setDocImmer, subscribeToDoc } from "../lib/docHelpers";
 import { getGetSize, TGetSize } from "../lib/getGetSize";
 import { getLayout } from "../lib/getLayout";
 import { getUserStyle } from "../lib/getTheme";
@@ -73,14 +73,8 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
   const parser = useParser();
   const handleDragFree = useCallback(() => {
     const nodePositions = getNodePositionsFromCy();
-    setDoc((state) => {
-      return {
-        ...state,
-        meta: {
-          ...state.meta,
-          nodePositions,
-        },
-      };
+    setDocImmer((draft) => {
+      draft.meta.nodePositions = nodePositions;
     }, "Graph/handleDragFree");
   }, []);
 
diff --git a/app/src/components/GraphContextMenu.tsx b/app/src/components/GraphContextMenu.tsx
index bc75b405..1ef06d3d 100644
--- a/app/src/components/GraphContextMenu.tsx
+++ b/app/src/components/GraphContextMenu.tsx
@@ -15,7 +15,7 @@ import { Item, Menu, Separator, Submenu } from "react-contexify";
 import { FiDownload } from "react-icons/fi";
 import { HiOutlineClipboardCopy } from "react-icons/hi";
 
-import { getDoc, setDoc } from "../lib/docHelpers";
+import { getDoc, getDocText, setDoc, setDocText } from "../lib/docHelpers";
 import { defaultGraphTheme, useCurrentTheme } from "../lib/graphThemes";
 import { borderStyles, shapes } from "../lib/graphUtilityClasses";
 import { useIsFirefox } from "../lib/hooks";
@@ -216,7 +216,7 @@ function NodeSubmenu() {
             <Item
               key={name}
               onClick={() => {
-                let newText = getDoc().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] }],
                   });
                 }
-                setDoc({ text: newText }, "NodeSubmenu/color");
+                setDocText(newText, "NodeSubmenu/color");
               }}
             >
               <Box
@@ -243,7 +243,7 @@ function NodeSubmenu() {
           <Item
             key="remove-all"
             onClick={() => {
-              let newText = getDoc().text;
+              let newText = getDocText();
               for (const selection of activeSelection) {
                 if (!selection) continue;
                 newText = operate(newText, {
@@ -254,7 +254,7 @@ function NodeSubmenu() {
                   ],
                 });
               }
-              setDoc({ text: newText }, "NodeSubmenu/color/removeAll");
+              setDocText(newText, "NodeSubmenu/color/removeAll");
             }}
           >
             <Box className={styles.SquareButton}>
@@ -274,7 +274,7 @@ function NodeSubmenu() {
             <Item
               key={shape}
               onClick={() => {
-                let newText = getDoc().text;
+                let newText = getDocText();
                 for (const selection of activeSelection) {
                   if (!selection) continue;
                   newText = operate(newText, {
@@ -289,7 +289,7 @@ function NodeSubmenu() {
                     operation: ["addClassesToNode", { classNames: [shape] }],
                   });
                 }
-                setDoc({ text: newText }, "NodeSubmenu/shape");
+                setDocText(newText, "NodeSubmenu/shape");
               }}
             >
               <Box
@@ -306,7 +306,7 @@ function NodeSubmenu() {
           <Item
             key="remove-all"
             onClick={() => {
-              let newText = getDoc().text;
+              let newText = getDocText();
               for (const selection of activeSelection) {
                 if (!selection) continue;
                 newText = operate(newText, {
@@ -317,7 +317,7 @@ function NodeSubmenu() {
                   ],
                 });
               }
-              setDoc({ text: newText }, "NodeSubmenu/shape/removeAll");
+              setDocText(newText, "NodeSubmenu/shape/removeAll");
             }}
           >
             <Box className={styles.SquareButton}>
@@ -336,7 +336,7 @@ function NodeSubmenu() {
             <Item
               key={index}
               onClick={() => {
-                let newText = getDoc().text;
+                let newText = getDocText();
                 for (const selection of activeSelection) {
                   if (!selection) continue;
                   newText = operate(newText, {
@@ -361,7 +361,7 @@ function NodeSubmenu() {
                       ],
                     });
                 }
-                setDoc({ text: newText }, "NodeSubmenu/size");
+                setDocText(newText, "NodeSubmenu/size");
               }}
             >
               <Type size={size}>{label}</Type>
@@ -379,7 +379,7 @@ function NodeSubmenu() {
             <Item
               key={className}
               onClick={() => {
-                let newText = getDoc().text;
+                let newText = getDocText();
                 for (const selection of activeSelection) {
                   if (!selection) continue;
                   newText = operate(newText, {
@@ -399,7 +399,7 @@ function NodeSubmenu() {
                       ],
                     });
                 }
-                setDoc({ text: newText }, "NodeSubmenu/border");
+                setDocText(newText, "NodeSubmenu/border");
               }}
             >
               <span
diff --git a/app/src/components/Tabs/EditLayoutTab.tsx b/app/src/components/Tabs/EditLayoutTab.tsx
index 6ad42e0d..c9dbefb1 100644
--- a/app/src/components/Tabs/EditLayoutTab.tsx
+++ b/app/src/components/Tabs/EditLayoutTab.tsx
@@ -2,7 +2,7 @@ import { t, Trans } from "@lingui/macro";
 import { FaRegSnowflake } from "react-icons/fa";
 
 import { GraphOptionsObject } from "../../lib/constants";
-import { getDoc, setDocImmer } from "../../lib/docHelpers";
+import { setDocImmer, useSafeDoc } from "../../lib/docHelpers";
 import { defaultLayout, getLayout } from "../../lib/getLayout";
 import { directions, layouts } from "../../lib/graphOptions";
 import { hasOwnProperty } from "../../lib/helpers";
@@ -20,7 +20,7 @@ import {
 
 export function EditLayoutTab() {
   const isValidSponsor = useIsValidSponsor();
-  const doc = getDoc();
+  const doc = useSafeDoc();
   const layout = (
     hasOwnProperty(doc.meta, "layout") ? doc.meta.layout : {}
   ) as GraphOptionsObject["layout"];
diff --git a/app/src/components/Tabs/EditMetaTab.tsx b/app/src/components/Tabs/EditMetaTab.tsx
index 452a7dde..5d77cc72 100644
--- a/app/src/components/Tabs/EditMetaTab.tsx
+++ b/app/src/components/Tabs/EditMetaTab.tsx
@@ -3,12 +3,12 @@ import Editor from "@monaco-editor/react";
 import { useEffect, useState } from "react";
 
 import { editorOptions } from "../../lib/constants";
-import { getDoc, setDoc } from "../../lib/docHelpers";
+import { setDoc, useDocMeta } from "../../lib/docHelpers";
 import { useLightOrDarkMode } from "../../lib/hooks";
 import { Button } from "../Shared";
 
 export function EditMetaTab() {
-  const meta = getDoc().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);
diff --git a/app/src/components/Tabs/EditStyleTab.tsx b/app/src/components/Tabs/EditStyleTab.tsx
index 558866a4..39de52ca 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 throttle from "lodash.throttle";
 
-import { getDoc, setDocImmer } from "../../lib/docHelpers";
+import { getDoc, setDocImmer, useDocMeta } from "../../lib/docHelpers";
 import { themes } from "../../lib/graphOptions";
 import {
   useBackgroundColor,
@@ -24,7 +24,7 @@ export function EditStyleTab() {
   const themeNiceName =
     themes.find((t) => t.value === themeKey)?.label() ?? "???";
   const theme = useCurrentTheme(themeKey);
-  const meta = getDoc().meta;
+  const meta = useDocMeta();
   const bg = useBackgroundColor(theme);
   return (
     <WithLowerChild>
diff --git a/app/src/lib/docHelpers.ts b/app/src/lib/docHelpers.ts
index 03c73057..bd05b7c1 100644
--- a/app/src/lib/docHelpers.ts
+++ b/app/src/lib/docHelpers.ts
@@ -7,30 +7,42 @@
 
 import produce from "immer";
 import { WritableDraft } from "immer/dist/internal";
+import { useEffect, useState } from "react";
 
+import { docToString } from "./docToString";
+import { getSafeYDoc } from "./realtime";
 import { Doc, useDetailsStore, useDoc } from "./useDoc";
 
 /**
  * Full or partial doc mutation using spread operator
  */
-export function setDoc(
-  doc: Partial<Doc> | ((doc: Doc) => Partial<Doc>),
-  description: string
-) {
+export function setDoc(doc: Partial<Doc>, description: string) {
   const isHosted = useDetailsStore.getState().isHosted;
   // mutate the doc
   if (isHosted) {
-    // mutate the yjs document
-    console.debug("mutating yjs document", doc, description);
+    const ydoc = getSafeYDoc();
+    if (!ydoc) return;
+    const { text, meta } = doc;
+    if (text) {
+      // Silent for now, relying on Monaco sync
+      // TODO: need a way to force it for things that update the text
+      // outside of Monaco
+    }
+    if (meta) {
+      const ymeta = ydoc.getMap("meta");
+      if (ymeta) {
+        for (const [key, value] of Object.entries(meta)) {
+          ymeta.set(key, value);
+        }
+      }
+    }
   } else {
     // mutate the zustand store
     useDoc.setState(
-      typeof doc === "function"
-        ? doc
-        : (cur) => ({
-            ...cur,
-            ...doc,
-          }),
+      (cur) => ({
+        ...cur,
+        ...doc,
+      }),
       false,
       description
     );
@@ -43,20 +55,80 @@ export function setDocImmer(cb: SetDocImmerCallback, description: string) {
   const isHosted = useDetailsStore.getState().isHosted;
   // mutate the doc
   if (isHosted) {
-    // mutate the yjs document
-    console.debug("mutating yjs document", description);
+    const ydoc = getSafeYDoc();
+    if (!ydoc) return;
+    const text = ydoc.getText("text");
+    const meta = ydoc.getMap("meta");
+    if (!text || !meta) return;
+    const fullDoc = {
+      text: text.toString(),
+      meta: meta.toJSON(),
+    };
+    const newDoc = produce(fullDoc, cb);
+    if (newDoc.text !== fullDoc.text) {
+      // Silent for now, relying on Monaco sync
+    }
+    for (const [key, value] of Object.entries(newDoc.meta)) {
+      meta.set(key, value);
+    }
   } else {
     // mutate the zustand store
     useDoc.setState((cur) => produce(cur, 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(() => {
+      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) {
-    // subscribe to yjs document
-    console.debug("subscribing to yjs document");
-    return () => console.debug("unsubscribing from yjs document");
+    const ydoc = getSafeYDoc();
+    if (!ydoc) return;
+    const text = ydoc.getText("text");
+    const meta = ydoc.getMap("meta");
+    if (!text || !meta) return;
+
+    const getFullDoc = () => {
+      return {
+        text: text.toString(),
+        meta: meta.toJSON(),
+      };
+    };
+
+    text.observe(() => {
+      cb(getFullDoc());
+    });
+    meta.observe(() => {
+      cb(getFullDoc());
+    });
+    return () => {
+      text.unobserve(() => {
+        cb(getFullDoc());
+      });
+      meta.unobserve(() => {
+        cb(getFullDoc());
+      });
+    };
   } else {
     // subscribe to zustand store
     return useDoc.subscribe(cb);
@@ -66,11 +138,158 @@ export function subscribeToDoc(cb: (doc: Doc) => void) {
 export function getDoc(): Doc {
   const isHosted = useDetailsStore.getState().isHosted;
   if (isHosted) {
-    // get the yjs document
-    console.debug("getting yjs document");
-    return {} as Doc;
+    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;
+  }
+}
+
+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
+ */
+export function useDocUpdate(): Doc {
+  const [doc, setDoc] = 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 = () => {
+      setDoc({
+        text: text.toString(),
+        meta: meta.toJSON(),
+      });
+    };
+
+    text.observe(updateHandler);
+    meta.observe(updateHandler);
+
+    return () => {
+      text.unobserve(updateHandler);
+      meta.unobserve(updateHandler);
+    };
+  }, []);
+
+  return doc;
+}
diff --git a/app/src/lib/graphThemes.tsx b/app/src/lib/graphThemes.tsx
index 6114ebc0..af3efdcc 100644
--- a/app/src/lib/graphThemes.tsx
+++ b/app/src/lib/graphThemes.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from "react-query";
 
-import { getDoc } from "./docHelpers";
+import { getDoc, useDocMeta } from "./docHelpers";
 import { Theme } from "./themes/constants";
 
 export type GraphThemes =
@@ -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 = getDoc().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 = getDoc().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 57979b7c..0b2394b9 100644
--- a/app/src/lib/parsers.ts
+++ b/app/src/lib/parsers.ts
@@ -1,7 +1,7 @@
 import { ElementDefinition } from "cytoscape";
 import { parse, toCytoscapeElements } from "graph-selector";
 
-import { getDoc } from "./docHelpers";
+import { getDoc, useDocMeta } from "./docHelpers";
 import { TGetSize } from "./getGetSize";
 import { SelectOption } from "./graphOptions";
 import { parseText } from "./parseText";
@@ -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 = getDoc().meta;
+  const meta = useDocMeta();
   const parser = meta?.parser as Parsers;
   return parser || DEFAULT_PARSER;
 }
diff --git a/app/src/lib/realtime.ts b/app/src/lib/realtime.ts
index 32a5aae0..d272b4b9 100644
--- a/app/src/lib/realtime.ts
+++ b/app/src/lib/realtime.ts
@@ -34,6 +34,18 @@ export function setupYDoc(type: "hosted", id: string) {
   useYDoc.setState({ ydoc, provider });
 }
 
+/**
+ * Returns the ydoc if it exists or false if it doesn't
+ */
+export function getSafeYDoc() {
+  const ydoc = useYDoc.getState().ydoc;
+  if (!ydoc) {
+    logError(new Error("Y.Doc not found"));
+    return false;
+  }
+  return ydoc;
+}
+
 export function initRealtime(editor: IStandAloneCodeEditor) {
   try {
     const ydoc = useYDoc.getState().ydoc;
diff --git a/app/src/pages/Edit.tsx b/app/src/pages/Edit.tsx
index 1b8d9318..aeae3601 100644
--- a/app/src/pages/Edit.tsx
+++ b/app/src/pages/Edit.tsx
@@ -16,7 +16,7 @@ import { EditLayoutTab } from "../components/Tabs/EditLayoutTab";
 import { EditMetaTab } from "../components/Tabs/EditMetaTab";
 import { EditStyleTab } from "../components/Tabs/EditStyleTab";
 import { TextEditor } from "../components/TextEditor";
-import { getDoc, setDoc, subscribeToDoc } from "../lib/docHelpers";
+import { setDoc, subscribeToDoc, useDocText } from "../lib/docHelpers";
 import { docToString } from "../lib/docToString";
 import { getDefaultChart } from "../lib/getDefaultChart";
 import { titleToLocalStorageKey } from "../lib/helpers";
@@ -61,7 +61,7 @@ const Edit = memo(function Edit() {
   const { url } = useRouteMatch();
   useTrackLastChart(url);
 
-  const text = getDoc().text;
+  const text = useDocText();
 
   return (
     <EditWrapper>
diff --git a/app/src/pages/EditHosted.tsx b/app/src/pages/EditHosted.tsx
index 38718433..53f73f28 100644
--- a/app/src/pages/EditHosted.tsx
+++ b/app/src/pages/EditHosted.tsx
@@ -18,7 +18,12 @@ import { EditLayoutTab } from "../components/Tabs/EditLayoutTab";
 import { EditMetaTab } from "../components/Tabs/EditMetaTab";
 import { EditStyleTab } from "../components/Tabs/EditStyleTab";
 import { TextEditor } from "../components/TextEditor";
-import { getDoc, setDoc, subscribeToDoc } from "../lib/docHelpers";
+import {
+  setDoc,
+  setDocText,
+  subscribeToDoc,
+  useDocText,
+} from "../lib/docHelpers";
 import { docToString } from "../lib/docToString";
 import { useIsValidSponsor } from "../lib/hooks";
 import { prepareChart } from "../lib/prepareChart/prepareChart";
@@ -41,30 +46,30 @@ export default function EditHosted() {
     }
   );
 
-  const { mutate, isLoading } = useMutation((text: string) =>
-    updateChartText(text, id)
-  );
+  // const { mutate, isLoading } = useMutation((text: string) =>
+  //   updateChartText(text, id)
+  // );
   // get debounced mutate
-  const {
-    callback: debounceMutate,
-    flush,
-    pending,
-  } = useDebouncedCallback((doc: Doc) => {
-    mutate(docToString(doc));
-  }, 1000);
-  useEffect(() => subscribeToDoc(debounceMutate), [debounceMutate]);
+  // const {
+  //   callback: debounceMutate,
+  //   flush,
+  //   pending,
+  // } = useDebouncedCallback((doc: Doc) => {
+  //   mutate(docToString(doc));
+  // }, 1000);
+  // useEffect(() => subscribeToDoc(debounceMutate), [debounceMutate]);
 
-  const text = getDoc().text;
+  const text = useDocText();
 
   const editorRef = useRef<null | Parameters<OnMount>[0]>(null);
 
   // This is to make sure we update if people exit the tab quickly
-  useEffect(() => {
-    return () => {
-      flush();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // useEffect(() => {
+  //   return () => {
+  //     flush();
+  //   };
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
 
   const onChange = useCallback(
     (value) => setDoc({ text: value ?? "" }, "EditHosted/text"),
@@ -119,10 +124,10 @@ export default function EditHosted() {
             )}
           </Tabs.Root>
         </EditorWrapper>
-        <LoadingState isLoading={isLoading} pending={pending()} />
+        <LoadingState isLoading={false} pending={false} />
         <ClearTextButton
           handleClear={() => {
-            setDoc({ text: "", meta: {} }, "EditHosted/clear");
+            setDocText("", "EditHosted/clear");
             if (editorRef.current) {
               editorRef.current.focus();
             }
diff --git a/app/src/pages/ReadOnly.tsx b/app/src/pages/ReadOnly.tsx
index a712e903..f6f89688 100644
--- a/app/src/pages/ReadOnly.tsx
+++ b/app/src/pages/ReadOnly.tsx
@@ -9,7 +9,7 @@ import { EditorWrapper } from "../components/EditorWrapper";
 import { EditWrapper } from "../components/EditWrapper";
 import Main from "../components/Main";
 import { TextEditor } from "../components/TextEditor";
-import { getDoc } from "../lib/docHelpers";
+import { getDocText } from "../lib/docHelpers";
 import { prepareChart } from "../lib/prepareChart/prepareChart";
 
 function ReadOnly() {
@@ -24,7 +24,8 @@ function ReadOnly() {
   });
 
   const editorRef = useRef<null | Parameters<OnMount>[0]>(null);
-  const text = getDoc().text;
+  // TODO: should this be useDocText?
+  const text = getDocText();
 
   return (
     <EditWrapper>
diff --git a/wss/README.md b/wss/README.md
new file mode 100644
index 00000000..37a1a0a8
--- /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/src/index.mjs b/wss/src/index.mjs
index ba6b5800..31f4b4e1 100644
--- a/wss/src/index.mjs
+++ b/wss/src/index.mjs
@@ -72,46 +72,11 @@ const server = new Hocuspocus({
       },
     }),
   ],
-
-  // async onChange(data) {
-  //   console.log("Data changed:", data);
-  // },
-
-  // async onLoadDocument({ document, documentName }) {
-  //   const [_docType, id] = documentName.split("-");
-
-  //   // If we're missing the text
-  //   if (document.isEmpty("text")) {
-  //     console.log("Loading text for", documentName);
-  //     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");
-  //     const result = data[0];
-  //     console.log("result", result);
-  //   }
-
-  //   return {
-  //     id,
-  //     data: { hello: "world" },
-  //   };
-  // },
 });
 
 // … and run it!
 server.listen();
 
-/**
-
-TODO
-- ~~make sure we can request a specific document~~
-- make sure that only authenticated users can connect to documents
-
-*/
-
 /**
  *
  * @param {string} doc

From 86c4e6dfa4e48274e1829410dee2dc295cd3ede7 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Mon, 27 Feb 2023 16:49:12 -0500
Subject: [PATCH 04/19] feat(realtime): use dev websocket server

---
 app/src/lib/realtime.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/src/lib/realtime.ts b/app/src/lib/realtime.ts
index d272b4b9..fec7bdaa 100644
--- a/app/src/lib/realtime.ts
+++ b/app/src/lib/realtime.ts
@@ -21,14 +21,13 @@ export const useYDoc = create<{
 
 // Create a Yjs document
 export function setupYDoc(type: "hosted", id: string) {
+  const providerUrl = process.env.REACT_APP_WEBSOCKET_PROVIDER;
+  if (!providerUrl) throw new Error("REACT_APP_WEBSOCKET_PROVIDER not found");
+
   const ydoc = new Y.Doc();
 
   // Create a provider
-  const provider = new WebsocketProvider(
-    "ws://localhost:1234",
-    `${type}-${id}`,
-    ydoc
-  );
+  const provider = new WebsocketProvider(providerUrl, `${type}-${id}`, ydoc);
 
   // set references in store
   useYDoc.setState({ ydoc, provider });

From 0ceb4bc8385bc5e07a024c68965ef9b227181c86 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Mon, 27 Feb 2023 17:02:55 -0500
Subject: [PATCH 05/19] chore: trigger build


From 5b95b115091ad4c1fd99e942a8b5f967abcab290 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Mon, 27 Feb 2023 17:19:08 -0500
Subject: [PATCH 06/19] feat(realtime): update server, check errors

---
 wss/src/index.mjs | 44 ++++++++++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/wss/src/index.mjs b/wss/src/index.mjs
index 31f4b4e1..46f67428 100644
--- a/wss/src/index.mjs
+++ b/wss/src/index.mjs
@@ -12,32 +12,36 @@ const server = new Hocuspocus({
   extensions: [
     new Database({
       fetch: async ({ documentName }) => {
-        const [_docType, id] = documentName.split("-");
-        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);
-
         // create ydoc
         const ydoc = new Y.Doc();
-
         // create ytext
         const ytext = ydoc.getText("text");
-
-        // initialize ytext with the flowchart
-        ytext.insert(0, text);
-
         // meta
         const ymeta = ydoc.getMap("meta");
-        Object.keys(meta).forEach((key) => {
-          ymeta.set(key, meta[key]);
-        });
+        try {
+          const [_docType, id] = documentName.split("-");
+          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);
+          console.log("Loaded Chart", { text, meta });
+
+          // initialize ytext with the flowchart
+          ytext.insert(0, text);
+
+          // initialize meta
+          Object.keys(meta).forEach((key) => {
+            ymeta.set(key, meta[key]);
+          });
+        } catch (e) {
+          console.log(e);
+        }
 
         return Y.encodeStateAsUpdate(ydoc);
       },

From 65fd4afe1362242df3653279d45a224e9e88922e Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Mon, 27 Feb 2023 17:30:34 -0500
Subject: [PATCH 07/19] feat(realtime): cleanup

---
 app/src/lib/realtime.ts | 29 -----------------------------
 wss/package.json        |  3 ++-
 wss/src/index.mjs       |  7 ++++++-
 3 files changed, 8 insertions(+), 31 deletions(-)

diff --git a/app/src/lib/realtime.ts b/app/src/lib/realtime.ts
index fec7bdaa..7d55a3c7 100644
--- a/app/src/lib/realtime.ts
+++ b/app/src/lib/realtime.ts
@@ -54,41 +54,12 @@ export function initRealtime(editor: IStandAloneCodeEditor) {
 
     // Define a shared text type
     const ytext = ydoc.getText("text");
-    // Define a shared map type
-    // const ymeta = ydoc.getText("meta");
-
-    // Initialize the text if it doesn't match the current text
-    // if (ytext.toString() !== text) ytext.insert(0, text);
-    // if (ymap.toString() !== JSON.stringify(meta))
-    //   ymap.insert(0, JSON.stringify(meta));
 
     const model = editor.getModel();
     if (!model) throw new Error("Model not found");
 
     new MonacoBinding(ytext, model, new Set([editor]), provider.awareness);
 
-    // subscribe to doc meta changes and update state
-    // useDoc.subscribe(
-    //   (doc) => doc.meta,
-    //   (meta) => {
-    //     ymeta.delete(0, ymeta.length);
-    //     ymeta.insert(0, JSON.stringify(meta));
-    //   }
-    // );
-
-    // when meta changes set doc meta
-    // ymeta.observe((event) => {
-    //   try {
-    //     const str = event.target.toString();
-    //     if (str) {
-    //       const meta = JSON.parse(str);
-    //       useDoc.setState({ meta });
-    //     }
-    //   } catch (e) {
-    //     console.error(e);
-    //   }
-    // });
-
     return true;
   } catch (e) {
     console.error(e);
diff --git a/wss/package.json b/wss/package.json
index 3187a289..e1ba94b4 100644
--- a/wss/package.json
+++ b/wss/package.json
@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "nodemon src/index.mjs"
+    "dev": "nodemon src/index.mjs",
+    "start": "node src/index.mjs"
   },
   "keywords": [],
   "author": "",
diff --git a/wss/src/index.mjs b/wss/src/index.mjs
index 46f67428..a61d4902 100644
--- a/wss/src/index.mjs
+++ b/wss/src/index.mjs
@@ -76,10 +76,15 @@ const server = new Hocuspocus({
       },
     }),
   ],
+  async onConnect() {
+    console.log("Client connected");
+  },
 });
 
 // … and run it!
-server.listen();
+server.listen(async () => {
+  console.log(`Server running on port ${port}`);
+});
 
 /**
  *

From dc46b70ddfa3ff80844a5674c31e6f00a87fa8c0 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Mon, 27 Feb 2023 18:33:27 -0500
Subject: [PATCH 08/19] fix(realtime): run on the correct port

---
 wss/src/index.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/wss/src/index.mjs b/wss/src/index.mjs
index a61d4902..f002c4d4 100644
--- a/wss/src/index.mjs
+++ b/wss/src/index.mjs
@@ -4,7 +4,7 @@ import { Database } from "@hocuspocus/extension-database";
 import * as Y from "yjs";
 import merge from "deepmerge";
 import matter from "gray-matter";
-const port = 1234 || parseInt(process.env.PORT);
+const port = process.env.PORT ? parseInt(process.env.PORT) : 1234;
 
 // Configure the server …
 const server = new Hocuspocus({

From a7019a3b0525c584b116dd35987076eb4557be24 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Mon, 27 Feb 2023 22:33:11 -0500
Subject: [PATCH 09/19] fix(realtime): only connect single time

---
 app/src/components/ShareDialog.tsx |  4 ++--
 app/src/lib/docHelpers.ts          |  6 ++++++
 app/src/lib/realtime.ts            |  7 +++++++
 app/src/pages/EditHosted.tsx       | 13 ++-----------
 wss/src/index.mjs                  |  9 +++++----
 5 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/src/components/ShareDialog.tsx b/app/src/components/ShareDialog.tsx
index 88e3ba9f..f8713263 100644
--- a/app/src/components/ShareDialog.tsx
+++ b/app/src/components/ShareDialog.tsx
@@ -120,13 +120,13 @@ export default function ShareDialog() {
       </Column>
       {isHosted ? (
         <Column>
-          <Title>Share TODO</Title>
+          <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 = "rchristopher.gordon@gmail.com";
+              const email = "camille.leblanc.murray@gmail.com";
               const flowchart_id = chartId;
               (async () => {
                 if (!supabase) return;
diff --git a/app/src/lib/docHelpers.ts b/app/src/lib/docHelpers.ts
index bd05b7c1..b303dc65 100644
--- a/app/src/lib/docHelpers.ts
+++ b/app/src/lib/docHelpers.ts
@@ -71,6 +71,12 @@ export function setDocImmer(cb: SetDocImmerCallback, description: string) {
     for (const [key, value] of Object.entries(newDoc.meta)) {
       meta.set(key, value);
     }
+    // delete any keys that were removed
+    for (const key of Object.keys(fullDoc.meta)) {
+      if (!(key in newDoc.meta)) {
+        meta.delete(key);
+      }
+    }
   } else {
     // mutate the zustand store
     useDoc.setState((cur) => produce(cur, cb), false, description);
diff --git a/app/src/lib/realtime.ts b/app/src/lib/realtime.ts
index 7d55a3c7..cd74d199 100644
--- a/app/src/lib/realtime.ts
+++ b/app/src/lib/realtime.ts
@@ -19,11 +19,18 @@ export const useYDoc = create<{
   })
 );
 
+let timesCalled = 0;
+
 // Create a Yjs document
 export function setupYDoc(type: "hosted", id: string) {
+  console.log("setupYDoc called", timesCalled++);
   const providerUrl = process.env.REACT_APP_WEBSOCKET_PROVIDER;
   if (!providerUrl) throw new Error("REACT_APP_WEBSOCKET_PROVIDER not found");
 
+  // If the provider is already set to the correct type and id, don't do anything
+  const currentProvider = useYDoc.getState().provider;
+  if (currentProvider?.roomname === `${type}-${id}`) return;
+
   const ydoc = new Y.Doc();
 
   // Create a provider
diff --git a/app/src/pages/EditHosted.tsx b/app/src/pages/EditHosted.tsx
index 53f73f28..71a44d8c 100644
--- a/app/src/pages/EditHosted.tsx
+++ b/app/src/pages/EditHosted.tsx
@@ -18,18 +18,11 @@ import { EditLayoutTab } from "../components/Tabs/EditLayoutTab";
 import { EditMetaTab } from "../components/Tabs/EditMetaTab";
 import { EditStyleTab } from "../components/Tabs/EditStyleTab";
 import { TextEditor } from "../components/TextEditor";
-import {
-  setDoc,
-  setDocText,
-  subscribeToDoc,
-  useDocText,
-} from "../lib/docHelpers";
-import { docToString } from "../lib/docToString";
+import { setDoc, setDocText, useDocText } from "../lib/docHelpers";
 import { useIsValidSponsor } from "../lib/hooks";
 import { prepareChart } from "../lib/prepareChart/prepareChart";
-import { getHostedChart, updateChartText } from "../lib/queries";
+import { getHostedChart } from "../lib/queries";
 import { setupYDoc } from "../lib/realtime";
-import { Doc } from "../lib/useDoc";
 import { useTrackLastChart } from "../lib/useLastChart";
 import editStyles from "./Edit.module.css";
 import styles from "./EditHosted.module.css";
@@ -165,7 +158,6 @@ function LoadingState({
 async function loadHostedDoc(id: string) {
   // we need to create the ydoc
   setupYDoc("hosted", id);
-
   const chart = await getHostedChart(id);
   if (!chart) throw new Error("Chart not found");
   const doc = chart.chart;
@@ -176,5 +168,4 @@ async function loadHostedDoc(id: string) {
     isPublic: chart.is_public,
     publicId: chart.public_id,
   });
-  return doc;
 }
diff --git a/wss/src/index.mjs b/wss/src/index.mjs
index f002c4d4..01ecb597 100644
--- a/wss/src/index.mjs
+++ b/wss/src/index.mjs
@@ -4,7 +4,11 @@ import { Database } from "@hocuspocus/extension-database";
 import * as Y from "yjs";
 import merge from "deepmerge";
 import matter from "gray-matter";
-const port = process.env.PORT ? parseInt(process.env.PORT) : 1234;
+
+let port = 1234;
+if (process.env.RAILWAY_ENVIRONMENT) {
+  port = parseInt(process.env.PORT);
+}
 
 // Configure the server …
 const server = new Hocuspocus({
@@ -30,7 +34,6 @@ const server = new Hocuspocus({
           /** @type {string} */
           const flowchart = data[0].chart;
           const { text, meta } = prepareChart(flowchart);
-          console.log("Loaded Chart", { text, meta });
 
           // initialize ytext with the flowchart
           ytext.insert(0, text);
@@ -63,8 +66,6 @@ const server = new Hocuspocus({
         ymeta.forEach((value, key) => {
           meta[key] = value;
         });
-        console.log("text", text);
-        console.log("meta", meta);
 
         const chart = docToString({ text, meta });
         const { error } = await supabase

From 056e902560372dac68f4d36f50fa4f0674f40f48 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Tue, 28 Feb 2023 10:13:57 -0500
Subject: [PATCH 10/19] fix(wss): setup document in transaction

---
 wss/package.json                  |  6 +++---
 wss/src/{index.mjs => server.mjs} | 30 ++++++++++++++++++++++--------
 2 files changed, 25 insertions(+), 11 deletions(-)
 rename wss/src/{index.mjs => server.mjs} (83%)

diff --git a/wss/package.json b/wss/package.json
index e1ba94b4..fcb72b8b 100644
--- a/wss/package.json
+++ b/wss/package.json
@@ -2,11 +2,11 @@
   "name": "wss",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "main": "server.mjs",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "nodemon src/index.mjs",
-    "start": "node src/index.mjs"
+    "dev": "nodemon src/server.mjs",
+    "start": "node src/server.mjs"
   },
   "keywords": [],
   "author": "",
diff --git a/wss/src/index.mjs b/wss/src/server.mjs
similarity index 83%
rename from wss/src/index.mjs
rename to wss/src/server.mjs
index 01ecb597..103bbd9d 100644
--- a/wss/src/index.mjs
+++ b/wss/src/server.mjs
@@ -16,6 +16,7 @@ const server = new Hocuspocus({
   extensions: [
     new Database({
       fetch: async ({ documentName }) => {
+        console.log("fetching", documentName);
         // create ydoc
         const ydoc = new Y.Doc();
         // create ytext
@@ -35,12 +36,20 @@ const server = new Hocuspocus({
           const flowchart = data[0].chart;
           const { text, meta } = prepareChart(flowchart);
 
-          // initialize ytext with the flowchart
-          ytext.insert(0, text);
-
-          // initialize meta
-          Object.keys(meta).forEach((key) => {
-            ymeta.set(key, meta[key]);
+          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);
+              }
+            });
           });
         } catch (e) {
           console.log(e);
@@ -77,8 +86,13 @@ const server = new Hocuspocus({
       },
     }),
   ],
-  async onConnect() {
-    console.log("Client connected");
+  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.`);
   },
 });
 

From 6570c34d97ff270923e657a76fe7c920213c3197 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Tue, 28 Feb 2023 10:29:43 -0500
Subject: [PATCH 11/19] chore: remove unused

---
 app/src/components/AppContext.tsx           |   2 +-
 app/src/lib/docHelpers.ts                   |   2 +-
 app/src/lib/getDefaultChart.ts              |   2 +-
 app/src/lib/graphOptions.ts                 |   7 -
 app/src/lib/queries.ts                      |   6 -
 app/src/lib/realtime.ts                     |   2 +-
 app/src/lib/themes/_cyberpunk_unfinished.ts | 134 --------------------
 7 files changed, 4 insertions(+), 151 deletions(-)
 delete mode 100644 app/src/lib/themes/_cyberpunk_unfinished.ts

diff --git a/app/src/components/AppContext.tsx b/app/src/components/AppContext.tsx
index fbe7a11b..60ee333c 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/lib/docHelpers.ts b/app/src/lib/docHelpers.ts
index b303dc65..de29e3fb 100644
--- a/app/src/lib/docHelpers.ts
+++ b/app/src/lib/docHelpers.ts
@@ -270,7 +270,7 @@ export function useSafeDoc(): Doc {
  * Watch "text" and "meta" ydoc props and return an updated doc
  * when they change
  */
-export function useDocUpdate(): Doc {
+function useDocUpdate(): Doc {
   const [doc, setDoc] = useState<Doc>({ text: "", meta: {} });
 
   useEffect(() => {
diff --git a/app/src/lib/getDefaultChart.ts b/app/src/lib/getDefaultChart.ts
index 5f46f432..74905ff8 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/graphOptions.ts b/app/src/lib/graphOptions.ts
index ca53a301..091e5695 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/queries.ts b/app/src/lib/queries.ts
index 1d0b9a89..efb7e4aa 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
index cd74d199..31ee4737 100644
--- a/app/src/lib/realtime.ts
+++ b/app/src/lib/realtime.ts
@@ -10,7 +10,7 @@ import { logError } from "./sentry";
 
 type IStandAloneCodeEditor = Parameters<OnMount>[0];
 
-export const useYDoc = create<{
+const useYDoc = create<{
   ydoc?: Y.Doc;
   provider?: WebsocketProvider;
 }>()(
diff --git a/app/src/lib/themes/_cyberpunk_unfinished.ts b/app/src/lib/themes/_cyberpunk_unfinished.ts
deleted file mode 100644
index d79c63d7..00000000
--- 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;

From 4cf2f2e5543c40bc5808490898e74f0a70dd213d Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Tue, 28 Feb 2023 11:37:17 -0500
Subject: [PATCH 12/19] chore: cleanup setDoc usage

---
 app/src/components/GraphContextMenu.tsx       |  2 +-
 app/src/components/SignUpForm.tsx             |  4 +-
 app/src/components/Tabs/EditMetaTab.tsx       |  3 ++
 app/src/components/Tabs/EditStyleTab.tsx      |  2 +-
 app/src/components/TextEditor.tsx             |  6 +--
 app/src/lib/docHelpers.ts                     | 39 +++++++++-------
 app/src/lib/graphThemes.tsx                   |  2 +-
 app/src/lib/parsers.ts                        |  2 +-
 app/src/lib/prepareChart/prepareChart.test.ts | 33 ++++----------
 app/src/lib/prepareChart/prepareChart.ts      |  5 +--
 app/src/lib/realtime.ts                       |  3 --
 app/src/pages/Edit.tsx                        | 25 ++++++-----
 app/src/pages/EditHosted.tsx                  | 45 +++++--------------
 app/src/pages/Public.tsx                      |  4 +-
 app/src/pages/ReadOnly.tsx                    |  4 +-
 15 files changed, 76 insertions(+), 103 deletions(-)

diff --git a/app/src/components/GraphContextMenu.tsx b/app/src/components/GraphContextMenu.tsx
index 1ef06d3d..9cffd972 100644
--- a/app/src/components/GraphContextMenu.tsx
+++ b/app/src/components/GraphContextMenu.tsx
@@ -15,7 +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, setDoc, setDocText } from "../lib/docHelpers";
+import { getDoc, getDocText, setDocText } from "../lib/docHelpers";
 import { defaultGraphTheme, useCurrentTheme } from "../lib/graphThemes";
 import { borderStyles, shapes } from "../lib/graphUtilityClasses";
 import { useIsFirefox } from "../lib/hooks";
diff --git a/app/src/components/SignUpForm.tsx b/app/src/components/SignUpForm.tsx
index 8c266ad9..20b1bf45 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/EditMetaTab.tsx b/app/src/components/Tabs/EditMetaTab.tsx
index 5d77cc72..8665a073 100644
--- a/app/src/components/Tabs/EditMetaTab.tsx
+++ b/app/src/components/Tabs/EditMetaTab.tsx
@@ -12,6 +12,9 @@ export function EditMetaTab() {
   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);
diff --git a/app/src/components/Tabs/EditStyleTab.tsx b/app/src/components/Tabs/EditStyleTab.tsx
index 39de52ca..83ccb1e7 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 throttle from "lodash.throttle";
 
-import { getDoc, setDocImmer, useDocMeta } from "../../lib/docHelpers";
+import { setDocImmer, useDocMeta } from "../../lib/docHelpers";
 import { themes } from "../../lib/graphOptions";
 import {
   useBackgroundColor,
diff --git a/app/src/components/TextEditor.tsx b/app/src/components/TextEditor.tsx
index a7c5871c..1551e22c 100644
--- a/app/src/components/TextEditor.tsx
+++ b/app/src/components/TextEditor.tsx
@@ -1,10 +1,11 @@
 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 {
@@ -14,7 +15,6 @@ import {
   themeNameLight,
 } from "../lib/registerLanguage";
 import { useHoverLine } from "../lib/useHoverLine";
-import { AppContext } from "./AppContext";
 import Loading from "./Loading";
 import styles from "./TextEditor.module.css";
 
@@ -36,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;
diff --git a/app/src/lib/docHelpers.ts b/app/src/lib/docHelpers.ts
index de29e3fb..2dda7192 100644
--- a/app/src/lib/docHelpers.ts
+++ b/app/src/lib/docHelpers.ts
@@ -9,7 +9,6 @@ import produce from "immer";
 import { WritableDraft } from "immer/dist/internal";
 import { useEffect, useState } from "react";
 
-import { docToString } from "./docToString";
 import { getSafeYDoc } from "./realtime";
 import { Doc, useDetailsStore, useDoc } from "./useDoc";
 
@@ -23,19 +22,29 @@ export function setDoc(doc: Partial<Doc>, description: string) {
     const ydoc = getSafeYDoc();
     if (!ydoc) return;
     const { text, meta } = doc;
-    if (text) {
-      // Silent for now, relying on Monaco sync
-      // TODO: need a way to force it for things that update the text
-      // outside of Monaco
-    }
-    if (meta) {
-      const ymeta = ydoc.getMap("meta");
-      if (ymeta) {
-        for (const [key, value] of Object.entries(meta)) {
-          ymeta.set(key, value);
+    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(
@@ -271,7 +280,7 @@ export function useSafeDoc(): Doc {
  * when they change
  */
 function useDocUpdate(): Doc {
-  const [doc, setDoc] = useState<Doc>({ text: "", meta: {} });
+  const [localDoc, setLocaldoc] = useState<Doc>({ text: "", meta: {} });
 
   useEffect(() => {
     const ydoc = getSafeYDoc();
@@ -282,7 +291,7 @@ function useDocUpdate(): Doc {
     if (!text || !meta) return;
 
     const updateHandler = () => {
-      setDoc({
+      setLocaldoc({
         text: text.toString(),
         meta: meta.toJSON(),
       });
@@ -297,5 +306,5 @@ function useDocUpdate(): Doc {
     };
   }, []);
 
-  return doc;
+  return localDoc;
 }
diff --git a/app/src/lib/graphThemes.tsx b/app/src/lib/graphThemes.tsx
index af3efdcc..5892e24a 100644
--- a/app/src/lib/graphThemes.tsx
+++ b/app/src/lib/graphThemes.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from "react-query";
 
-import { getDoc, useDocMeta } from "./docHelpers";
+import { useDocMeta } from "./docHelpers";
 import { Theme } from "./themes/constants";
 
 export type GraphThemes =
diff --git a/app/src/lib/parsers.ts b/app/src/lib/parsers.ts
index 0b2394b9..f654445e 100644
--- a/app/src/lib/parsers.ts
+++ b/app/src/lib/parsers.ts
@@ -1,7 +1,7 @@
 import { ElementDefinition } from "cytoscape";
 import { parse, toCytoscapeElements } from "graph-selector";
 
-import { getDoc, useDocMeta } from "./docHelpers";
+import { useDocMeta } from "./docHelpers";
 import { TGetSize } from "./getGetSize";
 import { SelectOption } from "./graphOptions";
 import { parseText } from "./parseText";
diff --git a/app/src/lib/prepareChart/prepareChart.test.ts b/app/src/lib/prepareChart/prepareChart.test.ts
index 0d19ca0a..3055145f 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,16 +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({
+    expect(prepareChart(getFixture("example8"))).toEqual({
       details: {
         id: "",
         isHosted: false,
@@ -189,11 +178,7 @@ longer label text
   });
 
   test("if a document has no parser but has default text, add v1", () => {
-    expect(
-      prepareChart(getFixture("example9"), {
-        ...initialDoc.details,
-      })
-    ).toEqual({
+    expect(prepareChart(getFixture("example9"))).toEqual({
       details: {
         id: "",
         isHosted: false,
diff --git a/app/src/lib/prepareChart/prepareChart.ts b/app/src/lib/prepareChart/prepareChart.ts
index e6787acf..f8fc7393 100644
--- a/app/src/lib/prepareChart/prepareChart.ts
+++ b/app/src/lib/prepareChart/prepareChart.ts
@@ -7,7 +7,6 @@ import {
   newDelimiters,
 } from "../constants";
 import { setDoc } from "../docHelpers";
-import { Details, useDetailsStore } from "../useDoc";
 
 /**
  * ### Goals
@@ -22,7 +21,7 @@ import { Details, useDetailsStore } 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 = {};
@@ -73,8 +72,6 @@ export function prepareChart(doc: string, details: Details) {
   text = `${text.trim()}\n`;
 
   setDoc({ text, meta }, "prepareChart");
-  // set the useDocDetailsStore too
-  useDetailsStore.setState(details, false, "prepareChart");
 
   return {
     text,
diff --git a/app/src/lib/realtime.ts b/app/src/lib/realtime.ts
index 31ee4737..b3899a40 100644
--- a/app/src/lib/realtime.ts
+++ b/app/src/lib/realtime.ts
@@ -19,11 +19,8 @@ const useYDoc = create<{
   })
 );
 
-let timesCalled = 0;
-
 // Create a Yjs document
 export function setupYDoc(type: "hosted", id: string) {
-  console.log("setupYDoc called", timesCalled++);
   const providerUrl = process.env.REACT_APP_WEBSOCKET_PROVIDER;
   if (!providerUrl) throw new Error("REACT_APP_WEBSOCKET_PROVIDER not found");
 
diff --git a/app/src/pages/Edit.tsx b/app/src/pages/Edit.tsx
index aeae3601..6869c109 100644
--- a/app/src/pages/Edit.tsx
+++ b/app/src/pages/Edit.tsx
@@ -16,13 +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 { setDoc, subscribeToDoc, useDocText } from "../lib/docHelpers";
+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 } 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";
@@ -54,7 +54,8 @@ const Edit = memo(function Edit() {
   useEffect(() => subscribeToDoc(storeDoc), [storeDoc]);
 
   const onChange = useCallback(
-    (value) => setDoc({ text: value ?? "" }, "Edit/text"),
+    // Intentionally only using the local useDoc here
+    (value) => useDoc.setState({ text: value ?? "" }, false, "Edit/text"),
     []
   );
 
@@ -119,7 +120,7 @@ const Edit = memo(function Edit() {
         </EditorWrapper>
         <ClearTextButton
           handleClear={() => {
-            setDoc({ text: "", meta: {} }, "Edit/clear");
+            useDoc.setState({ text: "", meta: {} }, false, "Edit/clear");
             if (editorRef.current) {
               editorRef.current.focus();
             }
@@ -142,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.tsx b/app/src/pages/EditHosted.tsx
index 71a44d8c..2ffd3841 100644
--- a/app/src/pages/EditHosted.tsx
+++ b/app/src/pages/EditHosted.tsx
@@ -2,10 +2,9 @@ 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 { 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";
@@ -18,11 +17,12 @@ import { EditLayoutTab } from "../components/Tabs/EditLayoutTab";
 import { EditMetaTab } from "../components/Tabs/EditMetaTab";
 import { EditStyleTab } from "../components/Tabs/EditStyleTab";
 import { TextEditor } from "../components/TextEditor";
-import { setDoc, setDocText, useDocText } from "../lib/docHelpers";
+import { setDocText, useDocText } from "../lib/docHelpers";
 import { useIsValidSponsor } from "../lib/hooks";
 import { prepareChart } from "../lib/prepareChart/prepareChart";
 import { getHostedChart } from "../lib/queries";
 import { setupYDoc } 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";
@@ -39,36 +39,9 @@ export default function EditHosted() {
     }
   );
 
-  // const { mutate, isLoading } = useMutation((text: string) =>
-  //   updateChartText(text, id)
-  // );
-  // get debounced mutate
-  // const {
-  //   callback: debounceMutate,
-  //   flush,
-  //   pending,
-  // } = useDebouncedCallback((doc: Doc) => {
-  //   mutate(docToString(doc));
-  // }, 1000);
-  // useEffect(() => subscribeToDoc(debounceMutate), [debounceMutate]);
-
   const text = useDocText();
-
   const editorRef = useRef<null | Parameters<OnMount>[0]>(null);
 
-  // This is to make sure we update if people exit the tab quickly
-  // useEffect(() => {
-  //   return () => {
-  //     flush();
-  //   };
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, []);
-
-  const onChange = useCallback(
-    (value) => setDoc({ text: value ?? "" }, "EditHosted/text"),
-    []
-  );
-
   const { url } = useRouteMatch();
   useTrackLastChart(url);
   const isValidSponsor = useIsValidSponsor();
@@ -99,7 +72,6 @@ export default function EditHosted() {
                 <TextEditor
                   editorRef={editorRef}
                   value={text}
-                  onChange={onChange}
                   bindToRealtime={isSuccess}
                 />
               </EditorOptions>
@@ -156,12 +128,15 @@ function LoadingState({
 }
 
 async function loadHostedDoc(id: string) {
-  // we need to create the ydoc
+  // setup y doc asap
   setupYDoc("hosted", id);
+
+  // 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,
diff --git a/app/src/pages/Public.tsx b/app/src/pages/Public.tsx
index c6be51d9..d505a028 100644
--- a/app/src/pages/Public.tsx
+++ b/app/src/pages/Public.tsx
@@ -7,6 +7,7 @@ import GraphWrapper from "../components/GraphWrapper";
 import styles from "../components/Main.module.css";
 import { prepareChart } from "../lib/prepareChart/prepareChart";
 import { getPublicChart } from "../lib/queries";
+import { useDetailsStore } from "../lib/useDoc";
 
 const shouldResize = 0;
 
@@ -32,7 +33,8 @@ async function loadPublicDoc(id: string) {
   const chart = await getPublicChart(id);
   if (!chart) throw new Error("Chart not found");
   const doc = chart.chart;
-  prepareChart(doc, {
+  prepareChart(doc);
+  useDetailsStore.setState({
     isHosted: true,
     title: doc.name,
     id: doc.id,
diff --git a/app/src/pages/ReadOnly.tsx b/app/src/pages/ReadOnly.tsx
index f6f89688..1383a533 100644
--- a/app/src/pages/ReadOnly.tsx
+++ b/app/src/pages/ReadOnly.tsx
@@ -11,6 +11,7 @@ import Main from "../components/Main";
 import { TextEditor } from "../components/TextEditor";
 import { getDocText } from "../lib/docHelpers";
 import { prepareChart } from "../lib/prepareChart/prepareChart";
+import { useDetailsStore } from "../lib/useDoc";
 
 function ReadOnly() {
   const { path } = useRouteMatch();
@@ -56,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",

From 7216c08be0837e6c050f090b732a21b13cd42227 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Tue, 28 Feb 2023 13:05:42 -0500
Subject: [PATCH 13/19] feat(realtim): explcit meta update; close old providers

---
 app/src/components/EditorOptions.tsx      |  6 +--
 app/src/components/Graph.tsx              |  6 +--
 app/src/components/ShareDialog.tsx        |  4 +-
 app/src/components/Tabs/EditLayoutTab.tsx | 30 +++++++-------
 app/src/components/Tabs/EditStyleTab.tsx  | 14 +++----
 app/src/lib/docHelpers.ts                 | 49 ++++++++++++-----------
 app/src/lib/realtime.ts                   |  3 ++
 app/src/lib/useIsFrozen.ts                |  6 +--
 app/src/pages/EditHosted.tsx              | 25 ------------
 9 files changed, 61 insertions(+), 82 deletions(-)

diff --git a/app/src/components/EditorOptions.tsx b/app/src/components/EditorOptions.tsx
index a0608082..fe3e6247 100644
--- a/app/src/components/EditorOptions.tsx
+++ b/app/src/components/EditorOptions.tsx
@@ -1,7 +1,7 @@
 import { Trans } from "@lingui/macro";
 import React, { ReactNode } from "react";
 
-import { setDocImmer } from "../lib/docHelpers";
+import { setMetaImmer } from "../lib/docHelpers";
 import { parsers, useParser } from "../lib/parsers";
 import { Box, Type } from "../slang";
 import styles from "./EditorOptions.module.css";
@@ -28,8 +28,8 @@ export function EditorOptions({ children }: { children: ReactNode }) {
             background="color-lineNumbers"
             value={parser}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-              setDocImmer((draft) => {
-                draft.meta.parser = e.target.value;
+              setMetaImmer((draft) => {
+                draft.parser = e.target.value;
               }, "syntax");
             }}
           >
diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
index 8eecb515..c886fc10 100644
--- a/app/src/components/Graph.tsx
+++ b/app/src/components/Graph.tsx
@@ -18,7 +18,7 @@ import { useDebouncedCallback } from "use-debounce";
 
 import { buildStylesForGraph } from "../lib/buildStylesForGraph";
 import { cytoscape } from "../lib/cytoscape";
-import { getDoc, setDocImmer, subscribeToDoc } from "../lib/docHelpers";
+import { getDoc, setMetaImmer, subscribeToDoc } from "../lib/docHelpers";
 import { getGetSize, TGetSize } from "../lib/getGetSize";
 import { getLayout } from "../lib/getLayout";
 import { getUserStyle } from "../lib/getTheme";
@@ -73,8 +73,8 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
   const parser = useParser();
   const handleDragFree = useCallback(() => {
     const nodePositions = getNodePositionsFromCy();
-    setDocImmer((draft) => {
-      draft.meta.nodePositions = nodePositions;
+    setMetaImmer((draft) => {
+      draft.nodePositions = nodePositions;
     }, "Graph/handleDragFree");
   }, []);
 
diff --git a/app/src/components/ShareDialog.tsx b/app/src/components/ShareDialog.tsx
index f8713263..f102daf4 100644
--- a/app/src/components/ShareDialog.tsx
+++ b/app/src/components/ShareDialog.tsx
@@ -118,7 +118,7 @@ export default function ShareDialog() {
         </Title>
         <Mermaid />
       </Column>
-      {isHosted ? (
+      {/* {isHosted ? (
         <Column>
           <Title>Share</Title>
           <Button
@@ -143,7 +143,7 @@ export default function ShareDialog() {
             Share with Other Rob
           </Button>
         </Column>
-      ) : null}
+      ) : null} */}
     </Dialog>
   );
 }
diff --git a/app/src/components/Tabs/EditLayoutTab.tsx b/app/src/components/Tabs/EditLayoutTab.tsx
index c9dbefb1..d6067628 100644
--- a/app/src/components/Tabs/EditLayoutTab.tsx
+++ b/app/src/components/Tabs/EditLayoutTab.tsx
@@ -2,7 +2,7 @@ import { t, Trans } from "@lingui/macro";
 import { FaRegSnowflake } from "react-icons/fa";
 
 import { GraphOptionsObject } from "../../lib/constants";
-import { setDocImmer, useSafeDoc } from "../../lib/docHelpers";
+import { setMetaImmer, useSafeDoc } from "../../lib/docHelpers";
 import { defaultLayout, getLayout } from "../../lib/getLayout";
 import { directions, layouts } from "../../lib/graphOptions";
 import { hasOwnProperty } from "../../lib/helpers";
@@ -75,11 +75,11 @@ export function EditLayoutTab() {
             options={layouts}
             value={layoutName}
             onValueChange={(name) => {
-              setDocImmer((draft) => {
-                if (!draft.meta.layout) draft.meta.layout = {};
+              setMetaImmer((draft) => {
+                if (!draft.layout) draft.layout = {};
                 // This any is because typing the layout object is too restrictive
-                (draft.meta.layout as any).name = name;
-                delete draft.meta.nodePositions;
+                (draft.layout as any).name = name;
+                delete draft.nodePositions;
               }, "EditLayoutTab/layout");
             }}
           />
@@ -91,11 +91,11 @@ export function EditLayoutTab() {
               options={directions}
               value={direction}
               onValueChange={(direction) => {
-                setDocImmer((draft) => {
-                  if (!draft.meta.layout) draft.meta.layout = {};
+                setMetaImmer((draft) => {
+                  if (!draft.layout) draft.layout = {};
                   // This any is because typing the layout object is too restrictive
-                  (draft.meta.layout as any).rankDir = direction;
-                  delete draft.meta.nodePositions;
+                  (draft.layout as any).rankDir = direction;
+                  delete draft.nodePositions;
                 }, "EditLayoutTab/direction");
               }}
             />
@@ -129,11 +129,11 @@ export function EditLayoutTab() {
                 min={0.25}
                 className={styles.numberInput}
                 onChange={(e) => {
-                  setDocImmer((draft) => {
-                    if (!draft.meta.layout) draft.meta.layout = {};
+                  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(
+                    (draft.layout as any).spacingFactor = parseFloat(
                       e.target.value
                     );
                   }, "EditLayoutTab/spacing-number");
@@ -146,10 +146,10 @@ export function EditLayoutTab() {
                 step={0.01}
                 value={[spacingFactor || 0]}
                 onValueChange={([value]) => {
-                  setDocImmer((draft) => {
-                    if (!draft.meta.layout) draft.meta.layout = {};
+                  setMetaImmer((draft) => {
+                    if (!draft.layout) draft.layout = {};
                     // This any is because typing the layout object is too restrictive
-                    (draft.meta.layout as any).spacingFactor = value;
+                    (draft.layout as any).spacingFactor = value;
                   }, "EditLayoutTab/spacing");
                 }}
               />
diff --git a/app/src/components/Tabs/EditStyleTab.tsx b/app/src/components/Tabs/EditStyleTab.tsx
index 83ccb1e7..65fa6911 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 throttle from "lodash.throttle";
 
-import { setDocImmer, useDocMeta } from "../../lib/docHelpers";
+import { setMetaImmer, useDocMeta } from "../../lib/docHelpers";
 import { themes } from "../../lib/graphOptions";
 import {
   useBackgroundColor,
@@ -35,8 +35,8 @@ export function EditStyleTab() {
             options={themes}
             value={themeKey}
             onValueChange={(themeKey) => {
-              setDocImmer((draft) => {
-                draft.meta.theme = themeKey;
+              setMetaImmer((draft) => {
+                draft.theme = themeKey;
               }, "EditStyleTab/theme");
             }}
           />
@@ -61,8 +61,8 @@ export function EditStyleTab() {
             {meta.background && (
               <Button
                 onClick={() => {
-                  setDocImmer((draft) => {
-                    delete draft.meta?.background;
+                  setMetaImmer((draft) => {
+                    delete draft?.background;
                   }, "EditStyleTab/remove-bg");
                   // find an input[type=color] and set it to the background color
                   const colorInput = document.querySelector(
@@ -90,8 +90,8 @@ export function EditStyleTab() {
 
 const throttleBGUpdate = throttle(
   (bg: string) => {
-    setDocImmer((draft) => {
-      draft.meta.background = bg;
+    setMetaImmer((draft) => {
+      draft.background = bg;
     }, "EditStyleTab/bg");
   },
   75,
diff --git a/app/src/lib/docHelpers.ts b/app/src/lib/docHelpers.ts
index 2dda7192..f67c7c6a 100644
--- a/app/src/lib/docHelpers.ts
+++ b/app/src/lib/docHelpers.ts
@@ -58,37 +58,38 @@ export function setDoc(doc: Partial<Doc>, description: string) {
   }
 }
 
-type SetDocImmerCallback = (draft: WritableDraft<Doc>) => void;
-
-export function setDocImmer(cb: SetDocImmerCallback, description: string) {
+export function setMetaImmer(
+  cb: (draft: WritableDraft<Doc["meta"]>) => void,
+  description: string
+) {
   const isHosted = useDetailsStore.getState().isHosted;
-  // mutate the doc
   if (isHosted) {
     const ydoc = getSafeYDoc();
     if (!ydoc) return;
-    const text = ydoc.getText("text");
     const meta = ydoc.getMap("meta");
-    if (!text || !meta) return;
-    const fullDoc = {
-      text: text.toString(),
-      meta: meta.toJSON(),
-    };
-    const newDoc = produce(fullDoc, cb);
-    if (newDoc.text !== fullDoc.text) {
-      // Silent for now, relying on Monaco sync
-    }
-    for (const [key, value] of Object.entries(newDoc.meta)) {
-      meta.set(key, value);
-    }
-    // delete any keys that were removed
-    for (const key of Object.keys(fullDoc.meta)) {
-      if (!(key in newDoc.meta)) {
-        meta.delete(key);
+    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 {
-    // mutate the zustand store
-    useDoc.setState((cur) => produce(cur, cb), false, description);
+    useDoc.setState(
+      (cur) => ({
+        ...cur,
+        meta: produce(cur.meta, cb),
+      }),
+      false,
+      description
+    );
   }
 }
 
diff --git a/app/src/lib/realtime.ts b/app/src/lib/realtime.ts
index b3899a40..957d0665 100644
--- a/app/src/lib/realtime.ts
+++ b/app/src/lib/realtime.ts
@@ -28,6 +28,9 @@ export function setupYDoc(type: "hosted", id: string) {
   const currentProvider = useYDoc.getState().provider;
   if (currentProvider?.roomname === `${type}-${id}`) return;
 
+  // If there is a provider, disconnect it
+  if (currentProvider) currentProvider.disconnect();
+
   const ydoc = new Y.Doc();
 
   // Create a provider
diff --git a/app/src/lib/useIsFrozen.ts b/app/src/lib/useIsFrozen.ts
index 05413aa3..b7643247 100644
--- a/app/src/lib/useIsFrozen.ts
+++ b/app/src/lib/useIsFrozen.ts
@@ -1,9 +1,9 @@
-import { getDoc, setDocImmer } from "./docHelpers";
+import { getDoc, setMetaImmer } from "./docHelpers";
 import { getLayout } from "./getLayout";
 
 export function unfreezeDoc() {
-  setDocImmer((draft) => {
-    delete draft.meta.nodePositions;
+  setMetaImmer((draft) => {
+    delete draft.nodePositions;
   }, "unfreezeDoc");
 }
 
diff --git a/app/src/pages/EditHosted.tsx b/app/src/pages/EditHosted.tsx
index 2ffd3841..1a51f75d 100644
--- a/app/src/pages/EditHosted.tsx
+++ b/app/src/pages/EditHosted.tsx
@@ -19,7 +19,6 @@ import { EditStyleTab } from "../components/Tabs/EditStyleTab";
 import { TextEditor } from "../components/TextEditor";
 import { setDocText, useDocText } from "../lib/docHelpers";
 import { useIsValidSponsor } from "../lib/hooks";
-import { prepareChart } from "../lib/prepareChart/prepareChart";
 import { getHostedChart } from "../lib/queries";
 import { setupYDoc } from "../lib/realtime";
 import { useDetailsStore } from "../lib/useDoc";
@@ -89,7 +88,6 @@ export default function EditHosted() {
             )}
           </Tabs.Root>
         </EditorWrapper>
-        <LoadingState isLoading={false} pending={false} />
         <ClearTextButton
           handleClear={() => {
             setDocText("", "EditHosted/clear");
@@ -104,29 +102,6 @@ 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) {
   // setup y doc asap
   setupYDoc("hosted", id);

From 1768129ece1c8effb360b2ee18e566622f523e9f Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Wed, 1 Mar 2023 09:27:50 -0500
Subject: [PATCH 14/19] fix(wss): reduce double content bug

---
 app/src/components/Graph.tsx        |  7 +---
 app/src/components/ShareDialog.tsx  |  3 --
 app/src/lib/docHelpers.ts           | 56 +++++++++++++++++--------
 app/src/lib/realtime.ts             | 16 +++++--
 app/src/pages/EditHosted.module.css | 12 ------
 app/src/pages/EditHosted.tsx        | 39 ++++++++++-------
 app/src/pages/Public.tsx            | 16 ++++---
 wss/src/server.mjs                  | 65 ++++++++++++++++-------------
 8 files changed, 124 insertions(+), 90 deletions(-)
 delete mode 100644 app/src/pages/EditHosted.module.css

diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
index c886fc10..9d388a4e 100644
--- a/app/src/components/Graph.tsx
+++ b/app/src/components/Graph.tsx
@@ -5,7 +5,6 @@ import klay from "cytoscape-klay";
 import cytoscapeSvg from "cytoscape-svg";
 import throttle from "lodash.throttle";
 import React, {
-  memo,
   MutableRefObject,
   useCallback,
   useEffect,
@@ -60,7 +59,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>();
@@ -156,9 +155,7 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
       <GraphContextMenu />
     </Box>
   );
-});
-
-export default Graph;
+}
 
 function initializeGraph({
   errorCatcher,
diff --git a/app/src/components/ShareDialog.tsx b/app/src/components/ShareDialog.tsx
index f102daf4..1ec31abc 100644
--- a/app/src/components/ShareDialog.tsx
+++ b/app/src/components/ShareDialog.tsx
@@ -15,7 +15,6 @@ import { useMutation } from "react-query";
 
 import { getDoc } from "../lib/docHelpers";
 import { docToString } from "../lib/docToString";
-import { useChartId } from "../lib/hooks";
 import {
   track_copyEditableShareLink,
   track_copyFullscreenShareLink,
@@ -27,7 +26,6 @@ import {
 } from "../lib/logsnag";
 import { toMermaidJS } from "../lib/mermaid";
 import { makeChartPublic } from "../lib/queries";
-import { supabase } from "../lib/supabaseClient";
 import { useDetails } from "../lib/useDetails";
 import { useDetailsStore } from "../lib/useDoc";
 import { useGraphStore } from "../lib/useGraphStore";
@@ -48,7 +46,6 @@ export default function ShareDialog() {
   const fullscreen = `${new URL(window.location.href).origin}/f#${shareLink}`;
   const readOnly = `${new URL(window.location.href).origin}/c#${shareLink}`;
   const editable = `${new URL(window.location.href).origin}/n#${shareLink}`;
-  const chartId = useChartId();
 
   return (
     <Dialog
diff --git a/app/src/lib/docHelpers.ts b/app/src/lib/docHelpers.ts
index f67c7c6a..2a578700 100644
--- a/app/src/lib/docHelpers.ts
+++ b/app/src/lib/docHelpers.ts
@@ -107,6 +107,7 @@ export function setDocText(text: string, description: string) {
     const ytext = ydoc.getText("text");
     if (!ytext) return;
     ydoc.transact(() => {
+      if (!ytext) return;
       ytext.delete(0, ytext.length);
       ytext.insert(0, text);
     });
@@ -124,26 +125,18 @@ export function subscribeToDoc(cb: (doc: Doc) => void) {
     const meta = ydoc.getMap("meta");
     if (!text || !meta) return;
 
-    const getFullDoc = () => {
-      return {
+    const runCallback = () =>
+      cb({
         text: text.toString(),
         meta: meta.toJSON(),
-      };
-    };
+      });
+
+    text.observe(runCallback);
+    meta.observe(runCallback);
 
-    text.observe(() => {
-      cb(getFullDoc());
-    });
-    meta.observe(() => {
-      cb(getFullDoc());
-    });
     return () => {
-      text.unobserve(() => {
-        cb(getFullDoc());
-      });
-      meta.unobserve(() => {
-        cb(getFullDoc());
-      });
+      text.unobserve(runCallback);
+      meta.unobserve(runCallback);
     };
   } else {
     // subscribe to zustand store
@@ -193,6 +186,35 @@ export function getDocText(): string {
   }
 }
 
+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) {
@@ -221,7 +243,7 @@ export function useDocText(): string {
   } else {
     // get the zustand store
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useDoc((state) => state.text);
+    return useDoc((state) => state?.text ?? "");
   }
 }
 
diff --git a/app/src/lib/realtime.ts b/app/src/lib/realtime.ts
index 957d0665..7e65e7ca 100644
--- a/app/src/lib/realtime.ts
+++ b/app/src/lib/realtime.ts
@@ -20,13 +20,15 @@ const useYDoc = create<{
 );
 
 // Create a Yjs document
-export function setupYDoc(type: "hosted", id: string) {
+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 === `${type}-${id}`) return;
+  if (currentProvider?.roomname === roomName) return;
 
   // If there is a provider, disconnect it
   if (currentProvider) currentProvider.disconnect();
@@ -34,19 +36,25 @@ export function setupYDoc(type: "hosted", id: string) {
   const ydoc = new Y.Doc();
 
   // Create a provider
-  const provider = new WebsocketProvider(providerUrl, `${type}-${id}`, ydoc);
+  const provider = new WebsocketProvider(providerUrl, roomName, ydoc);
 
   // set references in store
   useYDoc.setState({ ydoc, provider });
 }
 
+export function cleanupYDoc() {
+  console.log("Cleanup ydoc");
+  const provider = useYDoc.getState().provider;
+  if (provider) provider.disconnect();
+  useYDoc.setState({ ydoc: undefined, provider: undefined });
+}
+
 /**
  * Returns the ydoc if it exists or false if it doesn't
  */
 export function getSafeYDoc() {
   const ydoc = useYDoc.getState().ydoc;
   if (!ydoc) {
-    logError(new Error("Y.Doc not found"));
     return false;
   }
   return ydoc;
diff --git a/app/src/pages/EditHosted.module.css b/app/src/pages/EditHosted.module.css
deleted file mode 100644
index 1807628a..00000000
--- 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 1a51f75d..b2ea69ba 100644
--- a/app/src/pages/EditHosted.tsx
+++ b/app/src/pages/EditHosted.tsx
@@ -1,8 +1,7 @@
 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 { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useQuery } from "react-query";
 import { useParams, useRouteMatch } from "react-router-dom";
 
@@ -12,19 +11,17 @@ import { EditorOptions } from "../components/EditorOptions";
 import { EditorWrapper } from "../components/EditorWrapper";
 import { EditWrapper } from "../components/EditWrapper";
 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, useDocText } from "../lib/docHelpers";
+import { setDocText } from "../lib/docHelpers";
 import { useIsValidSponsor } from "../lib/hooks";
 import { getHostedChart } from "../lib/queries";
-import { setupYDoc } from "../lib/realtime";
+import { cleanupYDoc, setupYDoc } 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 }>();
@@ -35,10 +32,27 @@ export default function EditHosted() {
       enabled: !!id,
       suspense: true,
       staleTime: 0,
+      cacheTime: 0,
     }
   );
 
-  const text = useDocText();
+  useEffect(() => {
+    return () => {
+      // clear details
+      useDetailsStore.setState({
+        id: undefined,
+        title: "",
+        // intentionally leave isHosted in the same position
+        isHosted: true,
+        isPublic: false,
+        publicId: undefined,
+      });
+
+      // clear y doc
+      cleanupYDoc();
+    };
+  }, []);
+
   const editorRef = useRef<null | Parameters<OnMount>[0]>(null);
 
   const { url } = useRouteMatch();
@@ -68,11 +82,7 @@ export default function EditHosted() {
             </Tabs.List>
             <Tabs.Content value="Document">
               <EditorOptions>
-                <TextEditor
-                  editorRef={editorRef}
-                  value={text}
-                  bindToRealtime={isSuccess}
-                />
+                <TextEditor editorRef={editorRef} bindToRealtime={isSuccess} />
               </EditorOptions>
             </Tabs.Content>
             <Tabs.Content value="Layout">
@@ -103,9 +113,6 @@ export default function EditHosted() {
 }
 
 async function loadHostedDoc(id: string) {
-  // setup y doc asap
-  setupYDoc("hosted", id);
-
   // Make sure user has access by loading here
   const chart = await getHostedChart(id);
   if (!chart) throw new Error("Chart not found");
@@ -118,4 +125,6 @@ async function loadHostedDoc(id: string) {
     isPublic: chart.is_public,
     publicId: chart.public_id,
   });
+
+  setupYDoc("hosted", id);
 }
diff --git a/app/src/pages/Public.tsx b/app/src/pages/Public.tsx
index d505a028..bdf25549 100644
--- a/app/src/pages/Public.tsx
+++ b/app/src/pages/Public.tsx
@@ -5,8 +5,8 @@ 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;
@@ -16,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%" } }}>
@@ -32,12 +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/wss/src/server.mjs b/wss/src/server.mjs
index 103bbd9d..b2c3b82a 100644
--- a/wss/src/server.mjs
+++ b/wss/src/server.mjs
@@ -16,7 +16,6 @@ const server = new Hocuspocus({
   extensions: [
     new Database({
       fetch: async ({ documentName }) => {
-        console.log("fetching", documentName);
         // create ydoc
         const ydoc = new Y.Doc();
         // create ytext
@@ -24,33 +23,43 @@ const server = new Hocuspocus({
         // meta
         const ymeta = ydoc.getMap("meta");
         try {
-          const [_docType, id] = documentName.split("-");
-          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);
-              }
-            });
+          const [docType, id] = documentName.split("_");
+          console.log({
+            docType,
+            id,
           });
+          if (docType === "hosted") {
+            console.log("Looking up hosted chart: ", id);
+            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);
+                }
+              });
+            });
+          } else if (docType === "public") {
+            console.log("Need to lookup public chart!");
+            // Potentially this should be outside of the database extension
+          }
         } catch (e) {
           console.log(e);
         }
@@ -58,7 +67,7 @@ const server = new Hocuspocus({
         return Y.encodeStateAsUpdate(ydoc);
       },
       store: async ({ documentName, state }) => {
-        const [_docType, id] = documentName.split("-");
+        const [_docType, id] = documentName.split("_");
 
         // get "text" string from state buffer
         const ydoc = new Y.Doc();

From 7efedb563b5eceb5313cd958e8fee8b51c850f21 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Wed, 1 Mar 2023 11:39:04 -0500
Subject: [PATCH 15/19] Refactor useDocUpdate to include initial update

---
 app/src/lib/docHelpers.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/src/lib/docHelpers.ts b/app/src/lib/docHelpers.ts
index 2a578700..0d608769 100644
--- a/app/src/lib/docHelpers.ts
+++ b/app/src/lib/docHelpers.ts
@@ -320,6 +320,9 @@ function useDocUpdate(): Doc {
       });
     };
 
+    // Needs to be run once to set the initial value
+    updateHandler();
+
     text.observe(updateHandler);
     meta.observe(updateHandler);
 

From 90b3d3d2ee6145a0062d0a2ce5ecf9921686d6f0 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Wed, 1 Mar 2023 11:40:36 -0500
Subject: [PATCH 16/19] Update size object to include textMarginX and
 textMarginY

---
 app/src/lib/parsers.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/src/lib/parsers.ts b/app/src/lib/parsers.ts
index f654445e..5d437df5 100644
--- a/app/src/lib/parsers.ts
+++ b/app/src/lib/parsers.ts
@@ -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(

From 6889d6001c11aeb2093c08be900a8e42ff722600 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Wed, 1 Mar 2023 12:55:30 -0500
Subject: [PATCH 17/19] Commit: Add userStyle to Graph component and
 useUserStyle to getTheme

---
 app/src/components/Graph.tsx | 12 +++++++-----
 app/src/lib/getTheme.ts      |  8 ++++----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
index 9d388a4e..b330bd75 100644
--- a/app/src/components/Graph.tsx
+++ b/app/src/components/Graph.tsx
@@ -20,7 +20,7 @@ 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,
@@ -67,6 +67,7 @@ export default function Graph({ shouldResize }: { shouldResize: number }) {
   const themeKey = useThemeKey();
   const theme = useCurrentTheme(themeKey) as unknown as Theme;
   const bg = useBackgroundColor(theme);
+  const userStyle = useUserStyle();
 
   const getSize = useRef<TGetSize>(getGetSize(theme));
   const parser = useParser();
@@ -115,8 +116,8 @@ export default 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(
     () =>
@@ -316,17 +317,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/lib/getTheme.ts b/app/src/lib/getTheme.ts
index 781c3022..ae7ac96c 100644
--- a/app/src/lib/getTheme.ts
+++ b/app/src/lib/getTheme.ts
@@ -1,6 +1,6 @@
 import { StylesheetStyle } from "cytoscape";
 
-import { getDoc } from "./docHelpers";
+import { getDoc, useDocMeta } from "./docHelpers";
 
 /**
  * Get the user style from the document metadata.
@@ -9,6 +9,6 @@ export function getUserStyle() {
   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[];
+}

From 768edf01edf8ed15081aef4cd3efaecab2abfd50 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Wed, 1 Mar 2023 13:51:27 -0500
Subject: [PATCH 18/19] fix tests

---
 app/package.json                              |  5 ++++-
 app/src/components/Router.test.tsx            | 18 ------------------
 app/src/lib/prepareChart/prepareChart.test.ts | 10 ----------
 3 files changed, 4 insertions(+), 29 deletions(-)
 delete mode 100644 app/src/components/Router.test.tsx

diff --git a/app/package.json b/app/package.json
index 3d5fceda..e7eefa87 100644
--- a/app/package.json
+++ b/app/package.json
@@ -194,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/Router.test.tsx b/app/src/components/Router.test.tsx
deleted file mode 100644
index 82893391..00000000
--- 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/lib/prepareChart/prepareChart.test.ts b/app/src/lib/prepareChart/prepareChart.test.ts
index 3055145f..24a5011a 100644
--- a/app/src/lib/prepareChart/prepareChart.test.ts
+++ b/app/src/lib/prepareChart/prepareChart.test.ts
@@ -165,11 +165,6 @@ longer label text
 
   test("if a document has a parser it shouldn't change", () => {
     expect(prepareChart(getFixture("example8"))).toEqual({
-      details: {
-        id: "",
-        isHosted: false,
-        title: "",
-      },
       meta: {
         parser: "v1",
       },
@@ -179,11 +174,6 @@ longer label text
 
   test("if a document has no parser but has default text, add v1", () => {
     expect(prepareChart(getFixture("example9"))).toEqual({
-      details: {
-        id: "",
-        isHosted: false,
-        title: "",
-      },
       meta: {
         parser: "v1",
       },

From c3c5290a7dee0855459dbd977903c7c6ede7a28c Mon Sep 17 00:00:00 2001
From: Rob Gordon <rchristopher.gordon@gmail.com>
Date: Wed, 1 Mar 2023 20:50:36 -0500
Subject: [PATCH 19/19] unfix: storing encoded doc in supa storage... not
 working

---
 app/src/components/Graph.tsx      |  29 ++++++--
 app/src/components/TextEditor.tsx |   1 +
 app/src/index.tsx                 |   1 +
 app/src/lib/realtime.ts           |  24 +++++--
 app/src/pages/EditHosted.tsx      |  10 ++-
 wss/src/server.mjs                | 115 ++++++++++++++++++++----------
 6 files changed, 131 insertions(+), 49 deletions(-)

diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
index b330bd75..e9ba21b3 100644
--- a/app/src/components/Graph.tsx
+++ b/app/src/components/Graph.tsx
@@ -5,7 +5,9 @@ import klay from "cytoscape-klay";
 import cytoscapeSvg from "cytoscape-svg";
 import throttle from "lodash.throttle";
 import React, {
+  Dispatch,
   MutableRefObject,
+  SetStateAction,
   useCallback,
   useEffect,
   useMemo,
@@ -30,10 +32,11 @@ 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 } from "../lib/useDoc";
+import { Doc, useDetailsStore } from "../lib/useDoc";
 import { useGraphStore } from "../lib/useGraphStore";
 import { useHoverLine } from "../lib/useHoverLine";
 import { useParseError } from "../lib/useParseError";
@@ -68,6 +71,7 @@ export default function Graph({ shouldResize }: { shouldResize: number }) {
   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();
@@ -95,6 +99,7 @@ export default function Graph({ shouldResize }: { shouldResize: number }) {
 
   // Initialize Graph
   useEffect(() => {
+    if (graphInitialized.current) return;
     return initializeGraph({
       errorCatcher,
       cy,
@@ -121,7 +126,13 @@ export default function Graph({ shouldResize }: { shouldResize: number }) {
 
   const throttleUpdate = useMemo(
     () =>
-      getGraphUpdater({ cy, errorCatcher, graphInitialized, getSize, parser }),
+      getGraphUpdater({
+        cy,
+        errorCatcher,
+        graphInitialized,
+        getSize,
+        parser,
+      }),
     [parser]
   );
 
@@ -271,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,
@@ -301,6 +318,8 @@ function getGraphUpdater({
 
       // Update Graph Store
       useGraphStore.setState({ layout, elements });
+
+      //
     } catch (e) {
       errorCatcher.current.destroy();
       errorCatcher.current = cytoscape();
diff --git a/app/src/components/TextEditor.tsx b/app/src/components/TextEditor.tsx
index 1551e22c..279bc7fa 100644
--- a/app/src/components/TextEditor.tsx
+++ b/app/src/components/TextEditor.tsx
@@ -100,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 b1623cb1..2a9268b0 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/realtime.ts b/app/src/lib/realtime.ts
index 7e65e7ca..52a420d2 100644
--- a/app/src/lib/realtime.ts
+++ b/app/src/lib/realtime.ts
@@ -10,13 +10,21 @@ import { logError } from "./sentry";
 
 type IStandAloneCodeEditor = Parameters<OnMount>[0];
 
-const useYDoc = create<{
+type UseYDoc = {
   ydoc?: Y.Doc;
   provider?: WebsocketProvider;
-}>()(
-  devtools(() => ({}), {
-    name: "useYDoc",
-  })
+  isReady: boolean;
+};
+
+export const useYDoc = create<UseYDoc>()(
+  devtools<UseYDoc>(
+    () => ({
+      isReady: false,
+    }),
+    {
+      name: "useYDoc",
+    }
+  )
 );
 
 // Create a Yjs document
@@ -37,16 +45,18 @@ export function setupYDoc(type: "hosted" | "public", id: string) {
 
   // 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() {
-  console.log("Cleanup ydoc");
   const provider = useYDoc.getState().provider;
   if (provider) provider.disconnect();
-  useYDoc.setState({ ydoc: undefined, provider: undefined });
+  useYDoc.setState({ ydoc: undefined, provider: undefined, isReady: false });
 }
 
 /**
diff --git a/app/src/pages/EditHosted.tsx b/app/src/pages/EditHosted.tsx
index b2ea69ba..097a2631 100644
--- a/app/src/pages/EditHosted.tsx
+++ b/app/src/pages/EditHosted.tsx
@@ -10,6 +10,7 @@ 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 { EditLayoutTab } from "../components/Tabs/EditLayoutTab";
 import { EditMetaTab } from "../components/Tabs/EditMetaTab";
@@ -18,7 +19,7 @@ import { TextEditor } from "../components/TextEditor";
 import { setDocText } from "../lib/docHelpers";
 import { useIsValidSponsor } from "../lib/hooks";
 import { getHostedChart } from "../lib/queries";
-import { cleanupYDoc, setupYDoc } from "../lib/realtime";
+import { cleanupYDoc, setupYDoc, useYDoc } from "../lib/realtime";
 import { useDetailsStore } from "../lib/useDoc";
 import { useTrackLastChart } from "../lib/useLastChart";
 import editStyles from "./Edit.module.css";
@@ -59,8 +60,15 @@ export default function EditHosted() {
   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}>
diff --git a/wss/src/server.mjs b/wss/src/server.mjs
index b2c3b82a..fb42a1f5 100644
--- a/wss/src/server.mjs
+++ b/wss/src/server.mjs
@@ -18,22 +18,43 @@ const server = new Hocuspocus({
       fetch: async ({ documentName }) => {
         // create ydoc
         const ydoc = new Y.Doc();
-        // create ytext
-        const ytext = ydoc.getText("text");
-        // meta
-        const ymeta = ydoc.getMap("meta");
+
         try {
           const [docType, id] = documentName.split("_");
-          console.log({
-            docType,
-            id,
-          });
-          if (docType === "hosted") {
-            console.log("Looking up hosted chart: ", id);
+
+          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");
@@ -56,9 +77,16 @@ const server = new Hocuspocus({
                 }
               });
             });
-          } else if (docType === "public") {
-            console.log("Need to lookup public chart!");
-            // Potentially this should be outside of the database extension
+
+            // 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);
@@ -69,29 +97,44 @@ const server = new Hocuspocus({
       store: async ({ documentName, state }) => {
         const [_docType, id] = documentName.split("_");
 
-        // 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;
+        // 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;
       },
     }),
   ],