Merge branch 'staging' into block-plugins

packages/editor/package.json

@@ -46,6 +46,7 @@
     "mobx-react-lite": "^3.2.0",
     "penpal": "^6.1.0",
     "react": "^18.2.0",
+    "react-rnd": "^10.4.1",
     "react-avatar": "^5.0.3",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
@@ -57,7 +58,8 @@
     "web-vitals": "^1.0.1",
     "y-indexeddb": "9.0.6",
     "y-protocols": "^1.0.5",
-    "yjs": "^13.6.4"
+    "yjs": "^13.6.4",
+    "react-inspector": "^6.0.1"
   },
   "scripts": {
     "copytypes:self": "tsc --declaration --emitDeclarationOnly --noEmit false --composite false --declarationDir ./public/types/@typecell-org/editor",

packages/editor/src/app/main/DevTools.module.css

@@ -0,0 +1,53 @@
+.devtools {
+  /* position: absolute;
+  right: 0;
+  top: 100px;
+  left: 100px;
+  right: 100px;
+  bottom: 50px; */
+  /* width: 400px; */
+  /* border: 1px solid black; */
+  /* height: 100%; */
+  background: white;
+  opacity: 0.95;
+  z-index: 99999999;
+  border: 1px solid #f3f1f3;
+  height: 100%;
+  width: 100%;
+}
+
+.devtools h1 {
+  margin-bottom: 0.5em;
+}
+
+.devtools label {
+  margin-bottom: 1em;
+}
+
+.selectContainer {
+  width: 500px;
+  margin-bottom: 0.5em;
+}
+
+.content {
+  padding: 10px;
+}
+.tableContainer th:nth-child(1),
+.tableContainer td:nth-child(1) {
+  width: 50px;
+}
+
+.tableContainer th:nth-child(2),
+.tableContainer td:nth-child(2) {
+  width: 300px;
+}
+
+.header {
+  padding: 10px 5px;
+  background-color: #f6f6f6;
+  height: 30px;
+  /* border-top: 1px solid #f3f1f3; */
+  /* border-bottom: 1px solid #b1aeb1; */
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}

packages/editor/src/app/main/DevTools.tsx

@@ -0,0 +1,161 @@
+import Select from "@atlaskit/select";
+import { observer } from "mobx-react-lite";
+import { useEffect, useRef, useState } from "react";
+import { Inspector } from "react-inspector";
+import { Rnd } from "react-rnd";
+import { DocConnection } from "../../store/DocConnection";
+import { SessionStore } from "../../store/local/SessionStore";
+import { DocumentInfo } from "../../store/yjs-sync/DocumentCoordinator";
+import { TypeCellRemote } from "../../store/yjs-sync/remote/TypeCellRemote";
+import styles from "./DevTools.module.css";
+
+export const DevTools = observer((props: { sessionStore: SessionStore }) => {
+  const [offline, setOffline] = useState(false);
+  const [flaky, setFlaky] = useState(false);
+  const flakyInterval = useRef<ReturnType<typeof setInterval> | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    TypeCellRemote.Offline = offline;
+  }, [offline]);
+
+  useEffect(() => {
+    clearInterval(flakyInterval.current);
+    if (flaky) {
+      flakyInterval.current = setInterval(() => {
+        setOffline((o) => !o);
+      }, 5000);
+    }
+  }, [flaky]);
+
+  const [selectedResource, setSelectedResource] = useState<
+    string | undefined
+  >();
+
+  const [onlyLoaded, setOnlyLoaded] = useState(true);
+
+  if (!props.sessionStore.documentCoordinator) {
+    return <div>Loading</div>;
+  }
+
+  let documentCoordinatorEntries = [
+    ...(props.sessionStore.documentCoordinator.documents.entries() as IterableIterator<
+      [string, DocumentInfo]
+    >),
+  ].map(([key, value]) => {
+    const resource = DocConnection.get(key, props.sessionStore);
+    return {
+      // id: key,
+      ...value,
+      loaded: props.sessionStore.documentCoordinator?.loadedDocuments.has(key),
+      created_at: new Date(value.created_at),
+      needs_save_since: value.needs_save_since
+        ? new Date(value.needs_save_since)
+        : undefined,
+      type: resource?.tryDoc?.type,
+      title:
+        resource?.tryDoc?.type === "!richtext"
+          ? resource?.tryDoc.doc.title
+          : resource?.tryDoc?.title,
+    };
+  });
+
+  if (onlyLoaded) {
+    documentCoordinatorEntries = documentCoordinatorEntries.filter(
+      (d) => d.loaded,
+    );
+  }
+
+  const selectOptions = documentCoordinatorEntries
+    .filter((d) => d.loaded)
+    .map((d) => ({
+      label: d.title + " (" + d.id + ")",
+      value: d.id,
+    }));
+  // const resourceEntries = [...cache.entries()].map(([key, value]) => {
+  //   return {
+  //     id: key,
+  //     identifier: value.identifier.toString(),
+  //     type: value.tryDoc?.type,
+  //     title: value.tryDoc?.title,
+  //     ydoc: JSON.stringify(value.tryDoc?.ydoc.toJSON()),
+  //   };
+  // });
+
+  const ydoc = selectedResource
+    ? DocConnection.get(
+        selectedResource,
+        props.sessionStore,
+      )?.tryDoc?.ydoc.toJSON()
+    : undefined;
+
+  return (
+    <Rnd
+      style={{ zIndex: 19999000 }}
+      default={{
+        x: 50,
+        y: 50,
+        width: window.innerWidth - 100,
+        height: window.innerHeight - 100,
+      }}
+      dragHandleClassName={styles.header}>
+      <div className={styles.devtools}>
+        <div className={styles.header}>DevTools</div>
+        <div className={styles.content}>
+          <h1>Network</h1>
+          <label>
+            <input
+              type="checkbox"
+              onChange={(e) => {
+                setFlaky(false);
+                setOffline(e.target.checked);
+              }}
+              checked={offline}
+            />{" "}
+            Offline
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              onChange={(e) => setFlaky(e.target.checked)}
+              checked={flaky}
+            />{" "}
+            Flaky (offline / online every 5s)
+          </label>
+          <h1>Documents</h1>
+          <div className={styles.tableContainer}>
+            <label>
+              <input
+                type="checkbox"
+                onChange={(e) => setOnlyLoaded(e.target.checked)}
+                checked={onlyLoaded}
+              />{" "}
+              Only show loaded
+            </label>
+            <Inspector
+              className="test"
+              table={true}
+              data={documentCoordinatorEntries}
+            />
+          </div>
+          <h1>Resources</h1>
+          <div className={styles.selectContainer}>
+            <Select
+              // cacheOptions
+              // onChange={onChange}
+              // loadOptions={searchUsers}
+              // menuPosition="fixed"
+              backspaceRemovesValue
+              isClearable
+              placeholder="Select resource…"
+              onChange={(v) => setSelectedResource(v?.value)}
+              options={selectOptions}
+            />
+          </div>
+          {selectedResource && <Inspector table={false} data={ydoc} />}
+        </div>
+      </div>
+    </Rnd>
+  );
+});

packages/editor/src/app/main/Main.tsx

@@ -6,13 +6,33 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import { Outlet, useLocation } from "react-router-dom";
 import { DocumentResource } from "../../store/DocumentResource";
 import { SessionStore } from "../../store/local/SessionStore";
+import { DevTools } from "./DevTools";
 import styles from "./Main.module.css";
 import { Navigation } from "./components/Navigation";
 
 const Main = observer((props: { sessionStore: SessionStore }) => {
   const location = useLocation();
-  // const navigate = useNavigate();
-
+  const [devToolsVisible, setDevToolsVisible] = useState(
+    localStorage.getItem("devToolsVisible") === "true",
+  );
+  useEffect(() => {
+    const listener = (e: KeyboardEvent) => {
+      // if f9 pressed
+      if (e.key === "F9") {
+        if (devToolsVisible) {
+          setDevToolsVisible(false);
+          localStorage.removeItem("devToolsVisible");
+        } else {
+          setDevToolsVisible(true);
+          localStorage.setItem("devToolsVisible", "true");
+        }
+      }
+    };
+    window.addEventListener("keydown", listener);
+    return () => {
+      window.removeEventListener("keydown", listener);
+    };
+  }, [devToolsVisible]);
   const [top, setTop] = useState(true);
 
   const controlNavbar = useCallback(() => {
@@ -46,6 +66,8 @@ const Main = observer((props: { sessionStore: SessionStore }) => {
         )}>
         <Navigation sessionStore={props.sessionStore} />
         <Outlet />
+
+        {devToolsVisible && <DevTools sessionStore={props.sessionStore} />}
       </div>
     </DndProvider>
   );

packages/editor/src/store/ProfileResource.ts

@@ -14,7 +14,7 @@ export default class ProfileResource extends BaseResource {
   constructor(
     ydoc: Y.Doc,
     identifier: Identifier,
-    manager: BaseResourceExternalManager = UnimplementedBaseResourceExternalManager
+    manager: BaseResourceExternalManager = UnimplementedBaseResourceExternalManager,
   ) {
     super(ydoc, identifier, manager);
     if (this.type !== "!profile") {
@@ -51,6 +51,7 @@ export default class ProfileResource extends BaseResource {
   }
 
   // TODO: if profile is public, then we can currently see the names of all workspaces
+  // TODO: migrate to refs?
   public get workspaces() {
     const ret = this.ydoc.getMap<string>("workspaces");
 
@@ -59,6 +60,7 @@ export default class ProfileResource extends BaseResource {
 
   // these documents (forks) don't have a parent workspace, so we store them on the profile
   // (perhaps not the nicest architecture, but we probably want to revisit the concept of forking entirely)
+  // TODO: migrate to refs?
   public get forks() {
     // we use a map with the same value (identifier) as key and value, effectively using it as a set
     const ret = this.ydoc.getMap<string>("forks");