@estiva-app/ui 0.53.1 → 0.55.0

package/src/BlockHandle.test.tsx

@@ -0,0 +1,216 @@
+// @vitest-environment jsdom
+/**
+ * The block handle (RIC-18): what its rows do to the document, and which rows
+ * it offers. The drag itself is the browser's and is driven in real Chromium
+ * (the PR says how); here, the slice it starts with and what a drop of it keeps.
+ */
+import { afterEach, beforeAll, describe, expect, it } from 'vitest'
+import { act, cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+import { BlockHandle } from './BlockHandle'
+import { BlockId } from './BlockNodes'
+import { EditorBlockHandle, deleteBlock, duplicateBlock, moveBlock, startBlockDrag } from './EditorBlockHandle'
+import { MenuItem } from './Menu'
+
+const DOCUMENT = {
+  type: 'doc',
+  content: [
+    { type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: 'one' }] },
+    { type: 'paragraph', attrs: { blockId: 'p2' }, content: [{ type: 'text', text: 'two' }] },
+  ],
+}
+
+type Json = { type: string; attrs?: Record<string, unknown>; content?: Json[] }
+const editors: Editor[] = []
+function editor(content: object = DOCUMENT) {
+  const e = new Editor({ extensions: [StarterKit, BlockId], content })
+  editors.push(e)
+  return e
+}
+const ids = (e: Editor) => (e.getJSON().content as Json[]).map((b) => b.attrs?.blockId)
+const posOf = (e: Editor, id: string) => {
+  let at = -1
+  e.state.doc.forEach((node, pos) => {
+    if (node.attrs.blockId === id) at = pos
+  })
+  return at
+}
+
+/**
+ * Press and release on the handle. Base UI opens a menu on the press; under
+ * jsdom `user.click`'s own move-press-release-click left it shut, while the
+ * same handle opens on a click in Chromium (the story, driven in the PR).
+ */
+async function press(user: ReturnType<typeof userEvent.setup>, target: HTMLElement) {
+  await user.pointer({ keys: '[MouseLeft>]', target })
+  await user.pointer({ keys: '[/MouseLeft]', target })
+  await screen.findByRole('menu')
+}
+
+// jsdom lays nothing out, so a Range has no rects. The editor measures the caret
+// a frame after Duplicate, Delete or a move gives it the focus back; under load
+// that frame came while a test still ran (CI, 5 October), and threw.
+beforeAll(() => {
+  const none = { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0, x: 0, y: 0, toJSON: () => ({}) }
+  Range.prototype.getClientRects = () => [] as unknown as DOMRectList
+  Range.prototype.getBoundingClientRect = () => none as DOMRect
+})
+
+afterEach(() => {
+  cleanup()
+  for (const e of editors.splice(0)) e.destroy()
+})
+
+describe('duplicateBlock', () => {
+  it('puts a copy after the block, and the copy gets an id of its own', () => {
+    const e = editor()
+    duplicateBlock(e, posOf(e, 'p1'))
+    const [first, copy, last] = ids(e)
+    expect(first).toBe('p1')
+    expect(copy).toMatch(/^[0-9a-f]{12}$/)
+    expect(last).toBe('p2')
+    expect(e.getText()).toBe('one\n\none\n\ntwo')
+  })
+
+  it('then deleting the copy gives back the document it started from', () => {
+    const e = editor()
+    const before = e.getJSON()
+    duplicateBlock(e, posOf(e, 'p2'))
+    deleteBlock(e, posOf(e, ids(e)[2] as string))
+    expect(e.getJSON()).toEqual(before)
+  })
+})
+
+describe('deleteBlock', () => {
+  it('removes the block and leaves the others their ids', () => {
+    const e = editor()
+    deleteBlock(e, posOf(e, 'p1'))
+    expect(ids(e)).toEqual(['p2'])
+  })
+
+  it('leaves an empty paragraph when it was the only block', () => {
+    const e = editor({ type: 'doc', content: [DOCUMENT.content[0]] })
+    deleteBlock(e, 0)
+    expect(e.getText()).toBe('')
+    expect(e.state.doc.childCount).toBe(1)
+  })
+})
+
+describe('moveBlock', () => {
+  it('moves the block whole, so it keeps its id, as a drop in the gutter does', () => {
+    const e = editor()
+    moveBlock(e, posOf(e, 'p1'), e.state.doc.content.size)
+    expect(ids(e)).toEqual(['p2', 'p1'])
+    expect(e.getText()).toBe('two\n\none')
+  })
+
+  it('does nothing when the block would land where it is', () => {
+    const e = editor()
+    const before = e.getJSON()
+    expect(moveBlock(e, posOf(e, 'p2'), posOf(e, 'p2'))).toBe(false)
+    expect(e.getJSON()).toEqual(before)
+  })
+})
+
+describe('startBlockDrag', () => {
+  it('selects the block and drags its slice, with its id, as a move', () => {
+    const e = editor()
+    const transfer = { data: {} as Record<string, string>, clearData() {}, setData(type: string, value: string) { this.data[type] = value }, effectAllowed: '' }
+    startBlockDrag(e, posOf(e, 'p2'), { dataTransfer: transfer as unknown as DataTransfer })
+    expect(e.view.dragging?.move).toBe(true)
+    expect(e.view.dragging?.slice.content.firstChild?.attrs.blockId).toBe('p2')
+    expect(e.state.selection.from).toBe(posOf(e, 'p2'))
+    expect(transfer.data['text/plain']).toBe('two')
+  })
+
+  it('a drop of that slice, as ProseMirror makes it, keeps the id', () => {
+    const e = editor()
+    startBlockDrag(e, posOf(e, 'p1'), { dataTransfer: null })
+    // ProseMirror's drop: delete the selection, then insert the slice's node at the drop point.
+    const node = e.view.dragging!.slice.content.firstChild!
+    const tr = e.state.tr.deleteSelection()
+    tr.insert(tr.doc.content.size, node)
+    e.view.dispatch(tr)
+    expect(ids(e)).toEqual(['p2', 'p1'])
+  })
+})
+
+describe('BlockHandle', () => {
+  it('reading, offers only the caller’s rows and does not drag', async () => {
+    render(
+      <BlockHandle actions={(b) => <MenuItem label={`Copy link ${b.id}`} onClick={() => {}} />}>
+        <div>
+          <p data-block-id="r1">read me</p>
+        </div>
+      </BlockHandle>,
+    )
+    const user = userEvent.setup()
+    await user.hover(screen.getByText('read me'))
+    const handle = screen.getByRole('button', { name: 'Block menu' })
+    expect(handle.getAttribute('draggable')).toBe('false')
+    await press(user, handle)
+    expect(screen.getAllByRole('menuitem').map((r) => r.textContent)).toEqual(['Copy link r1'])
+  })
+
+  it('reading with no rows of the caller’s, draws no handle', async () => {
+    render(
+      <BlockHandle>
+        <div>
+          <p data-block-id="r1">read me</p>
+        </div>
+      </BlockHandle>,
+    )
+    await userEvent.setup().hover(screen.getByText('read me'))
+    expect(screen.queryByRole('button', { name: 'Block menu' })).toBeNull()
+  })
+
+  it('editing, Delete from the menu removes the block', async () => {
+    const e = editor()
+    const { EditorContent } = await import('@tiptap/react')
+    render(
+      <EditorBlockHandle editor={e}>
+        <EditorContent editor={e} />
+      </EditorBlockHandle>,
+    )
+    const user = userEvent.setup()
+    // jsdom lays nothing out: every block's top is 0, so the pointer is on the last.
+    await act(async () => user.hover(screen.getByText('two')))
+    await press(user, screen.getByRole('button', { name: 'Block menu' }))
+    expect(screen.getAllByRole('menuitem').map((r) => r.textContent)).toEqual(['Duplicate', 'Delete'])
+    await user.click(screen.getByRole('menuitem', { name: 'Delete' }))
+    // The editor takes the focus back a frame later and measures the caret then: wait for it, so it is part of the test.
+    await act(() => new Promise<void>((done) => requestAnimationFrame(() => done())))
+    expect(ids(e)).toEqual(['p1'])
+  })
+
+  it('an editor that cannot be edited gets the caller’s rows only, and no drag', async () => {
+    const e = editor()
+    e.setEditable(false)
+    const { EditorContent } = await import('@tiptap/react')
+    render(
+      <EditorBlockHandle editor={e} actions={(b) => <MenuItem label={`Copy link ${b.id}`} onClick={() => {}} />}>
+        <EditorContent editor={e} />
+      </EditorBlockHandle>,
+    )
+    const user = userEvent.setup()
+    await act(async () => user.hover(screen.getByText('two')))
+    const handle = screen.getByRole('button', { name: 'Block menu' })
+    expect(handle.getAttribute('draggable')).toBe('false')
+    await press(user, handle)
+    expect(screen.getAllByRole('menuitem').map((r) => r.textContent)).toEqual(['Copy link p2'])
+  })
+
+  it('draws no handle before its editor exists', async () => {
+    render(
+      <EditorBlockHandle editor={null} actions={() => <MenuItem label="Copy link" onClick={() => {}} />}>
+        <div>
+          <p data-block-id="r1">not yet</p>
+        </div>
+      </EditorBlockHandle>,
+    )
+    await userEvent.setup().hover(screen.getByText('not yet'))
+    expect(screen.queryByRole('button', { name: 'Block menu' })).toBeNull()
+  })
+})

package/src/BlockHandle.tsx

@@ -0,0 +1,220 @@
+import { useCallback, useEffect, useRef, useState, type DragEvent, type MouseEvent, type ReactNode } from 'react'
+import type { BaseUIEvent } from '@base-ui/react/types'
+import { IconGripVertical } from '@tabler/icons-react'
+import { cn } from './cn'
+import { IconButton } from './IconButton'
+import { Menu, MenuSeparator } from './Menu'
+
+/** The block the pointer is on: its §13.3 id, its element, and — in an editor — where it starts. */
+export interface HandleBlock {
+  /** `undefined` only for a block that has none yet, which nothing can address. */
+  id: string | undefined
+  element: HTMLElement
+  /** Position before the block in the editor's document; absent when reading. */
+  pos?: number
+}
+
+/** What `EditorBlockHandle` hands this part to make it edit. A reading surface leaves it off. */
+export interface BlockHandleEditing {
+  /** The block level with `y`, in the editor's own document. */
+  find: (y: number) => HandleBlock | null
+  /** The editing rows, before the caller's. */
+  rows: (block: HandleBlock) => ReactNode
+  /** Starts the browser's drag of the block; the handle is draggable only with this. */
+  startDrag: (block: HandleBlock, event: globalThis.DragEvent) => void
+  /** Drops the dragged block before `target`, or after it: a drop in the gutter, where the editor has none. */
+  drop: (target: HandleBlock, after: boolean) => void
+  endDrag: () => void
+  /** Calls back when the document changes, so a block found before is found again. Returns the unsubscribe. */
+  onChange: (changed: () => void) => () => void
+}
+
+export interface BlockHandleProps {
+  /** The caller's own rows — a link to the block, a comment on it. Reading, they are the whole menu; with none, no handle is drawn. */
+  actions?: (block: HandleBlock) => ReactNode
+  /** Given by `EditorBlockHandle` (from `@estiva-app/ui/editor`). Leave it off to read. */
+  editing?: BlockHandleEditing
+  /** What the blocks are drawn in. Reading: a surface whose top-level elements carry `data-block-id`, as `RichText` draws. */
+  children: ReactNode
+  className?: string
+}
+
+/** A block's id as a reading surface writes it: on the element, or on the first inside it (a table's wrapper). */
+function readId(element: HTMLElement): string | undefined {
+  const own = element.getAttribute('data-block-id') ?? element.querySelector('[data-block-id]')?.getAttribute('data-block-id')
+  return own || undefined
+}
+
+/** The last of `blocks` whose top is at or above `y` — the gap between two blocks belongs to the one before. */
+export function blockAtY(blocks: readonly HandleBlock[], y: number): HandleBlock | null {
+  let found: HandleBlock | null = null
+  for (const block of blocks) {
+    if (block.element.getBoundingClientRect().top > y) break
+    found = block
+  }
+  return found ?? blocks[0] ?? null
+}
+
+/** The top-level blocks of a reading surface: its root's children that carry an id. */
+function readingBlocks(root: Element | null): HandleBlock[] {
+  if (!root) return []
+  return Array.from(root.children)
+    .filter((el): el is HTMLElement => el instanceof HTMLElement)
+    .map((element) => ({ id: readId(element), element }))
+    .filter((b) => b.id !== undefined)
+}
+
+/** The handle's 24px, against the block's first line. */
+const HANDLE = 24
+
+/**
+ * How far down the block the handle starts, so it is centred on the first
+ * line: a heading's line is taller than a paragraph's. A table's or a list's
+ * first line is its first descendant's.
+ */
+function firstLineOffset(element: HTMLElement): number {
+  const text = element.querySelector<HTMLElement>('p, h1, h2, h3, pre, li') ?? element
+  const line = parseFloat(getComputedStyle(text).lineHeight)
+  if (!Number.isFinite(line)) return 0
+  const inset = text === element ? 0 : text.getBoundingClientRect().top - element.getBoundingClientRect().top
+  return inset + (line - HANDLE) / 2
+}
+
+/**
+ * The handle at the left of the block under the pointer, and the block's menu
+ * behind it. Reading, the menu is the caller's rows only, so someone who
+ * cannot edit can still point at one block — copy a link to it, comment on
+ * it. In an editor, `EditorBlockHandle` adds the drag, Turn into, Duplicate
+ * and Delete.
+ *
+ * It sits in the gutter left of the content, 28px out, so wrapping the content
+ * moves nothing. The gutter counts as the block's, as in Notion: the handle
+ * stays while the pointer crosses to it.
+ */
+export function BlockHandle({ actions, editing, children, className }: BlockHandleProps) {
+  const frame = useRef<HTMLDivElement>(null)
+  const content = useRef<HTMLDivElement>(null)
+  const [block, setBlock] = useState<HandleBlock | null>(null)
+  const [top, setTop] = useState(0)
+  const [open, setOpen] = useState(false)
+
+  const follow = useCallback(
+    (y: number) => {
+      if (!content.current || !frame.current) return
+      const found = editing ? editing.find(y) : blockAtY(readingBlocks(content.current.firstElementChild), y)
+      setBlock(found)
+      if (found) setTop(found.element.getBoundingClientRect().top - frame.current.getBoundingClientRect().top + firstLineOffset(found.element))
+    },
+    [editing],
+  )
+
+  // A block moved or deleted under the handle would leave its rows acting on a stale position.
+  useEffect(() => {
+    if (!editing) return
+    return editing.onChange(() => {
+      if (!open) setBlock(null)
+    })
+  }, [editing, open])
+
+  const rows = editing && block ? editing.rows(block) : null
+  const own = actions && block ? actions(block) : null
+
+  /*
+    A block dragged down the gutter lands by height, as in Notion: the top half
+    of a block puts it before, the bottom half after, and the line shows where.
+    Over the text, the editor draws its own line and makes its own drop.
+  */
+  const dragging = useRef(false)
+  const [line, setLine] = useState<number | null>(null)
+  const inGutter = (e: DragEvent<HTMLDivElement>) => dragging.current && !!editing && !!content.current && !content.current.contains(e.target as Node)
+  const landing = (y: number) => {
+    const target = editing?.find(y)
+    if (!target || !frame.current) return null
+    const box = target.element.getBoundingClientRect()
+    const after = y > box.top + box.height / 2
+    // Midway across the gap to the neighbour, where the editor draws its own line.
+    const neighbour = (after ? target.element.nextElementSibling : target.element.previousElementSibling)?.getBoundingClientRect()
+    const edge = after ? (neighbour ? (box.bottom + neighbour.top) / 2 : box.bottom) : neighbour ? (neighbour.bottom + box.top) / 2 : box.top
+    return { target, after, top: edge - frame.current.getBoundingClientRect().top }
+  }
+  const endDrag = () => {
+    dragging.current = false
+    setLine(null)
+    editing?.endDrag()
+  }
+
+  return (
+    <div
+      ref={frame}
+      className={cn('relative', className)}
+      onMouseMove={(e) => {
+        if (!open) follow(e.clientY)
+      }}
+      onMouseLeave={() => {
+        if (!open) setBlock(null)
+      }}
+      onDragOver={(e) => {
+        if (!inGutter(e)) return setLine(null)
+        e.preventDefault()
+        setLine(landing(e.clientY)?.top ?? null)
+      }}
+      onDrop={(e) => {
+        if (inGutter(e)) {
+          e.preventDefault()
+          const at = landing(e.clientY)
+          if (at) editing?.drop(at.target, at.after)
+        }
+        // The drop can redraw the document and take the handle with it, before its dragend.
+        endDrag()
+      }}
+      onDragLeave={(e) => {
+        if (!frame.current?.contains(e.relatedTarget as Node)) setLine(null)
+      }}
+    >
+      <div ref={content}>{children}</div>
+      {/* The gutter is the frame's own, so the pointer on its way from the text to the handle never leaves it. */}
+      <div aria-hidden className="absolute inset-y-0 -left-7 w-7" />
+      {line !== null && <div aria-hidden className="pointer-events-none absolute inset-x-0 h-px bg-accent-primary" style={{ top: line }} />}
+      {block && (rows || own) && (
+        // The top is the block's, measured: it depends on the document, not on a size of ours.
+        <div className={cn('absolute -left-7', rows && 'cursor-grab active:cursor-grabbing')} style={{ top }}>
+          <Menu
+            open={open}
+            onOpenChange={setOpen}
+            trigger={
+              <IconButton
+                aria-label="Block menu"
+                tooltip={rows ? 'Drag to move, click for the menu' : 'Menu'}
+                draggable={!!rows}
+                // Base UI opens a menu on the press, so a drag flashed it open.
+                // The handle's menu opens on the click instead, as Notion's does:
+                // a press that becomes a drag never clicks.
+                onMouseDown={(e: BaseUIEvent<MouseEvent<HTMLButtonElement>>) => e.preventBaseUIHandler()}
+                onClick={(e: BaseUIEvent<MouseEvent<HTMLButtonElement>>) => {
+                  e.preventBaseUIHandler()
+                  setOpen((was) => !was)
+                }}
+                onDragStart={(e: DragEvent<HTMLButtonElement>) => {
+                  if (!editing || !rows) return
+                  setOpen(false)
+                  dragging.current = true
+                  editing.startDrag(block, e.nativeEvent)
+                }}
+                onDragEnd={() => {
+                  endDrag()
+                  setBlock(null)
+                }}
+              >
+                <IconGripVertical size={16} stroke={1.5} />
+              </IconButton>
+            }
+          >
+            {rows}
+            {rows && own && <MenuSeparator />}
+            {own}
+          </Menu>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/EditorBlockHandle.mdx

@@ -0,0 +1,65 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks'
+import * as EditorBlockHandleStories from './EditorBlockHandle.stories'
+
+<Meta of={EditorBlockHandleStories} />
+
+# EditorBlockHandle
+
+`BlockHandle` in a Tiptap editor: drag the handle to move the block, press it
+for Turn into, Duplicate and Delete, then the app's rows.
+
+<Canvas of={EditorBlockHandleStories.Default} />
+
+## When
+
+- **An editor of a block document** (SPEC §13.3) that someone reorganises —
+  with `BlockNodes`' `BlockId` in its extensions, so every block has an id.
+- **Not editable**: the same handle reads — no drag, the app's rows only.
+
+## When not
+
+- The document being read, with no editor → **BlockHandle**, from the main
+  entry, which loads no Tiptap.
+- Formatting a few words inside a block → **SelectionToolbar**. This acts on
+  whole blocks.
+
+## How
+
+```tsx
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { BlockId, EditorBlockHandle, type BlockTurnInto } from '@estiva-app/ui/editor'
+import { MenuItem, type HandleBlock } from '@estiva-app/ui'
+
+const turnInto: BlockTurnInto[] = [
+  { label: 'Text', run: (editor) => editor.chain().setParagraph().run(), active: (node) => node.type.name === 'paragraph' },
+  { label: 'Heading', run: (editor) => editor.chain().setHeading({ level: 1 }).run() },
+]
+const rows = (block: HandleBlock) => <MenuItem label="Copy link" onClick={() => navigator.clipboard.writeText(`#${block.id}`)} />
+
+const editor = useEditor({ extensions: [StarterKit, BlockId] })
+
+<EditorBlockHandle editor={editor} turnInto={turnInto} actions={rows}>
+  <EditorContent editor={editor} />
+</EditorBlockHandle>
+```
+
+- `turnInto`'s `run` gets the editor with the caret already in the block, and
+  is offered only for a block of text: a paragraph, a heading, code.
+- **Every row leaves the editor focused**, as a drop does: Turn into in the
+  block, Duplicate in the copy, Delete where the block was. An editor that
+  saves when the person leaves it saves these the same way.
+- `duplicateBlock`, `deleteBlock` and `startBlockDrag` are the rows' own
+  actions, for a caller that offers them elsewhere (a shortcut, a test).
+
+<Canvas of={EditorBlockHandleStories.NotEditable} />
+
+## What it owns
+
+It does these by itself. Write none of them around it.
+
+| It does | So you never write | Refused when written by hand |
+|---|---|---|
+| Moves the block through ProseMirror's own drop, so it arrives with its id and its anchored comments still find it | a drop handler, or a delete and an insert | |
+| Duplicates a block under a fresh id, the original keeping its own (`BlockId` decides) | an id for the copy | |
+| Puts the caret in the block before a Turn into row runs | a selection before your `run` | |

package/src/EditorBlockHandle.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { IconLink, IconMessage } from '@tabler/icons-react'
+import type { HandleBlock } from './BlockHandle'
+import { BlockId } from './BlockNodes'
+import { EditorBlockHandle, blockDropCursor, type BlockTurnInto } from './EditorBlockHandle'
+import { MenuItem } from './Menu'
+import { richTextClassName } from './RichText'
+
+/**
+ * `BlockHandle` in an editor. Drag the handle to move a block; press it for
+ * Turn into, Duplicate, Delete, then the app's rows.
+ */
+const meta = {
+  title: 'Primitives/EditorBlockHandle',
+  // The handle sits 28px left of the content, in the page's margin.
+  parameters: { layout: 'padded' },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const DOCUMENT = {
+  type: 'doc',
+  content: [
+    { type: 'heading', attrs: { level: 1, blockId: 'b1' }, content: [{ type: 'text', text: 'A heading' }] },
+    { type: 'paragraph', attrs: { blockId: 'b2' }, content: [{ type: 'text', text: 'The first paragraph. Drag its handle below the list.' }] },
+    { type: 'paragraph', attrs: { blockId: 'b3' }, content: [{ type: 'text', text: 'The second paragraph.' }] },
+    {
+      type: 'bulletList',
+      attrs: { blockId: 'b4' },
+      content: [
+        { type: 'listItem', attrs: { blockId: 'b5' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Item one' }] }] },
+        { type: 'listItem', attrs: { blockId: 'b6' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Item two' }] }] },
+      ],
+    },
+    { type: 'paragraph', attrs: { blockId: 'b7' }, content: [{ type: 'text', text: 'The last paragraph.' }] },
+  ],
+}
+
+const TURN_INTO: BlockTurnInto[] = [
+  { label: 'Text', run: (editor) => editor.chain().setParagraph().run(), active: (node) => node.type.name === 'paragraph' },
+  { label: 'Heading', run: (editor) => editor.chain().setHeading({ level: 1 }).run(), active: (node) => node.type.name === 'heading' && node.attrs.level === 1 },
+  { label: 'Subheading', run: (editor) => editor.chain().setHeading({ level: 2 }).run(), active: (node) => node.type.name === 'heading' && node.attrs.level === 2 },
+  { label: 'Code', run: (editor) => editor.chain().setCodeBlock().run(), active: (node) => node.type.name === 'codeBlock' },
+]
+
+/** The rows an app adds: here they only say which block they were pressed on. */
+function rows(block: HandleBlock) {
+  return (
+    <>
+      <MenuItem label="Copy link" leading={<IconLink size={16} stroke={1.5} className="text-text-secondary" />} onClick={() => console.info('copy link', block.id)} />
+      <MenuItem label="Comment" leading={<IconMessage size={16} stroke={1.5} className="text-text-secondary" />} onClick={() => console.info('comment', block.id)} />
+    </>
+  )
+}
+
+function Editing({ editable }: { editable: boolean }) {
+  const editor = useEditor({
+    extensions: [StarterKit.configure({ dropcursor: blockDropCursor }), BlockId],
+    content: DOCUMENT,
+    editable,
+    editorProps: { attributes: { class: richTextClassName('default', 'outline-none'), 'aria-label': 'Text' } },
+  })
+  return (
+    <EditorBlockHandle editor={editor} turnInto={TURN_INTO} actions={rows} className="ml-8 max-w-[560px]">
+      <EditorContent editor={editor} />
+    </EditorBlockHandle>
+  )
+}
+
+/** Drag to move; Turn into, Duplicate and Delete; then the app's rows. */
+export const Default: Story = {
+  render: () => <Editing editable />,
+}
+
+/** An editor that is not editable: no drag, and only the app's rows. */
+export const NotEditable: Story = {
+  render: () => <Editing editable={false} />,
+}