@blocknote/mantine 0.13.0

package/src/toolbar/ToolbarButton.tsx

@@ -0,0 +1,106 @@
+import * as Mantine from "@mantine/core";
+
+import { assertEmpty, isSafari } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const TooltipContent = (props: {
+  mainTooltip: string;
+  secondaryTooltip?: string;
+}) => (
+  <Mantine.Stack gap={0} className={"bn-tooltip"}>
+    <Mantine.Text size={"sm"}>{props.mainTooltip}</Mantine.Text>
+    {props.secondaryTooltip && (
+      <Mantine.Text size={"xs"}>{props.secondaryTooltip}</Mantine.Text>
+    )}
+  </Mantine.Stack>
+);
+
+type ToolbarButtonProps = ComponentProps["FormattingToolbar"]["Button"] &
+  ComponentProps["LinkToolbar"]["Button"];
+
+/**
+ * Helper for basic buttons that show in the formatting toolbar.
+ */
+export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
+  (props, ref) => {
+    const {
+      className,
+      children,
+      mainTooltip,
+      secondaryTooltip,
+      icon,
+      isSelected,
+      isDisabled,
+      onClick,
+      label,
+      ...rest
+    } = props;
+
+    // false, because rest props can be added by mantine when button is used as a trigger
+    // assertEmpty in this case is only used at typescript level, not runtime level
+    assertEmpty(rest, false);
+
+    return (
+      <Mantine.Tooltip
+        withinPortal={false}
+        label={
+          <TooltipContent
+            mainTooltip={mainTooltip}
+            secondaryTooltip={secondaryTooltip}
+          />
+        }>
+        {/*Creates an ActionIcon instead of a Button if only an icon is provided as content.*/}
+        {children ? (
+          <Mantine.Button
+            aria-label={label}
+            className={className}
+            // Needed as Safari doesn't focus button elements on mouse down
+            // unlike other browsers.
+            onMouseDown={(e) => {
+              if (isSafari()) {
+                (e.currentTarget as HTMLButtonElement).focus();
+              }
+            }}
+            onClick={onClick}
+            aria-pressed={isSelected}
+            data-selected={isSelected || undefined}
+            data-test={
+              mainTooltip.slice(0, 1).toLowerCase() +
+              mainTooltip.replace(/\s+/g, "").slice(1)
+            }
+            size={"xs"}
+            disabled={isDisabled || false}
+            ref={ref}
+            {...rest}>
+            {children}
+          </Mantine.Button>
+        ) : (
+          <Mantine.ActionIcon
+            className={className}
+            aria-label={label}
+            // Needed as Safari doesn't focus button elements on mouse down
+            // unlike other browsers.
+            onMouseDown={(e) => {
+              if (isSafari()) {
+                (e.currentTarget as HTMLButtonElement).focus();
+              }
+            }}
+            onClick={onClick}
+            aria-pressed={isSelected}
+            data-selected={isSelected || undefined}
+            data-test={
+              mainTooltip.slice(0, 1).toLowerCase() +
+              mainTooltip.replace(/\s+/g, "").slice(1)
+            }
+            size={30}
+            disabled={isDisabled || false}
+            ref={ref}
+            {...rest}>
+            {icon}
+          </Mantine.ActionIcon>
+        )}
+      </Mantine.Tooltip>
+    );
+  }
+);

package/src/toolbar/ToolbarSelect.tsx

@@ -0,0 +1,69 @@
+import * as Mantine from "@mantine/core";
+
+import { assertEmpty, isSafari } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+import { HiChevronDown } from "react-icons/hi";
+
+// TODO: Turn into select?
+export const ToolbarSelect = forwardRef<
+  HTMLDivElement,
+  ComponentProps["FormattingToolbar"]["Select"]
+>((props, ref) => {
+  const { className, items, isDisabled, ...rest } = props;
+
+  assertEmpty(rest);
+
+  const selectedItem = items.filter((p) => p.isSelected)[0];
+
+  if (!selectedItem) {
+    return null;
+  }
+
+  return (
+    <Mantine.Menu
+      withinPortal={false}
+      transitionProps={{
+        exitDuration: 0,
+      }}
+      disabled={isDisabled}
+      middlewares={{ flip: true, shift: true, inline: false, size: true }}>
+      <Mantine.Menu.Target>
+        <Mantine.Button
+          // Needed as Safari doesn't focus button elements on mouse down
+          // unlike other browsers.
+          onMouseDown={(e) => {
+            if (isSafari()) {
+              (e.currentTarget as HTMLButtonElement).focus();
+            }
+          }}
+          leftSection={selectedItem.icon}
+          rightSection={<HiChevronDown />}
+          size={"xs"}
+          variant={"subtle"}
+          disabled={isDisabled}>
+          {selectedItem.text}
+        </Mantine.Button>
+      </Mantine.Menu.Target>
+      <Mantine.Menu.Dropdown className={className} ref={ref}>
+        {items.map((item) => (
+          <Mantine.Menu.Item
+            key={item.text}
+            onClick={item.onClick}
+            leftSection={item.icon}
+            rightSection={
+              item.isSelected ? (
+                <Mantine.CheckIcon size={10} className={"bn-tick-icon"} />
+              ) : (
+                // Ensures space for tick even if item isn't currently selected.
+                <div className={"bn-tick-space"} />
+              )
+            }
+            disabled={item.isDisabled}>
+            {item.text}
+          </Mantine.Menu.Item>
+        ))}
+      </Mantine.Menu.Dropdown>
+    </Mantine.Menu>
+  );
+});

package/types/src/BlockNoteTheme.d.ts

@@ -0,0 +1,33 @@
+export type CombinedColor = Partial<{
+    text: string;
+    background: string;
+}>;
+export type ColorScheme = Partial<{
+    editor: CombinedColor;
+    menu: CombinedColor;
+    tooltip: CombinedColor;
+    hovered: CombinedColor;
+    selected: CombinedColor;
+    disabled: CombinedColor;
+    shadow: string;
+    border: string;
+    sideMenu: string;
+    highlights: Partial<{
+        gray: CombinedColor;
+        brown: CombinedColor;
+        red: CombinedColor;
+        orange: CombinedColor;
+        yellow: CombinedColor;
+        green: CombinedColor;
+        blue: CombinedColor;
+        purple: CombinedColor;
+        pink: CombinedColor;
+    }>;
+}>;
+export type Theme = Partial<{
+    colors: ColorScheme;
+    borderRadius: number;
+    fontFamily: string;
+}>;
+export declare const applyBlockNoteCSSVariablesFromTheme: (theme: Theme, editorDOM: HTMLElement) => string[];
+export declare const removeBlockNoteCSSVariables: (editorDOM: HTMLElement) => string[];

package/types/src/defaultThemes.d.ts

@@ -0,0 +1,143 @@
+export declare const defaultColorScheme: string[];
+export declare const lightDefaultTheme: {
+    colors: {
+        editor: {
+            text: string;
+            background: string;
+        };
+        menu: {
+            text: string;
+            background: string;
+        };
+        tooltip: {
+            text: string;
+            background: string;
+        };
+        hovered: {
+            text: string;
+            background: string;
+        };
+        selected: {
+            text: string;
+            background: string;
+        };
+        disabled: {
+            text: string;
+            background: string;
+        };
+        shadow: string;
+        border: string;
+        sideMenu: string;
+        highlights: {
+            gray: {
+                text: string;
+                background: string;
+            };
+            brown: {
+                text: string;
+                background: string;
+            };
+            red: {
+                text: string;
+                background: string;
+            };
+            orange: {
+                text: string;
+                background: string;
+            };
+            yellow: {
+                text: string;
+                background: string;
+            };
+            green: {
+                text: string;
+                background: string;
+            };
+            blue: {
+                text: string;
+                background: string;
+            };
+            purple: {
+                text: string;
+                background: string;
+            };
+            pink: {
+                text: string;
+                background: string;
+            };
+        };
+    };
+    borderRadius: number;
+    fontFamily: string;
+};
+export declare const darkDefaultTheme: {
+    colors: {
+        editor: {
+            text: string;
+            background: string;
+        };
+        menu: {
+            text: string;
+            background: string;
+        };
+        tooltip: {
+            text: string;
+            background: string;
+        };
+        hovered: {
+            text: string;
+            background: string;
+        };
+        selected: {
+            text: string;
+            background: string;
+        };
+        disabled: {
+            text: string;
+            background: string;
+        };
+        shadow: string;
+        border: string;
+        sideMenu: string;
+        highlights: {
+            gray: {
+                text: string;
+                background: string;
+            };
+            brown: {
+                text: string;
+                background: string;
+            };
+            red: {
+                text: string;
+                background: string;
+            };
+            orange: {
+                text: string;
+                background: string;
+            };
+            yellow: {
+                text: string;
+                background: string;
+            };
+            green: {
+                text: string;
+                background: string;
+            };
+            blue: {
+                text: string;
+                background: string;
+            };
+            purple: {
+                text: string;
+                background: string;
+            };
+            pink: {
+                text: string;
+                background: string;
+            };
+        };
+    };
+    borderRadius: number;
+    fontFamily: string;
+};

package/types/src/form/TextInput.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const TextInput: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    name: string;
+    label?: string | undefined;
+    icon: import("react").ReactNode;
+    autoFocus?: boolean | undefined;
+    placeholder: string;
+    value: string;
+    onKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
+    onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    onSubmit?: (() => void) | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/types/src/index.d.ts

@@ -0,0 +1,14 @@
+import { InlineContentSchema, StyleSchema } from "@blocknote/core";
+import { BlockNoteViewRaw, Components } from "@blocknote/react";
+import { ComponentProps } from "react";
+import { Theme } from "./BlockNoteTheme";
+import "./style.css";
+export * from "./BlockNoteTheme";
+export * from "./defaultThemes";
+export declare const components: Components;
+export declare const BlockNoteView: <BSchema extends Record<string, import("@blocknote/core").BlockConfig>, ISchema extends InlineContentSchema, SSchema extends StyleSchema>(props: Omit<ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>>, "theme"> & {
+    theme?: "light" | "dark" | Theme | {
+        light: Theme;
+        dark: Theme;
+    };
+}) => import("react/jsx-runtime").JSX.Element;

package/types/src/menu/Menu.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { ComponentProps } from "@blocknote/react";
+export declare const Menu: (props: ComponentProps["Generic"]["Menu"]["Root"]) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+    subTrigger?: boolean | undefined;
+    icon?: import("react").ReactNode;
+    checked?: boolean | undefined;
+    onClick?: (() => void) | undefined;
+} & import("react").RefAttributes<HTMLButtonElement & HTMLDivElement>>;
+export declare const MenuTrigger: (props: ComponentProps["Generic"]["Menu"]["Trigger"]) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuDropdown: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+    sub?: boolean | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuDivider: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuLabel: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/panel/Panel.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const Panel: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    tabs: {
+        name: string;
+        tabPanel: import("react").ReactNode;
+    }[];
+    openTab: string;
+    setOpenTab: (name: string) => void;
+    defaultOpenTab: string;
+    loading: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/panel/PanelButton.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const PanelButton: import("react").ForwardRefExoticComponent<({
+    className?: string | undefined;
+    onClick: () => void;
+} & ({
+    children: import("react").ReactNode;
+    label?: string | undefined;
+} | {
+    children?: undefined;
+    label: string;
+})) & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/panel/PanelFileInput.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const PanelFileInput: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    value: File | null;
+    placeholder: string;
+    onChange: (payload: File | null) => void;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/panel/PanelTab.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const PanelTab: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/panel/PanelTextInput.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const PanelTextInput: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    value: string;
+    placeholder: string;
+    onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown: (event: import("react").KeyboardEvent<Element>) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/types/src/popover/Popover.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentProps } from "@blocknote/react";
+export declare const Popover: (props: ComponentProps["Generic"]["Popover"]["Root"]) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverTrigger: (props: ComponentProps["Generic"]["Popover"]["Trigger"]) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    variant: "form-popover" | "panel-popover";
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/sideMenu/SideMenu.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SideMenu: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/sideMenu/SideMenuButton.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const SideMenuButton: import("react").ForwardRefExoticComponent<({
+    className?: string | undefined;
+    onClick?: ((e: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+    icon?: import("react").ReactNode;
+    onDragStart?: ((e: import("react").DragEvent<Element>) => void) | undefined;
+    onDragEnd?: ((e: import("react").DragEvent<Element>) => void) | undefined;
+    draggable?: boolean | undefined;
+} & ({
+    children: import("react").ReactNode;
+    label?: string | undefined;
+} | {
+    children?: undefined;
+    label: string;
+})) & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/suggestionMenu/SuggestionMenu.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const SuggestionMenu: import("react").ForwardRefExoticComponent<{
+    id: string;
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuEmptyItem.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SuggestionMenuEmptyItem: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuItem.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const SuggestionMenuItem: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    id: string;
+    isSelected: boolean;
+    onClick: () => void;
+    item: import("@blocknote/react").DefaultReactSuggestionItem;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuLabel.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SuggestionMenuLabel: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuLoader.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SuggestionMenuLoader: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/tableHandle/TableHandle.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const TableHandle: import("react").ForwardRefExoticComponent<({
+    className?: string | undefined;
+    draggable: boolean;
+    onDragStart: (e: import("react").DragEvent<Element>) => void;
+    onDragEnd: () => void;
+    style?: import("react").CSSProperties | undefined;
+} & ({
+    children: import("react").ReactNode;
+    label?: string | undefined;
+} | {
+    children?: undefined;
+    label: string;
+})) & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,10 @@
+/// <reference types="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>>;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ComponentProps } from "@blocknote/react";
+export declare const TooltipContent: (props: {
+    mainTooltip: string;
+    secondaryTooltip?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+type ToolbarButtonProps = ComponentProps["FormattingToolbar"]["Button"] & ComponentProps["LinkToolbar"]["Button"];
+/**
+ * Helper for basic buttons that show in the formatting toolbar.
+ */
+export declare const ToolbarButton: import("react").ForwardRefExoticComponent<ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const ToolbarSelect: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    items: {
+        text: string;
+        icon: import("react").ReactNode;
+        onClick: () => void;
+        isSelected: boolean;
+        isDisabled?: boolean | undefined;
+    }[];
+    isDisabled?: boolean | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;