diff --git a/packages/core/src/blocks/ListItem/CheckListItem/block.test.ts b/packages/core/src/blocks/ListItem/CheckListItem/block.test.ts new file mode 100644 index 0000000000..c635aeda3a --- /dev/null +++ b/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); +}); diff --git a/packages/core/src/blocks/ListItem/CheckListItem/block.ts b/packages/core/src/blocks/ListItem/CheckListItem/block.ts index b32ee408ea..6d514270bf 100644 --- a/packages/core/src/blocks/ListItem/CheckListItem/block.ts +++ b/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

tag, because for

  • tags we'd need a