diff --git a/examples/editor/src/App.module.css b/examples/editor/src/App.module.css index fa3b3dc346..8a90b5cd3f 100644 --- a/examples/editor/src/App.module.css +++ b/examples/editor/src/App.module.css @@ -1,4 +1,4 @@ .editor { - padding: 0 calc((100% - 731px) / 2); + margin: 0 calc((100% - 731px) / 2); height: 100%; } diff --git a/examples/editor/src/App.tsx b/examples/editor/src/App.tsx index 4eb6eb3ed2..55ce63eb93 100644 --- a/examples/editor/src/App.tsx +++ b/examples/editor/src/App.tsx @@ -14,6 +14,7 @@ function App() { class: styles.editor, "data-test": "editor", }, + theme: "light", }); // Give tests a way to get prosemirror instance diff --git a/packages/core/src/BlockNoteEditor.ts b/packages/core/src/BlockNoteEditor.ts index beea32c5f7..bc3fe9074c 100644 --- a/packages/core/src/BlockNoteEditor.ts +++ b/packages/core/src/BlockNoteEditor.ts @@ -89,6 +89,12 @@ export type BlockNoteEditorOptions = { * @default true */ defaultStyles: boolean; + /** + * Whether to use the light or dark theme. + * + * @default "light" + */ + theme: "light" | "dark"; // tiptap options, undocumented _tiptapOptions: any; @@ -157,6 +163,7 @@ export class BlockNoteEditor { : [...(options._tiptapOptions?.extensions || []), ...extensions], editorProps: { attributes: { + "data-theme": options.theme || "light", ...(options.editorDOMAttributes || {}), class: [ styles.bnEditor, diff --git a/packages/core/src/api/blockManipulation/__snapshots__/blockManipulation.test.ts.snap b/packages/core/src/api/blockManipulation/__snapshots__/blockManipulation.test.ts.snap index d325d9fe16..ba5d53c8b0 100644 --- a/packages/core/src/api/blockManipulation/__snapshots__/blockManipulation.test.ts.snap +++ b/packages/core/src/api/blockManipulation/__snapshots__/blockManipulation.test.ts.snap @@ -13,7 +13,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo "type": "text", }, ], - "id": 2, + "id": "2", "props": { "backgroundColor": "default", "level": "1", @@ -30,7 +30,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo "type": "text", }, ], - "id": 1, + "id": "1", "props": { "backgroundColor": "default", "level": "1", @@ -50,7 +50,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo "type": "text", }, ], - "id": 4, + "id": "4", "props": { "backgroundColor": "default", "level": "2", @@ -67,7 +67,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo "type": "text", }, ], - "id": 3, + "id": "3", "props": { "backgroundColor": "default", "level": "2", @@ -79,7 +79,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo { "children": [], "content": [], - "id": 0, + "id": "0", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -103,7 +103,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo "type": "text", }, ], - "id": 2, + "id": "2", "props": { "backgroundColor": "default", "level": "1", @@ -120,7 +120,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo "type": "text", }, ], - "id": 1, + "id": "1", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -139,7 +139,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo "type": "text", }, ], - "id": 4, + "id": "4", "props": { "backgroundColor": "default", "level": "2", @@ -156,7 +156,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo "type": "text", }, ], - "id": 3, + "id": "3", "props": { "backgroundColor": "default", "level": "2", @@ -168,7 +168,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo { "children": [], "content": [], - "id": 0, + "id": "0", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -190,7 +190,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo "type": "text", }, ], - "id": 1, + "id": "1", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -201,7 +201,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo { "children": [], "content": [], - "id": 0, + "id": "0", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -223,7 +223,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block "type": "text", }, ], - "id": 1, + "id": "1", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -234,7 +234,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block { "children": [], "content": [], - "id": 0, + "id": "0", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -258,7 +258,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block "type": "text", }, ], - "id": 2, + "id": "2", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -283,7 +283,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block "type": "text", }, ], - "id": 1, + "id": "1", "props": { "backgroundColor": "default", "level": "3", @@ -295,7 +295,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block { "children": [], "content": [], - "id": 0, + "id": "0", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -311,7 +311,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block { "children": [], "content": [], - "id": 0, + "id": "0", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -327,7 +327,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc { "children": [], "content": [], - "id": 0, + "id": "0", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -346,7 +346,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc "type": "text", }, ], - "id": 2, + "id": "2", "props": { "backgroundColor": "default", "level": "1", @@ -363,7 +363,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc "type": "text", }, ], - "id": 1, + "id": "1", "props": { "backgroundColor": "default", "level": "1", @@ -383,7 +383,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc "type": "text", }, ], - "id": 4, + "id": "4", "props": { "backgroundColor": "default", "level": "2", @@ -400,7 +400,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc "type": "text", }, ], - "id": 3, + "id": "3", "props": { "backgroundColor": "default", "level": "2", @@ -412,7 +412,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc { "children": [], "content": [], - "id": 5, + "id": "5", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -436,7 +436,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo "type": "text", }, ], - "id": 2, + "id": "2", "props": { "backgroundColor": "default", "level": "1", @@ -453,7 +453,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo "type": "text", }, ], - "id": 1, + "id": "1", "props": { "backgroundColor": "default", "level": "1", @@ -473,7 +473,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo "type": "text", }, ], - "id": 4, + "id": "4", "props": { "backgroundColor": "default", "level": "2", @@ -490,7 +490,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo "type": "text", }, ], - "id": 3, + "id": "3", "props": { "backgroundColor": "default", "level": "2", @@ -502,7 +502,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo { "children": [], "content": [], - "id": 0, + "id": "0", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -528,7 +528,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist "type": "text", }, ], - "id": 2, + "id": "2", "props": { "backgroundColor": "default", "level": "1", @@ -545,7 +545,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist "type": "text", }, ], - "id": 1, + "id": "1", "props": { "backgroundColor": "default", "level": "1", @@ -565,7 +565,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist "type": "text", }, ], - "id": 4, + "id": "4", "props": { "backgroundColor": "default", "level": "2", @@ -582,7 +582,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist "type": "text", }, ], - "id": 3, + "id": "3", "props": { "backgroundColor": "default", "level": "2", @@ -593,7 +593,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist }, ], "content": [], - "id": 0, + "id": "0", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -604,7 +604,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist { "children": [], "content": [], - "id": 5, + "id": "5", "props": { "backgroundColor": "default", "textAlignment": "left", diff --git a/packages/core/src/api/formatConversions/__snapshots__/formatConversions.test.ts.snap b/packages/core/src/api/formatConversions/__snapshots__/formatConversions.test.ts.snap index 726ce7ffab..dbc0b0741e 100644 --- a/packages/core/src/api/formatConversions/__snapshots__/formatConversions.test.ts.snap +++ b/packages/core/src/api/formatConversions/__snapshots__/formatConversions.test.ts.snap @@ -65,7 +65,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to "type": "text", }, ], - "id": 27, + "id": "27", "props": { "backgroundColor": "default", "level": "1", @@ -83,7 +83,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to "type": "text", }, ], - "id": 28, + "id": "28", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -100,7 +100,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to "type": "text", }, ], - "id": 29, + "id": "29", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -117,7 +117,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to "type": "text", }, ], - "id": 30, + "id": "30", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -139,7 +139,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow "type": "text", }, ], - "id": 27, + "id": "27", "props": { "backgroundColor": "default", "level": "1", @@ -157,7 +157,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow "type": "text", }, ], - "id": 28, + "id": "28", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -174,7 +174,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow "type": "text", }, ], - "id": 29, + "id": "29", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -191,7 +191,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow "type": "text", }, ], - "id": 30, + "id": "30", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -271,7 +271,7 @@ exports[`Styled Block/HTML/Markdown Conversions > Convert styled HTML to blocks "type": "text", }, ], - "id": 27, + "id": "27", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -327,7 +327,7 @@ exports[`Styled Block/HTML/Markdown Conversions > Convert styled Markdown to blo "type": "text", }, ], - "id": 27, + "id": "27", "props": { "backgroundColor": "default", "textAlignment": "left", diff --git a/packages/core/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap b/packages/core/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap index 7357fac672..07c01fb270 100644 --- a/packages/core/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap +++ b/packages/core/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap @@ -4,7 +4,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex block to node 1` { "attrs": { "backgroundColor": "blue", - "id": 4, + "id": "4", "textColor": "yellow", }, "content": [ @@ -46,7 +46,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex block to node 1` { "attrs": { "backgroundColor": "red", - "id": 5, + "id": "5", "textColor": "default", }, "content": [ @@ -68,7 +68,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex block to node 1` { "attrs": { "backgroundColor": "default", - "id": 6, + "id": "6", "textColor": "default", }, "content": [ @@ -101,7 +101,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex node to block 1` "type": "text", }, ], - "id": 2, + "id": "2", "props": { "backgroundColor": "red", "textAlignment": "left", @@ -112,7 +112,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex node to block 1` { "children": [], "content": [], - "id": 3, + "id": "3", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -139,7 +139,7 @@ exports[`Complex ProseMirror Node Conversions > Convert complex node to block 1` "type": "text", }, ], - "id": 1, + "id": "1", "props": { "backgroundColor": "blue", "level": "2", @@ -154,7 +154,7 @@ exports[`Simple ProseMirror Node Conversions > Convert simple block to node 1`] { "attrs": { "backgroundColor": "default", - "id": 4, + "id": "4", "textColor": "default", }, "content": [ @@ -173,7 +173,7 @@ exports[`Simple ProseMirror Node Conversions > Convert simple node to block 1`] { "children": [], "content": [], - "id": 0, + "id": "0", "props": { "backgroundColor": "default", "textAlignment": "left", @@ -187,7 +187,7 @@ exports[`links > Convert a block with link 1`] = ` { "attrs": { "backgroundColor": "default", - "id": 4, + "id": "4", "textColor": "default", }, "content": [ @@ -222,7 +222,7 @@ exports[`links > Convert two adjacent links in a block 1`] = ` { "attrs": { "backgroundColor": "default", - "id": 4, + "id": "4", "textColor": "default", }, "content": [ diff --git a/packages/core/src/editor.module.css b/packages/core/src/editor.module.css index 83dc3b7858..63657a38ef 100644 --- a/packages/core/src/editor.module.css +++ b/packages/core/src/editor.module.css @@ -2,7 +2,8 @@ .bnEditor { outline: none; - margin-left: 50px; + padding-inline: 50px; + border-radius: 8px; /* Define a set of colors to be used throughout the app for consistency see https://atlassian.design/foundations/color for more info */ @@ -50,8 +51,16 @@ Tippy popups that are appended to document.body directly "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; +} + +[data-theme="light"] { + background-color: #FFFFFF; + color: #444444; +} - color: rgb(60, 65, 73); +[data-theme="dark"] { + background-color: #444444; + color: #DDDDDD; } .dragPreview { diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css index 92463640a5..d803811852 100644 --- a/packages/core/src/extensions/Blocks/nodes/Block.module.css +++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css @@ -34,13 +34,22 @@ NESTED BLOCKS .blockGroup .blockGroup > .blockOuter:not([data-prev-depth-changed])::before { content: " "; display: inline; - border-left: 1px solid #ccc; position: absolute; left: -20px; height: 100%; transition: all 0.2s 0.1s; } +[data-theme="light"] .blockGroup .blockGroup +> .blockOuter:not([data-prev-depth-changed])::before { + border-left: 1px solid #CCCCCC; +} + +[data-theme="dark"] .blockGroup .blockGroup +> .blockOuter:not([data-prev-depth-changed])::before { + border-left: 1px solid #999999; +} + .blockGroup .blockGroup > .blockOuter[data-prev-depth-change="-2"]::before { height: 0; } @@ -216,7 +225,6 @@ NESTED BLOCKS .blockContent.isFilter > :first-child:before { /*float: left; */ content: ""; - color: #aeb8c2; pointer-events: none; height: 0; /* width: 0; */ @@ -224,6 +232,16 @@ NESTED BLOCKS font-style: italic; } +[data-theme="light"] .blockContent.isEmpty > :first-child:before, +.blockContent.isFilter > :first-child:before { + color: #CCCCCC; +} + +[data-theme="dark"] .blockContent.isEmpty > :first-child:before, +.blockContent.isFilter > :first-child:before { + color: #999999; +} + /* TODO: would be nicer if defined from code */ .blockContent.isEmpty.hasAnchor > :first-child:before { diff --git a/packages/core/src/extensions/UniqueID/UniqueID.ts b/packages/core/src/extensions/UniqueID/UniqueID.ts index 5f1d1d1fc2..5cb4f2da60 100644 --- a/packages/core/src/extensions/UniqueID/UniqueID.ts +++ b/packages/core/src/extensions/UniqueID/UniqueID.ts @@ -60,7 +60,7 @@ const UniqueID = Extension.create({ (window as any).__TEST_OPTIONS.mockID++; } - return parseInt((window as any).__TEST_OPTIONS.mockID); + return (window as any).__TEST_OPTIONS.mockID.toString() as string; } return v4(); diff --git a/packages/react/src/BlockNoteTheme.ts b/packages/react/src/BlockNoteTheme.ts index f99bde1b47..9c2016d49b 100644 --- a/packages/react/src/BlockNoteTheme.ts +++ b/packages/react/src/BlockNoteTheme.ts @@ -1,204 +1,315 @@ import { MantineThemeOverride } from "@mantine/core"; -export const BlockNoteTheme: MantineThemeOverride = { - activeStyles: { - // Removes button press effect. - transform: "none", - }, - colorScheme: "light", - colors: { - brandFinal: [ - "#F6F6F8", - "#ECEDF0", - "#DFE1E6", - "#C2C7D0", - "#A6ADBA", - "#8993A4", - "#6D798F", - "#505F79", - "#344563", - "#172B4D", - ], - textColors: [ - "#37352f", - "#9b9a97", - "#64473a", - "#e03e3e", - "#d9730d", - "#dfab01", - "#4d6461", - "#0b6e99", - "#6940a5", - "#ad1a72", - ], - backgroundColors: [ - "#ffffff", - "#ebeced", - "#e9e5e3", - "#fbe4e4", - "#f6e9d9", - "#fbf3db", - "#ddedea", - "#ddebf1", - "#eae4f2", - "#f4dfeb", - ], - }, - components: { - Menu: { - styles: (theme) => ({ - dropdown: { - backgroundColor: "white", - boxShadow: `0px 4px 8px ${theme.colors.brandFinal[2]}, 0px 0px 1px ${theme.colors.brandFinal[2]}`, - border: `1px solid ${theme.colors.brandFinal[1]}`, - borderRadius: "6px", - padding: "2px", - }, - }), +type ColorScheme = [ + string, + string, + string, + string, + string, + string, + string, + string, + string, + string +]; + +export const blockNoteColorScheme: ColorScheme = [ + "#FFFFFF", + "#EEEEEE", + "#DDDDDD", + "#CCCCCC", + "#999999", + "#666666", + "#444444", + "#333333", + "#222222", + "#111111", +]; + +export const getBlockNoteTheme = ( + useDarkTheme: boolean = false +): MantineThemeOverride => { + const boxShadow = `0px 4px 8px ${ + useDarkTheme ? blockNoteColorScheme[8] : blockNoteColorScheme[2] + }, 0px 0px 1px ${ + useDarkTheme ? blockNoteColorScheme[6] : blockNoteColorScheme[1] + }`; + + const border = `1px solid ${ + useDarkTheme ? blockNoteColorScheme[7] : blockNoteColorScheme[1] + }`; + + const sideMenu = useDarkTheme + ? blockNoteColorScheme[4] + : blockNoteColorScheme[3]; + + const primaryBackground = useDarkTheme + ? blockNoteColorScheme[6] + : blockNoteColorScheme[0]; + const secondaryBackground = useDarkTheme + ? blockNoteColorScheme[7] + : blockNoteColorScheme[1]; + + const primaryText = useDarkTheme + ? blockNoteColorScheme[2] + : blockNoteColorScheme[6]; + const secondaryText = useDarkTheme + ? blockNoteColorScheme[4] + : blockNoteColorScheme[4]; + + const hoveredBackground = useDarkTheme + ? blockNoteColorScheme[7] + : blockNoteColorScheme[1]; + const hoveredText = useDarkTheme + ? blockNoteColorScheme[2] + : blockNoteColorScheme[6]; + + const selectedBackground = useDarkTheme + ? blockNoteColorScheme[8] + : blockNoteColorScheme[6]; + const selectedText = useDarkTheme + ? blockNoteColorScheme[2] + : blockNoteColorScheme[0]; + + const disabledBackground = useDarkTheme + ? blockNoteColorScheme[7] + : blockNoteColorScheme[1]; + const disabledText = useDarkTheme + ? blockNoteColorScheme[5] + : blockNoteColorScheme[3]; + + return { + activeStyles: { + // Removes button press effect. + transform: "none", }, - DragHandleMenu: { - styles: (theme) => ({ - root: { - ".mantine-Menu-item": { - color: theme.colors.brandFinal, - fontSize: "12px", - height: "30px", - }, - }, - }), + colorScheme: useDarkTheme ? "dark" : "light", + colors: { + scheme: blockNoteColorScheme, + dark: blockNoteColorScheme, + textColors: [ + // primaryText, + blockNoteColorScheme[6], + "#9b9a97", + "#64473a", + "#e03e3e", + "#d9730d", + "#dfab01", + "#4d6461", + "#0b6e99", + "#6940a5", + "#ad1a72", + ], + backgroundColors: [ + // primaryBackground, + blockNoteColorScheme[0], + "#ebeced", + "#e9e5e3", + "#fbe4e4", + "#f6e9d9", + "#fbf3db", + "#ddedea", + "#ddebf1", + "#eae4f2", + "#f4dfeb", + ], }, - EditHyperlinkMenu: { - styles: (theme) => ({ - root: { - backgroundColor: "white", - boxShadow: `0px 4px 8px ${theme.colors.brandFinal[2]}, 0px 0px 1px ${theme.colors.brandFinal[2]}`, - border: `1px solid ${theme.colors.brandFinal[1]}`, - borderRadius: "6px", - gap: "4px", - minWidth: "145px", - padding: "2px", - // Row - ".mantine-Group-root": { - flexWrap: "nowrap", - gap: "8px", - paddingInline: "6px", - // Row icon - ".mantine-Container-root": { - color: theme.colors.brandFinal, - display: "flex", - justifyContent: "center", - padding: "0", - width: "fit-content", + components: { + // Block Side Menu items + ActionIcon: { + styles: () => ({ + root: { + color: sideMenu, + }, + }), + }, + // Slash Menu, Formatting Toolbar dropdown, color picker dropdown + Menu: { + styles: () => ({ + dropdown: { + backgroundColor: primaryBackground, + border: border, + borderRadius: "6px", + boxShadow: boxShadow, + color: primaryText, + padding: "2px", + ".mantine-Menu-item": { + backgroundColor: primaryBackground, + border: "none", + color: primaryText, }, - // Row input field - ".mantine-TextInput-root": { - background: "transparent", - width: "300px", - ".mantine-TextInput-wrapper": { - ".mantine-TextInput-input": { - fontSize: "12px", - border: 0, - padding: 0, - }, - }, + ".mantine-Menu-item[data-hovered]": { + backgroundColor: hoveredBackground, + border: "none", + color: hoveredText, }, }, - }, - }), - }, - Toolbar: { - styles: (theme) => ({ - root: { - backgroundColor: "white", - boxShadow: `0px 4px 8px ${theme.colors.brandFinal[2]}, 0px 0px 1px ${theme.colors.brandFinal[2]}`, - border: `1px solid ${theme.colors.brandFinal[1]}`, - borderRadius: "6px", - flexWrap: "nowrap", - gap: "2px", - padding: "2px", - width: "fit-content", - // Button (including dropdown target) - ".mantine-UnstyledButton-root": { - borderRadius: "4px", - }, - // Dropdown - ".mantine-Menu-dropdown": { - // Dropdown item + }), + }, + DragHandleMenu: { + styles: () => ({ + root: { ".mantine-Menu-item": { - color: theme.colors.brandFinal, fontSize: "12px", height: "30px", - ".mantine-Menu-itemRightSection": { - paddingLeft: "5px", - }, }, }, - }, - }), - }, - Tooltip: { - styles: (theme) => ({ - root: { - color: theme.colors.brandFinal[2], - backgroundColor: theme.colors.brandFinal, - border: `1px solid ${theme.colors.brandFinal[1]}`, - borderRadius: "6px", - boxShadow: `0px 4px 8px ${theme.colors.brandFinal[2]}, 0px 0px 1px ${theme.colors.brandFinal[2]}`, - padding: "4px 10px", - textAlign: "center", - "div ~ div": { - color: theme.colors.brandFinal[4], + }), + }, + EditHyperlinkMenu: { + styles: () => ({ + root: { + backgroundColor: primaryBackground, + border: border, + borderRadius: "6px", + boxShadow: boxShadow, + color: primaryText, + gap: "4px", + minWidth: "145px", + padding: "2px", + // Row + ".mantine-Group-root": { + flexWrap: "nowrap", + gap: "8px", + paddingInline: "6px", + // Row icon + ".mantine-Container-root": { + color: primaryText, + display: "flex", + justifyContent: "center", + padding: 0, + width: "fit-content", + }, + // Row input field + ".mantine-TextInput-root": { + width: "300px", + ".mantine-TextInput-wrapper": { + ".mantine-TextInput-input": { + border: "none", + color: primaryText, + fontSize: "12px", + padding: 0, + }, + }, + }, + }, }, - }, - }), - }, - SlashMenu: { - styles: (theme) => ({ - root: { - // ...theme.other.defaultMenuStyles(theme), - ".mantine-Menu-item": { - // Icon - ".mantine-Menu-itemIcon": { - padding: "8px", - border: `1px solid ${theme.colors.brandFinal[2]}`, - backgroundColor: theme.colors.brandFinal[0], + }), + }, + Toolbar: { + styles: () => ({ + root: { + backgroundColor: primaryBackground, + boxShadow: boxShadow, + border: border, + borderRadius: "6px", + flexWrap: "nowrap", + gap: "2px", + padding: "2px", + width: "fit-content", + // Button (including dropdown target) + ".mantine-UnstyledButton-root": { + backgroundColor: primaryBackground, + border: "none", borderRadius: "4px", - color: theme.colors.brandFinal, + color: primaryText, }, - // Text - ".mantine-Menu-itemLabel": { - color: theme.colors.brandFinal, - paddingRight: "16px", - ".mantine-Stack-root": { - gap: "0", + // Hovered button + ".mantine-UnstyledButton-root:hover": { + backgroundColor: hoveredBackground, + border: "none", + color: hoveredText, + }, + // Selected button + ".mantine-UnstyledButton-root[data-selected]": { + backgroundColor: selectedBackground, + border: "none", + color: selectedText, + }, + // Disabled button + ".mantine-UnstyledButton-root[data-disabled]": { + backgroundColor: disabledBackground, + border: "none", + color: disabledText, + }, + // Dropdown + ".mantine-Menu-dropdown": { + // Dropdown item + ".mantine-Menu-item": { + fontSize: "12px", + height: "30px", + ".mantine-Menu-itemRightSection": { + paddingLeft: "5px", + }, + }, + ".mantine-Menu-item:hover": { + backgroundColor: hoveredBackground, }, }, - // Badge (keyboard shortcut) - ".mantine-Menu-itemRightSection": { - ".mantine-Badge-root": { - border: `1px solid ${theme.colors.brandFinal[2]}`, + }, + }), + }, + Tooltip: { + styles: () => ({ + root: { + backgroundColor: primaryBackground, + border: border, + borderRadius: "6px", + boxShadow: boxShadow, + color: primaryText, + padding: "4px 10px", + textAlign: "center", + "div ~ div": { + color: secondaryText, + }, + }, + }), + }, + SlashMenu: { + styles: () => ({ + root: { + ".mantine-Menu-item": { + // Icon + ".mantine-Menu-itemIcon": { + backgroundColor: secondaryBackground, + borderRadius: "4px", + color: primaryText, + padding: "8px", + }, + // Text + ".mantine-Menu-itemLabel": { + paddingRight: "16px", + ".mantine-Stack-root": { + gap: "0", + }, + }, + // Badge (keyboard shortcut) + ".mantine-Menu-itemRightSection": { + ".mantine-Badge-root": { + backgroundColor: secondaryBackground, + color: primaryText, + }, }, }, }, - }, - }), + }), + }, + }, + fontFamily: "Inter", + other: { + colors: [ + "default", + "gray", + "brown", + "red", + "orange", + "yellow", + "green", + "blue", + "purple", + "pink", + ], }, - }, - fontFamily: "Inter", - other: { - colors: [ - "default", - "gray", - "brown", - "red", - "orange", - "yellow", - "green", - "blue", - "purple", - "pink", - ], - }, - primaryColor: "brandFinal", - primaryShade: 9, + primaryColor: "scheme", + }; }; diff --git a/packages/react/src/BlockSideMenu/BlockSideMenuFactory.tsx b/packages/react/src/BlockSideMenu/BlockSideMenuFactory.tsx index fedc81ff58..a4c654c957 100644 --- a/packages/react/src/BlockSideMenu/BlockSideMenuFactory.tsx +++ b/packages/react/src/BlockSideMenu/BlockSideMenuFactory.tsx @@ -5,10 +5,12 @@ import { } from "@blocknote/core"; import { BlockSideMenu as ReactBlockSideMenu } from "./components/BlockSideMenu"; import { ReactElementFactory } from "../ElementFactory/components/ReactElementFactory"; +import { MantineThemeOverride } from "@mantine/core"; import { DragHandleMenuProps } from "./components/DragHandleMenu"; import { DefaultDragHandleMenu } from "./components/DefaultDragHandleMenu"; export const createReactBlockSideMenuFactory = ( + theme: MantineThemeOverride, dragHandleMenu: FC = DefaultDragHandleMenu ) => { const CustomDragHandleMenu = dragHandleMenu; @@ -20,6 +22,7 @@ export const createReactBlockSideMenuFactory = ( ReactElementFactory( staticParams, CustomBlockSideMenu, + theme, { animation: "fade", offset: [0, 0], diff --git a/packages/react/src/BlockSideMenu/components/BlockSideMenu.tsx b/packages/react/src/BlockSideMenu/components/BlockSideMenu.tsx index f828e5f696..c79c795051 100644 --- a/packages/react/src/BlockSideMenu/components/BlockSideMenu.tsx +++ b/packages/react/src/BlockSideMenu/components/BlockSideMenu.tsx @@ -46,7 +46,7 @@ export const BlockSideMenu = (props: BlockSideMenuProps) => { return ( - + { { props.freezeMenu(); }} size={24} - color={"brandFinal.3"} data-test={"dragHandle"}> {} diff --git a/packages/react/src/ElementFactory/components/EditorElementComponentWrapper.tsx b/packages/react/src/ElementFactory/components/EditorElementComponentWrapper.tsx index 012870a8ea..3113bc55eb 100644 --- a/packages/react/src/ElementFactory/components/EditorElementComponentWrapper.tsx +++ b/packages/react/src/ElementFactory/components/EditorElementComponentWrapper.tsx @@ -1,7 +1,6 @@ -import { MantineProvider } from "@mantine/core"; +import { MantineProvider, MantineThemeOverride } from "@mantine/core"; import Tippy, { TippyProps } from "@tippyjs/react"; import { RequiredDynamicParams } from "@blocknote/core"; -import { BlockNoteTheme } from "../../BlockNoteTheme"; import { FC, useCallback, useState } from "react"; /** @@ -22,6 +21,7 @@ export function EditorElementComponentWrapper< staticParams: ElementStaticParams; dynamicParams: ElementDynamicParams; editorElementComponent: FC; + theme: MantineThemeOverride; tippyProps?: TippyProps; }) { const EditorElementComponent = props.editorElementComponent; @@ -44,7 +44,7 @@ export function EditorElementComponentWrapper< }, [props.rootElement]); return ( - + ( staticParams: ElementStaticParams, EditorElementComponent: FC, + theme: MantineThemeOverride, tippyProps?: TippyProps ): EditorElement => { const rootElement = document.createElement("div"); @@ -43,6 +46,7 @@ export const ReactElementFactory = < staticParams={staticParams} dynamicParams={dynamicParams} editorElementComponent={EditorElementComponent} + theme={theme} tippyProps={tippyProps} /> ); @@ -55,6 +59,7 @@ export const ReactElementFactory = < staticParams={staticParams} dynamicParams={prevDynamicParams!} editorElementComponent={EditorElementComponent} + theme={theme} tippyProps={tippyProps} /> ); diff --git a/packages/react/src/FormattingToolbar/FormattingToolbarFactory.tsx b/packages/react/src/FormattingToolbar/FormattingToolbarFactory.tsx index 49d458a35d..4235c97856 100644 --- a/packages/react/src/FormattingToolbar/FormattingToolbarFactory.tsx +++ b/packages/react/src/FormattingToolbar/FormattingToolbarFactory.tsx @@ -6,15 +6,17 @@ import { import { FormattingToolbar as ReactFormattingToolbar } from "./components/FormattingToolbar"; import { ReactElementFactory } from "../ElementFactory/components/ReactElementFactory"; import { FC } from "react"; +import { MantineThemeOverride } from "@mantine/core"; export const createReactFormattingToolbarFactory = ( + theme: MantineThemeOverride, toolbar: FC<{ editor: BlockNoteEditor }> = ReactFormattingToolbar ) => { return (staticParams: FormattingToolbarStaticParams) => ReactElementFactory< FormattingToolbarStaticParams, FormattingToolbarDynamicParams - >(staticParams, toolbar, { + >(staticParams, toolbar, theme, { animation: "fade", placement: "top-start", }); diff --git a/packages/react/src/HyperlinkToolbar/HyperlinkToolbarFactory.tsx b/packages/react/src/HyperlinkToolbar/HyperlinkToolbarFactory.tsx index e6aa424a01..5bf7e0ad27 100644 --- a/packages/react/src/HyperlinkToolbar/HyperlinkToolbarFactory.tsx +++ b/packages/react/src/HyperlinkToolbar/HyperlinkToolbarFactory.tsx @@ -6,14 +6,15 @@ import { } from "@blocknote/core"; import { HyperlinkToolbar as ReactHyperlinkToolbar } from "./components/HyperlinkToolbar"; import { ReactElementFactory } from "../ElementFactory/components/ReactElementFactory"; +import { MantineThemeOverride } from "@mantine/core"; -export const ReactHyperlinkToolbarFactory: HyperlinkToolbarFactory = ( - staticParams -): HyperlinkToolbar => - ReactElementFactory< - HyperlinkToolbarStaticParams, - HyperlinkToolbarDynamicParams - >(staticParams, ReactHyperlinkToolbar, { - animation: "fade", - placement: "top-start", - }); +export const createReactHyperlinkToolbarFactory = + (theme: MantineThemeOverride): HyperlinkToolbarFactory => + (staticParams): HyperlinkToolbar => + ReactElementFactory< + HyperlinkToolbarStaticParams, + HyperlinkToolbarDynamicParams + >(staticParams, ReactHyperlinkToolbar, theme, { + animation: "fade", + placement: "top-start", + }); diff --git a/packages/react/src/SharedComponents/Toolbar/components/ToolbarButton.tsx b/packages/react/src/SharedComponents/Toolbar/components/ToolbarButton.tsx index f4782e7a71..ef55f69c1b 100644 --- a/packages/react/src/SharedComponents/Toolbar/components/ToolbarButton.tsx +++ b/packages/react/src/SharedComponents/Toolbar/components/ToolbarButton.tsx @@ -33,13 +33,12 @@ export const ToolbarButton = forwardRef( {props.children ? (