Skip to content

feat: Dark theme fixes + enable theme on website + docs #236

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.

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 4 commits into from
Jun 15, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
8 changes: 4 additions & 4 deletions packages/core/src/editor.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,13 @@ Tippy popups that are appended to document.body directly
}

[data-theme="light"] {
background-color: #ffffff;
color: #444444;
background-color: #FFFFFF;
color: #3F3F3F;
}

[data-theme="dark"] {
background-color: #444444;
color: #dddddd;
background-color: #1F1F1F;
color: #CFCFCF;
}

.dragPreview {
Expand Down
8 changes: 4 additions & 4 deletions packages/core/src/extensions/Blocks/nodes/Block.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,14 @@ NESTED BLOCKS
.blockGroup
.blockGroup
> .blockOuter:not([data-prev-depth-changed])::before {
border-left: 1px solid #cccccc;
border-left: 1px solid #AFAFAF;
}

[data-theme="dark"]
.blockGroup
.blockGroup
> .blockOuter:not([data-prev-depth-changed])::before {
border-left: 1px solid #999999;
border-left: 1px solid #7F7F7F;
}

.blockGroup .blockGroup > .blockOuter[data-prev-depth-change="-2"]::before {
Expand Down Expand Up @@ -250,12 +250,12 @@ NESTED BLOCKS

[data-theme="light"] .isEmpty .inlineContent:before,
.isFilter .inlineContent:before {
color: #cccccc;
color: #CFCFCF;
}

[data-theme="dark"] .isEmpty .inlineContent:before,
.isFilter .inlineContent:before {
color: #999999;
color: #7F7F7F;
}

/* TODO: would be nicer if defined from code */
Expand Down
26 changes: 13 additions & 13 deletions packages/react/src/BlockNoteTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ type ColorScheme = [

export const blockNoteColorScheme: ColorScheme = [
"#FFFFFF",
"#EEEEEE",
"#DDDDDD",
"#CCCCCC",
"#999999",
"#666666",
"#444444",
"#333333",
"#222222",
"#111111",
"#EFEFEF",
"#CFCFCF",
"#AFAFAF",
"#7F7F7F",
"#3F3F3F",
"#1F1F1F",
"#161616",
"#0F0F0F",
"#000000",
];

export const getBlockNoteTheme = (
Expand All @@ -41,7 +41,7 @@ export const getBlockNoteTheme = (

const sideMenu = useDarkTheme
? blockNoteColorScheme[4]
: blockNoteColorScheme[3];
: blockNoteColorScheme[2];

const primaryBackground = useDarkTheme
? blockNoteColorScheme[6]
Expand All @@ -52,7 +52,7 @@ export const getBlockNoteTheme = (

const primaryText = useDarkTheme
? blockNoteColorScheme[2]
: blockNoteColorScheme[6];
: blockNoteColorScheme[5];
const secondaryText = useDarkTheme
? blockNoteColorScheme[4]
: blockNoteColorScheme[4];
Expand All @@ -62,11 +62,11 @@ export const getBlockNoteTheme = (
: blockNoteColorScheme[1];
const hoveredText = useDarkTheme
? blockNoteColorScheme[2]
: blockNoteColorScheme[6];
: blockNoteColorScheme[5];

const selectedBackground = useDarkTheme
? blockNoteColorScheme[8]
: blockNoteColorScheme[6];
: blockNoteColorScheme[5];
const selectedText = useDarkTheme
? blockNoteColorScheme[2]
: blockNoteColorScheme[0];
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ const METADATA_DEFAULT = {

export default defineConfig({
vite: {},
appearance: false,
appearance: true,
srcDir: ".",
outDir: "build",

Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<template>
<BasicPure></BasicPure>
<BasicPure :theme="isDark ? 'dark' : 'light'"></BasicPure>
</template>
<script>
import { applyPureReactInVue } from "veaury";
// This is a React component

import { ReactBlockNote } from "./ReactBlockNote";
import { ref } from "vue";
import { useData } from "vitepress";

export default {
components: {
BasicPure: applyPureReactInVue(ReactBlockNote),
},
setup() {
data() {
return {
// foo: ref("Hello!"),
isDark: useData().isDark,
};
},
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import "@blocknote/core/style.css";
import { BlockNoteView, useBlockNote } from "@blocknote/react";
import { useEffect, useMemo, useState } from "react";
import { useEffect, useMemo } from "react";
import YPartyKitProvider from "y-partykit/provider";
import * as Y from "yjs";
import * as styles from "./ReactBlockNote.module.css";
Expand Down Expand Up @@ -38,11 +38,7 @@ const getRandomElement = (list: any[]) =>
const getRandomColor = () => getRandomElement(colors);
const getRandomName = () => getRandomElement(names);

export function ReactBlockNote() {
const [darkMode, setDarkMode] = useState(
document.documentElement.classList.contains("dark")
);

export function ReactBlockNote(props: { theme: "light" | "dark" }) {
const [doc, provider] = useMemo(() => {
console.log("create");
const doc = new Y.Doc();
Expand All @@ -54,24 +50,27 @@ export function ReactBlockNote() {
return [doc, provider];
}, []);

const editor = useBlockNote({
editorDOMAttributes: {
class: styles.editor,
},
theme: darkMode ? "dark" : "light",
collaboration: {
provider,
fragment: doc.getXmlFragment("blocknote"),
user: {
name: getRandomName(),
color: getRandomColor(),
const editor = useBlockNote(
{
editorDOMAttributes: {
class: styles.editor,
},
theme: props.theme,
collaboration: {
provider,
fragment: doc.getXmlFragment("blocknote"),
user: {
name: getRandomName(),
color: getRandomColor(),
},
},
},
});
[props.theme]
);

useEffect(() => {
let shownAlert = false;
const listener = (e: any) => {
const listener = () => {
if (!shownAlert) {
alert(
"Text you enter in this demo is displayed publicly on the internet to show multiplayer features. Be kind :)"
Expand All @@ -85,25 +84,5 @@ export function ReactBlockNote() {
};
}, [editor?.domElement]);

useEffect(() => {
// Create the mutation observer
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (
mutation.type === "attributes" &&
mutation.attributeName === "class"
) {
const hasDarkClass =
document.documentElement.classList.contains("dark");
setDarkMode(hasDarkClass);
// TODO: how to update the editor's theme?
}
}
});

// Set the observer to watch for changes on the <html> element
observer.observe(document.documentElement, { attributes: true });
}, []);

return <BlockNoteView editor={editor} />;
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ defineProps<{ feature: FeaturesCardData }>();
<div
class="feature-card"
:style="{
backgroundImage: `url(${
isDark ? feature.bgImgDark : feature.bgImgLight
})`,
backgroundImage: `linear-gradient(to bottom, transparent 50%, ${
isDark ? '#111418' : 'white'
} 70%), url(${isDark ? feature.bgImgDark : feature.bgImgLight})`,
}"
>
<h4>{{ feature.title }}</h4>
Expand All @@ -22,6 +22,9 @@ defineProps<{ feature: FeaturesCardData }>();
</Card>
</template>

backgroundImage: `linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255,
255, 255, 1)), url(${ isDark ? feature.bgImgDark : feature.bgImgLight })`

<style scoped lang="scss">
.feature-card {
margin: 5px;
Expand Down Expand Up @@ -49,7 +52,7 @@ defineProps<{ feature: FeaturesCardData }>();
font-weight: 600;
font-size: 15px;
line-height: 1.2;
background: white;
//background: white;
}

p {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import BlockNote from "@theme/components/Examples/BlockNote/BlockNote.vue";
<div class="editor-wrapper">
<ClientOnly><BlockNote /></ClientOnly>
</div>
<div class="try-here-image"/>
<div class="try-here-image" />
</div>
<!-- features
sponsors
Expand Down Expand Up @@ -100,7 +100,7 @@ header {
.editor-wrapper {
border-radius: 12px;
box-shadow: inset 0 0 0 1px #c4d0d966, inset 0 -1px #ffffff1a,
inset 0 1px #84b9f61a;
inset 0 1px #84b9f61a;
// background-image: radial-gradient(
// 145% 110% at 46% 20%,
// #fdfeff 50%,
Expand All @@ -114,6 +114,10 @@ header {
overflow-y: scroll;
}

html.dark .editor-wrapper {
background: #111418;
}

.try-here-image {
position: relative;
width: 250px;
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/.vitepress/theme/components/Home.vue
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ defineProps<{
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 400px,
rgb(0, 0, 0) 700px
rgb(7, 8, 11) 700px
),
radial-gradient(circle at 15% 35%, #243148, rgba(34, 34, 34, 0) 25%),
radial-gradient(circle at 85% 20%, #1c2e3c, rgba(34, 34, 34, 0) 25%), #222;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,30 +1,35 @@
<!-- MySandbox.vue -->
<template>
<!-- 'code-options' is a build-in prop, do not edit it -->
<ClientOnly>
<Sandbox
:rtl="rtl"
:template="'react-ts'"
:light-theme="lightTheme"
:dark-theme="darkTheme"
:options="{
...props, // do not forget it
showLineNumbers: true,
editorWidthPercentage: 40,
}"
:custom-setup="{
...props, // do not forget it
deps: { '@blocknote/react': 'latest' },
}"
:code-options="codeOptions"
>
<slot />
</Sandbox>
</ClientOnly>
<div>
<ClientOnly>
<Sandbox
:rtl="rtl"
:template="'react-ts'"
:light-theme="lightTheme"
:dark-theme="darkTheme"
:theme="isDark ? 'dark' : 'light'"
:options="{
...props, // do not forget it
showLineNumbers: false,
editorWidthPercentage: 40,
}"
:custom-setup="{
...props, // do not forget it
deps: { '@blocknote/react': 'latest', 'react-icons': 'latest' },
}"
:code-options="codeOptions"
>
<slot />
</Sandbox>
</ClientOnly>
</div>
</template>

<script setup lang="ts">
import { useData } from "vitepress";
import { Sandbox, sandboxProps } from "vitepress-plugin-sandpack";

const { isDark } = useData();
const props = defineProps(sandboxProps);
</script>
Loading