This text is red, styled by the CSS cell above.
+```typescript
+export default (
+ This text is red, styled by the CSS cell above.
+);
+````
### TypeScript / JavaScript
-
```typescript
export let message = "This is a TypeScript cell";
-
```
-TypeScript cells execute automatically as you type.Try editing the`message` above.
+TypeScript cells execute automatically as you type. Try editing the `message` above.
You've learned the basics! Continue to learn more about writing code using TypeScript cells.
diff --git a/packages/editor/public/_docs/manual/2. TypeScript and exports.md b/packages/editor/public/_docs/manual/2. TypeScript and exports.md
index f27b02b89..9de5f037b 100644
--- a/packages/editor/public/_docs/manual/2. TypeScript and exports.md
+++ b/packages/editor/public/_docs/manual/2. TypeScript and exports.md
@@ -1,6 +1,6 @@
# TypeScript and exports
-TypeScript cells are the main way to write code in TypeCell Notebooks.
+TypeScript cells are the main way to write code in TypeCell.
You'll get all the benefits of the [Monaco Editor](https://microsoft.github.io/monaco-editor/) while writing code, the same editor that powers VS Code!
@@ -11,27 +11,23 @@ This allows you to quickly write and test code, but still get hints about possib
In the example below, you'll notice that we get an error because we assign a `number` to a `string` variable, but the code still executes regardless.
-
```typescript
export let message = "hello";
message = 4;
-
```
## Exports
-You can export variables from your code, and they'll show up as *output* of the cell. Above, we've exported a single `message` variable.
+You can export variables from your code, and they'll show up as _output_ of the cell. Above, we've exported a single `message` variable.
You can also export multiple variables from a cell, and the _inspector_ will help you to view the output:
-
```typescript
export let firstVariable = "Hello world";
export let vehicle = {
color: "red",
wheels: 4,
};
-
```
### DOM Elements
@@ -42,12 +38,11 @@ You can create and export DOM Elements to display them directly:
export let element = document.createElement("button");
element.innerText = "This is a button. Click me!";
element.onclick = () => window.alert("Hello!");
-
```
### React / JSX
-Think direct DOM manipulation is a little too old school for you? TypeCell supports React & JSX to make your life easier:
+Think direct DOM manipulation is a little too old school for you? TypeCell supports React & JSX to make your life easier:
```typescript
export let reactElement = (
@@ -55,7 +50,6 @@ export let reactElement = (
This is a React Button
);
-
```
## The `default` export
@@ -68,11 +62,10 @@ The following cell exports 2 variables, but only one is displayed in the output:
export let myNum = 42;
export default The number is: {myNum}
;
-
```
Now you might ask; what's the use of exporting `myNum` if you don't see it in the output?
This is because exported variables can be reused across cells and notebooks; one of most powerful features of TypeCell!
-Continue to learn more about exported variables and Reactivity.
\ No newline at end of file
+Continue to learn more about exported variables and Reactivity.
diff --git a/packages/editor/public/_docs/manual/3. Reactive variables.md b/packages/editor/public/_docs/manual/3. Reactive variables.md
index e69de29bb..3209a3184 100644
--- a/packages/editor/public/_docs/manual/3. Reactive variables.md
+++ b/packages/editor/public/_docs/manual/3. Reactive variables.md
@@ -0,0 +1,30 @@
+# Reactive variables
+
+This is where things get interesting! Your code can reference variables exported by other cells.
+
+Code cells in TypeCell (re)evaluate when:
+
+- The code of the cell changes (i.e.: you're editing the code)
+- A variable the cell depends upon updates
+
+## The `$` variable
+
+Exports of cells are available under the `$` variable. Have a look at the example below, and change the `name` variable to your own name. Notice how the greeting in the cell below updates automatically.
+
+```typescript
+export let name = "Anonymous coder";
+```
+
+```typescript
+export let greeting = (
+
+ Hello, {$.name}!
+
+);
+```
+
+Tip: type `$.` in a TypeScript cell, and the editor (Intellisense) will display a list of all exported variables you can reference.
+
+## Interactive Tutorial
+
+The Reactive model of TypeCell is quite powerful. If you haven't already, follow the [interactive introduction](/docs/interactive-introduction.md) or have a look at the [demos](/docs/demos.md) to get some hands-on experience.
diff --git a/packages/editor/public/_docs/manual/5. Imports and NPM.md b/packages/editor/public/_docs/manual/5. Imports and NPM.md
index e69de29bb..3be44edc8 100644
--- a/packages/editor/public/_docs/manual/5. Imports and NPM.md
+++ b/packages/editor/public/_docs/manual/5. Imports and NPM.md
@@ -0,0 +1,54 @@
+# Imports & NPM
+
+TypeCell supports importing code from NPM, or from other TypeCell documents.
+
+## Importing other notebooks
+
+You can split your code into multiple notebooks.
+This is a great way to create reusable components that you can use across notebooks, or even share with the community.
+
+`import * as myNotebook from "!@username/notebook";`
+
+See this example, where we import a message from an external notebook [`@yousef/demo-message`](https://www.typecell.org/@yousef/demo-message).
+
+```typescript
+import * as myNotebook from "!@yousef/demo-message";
+
+export default myNotebook.message;
+```
+
+**TypeCell documents are designed to be as "live" as possible**: when you change the code of your imported notebook,
+the notebook that imports the code will update live, as-you-type.
+
+## NPM
+
+In TypeCell, you can also use any library from [NPM](https://www.npmjs.com/). Simply import the library in a TypeScript cell, and we'll try to resolve it (including TypeScript types) automatically.
+
+### Example
+
+Let's use the [canvas-confetti](https://www.npmjs.com/package/canvas-confetti) library to make it rain confetti!
+
+```typescript
+import { create } from "canvas-confetti";
+
+export const canvas = document.createElement("canvas");
+canvas.width = 200;
+canvas.height = 100;
+
+const myConfetti = create(canvas);
+
+// Drop some confetty every 500ms
+setInterval(() => myConfetti({ particleCount: 70, origin: { y: 0 } }), 500);
+```
+
+### Compatibility
+
+Libraries are loaded in your browser via [Skypack](https://www.skypack.dev/).
+Skypack support is best for modern libraries with ESM support, but not all NPM libraries are compatible.
+
+NPM imports are work in progress. Can't get a library to work? Let us know on [Discord](https://discord.gg/TcJ9TRC3SV) or [Matrix](https://matrix.to/#/#typecell-space:matrix.org)!
+
+#### TypeScript
+
+When available, TypeCell tries to automatically resolve types for your library.
+Some libraries don't ship with TypeScript types. In this case, an error might appear, but the library can still work.
diff --git a/packages/editor/public/index.html b/packages/editor/public/index.html
index a67e6d946..27c000f08 100644
--- a/packages/editor/public/index.html
+++ b/packages/editor/public/index.html
@@ -43,7 +43,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
-
{!props.hideDocumentMenu && (
-
-
- {/*
+ = observer((props) => {
- return = observer((props) => {
- // const fileSet = useRef(new ObservableSet());
- // const identifier = props.project.identifier;
- // const path = useLocation();
- // const subPath = (useParams() as any).subPath;
- // if (subPath) {
- // throw new Error("unexpected");
- // }
+ let [childId, ...remainingIds] = props.subIdentifiers;
+
+ if (!childId) {
+ const indexFile = props.project.getRefs(IndexFileReference);
+ if (indexFile.length) {
+ childId = parseIdentifier(indexFile[0].target);
+ remainingIds = [];
+ }
+ }
+
+ if (!childId) {
+ const children = props.project.getRefs(ChildReference);
+ if (children.length) {
+ childId = parseIdentifier(children[0].target);
+ remainingIds = [];
+ }
+ }
- // const identifiers = pathToIdentifiers(path.pathname.substring(1));
- // const idPath = getPathFromIdentifier(identifier);
- // let matchedPath: string;
- // let sep = ":/";
- // if (typeof idPath === "string") {
- // matchedPath = idPath;
- // } else {
- // if (path.pathname.substring(1).startsWith(idPath.shorthand)) {
- // matchedPath = idPath.shorthand;
- // sep = "/";
- // } else {
- // matchedPath = idPath.path;
- // }
- // }
- const [childId, ...remainingIds] = props.subIdentifiers;
return (
= observer((props) => {
sessionStore={props.sessionStore}
/>
) : (
-
- //
- //
);
});
diff --git a/packages/editor/src/app/documentRenderers/project/directoryNavigation/FolderView.tsx b/packages/editor/src/app/documentRenderers/project/directoryNavigation/FolderView.tsx
index 5b2778952..9ed4c49cf 100644
--- a/packages/editor/src/app/documentRenderers/project/directoryNavigation/FolderView.tsx
+++ b/packages/editor/src/app/documentRenderers/project/directoryNavigation/FolderView.tsx
@@ -1,42 +1,80 @@
import Button from "@atlaskit/button";
+import { TreeData, TreeItem } from "@atlaskit/tree";
import { observer } from "mobx-react-lite";
-import React from "react";
+import { useEffect, useRef } from "react";
import { AiFillFolder } from "react-icons/ai";
import { VscFile } from "react-icons/vsc";
+import { DocConnection } from "../../../../store/DocConnection";
+import { SessionStore } from "../../../../store/local/SessionStore";
import styles from "./FolderView.module.css";
-import { TreeNode } from "./treeNodeUtil";
+// import { TreeNode } from "./treeNodeUtil";
export const ItemView = (props: {
- file: TreeNode;
- onClick: (item: string) => void;
+ file: TreeItem;
+ onClick: (item: TreeItem) => void;
}) => {
const onClick = () => {
- props.onClick(props.file.fileName);
+ props.onClick(props.file);
};
return (
) : (
());
+
+ useEffect(() => {
+ const itemsToLoad = new Set();
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ tree.items[tree.rootId].data.allChildren.forEach((child: any) => {
+ itemsToLoad.add(child as string);
+ });
+
+ // clear items from cache if not in itemsToLoad
+ for (const [key, item] of cache.current.entries()) {
+ if (!itemsToLoad.has(key)) {
+ item.dispose();
+ cache.current.delete(key);
+ }
+ }
+
+ // load items
+ for (const key of itemsToLoad) {
+ if (!cache.current.has(key)) {
+ const item = DocConnection.load(key, sessionStore);
+ cache.current.set(key, item);
+ }
+ }
+ }, [tree, sessionStore]);
+
return (
;
+ onAddNewPage: ((parent?: string) => Promise) | false;
enableAddRootPage: boolean;
+ enableDrag: boolean;
sessionStore: SessionStore;
}) => {
const { sessionStore, tree } = props;
@@ -248,6 +254,8 @@ export const SidebarTree = observer(
// });
};
+ const onAddNewPage = props.onAddNewPage;
+
return (
<>
{}}
onDragEnd={onDragEnd}
offsetPerLevel={17}
- isDragEnabled
+ isDragEnabled={props.enableDrag}
isNestingEnabled
/>
- {props.enableAddRootPage && (
+ {props.enableAddRootPage && onAddNewPage && (
}
- onClick={() => props.onAddNewPage()}
+ onClick={() => onAddNewPage()}
appearance="subtle">
Add a page
diff --git a/packages/editor/src/app/documentRenderers/project/directoryNavigation/treeDataUtil.ts b/packages/editor/src/app/documentRenderers/project/directoryNavigation/treeDataUtil.ts
deleted file mode 100644
index 243a2f81c..000000000
--- a/packages/editor/src/app/documentRenderers/project/directoryNavigation/treeDataUtil.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import { TreeData } from "@atlaskit/tree";
-import { TreeNode } from "./treeNodeUtil";
-
-/**
- * Convert a TreeNode[] tree to Atlaskit TreeData format
- */
-export function treeToTreeData(tree: TreeNode[]) {
- // tree.sort(sortTreeItems);
- const ret: TreeData = {
- rootId: "root",
- items: {
- root: {
- id: "root",
- children: tree.map((t) => t.fileName),
- hasChildren: true,
- isExpanded: true,
- isChildrenLoading: false,
- data: {
- title: "root",
- },
- },
- },
- };
-
- function processTree(parent: string, tree: TreeNode[]) {
- for (const child of tree) {
- // child.children.sort(sortTreeItems);
- const fullName = parent + child.fileName;
- ret.items[fullName] = {
- id: fullName,
- children: child.children.map((t) => fullName + "/" + t.fileName),
- hasChildren: child.children.length ? true : false,
- isExpanded: false,
- isChildrenLoading: false,
- data: {
- title: child.fileName,
- path: fullName,
- },
- };
- processTree(fullName + "/", child.children);
- }
- }
- processTree("", tree);
- // console.log(ret);
- return ret;
-}
-
-/*
-Example atlaskit treedata:
-
-export const tree: TreeData = {
- rootId: "1",
- items: {
- "1": {
- id: "1",
- children: ["1-1", "1-2"],
- hasChildren: true,
- isExpanded: true,
- isChildrenLoading: false,
- data: {
- title: "root",
- },
- },
- "1-1": {
- id: "1-1",
- children: ["1-1-1", "1-1-2"],
- hasChildren: true,
- isExpanded: true,
- isChildrenLoading: false,
- data: {
- title: "First parent",
- },
- },
- "1-2": {
- id: "1-2",
- children: ["1-2-1", "1-2-2"],
- hasChildren: true,
- isExpanded: true,
- isChildrenLoading: false,
- data: {
- title: "Second parent",
- },
- },
- "1-1-1": {
- id: "1-1-1",
- children: [],
- hasChildren: false,
- isExpanded: false,
- isChildrenLoading: false,
- data: {
- title: "Child one",
- },
- },
- "1-1-2": {
- id: "1-1-2",
- children: [],
- hasChildren: false,
- isExpanded: false,
- isChildrenLoading: false,
- data: {
- title: "Child two",
- },
- },
- "1-2-1": {
- id: "1-2-1",
- children: [],
- hasChildren: false,
- isExpanded: false,
- isChildrenLoading: false,
- data: {
- title: "Child three",
- },
- },
- "1-2-2": {
- id: "1-2-2",
- children: [],
- hasChildren: false,
- isExpanded: false,
- isChildrenLoading: false,
- data: {
- title: "Child four",
- },
- },
- },
-};*/
diff --git a/packages/editor/src/app/main/Main.module.css b/packages/editor/src/app/main/Main.module.css
index 31401a83e..52d5daeab 100644
--- a/packages/editor/src/app/main/Main.module.css
+++ b/packages/editor/src/app/main/Main.module.css
@@ -22,26 +22,38 @@
rgba(0, 255, 255, 0) 400px,
rgba(255, 255, 255, 1) 700px
),
- radial-gradient(circle at 15% 35%, #dbe4ff, rgba(255, 255, 255, 0) 25%),
+ radial-gradient(circle at 15% 35%, #4caf7e33, rgba(255, 255, 255, 0) 25%),
radial-gradient(circle at 85% 20%, #e3fafc, rgba(255, 255, 255, 0) 25%),
white;
background-repeat: no-repeat;
}
-.main.homepage > header {
+.main.homepage > header[role="banner"] {
+ /* background: white !important; */
+ transition: 0.2s ease !important;
+ transition-property: background-color, backdrop-filter !important;
+ backdrop-filter: blur(6px) !important;
+ background-color: #fffc !important;
+
+ position: fixed;
+ width: 100%;
+ z-index: 100000;
+}
+
+.main.homepage.top > header[role="banner"] {
background: none !important;
}
.main.ai header div {
- display:none;
+ display: none;
}
.main.ai nav div {
- display:none;
+ display: none;
}
.main.ai nav span {
- display:none;
+ display: none;
}
.main {
@@ -51,7 +63,7 @@
align-items: stretch;
}
.main > header {
- z-index: 10000000;
+ /* z-index: 10000000; */
/* border-bottom: 1px solid rgb(239, 241, 244); */
/* border-bottom: linear-gradient(
90deg,
@@ -59,6 +71,7 @@
rgba(255, 255, 255, 0.7) 50%,
rgba(255, 255, 255, 1) 100%
); */
+ z-index: 10000;
}
/* Page wrapper styles */
diff --git a/packages/editor/src/app/main/Main.tsx b/packages/editor/src/app/main/Main.tsx
index 62adf5db8..24a7629d8 100644
--- a/packages/editor/src/app/main/Main.tsx
+++ b/packages/editor/src/app/main/Main.tsx
@@ -1,4 +1,6 @@
+import classNames from "classnames";
import { observer } from "mobx-react-lite";
+import { useCallback, useEffect, useState } from "react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { Outlet, useLocation } from "react-router-dom";
@@ -11,28 +13,41 @@ const Main = observer((props: { sessionStore: SessionStore }) => {
const location = useLocation();
// const navigate = useNavigate();
+ const [top, setTop] = useState(true);
+
+ const controlNavbar = useCallback(() => {
+ if (typeof window !== "undefined") {
+ if (window.scrollY > 0) {
+ setTop(false);
+ } else {
+ setTop(true);
+ }
+ }
+ }, []);
+
+ useEffect(() => {
+ if (typeof window !== "undefined") {
+ window.addEventListener("scroll", controlNavbar);
+
+ // cleanup function
+ return () => {
+ window.removeEventListener("scroll", controlNavbar);
+ };
+ }
+ }, [controlNavbar]);
+
return (
);
diff --git a/packages/editor/src/app/main/components/Navigation.tsx b/packages/editor/src/app/main/components/Navigation.tsx
index d92b11222..e2f563d8d 100644
--- a/packages/editor/src/app/main/components/Navigation.tsx
+++ b/packages/editor/src/app/main/components/Navigation.tsx
@@ -16,7 +16,7 @@ const ProductHome = () => {
return (
<>
{/* @${props.authStore.user?.username} */}
- Profile
- Account settings
+ {
+ navigate(toProfilePage("@" + props.sessionStore.loggedInUserId));
+ }}>
+ Profile
+
+ {/* Account settings */}
Sign out
diff --git a/packages/editor/src/app/main/components/documentMenu/Breadcrumb.tsx b/packages/editor/src/app/main/components/documentMenu/Breadcrumb.tsx
index d7c97fb92..c64855aa5 100644
--- a/packages/editor/src/app/main/components/documentMenu/Breadcrumb.tsx
+++ b/packages/editor/src/app/main/components/documentMenu/Breadcrumb.tsx
@@ -21,12 +21,13 @@ function getTitleForIdentifier(
if (doc) {
switch (doc.tryDoc?.type) {
case "!project":
- // TODO
- return "public workspace";
+ return doc.tryDoc.title || "Untitled";
+ // return "public workspace";
case "!profile":
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return doc.tryDoc!.getSpecificType(ProfileResource).title;
case "!notebook":
+ case "!richtext":
case "!document":
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return doc.tryDoc!.doc.title || "Untitled";
diff --git a/packages/editor/src/app/main/components/documentMenu/DocumentMenu.tsx b/packages/editor/src/app/main/components/documentMenu/DocumentMenu.tsx
index f6a98e19f..a00b1d71a 100644
--- a/packages/editor/src/app/main/components/documentMenu/DocumentMenu.tsx
+++ b/packages/editor/src/app/main/components/documentMenu/DocumentMenu.tsx
@@ -18,7 +18,9 @@ import {
} from "../../../routes/routes";
import { MenuBar } from "../menuBar/MenuBar";
+import { HttpsIdentifier } from "../../../../identifiers/HttpsIdentifier";
import { TypeCellIdentifier } from "../../../../identifiers/TypeCellIdentifier";
+import ProjectResource from "../../../../store/ProjectResource";
import { SupabaseSessionStore } from "../../../supabase-auth/SupabaseSessionStore";
import SupabasePermissionsDialog from "../../../supabase-auth/routes/permissions/PermissionsDialog";
import { Breadcrumb } from "./Breadcrumb";
@@ -27,7 +29,7 @@ import { ForkAlert } from "./ForkAlert";
import { ShareButton } from "./ShareButton";
type Props = {
- document: DocumentResource;
+ document: DocumentResource | ProjectResource;
sessionStore: SessionStore;
};
@@ -36,6 +38,9 @@ function userCanEditPermissions(
sessionStore: SessionStore,
identifier: Identifier
) {
+ if (identifier instanceof HttpsIdentifier) {
+ return false;
+ }
if (identifier && identifier instanceof MatrixIdentifier) {
return sessionStore.loggedInUserId === identifier.owner;
}
@@ -56,30 +61,33 @@ export const DocumentMenu: React.FC = observer((props) => {
const location = useLocation();
const navigate = useNavigate();
- let permissionsArea: React.ReactElement;
- if (
- props.document.identifier instanceof TypeCellIdentifier &&
- sessionStore instanceof SupabaseSessionStore
- ) {
- permissionsArea = (
- ClosePermissionsDialog(navigate)}
- isOpen={IsPermissionsDialogOpen(location)}
- identifier={props.document.identifier}
- sessionStore={sessionStore}
- />
- );
- } else {
- throw new Error("unexpected types");
+ let permissionsArea: React.ReactElement = <>;
+ if (canEditPermissions) {
+ if (
+ props.document.identifier instanceof TypeCellIdentifier &&
+ sessionStore instanceof SupabaseSessionStore
+ ) {
+ permissionsArea = (
+ ClosePermissionsDialog(navigate)}
+ isOpen={IsPermissionsDialogOpen(location)}
+ identifier={props.document.identifier}
+ sessionStore={sessionStore}
+ />
+ );
+ } else {
+ throw new Error("unexpected types");
+ }
}
return (
)}
placement="bottom-end">
- Hello {props.profile.title}
;
+ return (
+
+
+ );
});
export default ProfileRenderer;
diff --git a/packages/editor/src/app/documentRenderers/project/ProjectContainer.tsx b/packages/editor/src/app/documentRenderers/project/ProjectContainer.tsx
index 008d3b622..ba13bb159 100644
--- a/packages/editor/src/app/documentRenderers/project/ProjectContainer.tsx
+++ b/packages/editor/src/app/documentRenderers/project/ProjectContainer.tsx
@@ -15,7 +15,11 @@ import ProjectResource from "../../../store/ProjectResource";
import { SessionStore } from "../../../store/local/SessionStore";
import { ChildReference } from "@typecell-org/shared";
+import { uri } from "vscode-lib";
+import { HttpsIdentifier } from "../../../identifiers/HttpsIdentifier";
+import { TypeCellIdentifier } from "../../../identifiers/TypeCellIdentifier";
import styles from "./ProjectContainer.module.css";
+import FolderView from "./directoryNavigation/FolderView";
import SidebarTree from "./directoryNavigation/SidebarTree";
type Props = {
@@ -71,7 +75,7 @@ function docToTreeItem(
id: doc.id,
identifier: doc.identifier,
allChildren: children.map((c) => c.target),
- title: doc.type === "!notebook" ? doc.doc.title : "",
+ title: doc.type === "!richtext" ? doc.doc.title : doc.title,
},
};
@@ -141,13 +145,6 @@ const ProjectContainer = observer((props: Props) => {
navigate({
pathname: "/" + path,
});
-
- // ret.doc.cellList.addCell(0, "markdown", "# " + obj.title);
- // ret.doc.cellList.addCell(
- // 1,
- // "typescript",
- // `export let message = "Hello World"`
- // );
};
const onClick = (identifier: Identifier) => {
@@ -158,104 +155,113 @@ const ProjectContainer = observer((props: Props) => {
});
};
- // let defaultFile = files.find((f) => f === "README.md");
- // let defaultFileContent = <>;
- // if (defaultFile) {
- // // TODO: cleanup?
- // // Directory listing with a default file
- // let idTemp = parseIdentifier(props.project.identifier.uri.toString());
- // idTemp.subPath = defaultFile;
- // let documentIdentifier = parseIdentifier(
- // idTemp.fullUriOfSubPath()!.toString()
- // );
- // defaultFileContent = (
- // Hello {props.profile.title}
+Workspaces
+
- {/* {
+ let path = identifiersToPath([
+ props.project.identifier,
+ item.data.identifier,
+ ]);
+
+ if (item.data.identifier instanceof HttpsIdentifier) {
+ // TODO: hardcoded fix for docs
+ path = identifiersToPath([
+ new HttpsIdentifier(
+ uri.URI.parse("http://" + window.location.host + "/_docs/")
+ ),
+ // props.project.identifier,
+ item.data.identifier,
+ ]);
+ }
+ navigate({
+ pathname: "/" + path,
+ });
+ }}
+ tree={tree}
+ />
{/* {defaultFileContent} */}
-
- console.log("onExpand", state)
- }
- onLeftSidebarCollapse={(state: LeftSidebarState) =>
- console.log("onCollapse", state)
- }>
-
-
- console.log("onResizeStart", state)
- }
- onResizeEnd={(state: LeftSidebarState) =>
- console.log("onResizeEnd", state)
- }
- onFlyoutExpand={() => console.log("onFlyoutExpand")}
- onFlyoutCollapse={() => console.log("onFlyoutCollapse")}
- // overrides={{
- // ResizeButton: {
- // render: (Component, props) => (
-
- // //
- //
- // ),
- // },
- // }}
- >
-
- {/*
+
+
+ );
});
export default ProjectContainer;
diff --git a/packages/editor/src/app/documentRenderers/project/ProjectRenderer.tsx b/packages/editor/src/app/documentRenderers/project/ProjectRenderer.tsx
index b81045fb5..d25de2001 100644
--- a/packages/editor/src/app/documentRenderers/project/ProjectRenderer.tsx
+++ b/packages/editor/src/app/documentRenderers/project/ProjectRenderer.tsx
@@ -1,11 +1,15 @@
+import { ChildReference, IndexFileReference } from "@typecell-org/shared";
import { observer } from "mobx-react-lite";
import React from "react";
+import { parseIdentifier } from "../../../identifiers";
import { Identifier } from "../../../identifiers/Identifier";
import ProjectResource from "../../../store/ProjectResource";
import { SessionStore } from "../../../store/local/SessionStore";
import DocumentView from "../DocumentView";
import ProjectContainer from "./ProjectContainer";
+import EmptyState from "@atlaskit/empty-state";
+
type Props = {
project: ProjectResource;
isNested?: boolean;
@@ -13,57 +17,31 @@ type Props = {
sessionStore: SessionStore;
};
-// const NestedDocument = (props: { parent: Identifier }) => {
-// const params = useParams();
-// const sub = params["*"] as string;
-
-// // const newIdStr = path.join(props.parent.toString(), "/:/", sub);
-// const documentIdentifier = getIdentifierFromPath(sub, [props.parent]);
-// // parseIdentifier(newIdStr).fullUriOfSubPath()!.toString()
-// // );
-// // return
-
-
+ }
+ const userIsOwner = [
+ ...(props.sessionStore.profile?.workspaces.values() || []),
+ ].includes(props.project.identifier.toString());
+
+ const enableAddPages = props.project.identifier instanceof TypeCellIdentifier;
+
+ return (
+
+
+
+ console.log("onExpand", state)
+ }
+ onLeftSidebarCollapse={(state: LeftSidebarState) =>
+ console.log("onCollapse", state)
+ }>
+
+
+ console.log("onResizeStart", state)
+ }
+ onResizeEnd={(state: LeftSidebarState) =>
+ console.log("onResizeEnd", state)
+ }
+ onFlyoutExpand={() => console.log("onFlyoutExpand")}
+ onFlyoutCollapse={() => console.log("onFlyoutCollapse")}
+ // overrides={{
+ // ResizeButton: {
+ // render: (Component, props) => (
+
+ // //
+ //
+ // ),
+ // },
+ // }}
+ >
+
+ {/*
-
-
- );
- }
+
+
+
- {props.children}
- {/*
+ {props.children}
+
+ {/*
- {sub}
;
-// return hello
;
+// // const defaultDoc = (useOutletContext() as any)?.defaultFileContent as any;
+// // return defaultDoc || <>;
// };
-const RootDirectory = () => {
- return hello
;
- // const defaultDoc = (useOutletContext() as any)?.defaultFileContent as any;
- // return defaultDoc || <>;
-};
-
-// const Debug = (props: { children: any }) => {
-// const params = useParams();
-// return (
-//
-//
-// );
-// };
const ProjectRenderer: React.FCparams: {JSON.stringify(params)}
-// {props.children}
-//
+ Request access}
+ // secondaryAction={}
+ // tertiaryAction={}
+ />
+
)}
- {props.tree.map((file) => (
-
);
diff --git a/packages/editor/src/app/documentRenderers/project/directoryNavigation/SidebarTree.tsx b/packages/editor/src/app/documentRenderers/project/directoryNavigation/SidebarTree.tsx
index 309e15184..1c0444f87 100644
--- a/packages/editor/src/app/documentRenderers/project/directoryNavigation/SidebarTree.tsx
+++ b/packages/editor/src/app/documentRenderers/project/directoryNavigation/SidebarTree.tsx
@@ -25,7 +25,7 @@ import styles from "./SidebarTree.module.css";
const RenderItem =
(
onClick: (item: Identifier) => void,
- onAddChild: (parentId: string) => void
+ onAddChild: ((parentId: string) => void) | false
) =>
({ item, onExpand, onCollapse, provided, depth }: RenderItemParams) => {
// const doc = DocConnection.get(item.data.identifier)?.tryDoc;
@@ -50,6 +50,9 @@ const RenderItem =
};
const onAddClick = (e: React.MouseEvent) => {
+ if (!onAddChild) {
+ throw new Error("unexpected");
+ }
e.stopPropagation();
onExpand(item.id);
onAddChild(item.data.identifier);
@@ -84,11 +87,13 @@ const RenderItem =
title=""
/>
)}
-
+ className={classNames(
+ styles.main,
+ top && styles.top,
+ (location.pathname === "/" || location.pathname === "/ai") &&
+ styles.homepage,
+ location.pathname === "/ai" && styles.ai
+ )}>
CloseNewPageDialog(navigate)}
- isOpen={IsNewPageDialogOpen(location)}
- />
- )} */}
+
+ Interactive documents. Reimagined.
+
+ {/* */}
+
+
+ Interactive documents. Reimagined.
+
+
+ {/* */}
+ + TypeCell is a fresh take on what documents and software can look + like. Think Notion + Jupyter Notebooks. Open Source. +
+
+ Try interactive tutorial
+
+ Create new notebook
+
+ {/* Create your workspace (beta) */}
+ {/* */}
+
+
+
+
+ 
+
+
-
- {/*
-
+ */}
-
- Star
-
-
*/}
+ {/* Create & share live interactive notebooks
@@ -80,7 +101,7 @@ export const StartScreen = observer((props: { sessionStore: SessionStore }) => {
diff --git a/packages/editor/src/app/routes/URLUpdater.tsx b/packages/editor/src/app/routes/URLUpdater.tsx
new file mode 100644
index 000000000..ebd5b8d59
--- /dev/null
+++ b/packages/editor/src/app/routes/URLUpdater.tsx
@@ -0,0 +1,49 @@
+import { observer } from "mobx-react-lite";
+import { useEffect } from "react";
+import { Identifier } from "../../identifiers/Identifier";
+import { TypeCellIdentifier } from "../../identifiers/TypeCellIdentifier";
+import { DocConnection } from "../../store/DocConnection";
+import { SessionStore } from "../../store/local/SessionStore";
+import { slug } from "../../util/slug";
+
+// This updates the url in the address bar based on the document title
+// The ideal solution would probably be closer integrated to routing / identifiers,
+// but this works for now
+export const URLUpdater = observer(
+ (props: { identifiers: Identifier[]; sessionStore: SessionStore }) => {
+ const lastIdentifier = props.identifiers[props.identifiers.length - 1];
+ const connection = DocConnection.get(lastIdentifier, props.sessionStore);
+
+ let title: string | undefined;
+ let titleSet = false;
+ if (
+ lastIdentifier instanceof TypeCellIdentifier &&
+ connection?.tryDoc?.type === "!richtext"
+ ) {
+ title = connection.tryDoc.doc.title;
+ titleSet = true;
+ }
+
+ useEffect(() => {
+ if (!titleSet) {
+ return;
+ }
+ if (!(lastIdentifier instanceof TypeCellIdentifier)) {
+ throw new Error("not expected");
+ }
+
+ const slugged = slug(title || "");
+ const newPath = slugged.length
+ ? "/" + slugged + "~" + lastIdentifier.documentId
+ : "/" + lastIdentifier.documentId;
+ const url = window.location.href.replace(
+ new RegExp("/([^/]*~)?" + lastIdentifier.documentId),
+ newPath
+ );
+ // console.log("title change", title, url);
+ window.history.replaceState(window.history.state, "", url);
+ }, [title, lastIdentifier, titleSet]);
+
+ return null;
+ }
+);
diff --git a/packages/editor/src/app/routes/document.tsx b/packages/editor/src/app/routes/document.tsx
index d1eea4102..dc1a0d9b4 100644
--- a/packages/editor/src/app/routes/document.tsx
+++ b/packages/editor/src/app/routes/document.tsx
@@ -5,6 +5,7 @@ import { SessionStore } from "../../store/local/SessionStore";
import DocumentView from "../documentRenderers/DocumentView";
import { SupabaseSessionStore } from "../supabase-auth/SupabaseSessionStore";
import { RouteContext } from "./RouteContext";
+import { URLUpdater } from "./URLUpdater";
import { OwnerAliasRoute } from "./ownerAlias";
export const DocumentRoute = observer(
@@ -28,12 +29,17 @@ export const DocumentRoute = observer(
if (!owner || owner.length < 2 || !owner.startsWith("@")) {
const identifiers = tryPathToIdentifiers(location.pathname.substring(1));
if (identifiers !== "invalid-identifier") {
+ const [id, ...subs] = identifiers;
return (
+
diff --git a/packages/editor/src/app/routes/ownerAlias.tsx b/packages/editor/src/app/routes/ownerAlias.tsx
index 78e36789d..dc499359f 100644
--- a/packages/editor/src/app/routes/ownerAlias.tsx
+++ b/packages/editor/src/app/routes/ownerAlias.tsx
@@ -14,6 +14,7 @@ import { SessionStore } from "../../store/local/SessionStore";
import DocumentView from "../documentRenderers/DocumentView";
import { SupabaseSessionStore } from "../supabase-auth/SupabaseSessionStore";
import { RouteContext } from "./RouteContext";
+import { URLUpdater } from "./URLUpdater";
type Props = {
owner: string;
@@ -203,10 +204,12 @@ export const OwnerAliasRoute = observer(
);
}
- const [id, ...subs] = pathToIdentifiers(location.pathname.substring(1));
+ const identifiers = pathToIdentifiers(location.pathname.substring(1));
+ const [id, ...subs] = identifiers;
return (
+ = {
- // docs: "http:" + window.location.hostname + "/_docs/",
+ docs: window.location.protocol + window.location.host + "/_docs/",
// docs: "fs:localhost:3001",
- docs: "http:localhost/_docs/",
+ // docs: "http:localhost/_docs/",
};
private readonly reverseShortHands = Object.entries(this.shortHands).reduce(
@@ -211,9 +210,13 @@ export function getIdentifierWithAppendedPath(
pathToAppend: string
): Identifier {
const uri = identifier.uri.with({
- path: path.join(identifier.uri.path || "/", pathToAppend),
+ path: path.join(
+ identifier.uri.path || "/",
+ encodeURIComponent(pathToAppend)
+ ),
});
- return new FileIdentifier(uri);
+
+ return parseUriIdentifier(uri);
}
/**
@@ -227,6 +230,10 @@ export function parseFullIdentifierString(
const parsedUri = uri.URI.parse(identifierString);
+ return parseUriIdentifier(parsedUri);
+}
+
+function parseUriIdentifier(parsedUri: uri.URI) {
const identifierType = registeredIdentifiers.get(parsedUri.scheme);
if (!identifierType) {
throw new Error("identifier not found");
diff --git a/packages/editor/src/integrations/markdown/import.ts b/packages/editor/src/integrations/markdown/import.ts
index 0b893c6b5..8bb881496 100644
--- a/packages/editor/src/integrations/markdown/import.ts
+++ b/packages/editor/src/integrations/markdown/import.ts
@@ -1,6 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+ BlockNoteEditor,
+ createTipTapBlock,
+ defaultBlockSchema,
+} from "@blocknote/core";
+import { mergeAttributes } from "@tiptap/core";
import * as parsers from "@typecell-org/parsers";
import { uniqueId } from "@typecell-org/util";
-
import * as Y from "yjs";
export function markdownToXmlFragment(
@@ -31,12 +37,42 @@ export function markdownToXmlFragment(
return fragment;
}
-export function markdownToYDoc(markdown: string, title?: string) {
+export async function markdownToYDoc(markdown: string, title?: string) {
const newDoc = new Y.Doc();
- newDoc.getMap("meta").set("type", "!notebook");
+ newDoc.getMap("meta").set("type", "!richtext");
const xml = newDoc.getXmlFragment("doc");
- markdownToXmlFragment(markdown, xml);
+
+ const editor = new BlockNoteEditor({
+ blockSchema: {
+ ...defaultBlockSchema,
+ codeblock: {
+ propSchema: {
+ language: {
+ type: "string",
+ default: "typescript",
+ },
+ },
+ node: MonacoBlockContent,
+ },
+ },
+ collaboration: {
+ fragment: xml,
+ provider: undefined as any,
+ user: undefined as any,
+ },
+ initialContent: [
+ {
+ id: "sdfsdf",
+ type: "paragraph",
+ },
+ ],
+ });
+
+ const blocks = await editor.markdownToBlocks(markdown);
+ editor.replaceBlocks(editor.topLevelBlocks, blocks);
+
+ // markdownToXmlFragment(markdown, xml);
if (title) {
newDoc.getMap("meta").set("title", title);
@@ -44,5 +80,50 @@ export function markdownToYDoc(markdown: string, title?: string) {
// newDoc.getText("title").insert(0, title);
}
+ // debugger;
return newDoc;
}
+
+// hacky
+export const MonacoBlockContent = createTipTapBlock({
+ name: "codeblock",
+ content: "inline*",
+ editable: true,
+ selectable: true,
+ whitespace: "pre",
+ code: true,
+
+ addAttributes() {
+ return {
+ language: {
+ default: "typescript",
+ parseHTML: (element) => element.getAttribute("data-language"),
+ renderHTML: (attributes) => {
+ return {
+ "data-language": attributes.language,
+ };
+ },
+ },
+ };
+ },
+
+ parseHTML() {
+ return [
+ {
+ tag: "code",
+ priority: 200,
+ node: "codeblock",
+ },
+ ];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return [
+ "code",
+ mergeAttributes(HTMLAttributes, {
+ // class: styles.blockContent,
+ "data-content-type": this.name,
+ }),
+ ];
+ },
+});
diff --git a/packages/editor/src/store/DocumentResource.ts b/packages/editor/src/store/DocumentResource.ts
index 4f36a65ec..177940f14 100644
--- a/packages/editor/src/store/DocumentResource.ts
+++ b/packages/editor/src/store/DocumentResource.ts
@@ -28,7 +28,14 @@ export class DocumentResource extends BaseResource {
return baseTitle;
}
- return "TODO";
+ // navigate to block (via blockgroup / blockcontainer)
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const firstBlock = (this.data.firstChild as any)?.firstChild?.firstChild;
+ if (firstBlock?.nodeName === "heading") {
+ return firstBlock.firstChild?.toString();
+ }
+
+ return undefined;
// let cell = this.cells[0];
// if (!cell || cell.language !== "markdown") {
// return undefined;
diff --git a/packages/editor/src/store/yjs-sync/DocumentCoordinator.ts b/packages/editor/src/store/yjs-sync/DocumentCoordinator.ts
index d8cdde355..02980e8ef 100644
--- a/packages/editor/src/store/yjs-sync/DocumentCoordinator.ts
+++ b/packages/editor/src/store/yjs-sync/DocumentCoordinator.ts
@@ -120,6 +120,37 @@ export class DocumentCoordinator extends lifecycle.Disposable {
return ret;
}
+ // hacky fix for docs / httpidentifier
+ public async clearIfNotChanged(identifier: Identifier) {
+ const idStr = identifier.toString();
+ if (!this.indexedDBProvider.synced) {
+ throw new Error("not initialized");
+ }
+
+ // console.log("Coordinator load debug", idStr, this.userId);
+ if (this.loadedDocuments.has(idStr)) {
+ // we expect loadDocument only to be called once per document
+ throw new Error("loadDocument: document already loaded");
+ }
+
+ const meta = this.documents.get(idStr);
+
+ if (!meta) {
+ return "not-found";
+ }
+
+ if (meta.needs_save_since) {
+ return "changed";
+ }
+
+ const doc = await this.loadDocument(identifier, new Y.Doc());
+ if (doc === "not-found") {
+ throw new Error("unexpected: doc not found");
+ }
+ await this.deleteLocal(identifier);
+ doc.ydoc.destroy();
+ }
+
/**
* Load a local document if we have it in local storage
* Otherwise return "not-found"
diff --git a/packages/editor/src/store/yjs-sync/SyncManager.ts b/packages/editor/src/store/yjs-sync/SyncManager.ts
index aa9cdfa39..288510e97 100644
--- a/packages/editor/src/store/yjs-sync/SyncManager.ts
+++ b/packages/editor/src/store/yjs-sync/SyncManager.ts
@@ -17,7 +17,6 @@ import { MatrixIdentifier } from "../../identifiers/MatrixIdentifier";
import { TypeCellIdentifier } from "../../identifiers/TypeCellIdentifier";
import { LocalDoc } from "./DocumentCoordinator";
import FetchRemote from "./remote/FetchRemote";
-import { FilebridgeRemote } from "./remote/FilebridgeRemote";
// import { MatrixRemote } from "./remote/MatrixRemote";
import { makeYDocObservable } from "@syncedstore/yjs-reactive-bindings";
@@ -131,12 +130,21 @@ export class SyncManager extends lifecycle.Disposable {
}
get canWrite(): boolean {
+ if (
+ this.remote instanceof FetchRemote &&
+ this.state.status === "syncing" &&
+ this.state.localDoc.meta.needs_save_since
+ ) {
+ // hacky fix for docs / httpidentifier
+ return false;
+ }
return this.remote.canWrite;
}
private remoteForIdentifier(identifier: Identifier): Remote {
if (identifier instanceof FileIdentifier) {
- return new FilebridgeRemote(this.ydoc, identifier);
+ throw new Error("not implemented anymore");
+ // return new FilebridgeRemote(this.ydoc, identifier);
} else if (identifier instanceof GithubIdentifier) {
throw new Error("not implemented anymore");
// return new GithubRemote(this.ydoc, identifier);
@@ -245,6 +253,13 @@ export class SyncManager extends lifecycle.Disposable {
if (!this.sessionStore.documentCoordinator) {
throw new Error("logged out while loading");
}
+
+ if (this.identifier instanceof HttpsIdentifier) {
+ await this.sessionStore.documentCoordinator.clearIfNotChanged(
+ this.identifier
+ );
+ }
+
const doc = this.sessionStore.documentCoordinator.loadDocument(
this.identifier,
this.ydoc
@@ -258,14 +273,18 @@ export class SyncManager extends lifecycle.Disposable {
// TODO: catch when doc didn't exist locally
await doc.idbProvider.whenSynced;
- // console.log("done synced", doc.ydoc.toJSON());
+
runInAction(() => {
this.state = {
status: "syncing",
localDoc: doc,
};
});
- return this.startSyncing();
+
+ // hacky fix for docs / httpidentifier
+ if (!(this.identifier instanceof HttpsIdentifier)) {
+ return this.startSyncing();
+ }
}
}
diff --git a/packages/editor/src/store/yjs-sync/remote/FetchRemote.ts b/packages/editor/src/store/yjs-sync/remote/FetchRemote.ts
index 57556aaea..b5555b770 100644
--- a/packages/editor/src/store/yjs-sync/remote/FetchRemote.ts
+++ b/packages/editor/src/store/yjs-sync/remote/FetchRemote.ts
@@ -1,7 +1,7 @@
import { makeObservable, observable, runInAction } from "mobx";
import { path, strings } from "vscode-lib";
-import { ChildReference } from "@typecell-org/shared";
+import { ChildReference, IndexFileReference } from "@typecell-org/shared";
import _ from "lodash";
import * as Y from "yjs";
import { filesToTreeNodes } from "../../../app/documentRenderers/project/directoryNavigation/treeNodeUtil";
@@ -11,6 +11,30 @@ import { markdownToYDoc } from "../../../integrations/markdown/import";
import ProjectResource from "../../ProjectResource";
import { Remote } from "./Remote";
+type IndexFile = {
+ title: string;
+ items: string[];
+};
+
+// function isEmptyDoc(doc: Y.Doc) {
+// return areDocsEqual(doc, new Y.Doc());
+// }
+
+// // NOTE: only changes in doc xml fragment are checked
+// function areFragmentsEqual(fragment1: Y.XmlFragment, fragment2: Y.XmlFragment) {
+// return _.eq(
+// (fragment1.toJSON() as string).replaceAll(/block-id=".*"/g, ""),
+// (fragment2.toJSON() as string).replaceAll(/block-id=".*"/g, "")
+// );
+// }
+
+// function areDocsEqual(doc1: Y.Doc, doc2: Y.Doc) {
+// return areFragmentsEqual(
+// doc1.getXmlFragment("doc"),
+// doc2.getXmlFragment("doc")
+// );
+// }
+
export default class FetchRemote extends Remote {
private disposed = false;
protected id = "fetch";
@@ -54,38 +78,45 @@ export default class FetchRemote extends Remote {
}
}
- private async getNewYDocFromDir(objects: string[]) {
+ private async getNewYDocFromDir(indexFile: IndexFile) {
const newDoc = new Y.Doc();
newDoc.getMap("meta").set("type", "!project");
+ newDoc.getMap("meta").set("title", indexFile.title);
const project = new ProjectResource(newDoc, this.identifier); // TODO
const tree = filesToTreeNodes(
- objects.map((object) => ({ fileName: object }))
+ indexFile.items.map((object) => ({ fileName: object }))
);
tree.forEach((node) => {
const id = getIdentifierWithAppendedPath(this.identifier, node.fileName);
-
project.addRef(ChildReference, id, undefined, false);
+
+ if (node.fileName === "README.md") {
+ project.addRef(IndexFileReference, id, undefined, false);
+ }
});
return newDoc;
}
private fetchIndex = _.memoize(async (path: string) => {
- return (await (await fetch(path)).json()) as string[];
+ return (await (await fetch(path)).json()) as IndexFile;
});
private async getNewYDocFromFetch() {
if (this.identifier.uri.path.endsWith(".json")) {
- const json = await this.fetchIndex(this.identifier.uri.toString());
+ const json = await this.fetchIndex(this.identifier.uri.toString(true));
return this.getNewYDocFromDir(json);
} else if (this.identifier.uri.path.endsWith(".md")) {
const contents = await (
- await fetch(this.identifier.uri.toString())
+ await fetch(this.identifier.uri.toString(true))
).text();
- return markdownToYDoc(contents, path.basename(this.identifier.uri.path));
+ return markdownToYDoc(
+ contents,
+ decodeURIComponent(path.basename(this.identifier.uri.path))
+ );
} else {
// TODO: this is hacky. We should use json from parent route instead. Revise routing?
@@ -94,14 +125,19 @@ export default class FetchRemote extends Remote {
.split("/");
const index = this.identifier.uri.with({ path: root + "/index.json" });
- let json = await this.fetchIndex(index.toString());
+ const json = await this.fetchIndex(index.toString());
- const prefix = remainders.join("/") + "/";
- json = json.filter((path) => path.startsWith(prefix));
- json = json.map((path) => path.substring(prefix.length));
- if (!json.length) {
+ let prefix = remainders.join("/"); // + "/";
+ if (prefix) {
+ prefix = prefix + "/";
+ json.title = path.basename(this.identifier.uri.path);
+ }
+ let items = json.items.filter((path) => path.startsWith(prefix));
+ items = items.map((path) => path.substring(prefix.length));
+ if (!items.length) {
return "not-found" as const;
}
+ json.items = items;
return this.getNewYDocFromDir(json);
}
}
@@ -122,6 +158,7 @@ export default class FetchRemote extends Remote {
runInAction(() => {
this.status = "loaded";
const update = Y.encodeStateAsUpdateV2(docData);
+
Y.applyUpdateV2(this._ydoc, update, this);
});
this._ydoc.on("update", this.documentUpdateListener);
diff --git a/packages/editor/src/store/yjs-sync/remote/FilebridgeRemote.ts b/packages/editor/src/store/yjs-sync/remote/FilebridgeRemote.ts
deleted file mode 100644
index 4e9ddc80c..000000000
--- a/packages/editor/src/store/yjs-sync/remote/FilebridgeRemote.ts
+++ /dev/null
@@ -1,242 +0,0 @@
-import { readFile, saveFile, Watcher } from "filebridge-client";
-import * as _ from "lodash";
-import { makeObservable, observable, runInAction } from "mobx";
-import { path, strings } from "vscode-lib";
-import * as Y from "yjs";
-import { filesToTreeNodes } from "../../../app/documentRenderers/project/directoryNavigation/treeNodeUtil";
-import { FileIdentifier } from "../../../identifiers/FileIdentifier";
-import { getIdentifierWithAppendedPath } from "../../../identifiers/paths/identifierPathHelpers";
-import { xmlFragmentToMarkdown } from "../../../integrations/markdown/export";
-import { markdownToXmlFragment } from "../../../integrations/markdown/import";
-import ProjectResource from "../../ProjectResource";
-
-import { ChildReference } from "@typecell-org/shared";
-import { Remote } from "./Remote";
-
-// function isEmptyDoc(doc: Y.Doc) {
-// return areDocsEqual(doc, new Y.Doc());
-// }
-
-// NOTE: only changes in doc xml fragment are checked
-function areFragmentsEqual(fragment1: Y.XmlFragment, fragment2: Y.XmlFragment) {
- return _.eq(
- (fragment1.toJSON() as string).replaceAll(/block-id=".*"/g, ""),
- (fragment2.toJSON() as string).replaceAll(/block-id=".*"/g, "")
- );
-}
-
-// function areDocsEqual(doc1: Y.Doc, doc2: Y.Doc) {
-// return areFragmentsEqual(
-// doc1.getXmlFragment("doc"),
-// doc2.getXmlFragment("doc")
-// );
-// }
-
-/**
- * Given an identifier, manages local + remote syncing of a Y.Doc
- */
-export class FilebridgeRemote extends Remote {
- private disposed = false;
- protected id = "filebridge";
- public canCreate = false;
- private watcher: Watcher | undefined;
-
- public canWrite = true;
-
- public get awareness() {
- return undefined;
- }
-
- public constructor(
- _ydoc: Y.Doc,
- private readonly identifier: FileIdentifier
- ) {
- super(_ydoc);
- makeObservable(this, {
- canWrite: observable.ref,
- });
- }
-
- private documentsByPath = new Set();
-
- private async updateYDocFromDir() {
- const pathWithTrailingSlash = this.identifier.path
- ? strings.trim(this.identifier.path, "/") + "/"
- : "";
-
- this._ydoc.getMap("meta").set("type", "!project");
- if (this.identifier.path) {
- this._ydoc
- .getMap("meta")
- .set("title", path.basename(this.identifier.path));
- }
- const project = new ProjectResource(this._ydoc, this.identifier); // TODO
-
- this.watcher = this._register(
- new Watcher(pathWithTrailingSlash + "**/*.md")
- );
- this._register(
- this.watcher.onWatchEvent(async (e) => {
- let path = e.path;
- if (pathWithTrailingSlash && !path.startsWith(pathWithTrailingSlash)) {
- throw new Error("file returned with invalid path");
- }
- path = path.substring(pathWithTrailingSlash.length);
-
- const oldDocs = [...this.documentsByPath];
- const oldTree = filesToTreeNodes(
- Array.from(oldDocs).map((p) => ({ fileName: p }))
- );
-
- if (e.event === "add") {
- // project.addRef(ChildReference);
- this.documentsByPath.add(path);
- } else if (e.event === "unlink") {
- this.documentsByPath.delete(path);
- const id = getIdentifierWithAppendedPath(this.identifier, path);
- // TODO: check if this works
- project.removeRef(ChildReference, id);
- }
-
- const tree = filesToTreeNodes(
- Array.from(this.documentsByPath).map((p) => ({ fileName: p }))
- );
-
- oldTree.forEach((node) => {
- if (!tree.find((n) => n.fileName === node.fileName)) {
- const id = getIdentifierWithAppendedPath(
- this.identifier,
- node.fileName
- );
- project.removeRef(ChildReference, id);
- }
- });
-
- tree.forEach((node) => {
- const id = getIdentifierWithAppendedPath(
- this.identifier,
- node.fileName
- );
-
- project.addRef(ChildReference, id, undefined, false);
- });
- })
- );
- }
-
- private async updateYDocFromId() {
- const ret = await readFile(
- fetch,
- this.identifier.uri.path,
- "http://" + this.identifier.uri.authority
- );
- if (this.disposed) {
- return;
- }
- if (ret.type === "file") {
- this._ydoc.on("update", this.documentUpdateListener);
- this._register({
- dispose: () => this._ydoc.off("update", this.documentUpdateListener),
- });
- await this.updateYDocFromContents(
- ret.contents,
- path.basename(this.identifier.uri.path)
- );
- await this.updateYDocFromFile();
- } else {
- await this.updateYDocFromDir();
- }
- runInAction(() => {
- this.status = "loaded";
- });
- }
-
- private async updateYDocFromContents(contents: string, title?: string) {
- this._ydoc.getMap("meta").set("type", "!notebook");
- this._ydoc.getMap("meta").set("title", title);
- const newXml = markdownToXmlFragment(contents, undefined);
-
- const fragment = this._ydoc.getXmlFragment("doc");
-
- if (!areFragmentsEqual(fragment, newXml)) {
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- const update = Y.encodeStateAsUpdateV2(newXml.doc!);
- Y.applyUpdateV2(this._ydoc, update, this);
- }
- }
-
- private async updateYDocFromFile() {
- this.watcher = this._register(
- new Watcher(this.identifier.path, "ws://" + this.identifier.uri.authority)
- );
-
- this._register(
- this.watcher.onWatchEvent(async (event) => {
- if (event.event !== "change") {
- // TODO: support onlink
- return;
- }
- const file = await readFile(
- fetch,
- this.identifier.path,
- "http://" + this.identifier.uri.authority
- );
-
- if (file.type !== "file") {
- throw new Error("unexpected");
- }
- await this.updateYDocFromContents(file.contents);
- })
- );
- }
-
- private getFileFromYDoc(doc: Y.Doc) {
- // const contents = await readFile(this.identifier.path);
- // const nbData = markdownToNotebook(contents);
- if (doc.getMap("meta").get("type") !== "!notebook") {
- throw new Error("invalid type");
- }
-
- const xml = doc.getXmlFragment("doc");
-
- return xmlFragmentToMarkdown(xml);
- }
-
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- private documentUpdateListener = async (update: any, origin: any) => {
- if (origin === this) {
- // these are updates that came in from this provider
- return;
- }
- if (origin?.provider) {
- // remote update
- return;
- }
- await saveFile(
- fetch,
- this.identifier.path,
- this.getFileFromYDoc(this._ydoc),
- "http://" + this.identifier.uri.authority
- );
- };
-
- public startSyncing(): Promise {
- return this.initialize();
- }
-
- public async initialize() {
- try {
- await this.updateYDocFromId();
- } catch (e) {
- console.error(e);
- runInAction(() => {
- this.status = "not-found";
- });
- }
- }
-
- public dispose() {
- this.disposed = true;
- super.dispose();
- }
-}
diff --git a/packages/editor/src/styles/index.css b/packages/editor/src/styles/index.css
index 8b18ad2ed..3a44c6c11 100644
--- a/packages/editor/src/styles/index.css
+++ b/packages/editor/src/styles/index.css
@@ -63,11 +63,6 @@ body,
overflow-y: auto;
}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
-}
-
h1,
h2,
h3,
@@ -98,191 +93,13 @@ h6 {
background: white;
}
-.cellList-item {
- padding-left: 100px;
- /* border:1px solid black; */
- margin: 10px;
- position: relative;
-}
-
-.cellList-add-single {
- position: absolute;
- left: 50%;
- top: 50%;
-}
-
-.cellList-add {
- color: #ccc;
-}
-
-.cellList-add:hover {
- color: black;
-}
-
-.notebookCell-sideIcon {
- /* margin-top: 10px; */
- margin-top: 5px;
- margin-right: 5px;
- z-index: 10;
- cursor: pointer;
-}
-
-.notebookCell-content {
- border-radius: 4px;
- box-shadow: rgb(235, 236, 240) 0px 0px 0px 1.2px;
- width: 100%;
-}
-
-.slate-typecell.collapsed .notebookCell-content {
- box-shadow: none;
-}
-
-.notebookCell-codeContainer {
- position: relative;
- padding-left: 10px;
- background: #f4f5f7;
- width: 100%; /* todo: fix when making window smaller */
- min-height: 40px; /* so toolbar fits */
-}
-
-.inlineCell,
-.inlineCell .output {
- display: inline;
- padding: 0;
-}
-
-.inlineCell-codeContainer {
- position: absolute;
- width: 450px;
- left: calc(50% - 225px);
- top: 15px;
- z-index: 1000;
-}
-
-.inlineCell-codeContainer > .code {
- border-radius: 4px;
- box-shadow: rgb(235, 236, 240) 0px 0px 0px 1.2px;
-}
-
-.inlineCell-codeContainer > .arrow {
- display: block;
- margin: 0 auto;
- margin-bottom: -4px;
- color: rgb(235, 236, 240);
-}
-
-.fullCell-codeContainer {
- padding-left: 10px;
- background: #f4f5f7;
- height: 100%;
- width: 100%; /* todo: fix when making window smaller */
-}
-
-.fullCell {
- /* position:relative; */
- display: contents;
-}
-
-.fullCell > :first-child {
- position: relative;
-}
-
-.outputWrapper {
- display: inline-block;
-}
-.fullCell.inspectingHover > :first-child::before {
- /* background: #ccc; */
- content: "";
- width: 100%;
- height: 100%;
- position: absolute;
- background: rgba(187, 222, 251, 0.68);
- z-index: 1000;
- pointer-events: none;
-}
-
-.output {
- /* padding: 10px; */
- /* because it contains inline-block outputWrapper */
- line-height: 0;
-}
-
-.slate-typecell.collapsed .output {
- padding: 0;
- padding-top: 5px;
-}
-
-.output > * {
- line-height: normal;
-}
-
-.draggableWindow {
- top: 0;
- position: absolute;
- z-index: 1000;
-}
-
-.window {
- border-radius: 4px;
- box-shadow: rgb(235, 236, 240) 0px 0px 0px 1.2px;
- background: white;
-}
-
-.windowContent {
- overflow: hidden;
-}
-
-.windowTitle {
- padding: 4px;
-
- border-bottom: 1px solid rgb(235, 236, 240);
- text-align: center;
- /* background: #ffffff; */
- /* background-image: -webkit-linear-gradient(top, rgb(250, 250, 250) 0px, rgb(246, 246, 246) 100%); */
- -webkit-user-select: none;
- user-select: none;
- cursor: default;
- font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
- sans-serif;
- font-size: 13px;
- letter-spacing: 0px;
- color: rgb(100, 100, 100);
-}
-
-/* .field {
- transform:
- scale(0.75)
- rotateY(-30deg)
- rotateX(45deg)
- translateZ(4.5rem);
- transform-origin: 50% 100%;
- transform-style: preserve-3d;
- box-shadow: 1rem 1rem 2rem rgba(0,0,0,0.25);
- transition: 0.6s ease transform;
-}
-.field:hover {
- transform: scale(1);
-}
-.field::before {
- transform: translateZ(4rem);
-}
-.field::before:hover {
- transform: translateZ(0);
-}
-.field::after {
- transform: translateZ(-4rem);
-}
-.field::after:hover {
- transform: translateZ(-1px);
-} */
-
-.hint::before {
+/* .hint::before {
display: inline-block;
position: absolute;
content: attr(data-hint);
-}
+} */
-.hint,
+/* .hint,
.placeholder {
pointer-events: none;
display: inline-block;
@@ -294,198 +111,8 @@ h6 {
font-style: italic;
font-weight: normal;
text-decoration: none;
-}
-
-.cellList {
- width: 100%;
- position: relative;
-}
-/* styles below based on pluto */
-.cellList {
- padding-top: 20px;
- padding-bottom: 4rem;
- padding-left: 6px;
- padding-right: 6px;
- align-content: center;
- width: 100%;
- flex: 1 1 0%;
- overflow-y: auto;
-}
-
-.cellList > div {
- margin: 0 auto;
- max-width: calc(731px);
-}
-
-.cellList-item {
- margin: 0;
- padding: 0;
- display: block;
- min-height: calc(25px);
- margin-top: 17px;
- position: relative;
-}
-
-/* .shoulder > button, */
-.cellList-item > button {
- position: absolute;
- margin: 0px;
- padding: 1px;
- opacity: 50%;
- border: none;
- background: none;
- cursor: pointer;
- /* color: hsl(204, 86%, 35%); */
- color: black;
- font-family: "Segoe UI Emoji", "Roboto Mono", monospace;
- font-size: 0.75rem;
- z-index: 3;
- /* CodeMirror is 2 */
-}
-
-.shoulder {
- position: absolute;
- /* top: 0px; */
- /* bottom: 0px; */
- left: -2000px;
- width: 2000px;
- cursor: move;
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- align-items: flex-start;
- /* Add an invisible border around the shoulder, to make it easier to click on. (The are between two cells is divided in two, each half belongs to the closest pluto-cell.) */
- top: calc(0px - 0.5 * 17px);
- bottom: calc(0px - 0.5 * 17px);
- border-top: calc(0.5 * 17px) solid rgba(0, 0, 0, 0);
- border-bottom: calc(0.5 * 17px) solid rgba(0, 0, 0, 0);
-}
-
-.shoulder:hover {
- background: rgba(0, 0, 0, 0.05);
- background-clip: padding-box;
-}
-
-/* .shoulder > button {
- flex: 0 0 auto;
- position: sticky;
- top: 0px;
- margin-top: 4px;
- margin-right: 5px;
- padding: 0px 1px;
} */
-pluto-cell:focus-within > .shoulder > button {
- /* we use padding instead of 4px extra margin to move the eye to the left so that the hitbox becomes grows - you want to be able to double click the button */
- padding-right: 4px;
-}
-
-/* pluto-cell.code_folded.inline-output > .shoulder > button {
- margin-top: 3px;
-} */
-
-pluto-cell > button > span,
-pluto-input > button > span {
- pointer-events: none;
-}
-
-@media screen and (any-pointer: fine) {
- .cellList-item > button,
- .shoulder > button,
- .cellList-item > pluto-runarea {
- opacity: 0;
- /* to make it feel smooth: */
- transition: opacity 0.25s ease-in-out;
- }
- .cellList-item .notebookCell-sideIcon {
- opacity: 0.5;
- transition: opacity 0.25s ease-in-out;
- }
- .cellList-item.hover > button,
- .cellList-item.hover > .shoulder > button {
- opacity: 0.25;
- transition: opacity 0.25s ease-in-out;
- }
- .cellList-item .notebookCell-sideIcon:hover,
- .cellList-item > button:hover,
- .cellList-item > .shoulder > button:hover {
- opacity: 1;
- /* to make it feel snappy: */
- transition: opacity 0.05s ease-in-out;
- }
-}
-
-@media screen and (any-pointer: coarse) {
- .cellList-item > button,
- .cellList-item > pluto-runarea {
- opacity: 0;
- /* to make it feel smooth: */
- transition: opacity 0.25s ease-in-out;
- }
- .cellList-item .notebookCell-sideIcon {
- opacity: 0.5;
- }
- .cellList-item:focus-within > button,
- .cellList-item:focus-within > .shoulder > button {
- opacity: 0.25;
- }
- .cellList-item > button:focus-within,
- .cellList-item > .shoulder > button:focus-within {
- opacity: 1;
- /* to make it feel snappy: */
- transition: opacity 0.05s ease-in-out;
- }
-}
-
-.cellList-item > button > span::after,
-.shoulder > button > span::after {
- display: block;
- content: " " !important;
- background-size: 17px 17px;
- height: 17px;
- width: 17px;
-}
-
-.cellList-item > button.add_cell {
- left: -12px;
-}
-
-.cellList-item > button.add_cell.before {
- margin-top: calc(-19px - 0.5 * (17px - 19px)) !important;
-}
-
-.cellList-item > button.add_cell.after {
- bottom: 1px;
- margin-bottom: calc(-20px - 0.5 * (17px - 19px));
-}
-
-.cellList-item > button.add_cell > span::after {
- /* background-image: url(https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.0.0/src/svg/add-circle-outline.svg); */
- background-image: url(../assets/add-outline.svg);
-}
-
-.cellList-item .notebookCell-sideIcon {
- /* margin-top: 10px; */
- margin-top: 0;
- margin-right: 0;
- position: absolute;
- left: -20px;
- top: 5px;
- z-index: 10;
-}
-
-.notebookCell.markdown.collapsed .notebookCell-content {
- box-shadow: none;
-}
-
-.notebookCell.markdown.collapsed .notebookCell-sideIcon {
- visibility: hidden;
-}
-
-.cellList-item.hover .notebookCell.markdown.collapsed .notebookCell-sideIcon {
- visibility: visible;
-}
-
/* // https://github.com/react-dnd/react-dnd/issues/832#issuecomment-442071628
// TODO: should only be set when dragging */
diff --git a/packages/editor/src/util/slug.ts b/packages/editor/src/util/slug.ts
index 1dbb5bc38..7a98aebda 100644
--- a/packages/editor/src/util/slug.ts
+++ b/packages/editor/src/util/slug.ts
@@ -2,8 +2,8 @@ import speakingurl from "speakingurl";
export function slug(str: string) {
return speakingurl(str, {
- custom: {
- "@": "@", // TODO: necesary?
- },
+ // custom: {
+ // "@": "@", // TODO: necesary?
+ // },
});
}
diff --git a/packages/frame/package.json b/packages/frame/package.json
index e96724d13..2c94c610f 100644
--- a/packages/frame/package.json
+++ b/packages/frame/package.json
@@ -3,13 +3,14 @@
"version": "0.0.3",
"private": true,
"dependencies": {
- "@blocknote/core": "^0.8.5",
- "@blocknote/react": "^0.8.5",
+ "@blocknote/core": "^0.9.2",
+ "@blocknote/react": "^0.9.2",
"@typecell-org/util": "^0.0.3",
"@typecell-org/shared": "^0.0.3",
"@typecell-org/engine": "^0.0.3",
"@tiptap/core": "^2.0.4",
"@tiptap/react": "^2.0.4",
+ "@floating-ui/react": "^0.25.1",
"@syncedstore/yjs-reactive-bindings": "^0.5.1",
"lz-string": "^1.4.4",
"markdown-it": "^12.0.2",
diff --git a/packages/frame/src/Frame.tsx b/packages/frame/src/Frame.tsx
index 935ebf530..17c68f814 100644
--- a/packages/frame/src/Frame.tsx
+++ b/packages/frame/src/Frame.tsx
@@ -207,6 +207,7 @@ export const Frame: React.FC = observer((props) => {
const newEngine = new ReactiveEngine(
resolver.resolveImport
);
+
const newExecutionHost: ExecutionHost = new LocalExecutionHost(
props.documentIdString,
newCompiler,
@@ -249,13 +250,15 @@ export const Frame: React.FC = observer((props) => {
// }, [document.awareness, props.userColor, props.userName]);
const editor = useBlockNote({
- editorDOMAttributes: {
- class: styles.editor,
- "data-test": "editor",
+ domAttributes: {
+ editor: {
+ class: styles.editor,
+ "data-test": "editor",
+ },
},
blockSchema: {
...defaultBlockSchema,
- monaco: {
+ codeblock: {
propSchema: {
language: {
type: "string",
@@ -271,7 +274,7 @@ export const Frame: React.FC = observer((props) => {
name: "Code block",
execute: (editor) =>
insertOrUpdateBlock(editor, {
- type: "monaco",
+ type: "codeblock",
}),
aliases: ["code"],
},
diff --git a/packages/frame/src/LanguageSelector.module.css b/packages/frame/src/LanguageSelector.module.css
new file mode 100644
index 000000000..2cc4397a6
--- /dev/null
+++ b/packages/frame/src/LanguageSelector.module.css
@@ -0,0 +1,54 @@
+.languageSelector {
+ position: absolute;
+ z-index: 10;
+ bottom: 3px;
+ right: 0;
+
+ display: inline-block;
+ border: none;
+ margin: 0;
+ text-decoration: none;
+ color: rgb(66, 82, 110);
+ background-color: transparent;
+ font-family: "Roboto Mono", monospace;
+ font-size: 0.8rem;
+ cursor: pointer;
+ text-align: center;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+}
+
+.languageOptions {
+ background-color: rgb(255, 255, 255);
+ box-shadow: 0 4px 8px -2px rgb(9 30 66 / 25%), 0 0 1px rgb(9 30 66 / 31%);
+ /* padding: 2px; */
+ border-radius: 5px;
+ z-index: 10000;
+}
+
+.languageOptions > button {
+ padding: 6px 8px;
+ align-items: baseline;
+ border-width: 0px;
+ box-sizing: border-box;
+ display: flex;
+ white-space: nowrap;
+ cursor: pointer;
+ background-color: transparent;
+ color: rgba(66, 82, 110, 1);
+ font-family: "Roboto Mono", monospace;
+
+ width: 100%;
+
+ align-items: center;
+ justify-content: flex-start;
+}
+
+.icon {
+ margin-right: 3px;
+}
+
+.languageOptions > button:hover {
+ /* This color is "Gram's hair" from https://atlassian.design/foundations/color */
+ background: #f4f5f7;
+}
diff --git a/packages/frame/src/LanguageSelector.tsx b/packages/frame/src/LanguageSelector.tsx
new file mode 100644
index 000000000..3c4e4de7e
--- /dev/null
+++ b/packages/frame/src/LanguageSelector.tsx
@@ -0,0 +1,84 @@
+import {
+ useClick,
+ useDismiss,
+ useFloating,
+ useInteractions,
+} from "@floating-ui/react";
+import React, { useState } from "react";
+import { SiCss3, SiTypescript } from "react-icons/si";
+
+import styles from "./LanguageSelector.module.css";
+
+type CellLanguage = "typescript" | "css";
+
+type Props = {
+ language: CellLanguage;
+ onChangeLanguage: (language: CellLanguage) => void;
+ // onRemove: () => void;
+};
+
+// TODO: this is rerendered whenever the user types :/
+const LanguageSelector: React.FC = (props) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const { refs, floatingStyles, context } = useFloating({
+ open: isOpen,
+ onOpenChange: setIsOpen,
+ placement: "bottom-end",
+ });
+
+ const dismiss = useDismiss(context);
+ const click = useClick(context);
+
+ const { getReferenceProps, getFloatingProps } = useInteractions([
+ click,
+ dismiss,
+ ]);
+
+ const languageName = (language: CellLanguage) => {
+ switch (language) {
+ case "typescript":
+ return "TypeScript";
+ case "css":
+ return "CSS";
+ }
+ };
+ return (
+ <>
+
+ {isOpen && (
+ ;
+ }
) => {
const { htmlAttributes, ...restProps } = props;
return (
@@ -58,12 +62,13 @@ const ComponentWithWrapper = (
};
// TODO: clean up listeners
-export const MonacoBlockContent = createTipTapBlock({
- name: "monaco",
+export const MonacoBlockContent = createTipTapBlock<"codeblock", any>({
+ name: "codeblock",
content: "inline*",
editable: true,
selectable: true,
-
+ whitespace: "pre",
+ code: true,
addAttributes() {
return {
language: {
@@ -71,7 +76,7 @@ export const MonacoBlockContent = createTipTapBlock({
parseHTML: (element) => element.getAttribute("data-language"),
renderHTML: (attributes) => {
return {
- "data-language": attributes.level,
+ "data-language": attributes.language,
};
},
},
@@ -83,7 +88,7 @@ export const MonacoBlockContent = createTipTapBlock({
{
tag: "code",
priority: 200,
- node: "monaco",
+ node: "codeblock",
},
];
},
@@ -95,7 +100,6 @@ export const MonacoBlockContent = createTipTapBlock({
// class: styles.blockContent,
"data-content-type": this.name,
}),
- ["p", 0],
];
},
@@ -131,7 +135,7 @@ export const MonacoBlockContent = createTipTapBlock({
();
// const refa = useRef(Math.random());
@@ -37,9 +44,10 @@ const MonacoElementComponent = function MonacoElement(
`file:///!${context.documentId}/${props.block.id}.cell.tsx`
);
console.log("allocate model", uri.toString());
+
const model = getMonacoModel(
- props.node.textContent,
- "typescript",
+ textFromPMNode(props.node),
+ props.block.props.language,
uri,
monaco
);
@@ -72,6 +80,12 @@ const MonacoElementComponent = function MonacoElement(
models.state.isUpdating = true;
models.state.node = props.node;
try {
+ if (props.block.props.language !== models.codeModel.language) {
+ monaco.editor.setModelLanguage(
+ models.model,
+ props.block.props.language
+ );
+ }
applyNodeChangesToMonaco(props.node, models.model);
models.state.lastDecorations = applyDecorationsToMonaco(
models.model,
@@ -85,7 +99,7 @@ const MonacoElementComponent = function MonacoElement(
} finally {
models.state.isUpdating = false;
}
- }, [props.node, props.decorations, models]);
+ }, [props.node, props.block, props.decorations, models]);
// useImperativeHandle(
// ref,
@@ -186,7 +200,9 @@ const MonacoElementComponent = function MonacoElement(
[models.model, models.state, props.editor.view, props.getPos]
);
- const [codeVisible, setCodeVisible] = useState(true);
+ const [codeVisible, setCodeVisible] = useState(
+ () => props.node.textContent.startsWith("// @default-collapsed") === false
+ );
return (
+
+
+
+ )}
+
+ );
+};
+
+export default LanguageSelector;
diff --git a/packages/frame/src/MonacoBlockContent.tsx b/packages/frame/src/MonacoBlockContent.tsx
index 89062aca8..e2174683e 100644
--- a/packages/frame/src/MonacoBlockContent.tsx
+++ b/packages/frame/src/MonacoBlockContent.tsx
@@ -1,4 +1,5 @@
-import { createTipTapBlock } from "@blocknote/core";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { BlockNoteEditor, createTipTapBlock } from "@blocknote/core";
import { mergeAttributes } from "@tiptap/core";
// import styles from "../../Block.module.css";
@@ -25,7 +26,7 @@ function arrowHandler(
side
);
console.log("nextPos", nextPos.$head.parent.type.name);
- if (nextPos.$head && nextPos.$head.parent.type.name === "monaco") {
+ if (nextPos.$head && nextPos.$head.parent.type.name === "codeblock") {
dispatch(state.tr.setSelection(nextPos));
return true;
}
@@ -39,12 +40,15 @@ const arrowHandlers = keymap({
ArrowRight: arrowHandler("right"),
ArrowUp: arrowHandler("up"),
ArrowDown: arrowHandler("down"),
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
} as any);
const ComponentWithWrapper = (
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- props: NodeViewProps & { block: any; htmlAttributes: any; selectionHack: any }
+ props: NodeViewProps & {
+ block: any;
+ htmlAttributes: any;
+ selectionHack: any;
+ blockNoteEditor: BlockNoteEditor
{/* {props.toolbar && props.toolbar} */}
+ {
+ (props.blockNoteEditor as BlockNoteEditor).updateBlock(
+ props.block,
+ {
+ props: {
+ language: lang,
+ },
+ }
+ );
+ }}
+ />
)}
diff --git a/packages/frame/src/MonacoProsemirrorHelpers.ts b/packages/frame/src/MonacoProsemirrorHelpers.ts
index d8ec46fb1..042909535 100644
--- a/packages/frame/src/MonacoProsemirrorHelpers.ts
+++ b/packages/frame/src/MonacoProsemirrorHelpers.ts
@@ -38,6 +38,25 @@ function getTransactionForSelectionUpdate(
}
}
+// because node.textContent doesn't preserve newlines
+export function textFromPMNode(node: Node): string {
+ if (!node.isTextblock) {
+ throw new Error("not a text node");
+ }
+ let text = "";
+ node.forEach((c) => {
+ if (c.type.name === "hardBreak") {
+ text += "\n";
+ } else if (c.isText) {
+ text += c.text;
+ } else {
+ throw new Error("not a text or hardBreak node");
+ }
+ });
+
+ return text;
+}
+
export function bindMonacoAndProsemirror(
mon: monaco.editor.IStandaloneCodeEditor,
view: EditorView,
@@ -210,7 +229,7 @@ export function applyNodeChangesToMonaco(
node: Node,
model: monaco.editor.ITextModel
) {
- const newText = node.textContent;
+ const newText = textFromPMNode(node);
const curText = model.getValue();
if (newText === curText) {
return;
diff --git a/packages/frame/src/models/MonacoCodeModel.ts b/packages/frame/src/models/MonacoCodeModel.ts
index 3732984f1..e9cd79cdf 100644
--- a/packages/frame/src/models/MonacoCodeModel.ts
+++ b/packages/frame/src/models/MonacoCodeModel.ts
@@ -19,6 +19,13 @@ export class MonacoTypeCellCodeModel
constructor(private readonly monacoModel: monaco.editor.ITextModel) {
super();
+
+ this._register(
+ monacoModel.onDidChangeLanguage(() => {
+ this._onDidChangeContent.fire();
+ })
+ );
+
this._register(
monacoModel.onDidChangeContent(() => {
this._onDidChangeContent.fire();
diff --git a/packages/frame/src/runtime/compiler/SourceModelCompiler.ts b/packages/frame/src/runtime/compiler/SourceModelCompiler.ts
index 647309e3e..0003a62c8 100644
--- a/packages/frame/src/runtime/compiler/SourceModelCompiler.ts
+++ b/packages/frame/src/runtime/compiler/SourceModelCompiler.ts
@@ -116,12 +116,14 @@ export default class SourceModelCompiler
}
};
let prevValue: string | undefined = sourceModel.getValue();
+ let prevLanguage: string | undefined = sourceModel.language;
this._register(
sourceModel.onDidChangeContent((_event) => {
// make sure there were actual changes from the previous value
const newValue = sourceModel.getValue();
- if (newValue === prevValue) {
+ const newLanguage = sourceModel.language;
+ if (newValue === prevValue && newLanguage === prevLanguage) {
console.warn("same value");
return;
}
@@ -131,6 +133,7 @@ export default class SourceModelCompiler
}
prevValue = newValue;
+ prevLanguage = newLanguage;
compile();
})
);
diff --git a/packages/frame/src/runtime/compiler/compilers/MonacoCompiler.ts b/packages/frame/src/runtime/compiler/compilers/MonacoCompiler.ts
index d0d6cbce8..d0667eada 100644
--- a/packages/frame/src/runtime/compiler/compilers/MonacoCompiler.ts
+++ b/packages/frame/src/runtime/compiler/compilers/MonacoCompiler.ts
@@ -84,12 +84,12 @@ function saveCachedItem(
model: monaco.editor.ITextModel,
item: { hash: string; compiledCode: string }
) {
- const key = "cc-" + model.uri.toString();
+ const key = "cc-" + model.uri.toString(false);
localStorage.setItem(key, JSON.stringify(item));
}
function getCachedItem(model: monaco.editor.ITextModel) {
- const key = "cc-" + model.uri.toString();
+ const key = "cc-" + model.uri.toString(false);
const cached = localStorage.getItem(key);
if (cached) {
try {
diff --git a/packages/frame/src/runtime/editor/index.ts b/packages/frame/src/runtime/editor/index.ts
index 591c63d3a..5671c4b7a 100644
--- a/packages/frame/src/runtime/editor/index.ts
+++ b/packages/frame/src/runtime/editor/index.ts
@@ -7,7 +7,7 @@ import type * as Monaco from "monaco-editor";
import EditorWorker from "./workers/editor.worker?worker"; // eslint-disable-line import/no-webpack-loader-syntax
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
-import TsWorker from "./workers/ts.worker?worker"; // eslint-disable-line import/no-webpack-loader-syntax
+import TsWorker from "./workers/ts.worker?sharedworker"; // eslint-disable-line import/no-webpack-loader-syntax
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import CSSWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
@@ -21,7 +21,31 @@ if (!(window as any).MonacoEnvironment) {
(window as any).MonacoEnvironment = (global as any).MonacoEnvironment = {
getWorker: function (workerId: string, label: string) {
if (label === "typescript" || label === "javascript") {
- return new TsWorker();
+ const w = new TsWorker(); // TsWorker();
+ // w.port.start();
+
+ return {
+ postMessage: w.port.postMessage.bind(w.port),
+ addEventListener: w.port.addEventListener.bind(w.port),
+ removeEventListener: w.port.removeEventListener.bind(w.port),
+ terminate: () => {
+ // noop
+ },
+ get onmessage() {
+ return w.port.onmessage;
+ },
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ set onmessage(val: any) {
+ w.port.onmessage = val;
+ },
+ get onmessageerror() {
+ return w.port.onmessageerror;
+ },
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ set onmessageerror(val: any) {
+ w.port.onmessageerror = val;
+ },
+ };
}
if (label === "json") {
throw new Error("not implemented");
@@ -74,9 +98,10 @@ export const setMonacoDefaults = (monaco: typeof Monaco) => {
// monaco.editor.EditorOptions.lineNumbers.defaultValue = 1 as any;
// monaco.editor.EditorOptions.tab.defaultValue = 2;
- // monaco.editor.EditorOptions.scrollbar.defaultValue = {
- // alwaysConsumeMouseWheel: false,
- // };
+ monaco.editor.EditorOptions.scrollbar.defaultValue = {
+ ...monaco.editor.EditorOptions.scrollbar.defaultValue,
+ alwaysConsumeMouseWheel: false,
+ };
monaco.editor.EditorOptions.formatOnPaste.defaultValue = true;
const defaults = monaco.languages.typescript.typescriptDefaults;
diff --git a/packages/frame/src/runtime/editor/prettier/index.ts b/packages/frame/src/runtime/editor/prettier/index.ts
index aefd43239..fa55912b1 100644
--- a/packages/frame/src/runtime/editor/prettier/index.ts
+++ b/packages/frame/src/runtime/editor/prettier/index.ts
@@ -4,6 +4,7 @@ import parserTypescript from "prettier/parser-typescript";
import prettier from "prettier/standalone";
import { diffToMonacoTextEdits } from "./diffToMonacoTextEdits";
+// TODO: move to shared webworker or host frame?
export function setupPrettier(monacoInstance: typeof monaco) {
monacoInstance.languages.registerDocumentFormattingEditProvider(
"typescript",
diff --git a/packages/frame/src/runtime/editor/workers/ts.worker.ts b/packages/frame/src/runtime/editor/workers/ts.worker.ts
index 58b1afa93..dfcf5c775 100644
--- a/packages/frame/src/runtime/editor/workers/ts.worker.ts
+++ b/packages/frame/src/runtime/editor/workers/ts.worker.ts
@@ -1,13 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-restricted-globals */
// based on https://github.com/microsoft/TypeScript-Website/issues/191#issuecomment-579531308
// and https://github.com/TypeScriptToLua/TypeScriptToLua.github.io/blob/source/src/pages/play/ts.worker.ts
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
-import * as worker from "monaco-editor/esm/vs/editor/editor.worker.js";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { TypeScriptWorker } from "monaco-editor/esm/vs/language/typescript/ts.worker.js";
+import { initialize } from "./worker-init";
export class CustomTypeScriptWorker extends TypeScriptWorker {
// eslint-disable-next-line
@@ -81,10 +83,39 @@ export class CustomTypeScriptWorker extends TypeScriptWorker {
}
}
-globalThis.onmessage = () => {
- worker.initialize(
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (context: any, createData: any) =>
- new CustomTypeScriptWorker(context, createData)
- );
+// for regular webWorker:
+
+// globalThis.onmessage = () => {
+// worker.initialize(
+// // eslint-disable-next-line @typescript-eslint/no-explicit-any
+// (context: any, createData: any) =>
+// new CustomTypeScriptWorker(context, createData)
+// );
+// };
+
+// For SharedWorker:
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const connect = (port: any) => {
+ // let initialized = false;
+ port.onmessage = (e: any) => {
+ initialize(
+ function (ctx: any, createData: any) {
+ return new CustomTypeScriptWorker(ctx, createData);
+ },
+ port,
+ false
+ );
+ };
};
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+self.onconnect = (e) => {
+ const [port] = e.ports;
+ connect(port);
+};
+
+if (!("SharedWorkerGlobalScope" in self)) {
+ connect(self);
+}
diff --git a/packages/frame/src/runtime/editor/workers/worker-init.ts b/packages/frame/src/runtime/editor/workers/worker-init.ts
new file mode 100644
index 000000000..209f5208b
--- /dev/null
+++ b/packages/frame/src/runtime/editor/workers/worker-init.ts
@@ -0,0 +1,25 @@
+// from https://github.com/microsoft/monaco-editor/issues/3019
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { SimpleWorkerServer } from "monaco-editor/esm/vs/base/common/worker/simpleWorker.js";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { EditorSimpleWorker } from "monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js";
+
+export function initialize(foreignModule: any, port: any, initialized: any) {
+ if (initialized) {
+ return;
+ }
+ initialized = true;
+ const simpleWorker = new SimpleWorkerServer(
+ (msg: any) => {
+ port.postMessage(msg);
+ },
+ (host: any) => new EditorSimpleWorker(host, foreignModule)
+ );
+ port.onmessage = (e: any) => {
+ simpleWorker.onmessage(e.data);
+ };
+}
diff --git a/packages/frame/tsconfig.json b/packages/frame/tsconfig.json
index c8d1b4ea0..d258239f7 100644
--- a/packages/frame/tsconfig.json
+++ b/packages/frame/tsconfig.json
@@ -22,7 +22,7 @@
"composite": true,
"jsx": "react-jsx"
},
- "include": ["src", "../shared/src/codeModels/BasicCodeModel.ts"],
+ "include": ["src"],
"references": [
{
"path": "../shared"
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 94fabbfbf..cd8b0b22a 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -7,4 +7,5 @@ export * from "./frameInterop/HostBridgeMethods.js";
export * from "./frameInterop/IframeBridgeMethods.js";
export * from "./referenceDefinitions/child.js";
export * from "./referenceDefinitions/fork.js";
+export * from "./referenceDefinitions/indexFile.js";
export * from "./schema.js";
diff --git a/packages/shared/src/referenceDefinitions/indexFile.ts b/packages/shared/src/referenceDefinitions/indexFile.ts
new file mode 100644
index 000000000..4ae0c0bc7
--- /dev/null
+++ b/packages/shared/src/referenceDefinitions/indexFile.ts
@@ -0,0 +1,6 @@
+import { createManyToOneReferenceDefinition } from "../Ref";
+
+export const IndexFileReference = createManyToOneReferenceDefinition(
+ "typecell",
+ "hasIndexFile"
+);