From bf1798180e7313d694cb4d55ac215136abfac536 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Fri, 11 Aug 2023 15:54:59 +0200 Subject: [PATCH] Updated theme selection in docs --- packages/website/docs/docs/block-types.md | 3 +-- packages/website/docs/docs/blocks.md | 3 +-- packages/website/docs/docs/converting-blocks.md | 12 ++++-------- packages/website/docs/docs/cursor-selections.md | 6 ++---- packages/website/docs/docs/editor.md | 6 +----- packages/website/docs/docs/formatting-toolbar.md | 6 ++---- packages/website/docs/docs/introduction.md | 6 ++---- .../website/docs/docs/real-time-collaboration.md | 6 ++---- packages/website/docs/docs/side-menu.md | 12 ++++-------- packages/website/docs/docs/slash-menu.md | 3 +-- packages/website/docs/docs/theming.md | 2 +- packages/website/docs/docs/ui-elements.md | 12 ++++-------- 12 files changed, 25 insertions(+), 52 deletions(-) diff --git a/packages/website/docs/docs/block-types.md b/packages/website/docs/docs/block-types.md index 7733e2188..35ceaa066 100644 --- a/packages/website/docs/docs/block-types.md +++ b/packages/website/docs/docs/block-types.md @@ -203,7 +203,6 @@ export default function App() { // Creates a new editor instance. const editor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", // Tells BlockNote which blocks to use. blockSchema: customSchema, slashMenuItems: [ @@ -213,7 +212,7 @@ export default function App() { }); // Renders the editor instance using a React component. - return ; + return ; } ``` diff --git a/packages/website/docs/docs/blocks.md b/packages/website/docs/docs/blocks.md index 3b420d83e..f33276490 100644 --- a/packages/website/docs/docs/blocks.md +++ b/packages/website/docs/docs/blocks.md @@ -87,7 +87,6 @@ export default function App() { // Creates a new editor instance. const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", // Listens for when the editor's contents change. onEditorContentChange: (editor) => // Converts the editor's contents to an array of Block objects. @@ -98,7 +97,7 @@ export default function App() { // objects, below. return (
- + 
{JSON.stringify(blocks, null, 2)}
); diff --git a/packages/website/docs/docs/converting-blocks.md b/packages/website/docs/docs/converting-blocks.md index f167e3e74..198c00dba 100644 --- a/packages/website/docs/docs/converting-blocks.md +++ b/packages/website/docs/docs/converting-blocks.md @@ -62,7 +62,6 @@ export default function App() { // Creates a new editor instance. const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", // Listens for when the editor's contents change. onEditorContentChange: (editor) => { // Converts the editor's contents from Block objects to Markdown and @@ -79,7 +78,7 @@ export default function App() { // Renders the editor instance, and its contents as Markdown below. return (
- + 
{markdown}
); @@ -133,7 +132,6 @@ export default function App() { // Creates a new editor instance. const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", // Makes the editor non-editable. editable: false }) @@ -158,7 +156,7 @@ export default function App() { value={markdown} onChange={(event) => setMarkdown(event.target.value)} /> - + ); } @@ -217,7 +215,6 @@ export default function App() { // Creates a new editor instance. const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", // Listens for when the editor's contents change. onEditorContentChange: (editor) => { // Converts the editor's contents from Block objects to HTML and saves @@ -233,7 +230,7 @@ export default function App() { // Renders the editor instance, and its contents as HTML below. return (
- + 
{html}
); @@ -287,7 +284,6 @@ export default function App() { // Creates a new editor instance. const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", // Makes the editor non-editable. editable: false }) @@ -312,7 +308,7 @@ export default function App() { value={html} onChange={(event) => setHTML(event.target.value)} /> - + ); } diff --git a/packages/website/docs/docs/cursor-selections.md b/packages/website/docs/docs/cursor-selections.md index c3724d98f..1bb3b565c 100644 --- a/packages/website/docs/docs/cursor-selections.md +++ b/packages/website/docs/docs/cursor-selections.md @@ -91,7 +91,6 @@ import "@blocknote/core/style.css"; export default function App() { // Creates a new editor instance. const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", // Listens for when the text cursor position changes. onTextCursorPositionChange: (editor) => { // Gets the block currently hovered by the text cursor. @@ -125,7 +124,7 @@ export default function App() { }) // Renders the editor instance. - return ; + return ; } ``` @@ -179,7 +178,6 @@ import "@blocknote/core/style.css"; export default function App() { // Creates a new editor instance. const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", // Listens for when the text cursor position changes. onTextCursorPositionChange: (editor) => { // Gets the blocks currently spanned by the selection. @@ -226,7 +224,7 @@ export default function App() { }); // Renders the editor instance. - return ; + return ; } ``` diff --git a/packages/website/docs/docs/editor.md b/packages/website/docs/docs/editor.md index e146a09dc..280b790ab 100644 --- a/packages/website/docs/docs/editor.md +++ b/packages/website/docs/docs/editor.md @@ -34,7 +34,6 @@ export type BlockNoteEditorOptions = Partial<{ customElements: CustomElements; uiFactories: UiFactories; defaultStyles: boolean; - theme: "light" | "dark"; }>; ``` @@ -58,8 +57,6 @@ export type BlockNoteEditorOptions = Partial<{ `defaultStyles`: Whether to use the default font and reset the styles of `

`, `

  • `, `

    `, etc. elements that are used in BlockNote. Defaults to true if undefined. -`theme:` Whether to use the light or dark theme. - ## Demo: Saving & Restoring Editor Contents By default, BlockNote doesn't preserve the editor contents when your app is reopened or refreshed. However, using the editor options, you can change this by using the editor options. @@ -79,7 +76,6 @@ const initialContent: string | null = localStorage.getItem("editorContent"); export default function App() { // Creates a new editor instance. const editor: BlockNoteEditor | null = useBlockNote({ - theme: "{{ getTheme(isDark) }}", // If the editor contents were previously saved, restores them. initialContent: initialContent ? JSON.parse(initialContent) : undefined, // Serializes and saves the editor contents to local storage. @@ -92,7 +88,7 @@ export default function App() { }); // Renders the editor instance. - return ; + return ; } ``` diff --git a/packages/website/docs/docs/formatting-toolbar.md b/packages/website/docs/docs/formatting-toolbar.md index aaf8fa4aa..99c2bab46 100644 --- a/packages/website/docs/docs/formatting-toolbar.md +++ b/packages/website/docs/docs/formatting-toolbar.md @@ -93,13 +93,11 @@ const CustomFormattingToolbar = (props: { editor: BlockNoteEditor }) => { export default function App() { // Creates a new editor instance. - const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", - }); + const editor: BlockNoteEditor = useBlockNote(); // Renders the editor instance. return ( - + ; + return ; } ``` diff --git a/packages/website/docs/docs/real-time-collaboration.md b/packages/website/docs/docs/real-time-collaboration.md index 6b892d8d3..09212891d 100644 --- a/packages/website/docs/docs/real-time-collaboration.md +++ b/packages/website/docs/docs/real-time-collaboration.md @@ -94,7 +94,6 @@ const provider = new YPartyKitProvider( export default function App() { // Creates a new editor instance. const editor: BlockNoteEditor | null = useBlockNote({ - theme: "{{ getTheme(isDark) }}", collaboration: { provider, fragment: doc.getXmlFragment("document-store"), @@ -106,7 +105,7 @@ export default function App() { }); // Renders the editor instance using a React component. - return ; + return ; } ``` @@ -136,7 +135,6 @@ const provider = new YPartyKitProvider( export default function App() { // Creates a new editor instance. const editor: BlockNoteEditor | null = useBlockNote({ - theme: "{{ getTheme(isDark) }}", collaboration: { provider, fragment: doc.getXmlFragment("document-store"), @@ -148,7 +146,7 @@ export default function App() { }); // Renders the editor instance using a React component. - return ; + return ; } ``` diff --git a/packages/website/docs/docs/side-menu.md b/packages/website/docs/docs/side-menu.md index f1c846f15..d797ba5a0 100644 --- a/packages/website/docs/docs/side-menu.md +++ b/packages/website/docs/docs/side-menu.md @@ -62,13 +62,11 @@ const CustomSideMenu = (props: SideMenuProps) => ( export default function App() { // Creates a new editor instance. - const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", - }); + const editor: BlockNoteEditor = useBlockNote(); // Renders the editor instance. return ( - + @@ -130,13 +128,11 @@ const CustomDragHandleMenu = (props: { export default function App() { // Creates a new editor instance. - const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", - }); + const editor: BlockNoteEditor = useBlockNote(); // Renders the editor instance. return ( - + diff --git a/packages/website/docs/docs/slash-menu.md b/packages/website/docs/docs/slash-menu.md index 8994eb45f..407d3e875 100644 --- a/packages/website/docs/docs/slash-menu.md +++ b/packages/website/docs/docs/slash-menu.md @@ -71,12 +71,11 @@ const customSlashMenuItemList = [ export default function App() { // Creates a new editor instance. const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", slashMenuItems: customSlashMenuItemList, }); // Renders the editor instance. - return ; + return ; } ``` diff --git a/packages/website/docs/docs/theming.md b/packages/website/docs/docs/theming.md index faea8a7fe..ec0071dfe 100644 --- a/packages/website/docs/docs/theming.md +++ b/packages/website/docs/docs/theming.md @@ -116,7 +116,7 @@ export default function App() { ::: -If we pass both a light and dark theme to `BlockNoteView`, like in the demo, BlockNote automatically chooses which one to use based on the user's browser settings. However, you can just pass a single theme instead, if you want to use the same one regardless of browser settings. +If we pass both a light and dark theme to `BlockNoteView`, like in the demo, BlockNote automatically chooses which one to use based on the user's browser settings. However, you can just pass `"light"`/`"dark"` (for the light & dark default themes), or a single custom theme instead, if you want to use the same one regardless of browser settings. ## Adding DOM Attributes diff --git a/packages/website/docs/docs/ui-elements.md b/packages/website/docs/docs/ui-elements.md index d72ed39be..d848a1a05 100644 --- a/packages/website/docs/docs/ui-elements.md +++ b/packages/website/docs/docs/ui-elements.md @@ -66,13 +66,11 @@ import "@blocknote/core/style.css"; export default function App() { // Creates a new editor instance. - const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", - }); + const editor: BlockNoteEditor = useBlockNote(); // Renders the editor instance. return ( - + @@ -110,13 +108,11 @@ import "@blocknote/core/style.css"; export default function App() { // Creates a new editor instance. - const editor: BlockNoteEditor = useBlockNote({ - theme: "{{ getTheme(isDark) }}", - }); + const editor: BlockNoteEditor = useBlockNote(); // Renders the editor instance. return ( - +