@blocknote/shadcn 0.23.6 → 0.24.0

package/src/BlockNoteView.tsx

@@ -0,0 +1,52 @@
+import {
+  BlockSchema,
+  InlineContentSchema,
+  mergeCSSClasses,
+  StyleSchema,
+} from "@blocknote/core";
+import {
+  BlockNoteViewProps,
+  BlockNoteViewRaw,
+  ComponentsContext,
+} from "@blocknote/react";
+import { useMemo } from "react";
+
+import { components } from "./components.js";
+import {
+  ShadCNComponents,
+  ShadCNComponentsContext,
+  ShadCNDefaultComponents,
+} from "./ShadCNComponentsContext.js";
+
+export const BlockNoteView = <
+  BSchema extends BlockSchema,
+  ISchema extends InlineContentSchema,
+  SSchema extends StyleSchema
+>(
+  props: BlockNoteViewProps<BSchema, ISchema, SSchema> & {
+    /**
+     * (optional)Provide your own shadcn component overrides
+     */
+    shadCNComponents?: Partial<ShadCNComponents>;
+  }
+) => {
+  const { className, shadCNComponents, ...rest } = props;
+
+  const componentsValue = useMemo(() => {
+    return {
+      ...ShadCNDefaultComponents,
+      ...shadCNComponents,
+    };
+  }, [shadCNComponents]);
+
+  return (
+    <ShadCNComponentsContext.Provider value={componentsValue}>
+      <ComponentsContext.Provider value={components}>
+        <BlockNoteViewRaw
+          className={mergeCSSClasses("bn-shadcn", className || "")}
+          {...rest}
+        />
+      </ComponentsContext.Provider>
+    </ShadCNComponentsContext.Provider>
+  );
+};

package/src/components.ts

@@ -0,0 +1,97 @@
+import { Components } from "@blocknote/react";
+
+import { Form } from "./form/Form.js";
+import { TextInput } from "./form/TextInput.js";
+import {
+  Menu,
+  MenuDivider,
+  MenuDropdown,
+  MenuItem,
+  MenuLabel,
+  MenuTrigger,
+} from "./menu/Menu.js";
+import { Panel } from "./panel/Panel.js";
+import { PanelTab } from "./panel/PanelTab.js";
+import { PanelTextInput } from "./panel/PanelTextInput.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover/popover.js";
+import { SideMenu } from "./sideMenu/SideMenu.js";
+import { SideMenuButton } from "./sideMenu/SideMenuButton.js";
+import { GridSuggestionMenu } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.js";
+import { GridSuggestionMenuEmptyItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.js";
+import { SuggestionMenu } from "./suggestionMenu/SuggestionMenu.js";
+import { SuggestionMenuEmptyItem } from "./suggestionMenu/SuggestionMenuEmptyItem.js";
+import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem.js";
+import { SuggestionMenuLabel } from "./suggestionMenu/SuggestionMenuLabel.js";
+import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader.js";
+import { ExtendButton } from "./tableHandle/ExtendButton.js";
+import { TableHandle } from "./tableHandle/TableHandle.js";
+import { Toolbar, ToolbarButton, ToolbarSelect } from "./toolbar/Toolbar.js";
+
+import { PanelButton } from "./panel/PanelButton.js";
+import { PanelFileInput } from "./panel/PanelFileInput.js";
+import "./style.css";
+import { GridSuggestionMenuItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.js";
+import { GridSuggestionMenuLoader } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.js";
+
+export const components: Components = {
+  FormattingToolbar: {
+    Root: Toolbar,
+    Button: ToolbarButton,
+    Select: ToolbarSelect,
+  },
+  FilePanel: {
+    Root: Panel,
+    Button: PanelButton,
+    FileInput: PanelFileInput,
+    TabPanel: PanelTab,
+    TextInput: PanelTextInput,
+  },
+  LinkToolbar: {
+    Root: Toolbar,
+    Button: ToolbarButton,
+  },
+  SideMenu: {
+    Root: SideMenu,
+    Button: SideMenuButton,
+  },
+  SuggestionMenu: {
+    Root: SuggestionMenu,
+    Item: SuggestionMenuItem,
+    EmptyItem: SuggestionMenuEmptyItem,
+    Label: SuggestionMenuLabel,
+    Loader: SuggestionMenuLoader,
+  },
+  GridSuggestionMenu: {
+    Root: GridSuggestionMenu,
+    Item: GridSuggestionMenuItem,
+    EmptyItem: GridSuggestionMenuEmptyItem,
+    Loader: GridSuggestionMenuLoader,
+  },
+  TableHandle: {
+    Root: TableHandle,
+    ExtendButton: ExtendButton,
+  },
+  Generic: {
+    Toolbar: {
+      Root: Toolbar,
+      Button: ToolbarButton,
+    },
+    Form: {
+      Root: Form,
+      TextInput: TextInput,
+    },
+    Menu: {
+      Root: Menu,
+      Trigger: MenuTrigger,
+      Dropdown: MenuDropdown,
+      Divider: MenuDivider,
+      Label: MenuLabel,
+      Item: MenuItem,
+    },
+    Popover: {
+      Root: Popover,
+      Trigger: PopoverTrigger,
+      Content: PopoverContent,
+    },
+  },
+};

package/src/index.tsx

@@ -1,143 +1,4 @@
-import {
-  BlockSchema,
-  InlineContentSchema,
-  mergeCSSClasses,
-  StyleSchema,
-} from "@blocknote/core";
-import {
-  BlockNoteViewProps,
-  BlockNoteViewRaw,
-  Components,
-  ComponentsContext,
-} from "@blocknote/react";
-import { useMemo } from "react";
-
-import { Form } from "./form/Form.js";
-import { TextInput } from "./form/TextInput.js";
-import {
-  Menu,
-  MenuDivider,
-  MenuDropdown,
-  MenuItem,
-  MenuLabel,
-  MenuTrigger,
-} from "./menu/Menu.js";
-import { Panel } from "./panel/Panel.js";
-import { PanelTab } from "./panel/PanelTab.js";
-import { PanelTextInput } from "./panel/PanelTextInput.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover/popover.js";
-import {
-  ShadCNComponents,
-  ShadCNComponentsContext,
-  ShadCNDefaultComponents,
-} from "./ShadCNComponentsContext.js";
-import { SideMenu } from "./sideMenu/SideMenu.js";
-import { SideMenuButton } from "./sideMenu/SideMenuButton.js";
-import { GridSuggestionMenu } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.js";
-import { GridSuggestionMenuEmptyItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.js";
-import { SuggestionMenu } from "./suggestionMenu/SuggestionMenu.js";
-import { SuggestionMenuEmptyItem } from "./suggestionMenu/SuggestionMenuEmptyItem.js";
-import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem.js";
-import { SuggestionMenuLabel } from "./suggestionMenu/SuggestionMenuLabel.js";
-import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader.js";
-import { ExtendButton } from "./tableHandle/ExtendButton.js";
-import { TableHandle } from "./tableHandle/TableHandle.js";
-import { Toolbar, ToolbarButton, ToolbarSelect } from "./toolbar/Toolbar.js";
-
-import { PanelButton } from "./panel/PanelButton.js";
-import { PanelFileInput } from "./panel/PanelFileInput.js";
 import "./style.css";
-import { GridSuggestionMenuItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.js";
-import { GridSuggestionMenuLoader } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.js";
-
-export const components: Components = {
-  FormattingToolbar: {
-    Root: Toolbar,
-    Button: ToolbarButton,
-    Select: ToolbarSelect,
-  },
-  FilePanel: {
-    Root: Panel,
-    Button: PanelButton,
-    FileInput: PanelFileInput,
-    TabPanel: PanelTab,
-    TextInput: PanelTextInput,
-  },
-  LinkToolbar: {
-    Root: Toolbar,
-    Button: ToolbarButton,
-  },
-  SideMenu: {
-    Root: SideMenu,
-    Button: SideMenuButton,
-  },
-  SuggestionMenu: {
-    Root: SuggestionMenu,
-    Item: SuggestionMenuItem,
-    EmptyItem: SuggestionMenuEmptyItem,
-    Label: SuggestionMenuLabel,
-    Loader: SuggestionMenuLoader,
-  },
-  GridSuggestionMenu: {
-    Root: GridSuggestionMenu,
-    Item: GridSuggestionMenuItem,
-    EmptyItem: GridSuggestionMenuEmptyItem,
-    Loader: GridSuggestionMenuLoader,
-  },
-  TableHandle: {
-    Root: TableHandle,
-    ExtendButton: ExtendButton,
-  },
-  Generic: {
-    Form: {
-      Root: Form,
-      TextInput: TextInput,
-    },
-    Menu: {
-      Root: Menu,
-      Trigger: MenuTrigger,
-      Dropdown: MenuDropdown,
-      Divider: MenuDivider,
-      Label: MenuLabel,
-      Item: MenuItem,
-    },
-    Popover: {
-      Root: Popover,
-      Trigger: PopoverTrigger,
-      Content: PopoverContent,
-    },
-  },
-};
-
-export const BlockNoteView = <
-  BSchema extends BlockSchema,
-  ISchema extends InlineContentSchema,
-  SSchema extends StyleSchema
->(
-  props: BlockNoteViewProps<BSchema, ISchema, SSchema> & {
-    /**
-     * (optional)Provide your own shadcn component overrides
-     */
-    shadCNComponents?: Partial<ShadCNComponents>;
-  }
-) => {
-  const { className, shadCNComponents, ...rest } = props;
-
-  const componentsValue = useMemo(() => {
-    return {
-      ...ShadCNDefaultComponents,
-      ...shadCNComponents,
-    };
-  }, [shadCNComponents]);
 
-  return (
-    <ShadCNComponentsContext.Provider value={componentsValue}>
-      <ComponentsContext.Provider value={components}>
-        <BlockNoteViewRaw
-          className={mergeCSSClasses("bn-shadcn", className || "")}
-          {...rest}
-        />
-      </ComponentsContext.Provider>
-    </ShadCNComponentsContext.Provider>
-  );
-};
+export { BlockNoteView } from "./BlockNoteView.js";
+export { components } from "./components.js";

package/types/src/BlockNoteView.d.ts

@@ -0,0 +1,9 @@
+import { InlineContentSchema, StyleSchema } from "@blocknote/core";
+import { BlockNoteViewProps } from "@blocknote/react";
+import { ShadCNComponents } from "./ShadCNComponentsContext.js";
+export declare const BlockNoteView: <BSchema extends Record<string, import("@blocknote/core").BlockConfig>, ISchema extends InlineContentSchema, SSchema extends StyleSchema>(props: BlockNoteViewProps<BSchema, ISchema, SSchema> & {
+    /**
+     * (optional)Provide your own shadcn component overrides
+     */
+    shadCNComponents?: Partial<ShadCNComponents>;
+}) => import("react/jsx-runtime").JSX.Element;

package/types/src/components.d.ts

@@ -0,0 +1,3 @@
+import { Components } from "@blocknote/react";
+import "./style.css";
+export declare const components: Components;

package/types/src/index.d.ts

@@ -1,11 +1,3 @@
-import { InlineContentSchema, StyleSchema } from "@blocknote/core";
-import { BlockNoteViewProps, Components } from "@blocknote/react";
-import { ShadCNComponents } from "./ShadCNComponentsContext.js";
 import "./style.css";
-export declare const components: Components;
-export declare const BlockNoteView: <BSchema extends Record<string, import("@blocknote/core").BlockConfig>, ISchema extends InlineContentSchema, SSchema extends StyleSchema>(props: BlockNoteViewProps<BSchema, ISchema, SSchema> & {
-    /**
-     * (optional)Provide your own shadcn component overrides
-     */
-    shadCNComponents?: Partial<ShadCNComponents>;
-}) => import("react/jsx-runtime").JSX.Element;
+export { BlockNoteView } from "./BlockNoteView.js";
+export { components } from "./components.js";

package/types/src/toolbar/Toolbar.d.ts

@@ -1,16 +1,25 @@
 /// <reference types="react" />
-import { ComponentProps } from "@blocknote/react";
 export declare const Toolbar: import("react").ForwardRefExoticComponent<{
     className?: string | undefined;
     children?: import("react").ReactNode;
-} & {
-    className?: string | undefined;
-    children?: import("react").ReactNode;
     onMouseEnter?: (() => void) | undefined;
     onMouseLeave?: (() => void) | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
-type ToolbarButtonProps = ComponentProps["FormattingToolbar"]["Button"] & ComponentProps["LinkToolbar"]["Button"];
-export declare const ToolbarButton: import("react").ForwardRefExoticComponent<ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ToolbarButton: import("react").ForwardRefExoticComponent<({
+    className?: string | undefined;
+    mainTooltip: string;
+    secondaryTooltip?: string | undefined;
+    icon?: import("react").ReactNode;
+    onClick?: ((e: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+    isSelected?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+} & ({
+    children: import("react").ReactNode;
+    label?: string | undefined;
+} | {
+    children?: undefined;
+    label: string;
+})) & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const ToolbarSelect: import("react").ForwardRefExoticComponent<{
     className?: string | undefined;
     items: {
@@ -22,4 +31,3 @@ export declare const ToolbarSelect: import("react").ForwardRefExoticComponent<{
     }[];
     isDisabled?: boolean | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
-export {};