Wip monaco newsandbox (#350)

* monaco / upgrade blocknote

* clean package json + local blocknote

* wip monaco

* wip

* wip

* fix

* wip

* disable contentdom

* wip

* blocknote 0.8.0

* fix package lock

* extract execution from editor and introduce new kind of sandbox

* wip

* styles

* monaco fix

* improve compile system

* fix

* fix import documents

* fix types

* eslint

* package lock

* fix package lock

* downgrade typescript eslint

* fix monaco selections

* fix build

* fix mode

* fix build

* fix tests

* fix

* fix

* fix tests

* fix imports

* update lockfile

* fix pw

* iframe params via hash

* tmp disable test

* fix

* reenable bg syncer test

Author: YousefED

.github/workflows/build.yaml

@@ -105,6 +105,12 @@ jobs:
         env:
           CI: true
 
+      - name: Build packages (vite react)
+        run: npm run build:react
+        env:
+          CI: true
+          MODE: development
+
       - name: Lint
         run: npm run lint
         env:

package-lock.json

@@ -17,6 +17,7 @@
     "packages/shared-test",
     "packages/engine",
     "packages/parsers",
+    "packages/frame",
     "packages/editor",
     "packages/server"
   ],
@@ -30,7 +31,7 @@
     "unittest:vitest": "npm run unittest:vitest --workspaces",
     "wip:unittest:vitest:coverage": "vitest run --coverage -r packages/xxx",
     "build": "npm run build --workspaces",
-    "build:react": "npm run build:react --workspaces",
+    "build:react": "npm run build:react --workspace=packages/editor",
     "lint": "npm run lint --workspaces",
     "watch": "npm run build && npm run --parallel watch",
     "start": "npm run start-react",

package.json

@@ -24,68 +24,47 @@
     "@atlaskit/textfield": "^5.6.3",
     "@atlaskit/tree": "^8.8.5",
     "@atlaskit/user-picker": "^10.4.0",
-    "@blocknote/core": "^0.8.2",
-    "@blocknote/react": "^0.8.2",
-    "@deck.gl/aggregation-layers": "^8.6.4",
-    "@deck.gl/core": "^8.6.4",
-    "@deck.gl/layers": "^8.6.4",
-    "@deck.gl/react": "^8.6.4",
     "@emotion/react": "^11.4.0",
-    "@loaders.gl/core": "^3.0.12",
-    "@loaders.gl/images": "^3.0.12",
     "@supabase/auth-ui-react": "^0.4.2",
     "@supabase/auth-ui-shared": "^0.1.6",
     "@supabase/supabase-js": "^2.26.0",
     "@syncedstore/yjs-reactive-bindings": "^0.5.1",
     "@tippyjs/react": "^4.2.6",
-    "@tiptap/extension-collaboration": "^2.0.0-beta.38",
-    "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.37",
     "@typecell-org/util": "^0.0.3",
     "@typecell-org/shared": "^0.0.3",
     "@typecell-org/engine": "^0.0.3",
     "@typecell-org/parsers": "^0.0.3",
-    "@typescript/vfs": "^1.3.4",
+    "@typecell-org/frame": "^0.0.3",
     "classnames": "^2.3.1",
     "filebridge-client": "^0.1.5",
     "fractional-indexing": "^2.0.0",
     "lodash": "^4.17.21",
-    "lz-string": "^1.4.4",
-    "markdown-it": "^12.0.2",
     "mobx": "^6.2.0",
     "mobx-react-lite": "^3.2.0",
-    "monaco-editor": "^0.35.0",
     "penpal": "^6.1.0",
-    "prettier": "2.4.1",
-    "probe.gl": "^3.1.4",
     "react": "^18.2.0",
     "react-avatar": "^3.10.0",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^18.2.0",
     "react-error-overlay": "^6.0.9",
     "react-icons": "^4.6.0",
-    "react-inspector": "^6.0.1",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "react-router-dom": "^6.10.0",
-    "history": "^5.3.0",
-    "string.prototype.replaceall": "^1.0.5",
     "tippy.js": "^6.3.1",
-    "typescript": "5.0.4",
-    "uuid": "^8.3.2",
     "vscode-lib": "^0.1.2",
     "web-vitals": "^1.0.1",
     "y-indexeddb": "9.0.6",
-    "y-monaco": "^0.1.4",
     "y-protocols": "^1.0.5",
-    "y-webrtc": "^10.2.5",
+    "y-websocket": "^1.5.0",
     "yjs": "^13.6.4"
   },
   "scripts": {
     "copytypes:self": "tsc --declaration --emitDeclarationOnly --noEmit false --composite false --declarationDir ./public/types/@typecell-org/editor",
     "copytypes:externaldep": "mkdir -p public/types/$npm_config_pkgname && cp -rf ../../node_modules/$npm_config_pkgname/. public/types/$npm_config_pkgname",
     "copytypes:allexternaldeps": "npm run copytypes:externaldep --pkgname=@types/react && npm run copytypes:externaldep --pkgname=@types/scheduler && npm run copytypes:externaldep --pkgname=@types/prop-types && npm run copytypes:externaldep --pkgname=csstype",
     "copytypes:dep": "mkdir -p public/types/@typecell-org/$npm_config_pkgname && cp -rf ../$npm_config_pkgname/types/. public/types/@typecell-org/$npm_config_pkgname",
-    "copytypes:alldeps": "npm run copytypes:dep --pkgname=util && npm run copytypes:dep --pkgname=engine",
+    "copytypes:alldeps": "npm run copytypes:dep --pkgname=util && npm run copytypes:dep --pkgname=engine && npm run copytypes:dep --pkgname=frame",
     "copytypes": "npm run copytypes:self && npm run copytypes:alldeps && npm run copytypes:allexternaldeps",
     "start": "npm run copytypes && npm run vite:dev",
     "copy-docs": "node copy-docs.mjs > public/_docs/index.json",
@@ -102,12 +81,11 @@
     "vite:dev": "vite",
     "vite:build": "vite build --mode=$MODE",
     "vite:preview": "vite preview",
-    "preview": "npm run build:react && npm run vite:preview"
+    "preview": "npm run vite:preview"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "../shared/.eslintrc.cjs"
     ]
   },
   "browserslist": {
@@ -127,18 +105,15 @@
     "@playwright/experimental-ct-react": "^1.33.0",
     "@typecell-org/shared-test": "^0.0.3",
     "@types/lodash": "^4.14.168",
-    "@types/markdown-it": "^10.0.3",
     "@types/node": "^16.0.0",
-    "@types/prettier": "^2.6.4",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@types/speakingurl": "^13.0.2",
-    "@types/uuid": "^8.3.0",
     "@vitejs/plugin-react": "^4.0.0",
     "connect-history-api-fallback": "^2.0.0",
+    "chai": "^4.3.7",
     "cross-env": "^7.0.3",
     "eslint": "^8.21.0",
-    "eslint-config-react-app": "^7.0.1",
     "glob": "^7.2.0",
     "jsdom": "^20.0.0",
     "playwright-test": "^11.0.4",

packages/editor/.eslintrc.json

@@ -6,6 +6,7 @@ declare module "y-monaco" {
       ytext: Y.Text,
       model: monaco.editor.ITextModel,
       editors?: Set<monaco.editor.IStandaloneCodeEditor>,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       awareness?: any
     );
     destroy();

packages/editor/package.json

@@ -13,6 +13,7 @@ import Main from "./main/Main";
 import { AILanding } from "./main/components/startscreen/AILanding";
 import { StartScreen } from "./main/components/startscreen/StartScreen";
 import { DocumentRoute } from "./routes/document";
+import { SupabaseSessionStore } from "./supabase-auth/SupabaseSessionStore";
 import { supabaseAuthProvider } from "./supabase-auth/supabaseAuthProvider";
 
 const Wrapper = observer((props: { sessionStore: SessionStore }) => {
@@ -64,14 +65,20 @@ export const App = observer(
             </Route>
             <Route
               path="/register"
-              element={props.authProvider.routes.register(sessionStore as any)}
+              element={props.authProvider.routes.register(
+                sessionStore as SupabaseSessionStore
+              )}
             />
             <Route path="/recover" element={<div>Not implemented yet</div>} />
             <Route
               path="/login"
-              element={props.authProvider.routes.login(sessionStore as any)}
+              element={props.authProvider.routes.login(
+                sessionStore as SupabaseSessionStore
+              )}
             />
-            {props.authProvider.routes.additionalRoutes(sessionStore as any)}
+            {props.authProvider.routes.additionalRoutes(
+              sessionStore as SupabaseSessionStore
+            )}
             {/* todo: notfound?  */}
           </Route>
         </Routes>

packages/editor/src/@types/thenable.d.ts renamed to packages/editor/src/@types/thenable.d.ts.bak

@@ -1,6 +1,6 @@
 import { NavigateFunction } from "react-router-dom";
 
-export let navigateRef: { current: NavigateFunction | undefined } = {
+export const navigateRef: { current: NavigateFunction | undefined } = {
   current: undefined,
 };
 

packages/editor/src/@types/y-monaco.d.ts

@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { observer } from "mobx-react-lite";
 import * as React from "react";
 import { useState } from "react";
 import { Identifier } from "../../identifiers/Identifier";
 import { DocConnection } from "../../store/DocConnection";
-import PluginResource from "../../store/PluginResource";
+
 import ProjectResource from "../../store/ProjectResource";
 
 // import { MenuBar } from "../maidocn/components/menuBar/MenuBar";
@@ -14,8 +15,7 @@ import ProfileResource from "../../store/ProfileResource";
 import { SessionStore } from "../../store/local/SessionStore";
 import { DocumentMenu } from "../main/components/documentMenu/DocumentMenu";
 import { MenuBar } from "../main/components/menuBar/MenuBar";
-import NotebookRenderer from "./notebook/NotebookRenderer";
-import PluginRenderer from "./plugin/PluginRenderer";
+
 import ProfileRenderer from "./profile/ProfileRenderer";
 import ProjectContainer from "./project/ProjectContainer";
 import ProjectRenderer from "./project/ProjectRenderer";
@@ -88,22 +88,7 @@ const DocumentView = observer((props: Props) => {
     return <div>Loading</div>;
   }
   if (connection.doc.type === "!notebook") {
-    const doc = connection.doc.doc;
-
-    return (
-      <div className={styles.view}>
-        {!props.hideDocumentMenu && (
-          <DocumentMenu
-            document={doc}
-            sessionStore={props.sessionStore}></DocumentMenu>
-        )}
-        <NotebookRenderer
-          key={connection.doc.id}
-          document={doc}
-          sessionStore={props.sessionStore}
-        />
-      </div>
-    );
+    throw new Error("Notebook not implemented");
   } else if (connection.doc.type === "!project") {
     if (props.isNested) {
       return (
@@ -150,12 +135,7 @@ const DocumentView = observer((props: Props) => {
       </div>
     );
   } else if (connection.doc.type === "!plugin") {
-    return (
-      <PluginRenderer
-        key={connection.doc.id}
-        plugin={connection.doc.getSpecificType(PluginResource)!}
-      />
-    );
+    throw new Error("Plugin not implemented");
   } else if (connection.doc.type === "!profile") {
     return (
       <ProfileRenderer