@blocknote/mantine 0.13.0

package/src/BlockNoteTheme.ts

@@ -0,0 +1,153 @@
+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;
+}>;
+
+type NestedObject = { [key: string]: number | string | NestedObject };
+
+const cssVariablesHelper = (
+  theme: Theme,
+  editorDOM: HTMLElement,
+  unset = false
+) => {
+  const result: string[] = [];
+
+  function traverse(current: NestedObject, currentKey = "--bn") {
+    for (const key in current) {
+      const kebabCaseKey = key
+        .replace(/([a-z])([A-Z])/g, "$1-$2")
+        .toLowerCase();
+      const fullKey = `${currentKey}-${kebabCaseKey}`;
+
+      if (typeof current[key] !== "object") {
+        // Convert numbers to px
+        if (typeof current[key] === "number") {
+          current[key] = `${current[key]}px`;
+        }
+
+        if (unset) {
+          editorDOM.style.removeProperty(fullKey);
+        } else {
+          editorDOM.style.setProperty(fullKey, current[key].toString());
+        }
+      } else {
+        traverse(current[key] as NestedObject, fullKey);
+      }
+    }
+  }
+
+  traverse(theme);
+
+  return result;
+};
+
+export const applyBlockNoteCSSVariablesFromTheme = (
+  theme: Theme,
+  editorDOM: HTMLElement
+) => cssVariablesHelper(theme, editorDOM);
+
+// We don't need a theme to remove the CSS variables, but having access to a
+// theme object allows us to use the same logic to set/unset them, so this
+// placeholder theme is used.
+const placeholderTheme: Theme = {
+  colors: {
+    editor: {
+      text: undefined as any,
+      background: undefined as any,
+    },
+    menu: {
+      text: undefined as any,
+      background: undefined as any,
+    },
+    tooltip: {
+      text: undefined as any,
+      background: undefined as any,
+    },
+    hovered: {
+      text: undefined as any,
+      background: undefined as any,
+    },
+    selected: {
+      text: undefined as any,
+      background: undefined as any,
+    },
+    disabled: {
+      text: undefined as any,
+      background: undefined as any,
+    },
+    shadow: undefined as any,
+    border: undefined as any,
+    sideMenu: undefined as any,
+    highlights: {
+      gray: {
+        text: undefined as any,
+        background: undefined as any,
+      },
+      brown: {
+        text: undefined as any,
+        background: undefined as any,
+      },
+      red: {
+        text: undefined as any,
+        background: undefined as any,
+      },
+      orange: {
+        text: undefined as any,
+        background: undefined as any,
+      },
+      yellow: {
+        text: undefined as any,
+        background: undefined as any,
+      },
+      green: {
+        text: undefined as any,
+        background: undefined as any,
+      },
+      blue: {
+        text: undefined as any,
+        background: undefined as any,
+      },
+      purple: {
+        text: undefined as any,
+        background: undefined as any,
+      },
+      pink: {
+        text: undefined as any,
+        background: undefined as any,
+      },
+    },
+  },
+  borderRadius: undefined as any,
+  fontFamily: undefined as any,
+};
+export const removeBlockNoteCSSVariables = (editorDOM: HTMLElement) =>
+  cssVariablesHelper(placeholderTheme, editorDOM, true);

package/src/defaultThemes.ts

@@ -0,0 +1,159 @@
+import { Theme } from "./BlockNoteTheme";
+
+export const defaultColorScheme = [
+  "#FFFFFF",
+  "#EFEFEF",
+  "#CFCFCF",
+  "#AFAFAF",
+  "#7F7F7F",
+  "#3F3F3F",
+  "#1F1F1F",
+  "#161616",
+  "#0F0F0F",
+  "#000000",
+];
+
+export const lightDefaultTheme = {
+  colors: {
+    editor: {
+      text: defaultColorScheme[5],
+      background: defaultColorScheme[0],
+    },
+    menu: {
+      text: defaultColorScheme[5],
+      background: defaultColorScheme[0],
+    },
+    tooltip: {
+      text: defaultColorScheme[5],
+      background: defaultColorScheme[1],
+    },
+    hovered: {
+      text: defaultColorScheme[5],
+      background: defaultColorScheme[1],
+    },
+    selected: {
+      text: defaultColorScheme[0],
+      background: defaultColorScheme[5],
+    },
+    disabled: {
+      text: defaultColorScheme[3],
+      background: defaultColorScheme[1],
+    },
+    shadow: defaultColorScheme[2],
+    border: defaultColorScheme[1],
+    sideMenu: defaultColorScheme[2],
+    highlights: {
+      gray: {
+        text: "#9b9a97",
+        background: "#ebeced",
+      },
+      brown: {
+        text: "#64473a",
+        background: "#e9e5e3",
+      },
+      red: {
+        text: "#e03e3e",
+        background: "#fbe4e4",
+      },
+      orange: {
+        text: "#d9730d",
+        background: "#f6e9d9",
+      },
+      yellow: {
+        text: "#dfab01",
+        background: "#fbf3db",
+      },
+      green: {
+        text: "#4d6461",
+        background: "#ddedea",
+      },
+      blue: {
+        text: "#0b6e99",
+        background: "#ddebf1",
+      },
+      purple: {
+        text: "#6940a5",
+        background: "#eae4f2",
+      },
+      pink: {
+        text: "#ad1a72",
+        background: "#f4dfeb",
+      },
+    },
+  },
+  borderRadius: 6,
+  fontFamily:
+    '"Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+} satisfies Theme;
+
+export const darkDefaultTheme = {
+  colors: {
+    editor: {
+      text: defaultColorScheme[2],
+      background: defaultColorScheme[6],
+    },
+    menu: {
+      text: defaultColorScheme[2],
+      background: defaultColorScheme[6],
+    },
+    tooltip: {
+      text: defaultColorScheme[2],
+      background: defaultColorScheme[7],
+    },
+    hovered: {
+      text: defaultColorScheme[2],
+      background: defaultColorScheme[7],
+    },
+    selected: {
+      text: defaultColorScheme[2],
+      background: defaultColorScheme[8],
+    },
+    disabled: {
+      text: defaultColorScheme[5],
+      background: defaultColorScheme[7],
+    },
+    shadow: defaultColorScheme[8],
+    border: defaultColorScheme[7],
+    sideMenu: defaultColorScheme[4],
+    highlights: {
+      gray: {
+        text: "#bebdb8",
+        background: "#9b9a97",
+      },
+      brown: {
+        text: "#8e6552",
+        background: "#64473a",
+      },
+      red: {
+        text: "#ec4040",
+        background: "#be3434",
+      },
+      orange: {
+        text: "#e3790d",
+        background: "#b7600a",
+      },
+      yellow: {
+        text: "#dfab01",
+        background: "#b58b00",
+      },
+      green: {
+        text: "#6b8b87",
+        background: "#4d6461",
+      },
+      blue: {
+        text: "#0e87bc",
+        background: "#0b6e99",
+      },
+      purple: {
+        text: "#8552d7",
+        background: "#6940a5",
+      },
+      pink: {
+        text: "#da208f",
+        background: "#ad1a72",
+      },
+    },
+  },
+  borderRadius: lightDefaultTheme.borderRadius,
+  fontFamily: lightDefaultTheme.fontFamily,
+} satisfies Theme;

package/src/form/TextInput.tsx

@@ -0,0 +1,44 @@
+import * as Mantine from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const TextInput = forwardRef<
+  HTMLInputElement,
+  ComponentProps["Generic"]["Form"]["TextInput"]
+>((props, ref) => {
+  const {
+    className,
+    name,
+    label,
+    icon,
+    value,
+    autoFocus,
+    placeholder,
+    onKeyDown,
+    onChange,
+    onSubmit,
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Mantine.TextInput
+      size={"xs"}
+      className={className}
+      ref={ref}
+      name={name}
+      label={label}
+      leftSection={icon}
+      value={value}
+      autoFocus={autoFocus}
+      data-autofocus={autoFocus ? "true" : undefined}
+      placeholder={placeholder}
+      onKeyDown={onKeyDown}
+      onChange={onChange}
+      onSubmit={onSubmit}
+    />
+  );
+});

package/src/index.tsx

@@ -0,0 +1,172 @@
+import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
+import {
+  BlockNoteViewRaw,
+  Components,
+  ComponentsContext,
+  useBlockNoteContext,
+} from "@blocknote/react";
+import { MantineProvider } from "@mantine/core";
+import { ComponentProps, useCallback } from "react";
+import usePrefersColorScheme from "use-prefers-color-scheme";
+
+import {
+  Theme,
+  applyBlockNoteCSSVariablesFromTheme,
+  removeBlockNoteCSSVariables,
+} from "./BlockNoteTheme";
+import { TextInput } from "./form/TextInput";
+import {
+  Menu,
+  MenuDivider,
+  MenuDropdown,
+  MenuItem,
+  MenuLabel,
+  MenuTrigger,
+} from "./menu/Menu";
+import { Panel } from "./panel/Panel";
+import { PanelButton } from "./panel/PanelButton";
+import { PanelFileInput } from "./panel/PanelFileInput";
+import { PanelTab } from "./panel/PanelTab";
+import { PanelTextInput } from "./panel/PanelTextInput";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover/Popover";
+import { SideMenu } from "./sideMenu/SideMenu";
+import { SideMenuButton } from "./sideMenu/SideMenuButton";
+import { SuggestionMenu } from "./suggestionMenu/SuggestionMenu";
+import { SuggestionMenuEmptyItem } from "./suggestionMenu/SuggestionMenuEmptyItem";
+import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem";
+import { SuggestionMenuLabel } from "./suggestionMenu/SuggestionMenuLabel";
+import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader";
+import { TableHandle } from "./tableHandle/TableHandle";
+import { Toolbar } from "./toolbar/Toolbar";
+import { ToolbarButton } from "./toolbar/ToolbarButton";
+import { ToolbarSelect } from "./toolbar/ToolbarSelect";
+
+import "./style.css";
+
+export * from "./BlockNoteTheme";
+export * from "./defaultThemes";
+
+export const components: Components = {
+  FormattingToolbar: {
+    Root: Toolbar,
+    Button: ToolbarButton,
+    Select: ToolbarSelect,
+  },
+  ImagePanel: {
+    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,
+  },
+  TableHandle: {
+    Root: TableHandle,
+  },
+  Generic: {
+    Form: {
+      Root: (props) => <div>{props.children}</div>,
+      TextInput: TextInput,
+    },
+    Menu: {
+      Root: Menu,
+      Trigger: MenuTrigger,
+      Dropdown: MenuDropdown,
+      Divider: MenuDivider,
+      Label: MenuLabel,
+      Item: MenuItem,
+    },
+    Popover: {
+      Root: Popover,
+      Trigger: PopoverTrigger,
+      Content: PopoverContent,
+    },
+  },
+};
+
+const mantineTheme = {
+  // Removes button press effect
+  activeClassName: "",
+};
+
+export const BlockNoteView = <
+  BSchema extends BlockSchema,
+  ISchema extends InlineContentSchema,
+  SSchema extends StyleSchema
+>(
+  props: Omit<
+    ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>>,
+    "theme"
+  > & {
+    theme?:
+      | "light"
+      | "dark"
+      | Theme
+      | {
+          light: Theme;
+          dark: Theme;
+        };
+  }
+) => {
+  const { theme, ...rest } = props;
+
+  const existingContext = useBlockNoteContext();
+  const systemColorScheme = usePrefersColorScheme();
+  const defaultColorScheme =
+    existingContext?.colorSchemePreference || systemColorScheme;
+
+  const ref = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (!node) {
+        // todo: clean variables?
+        return;
+      }
+
+      removeBlockNoteCSSVariables(node);
+
+      if (typeof theme === "object") {
+        if ("light" in theme && "dark" in theme) {
+          applyBlockNoteCSSVariablesFromTheme(
+            theme[defaultColorScheme === "dark" ? "dark" : "light"],
+            node
+          );
+          return;
+        }
+
+        applyBlockNoteCSSVariablesFromTheme(theme, node);
+        return;
+      }
+    },
+    [defaultColorScheme, theme]
+  );
+
+  return (
+    <ComponentsContext.Provider value={components}>
+      {/* `cssVariablesSelector` scopes Mantine CSS variables to only the editor, */}
+      {/* as proposed here:  https://github.com/orgs/mantinedev/discussions/5685 */}
+      <MantineProvider
+        theme={mantineTheme}
+        cssVariablesSelector=".bn-container">
+        <BlockNoteViewRaw
+          theme={typeof theme === "object" ? undefined : theme}
+          {...rest}
+          ref={ref}
+        />
+      </MantineProvider>
+    </ComponentsContext.Provider>
+  );
+};

package/src/mantineStyles.css

@@ -0,0 +1,138 @@
+/* Based on https://github.com/orgs/mantinedev/discussions/5685 */
+
+/* We need all the Mantine styles except the global styles, so unfortunately our
+ only option is to import all the component styles separately. Could consider
+ importing only styles for components used in BlockNote in the future. */
+/* Files list: https://mantine.dev/styles/css-files-list/ */
+@import url("@mantine/core/styles/ScrollArea.css");
+@import url("@mantine/core/styles/UnstyledButton.css");
+@import url("@mantine/core/styles/VisuallyHidden.css");
+@import url("@mantine/core/styles/Paper.css");
+@import url("@mantine/core/styles/Popover.css");
+@import url("@mantine/core/styles/CloseButton.css");
+@import url("@mantine/core/styles/Group.css");
+@import url("@mantine/core/styles/Loader.css");
+@import url("@mantine/core/styles/Overlay.css");
+@import url("@mantine/core/styles/ModalBase.css");
+@import url("@mantine/core/styles/Input.css");
+@import url("@mantine/core/styles/Flex.css");
+
+@import url("@mantine/core/styles/Accordion.css");
+@import url("@mantine/core/styles/ActionIcon.css");
+@import url("@mantine/core/styles/Affix.css");
+@import url("@mantine/core/styles/Alert.css");
+@import url("@mantine/core/styles/Anchor.css");
+@import url("@mantine/core/styles/AspectRatio.css");
+@import url("@mantine/core/styles/AppShell.css");
+@import url("@mantine/core/styles/Avatar.css");
+@import url("@mantine/core/styles/Badge.css");
+@import url("@mantine/core/styles/BackgroundImage.css");
+@import url("@mantine/core/styles/Blockquote.css");
+@import url("@mantine/core/styles/Breadcrumbs.css");
+@import url("@mantine/core/styles/Button.css");
+@import url("@mantine/core/styles/Burger.css");
+@import url("@mantine/core/styles/Card.css");
+@import url("@mantine/core/styles/Center.css");
+@import url("@mantine/core/styles/Checkbox.css");
+@import url("@mantine/core/styles/Chip.css");
+@import url("@mantine/core/styles/Code.css");
+@import url("@mantine/core/styles/ColorInput.css");
+@import url("@mantine/core/styles/ColorPicker.css");
+@import url("@mantine/core/styles/ColorSwatch.css");
+@import url("@mantine/core/styles/Combobox.css");
+@import url("@mantine/core/styles/Container.css");
+@import url("@mantine/core/styles/Dialog.css");
+@import url("@mantine/core/styles/Divider.css");
+@import url("@mantine/core/styles/Drawer.css");
+@import url("@mantine/core/styles/Fieldset.css");
+@import url("@mantine/core/styles/Grid.css");
+@import url("@mantine/core/styles/Image.css");
+@import url("@mantine/core/styles/Indicator.css");
+@import url("@mantine/core/styles/InlineInput.css");
+@import url("@mantine/core/styles/Kbd.css");
+@import url("@mantine/core/styles/List.css");
+@import url("@mantine/core/styles/LoadingOverlay.css");
+@import url("@mantine/core/styles/Mark.css");
+@import url("@mantine/core/styles/Menu.css");
+@import url("@mantine/core/styles/Modal.css");
+@import url("@mantine/core/styles/NavLink.css");
+@import url("@mantine/core/styles/Notification.css");
+@import url("@mantine/core/styles/NumberInput.css");
+@import url("@mantine/core/styles/Pagination.css");
+@import url("@mantine/core/styles/Pill.css");
+@import url("@mantine/core/styles/PasswordInput.css");
+@import url("@mantine/core/styles/PillsInput.css");
+@import url("@mantine/core/styles/PinInput.css");
+@import url("@mantine/core/styles/Progress.css");
+@import url("@mantine/core/styles/Radio.css");
+@import url("@mantine/core/styles/Rating.css");
+@import url("@mantine/core/styles/RingProgress.css");
+@import url("@mantine/core/styles/SegmentedControl.css");
+@import url("@mantine/core/styles/SimpleGrid.css");
+@import url("@mantine/core/styles/Skeleton.css");
+@import url("@mantine/core/styles/Slider.css");
+@import url("@mantine/core/styles/Spoiler.css");
+@import url("@mantine/core/styles/Stack.css");
+@import url("@mantine/core/styles/Stepper.css");
+@import url("@mantine/core/styles/Switch.css");
+@import url("@mantine/core/styles/Table.css");
+@import url("@mantine/core/styles/Tabs.css");
+@import url("@mantine/core/styles/Text.css");
+@import url("@mantine/core/styles/ThemeIcon.css");
+@import url("@mantine/core/styles/Timeline.css");
+@import url("@mantine/core/styles/Title.css");
+@import url("@mantine/core/styles/Tooltip.css");
+@import url("@mantine/core/styles/TypographyStylesProvider.css");
+
+/* Mantine global styles, scoped to bn-container */
+/* Based on @mantine/core/styles/global.css
+ (src: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/global.css)
+ but with styles set on `body` and `html` instead set on `bn-container`, as
+ well as other minor changes. */
+.bn-container *, .bn-container :after, .bn-container :before {
+    box-sizing: border-box
+}
+
+.bn-container button,
+.bn-container select {
+    text-transform: none
+}
+
+@media screen and (max-device-width: 500px) {
+    .bn-container {
+        -webkit-text-size-adjust: 100%
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bn-container [data-respect-reduced-motion] [data-reduce-motion] {
+        animation: none;
+        transition: none
+    }
+}
+
+.bn-container [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-container [data-mantine-color-scheme=light] .mantine-light-hidden {
+    display: none
+}
+
+.bn-container .mantine-focus-auto:focus-visible {
+    outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
+    outline-offset: calc(.125rem * var(--mantine-scale))
+}
+
+.bn-container .mantine-focus-always:focus {
+    outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
+    outline-offset: calc(.125rem * var(--mantine-scale))
+}
+
+.bn-container .mantine-focus-never:focus {
+    outline: none
+}
+
+.bn-container .mantine-active:active {
+    transform: translateY(calc(.0625rem * var(--mantine-scale)))
+}
+
+.bn-container[dir=rtl] .mantine-rotate-rtl {
+    transform: rotate(180deg)
+}