docs: Fixes after fumadocs migration (#1888)

* Added comment

* Added TODOs for docs

* Fixed TODOs

* Updated package lock

* docs: Add docs for props without default values (#1895)

* Added docs for props without default values

* Small rewording

Author: matthewlipski

docs/app/layout.config.tsx

@@ -96,15 +96,15 @@ export const baseOptions: Partial<DocsLayoutProps & HomeLayoutProps> = {
     tabs: [
       {
         icon: (
-          <FaBook className="border-fd-primary text-fd-primary bg-fd-primary/10 h-5 w-5 rounded-sm border p-0.5" />
+          <FaBook className="border-fd-primary text-fd-primary bg-fd-primary/10 h-full w-full rounded-sm border p-2 md:p-0.5" />
         ),
         title: "Documentation",
         description: "Learn how to use BlockNote",
         url: "/docs",
       },
       {
         icon: (
-          <FaCode className="border-fd-primary text-fd-primary bg-fd-primary/10 h-5 w-5 rounded-sm border p-0.5" />
+          <FaCode className="border-fd-primary text-fd-primary bg-fd-primary/10 h-full w-full rounded-sm border p-2 md:p-0.5" />
         ),
         title: "Examples",
         description: "See BlockNote in action",

docs/app/styles.css

@@ -64,7 +64,7 @@ body {
   padding-block: 1rem;
 }
 
-.demo-contents a {
+.demo .bn-editor a {
   color: revert;
   text-decoration: revert;
 }

docs/components/CustomDocsLayout.tsx

@@ -100,7 +100,7 @@ export function CustomDocsLayout({
       <Sidebar
         {...sidebarProps}
         collapsible={sidebarCollapsible}
-        className="md:sticky md:top-[calc(var(--fd-sidebar-top)+32px)] md:h-[calc(100vh-var(--fd-sidebar-top))]"
+        className="md:sticky md:top-[calc(var(--fd-sidebar-top)+32px)] md:h-[calc(100vh-var(--fd-sidebar-top)-32px)]"
       >
         <HideIfEmpty>
           <SidebarHeader className="data-[empty=true]:hidden">

docs/content/docs/features/blocks/code-blocks.mdx

@@ -8,8 +8,6 @@ imageTitle: Code Blocks
 
 Code blocks are a simple way to display formatted code with syntax highlighting.
 
-<Example name="theming/code-block" />
-
 Code blocks by default are a simple way to display code. But, BlockNote also supports more advanced features like:
 
 - Syntax highlighting

docs/content/docs/features/blocks/embeds.mdx

@@ -8,52 +8,60 @@ imageTitle: Embeds
 
 Embeds are a way to display content from external sources in your documents. BlockNote supports various embeds to help you structure and format your content effectively.
 
-## Image
+## File
 
-An image block is a block that displays an image.
+A file block is a block that displays a file.
 
 **Type & Props**
 
-```typescript
-type ImageBlock = {
+```ts
+type FileBlock = {
   id: string;
-  type: "image";
+  type: "file";
   props: {
+    name: string = "";
     url: string = "";
     caption: string = "";
-    previewWidth: number = 512;
   } & DefaultProps;
   content: undefined;
   children: Block[];
 };
 ```
 
-`url:` The image URL.
+`name:` The file name.
 
-`caption:` The image caption.
+`url:` The file URL.
 
-`previewWidth:` The image previewWidth in pixels.
+`caption:` The file caption.
 
-## File
+## Image
 
-A file block is a block that displays a file.
+An image block is a block that displays an image.
 
 **Type & Props**
 
-```ts
-type FileBlock = {
+```typescript
+type ImageBlock = {
   id: string;
-  type: "file";
+  type: "image";
   props: {
-    name: string = "";
     url: string = "";
     caption: string = "";
+    previewWidth: number = 512;
   } & DefaultProps;
   content: undefined;
   children: Block[];
 };
 ```
 
+`name:` The image name.
+
+`url:` The image URL.
+
+`caption:` The image caption.
+
+`previewWidth:` The image previewWidth in pixels.
+
 ## Video
 
 A video block is a block that displays a video.

docs/content/docs/features/blocks/list-types.mdx

@@ -6,14 +6,7 @@ imageTitle: List Types
 
 # List Item Blocks
 
-BlockNote supports several built-in list types:
-
-- Numbered List
-- Bullet List
-- Check List
-- Toggle List
-
-<Example name="basic/default-blocks" />
+List item blocks are used to create different types of lists in your documents. BlockNote supports various list item blocks to help you structure and format your content effectively.
 
 ### Bullet List Item
 
@@ -41,12 +34,16 @@ A numbered list item is a list item that is numbered.
 type NumberedListItemBlock = {
   id: string;
   type: "numberedListItem";
-  props: DefaultProps;
+  props: DefaultProps & {
+    start?: number;
+  };
   content: InlineContent[];
   children: Block[];
 };
 ```
 
+`start:` The number of this list item. If not provided, it defaults to `1`, or is incremented from the previous item.
+
 ### Check List Item
 
 A check list item is a list item that can be checked or unchecked.
@@ -65,6 +62,8 @@ type CheckListItemBlock = {
 };
 ```
 
+`checked:` Whether the list item is checked or not.
+
 ### Toggle List Item
 
 A toggle list item is a list item that can show or hide it's children.

docs/content/docs/features/blocks/tables.mdx

@@ -8,8 +8,6 @@ imageTitle: Tables
 
 Tables are a simple way to display data in a grid.
 
-<Example name="ui-components/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

docs/content/docs/features/blocks/typography.mdx

@@ -8,8 +8,6 @@ imageTitle: Typography
 
 Typography blocks are fundamental elements for displaying text content in your documents. BlockNote supports various typography blocks to help you structure and format your content effectively.
 
-<Example name="basic/default-blocks" />
-
 ## Paragraph
 
 **Type & Props**

docs/content/docs/features/custom-schemas/custom-blocks.mdx

@@ -59,45 +59,56 @@ type BlockConfig = {
 };
 ```
 
-**`type`**
+`type:` Defines the identifier of the custom block.
 
-Defines the identifier of the custom block.
+`content:` `inline` if your custom block should support rich text content, `none` if not.
 
-**`content`**
+<Callout type="info">
+  _In the alert demo, we want the user to be able to type text in our alert, so
+  we set `content` to `"inline"`._
+</Callout>
 
-`inline` if your custom block should support rich text content, `none` if not.
-
-_In the alert demo, we want the user to be able to type text in our alert, so we set it to `"inline"`._
-
-**`propSchema`**
-
-The `PropSchema` specifies the props that the block supports. Block props (properties) are data stored with your Block in the document, and can be used to customize its appearance or behavior.
+`propSchema:` The `PropSchema` specifies the props that the block supports. Block props (properties) are data stored with your Block in the document, and can be used to customize its appearance or behavior.
 
 ```typescript
 type PropSchema<PrimitiveType extends "boolean" | "number" | "string"> = Record<
   string,
-  {
-    default: PrimitiveType;
-    values?: PrimitiveType[];
-  }
+  | {
+      default: PrimitiveType;
+      values?: PrimitiveType[];
+    }
+  | {
+      default: undefined;
+      type: PrimitiveType;
+      values?: PrimitiveType[];
+    }
 >;
 ```
 
-`[key: string]` is the name of the prop, and the value is an object with two fields:
+`[key: string]` is the name of the prop. If you want it to have a default value, it should be defined as an object with the following properties:
 
-- `default`: Specifies the prop's default value
+- `default:` Specifies the prop's default value, from which `PrimitiveType` is inferred.
 
-- `values` (optional): Specifies an array of values that the prop can take, for example, to limit the value to a list of pre-defined strings. If `values` is not defined, BlockNote assumes the prop can be any value of `PrimitiveType`
+- `values?:` Specifies an array of values that the prop can take, for example, to limit the value to a list of pre-defined strings. If `values` is not defined, BlockNote assumes the prop can be any value of `PrimitiveType`.
 
-_In the alert demo, we add a `type` prop for the type of alert that we want (warning / error / info / success). We also want basic styling options, so we add text alignment and text color from the [Default Block Properties](/docs/features/blocks#default-block-properties)._
+If you do not want the prop to have a default value, you can define it as an object with the following properties:
 
-**`isSelectable`**
+- `default:` Left `undefined`, as there is no default value.
 
-Can be set to false in order to make the block non-selectable, both using the mouse and keyboard. This also helps with being able to select non-editable content within the block. Should only be set to false when `content` is `none` and defaults to true.
+- `type:` Specifies `PrimitiveType` that the prop can be set to, since the default value is `undefined` and cannot be inferred from.
 
-**`hardBreakShortcut`**
+- `values?:` Specifies an array of values that the prop can take, for example, to limit the value to a list of pre-defined strings. If `values` is not defined, BlockNote assumes the prop can be any value of `PrimitiveType`.
 
-Defines which keyboard shortcut should be used to insert a hard break into the block's inline content. Defaults to `"shift+enter"`.
+<Callout type="info">
+  _In the alert demo, we add a `type` prop for the type of alert that we want
+  (warning / error / info / success). We also want basic styling options, so we
+  add text alignment and text color from the [Default Block
+  Properties](/docs/features/blocks#default-block-properties)._
+</Callout>
+
+`isSelectable?:` Can be set to false in order to make the block non-selectable, both using the mouse and keyboard. This also helps with being able to select non-editable content within the block. Should only be set to false when `content` is `none` and defaults to true.
+
+`hardBreakShortcut?:` Defines which keyboard shortcut should be used to insert a hard break into the block's inline content. Defaults to `"shift+enter"`.
 
 #### File Block Config
 
@@ -121,27 +132,25 @@ type ReactCustomBlockImplementation = {
 };
 ```
 
-**`render`**
-
-This is your React component which defines how your custom block should be rendered in the editor, and takes three React props:
-
-`block:` The block that should be rendered. Its type and props will match the type and PropSchema defined in the Block Config.
-
-`editor:` The BlockNote editor instance that the block is in.
+`render:` This is your React component which defines how your custom block should be rendered in the editor, and takes three React props:
 
-`contentRef:` A React `ref` you can use to mark which element in your block is editable, this is only available if your block config contains `content: "inline"`.
+- `block:` The block that should be rendered. Its type and props will match the type and PropSchema defined in the Block Config.
 
-**`toExternalHTML`** (optional)
+- `editor:` The BlockNote editor instance that the block is in.
 
-This component is used whenever the block is being exported to HTML for use outside BlockNote, for example when copying it to the clipboard. If it's not defined, BlockNote will just use `render` for the HTML conversion.
+- `contentRef:` A React `ref` you can use to mark which element in your block is editable, this is only available if your block config contains `content: "inline"`.
 
-_Note that your component passed to `toExternalHTML` is rendered and serialized in a separate React root, which means you can't use hooks that rely on React Contexts._
+`toExternalHTML?:` This component is used whenever the block is being exported to HTML for use outside BlockNote, for example when copying it to the clipboard. If it's not defined, BlockNote will just use `render` for the HTML conversion. Takes the same props as `render`.
 
-**`parse`** (optional)
+<Callout type="info">
+  _Note that your component passed to `toExternalHTML` is rendered and
+  serialized in a separate React root, which means you can't use hooks that rely
+  on React Contexts._
+</Callout>
 
-The `parse` function defines how to parse HTML content into your block, for example when pasting contents from the clipboard. If the element should be parsed into your custom block, you return the props that the block should be given. Otherwise, return `undefined`.
+`parse?:` The `parse` function defines how to parse HTML content into your block, for example when pasting contents from the clipboard. If the element should be parsed into your custom block, you return the props that the block should be given. Otherwise, return `undefined`. Takes a single argument:
 
-`element`: The HTML element that's being parsed.
+- `element`: The HTML element that's being parsed.
 
 ## Adding Custom Blocks to the Editor
 

docs/content/docs/features/custom-schemas/custom-inline-content.mdx

@@ -55,37 +55,52 @@ type CustomInlineContentConfig = {
 };
 ```
 
-**`type`**
+`type:` Defines the identifier of the custom inline content.
 
-Defines the identifier of the custom inline content.
+`content:` `styled` if your custom inline content should contain [`StyledText`](/docs/foundations/document-structure#inline-content-objects), `none` if not.
 
-**`content`**
+<Callout type="info">
+  _In the mentions demo, we want each mention to be a single, non-editable
+  element, so we set `content` to `"none"`._
+</Callout>
 
-`styled` if your custom inline content should contain [`StyledText`](/docs/foundations/document-structure#inline-content-objects), `none` if not.
-
-_In the mentions demo, we want each mention to be a single, non-editable element, so we set it to `"none"`._
-
-**`propSchema`**
-
-The `PropSchema` specifies the props that the inline content supports. Inline content props (properties) are data stored with your inline content in the document, and can be used to customize its appearance or behavior.
+`propSchema:` The `PropSchema` specifies the props that the inline content supports. Inline content props (properties) are data stored with your inline content in the document, and can be used to customize its appearance or behavior.
 
 ```typescript
 type PropSchema<PrimitiveType extends "boolean" | "number" | "string"> = Record<
   string,
-  {
-    default: PrimitiveType;
-    values?: PrimitiveType[];
-  }
+  | {
+      default: PrimitiveType;
+      values?: PrimitiveType[];
+    }
+  | {
+      default: undefined;
+      type: PrimitiveType;
+      values?: PrimitiveType[];
+    }
 >;
 ```
 
-`[key: string]` is the name of the prop, and the value is an object with two fields:
+`[key: string]` is the name of the prop. If you want it to have a default value, it should be defined as an object with the following properties:
+
+- `default:` Specifies the prop's default value, from which `PrimitiveType` is inferred.
 
-- `default`: Specifies the prop's default value
+- `values?:` Specifies an array of values that the prop can take, for example, to limit the value to a list of pre-defined strings. If `values` is not defined, BlockNote assumes the prop can be any value of `PrimitiveType`.
 
-- `values` (optional): Specifies an array of values that the prop can take, for example, to limit the value to a list of pre-defined strings. If `values` is not defined, BlockNote assumes the prop can be any value of `PrimitiveType`
+If you do not want the prop to have a default value, you can define it as an object with the following properties:
 
-_In the mentions demo, we add a `user` prop for the user that's being mentioned._
+- `default:` Left `undefined`, as there is no default value.
+
+- `type:` Specifies `PrimitiveType` that the prop can be set to, since the default value is `undefined` and cannot be inferred from.
+
+- `values?:` Specifies an array of values that the prop can take, for example, to limit the value to a list of pre-defined strings. If `values` is not defined, BlockNote assumes the prop can be any value of `PrimitiveType`.
+
+<Callout type="info">
+  _In the mentions demo, we add a `user` prop for the user that's being
+  mentioned._
+</Callout>
+
+`draggable?:` Whether the inline content should be draggable.
 
 ### Inline Content Implementation (`ReactCustomInlineContentImplementation`)
 
@@ -101,17 +116,18 @@ type ReactCustomInlineContentImplementation = {
 };
 ```
 
-**`render`**
-
-This is your React component which defines how your custom inline content should be rendered, and takes three React props:
+`render:` This is your React component which defines how your custom inline content should be rendered, and takes three React props:
 
-`inlineContent:` The inline content that should be rendered. Its type and props will match the type and PropSchema defined in the Inline Content Config.
+- `inlineContent:` The inline content that should be rendered. Its type and props will match the type and PropSchema defined in the Inline Content Config.
 
-`contentRef:` A React `ref` you can use to mark which element in your inline content is editable, this is only available if your inline content config contains `content: "styled"`.
+- `contentRef:` A React `ref` you can use to mark which element in your inline content is editable, this is only available if your inline content config contains `content: "styled"`.
 
-`draggable:` Specifies whether the inline content can be dragged within the editor. If set to `true`, the inline content will be draggable. Defaults to `false` if not specified. If this is true, you should add `data-drag-handle` to the DOM element that should function as the drag handle.
+- `draggable:` Specifies whether the inline content can be dragged within the editor. If set to `true`, the inline content will be draggable. Defaults to `false` if not specified. If this is true, you should add `data-drag-handle` to the DOM element that should function as the drag handle.
 
-_Note that since inline content is, by definition, inline, your component should also return an HTML inline element._
+<Callout type="info">
+  _Note that since inline content is, by definition, inline, your component
+  should also return an HTML inline element._
+</Callout>
 
 ## Adding Custom Inline Content to the Editor