Skip to content

feat: Toggle blocks #1707

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

Open
wants to merge 19 commits into
base: main
Choose a base branch
from
Open
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
5 changes: 5 additions & 0 deletions examples/01-basic/04-default-blocks/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ export default function App() {
type: "heading",
content: "Heading",
},
{
type: "heading",
props: { isTogglable: true },
content: "Toggle Heading",
},
{
type: "quote",
content: "Quote",
Expand Down
6 changes: 6 additions & 0 deletions examples/06-custom-schema/06-togglable-blocks/.bnexample.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"playground": true,
"docs": true,
"author": "matthewlipski",
"tags": ["Basic"]
}
55 changes: 55 additions & 0 deletions examples/06-custom-schema/06-togglable-blocks/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";

import { ToggleBlock } from "./Toggle.js";

// Our schema with block specs, which contain the configs and implementations for
// blocks that we want our editor to use.
const schema = BlockNoteSchema.create({
blockSpecs: {
// Adds all default blocks.
...defaultBlockSpecs,
// Adds the Toggle block.
toggle: ToggleBlock,
},
});

export default function App() {
// Creates a new editor instance.
const editor = useCreateBlockNote({
schema,
initialContent: [
{
type: "paragraph",
content: "Welcome to this demo!",
},
{
type: "toggle",
content: "This is an example toggle",
children: [
{
type: "paragraph",
content: "This is the first child of the toggle block.",
},
{
type: "paragraph",
content: "This is the second child of the toggle block.",
},
],
},
{
type: "paragraph",
content: "Click the '>' icon to show/hide its children",
},
{
type: "paragraph",
},
],
});

// Renders the editor instance.
return <BlockNoteView editor={editor} />;
}
8 changes: 8 additions & 0 deletions examples/06-custom-schema/06-togglable-blocks/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# Togglable Blocks

This example shows how to create blocks with a toggle button to show/hide their children, like with the default toggle heading and list item blocks. This is done using the use the `ToggleWrapper` component from `@blocknote/react`.

**Relevant Docs:**

- [Custom Blocks](/docs/custom-schemas/custom-blocks)
- [Editor Setup](/docs/editor-basics/setup)
23 changes: 23 additions & 0 deletions examples/06-custom-schema/06-togglable-blocks/Toggle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { defaultProps } from "@blocknote/core";
import { createReactBlockSpec, ToggleWrapper } from "@blocknote/react";

// The Toggle block that we want to add to our editor.
export const ToggleBlock = createReactBlockSpec(
{
type: "toggle",
propSchema: {
...defaultProps,
},
content: "inline",
},
{
render: (props) => (
// The `ToggleWrapper` component renders a button on the left which
// toggles the visibility of the block's children. It also adds a button
// to add child blocks if there are none.
<ToggleWrapper block={props.block} editor={props.editor}>
<p ref={props.contentRef} />
</ToggleWrapper>
),
},
);
14 changes: 14 additions & 0 deletions examples/06-custom-schema/06-togglable-blocks/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<html lang="en">
<head>
<script>
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Togglable Blocks</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./main.tsx"></script>
</body>
</html>
11 changes: 11 additions & 0 deletions examples/06-custom-schema/06-togglable-blocks/main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

const root = createRoot(document.getElementById("root")!);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
27 changes: 27 additions & 0 deletions examples/06-custom-schema/06-togglable-blocks/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"name": "@blocknote/example-togglable-blocks",
"description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
"private": true,
"version": "0.12.4",
"scripts": {
"start": "vite",
"dev": "vite",
"build:prod": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@blocknote/core": "latest",
"@blocknote/react": "latest",
"@blocknote/ariakit": "latest",
"@blocknote/mantine": "latest",
"@blocknote/shadcn": "latest",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"@vitejs/plugin-react": "^4.3.1",
"vite": "^5.3.4"
}
}
36 changes: 36 additions & 0 deletions examples/06-custom-schema/06-togglable-blocks/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
{
"__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": [
"DOM",
"DOM.Iterable",
"ESNext"
],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"composite": true
},
"include": [
"."
],
"__ADD_FOR_LOCAL_DEV_references": [
{
"path": "../../../packages/core/"
},
{
"path": "../../../packages/react/"
}
]
}
32 changes: 32 additions & 0 deletions examples/06-custom-schema/06-togglable-blocks/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
import react from "@vitejs/plugin-react";
import * as fs from "fs";
import * as path from "path";
import { defineConfig } from "vite";
// import eslintPlugin from "vite-plugin-eslint";
// https://vitejs.dev/config/
export default defineConfig((conf) => ({
plugins: [react()],
optimizeDeps: {},
build: {
sourcemap: true,
},
resolve: {
alias:
conf.command === "build" ||
!fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
? {}
: ({
// Comment out the lines below to load a built version of blocknote
// or, keep as is to load live from sources with live reload working
"@blocknote/core": path.resolve(
__dirname,
"../../packages/core/src/"
),
"@blocknote/react": path.resolve(
__dirname,
"../../packages/react/src/"
),
} as any),
},
}));
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,7 @@ exports[`Test insertBlocks > Insert multiple blocks after 2`] = `
"id": "heading-0",
"props": {
"backgroundColor": "default",
"isTogglable": false,
"level": 1,
"textAlignment": "left",
"textColor": "default",
Expand Down Expand Up @@ -653,6 +654,7 @@ exports[`Test insertBlocks > Insert multiple blocks after 2`] = `
"id": "heading-with-everything",
"props": {
"backgroundColor": "red",
"isTogglable": false,
"level": 2,
"textAlignment": "center",
"textColor": "red",
Expand Down Expand Up @@ -980,6 +982,7 @@ exports[`Test insertBlocks > Insert multiple blocks before 2`] = `
"id": "heading-0",
"props": {
"backgroundColor": "default",
"isTogglable": false,
"level": 1,
"textAlignment": "left",
"textColor": "default",
Expand Down Expand Up @@ -1326,6 +1329,7 @@ exports[`Test insertBlocks > Insert multiple blocks before 2`] = `
"id": "heading-with-everything",
"props": {
"backgroundColor": "red",
"isTogglable": false,
"level": 2,
"textAlignment": "center",
"textColor": "red",
Expand Down Expand Up @@ -1573,6 +1577,7 @@ exports[`Test insertBlocks > Insert single basic block after 2`] = `
"id": "heading-0",
"props": {
"backgroundColor": "default",
"isTogglable": false,
"level": 1,
"textAlignment": "left",
"textColor": "default",
Expand Down Expand Up @@ -1919,6 +1924,7 @@ exports[`Test insertBlocks > Insert single basic block after 2`] = `
"id": "heading-with-everything",
"props": {
"backgroundColor": "red",
"isTogglable": false,
"level": 2,
"textAlignment": "center",
"textColor": "red",
Expand Down Expand Up @@ -2178,6 +2184,7 @@ exports[`Test insertBlocks > Insert single basic block before (without type) 2`]
"id": "heading-0",
"props": {
"backgroundColor": "default",
"isTogglable": false,
"level": 1,
"textAlignment": "left",
"textColor": "default",
Expand Down Expand Up @@ -2524,6 +2531,7 @@ exports[`Test insertBlocks > Insert single basic block before (without type) 2`]
"id": "heading-with-everything",
"props": {
"backgroundColor": "red",
"isTogglable": false,
"level": 2,
"textAlignment": "center",
"textColor": "red",
Expand Down Expand Up @@ -2771,6 +2779,7 @@ exports[`Test insertBlocks > Insert single basic block before 2`] = `
"id": "heading-0",
"props": {
"backgroundColor": "default",
"isTogglable": false,
"level": 1,
"textAlignment": "left",
"textColor": "default",
Expand Down Expand Up @@ -3117,6 +3126,7 @@ exports[`Test insertBlocks > Insert single basic block before 2`] = `
"id": "heading-with-everything",
"props": {
"backgroundColor": "red",
"isTogglable": false,
"level": 2,
"textAlignment": "center",
"textColor": "red",
Expand Down Expand Up @@ -3201,6 +3211,7 @@ exports[`Test insertBlocks > Insert single complex block after 1`] = `
"id": "inserted-heading-with-everything",
"props": {
"backgroundColor": "red",
"isTogglable": false,
"level": 2,
"textAlignment": "center",
"textColor": "red",
Expand Down Expand Up @@ -3291,6 +3302,7 @@ exports[`Test insertBlocks > Insert single complex block after 2`] = `
"id": "inserted-heading-with-everything",
"props": {
"backgroundColor": "red",
"isTogglable": false,
"level": 2,
"textAlignment": "center",
"textColor": "red",
Expand Down Expand Up @@ -3478,6 +3490,7 @@ exports[`Test insertBlocks > Insert single complex block after 2`] = `
"id": "heading-0",
"props": {
"backgroundColor": "default",
"isTogglable": false,
"level": 1,
"textAlignment": "left",
"textColor": "default",
Expand Down Expand Up @@ -3824,6 +3837,7 @@ exports[`Test insertBlocks > Insert single complex block after 2`] = `
"id": "heading-with-everything",
"props": {
"backgroundColor": "red",
"isTogglable": false,
"level": 2,
"textAlignment": "center",
"textColor": "red",
Expand Down Expand Up @@ -3908,6 +3922,7 @@ exports[`Test insertBlocks > Insert single complex block before 1`] = `
"id": "inserted-heading-with-everything",
"props": {
"backgroundColor": "red",
"isTogglable": false,
"level": 2,
"textAlignment": "center",
"textColor": "red",
Expand Down Expand Up @@ -3981,6 +3996,7 @@ exports[`Test insertBlocks > Insert single complex block before 2`] = `
"id": "inserted-heading-with-everything",
"props": {
"backgroundColor": "red",
"isTogglable": false,
"level": 2,
"textAlignment": "center",
"textColor": "red",
Expand Down Expand Up @@ -4185,6 +4201,7 @@ exports[`Test insertBlocks > Insert single complex block before 2`] = `
"id": "heading-0",
"props": {
"backgroundColor": "default",
"isTogglable": false,
"level": 1,
"textAlignment": "left",
"textColor": "default",
Expand Down Expand Up @@ -4531,6 +4548,7 @@ exports[`Test insertBlocks > Insert single complex block before 2`] = `
"id": "heading-with-everything",
"props": {
"backgroundColor": "red",
"isTogglable": false,
"level": 2,
"textAlignment": "center",
"textColor": "red",
Expand Down
Loading
Loading