+import { useData } from 'vitepress';
+import { getTheme, getStyles } from "./demoUtils";
+
+const { isDark } = useData();
+
+
# Introduction to Blocks
So, you've set up a BlockNote editor and your users can start writing content, organized in blocks. What are blocks exactly, and how do we access the blocks from code?
@@ -38,7 +45,7 @@ function App() {
So, BlockNote is centered around the idea of blocks. A block - like a heading, paragraph, or list item - contains a piece of content and optionally nested blocks:
-
+
![image]()
In code, the `Block` type is used to describe any given block in the editor:
@@ -68,7 +75,7 @@ Now that we know how blocks are represented in code, let's take a look at the li
::: sandbox {template=react-ts}
-```typescript /App.tsx
+```typescript-vue /App.tsx
import { useState } from "react";
import { BlockNoteEditor, Block } from "@blocknote/core";
import { BlockNoteView, useBlockNote } from "@blocknote/react";
@@ -80,6 +87,7 @@ export default function App() {
// Creates a new editor instance.
const editor: BlockNoteEditor | null = useBlockNote({
+ theme: "{{ getTheme(isDark) }}",
// Listens for when the editor's contents change.
onEditorContentChange: (editor: BlockNoteEditor) =>
// Converts the editor's contents to an array of Block objects.
@@ -97,4 +105,12 @@ export default function App() {
}
```
+```css-vue /styles.css [hidden]
+{{ getStyles(isDark) }}
+
+pre {
+ color: gray;
+}
+```
+
:::
diff --git a/packages/website/docs/docs/converting-blocks.md b/packages/website/docs/docs/converting-blocks.md
index 3a78593fbc..0f214f5e2c 100644
--- a/packages/website/docs/docs/converting-blocks.md
+++ b/packages/website/docs/docs/converting-blocks.md
@@ -5,6 +5,13 @@ imageTitle: Markdown & HTML
path: /docs/converting-blocks
---
+
+
# Markdown & HTML
It's possible to export or import Blocks to and from Markdown and HTML.
@@ -43,7 +50,7 @@ The output is simplified as Markdown does not support all features of BlockNote
::: sandbox {template=react-ts}
-```typescript /App.tsx
+```typescript-vue /App.tsx
import { useState } from "react";
import { BlockNoteEditor } from "@blocknote/core";
import { BlockNoteView, useBlockNote } from "@blocknote/react";
@@ -55,6 +62,7 @@ export default function App() {
// Creates a new editor instance.
const editor: BlockNoteEditor | null = useBlockNote({
+ theme: "{{ getTheme(isDark) }}",
// Listens for when the editor's contents change.
onEditorContentChange: (editor: BlockNoteEditor) => {
// Converts the editor's contents from Block objects to Markdown and
@@ -72,12 +80,21 @@ export default function App() {
return (
-
{markdown}
+
{markdown}
);
}
```
+```css-vue /styles.css [hidden]
+{{ getStyles(isDark) }}
+
+pre {
+ color: gray;
+ white-space: pre-wrap;
+}
+```
+
:::
### Converting Markdown to Blocks
@@ -104,7 +121,7 @@ Tries to create `Block` and `InlineNode` objects based on Markdown syntax, thoug
::: sandbox {template=react-ts}
-```typescript /App.tsx
+```typescript-vue /App.tsx
import { useEffect, useState } from "react";
import { BlockNoteEditor, Block } from "@blocknote/core";
import { BlockNoteView, useBlockNote } from "@blocknote/react";
@@ -116,6 +133,7 @@ export default function App() {
// Creates a new editor instance.
const editor: BlockNoteEditor | null = useBlockNote({
+ theme: "{{ getTheme(isDark) }}",
// Makes the editor non-editable.
editable: false
})
@@ -137,7 +155,6 @@ export default function App() {
return (
+
+
+
+