Skip to content

chore: Mantine update #479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Jan 8, 2024
Merged

chore: Mantine update #479

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
fafbd4f
Updated Mantine & moved theming to CSS
matthewlipski Dec 15, 2023
f9486ab
Added `package-lock.json`
matthewlipski Dec 15, 2023
08a4c34
Fixed test selectors
matthewlipski Dec 19, 2023
e70e90a
Changed styles to not use nesting
matthewlipski Dec 21, 2023
1573a9f
add react/style.css
YousefED Dec 21, 2023
6dace73
Styling fixes and updated test screenshots
matthewlipski Jan 2, 2024
e85d94c
Removed redundant stylesheet
matthewlipski Jan 2, 2024
3cf090f
Implemented PR feedback
matthewlipski Jan 4, 2024
cbdb6d0
Small color fix
matthewlipski Jan 4, 2024
3f1398a
Implemented PR feedback
matthewlipski Jan 5, 2024
57ef17e
Implemented PR feedback
matthewlipski Jan 5, 2024
7b17b5b
Implemented PR feedback
matthewlipski Jan 5, 2024
eb92482
Implemented PR feedback
matthewlipski Jan 6, 2024
1c1a27d
Implemented PR feedback
matthewlipski Jan 8, 2024
0c336da
Added `.bn-container` prefix to all BlockNote styles (fixes CSS rule …
matthewlipski Jan 8, 2024
0f418b3
feat: Replace Tippy with Floating UI (#501)
matthewlipski Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 0 additions & 28 deletions examples/editor/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,3 @@ body {
.mantine-AppShell-navbar {
background-color: #f7f7f5;
}

/* Example theme override using CSS */
/*.bn-editor-wrapper[data-color-scheme] {*/
/* --bn-colors-editor-text: #222222;*/
/* --bn-colors-editor-background: #ffffff;*/
/* --bn-colors-menu-text: #ffffff;*/
/* --bn-colors-menu-background: #9b0000;*/
/* --bn-colors-tooltip-text: #ffffff;*/
/* --bn-colors-tooltip-background: #b00000;*/
/* --bn-colors-hovered-text: #ffffff;*/
/* --bn-colors-hovered-background: #b00000;*/
/* --bn-colors-selected-text: #ffffff;*/
/* --bn-colors-selected-background: #c50000;*/
/* --bn-colors-disabled-text: #9b0000;*/
/* --bn-colors-disabled-background: #7d0000;*/
/* --bn-colors-shadow: #640000;*/
/* --bn-colors-border: #870000;*/
/* --bn-colors-side-menu: #bababa;*/
/* --bn-color-highlight-colors: #ffffff;*/
/* --bn-border-radius: 4px;*/
/* --bn-font-family: Helvetica Neue, sans-serif;*/
/*}*/

/*.bn-editor-wrapper[data-color-scheme="dark"] {*/
/* --bn-colors-editor-text: #ffffff;*/
/* --bn-colors-editor-background: #9b0000;*/
/* --bn-colors-side-menu: #ffffff;*/
/*}*/
280 changes: 156 additions & 124 deletions packages/react/src/editor/BlockNoteTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,133 +32,165 @@ export type Theme = {
fontFamily: string;
};

export const applyCSSVariablesFromTheme = (
const camelCaseToKebabCase = (str: string) =>
str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();

const cssVariablesHelper = (
theme: Theme,
editorDOM: HTMLElement
editorDOM: HTMLElement,
unset = false
) => {
editorDOM.style.setProperty(
"--bn-color-editor-text",
theme.colors.editor.text
);
editorDOM.style.setProperty(
"--bn-color-editor-background",
theme.colors.editor.background
);
editorDOM.style.setProperty("--bn-color-menu-text", theme.colors.menu.text);
editorDOM.style.setProperty(
"--bn-color-menu-background",
theme.colors.menu.background
);
editorDOM.style.setProperty(
"--bn-color-tooltip-text",
theme.colors.tooltip.text
);
editorDOM.style.setProperty(
"--bn-color-tooltip-background",
theme.colors.tooltip.background
);
editorDOM.style.setProperty(
"--bn-color-hovered-text",
theme.colors.hovered.text
);
editorDOM.style.setProperty(
"--bn-color-hovered-background",
theme.colors.hovered.background
);
editorDOM.style.setProperty(
"--bn-color-selected-text",
theme.colors.selected.text
);
editorDOM.style.setProperty(
"--bn-color-selected-background",
theme.colors.selected.background
);
editorDOM.style.setProperty(
"--bn-color-disabled-text",
theme.colors.disabled.text
);
editorDOM.style.setProperty(
"--bn-color-disabled-background",
theme.colors.disabled.background
);
// Colors
for (const [colorSchemeKey, colorSchemeValue] of Object.entries(
theme.colors
)) {
if (typeof colorSchemeValue === "string") {
// Case for single colors
const property = "--bn-colors-" + camelCaseToKebabCase(colorSchemeKey);
if (unset) {
editorDOM.style.removeProperty(property);
} else {
editorDOM.style.setProperty(property, colorSchemeValue);
}
} else if (typeof colorSchemeValue === "object") {
if ("text" in colorSchemeValue && "background" in colorSchemeValue) {
// Case for combined colors
const textProperty =
"--bn-colors-" + camelCaseToKebabCase(colorSchemeKey) + "-text";
const backgroundProperty =
"--bn-colors-" + camelCaseToKebabCase(colorSchemeKey) + "-background";
if (unset) {
editorDOM.style.removeProperty(textProperty);
editorDOM.style.removeProperty(backgroundProperty);
} else {
editorDOM.style.setProperty(textProperty, colorSchemeValue.text);
editorDOM.style.setProperty(
backgroundProperty,
colorSchemeValue.background
);
}
} else {
// Case for highlights
for (const [highlightColorKey, highlightColorValue] of Object.entries(
colorSchemeValue
)) {
const textProperty =
"--bn-colors-" +
camelCaseToKebabCase(colorSchemeKey) +
"-" +
camelCaseToKebabCase(highlightColorKey) +
"-text";
const backgroundProperty =
"--bn-colors-" +
camelCaseToKebabCase(colorSchemeKey) +
"-" +
camelCaseToKebabCase(highlightColorKey) +
"-background";
if (unset) {
editorDOM.style.removeProperty(textProperty);
editorDOM.style.removeProperty(backgroundProperty);
} else {
editorDOM.style.setProperty(textProperty, highlightColorValue.text);
editorDOM.style.setProperty(
backgroundProperty,
highlightColorValue.background
);
}
}
}
}
}

editorDOM.style.setProperty("--bn-color-shadow", theme.colors.shadow);
editorDOM.style.setProperty("--bn-color-border", theme.colors.border);
editorDOM.style.setProperty("--bn-color-side-menu", theme.colors.sideMenu);
if (unset) {
editorDOM.style.removeProperty("--bn-font-family");
editorDOM.style.removeProperty("--bn-border-radius");
} else {
editorDOM.style.setProperty("--bn-font-family", theme.fontFamily);
editorDOM.style.setProperty(
"--bn-border-radius",
`${theme.borderRadius}px`
);
}
};

editorDOM.style.setProperty(
"--bn-color-highlight-text-gray",
theme.colors.highlights.gray.text
);
editorDOM.style.setProperty(
"--bn-color-highlight-background-gray",
theme.colors.highlights.gray.background
);
editorDOM.style.setProperty(
"--bn-color-highlight-text-brown",
theme.colors.highlights.brown.text
);
editorDOM.style.setProperty(
"--bn-color-highlight-background-brown",
theme.colors.highlights.brown.background
);
editorDOM.style.setProperty(
"--bn-color-highlight-text-red",
theme.colors.highlights.red.text
);
editorDOM.style.setProperty(
"--bn-color-highlight-background-red",
theme.colors.highlights.red.background
);
editorDOM.style.setProperty(
"--bn-color-highlight-text-orange",
theme.colors.highlights.orange.text
);
editorDOM.style.setProperty(
"--bn-color-highlight-background-orange",
theme.colors.highlights.orange.background
);
editorDOM.style.setProperty(
"--bn-color-highlight-text-yellow",
theme.colors.highlights.yellow.text
);
editorDOM.style.setProperty(
"--bn-color-highlight-background-yellow",
theme.colors.highlights.yellow.background
);
editorDOM.style.setProperty(
"--bn-color-highlight-text-green",
theme.colors.highlights.green.text
);
editorDOM.style.setProperty(
"--bn-color-highlight-background-green",
theme.colors.highlights.green.background
);
editorDOM.style.setProperty(
"--bn-color-highlight-text-blue",
theme.colors.highlights.blue.text
);
editorDOM.style.setProperty(
"--bn-color-highlight-background-blue",
theme.colors.highlights.blue.background
);
editorDOM.style.setProperty(
"--bn-color-highlight-text-purple",
theme.colors.highlights.purple.text
);
editorDOM.style.setProperty(
"--bn-color-highlight-background-purple",
theme.colors.highlights.purple.background
);
editorDOM.style.setProperty(
"--bn-color-highlight-text-pink",
theme.colors.highlights.pink.text
);
editorDOM.style.setProperty(
"--bn-color-highlight-background-pink",
theme.colors.highlights.pink.background
);
export const applyBlockNoteCSSVariablesFromTheme = (
theme: Theme,
editorDOM: HTMLElement
) => cssVariablesHelper(theme, editorDOM);

editorDOM.style.setProperty("--bn-font-family", theme.fontFamily);
editorDOM.style.setProperty("--bn-border-radius", `${theme.borderRadius}px`);
// 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);
41 changes: 29 additions & 12 deletions packages/react/src/editor/BlockNoteView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,13 @@ import {
} from "@blocknote/core";
import { MantineProvider } from "@mantine/core";
import { EditorContent } from "@tiptap/react";
import { HTMLAttributes, ReactNode, useMemo } from "react";
import { HTMLAttributes, ReactNode, useEffect, useState } from "react";
import usePrefersColorScheme from "use-prefers-color-scheme";
import { Theme, applyCSSVariablesFromTheme } from "./BlockNoteTheme";
import {
Theme,
applyBlockNoteCSSVariablesFromTheme,
removeBlockNoteCSSVariables,
} from "./BlockNoteTheme";
import { FormattingToolbarPositioner } from "../components/FormattingToolbar/FormattingToolbarPositioner";
import { HyperlinkToolbarPositioner } from "../components/HyperlinkToolbar/HyperlinkToolbarPositioner";
import { ImageToolbarPositioner } from "../components/ImageToolbar/ImageToolbarPositioner";
Expand Down Expand Up @@ -45,36 +49,49 @@ export function BlockNoteView<

const systemColorScheme = usePrefersColorScheme();

const editorColorScheme = useMemo(() => {
const [editorColorScheme, setEditorColorScheme] = useState<
"light" | "dark" | undefined
>(undefined);

useEffect(() => {
removeBlockNoteCSSVariables(editor.domElement.parentElement!);

if (theme === "light") {
return "light";
setEditorColorScheme("light");
return;
}

if (theme === "dark") {
return "dark";
setEditorColorScheme("dark");
return;
}

if (typeof theme === "object" && "light" in theme && "dark" in theme) {
if (typeof theme === "object") {
if ("light" in theme && "dark" in theme) {
applyCSSVariablesFromTheme(
applyBlockNoteCSSVariablesFromTheme(
theme[systemColorScheme === "dark" ? "dark" : "light"],
editor.domElement.parentElement!
);
return systemColorScheme === "dark" ? "dark" : "light";
setEditorColorScheme(systemColorScheme === "dark" ? "dark" : "light");
return;
}

applyCSSVariablesFromTheme(theme, editor.domElement.parentElement!);
return undefined;
applyBlockNoteCSSVariablesFromTheme(
theme,
editor.domElement.parentElement!
);
setEditorColorScheme(undefined);
return;
}

return systemColorScheme === "dark" ? "dark" : "light";
setEditorColorScheme(systemColorScheme === "dark" ? "dark" : "light");
}, [systemColorScheme, editor.domElement, theme]);

return (
<MantineProvider theme={mantineTheme}>
<EditorContent
editor={editor._tiptapEditor}
className={mergeCSSClasses("bn-editor-wrapper", className || "")}
className={mergeCSSClasses("bn-container", className || "")}
data-color-scheme={editorColorScheme}
{...rest}>
{children || (
Expand Down
Loading