feat: Checkbox/TODO list item block

docs/package.json

@@ -1,6 +1,6 @@
 {
  "name": "docs",
- "version": "0.12.4",
+ "version": "0.13.1",
  "private": true,
  "scripts": {
  "dev": "next dev",
@@ -9,11 +9,11 @@
  "lint": "next lint"
  },
  "dependencies": {
- "@blocknote/core": "^0.12.4",
- "@blocknote/react": "^0.12.4",
- "@blocknote/ariakit": "^0.12.4",
- "@blocknote/mantine": "^0.12.4",
- "@blocknote/shadcn": "^0.12.4",
+ "@blocknote/ariakit": "^0.13.1",
+ "@blocknote/core": "^0.13.0",
+ "@blocknote/mantine": "^0.13.1",
+ "@blocknote/react": "^0.13.1",
+ "@blocknote/shadcn": "^0.13.1",
  "@headlessui/react": "^1.7.18",
  "@mantine/core": "^7.7.1",
  "@next/bundle-analyzer": "^14.1.0",

lerna.json

@@ -2,5 +2,5 @@
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "useNx": false,
  "useWorkspaces": true,
- "version": "0.12.4"
+ "version": "0.13.1"
 }

packages/ariakit/package.json

@@ -3,7 +3,7 @@
  "homepage": "https://github.com/TypeCellOS/BlockNote",
  "private": false,
  "license": "MPL-2.0",
- "version": "0.12.4",
+ "version": "0.13.1",
  "files": [
  "dist",
  "types",
@@ -49,8 +49,8 @@
  },
  "dependencies": {
  "@ariakit/react": "^0.4.3",
- "@blocknote/core": "0.12.4",
- "@blocknote/react": "0.12.4",
+ "@blocknote/core": "^0.13.0",
+ "@blocknote/react": "^0.13.1",
  "react": "^18",
  "react-dom": "^18"
  },

packages/core/package.json

@@ -3,7 +3,7 @@
  "homepage": "https://github.com/TypeCellOS/BlockNote",
  "private": false,
  "license": "MPL-2.0",
- "version": "0.12.4",
+ "version": "0.13.0",
  "files": [
  "dist",
  "types",

packages/core/src/api/exporters/html/__snapshots__/lists/basic/external.html

@@ -0,0 +1 @@
+<ul><li><p class="bn-inline-content">Bullet List Item 1</p></li><li><p class="bn-inline-content">Bullet List Item 2</p></li></ul><ol><li><p class="bn-inline-content">Numbered List Item 1</p></li><li><p class="bn-inline-content">Numbered List Item 2</p></li></ol><ul><li><div><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></div></li><li><div><input type="checkbox" checked><p class="bn-inline-content">Check List Item 2</p></div></li></ul>

packages/core/src/api/exporters/html/__snapshots__/lists/basic/internal.html

@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="bulletListItem"><p class="bn-inline-content">Bullet List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="bulletListItem"><p class="bn-inline-content">Bullet List Item 2</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="3"><div class="bn-block" data-node-type="blockContainer" data-id="3"><div class="bn-block-content" data-content-type="numberedListItem" data-index="null"><p class="bn-inline-content">Numbered List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="4"><div class="bn-block" data-node-type="blockContainer" data-id="4"><div class="bn-block-content" data-content-type="numberedListItem" data-index="null"><p class="bn-inline-content">Numbered List Item 2</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="5"><div class="bn-block" data-node-type="blockContainer" data-id="5"><div class="bn-block-content" data-content-type="checkListItem" data-checked="false"><div><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></div></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="6"><div class="bn-block" data-node-type="blockContainer" data-id="6"><div class="bn-block-content" data-content-type="checkListItem" data-checked="true"><div><input type="checkbox" checked=""><p class="bn-inline-content">Check List Item 2</p></div></div></div></div></div>

packages/core/src/api/exporters/html/__snapshots__/lists/nested/external.html

@@ -0,0 +1 @@
+<ul><li><p class="bn-inline-content">Bullet List Item 1</p></li><li><p class="bn-inline-content">Bullet List Item 2</p><ol><li><p class="bn-inline-content">Numbered List Item 1</p></li><li><p class="bn-inline-content">Numbered List Item 2</p><ul><li><div><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></div></li><li><div><input type="checkbox" checked><p class="bn-inline-content">Check List Item 2</p></div></li></ul></li></ol></li></ul>

packages/core/src/api/exporters/html/__snapshots__/lists/nested/internal.html

@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="bulletListItem"><p class="bn-inline-content">Bullet List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="bulletListItem"><p class="bn-inline-content">Bullet List Item 2</p></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="3"><div class="bn-block" data-node-type="blockContainer" data-id="3"><div class="bn-block-content" data-content-type="numberedListItem" data-index="null"><p class="bn-inline-content">Numbered List Item 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="4"><div class="bn-block" data-node-type="blockContainer" data-id="4"><div class="bn-block-content" data-content-type="numberedListItem" data-index="null"><p class="bn-inline-content">Numbered List Item 2</p></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="5"><div class="bn-block" data-node-type="blockContainer" data-id="5"><div class="bn-block-content" data-content-type="checkListItem" data-checked="false"><div><input type="checkbox"><p class="bn-inline-content">Check List Item 1</p></div></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="6"><div class="bn-block" data-node-type="blockContainer" data-id="6"><div class="bn-block-content" data-content-type="checkListItem" data-checked="true"><div><input type="checkbox" checked=""><p class="bn-inline-content">Check List Item 2</p></div></div></div></div></div></div></div></div></div></div></div>

packages/core/src/api/exporters/html/externalHTMLExporter.ts

@@ -73,7 +73,10 @@ export const createExternalHTMLExporter = <
  .use(rehypeParse, { fragment: true })
  .use(simplifyBlocks, {
  orderedListItemBlockTypes: new Set<string>(["numberedListItem"]),
- unorderedListItemBlockTypes: new Set<string>(["bulletListItem"]),
+ unorderedListItemBlockTypes: new Set<string>([
+ "bulletListItem",
+ "checkListItem",
+ ]),
  })
  .use(rehypeStringify)
  .processSync(serializeProseMirrorFragment(fragment, serializer));

packages/core/src/api/exporters/html/util/simplifyBlocksRehypePlugin.ts

@@ -98,7 +98,7 @@ export function simplifyBlocks(options: SimplifyBlocksOptions) {
  ) as HASTElement;
 
  // Adds only the content inside the block to the active list.
- listItemElement.children.push(blockContent.children[0]);
+ listItemElement.children.push(...blockContent.children);
  // Nested blocks have already been processed in the recursive function call, so the resulting elements are
  // also added to the active list.
  if (blockGroup !== null) {

packages/core/src/api/exporters/markdown/__snapshots__/lists/basic/markdown.md

@@ -0,0 +1,8 @@
+* Bullet List Item 1
+* Bullet List Item 2
+
+1. Numbered List Item 1
+2. Numbered List Item 2
+
+* \[ ] Check List Item 1
+* \[x] Check List Item 2

packages/core/src/api/exporters/markdown/__snapshots__/lists/nested/markdown.md

@@ -0,0 +1,10 @@
+* Bullet List Item 1
+
+* Bullet List Item 2
+
+ 1. Numbered List Item 1
+
+ 2. Numbered List Item 2
+
+ * \[ ] Check List Item 1
+ * \[x] Check List Item 2

packages/core/src/api/exporters/markdown/markdownExporter.ts

@@ -9,11 +9,13 @@ import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
 import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
 import { createExternalHTMLExporter } from "../html/externalHTMLExporter";
 import { removeUnderlines } from "./removeUnderlinesRehypePlugin";
+import { addSpacesToCheckboxes } from "./util/addSpacesToCheckboxesRehypePlugin";
 
 export function cleanHTMLToMarkdown(cleanHTMLString: string) {
  const markdownString = unified()
  .use(rehypeParse, { fragment: true })
  .use(removeUnderlines)
+ .use(addSpacesToCheckboxes)
  .use(rehypeRemark)
  .use(remarkGfm)
  .use(remarkStringify)

packages/core/src/api/exporters/markdown/util/addSpacesToCheckboxesRehypePlugin.ts

@@ -0,0 +1,42 @@
+import { Element as HASTElement, Parent as HASTParent } from "hast";
+import { fromDom } from "hast-util-from-dom";
+
+/**
+ * Rehype plugin which adds a space after each checkbox input element. This is
+ * because remark doesn't add any spaces between the checkbox input and the text
+ * itself, but these are needed for correct Markdown syntax.
+ */
+export function addSpacesToCheckboxes() {
+ const helper = (tree: HASTParent) => {
+ if (tree.children && "length" in tree.children && tree.children.length) {
+ for (let i = tree.children.length - 1; i >= 0; i--) {
+ const child = tree.children[i];
+ const nextChild =
+ i + 1 < tree.children.length ? tree.children[i + 1] : undefined;
+
+ // Checks for paragraph element after checkbox input element.
+ if (
+ child.type === "element" &&
+ child.tagName === "input" &&
+ child.properties?.type === "checkbox" &&
+ nextChild?.type === "element" &&
+ nextChild.tagName === "p"
+ ) {
+ // Converts paragraph to span, otherwise remark will think it needs to
+ // be on a new line.
+ nextChild.tagName = "span";
+ // Adds a space after the checkbox input element.
+ nextChild.children.splice(
+ 0,
+ 0,
+ fromDom(document.createTextNode(" ")) as HASTElement
+ );
+ } else {
+ helper(child as HASTParent);
+ }
+ }
+ }
+ };
+
+ return helper;
+}

packages/core/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap

@@ -744,6 +744,56 @@ exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert
 }
 `;
 
+exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert lists/basic to/from prosemirror 1`] = `
+{
+ "attrs": {
+ "backgroundColor": "default",
+ "id": "1",
+ "textColor": "default",
+ },
+ "content": [
+ {
+ "attrs": {
+ "textAlignment": "left",
+ },
+ "content": [
+ {
+ "text": "Bullet List Item 1",
+ "type": "text",
+ },
+ ],
+ "type": "bulletListItem",
+ },
+ ],
+ "type": "blockContainer",
+}
+`;
+
+exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert lists/nested to/from prosemirror 1`] = `
+{
+ "attrs": {
+ "backgroundColor": "default",
+ "id": "1",
+ "textColor": "default",
+ },
+ "content": [
+ {
+ "attrs": {
+ "textAlignment": "left",
+ },
+ "content": [
+ {
+ "text": "Bullet List Item 1",
+ "type": "text",
+ },
+ ],
+ "type": "bulletListItem",
+ },
+ ],
+ "type": "blockContainer",
+}
+`;
+
 exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert paragraph/basic to/from prosemirror 1`] = `
 {
  "attrs": {