TypeCellOS · nperez0111 · Apr 30, 2025 · May 7, 2025 · Jun 10, 2025 · Jun 10, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -18,5 +18,8 @@
   "search.defaultViewMode": "tree",
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[mdx]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/docs/app/portal/page.tsx b/docs/app/portal/page.tsx
diff --git a/docs/components/pages/thanks/index.tsx b/docs/components/pages/thanks/index.tsx
diff --git a/examples/.eslintrc.js b/examples/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ["../.eslintrc.js"],
+  rules: {
+    "import/extensions": "off",
+  },
+};
diff --git a/examples/01-basic/01-minimal/main.tsx b/examples/01-basic/01-minimal/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/examples/01-basic/01-minimal/App.tsx → examples/01-basic/01-minimal/src/App.tsx b/examples/01-basic/01-minimal/App.tsx → examples/01-basic/01-minimal/src/App.tsx
diff --git a/examples/01-basic/02-block-objects/main.tsx b/examples/01-basic/02-block-objects/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/examples/01-basic/02-block-objects/App.tsx → ...les/01-basic/02-block-objects/src/App.tsx b/examples/01-basic/02-block-objects/App.tsx → ...les/01-basic/02-block-objects/src/App.tsx
@@ -48,7 +48,7 @@ export default function App() {
       <div>Document JSON:</div>
       <div className={"item bordered"}>
         <pre>
-          <code>{JSON.stringify(blocks, null, 2)}</code>
+          <code>{JSON.stringify(editor.document, null, 2)}</code>
         </pre>
       </div>
     </div>

diff --git a/...ples/01-basic/02-block-objects/styles.css → .../01-basic/02-block-objects/src/styles.css b/...ples/01-basic/02-block-objects/styles.css → .../01-basic/02-block-objects/src/styles.css
diff --git a/examples/01-basic/03-multi-column/main.tsx b/examples/01-basic/03-multi-column/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/examples/01-basic/03-multi-column/App.tsx → ...ples/01-basic/03-multi-column/src/App.tsx b/examples/01-basic/03-multi-column/App.tsx → ...ples/01-basic/03-multi-column/src/App.tsx
diff --git a/examples/01-basic/04-default-blocks/main.tsx b/examples/01-basic/04-default-blocks/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/examples/01-basic/04-default-blocks/App.tsx → ...es/01-basic/04-default-blocks/src/App.tsx b/examples/01-basic/04-default-blocks/App.tsx → ...es/01-basic/04-default-blocks/src/App.tsx
diff --git a/examples/01-basic/05-removing-default-blocks/main.tsx b/examples/01-basic/05-removing-default-blocks/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...-basic/05-removing-default-blocks/App.tsx → ...ic/05-removing-default-blocks/src/App.tsx b/...-basic/05-removing-default-blocks/App.tsx → ...ic/05-removing-default-blocks/src/App.tsx
diff --git a/examples/01-basic/06-block-manipulation/main.tsx b/examples/01-basic/06-block-manipulation/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...es/01-basic/06-block-manipulation/App.tsx → ...1-basic/06-block-manipulation/src/App.tsx b/...es/01-basic/06-block-manipulation/App.tsx → ...1-basic/06-block-manipulation/src/App.tsx
diff --git a/...01-basic/06-block-manipulation/styles.css → ...asic/06-block-manipulation/src/styles.css b/...01-basic/06-block-manipulation/styles.css → ...asic/06-block-manipulation/src/styles.css
diff --git a/examples/01-basic/07-selection-blocks/main.tsx b/examples/01-basic/07-selection-blocks/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...ples/01-basic/07-selection-blocks/App.tsx → .../01-basic/07-selection-blocks/src/App.tsx b/...ples/01-basic/07-selection-blocks/App.tsx → .../01-basic/07-selection-blocks/src/App.tsx
diff --git a/...s/01-basic/07-selection-blocks/styles.css → ...-basic/07-selection-blocks/src/styles.css b/...s/01-basic/07-selection-blocks/styles.css → ...-basic/07-selection-blocks/src/styles.css
diff --git a/examples/01-basic/08-ariakit/main.tsx b/examples/01-basic/08-ariakit/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/examples/01-basic/08-ariakit/App.tsx → examples/01-basic/08-ariakit/src/App.tsx b/examples/01-basic/08-ariakit/App.tsx → examples/01-basic/08-ariakit/src/App.tsx
diff --git a/examples/01-basic/09-shadcn/main.tsx b/examples/01-basic/09-shadcn/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/examples/01-basic/09-shadcn/App.tsx → examples/01-basic/09-shadcn/src/App.tsx b/examples/01-basic/09-shadcn/App.tsx → examples/01-basic/09-shadcn/src/App.tsx
diff --git a/examples/01-basic/10-localization/main.tsx b/examples/01-basic/10-localization/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/examples/01-basic/10-localization/App.tsx → ...ples/01-basic/10-localization/src/App.tsx b/examples/01-basic/10-localization/App.tsx → ...ples/01-basic/10-localization/src/App.tsx
diff --git a/examples/01-basic/11-custom-placeholder/main.tsx b/examples/01-basic/11-custom-placeholder/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...es/01-basic/11-custom-placeholder/App.tsx → ...1-basic/11-custom-placeholder/src/App.tsx b/...es/01-basic/11-custom-placeholder/App.tsx → ...1-basic/11-custom-placeholder/src/App.tsx
diff --git a/examples/01-basic/12-multi-editor/main.tsx b/examples/01-basic/12-multi-editor/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/examples/01-basic/12-multi-editor/App.tsx → ...ples/01-basic/12-multi-editor/src/App.tsx b/examples/01-basic/12-multi-editor/App.tsx → ...ples/01-basic/12-multi-editor/src/App.tsx
diff --git a/examples/01-basic/13-custom-paste-handler/main.tsx b/examples/01-basic/13-custom-paste-handler/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/.../01-basic/13-custom-paste-handler/App.tsx → ...basic/13-custom-paste-handler/src/App.tsx b/.../01-basic/13-custom-paste-handler/App.tsx → ...basic/13-custom-paste-handler/src/App.tsx
diff --git a/...-basic/13-custom-paste-handler/styles.css → ...ic/13-custom-paste-handler/src/styles.css b/...-basic/13-custom-paste-handler/styles.css → ...ic/13-custom-paste-handler/src/styles.css
diff --git a/examples/01-basic/testing/main.tsx b/examples/01-basic/testing/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/examples/01-basic/testing/App.tsx → examples/01-basic/testing/src/App.tsx b/examples/01-basic/testing/App.tsx → examples/01-basic/testing/src/App.tsx
diff --git a/examples/02-backend/01-file-uploading/main.tsx b/examples/02-backend/01-file-uploading/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...ples/02-backend/01-file-uploading/App.tsx → .../02-backend/01-file-uploading/src/App.tsx b/...ples/02-backend/01-file-uploading/App.tsx → .../02-backend/01-file-uploading/src/App.tsx
diff --git a/examples/02-backend/02-saving-loading/main.tsx b/examples/02-backend/02-saving-loading/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...ples/02-backend/02-saving-loading/App.tsx → .../02-backend/02-saving-loading/src/App.tsx b/...ples/02-backend/02-saving-loading/App.tsx → .../02-backend/02-saving-loading/src/App.tsx
diff --git a/examples/02-backend/03-s3/main.tsx b/examples/02-backend/03-s3/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/examples/02-backend/03-s3/App.tsx → examples/02-backend/03-s3/src/App.tsx b/examples/02-backend/03-s3/App.tsx → examples/02-backend/03-s3/src/App.tsx
diff --git a/examples/02-backend/04-rendering-static-documents/main.tsx b/examples/02-backend/04-rendering-static-documents/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...end/04-rendering-static-documents/App.tsx → ...04-rendering-static-documents/src/App.tsx b/...end/04-rendering-static-documents/App.tsx → ...04-rendering-static-documents/src/App.tsx
diff --git a/examples/03-ui-components/01-ui-elements-remove/main.tsx b/examples/03-ui-components/01-ui-elements-remove/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...-components/01-ui-elements-remove/App.tsx → ...ponents/01-ui-elements-remove/src/App.tsx b/...-components/01-ui-elements-remove/App.tsx → ...ponents/01-ui-elements-remove/src/App.tsx
diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/main.tsx b/examples/03-ui-components/02-formatting-toolbar-buttons/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...nts/02-formatting-toolbar-buttons/App.tsx → ...02-formatting-toolbar-buttons/src/App.tsx b/...nts/02-formatting-toolbar-buttons/App.tsx → ...02-formatting-toolbar-buttons/src/App.tsx
@@ -16,7 +16,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { BlueButton } from "./BlueButton.js";
+import { BlueButton } from "./BlueButton";
 
 export default function App() {
   // Creates a new editor instance.

diff --git a/...formatting-toolbar-buttons/BlueButton.tsx → ...atting-toolbar-buttons/src/BlueButton.tsx b/...formatting-toolbar-buttons/BlueButton.tsx → ...atting-toolbar-buttons/src/BlueButton.tsx
diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/main.tsx b/examples/03-ui-components/03-formatting-toolbar-block-type-items/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...atting-toolbar-block-type-items/Alert.tsx → ...ng-toolbar-block-type-items/src/Alert.tsx b/...atting-toolbar-block-type-items/Alert.tsx → ...ng-toolbar-block-type-items/src/Alert.tsx
diff --git a/...rmatting-toolbar-block-type-items/App.tsx → ...ting-toolbar-block-type-items/src/App.tsx b/...rmatting-toolbar-block-type-items/App.tsx → ...ting-toolbar-block-type-items/src/App.tsx
@@ -11,7 +11,7 @@ import {
 } from "@blocknote/react";
 
 import { RiAlertFill } from "react-icons/ri";
-import { Alert } from "./Alert.js";
+import { Alert } from "./Alert";
 
 // Our schema with block specs, which contain the configs and implementations for
 // blocks that we want our editor to use.

diff --git a/...tting-toolbar-block-type-items/styles.css → ...g-toolbar-block-type-items/src/styles.css b/...tting-toolbar-block-type-items/styles.css → ...g-toolbar-block-type-items/src/styles.css
diff --git a/examples/03-ui-components/04-side-menu-buttons/main.tsx b/examples/03-ui-components/04-side-menu-buttons/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...i-components/04-side-menu-buttons/App.tsx → ...mponents/04-side-menu-buttons/src/App.tsx b/...i-components/04-side-menu-buttons/App.tsx → ...mponents/04-side-menu-buttons/src/App.tsx
@@ -8,7 +8,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { RemoveBlockButton } from "./RemoveBlockButton.js";
+import { RemoveBlockButton } from "./RemoveBlockButton";
 
 export default function App() {
   // Creates a new editor instance.

diff --git a/...4-side-menu-buttons/RemoveBlockButton.tsx → ...de-menu-buttons/src/RemoveBlockButton.tsx b/...4-side-menu-buttons/RemoveBlockButton.tsx → ...de-menu-buttons/src/RemoveBlockButton.tsx
diff --git a/examples/03-ui-components/05-side-menu-drag-handle-items/main.tsx b/examples/03-ui-components/05-side-menu-drag-handle-items/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...ts/05-side-menu-drag-handle-items/App.tsx → ...5-side-menu-drag-handle-items/src/App.tsx b/...ts/05-side-menu-drag-handle-items/App.tsx → ...5-side-menu-drag-handle-items/src/App.tsx
@@ -11,7 +11,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { ResetBlockTypeItem } from "./ResetBlockTypeItem.js";
+import { ResetBlockTypeItem } from "./ResetBlockTypeItem";
 
 // To avoid rendering issues, it's good practice to define your custom drag
 // handle menu in a separate component, instead of inline within the `sideMenu`

diff --git a/...-drag-handle-items/ResetBlockTypeItem.tsx → ...g-handle-items/src/ResetBlockTypeItem.tsx b/...-drag-handle-items/ResetBlockTypeItem.tsx → ...g-handle-items/src/ResetBlockTypeItem.tsx
diff --git a/examples/03-ui-components/06-suggestion-menus-slash-menu-items/main.tsx b/examples/03-ui-components/06-suggestion-menus-slash-menu-items/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...suggestion-menus-slash-menu-items/App.tsx → ...estion-menus-slash-menu-items/src/App.tsx b/...suggestion-menus-slash-menu-items/App.tsx → ...estion-menus-slash-menu-items/src/App.tsx
diff --git a/examples/03-ui-components/07-suggestion-menus-slash-menu-component/main.tsx b/examples/03-ui-components/07-suggestion-menus-slash-menu-component/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...estion-menus-slash-menu-component/App.tsx → ...on-menus-slash-menu-component/src/App.tsx b/...estion-menus-slash-menu-component/App.tsx → ...on-menus-slash-menu-component/src/App.tsx
diff --git a/...ion-menus-slash-menu-component/styles.css → ...menus-slash-menu-component/src/styles.css b/...ion-menus-slash-menu-component/styles.css → ...menus-slash-menu-component/src/styles.css
diff --git a/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/main.tsx b/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...estion-menus-emoji-picker-columns/App.tsx → ...on-menus-emoji-picker-columns/src/App.tsx b/...estion-menus-emoji-picker-columns/App.tsx → ...on-menus-emoji-picker-columns/src/App.tsx
diff --git a/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/main.tsx b/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...tion-menus-emoji-picker-component/App.tsx → ...-menus-emoji-picker-component/src/App.tsx b/...tion-menus-emoji-picker-component/App.tsx → ...-menus-emoji-picker-component/src/App.tsx
diff --git a/...n-menus-emoji-picker-component/styles.css → ...nus-emoji-picker-component/src/styles.css b/...n-menus-emoji-picker-component/styles.css → ...nus-emoji-picker-component/src/styles.css
diff --git a/examples/03-ui-components/10-suggestion-menus-grid-mentions/main.tsx b/examples/03-ui-components/10-suggestion-menus-grid-mentions/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...10-suggestion-menus-grid-mentions/App.tsx → ...uggestion-menus-grid-mentions/src/App.tsx b/...10-suggestion-menus-grid-mentions/App.tsx → ...uggestion-menus-grid-mentions/src/App.tsx
@@ -12,7 +12,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { Mention } from "./Mention.js";
+import { Mention } from "./Mention";
 
 // Our schema with inline content specs, which contain the configs and
 // implementations for inline content  that we want our editor to use.

diff --git a/...uggestion-menus-grid-mentions/Mention.tsx → ...stion-menus-grid-mentions/src/Mention.tsx b/...uggestion-menus-grid-mentions/Mention.tsx → ...stion-menus-grid-mentions/src/Mention.tsx
diff --git a/examples/03-ui-components/11-uppy-file-panel/main.tsx b/examples/03-ui-components/11-uppy-file-panel/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...-ui-components/11-uppy-file-panel/App.tsx → ...components/11-uppy-file-panel/src/App.tsx b/...-ui-components/11-uppy-file-panel/App.tsx → ...components/11-uppy-file-panel/src/App.tsx
@@ -9,8 +9,8 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { FileReplaceButton } from "./FileReplaceButton.js";
-import { uploadFile, UppyFilePanel } from "./UppyFilePanel.js";
+import { FileReplaceButton } from "./FileReplaceButton";
+import { uploadFile, UppyFilePanel } from "./UppyFilePanel";
 
 export default function App() {
   // Creates a new editor instance.

diff --git a/.../11-uppy-file-panel/FileReplaceButton.tsx → ...uppy-file-panel/src/FileReplaceButton.tsx b/.../11-uppy-file-panel/FileReplaceButton.tsx → ...uppy-file-panel/src/FileReplaceButton.tsx
@@ -14,7 +14,7 @@ import { useEffect, useState } from "react";
 
 import { RiImageEditFill } from "react-icons/ri";
 
-import { UppyFilePanel } from "./UppyFilePanel.js";
+import { UppyFilePanel } from "./UppyFilePanel";
 
 // Copied with minor changes from:
 // https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx

diff --git a/...ents/11-uppy-file-panel/UppyFilePanel.tsx → .../11-uppy-file-panel/src/UppyFilePanel.tsx b/...ents/11-uppy-file-panel/UppyFilePanel.tsx → .../11-uppy-file-panel/src/UppyFilePanel.tsx
diff --git a/examples/03-ui-components/12-static-formatting-toolbar/main.tsx b/examples/03-ui-components/12-static-formatting-toolbar/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

diff --git a/...ents/12-static-formatting-toolbar/App.tsx → .../12-static-formatting-toolbar/src/App.tsx b/...ents/12-static-formatting-toolbar/App.tsx → .../12-static-formatting-toolbar/src/App.tsx
diff --git a/...ts/12-static-formatting-toolbar/style.css → ...2-static-formatting-toolbar/src/style.css b/...ts/12-static-formatting-toolbar/style.css → ...2-static-formatting-toolbar/src/style.css
diff --git a/examples/03-ui-components/13-custom-ui/main.tsx b/examples/03-ui-components/13-custom-ui/main.tsx
@@ -1,7 +1,7 @@
 // AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
+import App from "./src/App.jsx";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(