feat: fumadocs

Author: nperez0111

examples/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ["../.eslintrc.js"],
+  rules: {
+    "import/extensions": "off",
+  },
+};

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.

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.

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.

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`

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}

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,
-            <FileReplaceButton key={"fileReplaceButton"} />
+            <FileReplaceButton key={"fileReplaceButton"} />,
           );
 
           return <FormattingToolbar {...props}>{items}</FormattingToolbar>;

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

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}

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:

examples/03-ui-components/13-custom-ui/src/MUISideMenu.tsx

@@ -11,7 +11,7 @@ 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:

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

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.

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.

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.

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.

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"];
 

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.

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,
           )
         }
       />

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));

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";
 

examples/07-collaboration/02-liveblocks/src/Editor.tsx

@@ -4,7 +4,7 @@ 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(

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 (

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 (

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.

fumadocs/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "import/extensions": 0
+  }
+}

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/