diff --git a/examples/.eslintrc.js b/examples/.eslintrc.js new file mode 100644 index 0000000000..c78910b8b6 --- /dev/null +++ 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 index 6284417d60..677c7f7eed 100644 --- 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 b/examples/01-basic/01-minimal/src/App.tsx similarity index 100% rename from examples/01-basic/01-minimal/App.tsx rename to 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 index 6284417d60..677c7f7eed 100644 --- 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 b/examples/01-basic/02-block-objects/src/App.tsx similarity index 100% rename from examples/01-basic/02-block-objects/App.tsx rename to examples/01-basic/02-block-objects/src/App.tsx diff --git a/examples/01-basic/02-block-objects/styles.css b/examples/01-basic/02-block-objects/src/styles.css similarity index 100% rename from examples/01-basic/02-block-objects/styles.css rename to examples/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 index 6284417d60..677c7f7eed 100644 --- 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 b/examples/01-basic/03-multi-column/src/App.tsx similarity index 100% rename from examples/01-basic/03-multi-column/App.tsx rename to examples/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 index 6284417d60..677c7f7eed 100644 --- 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 b/examples/01-basic/04-default-blocks/src/App.tsx similarity index 100% rename from examples/01-basic/04-default-blocks/App.tsx rename to examples/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 index 6284417d60..677c7f7eed 100644 --- 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/examples/01-basic/05-removing-default-blocks/App.tsx b/examples/01-basic/05-removing-default-blocks/src/App.tsx similarity index 100% rename from examples/01-basic/05-removing-default-blocks/App.tsx rename to examples/01-basic/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 index 6284417d60..677c7f7eed 100644 --- 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/examples/01-basic/06-block-manipulation/App.tsx b/examples/01-basic/06-block-manipulation/src/App.tsx similarity index 100% rename from examples/01-basic/06-block-manipulation/App.tsx rename to examples/01-basic/06-block-manipulation/src/App.tsx diff --git a/examples/01-basic/06-block-manipulation/styles.css b/examples/01-basic/06-block-manipulation/src/styles.css similarity index 100% rename from examples/01-basic/06-block-manipulation/styles.css rename to examples/01-basic/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 index 6284417d60..677c7f7eed 100644 --- 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/examples/01-basic/07-selection-blocks/App.tsx b/examples/01-basic/07-selection-blocks/src/App.tsx similarity index 100% rename from examples/01-basic/07-selection-blocks/App.tsx rename to examples/01-basic/07-selection-blocks/src/App.tsx diff --git a/examples/01-basic/07-selection-blocks/styles.css b/examples/01-basic/07-selection-blocks/src/styles.css similarity index 100% rename from examples/01-basic/07-selection-blocks/styles.css rename to examples/01-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 index 6284417d60..677c7f7eed 100644 --- 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 b/examples/01-basic/08-ariakit/src/App.tsx similarity index 100% rename from examples/01-basic/08-ariakit/App.tsx rename to 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 index 6284417d60..677c7f7eed 100644 --- 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 b/examples/01-basic/09-shadcn/src/App.tsx similarity index 100% rename from examples/01-basic/09-shadcn/App.tsx rename to 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 index 6284417d60..677c7f7eed 100644 --- 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 b/examples/01-basic/10-localization/src/App.tsx similarity index 100% rename from examples/01-basic/10-localization/App.tsx rename to examples/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 index 6284417d60..677c7f7eed 100644 --- 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/examples/01-basic/11-custom-placeholder/App.tsx b/examples/01-basic/11-custom-placeholder/src/App.tsx similarity index 100% rename from examples/01-basic/11-custom-placeholder/App.tsx rename to examples/01-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 index 6284417d60..677c7f7eed 100644 --- 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 b/examples/01-basic/12-multi-editor/src/App.tsx similarity index 100% rename from examples/01-basic/12-multi-editor/App.tsx rename to examples/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 index 6284417d60..677c7f7eed 100644 --- 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/examples/01-basic/13-custom-paste-handler/App.tsx b/examples/01-basic/13-custom-paste-handler/src/App.tsx similarity index 100% rename from examples/01-basic/13-custom-paste-handler/App.tsx rename to examples/01-basic/13-custom-paste-handler/src/App.tsx diff --git a/examples/01-basic/13-custom-paste-handler/styles.css b/examples/01-basic/13-custom-paste-handler/src/styles.css similarity index 100% rename from examples/01-basic/13-custom-paste-handler/styles.css rename to examples/01-basic/13-custom-paste-handler/src/styles.css diff --git a/examples/01-basic/testing/main.tsx b/examples/01-basic/testing/main.tsx index 6284417d60..677c7f7eed 100644 --- 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 b/examples/01-basic/testing/src/App.tsx similarity index 100% rename from examples/01-basic/testing/App.tsx rename to 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 index 6284417d60..677c7f7eed 100644 --- 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/examples/02-backend/01-file-uploading/App.tsx b/examples/02-backend/01-file-uploading/src/App.tsx similarity index 100% rename from examples/02-backend/01-file-uploading/App.tsx rename to examples/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 index 6284417d60..677c7f7eed 100644 --- 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/examples/02-backend/02-saving-loading/App.tsx b/examples/02-backend/02-saving-loading/src/App.tsx similarity index 100% rename from examples/02-backend/02-saving-loading/App.tsx rename to examples/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 index 6284417d60..677c7f7eed 100644 --- 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 b/examples/02-backend/03-s3/src/App.tsx similarity index 100% rename from examples/02-backend/03-s3/App.tsx rename to 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 index 6284417d60..677c7f7eed 100644 --- 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/examples/02-backend/04-rendering-static-documents/App.tsx b/examples/02-backend/04-rendering-static-documents/src/App.tsx similarity index 100% rename from examples/02-backend/04-rendering-static-documents/App.tsx rename to examples/02-backend/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 index 6284417d60..677c7f7eed 100644 --- 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/examples/03-ui-components/01-ui-elements-remove/App.tsx b/examples/03-ui-components/01-ui-elements-remove/src/App.tsx similarity index 100% rename from examples/03-ui-components/01-ui-elements-remove/App.tsx rename to examples/03-ui-components/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 index 6284417d60..677c7f7eed 100644 --- 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/examples/03-ui-components/02-formatting-toolbar-buttons/App.tsx b/examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx similarity index 98% rename from examples/03-ui-components/02-formatting-toolbar-buttons/App.tsx rename to examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx index aa8e5b9f92..92c4b48073 100644 --- a/examples/03-ui-components/02-formatting-toolbar-buttons/App.tsx +++ b/examples/03-ui-components/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/examples/03-ui-components/02-formatting-toolbar-buttons/BlueButton.tsx b/examples/03-ui-components/02-formatting-toolbar-buttons/src/BlueButton.tsx similarity index 100% rename from examples/03-ui-components/02-formatting-toolbar-buttons/BlueButton.tsx rename to examples/03-ui-components/02-formatting-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 index 6284417d60..677c7f7eed 100644 --- 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/examples/03-ui-components/03-formatting-toolbar-block-type-items/Alert.tsx b/examples/03-ui-components/03-formatting-toolbar-block-type-items/src/Alert.tsx similarity index 100% rename from examples/03-ui-components/03-formatting-toolbar-block-type-items/Alert.tsx rename to examples/03-ui-components/03-formatting-toolbar-block-type-items/src/Alert.tsx diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/App.tsx b/examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx similarity index 98% rename from examples/03-ui-components/03-formatting-toolbar-block-type-items/App.tsx rename to examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx index e46bbeb631..299a942376 100644 --- a/examples/03-ui-components/03-formatting-toolbar-block-type-items/App.tsx +++ b/examples/03-ui-components/03-formatting-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/examples/03-ui-components/03-formatting-toolbar-block-type-items/styles.css b/examples/03-ui-components/03-formatting-toolbar-block-type-items/src/styles.css similarity index 100% rename from examples/03-ui-components/03-formatting-toolbar-block-type-items/styles.css rename to examples/03-ui-components/03-formatting-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 index 6284417d60..677c7f7eed 100644 --- 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/examples/03-ui-components/04-side-menu-buttons/App.tsx b/examples/03-ui-components/04-side-menu-buttons/src/App.tsx similarity index 94% rename from examples/03-ui-components/04-side-menu-buttons/App.tsx rename to examples/03-ui-components/04-side-menu-buttons/src/App.tsx index 445b2daba9..8661c08baa 100644 --- a/examples/03-ui-components/04-side-menu-buttons/App.tsx +++ b/examples/03-ui-components/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/examples/03-ui-components/04-side-menu-buttons/RemoveBlockButton.tsx b/examples/03-ui-components/04-side-menu-buttons/src/RemoveBlockButton.tsx similarity index 100% rename from examples/03-ui-components/04-side-menu-buttons/RemoveBlockButton.tsx rename to examples/03-ui-components/04-side-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 index 6284417d60..677c7f7eed 100644 --- 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/examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx b/examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx similarity index 96% rename from examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx rename to examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx index d469349206..88d82aad2d 100644 --- a/examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx +++ b/examples/03-ui-components/05-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/examples/03-ui-components/05-side-menu-drag-handle-items/ResetBlockTypeItem.tsx b/examples/03-ui-components/05-side-menu-drag-handle-items/src/ResetBlockTypeItem.tsx similarity index 100% rename from examples/03-ui-components/05-side-menu-drag-handle-items/ResetBlockTypeItem.tsx rename to examples/03-ui-components/05-side-menu-drag-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 index 6284417d60..677c7f7eed 100644 --- 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/examples/03-ui-components/06-suggestion-menus-slash-menu-items/App.tsx b/examples/03-ui-components/06-suggestion-menus-slash-menu-items/src/App.tsx similarity index 100% rename from examples/03-ui-components/06-suggestion-menus-slash-menu-items/App.tsx rename to examples/03-ui-components/06-suggestion-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 index 6284417d60..677c7f7eed 100644 --- 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/examples/03-ui-components/07-suggestion-menus-slash-menu-component/App.tsx b/examples/03-ui-components/07-suggestion-menus-slash-menu-component/src/App.tsx similarity index 100% rename from examples/03-ui-components/07-suggestion-menus-slash-menu-component/App.tsx rename to examples/03-ui-components/07-suggestion-menus-slash-menu-component/src/App.tsx diff --git a/examples/03-ui-components/07-suggestion-menus-slash-menu-component/styles.css b/examples/03-ui-components/07-suggestion-menus-slash-menu-component/src/styles.css similarity index 100% rename from examples/03-ui-components/07-suggestion-menus-slash-menu-component/styles.css rename to examples/03-ui-components/07-suggestion-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 index 6284417d60..677c7f7eed 100644 --- 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/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/App.tsx b/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/src/App.tsx similarity index 100% rename from examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/App.tsx rename to examples/03-ui-components/08-suggestion-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 index 6284417d60..677c7f7eed 100644 --- 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/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/App.tsx b/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/src/App.tsx similarity index 100% rename from examples/03-ui-components/09-suggestion-menus-emoji-picker-component/App.tsx rename to examples/03-ui-components/09-suggestion-menus-emoji-picker-component/src/App.tsx diff --git a/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/styles.css b/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/src/styles.css similarity index 100% rename from examples/03-ui-components/09-suggestion-menus-emoji-picker-component/styles.css rename to examples/03-ui-components/09-suggestion-menus-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 index 6284417d60..677c7f7eed 100644 --- 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/examples/03-ui-components/10-suggestion-menus-grid-mentions/App.tsx b/examples/03-ui-components/10-suggestion-menus-grid-mentions/src/App.tsx similarity index 96% rename from examples/03-ui-components/10-suggestion-menus-grid-mentions/App.tsx rename to examples/03-ui-components/10-suggestion-menus-grid-mentions/src/App.tsx index 49749a8c49..333c645135 100644 --- a/examples/03-ui-components/10-suggestion-menus-grid-mentions/App.tsx +++ b/examples/03-ui-components/10-suggestion-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. @@ -27,7 +27,7 @@ const schema = BlockNoteSchema.create({ // Function which gets all users for the mentions menu. const getMentionMenuItems = ( - editor: typeof schema.BlockNoteEditor + editor: typeof schema.BlockNoteEditor, ): DefaultReactGridSuggestionItem[] => { const users = ["Steve", "Bob", "Joe", "Mike"]; @@ -95,7 +95,7 @@ export function App() { ...item, title: item.id, })), - query + query, ) as DefaultReactGridSuggestionItem[] } columns={2} diff --git a/examples/03-ui-components/10-suggestion-menus-grid-mentions/Mention.tsx b/examples/03-ui-components/10-suggestion-menus-grid-mentions/src/Mention.tsx similarity index 100% rename from examples/03-ui-components/10-suggestion-menus-grid-mentions/Mention.tsx rename to examples/03-ui-components/10-suggestion-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 index 6284417d60..677c7f7eed 100644 --- 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/examples/03-ui-components/11-uppy-file-panel/App.tsx b/examples/03-ui-components/11-uppy-file-panel/src/App.tsx similarity index 88% rename from examples/03-ui-components/11-uppy-file-panel/App.tsx rename to examples/03-ui-components/11-uppy-file-panel/src/App.tsx index 00962f1b1f..8f4ed37a5b 100644 --- a/examples/03-ui-components/11-uppy-file-panel/App.tsx +++ b/examples/03-ui-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. @@ -44,7 +44,7 @@ export default function App() { items.splice( items.findIndex((c) => c.key === "replaceFileButton"), 1, - + , ); return {items}; diff --git a/examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx b/examples/03-ui-components/11-uppy-file-panel/src/FileReplaceButton.tsx similarity index 97% rename from examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx rename to examples/03-ui-components/11-uppy-file-panel/src/FileReplaceButton.tsx index a3f48d96b6..82027bf60a 100644 --- a/examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx +++ b/examples/03-ui-components/11-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/examples/03-ui-components/11-uppy-file-panel/UppyFilePanel.tsx b/examples/03-ui-components/11-uppy-file-panel/src/UppyFilePanel.tsx similarity index 100% rename from examples/03-ui-components/11-uppy-file-panel/UppyFilePanel.tsx rename to examples/03-ui-components/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 index 6284417d60..677c7f7eed 100644 --- 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/examples/03-ui-components/12-static-formatting-toolbar/App.tsx b/examples/03-ui-components/12-static-formatting-toolbar/src/App.tsx similarity index 100% rename from examples/03-ui-components/12-static-formatting-toolbar/App.tsx rename to examples/03-ui-components/12-static-formatting-toolbar/src/App.tsx diff --git a/examples/03-ui-components/12-static-formatting-toolbar/style.css b/examples/03-ui-components/12-static-formatting-toolbar/src/style.css similarity index 100% rename from examples/03-ui-components/12-static-formatting-toolbar/style.css rename to examples/03-ui-components/12-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 index 6284417d60..677c7f7eed 100644 --- 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( diff --git a/examples/03-ui-components/13-custom-ui/App.tsx b/examples/03-ui-components/13-custom-ui/src/App.tsx similarity index 91% rename from examples/03-ui-components/13-custom-ui/App.tsx rename to examples/03-ui-components/13-custom-ui/src/App.tsx index 29e5e2ded8..e6f7454305 100644 --- a/examples/03-ui-components/13-custom-ui/App.tsx +++ b/examples/03-ui-components/13-custom-ui/src/App.tsx @@ -11,10 +11,10 @@ import "@blocknote/react/style.css"; import { createTheme, ThemeProvider, useMediaQuery } from "@mui/material"; import { useMemo } from "react"; -import { schema } from "./schema.js"; -import { CustomMUIFormattingToolbar } from "./MUIFormattingToolbar.js"; -import { CustomMUISideMenu } from "./MUISideMenu.js"; -import { MUISuggestionMenu } from "./MUISuggestionMenu.js"; +import { schema } from "./schema"; +import { CustomMUIFormattingToolbar } from "./MUIFormattingToolbar"; +import { CustomMUISideMenu } from "./MUISideMenu"; +import { MUISuggestionMenu } from "./MUISuggestionMenu"; import "./style.css"; @@ -42,7 +42,7 @@ export default function App() { mode: prefersDarkMode ? "dark" : "light", }, }), - [prefersDarkMode] + [prefersDarkMode], ); // Renders the editor instance. @@ -76,9 +76,9 @@ export default function App() { getItems={async (query) => filterSuggestionItems( getDefaultReactSlashMenuItems(editor).filter( - (item) => item.title !== "Emoji" + (item) => item.title !== "Emoji", ), - query + query, ) } suggestionMenuComponent={MUISuggestionMenu} diff --git a/examples/03-ui-components/13-custom-ui/MUIFormattingToolbar.tsx b/examples/03-ui-components/13-custom-ui/src/MUIFormattingToolbar.tsx similarity index 96% rename from examples/03-ui-components/13-custom-ui/MUIFormattingToolbar.tsx rename to examples/03-ui-components/13-custom-ui/src/MUIFormattingToolbar.tsx index 7c4cabc3d3..16d91d81b2 100644 --- a/examples/03-ui-components/13-custom-ui/MUIFormattingToolbar.tsx +++ b/examples/03-ui-components/13-custom-ui/src/MUIFormattingToolbar.tsx @@ -42,7 +42,7 @@ import { ReactNode, } from "react"; -import { TextBlockSchema } from "./schema.js"; +import { TextBlockSchema } from "./schema"; // This replaces the generic Mantine `ToolbarSelect` component with a simplified // MUI version: @@ -108,36 +108,36 @@ function MUIBlockTypeSelect() { // The block currently containing the text cursor. const [block, setBlock] = useState( - editor.getTextCursorPosition().block + editor.getTextCursorPosition().block, ); // Updates the block currently containing the text cursor whenever the editor // content or selection changes. useEditorContentOrSelectionChange( () => setBlock(editor.getTextCursorPosition().block), - editor + editor, ); // Gets the default items for the select. const defaultBlockTypeSelectItems = useMemo( () => blockTypeSelectItems(editor.dictionary), - [editor.dictionary] + [editor.dictionary], ); // Gets the selected item. const selectedItem = useMemo( () => defaultBlockTypeSelectItems.find((item) => - item.isSelected(block as any) + item.isSelected(block as any), )!, - [defaultBlockTypeSelectItems, block] + [defaultBlockTypeSelectItems, block], ); // Updates the state when the user chooses an item. const onChange = useCallback( (event: SelectChangeEvent) => { const newSelectedItem = defaultBlockTypeSelectItems.find( - (item) => item.name === event.target.value + (item) => item.name === event.target.value, )!; editor.updateBlock(block, { @@ -148,7 +148,7 @@ function MUIBlockTypeSelect() { setBlock(editor.getTextCursorPosition().block); }, - [block, defaultBlockTypeSelectItems, editor] + [block, defaultBlockTypeSelectItems, editor], ); return ( @@ -211,14 +211,14 @@ function MUIBasicTextStyleButton(props: { // Whether the text style is currently active. const [textStyleActive, setTextStyleActive] = useState( - !!editor.getActiveStyles()[props.textStyle] + !!editor.getActiveStyles()[props.textStyle], ); // Updates whether the text style is active when the editor content or // selection changes. useEditorContentOrSelectionChange( () => setTextStyleActive(props.textStyle in editor.getActiveStyles()), - editor + editor, ); // Tooltip for the button. @@ -227,7 +227,7 @@ function MUIBasicTextStyleButton(props: { `Toggle ${props.textStyle .slice(0, 1) .toUpperCase()}${props.textStyle.slice(1)}`, - [props.textStyle] + [props.textStyle], ); // Toggles the text style when the button is clicked. @@ -263,16 +263,16 @@ function MUITextAlignButton(props: { // The text alignment of the block currently containing the text cursor. const [activeTextAlignment, setActiveTextAlignment] = useState( - () => editor.getTextCursorPosition().block.props.textAlignment + () => editor.getTextCursorPosition().block.props.textAlignment, ); // Updates the text alignment when the editor content or selection changes. useEditorContentOrSelectionChange( () => setActiveTextAlignment( - editor.getTextCursorPosition().block.props.textAlignment + editor.getTextCursorPosition().block.props.textAlignment, ), - editor + editor, ); // Tooltip for the button. @@ -281,7 +281,7 @@ function MUITextAlignButton(props: { `Align ${props.textAlignment .slice(0, 1) .toUpperCase()}${props.textAlignment.slice(1)}`, - [props.textAlignment] + [props.textAlignment], ); // Sets the text alignment of the block currently containing the text cursor @@ -325,10 +325,10 @@ function MUIColorStyleButton() { // The active text and background colors. const [activeTextColor, setActiveTextColor] = useState( - () => editor.getActiveStyles().textColor || "default" + () => editor.getActiveStyles().textColor || "default", ); const [activeBackgroundColor, setActiveBackgroundColor] = useState( - () => editor.getActiveStyles().backgroundColor || "default" + () => editor.getActiveStyles().backgroundColor || "default", ); // Updates the active text and background colors when the editor content or @@ -343,7 +343,7 @@ function MUIColorStyleButton() { // Handles opening and closing the color menu. const onClick = useCallback( (event: MouseEvent) => setAnchorEl(event.currentTarget), - [] + [], ); const onClose = useCallback(() => setAnchorEl(null), []); @@ -357,7 +357,7 @@ function MUIColorStyleButton() { : editor.addStyles({ textColor }); setTimeout(() => editor.focus()); }, - [editor] + [editor], ); const backgroundColorOnClick = useCallback( (backgroundColor: string) => { @@ -367,7 +367,7 @@ function MUIColorStyleButton() { : editor.addStyles({ backgroundColor }); setTimeout(() => editor.focus()); }, - [editor] + [editor], ); return ( diff --git a/examples/03-ui-components/13-custom-ui/MUISideMenu.tsx b/examples/03-ui-components/13-custom-ui/src/MUISideMenu.tsx similarity index 98% rename from examples/03-ui-components/13-custom-ui/MUISideMenu.tsx rename to examples/03-ui-components/13-custom-ui/src/MUISideMenu.tsx index 251b409d58..8d76e61251 100644 --- a/examples/03-ui-components/13-custom-ui/MUISideMenu.tsx +++ b/examples/03-ui-components/13-custom-ui/src/MUISideMenu.tsx @@ -11,13 +11,13 @@ import { } from "@mui/material"; import { MouseEvent, ReactNode, useCallback, useMemo, useState } from "react"; -import { TextBlockSchema } from "./schema.js"; +import { TextBlockSchema } from "./schema"; // This replaces the default `RemoveBlockItem` component with a simplified // MUI version: // https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/RemoveBlockItem.tsx function MUIRemoveBlockItem( - props: SideMenuProps & { closeDragHandleMenu: () => void } + props: SideMenuProps & { closeDragHandleMenu: () => void }, ) { // Deletes the block next to the side menu. const onClick = useCallback(() => { @@ -79,7 +79,7 @@ function MUIDragHandleButton(props: SideMenuProps) { props.freezeMenu(); setAnchorEl(event.currentTarget); }, - [props] + [props], ); const onClose = useCallback(() => { setAnchorEl(null); @@ -113,7 +113,7 @@ function MUIDragHandleButton(props: SideMenuProps) { // This replaces the generic Mantine `SideMenu` component: // https://github.com/TypeCellOS/BlockNote/blob/main/packages/mantine/src/sideMenu/SideMenu.tsx function MUISideMenu( - props: SideMenuProps & { children: ReactNode } + props: SideMenuProps & { children: ReactNode }, ) { // Since the side menu is positioned by the top-left corner of a block, we // manually set its height based on the hovered block so that it's vertically diff --git a/examples/03-ui-components/13-custom-ui/MUISuggestionMenu.tsx b/examples/03-ui-components/13-custom-ui/src/MUISuggestionMenu.tsx similarity index 96% rename from examples/03-ui-components/13-custom-ui/MUISuggestionMenu.tsx rename to examples/03-ui-components/13-custom-ui/src/MUISuggestionMenu.tsx index 9b8aed593c..34e4386cf8 100644 --- a/examples/03-ui-components/13-custom-ui/MUISuggestionMenu.tsx +++ b/examples/03-ui-components/13-custom-ui/src/MUISuggestionMenu.tsx @@ -16,7 +16,7 @@ import { } from "@mui/material"; import { useEffect, useMemo, useRef } from "react"; -import { TextBlockSchema } from "./schema.js"; +import { TextBlockSchema } from "./schema"; // If you want to change the items in a Suggestion Menu, like the Slash Menu, // you don't need to modify any of the components in this file. Instead, you @@ -30,7 +30,7 @@ import { TextBlockSchema } from "./schema.js"; function MUISuggestionMenuItem( props: Omit, "items"> & { item: DefaultReactSuggestionItem & { index: number }; - } + }, ) { const Icon = props.item.icon; const editor = useBlockNoteEditor(); @@ -45,8 +45,8 @@ function MUISuggestionMenuItem( const overflow = elementOverflow( itemRef.current, document.querySelector( - `.MuiPaper-root:has([aria-label="suggestion-menu"])` - )! + `.MuiPaper-root:has([aria-label="suggestion-menu"])`, + )!, ); if (overflow === "top") { @@ -114,7 +114,7 @@ function MUISuggestionMenuLabel(props: { group: string }) { // simplified MUI version: // https://github.com/TypeCellOS/BlockNote/blob/main/packages/mantine/src/suggestionMenu/SuggestionMenu.tsx export function MUISuggestionMenu( - props: SuggestionMenuProps + props: SuggestionMenuProps, ) { // Sorts items into their groups. const groups = useMemo(() => { diff --git a/examples/03-ui-components/13-custom-ui/schema.ts b/examples/03-ui-components/13-custom-ui/src/schema.ts similarity index 100% rename from examples/03-ui-components/13-custom-ui/schema.ts rename to examples/03-ui-components/13-custom-ui/src/schema.ts diff --git a/examples/03-ui-components/13-custom-ui/style.css b/examples/03-ui-components/13-custom-ui/src/style.css similarity index 100% rename from examples/03-ui-components/13-custom-ui/style.css rename to examples/03-ui-components/13-custom-ui/src/style.css diff --git a/examples/03-ui-components/14-experimental-mobile-formatting-toolbar/main.tsx b/examples/03-ui-components/14-experimental-mobile-formatting-toolbar/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/03-ui-components/14-experimental-mobile-formatting-toolbar/main.tsx +++ b/examples/03-ui-components/14-experimental-mobile-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/examples/03-ui-components/14-experimental-mobile-formatting-toolbar/App.tsx b/examples/03-ui-components/14-experimental-mobile-formatting-toolbar/src/App.tsx similarity index 100% rename from examples/03-ui-components/14-experimental-mobile-formatting-toolbar/App.tsx rename to examples/03-ui-components/14-experimental-mobile-formatting-toolbar/src/App.tsx diff --git a/examples/03-ui-components/14-experimental-mobile-formatting-toolbar/style.css b/examples/03-ui-components/14-experimental-mobile-formatting-toolbar/src/style.css similarity index 100% rename from examples/03-ui-components/14-experimental-mobile-formatting-toolbar/style.css rename to examples/03-ui-components/14-experimental-mobile-formatting-toolbar/src/style.css diff --git a/examples/03-ui-components/15-advanced-tables/main.tsx b/examples/03-ui-components/15-advanced-tables/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/03-ui-components/15-advanced-tables/main.tsx +++ b/examples/03-ui-components/15-advanced-tables/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/03-ui-components/15-advanced-tables/App.tsx b/examples/03-ui-components/15-advanced-tables/src/App.tsx similarity index 100% rename from examples/03-ui-components/15-advanced-tables/App.tsx rename to examples/03-ui-components/15-advanced-tables/src/App.tsx diff --git a/examples/03-ui-components/link-toolbar-buttons/main.tsx b/examples/03-ui-components/link-toolbar-buttons/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/03-ui-components/link-toolbar-buttons/main.tsx +++ b/examples/03-ui-components/link-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/examples/03-ui-components/link-toolbar-buttons/AlertButton.tsx b/examples/03-ui-components/link-toolbar-buttons/src/AlertButton.tsx similarity index 100% rename from examples/03-ui-components/link-toolbar-buttons/AlertButton.tsx rename to examples/03-ui-components/link-toolbar-buttons/src/AlertButton.tsx diff --git a/examples/03-ui-components/link-toolbar-buttons/App.tsx b/examples/03-ui-components/link-toolbar-buttons/src/App.tsx similarity index 96% rename from examples/03-ui-components/link-toolbar-buttons/App.tsx rename to examples/03-ui-components/link-toolbar-buttons/src/App.tsx index 27a3fdb1e8..23e9902f85 100644 --- a/examples/03-ui-components/link-toolbar-buttons/App.tsx +++ b/examples/03-ui-components/link-toolbar-buttons/src/App.tsx @@ -7,7 +7,7 @@ import { useCreateBlockNote, } from "@blocknote/react"; -import { AlertButton } from "./AlertButton.js"; +import { AlertButton } from "./AlertButton"; export default function App() { // Creates a new editor instance. diff --git a/examples/04-theming/01-theming-dom-attributes/main.tsx b/examples/04-theming/01-theming-dom-attributes/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/04-theming/01-theming-dom-attributes/main.tsx +++ b/examples/04-theming/01-theming-dom-attributes/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/04-theming/01-theming-dom-attributes/App.tsx b/examples/04-theming/01-theming-dom-attributes/src/App.tsx similarity index 100% rename from examples/04-theming/01-theming-dom-attributes/App.tsx rename to examples/04-theming/01-theming-dom-attributes/src/App.tsx diff --git a/examples/04-theming/01-theming-dom-attributes/styles.css b/examples/04-theming/01-theming-dom-attributes/src/styles.css similarity index 100% rename from examples/04-theming/01-theming-dom-attributes/styles.css rename to examples/04-theming/01-theming-dom-attributes/src/styles.css diff --git a/examples/04-theming/02-changing-font/main.tsx b/examples/04-theming/02-changing-font/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/04-theming/02-changing-font/main.tsx +++ b/examples/04-theming/02-changing-font/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/04-theming/02-changing-font/App.tsx b/examples/04-theming/02-changing-font/src/App.tsx similarity index 100% rename from examples/04-theming/02-changing-font/App.tsx rename to examples/04-theming/02-changing-font/src/App.tsx diff --git a/examples/04-theming/02-changing-font/styles.css b/examples/04-theming/02-changing-font/src/styles.css similarity index 100% rename from examples/04-theming/02-changing-font/styles.css rename to examples/04-theming/02-changing-font/src/styles.css diff --git a/examples/04-theming/03-theming-css/main.tsx b/examples/04-theming/03-theming-css/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/04-theming/03-theming-css/main.tsx +++ b/examples/04-theming/03-theming-css/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/04-theming/03-theming-css/App.tsx b/examples/04-theming/03-theming-css/src/App.tsx similarity index 100% rename from examples/04-theming/03-theming-css/App.tsx rename to examples/04-theming/03-theming-css/src/App.tsx diff --git a/examples/04-theming/03-theming-css/styles.css b/examples/04-theming/03-theming-css/src/styles.css similarity index 100% rename from examples/04-theming/03-theming-css/styles.css rename to examples/04-theming/03-theming-css/src/styles.css diff --git a/examples/04-theming/04-theming-css-variables/main.tsx b/examples/04-theming/04-theming-css-variables/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/04-theming/04-theming-css-variables/main.tsx +++ b/examples/04-theming/04-theming-css-variables/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/04-theming/04-theming-css-variables/App.tsx b/examples/04-theming/04-theming-css-variables/src/App.tsx similarity index 100% rename from examples/04-theming/04-theming-css-variables/App.tsx rename to examples/04-theming/04-theming-css-variables/src/App.tsx diff --git a/examples/04-theming/04-theming-css-variables/styles.css b/examples/04-theming/04-theming-css-variables/src/styles.css similarity index 100% rename from examples/04-theming/04-theming-css-variables/styles.css rename to examples/04-theming/04-theming-css-variables/src/styles.css diff --git a/examples/04-theming/05-theming-css-variables-code/main.tsx b/examples/04-theming/05-theming-css-variables-code/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/04-theming/05-theming-css-variables-code/main.tsx +++ b/examples/04-theming/05-theming-css-variables-code/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/04-theming/05-theming-css-variables-code/App.tsx b/examples/04-theming/05-theming-css-variables-code/src/App.tsx similarity index 100% rename from examples/04-theming/05-theming-css-variables-code/App.tsx rename to examples/04-theming/05-theming-css-variables-code/src/App.tsx diff --git a/examples/04-theming/06-code-block/main.tsx b/examples/04-theming/06-code-block/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/04-theming/06-code-block/main.tsx +++ b/examples/04-theming/06-code-block/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/04-theming/06-code-block/App.tsx b/examples/04-theming/06-code-block/src/App.tsx similarity index 100% rename from examples/04-theming/06-code-block/App.tsx rename to examples/04-theming/06-code-block/src/App.tsx diff --git a/examples/04-theming/07-custom-code-block/README.md b/examples/04-theming/07-custom-code-block/README.md index 5401f022e7..016adf56e5 100644 --- a/examples/04-theming/07-custom-code-block/README.md +++ b/examples/04-theming/07-custom-code-block/README.md @@ -17,7 +17,7 @@ This will generate a `shiki.bundle.ts` file that you can use to create a syntax Like this: ```ts -import { createHighlighter } from "./shiki.bundle.js"; +import { createHighlighter } from "./shiki.bundle"; export default function App() { // Creates a new editor instance. diff --git a/examples/04-theming/07-custom-code-block/main.tsx b/examples/04-theming/07-custom-code-block/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/04-theming/07-custom-code-block/main.tsx +++ b/examples/04-theming/07-custom-code-block/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/04-theming/07-custom-code-block/App.tsx b/examples/04-theming/07-custom-code-block/src/App.tsx similarity index 97% rename from examples/04-theming/07-custom-code-block/App.tsx rename to examples/04-theming/07-custom-code-block/src/App.tsx index d6677aa707..e237854175 100644 --- a/examples/04-theming/07-custom-code-block/App.tsx +++ b/examples/04-theming/07-custom-code-block/src/App.tsx @@ -3,7 +3,7 @@ import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; import { useCreateBlockNote } from "@blocknote/react"; // Bundle created from `npx shiki-codegen --langs typescript,javascript,react --themes light-plus,dark-plus --engine javascript --precompiled ./shiki.bundle.ts` -import { createHighlighter } from "./shiki.bundle.js"; +import { createHighlighter } from "./shiki.bundle"; export default function App() { // Creates a new editor instance. diff --git a/examples/04-theming/07-custom-code-block/shiki.bundle.ts b/examples/04-theming/07-custom-code-block/src/shiki.bundle.ts similarity index 100% rename from examples/04-theming/07-custom-code-block/shiki.bundle.ts rename to examples/04-theming/07-custom-code-block/src/shiki.bundle.ts diff --git a/examples/05-interoperability/01-converting-blocks-to-html/main.tsx b/examples/05-interoperability/01-converting-blocks-to-html/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/05-interoperability/01-converting-blocks-to-html/main.tsx +++ b/examples/05-interoperability/01-converting-blocks-to-html/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/05-interoperability/01-converting-blocks-to-html/App.tsx b/examples/05-interoperability/01-converting-blocks-to-html/src/App.tsx similarity index 100% rename from examples/05-interoperability/01-converting-blocks-to-html/App.tsx rename to examples/05-interoperability/01-converting-blocks-to-html/src/App.tsx diff --git a/examples/05-interoperability/01-converting-blocks-to-html/styles.css b/examples/05-interoperability/01-converting-blocks-to-html/src/styles.css similarity index 100% rename from examples/05-interoperability/01-converting-blocks-to-html/styles.css rename to examples/05-interoperability/01-converting-blocks-to-html/src/styles.css diff --git a/examples/05-interoperability/02-converting-blocks-from-html/main.tsx b/examples/05-interoperability/02-converting-blocks-from-html/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/05-interoperability/02-converting-blocks-from-html/main.tsx +++ b/examples/05-interoperability/02-converting-blocks-from-html/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/05-interoperability/02-converting-blocks-from-html/App.tsx b/examples/05-interoperability/02-converting-blocks-from-html/src/App.tsx similarity index 100% rename from examples/05-interoperability/02-converting-blocks-from-html/App.tsx rename to examples/05-interoperability/02-converting-blocks-from-html/src/App.tsx diff --git a/examples/05-interoperability/02-converting-blocks-from-html/styles.css b/examples/05-interoperability/02-converting-blocks-from-html/src/styles.css similarity index 100% rename from examples/05-interoperability/02-converting-blocks-from-html/styles.css rename to examples/05-interoperability/02-converting-blocks-from-html/src/styles.css diff --git a/examples/05-interoperability/03-converting-blocks-to-md/main.tsx b/examples/05-interoperability/03-converting-blocks-to-md/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/05-interoperability/03-converting-blocks-to-md/main.tsx +++ b/examples/05-interoperability/03-converting-blocks-to-md/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/05-interoperability/03-converting-blocks-to-md/App.tsx b/examples/05-interoperability/03-converting-blocks-to-md/src/App.tsx similarity index 100% rename from examples/05-interoperability/03-converting-blocks-to-md/App.tsx rename to examples/05-interoperability/03-converting-blocks-to-md/src/App.tsx diff --git a/examples/05-interoperability/03-converting-blocks-to-md/styles.css b/examples/05-interoperability/03-converting-blocks-to-md/src/styles.css similarity index 100% rename from examples/05-interoperability/03-converting-blocks-to-md/styles.css rename to examples/05-interoperability/03-converting-blocks-to-md/src/styles.css diff --git a/examples/05-interoperability/04-converting-blocks-from-md/main.tsx b/examples/05-interoperability/04-converting-blocks-from-md/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/05-interoperability/04-converting-blocks-from-md/main.tsx +++ b/examples/05-interoperability/04-converting-blocks-from-md/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/05-interoperability/04-converting-blocks-from-md/App.tsx b/examples/05-interoperability/04-converting-blocks-from-md/src/App.tsx similarity index 100% rename from examples/05-interoperability/04-converting-blocks-from-md/App.tsx rename to examples/05-interoperability/04-converting-blocks-from-md/src/App.tsx diff --git a/examples/05-interoperability/04-converting-blocks-from-md/styles.css b/examples/05-interoperability/04-converting-blocks-from-md/src/styles.css similarity index 100% rename from examples/05-interoperability/04-converting-blocks-from-md/styles.css rename to examples/05-interoperability/04-converting-blocks-from-md/src/styles.css diff --git a/examples/05-interoperability/05-converting-blocks-to-pdf/main.tsx b/examples/05-interoperability/05-converting-blocks-to-pdf/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/05-interoperability/05-converting-blocks-to-pdf/main.tsx +++ b/examples/05-interoperability/05-converting-blocks-to-pdf/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/05-interoperability/05-converting-blocks-to-pdf/App.tsx b/examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx similarity index 100% rename from examples/05-interoperability/05-converting-blocks-to-pdf/App.tsx rename to examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx diff --git a/examples/05-interoperability/05-converting-blocks-to-pdf/styles.css b/examples/05-interoperability/05-converting-blocks-to-pdf/src/styles.css similarity index 100% rename from examples/05-interoperability/05-converting-blocks-to-pdf/styles.css rename to examples/05-interoperability/05-converting-blocks-to-pdf/src/styles.css diff --git a/examples/05-interoperability/06-converting-blocks-to-docx/main.tsx b/examples/05-interoperability/06-converting-blocks-to-docx/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/05-interoperability/06-converting-blocks-to-docx/main.tsx +++ b/examples/05-interoperability/06-converting-blocks-to-docx/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/05-interoperability/06-converting-blocks-to-docx/App.tsx b/examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx similarity index 100% rename from examples/05-interoperability/06-converting-blocks-to-docx/App.tsx rename to examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx diff --git a/examples/05-interoperability/06-converting-blocks-to-docx/styles.css b/examples/05-interoperability/06-converting-blocks-to-docx/src/styles.css similarity index 100% rename from examples/05-interoperability/06-converting-blocks-to-docx/styles.css rename to examples/05-interoperability/06-converting-blocks-to-docx/src/styles.css diff --git a/examples/05-interoperability/07-converting-blocks-to-odt/main.tsx b/examples/05-interoperability/07-converting-blocks-to-odt/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/05-interoperability/07-converting-blocks-to-odt/main.tsx +++ b/examples/05-interoperability/07-converting-blocks-to-odt/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/05-interoperability/07-converting-blocks-to-odt/App.tsx b/examples/05-interoperability/07-converting-blocks-to-odt/src/App.tsx similarity index 100% rename from examples/05-interoperability/07-converting-blocks-to-odt/App.tsx rename to examples/05-interoperability/07-converting-blocks-to-odt/src/App.tsx diff --git a/examples/05-interoperability/07-converting-blocks-to-odt/styles.css b/examples/05-interoperability/07-converting-blocks-to-odt/src/styles.css similarity index 100% rename from examples/05-interoperability/07-converting-blocks-to-odt/styles.css rename to examples/05-interoperability/07-converting-blocks-to-odt/src/styles.css diff --git a/examples/06-custom-schema/01-alert-block/main.tsx b/examples/06-custom-schema/01-alert-block/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/06-custom-schema/01-alert-block/main.tsx +++ b/examples/06-custom-schema/01-alert-block/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/06-custom-schema/01-alert-block/Alert.tsx b/examples/06-custom-schema/01-alert-block/src/Alert.tsx similarity index 100% rename from examples/06-custom-schema/01-alert-block/Alert.tsx rename to examples/06-custom-schema/01-alert-block/src/Alert.tsx diff --git a/examples/06-custom-schema/01-alert-block/App.tsx b/examples/06-custom-schema/01-alert-block/src/App.tsx similarity index 96% rename from examples/06-custom-schema/01-alert-block/App.tsx rename to examples/06-custom-schema/01-alert-block/src/App.tsx index f6e8ba15c3..16950d9ecc 100644 --- a/examples/06-custom-schema/01-alert-block/App.tsx +++ b/examples/06-custom-schema/01-alert-block/src/App.tsx @@ -4,7 +4,7 @@ import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; import { useCreateBlockNote } from "@blocknote/react"; -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/examples/06-custom-schema/01-alert-block/styles.css b/examples/06-custom-schema/01-alert-block/src/styles.css similarity index 100% rename from examples/06-custom-schema/01-alert-block/styles.css rename to examples/06-custom-schema/01-alert-block/src/styles.css diff --git a/examples/06-custom-schema/02-suggestion-menus-mentions/main.tsx b/examples/06-custom-schema/02-suggestion-menus-mentions/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/06-custom-schema/02-suggestion-menus-mentions/main.tsx +++ b/examples/06-custom-schema/02-suggestion-menus-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/examples/06-custom-schema/02-suggestion-menus-mentions/App.tsx b/examples/06-custom-schema/02-suggestion-menus-mentions/src/App.tsx similarity index 96% rename from examples/06-custom-schema/02-suggestion-menus-mentions/App.tsx rename to examples/06-custom-schema/02-suggestion-menus-mentions/src/App.tsx index 16d93cdeb9..82bbccdf59 100644 --- a/examples/06-custom-schema/02-suggestion-menus-mentions/App.tsx +++ b/examples/06-custom-schema/02-suggestion-menus-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. @@ -27,7 +27,7 @@ const schema = BlockNoteSchema.create({ // Function which gets all users for the mentions menu. const getMentionMenuItems = ( - editor: typeof schema.BlockNoteEditor + editor: typeof schema.BlockNoteEditor, ): DefaultReactSuggestionItem[] => { const users = ["Steve", "Bob", "Joe", "Mike"]; diff --git a/examples/06-custom-schema/02-suggestion-menus-mentions/Mention.tsx b/examples/06-custom-schema/02-suggestion-menus-mentions/src/Mention.tsx similarity index 100% rename from examples/06-custom-schema/02-suggestion-menus-mentions/Mention.tsx rename to examples/06-custom-schema/02-suggestion-menus-mentions/src/Mention.tsx diff --git a/examples/06-custom-schema/03-font-style/main.tsx b/examples/06-custom-schema/03-font-style/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/06-custom-schema/03-font-style/main.tsx +++ b/examples/06-custom-schema/03-font-style/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/06-custom-schema/03-font-style/App.tsx b/examples/06-custom-schema/03-font-style/src/App.tsx similarity index 99% rename from examples/06-custom-schema/03-font-style/App.tsx rename to examples/06-custom-schema/03-font-style/src/App.tsx index ecd08a6846..4cae9935b1 100644 --- a/examples/06-custom-schema/03-font-style/App.tsx +++ b/examples/06-custom-schema/03-font-style/src/App.tsx @@ -21,7 +21,7 @@ import { import { RiText } from "react-icons/ri"; -import { Font } from "./Font.js"; +import { Font } from "./Font"; // Our schema with style specs, which contain the configs and implementations for styles // that we want our editor to use. diff --git a/examples/06-custom-schema/03-font-style/Font.tsx b/examples/06-custom-schema/03-font-style/src/Font.tsx similarity index 100% rename from examples/06-custom-schema/03-font-style/Font.tsx rename to examples/06-custom-schema/03-font-style/src/Font.tsx diff --git a/examples/06-custom-schema/04-pdf-file-block/main.tsx b/examples/06-custom-schema/04-pdf-file-block/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/06-custom-schema/04-pdf-file-block/main.tsx +++ b/examples/06-custom-schema/04-pdf-file-block/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/06-custom-schema/04-pdf-file-block/App.tsx b/examples/06-custom-schema/04-pdf-file-block/src/App.tsx similarity index 97% rename from examples/06-custom-schema/04-pdf-file-block/App.tsx rename to examples/06-custom-schema/04-pdf-file-block/src/App.tsx index 327ff9fc8b..e202bf469b 100644 --- a/examples/06-custom-schema/04-pdf-file-block/App.tsx +++ b/examples/06-custom-schema/04-pdf-file-block/src/App.tsx @@ -15,7 +15,7 @@ import { import { RiFilePdfFill } from "react-icons/ri"; -import { PDF } from "./PDF.js"; +import { PDF } from "./PDF"; // Our schema with block specs, which contain the configs and implementations for blocks // that we want our editor to use. @@ -76,7 +76,7 @@ export default function App() { // Gets all default slash menu items and `insertPDF` item. filterSuggestionItems( [...getDefaultReactSlashMenuItems(editor), insertPDF(editor)], - query + query, ) } /> diff --git a/examples/06-custom-schema/04-pdf-file-block/PDF.tsx b/examples/06-custom-schema/04-pdf-file-block/src/PDF.tsx similarity index 100% rename from examples/06-custom-schema/04-pdf-file-block/PDF.tsx rename to examples/06-custom-schema/04-pdf-file-block/src/PDF.tsx diff --git a/examples/06-custom-schema/04-pdf-file-block/styles.css b/examples/06-custom-schema/04-pdf-file-block/src/styles.css similarity index 100% rename from examples/06-custom-schema/04-pdf-file-block/styles.css rename to examples/06-custom-schema/04-pdf-file-block/src/styles.css diff --git a/examples/06-custom-schema/05-alert-block-full-ux/main.tsx b/examples/06-custom-schema/05-alert-block-full-ux/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/06-custom-schema/05-alert-block-full-ux/main.tsx +++ b/examples/06-custom-schema/05-alert-block-full-ux/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/06-custom-schema/05-alert-block-full-ux/Alert.tsx b/examples/06-custom-schema/05-alert-block-full-ux/src/Alert.tsx similarity index 100% rename from examples/06-custom-schema/05-alert-block-full-ux/Alert.tsx rename to examples/06-custom-schema/05-alert-block-full-ux/src/Alert.tsx diff --git a/examples/06-custom-schema/05-alert-block-full-ux/App.tsx b/examples/06-custom-schema/05-alert-block-full-ux/src/App.tsx similarity index 97% rename from examples/06-custom-schema/05-alert-block-full-ux/App.tsx rename to examples/06-custom-schema/05-alert-block-full-ux/src/App.tsx index 19b14b358a..7c8ee1925c 100644 --- a/examples/06-custom-schema/05-alert-block-full-ux/App.tsx +++ b/examples/06-custom-schema/05-alert-block-full-ux/src/App.tsx @@ -18,7 +18,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. @@ -115,7 +115,7 @@ export default function App() { const defaultItems = getDefaultReactSlashMenuItems(editor); // Finds index of last item in "Basic blocks" group. const lastBasicBlockIndex = defaultItems.findLastIndex( - (item) => item.group === "Basic blocks" + (item) => item.group === "Basic blocks", ); // Inserts the Alert item as the last item in the "Basic blocks" group. defaultItems.splice(lastBasicBlockIndex + 1, 0, insertAlert(editor)); diff --git a/examples/06-custom-schema/05-alert-block-full-ux/styles.css b/examples/06-custom-schema/05-alert-block-full-ux/src/styles.css similarity index 100% rename from examples/06-custom-schema/05-alert-block-full-ux/styles.css rename to examples/06-custom-schema/05-alert-block-full-ux/src/styles.css diff --git a/examples/06-custom-schema/react-custom-blocks/main.tsx b/examples/06-custom-schema/react-custom-blocks/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/06-custom-schema/react-custom-blocks/main.tsx +++ b/examples/06-custom-schema/react-custom-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/06-custom-schema/react-custom-blocks/App.tsx b/examples/06-custom-schema/react-custom-blocks/src/App.tsx similarity index 100% rename from examples/06-custom-schema/react-custom-blocks/App.tsx rename to examples/06-custom-schema/react-custom-blocks/src/App.tsx diff --git a/examples/06-custom-schema/react-custom-blocks/styles.css b/examples/06-custom-schema/react-custom-blocks/src/styles.css similarity index 100% rename from examples/06-custom-schema/react-custom-blocks/styles.css rename to examples/06-custom-schema/react-custom-blocks/src/styles.css diff --git a/examples/06-custom-schema/react-custom-inline-content/main.tsx b/examples/06-custom-schema/react-custom-inline-content/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/06-custom-schema/react-custom-inline-content/main.tsx +++ b/examples/06-custom-schema/react-custom-inline-content/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/06-custom-schema/react-custom-inline-content/App.tsx b/examples/06-custom-schema/react-custom-inline-content/src/App.tsx similarity index 100% rename from examples/06-custom-schema/react-custom-inline-content/App.tsx rename to examples/06-custom-schema/react-custom-inline-content/src/App.tsx diff --git a/examples/06-custom-schema/react-custom-styles/main.tsx b/examples/06-custom-schema/react-custom-styles/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/06-custom-schema/react-custom-styles/main.tsx +++ b/examples/06-custom-schema/react-custom-styles/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/06-custom-schema/react-custom-styles/App.tsx b/examples/06-custom-schema/react-custom-styles/src/App.tsx similarity index 100% rename from examples/06-custom-schema/react-custom-styles/App.tsx rename to examples/06-custom-schema/react-custom-styles/src/App.tsx diff --git a/examples/07-collaboration/01-partykit/main.tsx b/examples/07-collaboration/01-partykit/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/07-collaboration/01-partykit/main.tsx +++ b/examples/07-collaboration/01-partykit/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/07-collaboration/01-partykit/App.tsx b/examples/07-collaboration/01-partykit/src/App.tsx similarity index 100% rename from examples/07-collaboration/01-partykit/App.tsx rename to examples/07-collaboration/01-partykit/src/App.tsx diff --git a/examples/07-collaboration/02-liveblocks/main.tsx b/examples/07-collaboration/02-liveblocks/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/07-collaboration/02-liveblocks/main.tsx +++ b/examples/07-collaboration/02-liveblocks/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/07-collaboration/02-liveblocks/App.tsx b/examples/07-collaboration/02-liveblocks/src/App.tsx similarity index 95% rename from examples/07-collaboration/02-liveblocks/App.tsx rename to examples/07-collaboration/02-liveblocks/src/App.tsx index 7d39685643..ca145f1991 100644 --- a/examples/07-collaboration/02-liveblocks/App.tsx +++ b/examples/07-collaboration/02-liveblocks/src/App.tsx @@ -9,7 +9,7 @@ import "@liveblocks/react-ui/styles.css"; import "@liveblocks/react-ui/styles/dark/media-query.css"; import "@liveblocks/react-tiptap/styles.css"; -import { Editor } from "./Editor.js"; +import { Editor } from "./Editor"; import "./globals.css"; import "./styles.css"; diff --git a/examples/07-collaboration/02-liveblocks/Editor.tsx b/examples/07-collaboration/02-liveblocks/src/Editor.tsx similarity index 88% rename from examples/07-collaboration/02-liveblocks/Editor.tsx rename to examples/07-collaboration/02-liveblocks/src/Editor.tsx index 98057d954f..2c6da47379 100644 --- a/examples/07-collaboration/02-liveblocks/Editor.tsx +++ b/examples/07-collaboration/02-liveblocks/src/Editor.tsx @@ -4,12 +4,12 @@ import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; import { useCreateBlockNoteWithLiveblocks } from "@liveblocks/react-blocknote"; -import { Threads } from "./Threads.js"; +import { Threads } from "./Threads"; export function Editor() { const editor = useCreateBlockNoteWithLiveblocks( {}, - { mentions: true } + { mentions: true }, ) as BlockNoteEditor; return ( diff --git a/examples/07-collaboration/02-liveblocks/Threads.tsx b/examples/07-collaboration/02-liveblocks/src/Threads.tsx similarity index 100% rename from examples/07-collaboration/02-liveblocks/Threads.tsx rename to examples/07-collaboration/02-liveblocks/src/Threads.tsx diff --git a/examples/07-collaboration/02-liveblocks/globals.css b/examples/07-collaboration/02-liveblocks/src/globals.css similarity index 100% rename from examples/07-collaboration/02-liveblocks/globals.css rename to examples/07-collaboration/02-liveblocks/src/globals.css diff --git a/examples/07-collaboration/02-liveblocks/styles.css b/examples/07-collaboration/02-liveblocks/src/styles.css similarity index 100% rename from examples/07-collaboration/02-liveblocks/styles.css rename to examples/07-collaboration/02-liveblocks/src/styles.css diff --git a/examples/07-collaboration/03-y-sweet/main.tsx b/examples/07-collaboration/03-y-sweet/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/07-collaboration/03-y-sweet/main.tsx +++ b/examples/07-collaboration/03-y-sweet/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/07-collaboration/03-y-sweet/App.tsx b/examples/07-collaboration/03-y-sweet/src/App.tsx similarity index 100% rename from examples/07-collaboration/03-y-sweet/App.tsx rename to examples/07-collaboration/03-y-sweet/src/App.tsx diff --git a/examples/07-collaboration/04-comments/main.tsx b/examples/07-collaboration/04-comments/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/07-collaboration/04-comments/main.tsx +++ b/examples/07-collaboration/04-comments/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/07-collaboration/04-comments/App.tsx b/examples/07-collaboration/04-comments/src/App.tsx similarity index 97% rename from examples/07-collaboration/04-comments/App.tsx rename to examples/07-collaboration/04-comments/src/App.tsx index 17bbc9f9ff..aea41316c4 100644 --- a/examples/07-collaboration/04-comments/App.tsx +++ b/examples/07-collaboration/04-comments/src/App.tsx @@ -10,8 +10,8 @@ import { useCreateBlockNote } from "@blocknote/react"; import { YDocProvider, useYDoc, useYjsProvider } from "@y-sweet/react"; import { useMemo, useState } from "react"; -import { SettingsSelect } from "./SettingsSelect.js"; -import { HARDCODED_USERS, MyUserType, getRandomColor } from "./userdata.js"; +import { SettingsSelect } from "./SettingsSelect"; +import { HARDCODED_USERS, MyUserType, getRandomColor } from "./userdata"; import "./style.css"; @@ -66,7 +66,7 @@ function Document() { return new YjsThreadStore( activeUser.id, doc.getMap("threads"), - new DefaultThreadStoreAuth(activeUser.id, activeUser.role) + new DefaultThreadStoreAuth(activeUser.id, activeUser.role), ); }, [doc, activeUser]); @@ -83,7 +83,7 @@ function Document() { user: { color: getRandomColor(), name: activeUser.username }, }, }, - [activeUser, threadStore] + [activeUser, threadStore], ); return ( diff --git a/examples/07-collaboration/04-comments/SettingsSelect.tsx b/examples/07-collaboration/04-comments/src/SettingsSelect.tsx similarity index 100% rename from examples/07-collaboration/04-comments/SettingsSelect.tsx rename to examples/07-collaboration/04-comments/src/SettingsSelect.tsx diff --git a/examples/07-collaboration/04-comments/style.css b/examples/07-collaboration/04-comments/src/style.css similarity index 100% rename from examples/07-collaboration/04-comments/style.css rename to examples/07-collaboration/04-comments/src/style.css diff --git a/examples/07-collaboration/04-comments/userdata.ts b/examples/07-collaboration/04-comments/src/userdata.ts similarity index 100% rename from examples/07-collaboration/04-comments/userdata.ts rename to examples/07-collaboration/04-comments/src/userdata.ts diff --git a/examples/07-collaboration/05-comments-with-sidebar/main.tsx b/examples/07-collaboration/05-comments-with-sidebar/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/07-collaboration/05-comments-with-sidebar/main.tsx +++ b/examples/07-collaboration/05-comments-with-sidebar/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/07-collaboration/05-comments-with-sidebar/App.tsx b/examples/07-collaboration/05-comments-with-sidebar/src/App.tsx similarity index 98% rename from examples/07-collaboration/05-comments-with-sidebar/App.tsx rename to examples/07-collaboration/05-comments-with-sidebar/src/App.tsx index 7a09a86434..2fbeea08f7 100644 --- a/examples/07-collaboration/05-comments-with-sidebar/App.tsx +++ b/examples/07-collaboration/05-comments-with-sidebar/src/App.tsx @@ -15,8 +15,8 @@ import { import { YDocProvider, useYDoc, useYjsProvider } from "@y-sweet/react"; import { useMemo, useState } from "react"; -import { SettingsSelect } from "./SettingsSelect.js"; -import { HARDCODED_USERS, MyUserType, getRandomColor } from "./userdata.js"; +import { SettingsSelect } from "./SettingsSelect"; +import { HARDCODED_USERS, MyUserType, getRandomColor } from "./userdata"; import "./style.css"; @@ -77,7 +77,7 @@ function Document() { return new YjsThreadStore( activeUser.id, doc.getMap("threads"), - new DefaultThreadStoreAuth(activeUser.id, activeUser.role) + new DefaultThreadStoreAuth(activeUser.id, activeUser.role), ); }, [doc, activeUser]); @@ -94,7 +94,7 @@ function Document() { user: { color: getRandomColor(), name: activeUser.username }, }, }, - [activeUser, threadStore] + [activeUser, threadStore], ); return ( diff --git a/examples/07-collaboration/05-comments-with-sidebar/SettingsSelect.tsx b/examples/07-collaboration/05-comments-with-sidebar/src/SettingsSelect.tsx similarity index 100% rename from examples/07-collaboration/05-comments-with-sidebar/SettingsSelect.tsx rename to examples/07-collaboration/05-comments-with-sidebar/src/SettingsSelect.tsx diff --git a/examples/07-collaboration/05-comments-with-sidebar/style.css b/examples/07-collaboration/05-comments-with-sidebar/src/style.css similarity index 100% rename from examples/07-collaboration/05-comments-with-sidebar/style.css rename to examples/07-collaboration/05-comments-with-sidebar/src/style.css diff --git a/examples/07-collaboration/05-comments-with-sidebar/userdata.ts b/examples/07-collaboration/05-comments-with-sidebar/src/userdata.ts similarity index 100% rename from examples/07-collaboration/05-comments-with-sidebar/userdata.ts rename to examples/07-collaboration/05-comments-with-sidebar/src/userdata.ts diff --git a/examples/08-extensions/01-tiptap-arrow-conversion/main.tsx b/examples/08-extensions/01-tiptap-arrow-conversion/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/08-extensions/01-tiptap-arrow-conversion/main.tsx +++ b/examples/08-extensions/01-tiptap-arrow-conversion/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/08-extensions/01-tiptap-arrow-conversion/App.tsx b/examples/08-extensions/01-tiptap-arrow-conversion/src/App.tsx similarity index 98% rename from examples/08-extensions/01-tiptap-arrow-conversion/App.tsx rename to examples/08-extensions/01-tiptap-arrow-conversion/src/App.tsx index dfe1bb6e71..3fbe199ec4 100644 --- a/examples/08-extensions/01-tiptap-arrow-conversion/App.tsx +++ b/examples/08-extensions/01-tiptap-arrow-conversion/src/App.tsx @@ -3,7 +3,7 @@ import { useCreateBlockNote } from "@blocknote/react"; import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; -import { ArrowConversionExtension } from "./ArrowConversionExtension.js"; +import { ArrowConversionExtension } from "./ArrowConversionExtension"; export default function App() { // Creates a new editor instance. diff --git a/examples/08-extensions/01-tiptap-arrow-conversion/ArrowConversionExtension.ts b/examples/08-extensions/01-tiptap-arrow-conversion/src/ArrowConversionExtension.ts similarity index 100% rename from examples/08-extensions/01-tiptap-arrow-conversion/ArrowConversionExtension.ts rename to examples/08-extensions/01-tiptap-arrow-conversion/src/ArrowConversionExtension.ts diff --git a/examples/vanilla-js/react-vanilla-custom-blocks/main.tsx b/examples/vanilla-js/react-vanilla-custom-blocks/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/vanilla-js/react-vanilla-custom-blocks/main.tsx +++ b/examples/vanilla-js/react-vanilla-custom-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/vanilla-js/react-vanilla-custom-blocks/App.tsx b/examples/vanilla-js/react-vanilla-custom-blocks/src/App.tsx similarity index 100% rename from examples/vanilla-js/react-vanilla-custom-blocks/App.tsx rename to examples/vanilla-js/react-vanilla-custom-blocks/src/App.tsx diff --git a/examples/vanilla-js/react-vanilla-custom-blocks/styles.css b/examples/vanilla-js/react-vanilla-custom-blocks/src/styles.css similarity index 100% rename from examples/vanilla-js/react-vanilla-custom-blocks/styles.css rename to examples/vanilla-js/react-vanilla-custom-blocks/src/styles.css diff --git a/examples/vanilla-js/react-vanilla-custom-inline-content/main.tsx b/examples/vanilla-js/react-vanilla-custom-inline-content/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/vanilla-js/react-vanilla-custom-inline-content/main.tsx +++ b/examples/vanilla-js/react-vanilla-custom-inline-content/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/vanilla-js/react-vanilla-custom-inline-content/App.tsx b/examples/vanilla-js/react-vanilla-custom-inline-content/src/App.tsx similarity index 100% rename from examples/vanilla-js/react-vanilla-custom-inline-content/App.tsx rename to examples/vanilla-js/react-vanilla-custom-inline-content/src/App.tsx diff --git a/examples/vanilla-js/react-vanilla-custom-styles/main.tsx b/examples/vanilla-js/react-vanilla-custom-styles/main.tsx index 6284417d60..677c7f7eed 100644 --- a/examples/vanilla-js/react-vanilla-custom-styles/main.tsx +++ b/examples/vanilla-js/react-vanilla-custom-styles/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/vanilla-js/react-vanilla-custom-styles/App.tsx b/examples/vanilla-js/react-vanilla-custom-styles/src/App.tsx similarity index 100% rename from examples/vanilla-js/react-vanilla-custom-styles/App.tsx rename to examples/vanilla-js/react-vanilla-custom-styles/src/App.tsx diff --git a/fumadocs/.eslintrc.json b/fumadocs/.eslintrc.json new file mode 100644 index 0000000000..3f47543412 --- /dev/null +++ b/fumadocs/.eslintrc.json @@ -0,0 +1,5 @@ +{ + "rules": { + "import/extensions": 0 + } +} diff --git a/fumadocs/.gitignore b/fumadocs/.gitignore new file mode 100644 index 0000000000..c316d36474 --- /dev/null +++ b/fumadocs/.gitignore @@ -0,0 +1,32 @@ +# deps +/node_modules + +# generated content +.contentlayer +.content-collections +.source + +# test & build +/coverage +/.next/ +/out/ +/build +*.tsbuildinfo + +# misc +.DS_Store +*.pem +/.pnp +.pnp.js +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# others +.env*.local +.vercel +next-env.d.ts +# Sentry Config File +.env.sentry-build-plugin +/content/examples/ +/components/example/generated/ \ No newline at end of file diff --git a/fumadocs/README.md b/fumadocs/README.md new file mode 100644 index 0000000000..538063e170 --- /dev/null +++ b/fumadocs/README.md @@ -0,0 +1,26 @@ +# fumadocs + +This is a Next.js application generated with +[Create Fumadocs](https://github.com/fuma-nama/fumadocs). + +Run development server: + +```bash +npm run dev +# or +pnpm dev +# or +yarn dev +``` + +Open http://localhost:3000 with your browser to see the result. + +## Learn More + +To learn more about Next.js and Fumadocs, take a look at the following +resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js + features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +- [Fumadocs](https://fumadocs.vercel.app) - learn about Fumadocs diff --git a/fumadocs/app/(home)/layout.tsx b/fumadocs/app/(home)/layout.tsx new file mode 100644 index 0000000000..1dd4684d0c --- /dev/null +++ b/fumadocs/app/(home)/layout.tsx @@ -0,0 +1,7 @@ +import type { ReactNode } from 'react'; +import { HomeLayout } from 'fumadocs-ui/layouts/home'; +import { baseOptions } from '@/app/layout.config'; + +export default function Layout({ children }: { children: ReactNode }) { + return {children}; +} diff --git a/fumadocs/app/(home)/page.tsx b/fumadocs/app/(home)/page.tsx new file mode 100644 index 0000000000..fd5381ae59 --- /dev/null +++ b/fumadocs/app/(home)/page.tsx @@ -0,0 +1,27 @@ +import Link from "next/link"; + +export default function HomePage() { + return ( +
+

Hello World

+

+ You can open{" "} + + /docs + {" "} + and see the documentation. +

+

+ You can open{" "} + + /examples + {" "} + and see the examples. +

+
+ ); +} diff --git a/fumadocs/app/api/search/route.ts b/fumadocs/app/api/search/route.ts new file mode 100644 index 0000000000..57efff4713 --- /dev/null +++ b/fumadocs/app/api/search/route.ts @@ -0,0 +1,4 @@ +import { source } from "@/lib/source/docs"; +import { createFromSource } from "fumadocs-core/search/server"; + +export const { GET } = createFromSource(source); diff --git a/fumadocs/app/docs/[[...slug]]/page.tsx b/fumadocs/app/docs/[[...slug]]/page.tsx new file mode 100644 index 0000000000..e549344d32 --- /dev/null +++ b/fumadocs/app/docs/[[...slug]]/page.tsx @@ -0,0 +1,65 @@ +import { source } from "@/lib/source/docs"; +import { + DocsPage, + DocsBody, + DocsDescription, + DocsTitle, +} from "fumadocs-ui/page"; +import { notFound } from "next/navigation"; +import { createRelativeLink } from "fumadocs-ui/mdx"; +import { Tab, Tabs } from "fumadocs-ui/components/tabs"; +import { getMDXComponents } from "@/mdx-components"; +import { Example } from "@/components/example"; +import { ThemedImage } from "@/components/ThemedImage"; +import { DocsCardTable } from "@/components/CardTable"; + +export default async function Page(props: { + params: Promise<{ slug?: string[] }>; +}) { + const params = await props.params; + const page = source.getPage(params.slug); + if (!page) { + notFound(); + } + + const MDXContent = page.data.body; + + return ( + + {page.data.title} + {page.data.description} + + + + + ); +} + +export async function generateStaticParams() { + return source.generateParams(); +} + +export async function generateMetadata(props: { + params: Promise<{ slug?: string[] }>; +}) { + const params = await props.params; + const page = source.getPage(params.slug); + if (!page) { + notFound(); + } + + return { + title: page.data.title, + description: page.data.description, + }; +} diff --git a/fumadocs/app/docs/layout.tsx b/fumadocs/app/docs/layout.tsx new file mode 100644 index 0000000000..fdbaea9a1e --- /dev/null +++ b/fumadocs/app/docs/layout.tsx @@ -0,0 +1,12 @@ +import { DocsLayout } from "fumadocs-ui/layouts/docs"; +import type { ReactNode } from "react"; +import { baseOptions } from "@/app/layout.config"; +import { source } from "@/lib/source/docs"; + +export default function Layout({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +} diff --git a/fumadocs/app/examples/[[...slug]]/page.tsx b/fumadocs/app/examples/[[...slug]]/page.tsx new file mode 100644 index 0000000000..a00af1c99c --- /dev/null +++ b/fumadocs/app/examples/[[...slug]]/page.tsx @@ -0,0 +1,63 @@ +import { source } from "@/lib/source/examples"; +import { + DocsPage, + DocsBody, + DocsDescription, + DocsTitle, +} from "fumadocs-ui/page"; +import { notFound } from "next/navigation"; +import { createRelativeLink } from "fumadocs-ui/mdx"; +import { Tab, Tabs } from "fumadocs-ui/components/tabs"; +import { getMDXComponents } from "@/mdx-components"; +import { Example } from "@/components/example"; +import { ThemedImage } from "@/components/ThemedImage"; + +export default async function Page(props: { + params: Promise<{ slug?: string[] }>; +}) { + const params = await props.params; + const page = source.getPage(params.slug); + if (!page) { + notFound(); + } + + const MDXContent = page.data.body; + + return ( + + {page.data.title} + {page.data.description} + + + + + ); +} + +export async function generateStaticParams() { + return source.generateParams(); +} + +export async function generateMetadata(props: { + params: Promise<{ slug?: string[] }>; +}) { + const params = await props.params; + const page = source.getPage(params.slug); + if (!page) { + notFound(); + } + + return { + title: page.data.title, + description: page.data.description, + }; +} diff --git a/fumadocs/app/examples/layout.tsx b/fumadocs/app/examples/layout.tsx new file mode 100644 index 0000000000..0a81803745 --- /dev/null +++ b/fumadocs/app/examples/layout.tsx @@ -0,0 +1,12 @@ +import { DocsLayout } from "fumadocs-ui/layouts/docs"; +import type { ReactNode } from "react"; +import { baseOptions } from "@/app/layout.config"; +import { source } from "@/lib/source/examples"; + +export default function Layout({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +} diff --git a/fumadocs/app/global-error.tsx b/fumadocs/app/global-error.tsx new file mode 100644 index 0000000000..9bda5feef0 --- /dev/null +++ b/fumadocs/app/global-error.tsx @@ -0,0 +1,23 @@ +"use client"; + +import * as Sentry from "@sentry/nextjs"; +import NextError from "next/error"; +import { useEffect } from "react"; + +export default function GlobalError({ error }: { error: Error & { digest?: string } }) { + useEffect(() => { + Sentry.captureException(error); + }, [error]); + + return ( + + + {/* `NextError` is the default Next.js error page component. Its type + definition requires a `statusCode` prop. However, since the App Router + does not expose status codes for errors, we simply pass 0 to render a + generic error message. */} + + + + ); +} \ No newline at end of file diff --git a/fumadocs/app/global.css b/fumadocs/app/global.css new file mode 100644 index 0000000000..50b3bc2960 --- /dev/null +++ b/fumadocs/app/global.css @@ -0,0 +1,3 @@ +@import 'tailwindcss'; +@import 'fumadocs-ui/css/neutral.css'; +@import 'fumadocs-ui/css/preset.css'; diff --git a/fumadocs/app/layout.config.tsx b/fumadocs/app/layout.config.tsx new file mode 100644 index 0000000000..c474d17e2d --- /dev/null +++ b/fumadocs/app/layout.config.tsx @@ -0,0 +1,33 @@ +import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'; + +/** + * Shared layout configurations + * + * you can customise layouts individually from: + * Home Layout: app/(home)/layout.tsx + * Docs Layout: app/docs/layout.tsx + */ +export const baseOptions: BaseLayoutProps = { + nav: { + title: ( + <> + + + + My App + + ), + }, + links: [ + { + text: 'Documentation', + url: '/docs', + active: 'nested-url', + }, + ], +}; diff --git a/fumadocs/app/layout.tsx b/fumadocs/app/layout.tsx new file mode 100644 index 0000000000..428999966b --- /dev/null +++ b/fumadocs/app/layout.tsx @@ -0,0 +1,18 @@ +import "./global.css"; +import { RootProvider } from "fumadocs-ui/provider"; +import { Inter } from "next/font/google"; +import type { ReactNode } from "react"; + +const inter = Inter({ + subsets: ["latin"], +}); + +export default function Layout({ children }: { children: ReactNode }) { + return ( + + + {children} + + + ); +} diff --git a/fumadocs/components/CardTable.tsx b/fumadocs/components/CardTable.tsx new file mode 100644 index 0000000000..c7bfa7a17b --- /dev/null +++ b/fumadocs/components/CardTable.tsx @@ -0,0 +1,15 @@ +import { getPageTreePeers } from "fumadocs-core/server"; +import { Cards, Card } from "fumadocs-ui/components/card"; +import { source } from "@/lib/source/docs"; + +export function DocsCardTable({ path }: { path: string }) { + return ( + + {getPageTreePeers(source.pageTree, `/docs/${path}`).map((peer) => ( + + {peer.description} + + ))} + + ); +} diff --git a/fumadocs/components/ThemedImage.tsx b/fumadocs/components/ThemedImage.tsx new file mode 100644 index 0000000000..9fe18cd892 --- /dev/null +++ b/fumadocs/components/ThemedImage.tsx @@ -0,0 +1,3 @@ +export function ThemedImage() { + return
image
; +} diff --git a/fumadocs/components/example.tsx b/fumadocs/components/example.tsx new file mode 100644 index 0000000000..e14aa713d5 --- /dev/null +++ b/fumadocs/components/example.tsx @@ -0,0 +1,125 @@ +// import { authClient } from "@/util/auth-client"; +import dynamic from "next/dynamic"; +import { AiFillGithub } from "react-icons/ai"; +import { SiStackblitz } from "react-icons/si"; +// import "../pages/landing/gradients.css"; +import "./styles.css"; + +// import CTAButton from "../../components/pages/landing/shared/CTAButton"; +// import { SectionHeader } from "../../components/pages/landing/shared/Headings"; +const CTAButton = ({ + children, + href, + color, + size, + hoverGlow, +}: { + children: React.ReactNode; + href: string; + color: string; + size: string; + hoverGlow: boolean; +}) => children; +const SectionHeader = ({ children }: { children: React.ReactNode }) => children; + +const baseGitHubURL = "https://github.com/TypeCellOS/BlockNote/tree/main/"; +// const baseCodeSandboxURL = +// "https://githubbox.com/TypeCellOS/BlockNote/tree/main/"; + +const baseStackBlitzURL = + "https://www.stackblitz.com/github/TypeCellOS/BlockNote/tree/main/"; + +// const ThemedExample = dynamic(() => import("./ThemedExample"), { +// ssr: false, +// }); + +export async function Example(props: { + name: string; + path: string; + children: any; + pro?: boolean; +}) { + const Component = dynamic( + () => import("./example/generated/components/" + props.name + "/index"), + ); + // const showCode = + // !props.isProExample || + // props.isProExample.userStatus === "starter" || + // props.isProExample.userStatus === "business"; + const showCode = true; + + return ( +
+ {showCode && ( + + )} +
+ +
+ {showCode ? ( + props.children + ) : ( +
+
+
+
+
+ Pro Example +

+ Get access to the full source code for pro examples by subscribing + to BlockNote Pro +

+
+ + Get BlockNote Pro + +
+ {/* {!props.isProExample?.userStatus && ( +

+ Or{" "} + {" "} + via GitHub +

+ )} */} +
+
+ )} +
+ ); +} diff --git a/fumadocs/components/styles.css b/fumadocs/components/styles.css new file mode 100644 index 0000000000..af50a5529f --- /dev/null +++ b/fumadocs/components/styles.css @@ -0,0 +1,28 @@ +:focus-visible { + box-shadow: unset !important; +} + +.demo .bn-container:not(.bn-comment-editor), +.demo .bn-editor { + height: 100%; +} + +.demo .bn-container:not(.bn-comment-editor) .bn-editor { + height: 100%; +} + +.demo .bn-editor { + overflow: auto; + padding-block: 1rem; +} + +.demo-contents a { + color: revert; + text-decoration: revert; +} + +.demo code.bn-inline-content { + font-size: 1em; + line-height: 1.5; + display: block; +} diff --git a/fumadocs/content/docs/advanced/ariakit.mdx b/fumadocs/content/docs/advanced/ariakit.mdx new file mode 100644 index 0000000000..df4430d4c3 --- /dev/null +++ b/fumadocs/content/docs/advanced/ariakit.mdx @@ -0,0 +1,16 @@ +--- +title: BlockNote with Ariakit +description: Ariakit rich text editor with BlockNote +imageTitle: BlockNote with Ariakit +--- + + + + +## Using Ariakit with BlockNote + +[Ariakit](https://ariakit.org/) is an open-source library of unstyled (headless), primitive components with a focus on Accessibility. To use BlockNote with Ariakit, you can import `BlockNoteView` from `@blocknote/ariakit` (instead of from `@blocknote/mantine`). + +You can fully style the components with your own CSS, or import the provided default styles using the CSS file from `@blocknote/ariakit/style.css`. + + diff --git a/fumadocs/content/docs/advanced/code-blocks.mdx b/fumadocs/content/docs/advanced/code-blocks.mdx new file mode 100644 index 0000000000..53b9d91fa4 --- /dev/null +++ b/fumadocs/content/docs/advanced/code-blocks.mdx @@ -0,0 +1,88 @@ +--- +title: Code Block Syntax Highlighting +description: This section explains how to add syntax highlighting to code blocks. +imageTitle: Code Block Syntax Highlighting +--- + + + +# Code Block Syntax Highlighting + +To enable code block syntax highlighting, you can use the `codeBlock` option in the `useCreateBlockNote` hook. This is excluded by default to reduce bundle size. + +We've created a default setup which automatically includes some of the most common languages in the most optimized way possible. The language syntaxes are loaded on-demand to ensure the smallest bundle size for your users. + +To use it, you can do the following: + +```sh +npm install @blocknote/code-block +``` + +And then you can use it like this: + +```tsx +import { codeBlock } from "@blocknote/code-block"; + +export default function App() { + // Creates a new editor instance. + const editor = useCreateBlockNote({ + codeBlock, + }); + + // Renders the editor instance using a React component. + return ; +} +``` + +See the code block example for a more detailed example. + + + +## Custom Themes & Languages + +To configure a code block highlighting theme and language, you can use the `codeBlock` option in the `useCreateBlockNote` hook. + +This allows you to configure a [shiki](https://shiki.style) highlighter for the code blocks of your editor, allowing you to tailor the themes and languages you would like to use. + +To create a syntax highlighter, you can use the [shiki-codegen](https://shiki.style/packages/codegen) CLI for generating the code to create a syntax highlighter for your languages and themes. + +For example to create a syntax highlighter using the optimized javascript engine, javascript, typescript, vue, with light and dark themes, you can run the following command: + +```bash +npx shiki-codegen --langs javascript,typescript,vue --themes light,dark --engine javascript --precompiled ./shiki.bundle.ts +``` + +This will generate a `shiki.bundle.ts` file that you can use to create a syntax highlighter for your editor. + +Like this: + +```ts +import { createHighlighter } from "./shiki.bundle.js"; + +export default function App() { + // Creates a new editor instance. + const editor = useCreateBlockNote({ + codeBlock: { + indentLineWithTab: true, + defaultLanguage: "typescript", + supportedLanguages: { + typescript: { + name: "TypeScript", + aliases: ["ts"], + }, + }, + createHighlighter: () => + createHighlighter({ + themes: ["light-plus", "dark-plus"], + langs: [], + }), + }, + }); + + return ; +} +``` + +See the custom code block example for a more detailed example. + + diff --git a/fumadocs/content/docs/advanced/grid-suggestion-menus.mdx b/fumadocs/content/docs/advanced/grid-suggestion-menus.mdx new file mode 100644 index 0000000000..800315a83c --- /dev/null +++ b/fumadocs/content/docs/advanced/grid-suggestion-menus.mdx @@ -0,0 +1,51 @@ +--- +title: Grid Suggestion Menus +description: In addition to displaying Suggestion Menus as stacks, BlockNote also supports displaying them as grids. +imageTitle: Grid Suggestion Menus +--- + +# Grid Suggestion Menus + +Grid Suggestion Menus appear when the user enters a trigger character, and text after the character is used to filter the menu items. + +Grid Suggestion Menus are similar to regular Suggestion Menus, but results are organized in a grid, and users can use all arrow keys (including left, right) on their keyboard to navigate the results. + +## Emoji Picker + +The Emoji Picker is a Grid Suggestion Menu that opens with the `:` character (or when selecting emoji item in the Slash Menu). + +It only displays once the user types 2 non-whitespace characters a query, to minimize cases where the user only wants to enter the `:` character. + + + +### Changing Emoji Picker Columns + +By default, the Emoji Picker is rendered with 10 columns, but you can change this to any amount. In the demo below, the Emoji Picker is changed to only display 5 columns. + + + +Passing `emojiPicker={false}` to `BlockNoteView` tells BlockNote not to show the default Emoji Picker. Adding the `GridSuggestionMenuController` with `triggerCharacter={":"}` and `columns={5}` tells BlockNote to show one with 5 columns instead. + +### Replacing the Emoji Picker Component + +You can replace the React component used for the Emoji Picker with your own, as you can see in the demo below. + + + +Again, we add a `GridSuggestionMenuController` component with `triggerCharacter={":"}` and set `emojiPicker={false}` to replace the default Emoji Picker. + +Now, we also pass a component to its `gridSuggestionMenuComponent` prop. The `gridSuggestionMenuComponent` we pass is responsible for rendering the filtered items. The `GridSuggestionMenuController` controls its position and visibility (below the trigger character), and it also determines which items should be shown. Since we don't specify which items to show (the `getItems` prop isn't defined), it will use the default items for a grid, which are the emojis. + +## Creating additional Grid Suggestion Menus + +You can add additional Grid Suggestion Menus to the editor, which can use any trigger character. The demo below adds an example Grid Suggestion Menu for mentions, where each item is the first character of the user's name, and opens with the `@` character. + + + +Changing the column count in the new Grid Suggestion Menu, or the component used to render it, is done the same way as for the [Emoji Picker](/docs/advanced/grid-suggestion-menus#emoji-picker). For more information about how the mentions elements work, see [Custom Inline Content](/docs/custom-schemas/custom-inline-content). diff --git a/fumadocs/content/docs/advanced/meta.json b/fumadocs/content/docs/advanced/meta.json new file mode 100644 index 0000000000..fd81d02bb4 --- /dev/null +++ b/fumadocs/content/docs/advanced/meta.json @@ -0,0 +1,15 @@ +{ + "title": "Advanced", + "pages": [ + "nextjs", + "ariakit", + "shadcn", + "grid-suggestion-menus", + "code-blocks", + "paste-handling", + "tables", + "custom-schemas", + "vanilla-js", + "..." + ] +} diff --git a/fumadocs/content/docs/advanced/nextjs.mdx b/fumadocs/content/docs/advanced/nextjs.mdx new file mode 100644 index 0000000000..361daad076 --- /dev/null +++ b/fumadocs/content/docs/advanced/nextjs.mdx @@ -0,0 +1,72 @@ +--- +title: Next.js and BlockNote +description: Details on integrating BlockNote with Next.js +imageTitle: Next.js and BlockNote +--- + +# Next.js and BlockNote + +BlockNote is a component that should only be rendered client-side (and not on the server). If you're using Next.js, you need to make sure that Next.js does not try to render BlockNote as a server-side component. + +Make sure to use BlockNote in a [Client Component](https://nextjs.org/docs/getting-started/react-essentials#client-components). You can do this by creating a separate file for your component (**make sure this sits outside of your `pages` or `app` directory, for example `components/Editor.tsx`**), and starting that with `"use client";` [directive](https://react.dev/reference/react/use-client): + +```typescript jsx +"use client"; // this registers as a Client Component +import "@blocknote/core/fonts/inter.css"; +import { useCreateBlockNote } from "@blocknote/react"; +import { BlockNoteView } from "@blocknote/mantine"; +import "@blocknote/mantine/style.css"; + +// Our component we can reuse later +export default function Editor() { + // Creates a new editor instance. + const editor = useCreateBlockNote(); + + // Renders the editor instance using a React component. + return ; +} +``` + +## Import as dynamic + +In the same directory, create a new file called `DynamicEditor.tsx`: +Here, we will use [Dynamic Imports](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) to make sure BlockNote is only imported on the client-side. + +You can import the component we just created above using `next/dynamic` in your page: + +```typescript jsx +"use client"; + +import dynamic from "next/dynamic"; + +export const Editor = dynamic(() => import("./Editor"), { ssr: false }); +``` + +## Import in a page / app + +Now, you can import the dynamic editor in your page or app: + +```typescript jsx +import { Editor } from "../components/DynamicEditor"; + + +function App() { + return ( +
+ +
+ ); +} +``` + +## React 19 / Next 15 StrictMode + +BlockNote is not yet compatible with React 19 / Next 15 StrictMode. For now, disable StrictMode in your `next.config.ts`: + +```typescript +... +reactStrictMode: false, +... +``` + +This should resolve any issues you might run into when embedding BlockNote in your Next.js React app! diff --git a/fumadocs/content/docs/advanced/paste-handling.mdx b/fumadocs/content/docs/advanced/paste-handling.mdx new file mode 100644 index 0000000000..0b428c1a6d --- /dev/null +++ b/fumadocs/content/docs/advanced/paste-handling.mdx @@ -0,0 +1,74 @@ +--- +title: Paste Handling +description: This section explains how to handle paste events in BlockNote. +imageTitle: Paste Handling +--- + + + +# Paste Handling + +BlockNote, by default, attempts to paste content in the following order: + +- VS Code compatible content +- Files +- BlockNote HTML +- Markdown +- HTML +- Plain text + +> In certain cases, BlockNote will attempt to detect markdown in the clipboard and paste that into the editor as rich text. + +You can change the default paste behavior by providing a custom paste handler, which will give you full control over how pasted content is inserted into the editor. + +## `pasteHandler` option + +The `pasteHandler` option is a function that receives the following arguments: + +```ts +type PasteHandler = (context: { + event: ClipboardEvent; + editor: BlockNoteEditor; + defaultPasteHandler: (context?: { + prioritizeMarkdownOverHTML?: boolean; + plainTextAsMarkdown?: boolean; + }) => boolean; +}) => boolean; +``` + +- `event`: The paste event. +- `editor`: The current editor instance. +- `defaultPasteHandler`: The default paste handler. If you only need to customize the paste behavior a little bit, you can fall back on the default paste handler. + +The `defaultPasteHandler` function can be called with the following options: + +- `prioritizeMarkdownOverHTML`: Whether to prioritize Markdown content in `text/plain` over `text/html` when pasting from the clipboard. +- `plainTextAsMarkdown`: Whether to interpret plain text as markdown and paste that as rich text or to paste the text directly into the editor. + + +## Custom Paste Handler + +You can also provide your own paste handler by providing a function to the `pasteHandler` option. + +In this example, we handle the paste event if the clipboard data contains `text/my-custom-format`. If we don't handle the paste event, we call the default paste handler to do the default behavior. + +```ts +const editor = new BlockNoteEditor({ + pasteHandler: ({ event, editor, defaultPasteHandler }) => { + if (event.clipboardData?.types.includes("text/my-custom-format")) { + // You can do any custom logic here, for example you could transform the clipboard data before pasting it + const markdown = customToMarkdown(event.clipboardData.getData("text/my-custom-format")); + + // The editor is able paste markdown (`pasteMarkdown`), HTML (`pasteHTML`), or plain text (`pasteText`) + editor.pasteMarkdown(markdown); + // We handled the paste event, so return true, returning false will cancel the paste event + return true; + } + + // If we didn't handle the paste event, call the default paste handler to do the default behavior + return defaultPasteHandler(); + }, +}); +``` + +See an example of this in the [Custom Paste Handler](/examples/basic/custom-paste-handler) example. \ No newline at end of file diff --git a/fumadocs/content/docs/advanced/shadcn.mdx b/fumadocs/content/docs/advanced/shadcn.mdx new file mode 100644 index 0000000000..c536bbd196 --- /dev/null +++ b/fumadocs/content/docs/advanced/shadcn.mdx @@ -0,0 +1,52 @@ +--- +title: BlockNote with ShadCN and Tailwind +description: ShadCN + Tailwind rich text editor using BlockNote +imageTitle: BlockNote with ShadCN and Tailwind +--- + + + + +## Using ShadCN, Radix and Tailwind with BlockNote + +[shadcn/ui](https://ui.shadcn.com/) is an open-source collection of React components based on [Radix](https://radix-ui.com/) and Tailwind. To use BlockNote with shadcn, you can import `BlockNoteView` from `@blocknote/shadcn` (instead of from `@blocknote/mantine`) and the stylesheet from `@blocknote/shadcn/style.css`. + + + +## ShadCN Customization + +BlockNote comes with default shadcn components. However, it's likely that you have copied and possibly customized your own shadcn components in your project. +To make BlockNote use the ShadCN components from your project instead of the default ones, you can pass them using the `shadCNComponents` prop of `BlockNoteView`: + +```tsx +import * as Button from "@/components/ui/button" +import * as Select from "@/components/ui/select" + +return ( + +); +``` + +You can pass components from the following ShadCN modules: + +- Badge +- Button +- Card +- DropdownMenu +- Form +- Input +- Label +- Popover +- Select +- Tabs +- Toggle +- Tooltip + + + To ensure compatibility, your ShadCN components should not use Portals + (comment these out from your DropdownMenu, Popover and Select components). + diff --git a/fumadocs/content/docs/advanced/tables.mdx b/fumadocs/content/docs/advanced/tables.mdx new file mode 100644 index 0000000000..2dc4a598dc --- /dev/null +++ b/fumadocs/content/docs/advanced/tables.mdx @@ -0,0 +1,88 @@ +--- +title: Advanced Tables +description: How to use more advanced features of tables. +imageTitle: Advanced Tables +--- + +Tables by default are a simple way to display data in a grid. But, BlockNote also supports more advanced features like: + +- Split cells +- Cell background color +- Cell text color +- Header rows & columns + +To keep the default table experience easy to use, these features are disabled by default. + +You can enable them by passing the `tables` option when creating the editor. + +```ts +const editor = new BlockNoteEditor({ + tables: { + splitCells: true, + cellBackgroundColor: true, + cellTextColor: true, + headers: true, + }, +}); +``` + +You can choose to enable only certain features, or none at all. Giving you the flexibility to use tables how you need in your app. + +Here's an example of the editor with all features enabled: + + + +## Cell background color + +To enable cell background color, you need to pass `cellBackgroundColor: true` to the `tables` option. + +```ts +const editor = new BlockNoteEditor({ + tables: { + cellBackgroundColor: true, + }, +}); +``` + +## Cell text color + +To enable cell text color, you need to pass `cellTextColor: true` to the `tables` option. + +```ts +const editor = new BlockNoteEditor({ + tables: { + cellTextColor: true, + }, +}); +``` + + +## Header rows & columns + +BlockNote supports headers in tables, which are the first row and/or first column of a table. + +To enable it, you need to pass `headers: true` to the `tables` option. + +```ts +const editor = new BlockNoteEditor({ + tables: { + headers: true, + }, +}); +``` + +## Split cells + +Splitting and merging cells is a common feature of more advanced table editors. + +To enable it, you need to pass `splitCells: true` to the `tables` option. + +```ts +const editor = new BlockNoteEditor({ + tables: { + splitCells: true, + }, +}); +``` + + diff --git a/fumadocs/content/docs/advanced/vanilla-js.mdx b/fumadocs/content/docs/advanced/vanilla-js.mdx new file mode 100644 index 0000000000..2bfd47c4fa --- /dev/null +++ b/fumadocs/content/docs/advanced/vanilla-js.mdx @@ -0,0 +1,122 @@ +--- +title: Usage Without React (Vanilla JS) +description: BlockNote is mainly designed as a quick and easy drop-in block-based editor for React apps, but can also be used in vanilla JavaScript apps. +imageTitle: Usage Without React (Vanilla JS) +--- + +# Usage Without React (Vanilla JS) + +BlockNote is mainly designed as a quick and easy drop-in block-based editor for React apps, but can also be used in vanilla JavaScript apps. However, this does involve writing your own UI elements. + + + We recommend using BlockNote with React so you can use the built-in UI + components. This document will explain how you can use BlockNote without + React, and write your own components, but this is not recommended as you'll + lose the great out-of-the-box experience that BlockNote offers. + + +## Installing with NPM + +To install only the vanilla JS parts of BlockNote with [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), run: + +```console +npm install @blocknote/core +``` + +## Creating an editor + +This is how to create a new BlockNote editor: + +```typescript +import { BlockNoteEditor } from "@blocknote/core"; + +const editor = BlockNoteEditor.create(); + +editor.mount(document.getElementById("root")); // element to append the editor to +``` + +Now, you'll have a plain BlockNote instance on your page. However, it's missing some menus and other UI elements. + +## Creating your own UI elements + +Because you can't use the built-in React [UI Components](/docs/quickstart), you'll need to create and register your own UI elements. + +While it's up to you to decide how you want the elements to be rendered, BlockNote provides methods for updating the visibility, position, and state of your elements: + +```typescript +type UIElement = + | "formattingToolbar" + | "linkToolbar" + | "filePanel" + | "sideMenu" + | "suggestionMenu" + | "tableHandles" + +const uiElement: UIElement = ...; + +editor[uiElement].onUpdate((uiElementState: ...) => { + ...; +}) +``` + +Let's look at how you could add the [Side Menu]() to your editor: + +```typescript +import { BlockNoteEditor } from "@blocknote/core"; + +const editor = BlockNoteEditor.create({ + element: document.getElementById("root")!, +}); + +export function createButton(text: string, onClick?: () => void) { + const element = document.createElement("a"); + element.href = "#"; + element.text = text; + element.style.margin = "10px"; + + if (onClick) { + element.addEventListener("click", (e) => { + onClick(); + e.preventDefault(); + }); + } + + return element; +} + +let element: HTMLElement; + +editor.sideMenu.onUpdate((sideMenuState) => { + if (!element) { + element = document.createElement("div"); + element.style.background = "gray"; + element.style.position = "absolute"; + element.style.padding = "10px"; + element.style.opacity = "0.8"; + const addBtn = createButton("+", () => { + editor.sideMenu.addBlock(); + }); + element.appendChild(addBtn); + + const dragBtn = createButton("::", () => {}); + + dragBtn.addEventListener("dragstart", editor.sideMenu.blockDragStart); + dragBtn.addEventListener("dragend", editor.sideMenu.blockDragEnd); + dragBtn.draggable = true; + element.style.display = "none"; + element.appendChild(dragBtn); + + document.getElementById("root")!.appendChild(element); + } + + if (sideMenuState.show) { + element.style.display = "block"; + + element.style.top = sideMenuState.referencePos.top + "px"; + element.style.left = + sideMenuState.referencePos.x - element.offsetWidth + "px"; + } else { + element.style.display = "none"; + } +}); +``` diff --git a/fumadocs/content/docs/collaboration/comments.mdx b/fumadocs/content/docs/collaboration/comments.mdx new file mode 100644 index 0000000000..803611e3df --- /dev/null +++ b/fumadocs/content/docs/collaboration/comments.mdx @@ -0,0 +1,162 @@ +--- +title: Comments +description: Learn how to enable comments in your BlockNote editor +imageTitle: Comments +--- + +import {Example} from "@/components/example"; + +# Comments + +BlockNote supports Comments, Comment Threads (replies) and emoji reactions out of the box. + +To enable comments in your editor, you need to: + +- provide a `resolveUsers` so BlockNote can retrieve and display user information (names and avatars). +- provide a `ThreadStore` so BlockNote can store and retrieve comment threads. +- enable real-time collaboration (see [Real-time collaboration](/docs/collaboration/real-time-collaboration)) + +```tsx +const editor = useCreateBlockNote({ + resolveUsers: async (userIds: string[]) => { + // return user information for the given userIds (see below) + }, + comments: { + threadStore: yourThreadStore, // see below + }, + // ... + collaboration: { + // ... // see real-time collaboration docs + }, +}); +``` + +**Demo** + + + +## ThreadStores + +A ThreadStore is used to store and retrieve comment threads. BlockNote is backend agnostic, so you can use any database or backend to store the threads. +BlockNote comes with several built-in ThreadStore implementations: + +### `YjsThreadStore` + +The `YjsThreadStore` provides direct Yjs-based storage for comments, storing thread data directly in the Yjs document. This implementation is ideal for simple collaborative setups where all users have write access to the document. + +```tsx +import { YjsThreadStore } from "@blocknote/core/comments"; + +const threadStore = new YjsThreadStore( + userId, // The active user's ID + yDoc.getMap("threads"), // Y.Map to store threads + new DefaultThreadStoreAuth(userId, "editor"), // Authorization information, see below +); +``` + +_Note: While this is the easiest to implement, it requires users to have write access to the Yjs document to leave comments. Also, without proper server-side validation, any user could technically modify other users' comments._ + +### `RESTYjsThreadStore` + +The `RESTYjsThreadStore` combines Yjs storage with a REST API backend, providing secure comment management while maintaining real-time collaboration. This implementation is ideal when you have strong authentication requirements, but is a little more work to set up. + +In this implementation, data is written to the Yjs document via a REST API which can handle access control. Data is still retrieved from the Yjs document directly (after it's been updated by the REST API), this way all comment information automatically syncs between clients using the existing collaboration provider. + +```tsx +import { + RESTYjsThreadStore, + DefaultThreadStoreAuth, +} from "@blocknote/core/comments"; + +const threadStore = new RESTYjsThreadStore( + "https://api.example.com/comments", // Base URL for the REST API + { + Authorization: "Bearer your-token", // Optional headers to add to requests + }, + yDoc.getMap("threads"), // Y.Map to retrieve commend data from + new DefaultThreadStoreAuth(userId, "editor"), // Authorization rules (see below) +); +``` + +An example implementation of the REST API can be found in the [example repository](https://github.com/TypeCellOS/BlockNote-demo-nextjs-hocuspocus). + +_Note: Because writes are executed via a REST API, the `RESTYjsThreadStore` is not suitable for local-first applications that should be able to add and edit comments offline._ + +### `TiptapThreadStore` + +The `TiptapThreadStore` integrates with Tiptap's collaboration provider for comment management. This implementation is designed specifically for use with Tiptap's collaborative editing features. + +```tsx +import { + TiptapThreadStore, + DefaultThreadStoreAuth, +} from "@blocknote/core/comments"; +import { TiptapCollabProvider } from "@hocuspocus/provider"; + +// Create a TiptapCollabProvider (you probably have this already) +const provider = new TiptapCollabProvider({ + name: "test", + baseUrl: "https://collab.yourdomain.com", + appId: "test", + document: doc, +}); + +// Create a TiptapThreadStore +const threadStore = new TiptapThreadStore( + userId, // The active user's ID + provider, // Tiptap collaboration provider + new DefaultThreadStoreAuth(userId, "editor"), // Authorization rules (see below) +); +``` + +### ThreadStoreAuth + +The `ThreadStoreAuth` class defines the authorization rules for interacting with comments. Every ThreadStore implementation requires a `ThreadStoreAuth` instance. BlockNote uses the `ThreadStoreAuth` instance to deterine which interactions are allowed for the current user (for example, whether they can create a new comment, edit or delete a comment, etc.). + +The `DefaultThreadStoreAuth` class provides a basic implementation of the `ThreadStoreAuth` class. It takes a user ID and a role ("comment" or "editor") and implements the rules. See the [source code](https://github.com/TypeCellOS/BlockNote/blob/main/packages/core/src/comments/threadstore/DefaultThreadStoreAuth.ts) for more details. + +_Note: The `ThreadStoreAuth` only used to show / hide options in the UI. To secure comment related data, you still need to implement your own server-side validation (e.g. using `RESTYjsThreadStore` and a secure REST API)._ + +## `resolveUsers` function + +When a user interacts with a comment, the data is stored in the ThreadStore, along with the active user ID (as specified when initiating the ThreadStore). + +To display comments, BlockNote needs to retrieve user information (such as the username and avatar) based on the user ID. To do this, you need to provide a `resolveUsers` function in the editor options. + +This function is called with an array of user IDs, and should return an array of `User` objects in the same order. + +```tsx +type User = { + id: string; + username: string; + avatarUrl: string; +}; + +async function myResolveUsers(userIds: string[]): Promise { + // fetch user information from your database / backend + // and return an array of User objects + + return await callYourBackend(userIds); + + // Return a list of users + return users; +} +``` + +## Sidebar View + +BlockNote also offers a different way of viewing and interacting with comments, via a sidebar instead of floating in the editor, using the `ThreadsSidebar` component: + + + +The only requirement for `ThreadsSidebar` is that it should be placed somewhere within your `BlockNoteView`, other than that you can position and style it however you want. + +`ThreadsSidebar` also takes 2 props: + +**`filter`**: Filter the comments in the sidebar. Can pass `"open"`, `"resolved"`, or `"all"`, to only show open, resolved, or all comments. Defaults to `"all"`. + +**`sort`**: Sort the comments in the sidebar. Can pass `"position"`, `"recent-activity"`, or `"oldest"`. Sorting by `"recent-activity"` uses the most recently added comment to sort threads, while `"oldest"` uses the thread creation date. Sorting by `"position"` puts comments in the same order as their reference text in the editor. Defaults to `"position"`. + +**`maxCommentsBeforeCollapse`**: The maximum number of comments that can be in a thread before the replies get collapsed. Defaults to 5. + +See [here](https://playground.blocknotejs.org/collaboration/comments-with-sidebar?hideMenu=true) for a standalone example of the `ThreadsSidebar` component. diff --git a/fumadocs/content/docs/collaboration/index.mdx b/fumadocs/content/docs/collaboration/index.mdx new file mode 100644 index 0000000000..a10e7d34e2 --- /dev/null +++ b/fumadocs/content/docs/collaboration/index.mdx @@ -0,0 +1,8 @@ +--- +title: Collaboration +description: Learn how to create multiplayer experiences with BlockNote +--- + +BlockNote supports multi-user collaborative document editing. + + diff --git a/fumadocs/content/docs/collaboration/meta.json b/fumadocs/content/docs/collaboration/meta.json new file mode 100644 index 0000000000..ed0a0329eb --- /dev/null +++ b/fumadocs/content/docs/collaboration/meta.json @@ -0,0 +1,4 @@ +{ + "title": "Collaboration", + "pages": ["real-time-collaboration", "comments"] +} diff --git a/fumadocs/content/docs/collaboration/real-time-collaboration.mdx b/fumadocs/content/docs/collaboration/real-time-collaboration.mdx new file mode 100644 index 0000000000..9e3e1ff696 --- /dev/null +++ b/fumadocs/content/docs/collaboration/real-time-collaboration.mdx @@ -0,0 +1,191 @@ +--- +title: Real-time Collaboration +description: Let's see how you can add Multiplayer capabilities to your BlockNote setup, and allow real-time collaboration between users (similar to Google Docs) +imageTitle: Real-time Collaboration +--- + + + +# Real-time Collaboration (multiplayer text editor) + +Let's see how you can add Multiplayer capabilities to your BlockNote setup, and allow real-time collaboration between users (similar to Google Docs): + + + +_Try the live demo on the [homepage](https://www.blocknotejs.org)_ + +BlockNote uses [Yjs](https://github.com/yjs/yjs) for this, and you can set it up with the `collaboration` option: + +```typescript +import * as Y from "yjs"; +import { WebrtcProvider } from "y-webrtc"; +// ... + +const doc = new Y.Doc(); + +const provider = new WebrtcProvider("my-document-id", doc); // setup a yjs provider (explained below) +const editor = useCreateBlockNote({ + // ... + collaboration: { + // The Yjs Provider responsible for transporting updates: + provider, + // Where to store BlockNote data in the Y.Doc: + fragment: doc.getXmlFragment("document-store"), + // Information (name and color) for this user: + user: { + name: "My Username", + color: "#ff0000", + }, + // When to show user labels on the collaboration cursor. Set by default to + // "activity" (show when the cursor moves), but can also be set to "always". + showCursorLabels: "activity" + }, + // ... +}); +``` + +## Yjs Providers + +When a user edits the document, an incremental change (or "update") is captured and can be shared between users of your app. You can share these updates by setting up a _Yjs Provider_. In the snipped above, we use [y-webrtc](https://github.com/yjs/y-webrtc) which shares updates over WebRTC (and BroadcastChannel), but you might be interested in different providers for production-ready use cases. + +- [Liveblocks](https://liveblocks.io/yjs) A fully hosted WebSocket infrastructure and persisted data store for Yjs documents. Includes webhooks, REST API, and browser DevTools, all for Yjs +- [PartyKit](https://www.partykit.io/) A serverless provider that runs on Cloudflare +- [Y-Sweet](https://jamsocket.com/y-sweet) An open-source provider that runs fully managed on [Jamsocket](https://jamsocket.com) or self-hosted in your own cloud +- [Hocuspocus](https://www.hocuspocus.dev/) open source and extensible Node.js server with pluggable storage (scales with Redis) +- [y-websocket](https://github.com/yjs/y-websocket) provider that you can connect to your own websocket server +- [y-indexeddb](https://github.com/yjs/y-indexeddb) for offline storage +- [y-webrtc](https://github.com/yjs/y-webrtc) transmits updates over WebRTC +- [Matrix-CRDT](https://github.com/yousefED/matrix-crdt) syncs updates over Matrix (experimental) +- [Nostr-CRDT](https://github.com/yousefED/nostr-crdt) syncs updates over Nostr (experimental) + +## Liveblocks + +Liveblocks provides a hosted back-end for Yjs. You can create a fully-featured example project which uses Liveblocks with BlockNote by running the command below (you will need a Liveblocks account for this): + +```shell +npx create-liveblocks-app@latest --example nextjs-blocknote --api-key +``` + +