Fixed docs (#379)

Author: matthewlipski

packages/react/src/BlockNoteTheme.ts

@@ -39,6 +39,10 @@ export type ComponentStyles = Partial<{
   // Menu to edit hyperlinks (in Formatting Toolbar & Hyperlink Toolbar)
   EditHyperlinkMenu: CSSObject;
   Editor: CSSObject;
+  // Used in the Image Toolbar
+  FileInput: CSSObject;
+  Tabs: CSSObject;
+  TextInput: CSSObject;
   // Wraps Formatting Toolbar & Hyperlink Toolbar
   Toolbar: CSSObject;
   // Appears on hover for Formatting Toolbar
@@ -129,10 +133,13 @@ export const blockNoteToMantineTheme = (theme: Theme): MantineThemeOverride => {
       },
       Tabs: {
         styles: () => ({
-          root: {
-            width: "100%",
-            backgroundColor: theme.colors.menu.background,
-          },
+          root: _.merge<CSSObject, CSSObject>(
+            {
+              width: "100%",
+              backgroundColor: theme.colors.menu.background,
+            },
+            theme.componentStyles?.(theme).Tabs || {}
+          ),
           tabsList: {
             borderColor: theme.colors.hovered.background,
           },
@@ -166,6 +173,7 @@ export const blockNoteToMantineTheme = (theme: Theme): MantineThemeOverride => {
       },
       FileInput: {
         styles: () => ({
+          root: theme.componentStyles?.(theme).FileInput || {},
           input: {
             color: theme.colors.menu.text,
             backgroundColor: theme.colors.menu.background,
@@ -191,6 +199,7 @@ export const blockNoteToMantineTheme = (theme: Theme): MantineThemeOverride => {
       },
       TextInput: {
         styles: () => ({
+          root: theme.componentStyles?.(theme).TextInput || {},
           input: {
             color: theme.colors.menu.text,
             backgroundColor: theme.colors.menu.background,

packages/website/docs/docs/block-types.md

@@ -262,7 +262,7 @@ img {
 ::: info
 While custom blocks open a lot of doors for what you can do with BlockNote, we're still working on the API and there are a few limitations for the kinds of blocks you can create.
 
-We'd love to hear your feedback on Github or in our Discord community!
+We'd love to hear your feedback on GitHub or in our Discord community!
 :::
 
 ### Creating a Custom Block Type

packages/website/docs/docs/image-toolbar.md

@@ -35,15 +35,18 @@ You can use the provided `uploadToTempFilesOrg` function to as a starting point,
 ::: sandbox {template=react-ts}
 
 ```typescript-vue /App.tsx
-import { BlockNoteEditor, uploadToTmpFilesOrg } from "@blocknote/core";
+import {
+  BlockNoteEditor,
+  uploadToTmpFilesDotOrg_DEV_ONLY,
+} from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/core/style.css";
 
 export default function App() {
   // Creates a new editor instance.
   const editor: BlockNoteEditor = useBlockNote({
     // Sets the example file upload handler.
-    uploadFile: uploadToTmpFilesOrg,
+    uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
   });
 
   return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;

packages/website/docs/docs/slash-menu.md

@@ -77,7 +77,6 @@ export default function App() {
   // Renders the editor instance.
   return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;
 }
-
 ```
 
 ```css-vue /styles.css [hidden]

packages/website/docs/docs/theming.md

@@ -37,7 +37,6 @@ import "@blocknote/core/style.css";
 
 // Custom red light theme
 const lightRedTheme = {
-  type: "light",
   colors: {
     editor: {
       text: "#222222",
@@ -75,7 +74,6 @@ const lightRedTheme = {
 // Custom red dark theme
 const darkRedTheme = {
   ...lightRedTheme,
-  type: "dark",
   colors: {
     ...lightRedTheme.colors,
     editor: {
@@ -247,6 +245,12 @@ There are a number of components that you can override styles for:
 
 `Editor:` The editor itself, excluding menus & toolbars.
 
+`FileInput:` Component used for file inputs in the Image Toolbar.
+
+`Tabs:` Component used for tabs in the Image Toolbar.
+
+`TextInput:` Component used for text inputs in the Image Toolbar.
+
 `Toolbar:` Component used for the [Formatting Toolbar](/docs/formatting-toolbar), Hyperlink Toolbar, and [Image Toolbar](/docs/image-toolbar).
 
 `Tooltip:` Component for the tooltip that appears on hover, for Formatting Toolbar & Hyperlink Toolbar buttons.

packages/website/docs/docs/ui-elements.md

@@ -116,7 +116,7 @@ export default function App() {
 
   // Renders the editor instance.
   return (
-    <BlockNoteView editor={editor} theme={"light"}>
+    <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"}>
       <FormattingToolbarPositioner editor={editor} />
       <HyperlinkToolbarPositioner editor={editor} />
       <SlashMenuPositioner editor={editor} />

packages/website/docs/examples/alert-block.md

@@ -46,12 +46,10 @@ import { RiAlertFill } from "react-icons/ri";
 
 import { createAlertBlock, insertAlert } from "./Alert";
 
-const theme = "light";
-
 // The custom schema, including all default blocks and the custom Alert block
 export const schemaWithAlert = {
   ...defaultBlockSchema,
-  alert: createAlertBlock(theme),
+  alert: createAlertBlock("{{ getTheme(isDark) }}"),
 };
 
 export default function App() {
@@ -64,7 +62,7 @@ export default function App() {
   });
 
   return (
-    <BlockNoteView editor={editor} theme={theme}>
+    <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"}>
       {/*Adds alert item to block type dropdown in the Formatting Toolbar*/}
       <FormattingToolbarPositioner
         editor={editor}
@@ -107,7 +105,6 @@ import {
   InlineContent,
   ReactSlashMenuItem,
 } from "@blocknote/react";
-import { useState } from "react";
 import { RiAlertFill } from "react-icons/ri";
 import { MdCancel, MdCheckCircle, MdError, MdInfo } from "react-icons/md";
 import { Menu } from "@mantine/core";
@@ -161,23 +158,27 @@ export const alertPropSchema = {
 // Component for the Alert block
 export const Alert = (props: {
   block: SpecificBlock<
-    DefaultBlockSchema & { alert: BlockSpec<"alert", typeof alertPropSchema> },
+    DefaultBlockSchema & {
+    alert: BlockSpec<"alert", typeof alertPropSchema, true>;
+  },
     "alert"
   >;
   editor: BlockNoteEditor<
-    DefaultBlockSchema & { alert: BlockSpec<"alert", typeof alertPropSchema> }
+    DefaultBlockSchema & {
+    alert: BlockSpec<"alert", typeof alertPropSchema, true>;
+  }
   >;
   theme: "light" | "dark";
 }) => {
-  const [type, setType] = useState(props.block.props.type);
-  const Icon = alertTypes[type].icon;
+  const Icon = alertTypes[props.block.props.type].icon;
 
   return (
     <div
       className={"alert"}
       style={{
         ...alertStyles,
-        backgroundColor: alertTypes[type].backgroundColor[props.theme],
+        backgroundColor:
+          alertTypes[props.block.props.type].backgroundColor[props.theme],
       }}>
       {/*Icon which opens a menu to choose the Alert type*/}
       <Menu zIndex={99999}>
@@ -187,13 +188,18 @@ export const Alert = (props: {
             className={"alert-icon-wrapper"}
             style={{
               ...alertIconWrapperStyles,
-              backgroundColor: alertTypes[type].color,
+              backgroundColor: alertTypes[props.block.props.type].color,
             }}
             contentEditable={false}>
             {/*Icon itself*/}
             <Icon
               className={"alert-icon"}
-              style={{ color: alertTypes[type].backgroundColor[props.theme] }}
+              style={{
+                color:
+                  alertTypes[props.block.props.type].backgroundColor[
+                    props.theme
+                  ],
+              }}
               size={32}
             />
           </div>
@@ -204,12 +210,17 @@ export const Alert = (props: {
           <Menu.Divider />
           {Object.entries(alertTypes).map(([key, value]) => {
             const ItemIcon = value.icon;
-
+            
             return (
               <Menu.Item
                 key={key}
                 icon={<ItemIcon color={value.color} />}
-                onClick={() => setType(key as keyof typeof alertTypes)}>
+                onClick={() =>
+                  props.editor.updateBlock(props.block, {
+                    type: "alert",
+                    props: { type: key as keyof typeof alertTypes },
+                  })
+                }>
                 {key.slice(0, 1).toUpperCase() + key.slice(1)}
               </Menu.Item>
             );
@@ -229,7 +240,9 @@ export const createAlertBlock = (theme: "light" | "dark") =>
     "alert",
     typeof alertPropSchema,
     true,
-    DefaultBlockSchema & { alert: BlockSpec<"alert", typeof alertPropSchema> }
+    DefaultBlockSchema & {
+      alert: BlockSpec<"alert", typeof alertPropSchema, true>;
+    }
   >({
     type: "alert" as const,
     propSchema: {
@@ -249,7 +262,7 @@ export const insertAlert = {
   name: "Alert",
   execute: (editor) => {
     const block = editor.getTextCursorPosition().block;
-    const blockIsEmpty = block.content.length === 0;
+    const blockIsEmpty = block.content!.length === 0;
 
     // Updates current block to an Alert if it's empty, otherwise inserts a new
     // one below
@@ -281,7 +294,9 @@ export const insertAlert = {
   icon: <RiAlertFill />,
   hint: "Used to emphasize text",
 } satisfies ReactSlashMenuItem<
-  DefaultBlockSchema & { alert: BlockSpec<"alert", typeof alertPropSchema> }
+  DefaultBlockSchema & {
+    alert: BlockSpec<"alert", typeof alertPropSchema, true>;
+  }
 >;
 
 const alertStyles = {

packages/website/docs/examples/block-manipulation.md

@@ -78,7 +78,6 @@ export default function App() {
     </div>
   );
 }
-
 ```
 
 ```css-vue /styles.css [hidden]

packages/website/docs/examples/keyboard-shortcuts.md

@@ -62,7 +62,6 @@ export default function App() {
 
   return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;
 }
-
 ```
 
 ```css-vue /styles.css [hidden]