TypeCellOS · matthewlipski · Jan 18, 2023 · Nov 22, 2022 · Dec 7, 2022 · Dec 7, 2022
diff --git a/.gitignore b/.gitignore
@@ -3,7 +3,8 @@
 # dependencies
 node_modules
 dist
-types
+packages/*/types
+examples/*/types
 /.pnp
 .pnp.js
 

diff --git a/examples/editor/package.json b/examples/editor/package.json
@@ -10,12 +10,13 @@
   },
   "dependencies": {
     "@blocknote/core": "^0.1.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@blocknote/react": "^0.1.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.12",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^1.0.7",
     "eslint": "^8.10.0",
     "eslint-config-react-app": "^7.0.0",

diff --git a/examples/editor/src/App.tsx b/examples/editor/src/App.tsx
@@ -1,14 +1,14 @@
 // import logo from './logo.svg'
-import { EditorContent, useEditor } from "@blocknote/core";
 import "@blocknote/core/style.css";
+import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import { Editor } from "@tiptap/core";
 import styles from "./App.module.css";
 
 type WindowWithProseMirror = Window &
   typeof globalThis & { ProseMirror: Editor };
 
 function App() {
-  const editor = useEditor({
+  const editor = useBlockNote({
     onUpdate: ({ editor }) => {
       console.log(editor.getJSON());
       (window as WindowWithProseMirror).ProseMirror = editor; // Give tests a way to get editor instance
@@ -21,7 +21,7 @@ function App() {
     },
   });
 
-  return <EditorContent editor={editor} />;
+  return <BlockNoteView editor={editor} />;
 }
 
 export default App;
diff --git a/examples/editor/src/main.tsx b/examples/editor/src/main.tsx
@@ -1,14 +1,13 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 import "./index.css";
 
 window.React = React;
-window.ReactDOM = ReactDOM;
 
-ReactDOM.render(
+const root = createRoot(document.getElementById("root")!);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
diff --git a/examples/editor/vite.config.ts b/examples/editor/vite.config.ts
@@ -8,17 +8,24 @@ export default defineConfig((conf) => ({
   optimizeDeps: {
     // link: ['vite-react-ts-components'],
   },
+  build: {
+    sourcemap: true,
+  },
   resolve: {
     alias:
       conf.command === "build"
         ? {}
         : {
-            // Comment out the line below to load a built version of blocknote
+            // Comment out the lines below to load a built version of blocknote
             // or, keep as is to load live from sources with live reload working
             "@blocknote/core": path.resolve(
               __dirname,
               "../../packages/core/src/"
             ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
           },
   },
 }));
diff --git a/examples/vanilla/.gitignore b/examples/vanilla/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vanilla/README.md b/examples/vanilla/README.md
@@ -0,0 +1,3 @@
+# Vanilla editor example
+
+This is an example client application that consumes @blocknote/core.
diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BlockNote demo vanilla js</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/vanilla/package.json b/examples/vanilla/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@blocknote/example-vanilla",
+  "private": true,
+  "version": "0.1.2",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "^0.1.2"
+  },
+  "devDependencies": {
+    "eslint": "^8.10.0",
+    "eslint-config-react-app": "^7.0.0",
+    "typescript": "^4.5.4",
+    "vite": "^3.0.5",
+    "vite-plugin-eslint": "^1.7.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "rules": {
+      "curly": 1
+    }
+  }
+}
diff --git a/examples/vanilla/src/index.css b/examples/vanilla/src/index.css
@@ -0,0 +1,10 @@
+html,
+body,
+#root {
+  height: 100%;
+}
+
+.editor {
+  padding: 0 calc((100% - 731px) / 2);
+  height: 100%;
+}
diff --git a/examples/vanilla/src/main.tsx b/examples/vanilla/src/main.tsx
@@ -0,0 +1,31 @@
+import { BlockNoteEditor } from "@blocknote/core";
+import "./index.css";
+import { blockSideMenuFactory } from "./ui/blockSideMenuFactory";
+import { formattingToolbarFactory } from "./ui/formattingToolbarFactory";
+import { hyperlinkToolbarFactory } from "./ui/hyperlinkToolbarFactory";
+import { slashMenuFactory } from "./ui/slashMenuFactory";
+
+const editor = new BlockNoteEditor({
+  element: document.getElementById("root")!,
+  uiFactories: {
+    // Create an example formatting toolbar which just consists of a bold toggle
+    formattingToolbarFactory,
+    // Create an example menu for hyperlinks
+    hyperlinkToolbarFactory,
+    // Create an example menu for the /-menu
+    slashMenuFactory: slashMenuFactory,
+    // Create an example menu for when a block is hovered
+    blockSideMenuFactory,
+  },
+  onUpdate: ({ editor }) => {
+    console.log(editor.getJSON());
+    (window as any).ProseMirror = editor; // Give tests a way to get editor instance
+  },
+  editorProps: {
+    attributes: {
+      class: "editor",
+    },
+  },
+});
+
+console.log("editor created", editor);
diff --git a/examples/vanilla/src/ui/blockSideMenuFactory.ts b/examples/vanilla/src/ui/blockSideMenuFactory.ts
@@ -0,0 +1,46 @@
+import { BlockSideMenuFactory } from "@blocknote/core";
+import { createButton } from "./util";
+
+/**
+ * This menu is drawn next to a block, when it's hovered over
+ * It renders a drag handle and + button to create a new block
+ */
+export const blockSideMenuFactory: BlockSideMenuFactory = (staticParams) => {
+  const container = document.createElement("div");
+  container.style.background = "gray";
+  container.style.position = "absolute";
+  container.style.padding = "10px";
+  container.style.opacity = "0.8";
+  const addBtn = createButton("+", () => {
+    staticParams.addBlock();
+  });
+  container.appendChild(addBtn);
+
+  const dragBtn = createButton("::", () => {
+    // TODO: render a submenu with a delete option that calls "props.deleteBlock"
+  });
+
+  dragBtn.addEventListener("dragstart", staticParams.blockDragStart);
+  dragBtn.addEventListener("dragend", staticParams.blockDragEnd);
+  container.style.display = "none";
+  container.appendChild(dragBtn);
+
+  document.body.appendChild(container);
+
+  return {
+    element: container,
+    render: (params, isHidden) => {
+      if (isHidden) {
+        container.style.display = "block";
+      }
+
+      console.log("show blockmenu", params);
+      container.style.top = params.blockBoundingBox.y + "px";
+      container.style.left =
+        params.blockBoundingBox.x - container.offsetWidth + "px";
+    },
+    hide: () => {
+      container.style.display = "none";
+    },
+  };
+};
diff --git a/examples/vanilla/src/ui/formattingToolbarFactory.ts b/examples/vanilla/src/ui/formattingToolbarFactory.ts
@@ -0,0 +1,45 @@
+import { FormattingToolbarFactory } from "@blocknote/core";
+import { createButton } from "./util";
+
+/**
+ * This menu is drawn when a piece of text is selected. We can use it to change formatting options
+ * such as bold, italic, indentation, etc.
+ */
+export const formattingToolbarFactory: FormattingToolbarFactory = (
+  staticParams
+) => {
+  const container = document.createElement("div");
+  container.style.background = "gray";
+  container.style.position = "absolute";
+  container.style.padding = "10px";
+  container.style.opacity = "0.8";
+  const boldBtn = createButton("set bold", () => {
+    staticParams.toggleBold();
+  });
+  container.appendChild(boldBtn);
+
+  const linkBtn = createButton("set link", () => {
+    staticParams.setHyperlink("https://www.google.com");
+  });
+
+  container.appendChild(boldBtn);
+  container.appendChild(linkBtn);
+  container.style.display = "none";
+  document.body.appendChild(container);
+
+  return {
+    element: container,
+    render: (params, isHidden) => {
+      if (isHidden) {
+        container.style.display = "block";
+      }
+
+      boldBtn.text = params.boldIsActive ? "unset bold" : "set bold";
+      container.style.top = params.selectionBoundingBox.y + "px";
+      container.style.left = params.selectionBoundingBox.x + "px";
+    },
+    hide: () => {
+      container.style.display = "none";
+    },
+  };
+};
diff --git a/examples/vanilla/src/ui/hyperlinkToolbarFactory.ts b/examples/vanilla/src/ui/hyperlinkToolbarFactory.ts
@@ -0,0 +1,54 @@
+import { HyperlinkToolbarFactory } from "@blocknote/core";
+import { createButton } from "./util";
+
+/**
+ * This menu is drawn when the cursor is moved to a hyperlink (using the keyboard),
+ * or when the mouse is hovering over a hyperlink
+ */
+export const hyperlinkToolbarFactory: HyperlinkToolbarFactory = (
+  staticParams
+) => {
+  const container = document.createElement("div");
+  container.style.background = "gray";
+  container.style.position = "absolute";
+  container.style.padding = "10px";
+  container.style.opacity = "0.8";
+
+  let url = "";
+  let text = "";
+
+  const editBtn = createButton("edit", () => {
+    const newUrl = prompt("new url") || url;
+    staticParams.editHyperlink(newUrl, text);
+  });
+
+  container.appendChild(editBtn);
+
+  const removeBtn = createButton("remove", () => {
+    staticParams.deleteHyperlink();
+  });
+
+  container.appendChild(editBtn);
+  container.appendChild(removeBtn);
+  container.style.display = "none";
+  document.body.appendChild(container);
+
+  return {
+    element: container,
+    render: (params, isHidden) => {
+      if (isHidden) {
+        url = params.url;
+        text = params.text;
+
+        container.style.display = "block";
+      }
+
+      console.log("show", params);
+      container.style.top = params.boundingBox.y + "px";
+      container.style.left = params.boundingBox.x + "px";
+    },
+    hide: () => {
+      container.style.display = "none";
+    },
+  };
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Vanilla editor example

		This is an example client application that consumes @blocknote/core.