@estiva-app/ui 0.65.3 → 0.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.65.3",
+  "version": "0.67.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",
@@ -136,6 +136,7 @@
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-code-block-lowlight": "^3.31.3",
     "@tiptap/extension-mention": "^3.31.3",
+    "@tiptap/extension-table": "^3.31.3",
     "@tiptap/pm": "^3.31.3",
     "@tiptap/react": "^3.31.3",
     "@tiptap/starter-kit": "^3.31.3",

package/registry.json

@@ -4,9 +4,9 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.65.3",
-    "exports": 140,
-    "typeExports": 145,
+    "packageVersion": "0.67.0",
+    "exports": 149,
+    "typeExports": 146,
     "files": null
   },
   "storybook": {
@@ -15,6 +15,44 @@
     "devUrl": "http://localhost:6008"
   },
   "entries": [
+    {
+      "name": "appendTableColumn",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/EditorTableControls.tsx",
+      "purpose": "A column after the last one: the ➕ right of the table.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-editortablecontrols--docs",
+      "storyId": "primitives-editortablecontrols--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "appendTableRow",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/EditorTableControls.tsx",
+      "purpose": "A row after the last one: the ➕ under the table.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-editortablecontrols--docs",
+      "storyId": "primitives-editortablecontrols--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "applyFormat",
       "repo": "estiva-ui",
@@ -734,6 +772,44 @@
         "signal:bg-transparent signal:border signal:border-border-default signal:text-text-primary signal:shadow-none signal:hover:bg-success-muted signal:hover:border-success-outline signal:hover:text-success-default signal:transition-colors"
       ]
     },
+    {
+      "name": "Callout",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/BlockNodes.tsx",
+      "purpose": "A callout — SPEC §13.3's `tone` on a quote (RIC-19): a quote drawn to stand out, in one of GitHub's alert kinds (`note`, `tip`, `important`, `warning`, `caution`).",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-blocknodes--docs",
+      "storyId": "primitives-blocknodes--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "calloutLook",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/RichText.tsx",
+      "purpose": "The tone a callout is drawn in: its own, or `note` for one this part does not know (§13.3).",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "components-richtext--docs",
+      "storyId": "components-richtext--every-block",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "CaptionedReference",
       "repo": "estiva-ui",
@@ -967,6 +1043,25 @@
         "rounded-lg transition-colors bg-bg-selected cursor-pointer hover:bg-bg-hover"
       ]
     },
+    {
+      "name": "Checklist",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/BlockNodes.tsx",
+      "purpose": "A checklist item — SPEC §13.3's `checked` on a list item (RIC-19): `true` ticked, `false` not, absent a plain item.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-blocknodes--docs",
+      "storyId": "primitives-blocknodes--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "Chip",
       "repo": "estiva-ui",
@@ -1906,6 +2001,44 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "deleteTableColumn",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/EditorTableControls.tsx",
+      "purpose": "The same for a column: the last one deletes the table.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-editortablecontrols--docs",
+      "storyId": "primitives-editortablecontrols--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "deleteTableRow",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/EditorTableControls.tsx",
+      "purpose": "The cell's row, or the whole table when it is its only one: a table holds at least one row (prosemirror-tables refuses to delete it).",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-editortablecontrols--docs",
+      "storyId": "primitives-editortablecontrols--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "DialogShell",
       "repo": "estiva-ui",
@@ -2235,6 +2368,47 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "EditorTableControls",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/EditorTableControls.tsx",
+      "purpose": "A table's own controls in a Tiptap editor: point at a cell for a handle on its row and on its column, and a ➕ bar under the table and right of it.",
+      "purposeFrom": "page",
+      "props": [
+        {
+          "name": "editor",
+          "takes": "Editor | null",
+          "required": true,
+          "note": "The editor, with TableKit (`@tiptap/extension-table`) in its extensions."
+        },
+        {
+          "name": "children",
+          "takes": "anything",
+          "required": true,
+          "note": "The `EditorContent`."
+        },
+        {
+          "name": "className",
+          "takes": "text",
+          "required": false,
+          "note": null
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-editortablecontrols--docs",
+      "storyId": "primitives-editortablecontrols--default",
+      "docPage": "src/EditorTableControls.mdx",
+      "app": null,
+      "looks": [
+        "rounded-lg border border-border-default bg-bg-elevated shadow-lg shadow-none -translate-x-1/2 -translate-y-1/2",
+        "rounded-lg border border-border-default bg-bg-elevated shadow-lg shadow-none"
+      ]
+    },
     {
       "name": "EmptyState",
       "repo": "estiva-ui",
@@ -3144,6 +3318,25 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "isChecklistTick",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/BlockNodes.tsx",
+      "purpose": "Whether a change is a click on a checklist item's box.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-blocknodes--docs",
+      "storyId": "primitives-blocknodes--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "isSuggestionActive",
       "repo": "estiva-ui",
@@ -4164,6 +4357,12 @@
           "required": false,
           "note": "The ⋮'s accessible name and tooltip. Default \"More options for {label}\"."
         },
+        {
+          "name": "action",
+          "takes": "SectionAction",
+          "required": false,
+          "note": "One button beside the ⋮, shown with it: any 16px icon, its tooltip and its handler — a `SectionHeader` action's shape."
+        },
         {
           "name": "hint",
           "takes": "anything",
@@ -5406,6 +5605,12 @@
           "takes": "a handler",
           "required": false,
           "note": "Draws a block this part has no design for (an attachment, a widget)."
+        },
+        {
+          "name": "onTick",
+          "takes": "a handler",
+          "required": false,
+          "note": "Ticks or unticks a checklist item, by its block id: its box is then a control, one click where the text is read."
         }
       ],
       "variants": [
@@ -5430,7 +5635,7 @@
         "[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:border [&_:not(pre)>code]:border-border-default [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary",
         "[&_pre>code]:text-[1em] [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:rounded-md [&_pre]:bg-bg-code [&_pre]:px-3 [&_pre]:py-2.5 [&_pre]:font-mono [&_pre]:text-[0.85em] [&_pre]:leading-relaxed [&_pre]:text-text-primary",
         "[&_:is(.hljs-keyword,.hljs-doctag,.hljs-type,.hljs-template-tag,.hljs-template-variable)]:text-syntax-keyword [&_.hljs-title]:text-syntax-function [&_:is(.hljs-number,.hljs-literal,.hljs-attr,.hljs-attribute,.hljs-meta,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id)]:text-syntax-constant [&_:is(.hljs-string,.hljs-regexp)]:text-syntax-string [&_:is(.hljs-built_in,.hljs-symbol)]:text-syntax-variable [&_.hljs-comment]:text-syntax-comment [&_:is(.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo)]:text-syntax-tag",
-        "[&_:is(th,td)>p]:m-0 [&_:is(th,td)]:border [&_:is(th,td)]:border-border-default [&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top [&_table]:w-full [&_table]:border-collapse [&_th]:bg-bg-code [&_th]:font-medium [&_th]:text-text-primary",
+        "[&_:is(th,td)>p]:m-0 [&_:is(th,td)]:border [&_:is(th,td)]:border-border-default [&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top [&_table]:my-2 [&_table]:w-full [&_table]:border-collapse [&_th]:bg-bg-code [&_th]:font-medium [&_th]:text-text-primary",
         "[&_em]:italic [&_strong]:font-semibold [&_strong]:text-text-primary [&_u]:underline [&_u]:decoration-text-muted [&_u]:underline-offset-2",
         "text-body-2 leading-normal [&>:is(h2,h3)]:text-body-2 [&>:is(h2,h3)]:font-semibold [&>h1]:text-h4",
         "text-caption leading-snug [&>:is(h1,h2,h3)]:mb-0.5 [&>:is(h1,h2,h3)]:mt-1.5 [&>:is(h1,h2,h3)+:is(h1,h2,h3)]:mt-1 [&>:is(h1,h2,h3):last-child]:mb-0 [&>:is(h2,h3)]:text-caption [&>:is(h2,h3)]:font-semibold [&>h1]:text-body-2 [&>h1]:font-semibold"

package/src/BlockNodes.mdx

@@ -6,7 +6,8 @@ import * as BlockNodesStories from './BlockNodes.stories'
 # BlockNodes
 
 The Tiptap nodes an editor of a block document needs beside StarterKit: an id
-on every block, a block it cannot edit kept whole, a reference, and a file.
+on every block, a block it cannot edit kept whole, a reference, a file, a
+checklist item and a callout.
 
 <Canvas of={BlockNodesStories.Default} />
 
@@ -34,8 +35,11 @@ import StarterKit from '@tiptap/starter-kit'
 import {
   AttachmentNode,
   BlockId,
+  Callout,
+  Checklist,
   ReferenceNode,
   UnknownBlock,
+  isChecklistTick,
   type AttachmentViewProps,
   type ReferenceViewProps,
 } from '@estiva-app/ui/editor'
@@ -50,11 +54,17 @@ const editor = useEditor({
   extensions: [
     StarterKit,
     BlockId,
+    Checklist,
+    Callout,
     UnknownBlock,
     ReferenceNode.configure({ view: Reference }),
     AttachmentNode.configure({ view: File }),
   ],
   content: opened,
+  // A tick is a click, so no blur follows it: save it now.
+  onUpdate: ({ transaction }) => {
+    if (isChecklistTick(transaction)) console.log('save now')
+  },
 })
 
 <EditorContent editor={editor} />
@@ -74,9 +84,30 @@ const editor = useEditor({
 - `UnknownBlock` draws a block the editor has no design for as its text, in a
   box. It cannot be changed here, only moved or deleted, and it is saved back
   exactly as it arrived.
+- `Checklist` is a list item with `checked` (§13.3): a box before it that
+  ticks with one click. `[ ] ` or `[] ` at the start of a line makes one,
+  `[x] ` a ticked one; `/`'s Checklist does too, in a block editor
+  (`formatSection('block')`). A change that is a tick says so
+  (`isChecklistTick`): save it at once, as no blur follows a click on the box.
+  The box is named by its item's words, and ticks only while the editor is
+  editable — `setEditable` is followed, not read once. Without `Checklist`, a
+  save drops the tick and keeps the item, and `/` does not offer Checklist.
+- `Callout` is a quote with a `tone` (§13.3), drawn on its tone's wash as
+  `RichText` draws it. `/` offers Note and Warning in a block editor that has
+  it; the other tones are read and kept as written.
 
 <Canvas of={BlockNodesStories.WithoutViews} />
 
+<Canvas of={BlockNodesStories.ChecklistAndCallouts} />
+
 ## What it owns
 
 Nothing. It only draws. Clicks and keys are yours.
+
+## Keys
+
+| Key | In a checklist item |
+| --- | --- |
+| Enter | Starts the next item, unticked. At the start of the item, its text moves down with its tick. On an empty item, leaves the list. |
+| Backspace | At the start of the item, takes its box away; again, joins it to the item above. |
+| Space after `[ ]`, `[]` or `[x]` | At the start of a line, makes a checklist item (ticked for `[x]`). |

package/src/BlockNodes.stories.tsx

@@ -4,7 +4,7 @@ import StarterKit from '@tiptap/starter-kit'
 import { AttachmentCard } from './AttachmentCard'
 import { InlineChip } from './InlineChip'
 import { richTextClassName } from './RichText'
-import { AttachmentNode, BlockId, ReferenceNode, UnknownBlock, type AttachmentViewProps, type ReferenceViewProps } from './BlockNodes'
+import { AttachmentNode, BlockId, Callout, Checklist, ReferenceNode, UnknownBlock, type AttachmentViewProps, type ReferenceViewProps } from './BlockNodes'
 
 /**
  * The nodes an editor of a block document adds to StarterKit: an id on every
@@ -77,3 +77,31 @@ export const Default: Story = {
 export const WithoutViews: Story = {
   render: () => <WithAnEditor views={false} />,
 }
+
+const item = (blockId: string, text: string, checked?: boolean) => ({
+  type: 'listItem',
+  attrs: { blockId, ...(checked === undefined ? {} : { checked }) },
+  content: [{ type: 'paragraph', content: [{ type: 'text', text }] }],
+})
+
+function WithChecklist() {
+  const editor = useEditor({
+    extensions: [StarterKit, BlockId, Checklist, Callout],
+    content: {
+      type: 'doc',
+      content: [
+        { type: 'bulletList', attrs: { blockId: 'l1' }, content: [item('i1', 'Ticked: click the box', true), item('i2', 'Enter starts the next one unticked', false), item('i3', 'A plain item')] },
+        { type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: 'Type [ ] and a space at the start of a line for a checklist.' }] },
+        { type: 'blockquote', attrs: { blockId: 'q1', tone: 'note' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'A note.' }] }] },
+        { type: 'blockquote', attrs: { blockId: 'q2', tone: 'warning' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'A warning.' }] }] },
+      ],
+    },
+    editorProps: { attributes: { class: richTextClassName('default', 'outline-none'), 'aria-label': 'Text' } },
+  })
+  return <EditorContent editor={editor} className="max-w-[560px]" />
+}
+
+/** A checklist and two callouts, in the editor: the box ticks with one click, as where it is read (RIC-19). */
+export const ChecklistAndCallouts: Story = {
+  render: () => <WithChecklist />,
+}

package/src/BlockNodes.test.tsx

@@ -8,11 +8,12 @@
  * reads — so each test is a load, an edit or none, and a read back.
  */
 import { afterEach, describe, expect, it } from 'vitest'
-import { render, screen, cleanup } from '@testing-library/react'
+import { act, render, screen, cleanup, waitFor } from '@testing-library/react'
 import { Editor } from '@tiptap/core'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import { AttachmentNode, BlockId, ReferenceNode, UnknownBlock, type ReferenceViewProps } from './BlockNodes'
+import { AttachmentNode, BlockId, Callout, Checklist, ReferenceNode, UnknownBlock, isChecklistTick, type ReferenceViewProps } from './BlockNodes'
+import { applyFormat } from './ComposerTriggers'
 
 const EXTENSIONS = [StarterKit, BlockId, UnknownBlock, ReferenceNode, AttachmentNode]
 
@@ -573,3 +574,141 @@ describe('Tab on a list item — MAN-13', () => {
     expect(item.content![1].attrs?.blockId ?? null).toBeNull()
   })
 })
+
+describe('a checklist item and a callout — RIC-19', () => {
+  const WITH = [StarterKit, BlockId, Checklist, Callout]
+  const press = (key: string) => editor!.view.someProp('handleKeyDown', (f) => f(editor!.view, new KeyboardEvent('keydown', { key })))
+  const item = (id: string, text: string, checked?: boolean) => ({
+    type: 'listItem',
+    attrs: { blockId: id, ...(checked === undefined ? {} : { checked }) },
+    content: [{ type: 'paragraph', content: text ? [{ type: 'text', text }] : [] }],
+  })
+  const CHECKLIST = {
+    type: 'doc',
+    content: [
+      { type: 'bulletList', attrs: { blockId: 'l1' }, content: [item('i1', 'ship', true), item('i2', 'plain')] },
+      { type: 'blockquote', attrs: { blockId: 'q1', tone: 'warning' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'careful' }] }] },
+    ],
+  }
+  const items = () => ((editor!.getJSON() as Json).content![0].content ?? []).map((n) => [JSON.stringify(n.content).match(/"text":"([^"]*)"/)?.[1] ?? '', n.attrs?.checked ?? null])
+  /** The end of "ship": 1 opens the list, 1 the item, 1 its paragraph. */
+  const END_OF_SHIP = 3 + 4
+
+  it('keeps a tick and a tone through a load and a read, and a plain item plain', () => {
+    editor = new Editor({ extensions: WITH, content: CHECKLIST })
+    expect(items()).toEqual([['ship', true], ['plain', null]])
+    expect((editor.getJSON() as Json).content![1].attrs?.tone).toBe('warning')
+    expect(editor.getHTML()).toContain('data-callout="warning"')
+  })
+
+  it('starts the next item unticked on Enter, never with the tick it was split from', () => {
+    editor = new Editor({ extensions: WITH, content: CHECKLIST })
+    editor.commands.setTextSelection(END_OF_SHIP)
+    expect(press('Enter')).toBe(true)
+    expect(items()).toEqual([['ship', true], ['', false], ['plain', null]])
+  })
+
+  it('starts the next item unticked on Enter over a selection, the selection gone (review of #170)', () => {
+    editor = new Editor({ extensions: WITH, content: CHECKLIST })
+    editor.commands.setTextSelection({ from: 4, to: 5 })
+    expect(press('Enter')).toBe(true)
+    expect(items()).toEqual([['s', true], ['ip', false], ['plain', null]])
+  })
+
+  it('moves the text down with its tick on Enter at the start of an item', () => {
+    editor = new Editor({ extensions: WITH, content: CHECKLIST })
+    editor.commands.setTextSelection(3)
+    expect(press('Enter')).toBe(true)
+    expect(items()).toEqual([['', false], ['ship', true], ['plain', null]])
+  })
+
+  it('takes the box away first on Backspace at the start of an item', () => {
+    editor = new Editor({ extensions: WITH, content: CHECKLIST })
+    editor.commands.setTextSelection(3)
+    expect(press('Backspace')).toBe(true)
+    expect(items()).toEqual([['ship', null], ['plain', null]])
+  })
+
+  /** A space typed after `text`, as a key reaches the input rules. */
+  const typeSpaceAfter = (doc: object, at: number) => {
+    editor = new Editor({ extensions: WITH, content: doc })
+    editor.commands.setTextSelection(at)
+    const tr = () => editor!.state.tr.insertText(' ', at, at)
+    return editor.view.someProp('handleTextInput', (f) => f(editor!.view, at, at, ' ', tr))
+  }
+
+  it('makes a checklist item from [ ] at the start of a line', () => {
+    expect(typeSpaceAfter({ type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: '[ ]' }] }] }, 4)).toBe(true)
+    const list = (editor!.getJSON() as Json).content![0]
+    expect(list.type).toBe('bulletList')
+    expect(list.content![0].attrs?.checked).toBe(false)
+    expect(editor!.getText().trim()).toBe('')
+  })
+
+  it('turns a list item into a ticked one from [x]', () => {
+    const doc = { type: 'doc', content: [{ type: 'bulletList', content: [item('i1', '[x]')] }] }
+    expect(typeSpaceAfter(doc, 6)).toBe(true)
+    expect(items()).toEqual([['', true]])
+  })
+
+  it('makes a checklist and a callout from `/`', () => {
+    editor = new Editor({ extensions: WITH, content: { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'todo' }] }, { type: 'paragraph', content: [{ type: 'text', text: 'heads up' }] }] } })
+    editor.commands.setTextSelection(2)
+    expect(applyFormat(editor, 'checklist')).toBe(true)
+    editor.commands.setTextSelection(editor.state.doc.content.size - 2)
+    expect(applyFormat(editor, 'note')).toBe(true)
+    const [list, quote] = (editor.getJSON() as Json).content!
+    expect(list.content![0].attrs?.checked).toBe(false)
+    expect(quote.attrs?.tone).toBe('note')
+  })
+
+  it('keeps a tick when `/` Checklist is picked on a ticked item (review of #170)', () => {
+    editor = new Editor({ extensions: WITH, content: CHECKLIST })
+    editor.commands.setTextSelection(4)
+    expect(applyFormat(editor, 'checklist')).toBe(true)
+    expect(items()[0]).toEqual(['ship', true])
+  })
+
+  it('leaves `[] ` as typed in an editor with no bullet list (review of #170)', () => {
+    editor = new Editor({ extensions: [StarterKit.configure({ bulletList: false }), BlockId, Checklist], content: { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: '[]' }] }] } })
+    editor.commands.setTextSelection(3)
+    const tr = () => editor!.state.tr.insertText(' ', 3, 3)
+    expect(editor.view.someProp('handleTextInput', (f) => f(editor!.view, 3, 3, ' ', tr))).toBeFalsy()
+    expect(editor.getText()).toBe('[]')
+  })
+
+  it('ticks with one click on the box, and says the change was a tick', async () => {
+    let ticked = false
+    function Checklisted() {
+      const e = useEditor({ extensions: WITH, content: CHECKLIST, onUpdate: ({ transaction }) => { ticked ||= isChecklistTick(transaction) } })
+      editor = e ?? undefined
+      return <EditorContent editor={e} />
+    }
+    render(<Checklisted />)
+    // Named by its item's words (Katerina, review of #170).
+    const boxes = await screen.findAllByRole('checkbox', { name: 'ship' })
+    expect(boxes).toHaveLength(1)
+    expect(boxes[0].getAttribute('aria-checked')).toBe('true')
+    boxes[0].click()
+    expect(items()[0]).toEqual(['ship', false])
+    expect(ticked).toBe(true)
+  })
+
+  it('follows the editor going read-only and back, not only how it was when drawn', async () => {
+    function Checklisted() {
+      const e = useEditor({ extensions: WITH, content: CHECKLIST })
+      editor = e ?? undefined
+      return <EditorContent editor={e} />
+    }
+    const { container } = render(<Checklisted />)
+    await screen.findByRole('checkbox', { name: 'ship' })
+    const box = () => container.querySelector('[data-checklist-box]')!
+    act(() => editor!.setEditable(false))
+    // A picture now: the box around it says done, and nothing ticks.
+    expect([box().getAttribute('role'), box().getAttribute('aria-checked'), box().getAttribute('aria-readonly')]).toEqual(['checkbox', 'true', 'true'])
+    await waitFor(() => expect(box().querySelector('[role=checkbox]')).toBeNull())
+    act(() => editor!.setEditable(true))
+    expect(box().getAttribute('role')).toBeNull()
+    expect(await screen.findByRole('checkbox', { name: 'ship' })).toBeTruthy()
+  })
+})