fix: disable checkbox when editor is not editable #2406 (#2448)

Author: nperez0111

packages/core/src/blocks/ListItem/CheckListItem/block.test.ts

@@ -0,0 +1,61 @@
+import { expect, it } from "vitest";
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import type { Block } from "../../defaultBlocks.js";
+
+/**
+ * Tests for CheckListItem block behaviour, especially that the checkbox
+ * respects the editor's editable state (disabled when not editable,
+ * and change handler no-ops when not editable).
+ *
+ * @vitest-environment jsdom
+ */
+function getCheckboxFromView(view: {
+  dom: HTMLElement | DocumentFragment;
+}): HTMLInputElement {
+  const el = view.dom.querySelector('input[type="checkbox"]');
+  if (!(el instanceof HTMLInputElement)) {
+    throw new Error("Checkbox input not found in rendered output");
+  }
+  return el;
+}
+
+it("renders checkbox as enabled when editor is editable", () => {
+  const editor = BlockNoteEditor.create();
+  const block: Block = {
+    id: "1",
+    type: "checkListItem",
+    props: {
+      backgroundColor: "default",
+      textAlignment: "left",
+      textColor: "default",
+      checked: false,
+    },
+    content: [],
+    children: [],
+  };
+  const spec = editor.schema.blockSpecs.checkListItem;
+  const view = spec.implementation.render(block, editor);
+  const checkbox = getCheckboxFromView(view);
+  expect(checkbox.disabled).toBe(false);
+});
+
+it("renders checkbox as disabled when editor is not editable", () => {
+  const editor = BlockNoteEditor.create();
+  editor.isEditable = false;
+  const block: Block = {
+    id: "1",
+    type: "checkListItem",
+    props: {
+      backgroundColor: "default",
+      textAlignment: "left",
+      textColor: "default",
+      checked: false,
+    },
+    content: [],
+    children: [],
+  };
+  const spec = editor.schema.blockSpecs.checkListItem;
+  const view = spec.implementation.render(block, editor);
+  const checkbox = getCheckboxFromView(view);
+  expect(checkbox.disabled).toBe(true);
+});

packages/core/src/blocks/ListItem/CheckListItem/block.ts

@@ -82,7 +82,11 @@ export const createCheckListItemBlockSpec = createBlockSpec(
       if (block.props.checked) {
         checkbox.setAttribute("checked", "");
       }
+      checkbox.disabled = !editor.isEditable;
       checkbox.addEventListener("change", () => {
+        if (!editor.isEditable) {
+          return;
+        }
         editor.updateBlock(block, { props: { checked: !block.props.checked } });
       });
       // We use a <p> tag, because for <li> tags we'd need a <ul> element to put

packages/xl-odt-exporter/package.json

@@ -67,6 +67,7 @@
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
+    "eslint": "^8.57.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "rollup-plugin-webpack-stats": "^0.2.6",

playground/vite.config.ts

@@ -44,10 +44,10 @@ export default defineConfig((conf) => ({
               __dirname,
               "../packages/xl-multi-column/src",
             ),
-            "@liveblocks/react-blocknote": resolve(
-              __dirname,
-              "../../liveblocks/packages/liveblocks-react-blocknote/src/",
-            ),
+            // "@liveblocks/react-blocknote": resolve(
+            //   __dirname,
+            //   "../../liveblocks/packages/liveblocks-react-blocknote/src/",
+            // ),
             "@blocknote/xl-email-exporter": resolve(
               __dirname,
               "../packages/xl-email-exporter/src",