Skip to content

Commit 47006b1

Browse files
authored
Blocknote (#317)
* update atlaskit deps * upgrade more atlaskit packages * remove more packages * wip: blocknote * add blocknote * add collab * add menus, titles * new document dialog * rename to new page * link npm blocknote * update blocknote
1 parent 31b0ac1 commit 47006b1

File tree

22 files changed

+2573
-4416
lines changed

22 files changed

+2573
-4416
lines changed

packages/editor/package-lock.json

Lines changed: 2067 additions & 4063 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/editor/package.json

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,32 @@
33
"version": "0.0.3",
44
"private": true,
55
"dependencies": {
6-
"@atlaskit/atlassian-navigation": "^1.0.0",
7-
"@atlaskit/avatar": "^20.3.0",
8-
"@atlaskit/banner": "^11.2.0",
9-
"@atlaskit/breadcrumbs": "^11.4.1",
10-
"@atlaskit/button": "^15.1.6",
11-
"@atlaskit/checkbox": "^12.3.0",
12-
"@atlaskit/comment": "^10.0.7",
13-
"@atlaskit/css-reset": "^6.0.5",
14-
"@atlaskit/user-picker": "^8.3.0",
15-
"@atlaskit/dropdown-menu": "^10.1.6",
16-
"@atlaskit/flag": "^14.3.0",
17-
"@atlaskit/form": "^8.2.2",
18-
"@atlaskit/inline-message": "^11.0.8",
19-
"@atlaskit/menu": "^1.0.0",
20-
"@atlaskit/modal-dialog": "^11.5.0",
21-
"@atlaskit/page-header": "^10.0.10",
22-
"@atlaskit/page-layout": "^1.0.1",
23-
"@atlaskit/progress-bar": "^0.3.6",
24-
"@atlaskit/section-message": "^6.0.0",
25-
"@atlaskit/spinner": "^15.0.0",
26-
"@atlaskit/select": "^14.0.0",
27-
"@atlaskit/textarea": "^4.1.0",
28-
"@atlaskit/textfield": "^5.0.1",
29-
"@atlaskit/tree": "^8.4.0",
6+
"@atlaskit/atlassian-navigation": "^2.2.6",
7+
"@atlaskit/avatar": "^21.0.0",
8+
"@atlaskit/banner": "^11.6.1",
9+
"@atlaskit/breadcrumbs": "^11.6.2",
10+
"@atlaskit/button": "^16.3.5",
11+
"@atlaskit/checkbox": "^12.3.18",
12+
"@atlaskit/comment": "^10.5.2",
13+
"@atlaskit/css-reset": "^6.3.13",
14+
"@atlaskit/user-picker": "^9.3.1",
15+
"@atlaskit/dropdown-menu": "^11.3.0",
16+
"@atlaskit/flag": "^14.6.3",
17+
"@atlaskit/form": "^8.5.6",
18+
"@atlaskit/inline-message": "^11.3.0",
19+
"@atlaskit/menu": "^1.3.8",
20+
"@atlaskit/modal-dialog": "^12.2.14",
21+
"@atlaskit/page-header": "^10.2.3",
22+
"@atlaskit/page-layout": "^1.2.7",
23+
"@atlaskit/progress-bar": "^0.5.8",
24+
"@atlaskit/section-message": "^6.1.14",
25+
"@atlaskit/spinner": "^15.1.14",
26+
"@atlaskit/select": "^15.6.0",
27+
"@atlaskit/textarea": "^4.3.8",
28+
"@atlaskit/textfield": "^5.1.12",
29+
"@atlaskit/tree": "^8.6.1",
30+
"@tiptap/extension-collaboration": "^2.0.0-beta.38",
31+
"@tiptap/extension-collaboration-cursor": "^2.0.0-beta.37",
3032
"@deck.gl/aggregation-layers": "^8.6.4",
3133
"@deck.gl/core": "^8.6.4",
3234
"@deck.gl/layers": "^8.6.4",
@@ -45,6 +47,7 @@
4547
"@types/react-dom": "^17.0.0",
4648
"@types/uuid": "^8.3.0",
4749
"@typescript/vfs": "^1.3.4",
50+
"@blocknote/core": "^0.1.0",
4851
"classnames": "^2.3.1",
4952
"filebridge-client": "^0.1.5",
5053
"fractional-indexing": "^2.0.0",
@@ -87,14 +90,14 @@
8790
"vscode-lib": "^0.1.2",
8891
"wasm-loader": "^1.3.0",
8992
"web-vitals": "^1.0.1",
90-
"workerize-loader": "^1.3.0",
9193
"y-indexeddb": "9.0.6",
9294
"y-monaco": "^0.1.3",
9395
"y-webrtc": "^10.1.8",
9496
"y-protocols": "^1.0.5",
9597
"yjs": "^13.5.41",
9698
"zxcvbn": "^4.4.2",
97-
"react-router-dom": "6.2.2"
99+
"react-router-dom": "6.2.2",
100+
"events": "^3.3.0"
98101
},
99102
"scripts": {
100103
"patch-package": "patch-package",
@@ -158,7 +161,6 @@
158161
"glob": "^7.2.0",
159162
"patch-package": "^6.4.7",
160163
"rimraf": "^3.0.2",
161-
"ts-node": "^10.1.0",
162164
"@playwright/test": "^1.18.1",
163165
"vite": "^3.0.0",
164166
"@vitejs/plugin-react": "^2.0.0",

packages/editor/src/app/documentRenderers/DocumentView.tsx

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import NotebookRenderer from "./notebook/NotebookRenderer";
1515
import PluginRenderer from "./plugin/PluginRenderer";
1616
import ProjectContainer from "./project/ProjectContainer";
1717
import ProjectRenderer from "./project/ProjectRenderer";
18+
import RichTextRenderer from "./richtext/RichTextRenderer";
1819

1920
type Props = {
2021
id: Identifier;
@@ -92,18 +93,19 @@ const DocumentView = observer((props: Props) => {
9293
);
9394
}
9495
} else if (connection.doc.type === "!richtext") {
95-
throw new Error("richtext not implemented");
96-
// return (
97-
// <div className={styles.view}>
98-
// {!props.hideDocumentMenu && (
99-
// <DocumentMenu document={connection.doc}></DocumentMenu>
100-
// )}
101-
// <RichTextRenderer
102-
// key={connection.doc.id}
103-
// document={connection.doc.doc}
104-
// />
105-
// </div>
106-
// );
96+
const doc = connection.doc.doc;
97+
98+
return (
99+
<div className={styles.view}>
100+
{!props.hideDocumentMenu && (
101+
<DocumentMenu document={doc}></DocumentMenu>
102+
)}
103+
<RichTextRenderer
104+
key={connection.doc.id}
105+
document={connection.doc.doc!}
106+
/>
107+
</div>
108+
);
107109
} else if (connection.doc.type === "!plugin") {
108110
return (
109111
<PluginRenderer
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.editor {
2+
padding: 0 calc((100% - 731px) / 2);
3+
height: 100%;
4+
}
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { observer } from "mobx-react-lite";
2+
import React from "react";
3+
// import LocalExecutionHost from "../../../runtime/executor/executionHosts/local/LocalExecutionHost"
4+
import { EditorContent, useEditor } from "@blocknote/core";
5+
import "@blocknote/core/style.css";
6+
import Collaboration from "@tiptap/extension-collaboration";
7+
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
8+
import ReactDOM from "react-dom";
9+
import { DocumentResource } from "../../../store/DocumentResource";
10+
import { getStoreService } from "../../../store/local/stores";
11+
import styles from "./RichTextRenderer.module.css";
12+
13+
type Props = {
14+
document: DocumentResource;
15+
};
16+
window.React = React;
17+
window.ReactDOM = ReactDOM;
18+
19+
const RichTextRenderer: React.FC<Props> = observer((props) => {
20+
const sessionStore = getStoreService().sessionStore;
21+
22+
const editor = useEditor({
23+
onUpdate: ({ editor }) => {
24+
console.log(editor.getJSON());
25+
},
26+
editorProps: {
27+
attributes: {
28+
class: styles.editor,
29+
"data-test": "editor",
30+
},
31+
},
32+
disableHistoryExtension: true,
33+
extensions: [
34+
CollaborationCursor.configure({
35+
provider: props.document.webrtcProvider,
36+
user: {
37+
name: sessionStore.loggedInUserId || "Anonymous",
38+
color: sessionStore.userColor,
39+
},
40+
}),
41+
Collaboration.configure({
42+
fragment: props.document.data,
43+
}),
44+
],
45+
});
46+
return <EditorContent editor={editor} />;
47+
});
48+
49+
export default RichTextRenderer;

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,9 @@ import { HTML5Backend } from "react-dnd-html5-backend";
44
import { Outlet, useLocation, useNavigate } from "react-router-dom";
55
import { DocumentResource } from "../../store/DocumentResource";
66
import { getStoreService } from "../../store/local/stores";
7-
import {
8-
CloseNewNotebookDialog,
9-
IsNewNotebookDialogOpen,
10-
} from "../routes/routes";
7+
import { CloseNewPageDialog, IsNewPageDialogOpen } from "../routes/routes";
118
import { Navigation } from "./components/Navigation";
12-
import NewNotebookDialog from "./components/NewNotebookDialog";
9+
import NewPageDialog from "./components/NewPageDialog";
1310
import styles from "./Main.module.css";
1411

1512
const Main = observer((props: {}) => {
@@ -23,10 +20,10 @@ const Main = observer((props: {}) => {
2320
<Navigation />
2421
<Outlet />
2522
{sessionStore.loggedInUserId && (
26-
<NewNotebookDialog
23+
<NewPageDialog
2724
ownerId={sessionStore.loggedInUserId}
28-
close={() => CloseNewNotebookDialog(navigate)}
29-
isOpen={IsNewNotebookDialogOpen(location)}
25+
close={() => CloseNewPageDialog(navigate)}
26+
isOpen={IsNewPageDialogOpen(location)}
3027
/>
3128
)}
3229
</div>

packages/editor/src/app/main/components/Navigation.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,14 @@ const ProductHome = () => {
2323
);
2424
};
2525

26-
const AN = AtlassianNavigation as any;
27-
2826
export const Navigation = observer(() => {
2927
const sessionStore = getStoreService().sessionStore;
3028
const navigate = useNavigate();
3129
const location = useLocation();
3230

3331
return (
34-
<AN
32+
<AtlassianNavigation
33+
label="site"
3534
renderProductHome={ProductHome}
3635
primaryItems={[
3736
<Link className={styles.link} to={toDocs()}>

packages/editor/src/app/main/components/NewNotebookDialog.tsx

Lines changed: 0 additions & 154 deletions
This file was deleted.

0 commit comments

Comments
 (0)