@estiva-app/ui 0.66.0 → 0.68.0

package/src/EditorTableControls.tsx

@@ -0,0 +1,255 @@
+import { useCallback, useEffect, useRef, useState, type MouseEvent, type ReactNode } from 'react'
+import type { Editor } from '@tiptap/core'
+import { TextSelection, type Command } from '@tiptap/pm/state'
+import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, deleteColumn, deleteRow, deleteTable, toggleHeader } from '@tiptap/pm/tables'
+import { IconColumnInsertLeft, IconColumnInsertRight, IconGripHorizontal, IconGripVertical, IconPlus, IconRowInsertBottom, IconRowInsertTop, IconTrash } from '@tabler/icons-react'
+import { cn } from './cn'
+import { IconButton } from './IconButton'
+import { FLOATING_SURFACE_CLASSES } from './looks'
+import { Menu, MenuItem, MenuSeparator } from './Menu'
+
+export interface EditorTableControlsProps {
+  /** The editor, with TableKit (`@tiptap/extension-table`) in its extensions. Not editable, or not there yet: no controls. */
+  editor: Editor | null
+  /** The `EditorContent`. */
+  children: ReactNode
+  className?: string
+}
+
+/** The cell the pointer is on, and the table and row it is in. */
+interface Hovered {
+  table: HTMLTableElement
+  row: HTMLTableRowElement
+  cell: HTMLTableCellElement
+}
+
+/** Where the controls go, measured from the frame: they depend on the document, not on a size of ours. */
+interface Placed {
+  tableBox: { top: number; left: number; width: number; height: number }
+  rowBox: { top: number; height: number }
+  columnBox: { left: number; width: number }
+}
+
+/*
+  Every row runs the table command with the caret in a cell, as the command
+  expects — the hovered cell's, or for a ➕ bar the last row's or the last
+  column's — and leaves the editor focused there, as the block menu does: the
+  person is still in the field, so an editor that saves when they leave it
+  saves this too.
+*/
+
+/** Puts the caret in `cell` and runs `command` there. */
+function inCell(editor: Editor, cell: HTMLTableCellElement, command: Command): boolean {
+  const { view } = editor
+  if (!view.dom.contains(cell)) return false
+  const at = view.posAtDOM(cell, 0)
+  view.dispatch(view.state.tr.setSelection(TextSelection.near(view.state.doc.resolve(at))))
+  const done = command(view.state, view.dispatch, view)
+  editor.commands.focus()
+  return done
+}
+
+/** A row of header cells only: the table's header row. */
+function isHeaderRow(row: HTMLTableRowElement): boolean {
+  return row.cells.length > 0 && Array.from(row.cells).every((c) => c.tagName === 'TH')
+}
+
+/**
+ * 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). Deleting the header
+ * row makes the next row the header, so the table still opens with one.
+ */
+export function deleteTableRow(editor: Editor, cell: HTMLTableCellElement): boolean {
+  const row = cell.closest('tr')
+  const table = cell.closest('table')
+  if (!row || !table || table.rows.length <= 1) return inCell(editor, cell, deleteTable)
+  const header = isHeaderRow(row)
+  return inCell(editor, cell, header ? (state, dispatch, view) => deleteRow(state, dispatch) && (!view || toggleHeader('row')(view.state, view.dispatch)) : deleteRow)
+}
+
+/** The same for a column: the last one deletes the table. */
+export function deleteTableColumn(editor: Editor, cell: HTMLTableCellElement): boolean {
+  const row = cell.closest('tr')
+  return inCell(editor, cell, row && row.cells.length > 1 ? deleteColumn : deleteTable)
+}
+
+/** A row after the last one: the ➕ under the table. */
+export function appendTableRow(editor: Editor, table: HTMLTableElement): boolean {
+  const last = table.rows[table.rows.length - 1]?.cells[0]
+  return !!last && inCell(editor, last, addRowAfter)
+}
+
+/** A column after the last one: the ➕ right of the table. */
+export function appendTableColumn(editor: Editor, table: HTMLTableElement): boolean {
+  const first = table.rows[0]
+  const last = first?.cells[first.cells.length - 1]
+  return !!last && inCell(editor, last, addColumnAfter)
+}
+
+function place(frame: HTMLElement, { table, row, cell }: Hovered): Placed {
+  const at = frame.getBoundingClientRect()
+  const t = table.getBoundingClientRect()
+  const r = row.getBoundingClientRect()
+  const c = cell.getBoundingClientRect()
+  return {
+    tableBox: { top: t.top - at.top, left: t.left - at.left, width: t.width, height: t.height },
+    rowBox: { top: r.top - at.top, height: r.height },
+    columnBox: { left: c.left - at.left, width: c.width },
+  }
+}
+
+const ICON = { size: 16, stroke: 1.5, className: 'text-text-secondary' } as const
+
+/**
+ * A ➕ press keeps the focus where it is, as the selection toolbar's buttons do:
+ * the person never left the field, so an editor that saves when they leave it
+ * does not save half-way, and History gets one line for the edit, not one per
+ * press. (A handle's menu takes the focus, as every menu does.)
+ */
+const keepFocus = (e: MouseEvent) => e.preventDefault()
+
+/** What a handle and a ➕ bar sit in: the elevated surface's border and fill, opaque over the table's lines, with no shadow at this size. */
+const HANDLE_BOX = cn(FLOATING_SURFACE_CLASSES, 'shadow-none')
+
+/**
+ * A table's own controls in an editor, as in Notion: point at a cell and a
+ * handle sits on its row's left edge and on its column's top edge; press one
+ * for Insert above and below (left and right), Delete, and Delete table. On
+ * the last row a ➕ bar under the table adds a row, and on the last column one
+ * right of it adds a column. Tab in
+ * the last cell adds a row too — that is TableKit's own.
+ *
+ * Deleting a table's only row or only column deletes the table, which cannot
+ * be left with none.
+ *
+ * Built on the editor library's own table commands; the controls are ours.
+ * Wrap the `EditorContent` in it, inside an `EditorBlockHandle` if there is
+ * one: the block handle stays the table's, in the gutter.
+ */
+export function EditorTableControls({ editor, children, className }: EditorTableControlsProps) {
+  const frame = useRef<HTMLDivElement>(null)
+  // The cell pointed at and where its controls go, as one: the boxes mean nothing without their elements.
+  const [hovered, setHovered] = useState<(Hovered & Placed) | null>(null)
+  // A menu that is up keeps its row and column, wherever the pointer goes.
+  const [menu, setMenu] = useState<'row' | 'column' | null>(null)
+  const editable = !!editor && editor.isEditable
+
+  const follow = useCallback(
+    (target: EventTarget | null) => {
+      if (!editor || !frame.current || !(target instanceof Element)) return
+      // On a control of ours: keep what it was drawn for.
+      if (target.closest('[data-table-control]')) return
+      const cell = target.closest<HTMLTableCellElement>('td, th')
+      const row = cell?.closest('tr')
+      const table = row?.closest('table')
+      if (!cell || !row || !table || !editor.view.dom.contains(table)) {
+        setHovered(null)
+        return
+      }
+      // Measured on every move, the same cell too: a panel resized or a cell's text wrapping moves the edges under a still pointer.
+      const next = { table, row, cell, ...place(frame.current, { table, row, cell }) }
+      setHovered((was) => (was && was.cell === cell && JSON.stringify([was.tableBox, was.rowBox, was.columnBox]) === JSON.stringify([next.tableBox, next.rowBox, next.columnBox]) ? was : next))
+    },
+    [editor],
+  )
+
+  /*
+    Any change to the document moves everything under the controls, so they go
+    until the pointer moves again: a row added or deleted here, and someone
+    else's edit loaded into the field — which an app does without an `update`
+    (`emitUpdate: false`), and which redraws the cells the controls point at.
+  */
+  useEffect(() => {
+    if (!editor) return
+    const changed = ({ transaction }: { transaction: { docChanged: boolean } }) => {
+      if (transaction.docChanged && !menu) setHovered(null)
+    }
+    editor.on('transaction', changed)
+    return () => {
+      editor.off('transaction', changed)
+    }
+  }, [editor, menu])
+
+  const shown = editable ? hovered : null
+  const run = (act: () => boolean) => () => {
+    if (editor) act()
+    setMenu(null)
+    setHovered(null)
+  }
+
+  return (
+    <div
+      ref={frame}
+      className={cn('relative', className)}
+      onMouseMove={(e) => {
+        if (!menu) follow(e.target)
+      }}
+      onMouseLeave={() => {
+        if (!menu) setHovered(null)
+      }}
+    >
+      {children}
+      {shown && editor && (
+        <>
+          {/* The row's handle, centred on the table's left edge: the box is ours, so the table's line does not show through it. */}
+          <div data-table-control className={cn(HANDLE_BOX, 'absolute -translate-x-1/2 -translate-y-1/2')} style={{ left: shown.tableBox.left, top: shown.rowBox.top + shown.rowBox.height / 2 }}>
+            <Menu
+              open={menu === 'row'}
+              onOpenChange={(open) => setMenu(open ? 'row' : null)}
+              trigger={
+                <IconButton aria-label="Row menu" tooltip="Row" className="h-6 w-4 p-0">
+                  <IconGripVertical size={16} stroke={1.5} />
+                </IconButton>
+              }
+            >
+              {/* Nothing goes above a header row: it is the table's first row, and a header anywhere else is no header (RichText, the agent's text). */}
+              {!isHeaderRow(shown.row) && <MenuItem label="Insert above" leading={<IconRowInsertTop {...ICON} />} onClick={run(() => inCell(editor, shown.cell, addRowBefore))} />}
+              <MenuItem label="Insert below" leading={<IconRowInsertBottom {...ICON} />} onClick={run(() => inCell(editor, shown.cell, addRowAfter))} />
+              <MenuSeparator />
+              <MenuItem label="Delete" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={run(() => deleteTableRow(editor, shown.cell))} />
+              <MenuItem label="Delete table" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={run(() => inCell(editor, shown.cell, deleteTable))} />
+            </Menu>
+          </div>
+          {/* The column's handle, centred on the table's top edge. */}
+          <div data-table-control className={cn(HANDLE_BOX, 'absolute -translate-x-1/2 -translate-y-1/2')} style={{ left: shown.columnBox.left + shown.columnBox.width / 2, top: shown.tableBox.top }}>
+            <Menu
+              open={menu === 'column'}
+              onOpenChange={(open) => setMenu(open ? 'column' : null)}
+              trigger={
+                <IconButton aria-label="Column menu" tooltip="Column" className="h-4 w-6 p-0">
+                  <IconGripHorizontal size={16} stroke={1.5} />
+                </IconButton>
+              }
+            >
+              <MenuItem label="Insert left" leading={<IconColumnInsertLeft {...ICON} />} onClick={run(() => inCell(editor, shown.cell, addColumnBefore))} />
+              <MenuItem label="Insert right" leading={<IconColumnInsertRight {...ICON} />} onClick={run(() => inCell(editor, shown.cell, addColumnAfter))} />
+              <MenuSeparator />
+              <MenuItem label="Delete" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={run(() => deleteTableColumn(editor, shown.cell))} />
+              <MenuItem label="Delete table" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={run(() => inCell(editor, shown.cell, deleteTable))} />
+            </Menu>
+          </div>
+          {/*
+            The ➕ bars, flush with the table so the pointer reaches them from a
+            cell without leaving it — the row's from the last row, the column's
+            from the last column. Anywhere else the one under the table would
+            lie over the top of the next block for nothing.
+          */}
+          {shown.row === shown.table.rows[shown.table.rows.length - 1] && (
+            <div data-table-control className={cn(HANDLE_BOX, 'absolute flex h-4')} style={{ left: shown.tableBox.left, top: shown.tableBox.top + shown.tableBox.height, width: shown.tableBox.width }}>
+              <IconButton aria-label="Add row" tooltip="Add row" className="h-full w-full p-0" onMouseDown={keepFocus} onClick={run(() => appendTableRow(editor, shown.table))}>
+                <IconPlus size={12} stroke={1.5} />
+              </IconButton>
+            </div>
+          )}
+          {shown.cell === shown.row.cells[shown.row.cells.length - 1] && (
+            <div data-table-control className={cn(HANDLE_BOX, 'absolute flex w-4')} style={{ left: shown.tableBox.left + shown.tableBox.width, top: shown.tableBox.top, height: shown.tableBox.height }}>
+              <IconButton aria-label="Add column" tooltip="Add column" className="h-full w-full p-0" onMouseDown={keepFocus} onClick={run(() => appendTableColumn(editor, shown.table))}>
+                <IconPlus size={12} stroke={1.5} />
+              </IconButton>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

package/src/LinkChips.mdx

@@ -0,0 +1,57 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks'
+import * as LinkChipsStories from './LinkChips.stories'
+
+<Meta of={LinkChipsStories} />
+
+# LinkChips
+
+A URL in a document that the app recognises reads as a chip of what it points
+at, and stays that URL when the document is saved. A URL the app does not
+recognise, or has not answered for yet, stays text.
+
+<Canvas of={LinkChipsStories.InAnEditor} />
+
+## When
+
+- **An editor of a document whose URLs can name things**: pair it with
+  **ReferenceNode**, which draws the chip, and **ReferenceCards**, which places
+  the card a chip can ask for.
+
+## When not
+
+- A document that is only read → **RichText**, whose text already says which
+  runs are chips.
+- An editor with a link mark (a composer's Link button) → its links are the
+  author's words, not chips. Turn the link mark off in a document editor
+  (`StarterKit.configure({ link: false })`), or URLs are linked before this
+  sees them.
+
+## How
+
+```tsx
+import { LinkChips, ReferenceCards, ReferenceNode } from '@estiva-app/ui/editor'
+
+LinkChips.configure({
+  // What the app has resolved so far: the reference a URL names, or undefined.
+  referenceOf: (url) => known(url),
+  // Look up the rest. When it settles, the document is looked at again.
+  ask: (urls) => lookUp(urls),
+})
+```
+
+- A chip made from a URL is a `reference` node with `href` set to the URL;
+  `uri` is what it names. A document saves it as the URL.
+- A chip read from a document before its URL is answered draws as the URL, and
+  offers no card choice until it is answered.
+- The URL the caret is in, or at the end of, stays text: a half-typed address
+  never turns into a chip while it is being typed. A pasted URL is whole: it
+  is asked about and becomes its chip at once, with the caret at its end, so
+  **ReferenceMenu** can open its menu.
+- A URL in code, in a code block, or under a link mark stays text.
+- Each URL is asked about once, and one editor asks about at most `limit`
+  (24 by default), the first ones: an answer can cost the app a query.
+- Making a chip is not an undo step: undo takes back what was typed.
+
+## What it owns
+
+Nothing. It draws nothing; it turns the URLs the app recognises into chips.

package/src/LinkChips.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { BlockId, ReferenceNode, type ReferenceViewProps } from './BlockNodes'
+import { Card } from './Card'
+import { InlineChip } from './InlineChip'
+import { LinkChips } from './LinkChips'
+import { ReferenceCards } from './ReferenceCards'
+import { richTextClassName } from './RichText'
+
+/**
+ * A URL the app recognises reads as a chip; one it does not stays text. Here
+ * the app is a stand-in that recognises one address, after a short wait, and
+ * the chip is a placeholder naming what it points at: the real one is the
+ * app's, which knows how to resolve it.
+ */
+const meta = {
+  title: 'Primitives/LinkChips',
+  parameters: { layout: 'padded' },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const KNOWN = 'https://example.com/item/one'
+const answered = new Map<string, string>()
+
+function Placeholder({ uri }: ReferenceViewProps) {
+  return <InlineChip>Item for {uri}</InlineChip>
+}
+
+function Box() {
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({ link: false }),
+      BlockId,
+      ReferenceNode.configure({ view: Placeholder }),
+      ReferenceCards,
+      LinkChips.configure({
+        referenceOf: (url) => answered.get(url),
+        ask: (urls) =>
+          new Promise<void>((resolve) =>
+            setTimeout(() => {
+              if (urls.includes(KNOWN)) answered.set(KNOWN, 'nostr:naddr1one')
+              resolve()
+            }, 600),
+          ),
+      }),
+    ],
+    content: {
+      type: 'doc',
+      content: [
+        { type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: `Recognised: ${KNOWN}` }] },
+        { type: 'paragraph', attrs: { blockId: 'p2' }, content: [{ type: 'text', text: 'Not recognised: https://example.com/elsewhere' }] },
+      ],
+    },
+    editorProps: { attributes: { class: richTextClassName('default', 'outline-none'), 'aria-label': 'Text' } },
+  })
+  return (
+    <Card fill="surface" className="flex w-[520px] flex-col gap-2 p-3">
+      <EditorContent editor={editor} />
+    </Card>
+  )
+}
+
+/** Two URLs: the first turns into its chip once the stand-in answers, the second stays text. */
+export const InAnEditor: Story = { render: () => <Box /> }

package/src/LinkChips.test.tsx

@@ -0,0 +1,178 @@
+// @vitest-environment jsdom
+/**
+ * An app URL in a document reads as its chip (SPEC §13.3, §7.7): a URL that
+ * names something becomes a URL chip keeping its URL, one that names nothing or
+ * is not answered yet stays text, and the URL being typed is left alone.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { Editor } from '@tiptap/core'
+import { TextSelection } from '@tiptap/pm/state'
+import StarterKit from '@tiptap/starter-kit'
+import { BlockId, ReferenceNode } from './BlockNodes'
+import { LinkChips, refreshLinkChips } from './LinkChips'
+import { ReferenceCards, referenceAtSelection, referenceCardPlacements } from './ReferenceCards'
+
+const URL_ = 'https://app.example/i/one'
+const V = 'nostr:naddr1example'
+
+type Json = { type: string; text?: string; attrs?: Record<string, unknown>; content?: Json[] }
+const inline = (ed: Editor) => (ed.getJSON() as Json).content?.[0].content ?? []
+const para = (...content: unknown[]): Record<string, unknown> => ({ type: 'doc', content: [{ type: 'paragraph', attrs: { blockId: 'p1' }, content }] })
+
+let editor: Editor | undefined
+afterEach(() => {
+  editor?.destroy()
+  editor = undefined
+})
+
+const make = (content: Record<string, unknown>, known: Map<string, string>, asked: string[][] = []) => {
+  editor = new Editor({
+    extensions: [
+      // A document editor has no link mark: its URLs are text until they are chips.
+      StarterKit.configure({ link: false }),
+      BlockId,
+      ReferenceNode,
+      ReferenceCards,
+      LinkChips.configure({
+        referenceOf: (url) => known.get(url),
+        ask: (urls) => {
+          asked.push(urls)
+          return Promise.resolve()
+        },
+      }),
+    ],
+    content,
+  })
+  return editor
+}
+
+const tick = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+describe('LinkChips', () => {
+  it('makes a URL that names something its chip on open, keeping the URL and the marks', async () => {
+    const ed = make(para({ type: 'text', text: `See ${URL_}.` }), new Map([[URL_, V]]))
+    await tick()
+    const [before, chip, after] = inline(ed)
+    expect(before.text).toBe('See ')
+    expect(chip.type).toBe('reference')
+    expect(chip.attrs).toMatchObject({ uri: V, href: URL_ })
+    expect(after.text).toBe('.')
+  })
+
+  it('leaves a URL that names nothing as text, and asks the app about it', async () => {
+    const asked: string[][] = []
+    const ed = make(para({ type: 'text', text: `See ${URL_} and https://else.example/x` }), new Map(), asked)
+    await tick()
+    expect(inline(ed)).toHaveLength(1)
+    expect(asked[0]).toEqual([URL_, 'https://else.example/x'])
+  })
+
+  it('asks about each URL once, and no more than its limit', async () => {
+    const asked: string[][] = []
+    editor = new Editor({
+      extensions: [
+        StarterKit.configure({ link: false }),
+        BlockId,
+        ReferenceNode,
+        LinkChips.configure({ referenceOf: () => undefined, ask: (urls) => void asked.push(urls), limit: 2 }),
+      ],
+      content: para({ type: 'text', text: 'https://a.example/1 https://a.example/2 https://a.example/3' }),
+    })
+    await tick()
+    editor.commands.insertContentAt(1, 'x ')
+    expect(asked).toEqual([['https://a.example/1', 'https://a.example/2']])
+  })
+
+  it('turns the URL into its chip once the answer comes back', async () => {
+    const known = new Map<string, string>()
+    const ed = make(para({ type: 'text', text: `See ${URL_} now` }), known)
+    await tick()
+    expect(inline(ed)).toHaveLength(1)
+    known.set(URL_, V)
+    refreshLinkChips(ed)
+    expect(inline(ed)[1].attrs).toMatchObject({ uri: V, href: URL_ })
+  })
+
+  it('leaves the URL the caret is at the end of, and takes it once the person moves on', async () => {
+    const ed = make(para({ type: 'text', text: 'See ' }), new Map([[URL_, V]]))
+    await tick()
+    ed.view.dispatch(ed.state.tr.setSelection(TextSelection.create(ed.state.doc, ed.state.doc.content.size - 1)))
+    ed.view.dispatch(ed.state.tr.insertText(URL_))
+    expect(inline(ed)).toHaveLength(1)
+    ed.view.dispatch(ed.state.tr.insertText(' '))
+    expect(inline(ed)[1].attrs).toMatchObject({ uri: V, href: URL_ })
+  })
+
+  it('fills in a URL chip read from a document once it is answered; until then it offers no card', async () => {
+    const known = new Map<string, string>()
+    const ed = make(para({ type: 'reference', attrs: { uri: '', href: URL_, embed: 'compact' } }), known)
+    await tick()
+    expect(referenceCardPlacements(ed.state.doc)).toEqual([])
+    ed.view.dispatch(ed.state.tr.setSelection(TextSelection.create(ed.state.doc, 1, 2)))
+    expect(referenceAtSelection(ed.state)).toBeNull()
+    known.set(URL_, V)
+    refreshLinkChips(ed)
+    expect(inline(ed)[0].attrs).toMatchObject({ uri: V, href: URL_, embed: 'compact' })
+    expect(referenceCardPlacements(ed.state.doc)[0].cards).toEqual([{ uri: V, layout: 'compact' }])
+  })
+
+  it('dispatches nothing on open when there is no chip to make, so no other plugin wakes', async () => {
+    const ed = make(para({ type: 'text', text: 'Words, no address.' }), new Map([[URL_, V]]))
+    let transactions = 0
+    ed.on('transaction', () => void transactions++)
+    await tick()
+    refreshLinkChips(ed)
+    expect(transactions).toBe(0)
+  })
+
+  it('leaves a URL in code alone', async () => {
+    const ed = make(para({ type: 'text', text: URL_, marks: [{ type: 'code' }] }), new Map([[URL_, V]]))
+    await tick()
+    expect(inline(ed)[0].type).toBe('text')
+  })
+
+  it('takes a pasted URL chip\'s URL and resolves it itself, never the clipboard\'s reference', async () => {
+    const known = new Map<string, string>()
+    const ed = make(para({ type: 'text', text: 'x' }), known)
+    await tick()
+    ed.commands.insertContent(`<p><span data-reference="nostr:naddr1hostile" data-href="${URL_}" data-embed="detailed">${URL_}</span></p>`)
+    const chip = (ed.getJSON() as Json).content?.flatMap((b) => b.content ?? []).find((n) => n.type === 'reference')
+    expect(chip?.attrs).toMatchObject({ uri: '', href: URL_ })
+    expect(referenceCardPlacements(ed.state.doc)).toEqual([])
+  })
+
+  it('drops a pasted URL chip whose href is not http(s)', async () => {
+    const ed = make(para({ type: 'text', text: 'x' }), new Map())
+    await tick()
+    ed.commands.insertContent('<p><span data-reference="nostr:naddr1x" data-href="javascript:alert(1)">x</span></p>')
+    const chip = (ed.getJSON() as Json).content?.flatMap((b) => b.content ?? []).find((n) => n.type === 'reference')
+    expect(chip?.attrs?.href).toBeNull()
+  })
+
+  it('asks nothing while a URL is typed one character at a time, then the whole URL once', async () => {
+    const asked: string[][] = []
+    const ed = make(para({ type: 'text', text: 'See ' }), new Map(), asked)
+    await tick()
+    ed.view.dispatch(ed.state.tr.setSelection(TextSelection.create(ed.state.doc, ed.state.doc.content.size - 1)))
+    for (const ch of URL_) ed.view.dispatch(ed.state.tr.insertText(ch))
+    expect(asked).toEqual([])
+    ed.view.dispatch(ed.state.tr.insertText(' '))
+    expect(asked).toEqual([[URL_]])
+  })
+
+  it('turns a URL with the caret before it, but not one under a selection', async () => {
+    const ed = make(para({ type: 'text', text: `${URL_} end` }), new Map([[URL_, V]]))
+    await tick()
+    // The editor opens with the caret at the URL's start: it is not being typed.
+    expect(inline(ed)[0].type).toBe('reference')
+    ed.commands.setContent(para({ type: 'text', text: `see ${URL_}` }))
+    ed.view.dispatch(ed.state.tr.setSelection(TextSelection.create(ed.state.doc, 10, 14)))
+    expect(inline(ed)).toHaveLength(1)
+  })
+
+  it('copies a URL chip as its URL', async () => {
+    const ed = make(para({ type: 'text', text: `${URL_} ` }), new Map([[URL_, V]]))
+    await tick()
+    expect(ed.getText()).toBe(`${URL_} `)
+  })
+})