@estiva-app/ui 0.65.3 → 0.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.65.3",
+  "version": "0.66.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,8 +4,8 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.65.3",
-    "exports": 140,
+    "packageVersion": "0.66.0",
+    "exports": 144,
     "typeExports": 145,
     "files": null
   },
@@ -734,6 +734,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 +1005,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",
@@ -3144,6 +3201,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",
@@ -5406,6 +5482,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": [

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()
+  })
+})

package/src/BlockNodes.tsx

@@ -1,9 +1,12 @@
 import type { ComponentType } from 'react'
-import { Extension, Node } from '@tiptap/core'
-import type { Node as ProseMirrorNode, Slice } from '@tiptap/pm/model'
-import { Plugin, PluginKey, type Transaction } from '@tiptap/pm/state'
+import { Extension, InputRule, Node, type Editor } from '@tiptap/core'
+import { DOMSerializer, type Node as ProseMirrorNode, type Slice } from '@tiptap/pm/model'
+import { Plugin, PluginKey, type EditorState, type Transaction } from '@tiptap/pm/state'
 import { Mapping, ReplaceAroundStep } from '@tiptap/pm/transform'
-import { NodeViewWrapper, ReactNodeViewRenderer, type ReactNodeViewProps } from '@tiptap/react'
+import type { EditorView, NodeView } from '@tiptap/pm/view'
+import { NodeViewWrapper, ReactNodeViewRenderer, ReactRenderer, type ReactNodeViewProps } from '@tiptap/react'
+import { Checkbox, type CheckboxProps } from './Checkbox'
+import { calloutLook } from './RichText'
 
 /*
  * The four nodes an editor of a block document needs that a stock schema does
@@ -529,3 +532,223 @@ export const AttachmentNode = Node.create<AttachmentNodeOptions>({
     ))
   },
 })
+
+const TICK = 'checklistTick'
+
+/**
+ * Whether a change is a click on a checklist item's box. The click does not
+ * focus the editor, so no blur follows it: an editor that saves on blur saves
+ * a tick straight away instead (RIC-19, Miky 2026-10-13: one click ticks).
+ */
+export function isChecklistTick(transaction: Transaction): boolean {
+  return transaction.getMeta(TICK) === true
+}
+
+/** A list or quote command by name: StarterKit's declare them, and this package builds without StarterKit. */
+type Chain = ReturnType<Editor['chain']>
+function named(chain: Chain, command: string, ...args: unknown[]): Chain {
+  const own = (chain as unknown as Record<string, ((...a: unknown[]) => Chain) | undefined>)[command]
+  return own ? own(...args) : chain
+}
+
+/** The list item the caret's paragraph is the first line of, if it is. */
+function itemAtCaret(state: EditorState): { node: ProseMirrorNode; pos: number } | null {
+  const { $from } = state.selection
+  if ($from.depth < 2) return null
+  const item = $from.node(-1)
+  if (item.type.name !== 'listItem' || $from.index(-1) !== 0) return null
+  return { node: item, pos: $from.before(-1) }
+}
+
+const sameAttrs = (a: ProseMirrorNode, b: ProseMirrorNode) =>
+  Object.keys({ ...a.attrs, ...b.attrs }).every((key) => a.attrs[key] === b.attrs[key])
+
+/**
+ * A list item, drawn with a box before it when it is a checklist item. The box
+ * is the package's `Checkbox`, as `RichText` draws it, and the item's own
+ * text and inner lists follow it in a `div`. Any change to the item's
+ * attributes draws it again, which is what a tick is.
+ *
+ * The box is named by the item's words, and follows them as they are typed.
+ * Whether it ticks follows the editor's `editable`, read again on every
+ * update — `setEditable` sends one — not only when the item was drawn
+ * (Katerina, review of #170). Not editable, it is a picture, and the box around
+ * it says done or not to a screen reader, as `RichText`'s does.
+ */
+function listItemView(editor: Editor, node: ProseMirrorNode, view: EditorView, getPos: () => number | undefined): NodeView {
+  const toDOM = node.type.spec.toDOM
+  const { dom, contentDOM } = toDOM ? DOMSerializer.renderSpec(document, toDOM(node)) : { dom: document.createElement('li'), contentDOM: undefined }
+  const checked = node.attrs.checked
+  if (typeof checked !== 'boolean') return { dom, contentDOM: contentDOM ?? dom, update: (next) => next.type === node.type && sameAttrs(next, node) }
+
+  const li = dom as HTMLElement
+  const box = document.createElement('span')
+  box.contentEditable = 'false'
+  box.setAttribute('data-checklist-box', '')
+  const body = document.createElement('div')
+  li.replaceChildren(box, body)
+  const tick = (next: boolean) => {
+    const pos = getPos()
+    if (pos === undefined || !view.editable) return
+    view.dispatch(view.state.tr.setNodeAttribute(pos, 'checked', next).setMeta(TICK, true))
+  }
+  let words = node.firstChild?.textContent.trim() || 'Item'
+  const props = (): CheckboxProps => ({ checked, onChange: view.editable ? tick : undefined, 'aria-label': words })
+  const renderer = new ReactRenderer<unknown, CheckboxProps>(Checkbox, { editor, props: props(), as: 'span' })
+  box.appendChild(renderer.element)
+  // What the box last drew: an update that changes neither leaves it alone, so typing does not draw every box again.
+  let drawn = ''
+  const sync = () => {
+    const now = `${view.editable}:${words}`
+    if (now === drawn) return
+    drawn = now
+    renderer.updateProps(props())
+    for (const [name, value] of Object.entries({ role: 'checkbox', 'aria-checked': String(checked), 'aria-readonly': 'true', 'aria-label': words })) {
+      if (view.editable) box.removeAttribute(name)
+      else box.setAttribute(name, value)
+    }
+  }
+  sync()
+  editor.on('update', sync)
+  return {
+    dom: li,
+    contentDOM: body,
+    update: (next) => {
+      if (next.type !== node.type || !sameAttrs(next, node)) return false
+      words = next.firstChild?.textContent.trim() || 'Item'
+      sync()
+      return true
+    },
+    stopEvent: (event) => box.contains(event.target as globalThis.Node),
+    ignoreMutation: (mutation) => box.contains(mutation.target),
+    destroy: () => {
+      editor.off('update', sync)
+      renderer.destroy()
+    },
+  }
+}
+
+/**
+ * A checklist item — SPEC §13.3's `checked` on a list item (RIC-19): `true`
+ * ticked, `false` not, absent a plain item. Add it beside `BlockId`.
+ *
+ * - **The box ticks with one click**, where the description is read, and the
+ *   change says so (`isChecklistTick`), so the app saves it at once.
+ * - **`[ ] ` or `[] ` at the start of a line** makes it, `[x] ` ticked; in a
+ *   list it turns that item into one.
+ * - **Enter** starts the next item unticked: a new item never takes the tick
+ *   of the one it was split from. At the start of an item, the text moves down
+ *   with its tick and the empty item above is unticked. On an empty item Enter
+ *   leaves the list, as in any list.
+ * - **Backspace** at the start of a checklist item takes its box away first;
+ *   the next one joins it to the item above, as in any list.
+ *
+ * An editor without it drops `checked` on save and keeps the item and its text.
+ */
+export const Checklist = Extension.create({
+  name: 'checklist',
+  // Before the list item's own Enter and Backspace.
+  priority: 101,
+  addGlobalAttributes() {
+    return [
+      {
+        types: ['listItem'],
+        attributes: {
+          checked: {
+            default: null,
+            keepOnSplit: false,
+            parseHTML: (element: HTMLElement) => {
+              const value = element.getAttribute('data-checked')
+              return value === 'true' ? true : value === 'false' ? false : null
+            },
+            renderHTML: (attributes: Record<string, unknown>) =>
+              typeof attributes.checked === 'boolean' ? { 'data-checked': String(attributes.checked) } : {},
+          },
+        },
+      },
+    ]
+  },
+  addInputRules() {
+    return [
+      new InputRule({
+        find: /^\[([ xX]?)\]\s$/,
+        handler: ({ state, range, match, chain }) => {
+          const checked = match[1].toLowerCase() === 'x'
+          const inList = itemAtCaret(state) !== null
+          // Without a bullet list to make, the typed text stays as it was typed.
+          if (!inList && !(chain() as unknown as Record<string, unknown>).toggleBulletList) return null
+          const deleted = chain().deleteRange(range)
+          const listed = inList ? deleted : named(deleted, 'toggleBulletList')
+          listed.updateAttributes('listItem', { checked }).run()
+        },
+      }),
+    ]
+  },
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => {
+        const { state } = this.editor
+        const item = itemAtCaret(state)
+        const { $from, empty } = state.selection
+        if (!item || typeof item.node.attrs.checked !== 'boolean') return false
+        // Over a selection: the selection goes and the next item is unticked, as for a caret in the text.
+        if (!empty) return this.editor.chain().deleteSelection().splitListItem('listItem', { checked: false }).run()
+        // An empty item: the list item's own Enter, which leaves the list.
+        if ($from.parent.content.size === 0) return false
+        if ($from.parentOffset > 0) return this.editor.commands.splitListItem('listItem', { checked: false })
+        return this.editor
+          .chain()
+          .splitListItem('listItem', { checked: item.node.attrs.checked })
+          .command(({ tr }) => {
+            tr.setNodeAttribute(tr.mapping.map(item.pos), 'checked', false)
+            return true
+          })
+          .run()
+      },
+      Backspace: () => {
+        const { state } = this.editor
+        const item = itemAtCaret(state)
+        const { $from, empty } = state.selection
+        if (!item || !empty || $from.parentOffset > 0 || typeof item.node.attrs.checked !== 'boolean') return false
+        this.editor.view.dispatch(state.tr.setNodeAttribute(item.pos, 'checked', null))
+        return true
+      },
+    }
+  },
+  addProseMirrorPlugins() {
+    const editor = this.editor
+    return [
+      new Plugin({
+        key: new PluginKey('checklist'),
+        props: { nodeViews: { listItem: (node, view, getPos) => listItemView(editor, node, view, getPos) } },
+      }),
+    ]
+  },
+})
+
+/**
+ * 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`). Its look is `RichText`'s, by `data-tone`; a tone it does not
+ * know looks like `note`, and the editor keeps it as written. Add it beside
+ * `BlockId`.
+ */
+export const Callout = Extension.create({
+  name: 'callout',
+  addGlobalAttributes() {
+    return [
+      {
+        types: ['blockquote'],
+        attributes: {
+          tone: {
+            default: null,
+            parseHTML: (element: HTMLElement) => element.getAttribute('data-tone'),
+            // As `RichText` draws it: the tone as written, and the look it is drawn in.
+            renderHTML: (attributes: Record<string, unknown>) =>
+              typeof attributes.tone === 'string' ? { 'data-tone': attributes.tone, 'data-callout': calloutLook(attributes.tone) } : {},
+          },
+        },
+      },
+    ]
+  },
+})

package/src/ComposerTriggers.test.tsx

@@ -27,6 +27,7 @@ import {
   type SlashSection,
 } from './ComposerTriggers'
 import { isSuggestionActive, isSuggestionOpen } from './suggestionPopup'
+import { Callout, Checklist } from './BlockNodes'
 
 const KEY = 'b'.repeat(64)
 const PEOPLE: MentionPerson[] = [
@@ -549,3 +550,25 @@ describe('/', () => {
     expect(hint(formatSection())).toBe('`')
   })
 })
+
+describe('/ in a block editor — RIC-19', () => {
+  function BlockComposer({ blocks }: { blocks: boolean }) {
+    const made = useEditor({
+      extensions: [StarterKit, ...(blocks ? [Checklist, Callout] : []), SlashCommands.configure({ sections: [formatSection('block')] })],
+    })
+    editor = made
+    return <EditorContent editor={made} />
+  }
+
+  it('offers Checklist, Note and Warning where the editor has Checklist and Callout', async () => {
+    render(<BlockComposer blocks />)
+    await type('/')
+    expect(options()?.slice(-3)).toEqual(['Checklist[]', 'Note', 'Warning'])
+  })
+
+  it('offers none of them where it has not: they would make a plain bullet and a plain quote (Katerina, review of #170)', async () => {
+    render(<BlockComposer blocks={false} />)
+    await type('/')
+    expect(options()).toEqual(['Text', 'Heading#', 'Subheading##', 'Quote>', 'Code```', 'Bulleted list-', 'Numbered list1.'])
+  })
+})