@estiva-app/ui 0.69.2 → 0.70.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.69.2",
+  "version": "0.70.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,9 +4,9 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.69.2",
-    "exports": 162,
-    "typeExports": 152,
+    "packageVersion": "0.70.0",
+    "exports": 163,
+    "typeExports": 153,
     "files": null
   },
   "storybook": {
@@ -4819,6 +4819,25 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "PastedMarkdown",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/PastedMarkdown.ts",
+      "purpose": "Markdown pasted into an editor as plain text lands as what it spells: a heading, a list, a checklist, a quote or callout, a table.",
+      "purposeFrom": "page",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-pastedmarkdown--docs",
+      "storyId": "primitives-pastedmarkdown--in-an-editor",
+      "docPage": "src/PastedMarkdown.mdx",
+      "app": null,
+      "looks": []
+    },
     {
       "name": "peopleMenu",
       "repo": "estiva-ui",

package/src/PastedMarkdown.mdx

@@ -0,0 +1,59 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks'
+import * as PastedMarkdownStories from './PastedMarkdown.stories'
+
+<Meta of={PastedMarkdownStories} />
+
+# PastedMarkdown
+
+Markdown pasted into an editor as plain text lands as what it spells: a
+heading, a list, a checklist, a quote or callout, a table. A README's source or
+an answer copied from a chat arrives formatted, not full of `#` and `|`.
+
+<Canvas of={PastedMarkdownStories.InAnEditor} />
+
+## When
+
+- **An editor that saves a block document**: a page, a description. Give it
+  the protocol's reader, so a paste reads text the way everything else that
+  writes a block document does.
+
+## When not
+
+No alternative: a message box or a comment box leaves it out and pastes text
+as typed, because a message's text has no table.
+
+- A pasted picture → `PastedImages`.
+- A pasted URL that names something in the app → `LinkChips`.
+
+## How
+
+```tsx
+import StarterKit from '@tiptap/starter-kit'
+import { TableKit } from '@tiptap/extension-table'
+import { PastedMarkdown } from '@estiva-app/ui/editor'
+
+useEditor({
+  extensions: [
+    StarterKit,
+    TableKit,
+    PastedMarkdown.configure({
+      // Both from @estiva-app/protocol, which this package does not depend on.
+      read: (text) => toEditorDocument(descriptionTextToBlockDocument(text)),
+    }),
+  ],
+})
+```
+
+- **Only plain text is read.** A paste that carries HTML, a copy from a web
+  page, keeps the browser's own structure.
+- **Text that spells only paragraphs pastes exactly as before**, into the line
+  the caret is on.
+- **Ctrl/Cmd+Shift+V keeps the text as typed**, and so does a paste into code.
+- A table pasted inside a table cell stays text, and so does any block the
+  editor cannot hold (a table, in an editor without `TableKit`).
+- How text is read is the app's reader. When it lands, and when it stays
+  text, is this part's.
+
+## What it owns
+
+Nothing. It draws nothing; it hands pasted text to the app's reader and puts back what that reads.

package/src/PastedMarkdown.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { JSONContent } from '@tiptap/core'
+import { TableKit } from '@tiptap/extension-table'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { Button } from './Button'
+import { Card } from './Card'
+import { PastedMarkdown } from './PastedMarkdown'
+import { richTextClassName } from './RichText'
+
+/**
+ * "Copy as plain text" puts the lines below the box on the clipboard as plain
+ * text; paste them in and they land as a table. Paste them with
+ * Ctrl/Cmd+Shift+V: they stay text.
+ */
+const meta = {
+  title: 'Primitives/PastedMarkdown',
+  parameters: { layout: 'padded' },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const SAMPLE = '| Item | Value |\n| --- | --- |\n| One | 1 |\n| Two | 2 |'
+
+/*
+  A stand-in for the app's reader, which is the protocol's and reads every
+  block text spells. This one reads a table and nothing else, enough to show
+  the paste.
+*/
+function readTable(text: string): JSONContent | undefined {
+  const lines = text.trim().split('\n')
+  if (lines.length < 2 || !/^\|( *:?-+:? *\|)+$/.test(lines[1].trim())) return undefined
+  const cells = (line: string) => line.trim().replace(/^\||\|$/g, '').split('|').map((cell) => cell.trim())
+  const cell = (type: string, text: string): JSONContent => ({ type, content: [{ type: 'paragraph', content: text ? [{ type: 'text', text }] : [] }] })
+  const rows = [lines[0], ...lines.slice(2)].map((line, r) => ({ type: 'tableRow', content: cells(line).map((text) => cell(r === 0 ? 'tableHeader' : 'tableCell', text)) }))
+  return { type: 'doc', content: [{ type: 'table', content: rows }] }
+}
+
+function Box() {
+  const editor = useEditor({
+    extensions: [StarterKit, TableKit, PastedMarkdown.configure({ read: readTable })],
+    content: '<p>Paste here.</p>',
+    editorProps: { attributes: { class: richTextClassName('default', 'outline-none'), 'aria-label': 'Text' } },
+  })
+  return (
+    <div className="flex w-[520px] flex-col gap-3">
+      <Card fill="surface" className="p-3">
+        <EditorContent editor={editor} />
+      </Card>
+      <pre className="text-caption text-text-secondary">{SAMPLE}</pre>
+      <div className="flex items-center gap-2">
+        <Button variant="outlined" size="small" onClick={() => void navigator.clipboard.writeText(SAMPLE)}>
+          Copy as plain text
+        </Button>
+        <span className="text-caption text-text-secondary">then paste in the box. Selecting the lines above copies them with HTML, which pastes as before.</span>
+      </div>
+    </div>
+  )
+}
+
+export const InAnEditor: Story = { render: () => <Box /> }

package/src/PastedMarkdown.test.ts

@@ -0,0 +1,134 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { Editor, type JSONContent } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+import { TableKit } from '@tiptap/extension-table'
+import { PastedMarkdown } from './PastedMarkdown'
+
+const TABLE_TEXT = '| Name | Since |\n| --- | --- |\n| Ada | 2026 |'
+const paragraph = (text: string): JSONContent => ({ type: 'paragraph', content: [{ type: 'text', text }] })
+const cell = (type: string, text: string): JSONContent => ({ type, content: [paragraph(text)] })
+const TABLE: JSONContent = {
+  type: 'table',
+  content: [
+    { type: 'tableRow', content: [cell('tableHeader', 'Name'), cell('tableHeader', 'Since')] },
+    { type: 'tableRow', content: [cell('tableCell', 'Ada'), cell('tableCell', '2026')] },
+  ],
+}
+
+/*
+  The reader an app passes — the protocol's, in Leaf and Ship. Its own reading
+  of text is the protocol package's to test; here it answers the texts these
+  tests paste, as that reader does.
+*/
+const READ: Record<string, JSONContent[]> = {
+  [TABLE_TEXT]: [TABLE],
+  [`Before\n\n${TABLE_TEXT}\n\nAfter`]: [paragraph('Before'), TABLE, paragraph('After')],
+  '# Plan\n\n- one': [{ type: 'heading', attrs: { level: 1 }, content: [{ type: 'text', text: 'Plan' }] }, { type: 'bulletList', content: [{ type: 'listItem', content: [paragraph('one')] }] }],
+  world: [paragraph('world')],
+  'A **bold** word': [{ type: 'paragraph', content: [{ type: 'text', text: 'A ' }, { type: 'text', text: 'bold', marks: [{ type: 'bold' }] }, { type: 'text', text: ' word' }] }],
+}
+const read = vi.fn((text: string) => {
+  if (text === 'reader breaks') throw new RangeError('Maximum call stack size exceeded')
+  return READ[text] ? { type: 'doc', content: READ[text] } : undefined
+})
+
+let editor: Editor | undefined
+afterEach(() => {
+  editor?.destroy()
+  read.mockClear()
+})
+
+function make(content: JSONContent, tables = true) {
+  editor = new Editor({
+    element: document.createElement('div'),
+    extensions: [StarterKit, ...(tables ? [TableKit] : []), PastedMarkdown.configure({ read })],
+    content,
+  })
+  return editor
+}
+
+/** A paste as the browser sends it, through ProseMirror's own handler. */
+function paste(ed: Editor, text: string, html = '', { shift = false } = {}) {
+  if (shift) ed.view.dom.dispatchEvent(new KeyboardEvent('keydown', { key: 'Shift', keyCode: 16, shiftKey: true, bubbles: true }))
+  const event = new Event('paste', { bubbles: true, cancelable: true })
+  Object.defineProperty(event, 'clipboardData', {
+    value: { types: html ? ['text/plain', 'text/html'] : ['text/plain'], files: [], getData: (type: string) => (type === 'text/plain' ? text : type === 'text/html' ? html : '') },
+  })
+  ed.view.dom.dispatchEvent(event)
+}
+
+const shapeOf = (ed: Editor) => (ed.getJSON().content ?? []).map((block) => block.type)
+const textOf = (ed: Editor) => ed.state.doc.textBetween(0, ed.state.doc.content.size, '\n')
+
+describe('PastedMarkdown', () => {
+  it('pastes a markdown table copied as plain text as a table, not pipes', () => {
+    const ed = make({ type: 'doc', content: [{ type: 'paragraph' }] })
+    paste(ed, TABLE_TEXT)
+    expect(shapeOf(ed)).toContain('table')
+    expect(textOf(ed)).not.toContain('|')
+  })
+
+  it('pastes the prose around a table as paragraphs, and the table between them', () => {
+    const ed = make({ type: 'doc', content: [{ type: 'paragraph' }] })
+    paste(ed, `Before\n\n${TABLE_TEXT}\n\nAfter`)
+    expect(shapeOf(ed)).toEqual(['paragraph', 'table', 'paragraph'])
+    expect(textOf(ed)).toMatch(/^Before\n[\s\S]*Ada[\s\S]*\nAfter$/)
+  })
+
+  it('pastes a heading and a list as a heading and a list', () => {
+    const ed = make({ type: 'doc', content: [{ type: 'paragraph' }] })
+    paste(ed, '# Plan\n\n- one')
+    // StarterKit keeps an empty paragraph after a last block that is not one.
+    expect(shapeOf(ed)).toEqual(['heading', 'bulletList', 'paragraph'])
+  })
+
+  it('pastes text that spells only paragraphs exactly as before, into the line it lands in', () => {
+    const ed = make({ type: 'doc', content: [paragraph('Hello ')] })
+    ed.commands.focus('end')
+    paste(ed, 'world')
+    expect(ed.getJSON().content).toEqual([paragraph('Hello world')])
+  })
+
+  it('pastes a paragraph whose text spells bold with the word bold, not with the asterisks', () => {
+    const ed = make({ type: 'doc', content: [{ type: 'paragraph' }] })
+    paste(ed, 'A **bold** word')
+    expect(textOf(ed)).toBe('A bold word')
+    expect(ed.getJSON().content?.[0].content?.[1]).toEqual({ type: 'text', text: 'bold', marks: [{ type: 'bold' }] })
+  })
+
+  it('pastes the text as typed when the reader throws, so the paste is never lost', () => {
+    const ed = make({ type: 'doc', content: [{ type: 'paragraph' }] })
+    paste(ed, 'reader breaks')
+    expect(textOf(ed)).toBe('reader breaks')
+  })
+
+  it('leaves a paste that carries HTML to the HTML, without reading the text', () => {
+    const ed = make({ type: 'doc', content: [{ type: 'paragraph' }] })
+    paste(ed, TABLE_TEXT, '<p>| Name | Since |</p>')
+    expect(read).not.toHaveBeenCalled()
+    expect(shapeOf(ed)).not.toContain('table')
+  })
+
+  it('keeps the pipes as text on the plain-text paste, Ctrl/Cmd+Shift+V', () => {
+    const ed = make({ type: 'doc', content: [{ type: 'paragraph' }] })
+    paste(ed, TABLE_TEXT, '', { shift: true })
+    expect(shapeOf(ed)).not.toContain('table')
+    expect(textOf(ed)).toContain('| Name | Since |')
+  })
+
+  it('keeps a table pasted inside a table cell as text, never a table in a table', () => {
+    const ed = make({ type: 'doc', content: [TABLE] })
+    ed.commands.setTextSelection(4)
+    paste(ed, TABLE_TEXT)
+    expect(JSON.stringify(ed.getJSON().content?.[0].content)).not.toContain('"type":"table"')
+    expect(textOf(ed)).toContain('| Name | Since |')
+  })
+
+  it('keeps the text in an editor that holds no tables', () => {
+    const ed = make({ type: 'doc', content: [{ type: 'paragraph' }] }, false)
+    paste(ed, TABLE_TEXT)
+    expect(shapeOf(ed)).toEqual(['paragraph', 'paragraph', 'paragraph'])
+    expect(textOf(ed)).toContain('| Ada | 2026 |')
+  })
+})

package/src/PastedMarkdown.ts

@@ -0,0 +1,68 @@
+import { Extension, type JSONContent } from '@tiptap/core'
+import { Slice, type ResolvedPos } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+export interface PastedMarkdownOptions {
+  /**
+   * Plain text read as the blocks it spells, as editor JSON (`{ type: 'doc',
+   * content }`), or `undefined` to paste it as text. The app passes its
+   * protocol's reader — for a block document, `@estiva-app/protocol`'s
+   * `descriptionTextToBlockDocument` through `toEditorDocument` — so a paste
+   * reads text exactly as the agent's write of the same text does.
+   */
+  read: (text: string) => JSONContent | undefined
+}
+
+/** Inside a table cell: a pasted table there stays text, never a table in a table. */
+function inTableCell($context: ResolvedPos): boolean {
+  for (let depth = $context.depth; depth > 0; depth--) {
+    const role = $context.node(depth).type.spec.tableRole
+    if (role === 'cell' || role === 'header_cell') return true
+  }
+  return false
+}
+
+const hasTable = (blocks: JSONContent[]): boolean => blocks.some((block) => block.type === 'table' || hasTable(block.content ?? []))
+
+/**
+ * Markdown pasted as plain text lands as what it spells: a heading, a list, a
+ * checklist, a quote or callout, a table (LEAF-10; Miky, 2026-10-15). Only a
+ * paste with no HTML on the clipboard is read — a copy from a web page already
+ * pastes its own structure — and a paste that spells nothing but paragraphs
+ * pastes exactly as before. Ctrl/Cmd+Shift+V, the plain-text paste, keeps the
+ * text as typed, and so does a paste into code.
+ *
+ * For an editor that saves a block document. A message box leaves it out: a
+ * message's text has no table (SPEC §13.2), so a pasted table stays text there.
+ */
+export const PastedMarkdown = Extension.create<PastedMarkdownOptions>({
+  name: 'pastedMarkdown',
+  addOptions() {
+    return { read: () => undefined }
+  },
+  addProseMirrorPlugins() {
+    const options = this.options
+    return [
+      new Plugin({
+        key: new PluginKey('pastedMarkdown'),
+        props: {
+          // Reached only for a text paste outside code; `plain` is the Shift paste.
+          clipboardTextParser: (text, $context, plain, view) => {
+            if (plain) return undefined as unknown as Slice
+            try {
+              const blocks = options.read(text.replace(/\r\n?/g, '\n'))?.content ?? []
+              // Paragraphs only: the editor's own paste keeps each line a paragraph, and its paste rules make `**bold**` bold.
+              if (blocks.every((block) => block.type === 'paragraph')) return undefined as unknown as Slice
+              if (inTableCell($context) && hasTable(blocks)) return undefined as unknown as Slice
+              return Slice.maxOpen(view.state.schema.nodeFromJSON({ type: 'doc', content: blocks }).content)
+            } catch {
+              // A reader that throws, or a block this editor's schema does not
+              // hold (a table without TableKit): paste the text.
+              return undefined as unknown as Slice
+            }
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/editor.ts

@@ -9,6 +9,7 @@
  */
 export { KeptSelection, SelectionToolbar, normalizeHref, type MarkId, type SelectionToolbarProps } from './SelectionToolbar'
 export { PastedImages, pastedImages, pastedImageName, type PastedImagesOptions, type ClipboardSource } from './PastedImages'
+export { PastedMarkdown, type PastedMarkdownOptions } from './PastedMarkdown'
 export { CodeBlockColours } from './CodeBlockColours'
 export { suggestionPopup, isSuggestionActive, isSuggestionOpen, type SuggestionPopupOptions } from './suggestionPopup'
 export { EditorBlockHandle, blockDropCursor, deleteBlock, moveBlock, duplicateBlock, startBlockDrag, type EditorBlockHandleProps, type BlockTurnInto } from './EditorBlockHandle'

package/src/pages.test.ts

@@ -41,6 +41,7 @@ const NOTHING = 'Nothing. It only draws. Clicks and keys are yours.'
 const HOLDS_ONLY: Record<string, string> = {
   AppProvider: 'Nothing. It draws nothing; it holds two answers for the parts below it.',
   PastedImages: 'Nothing. It draws nothing; it hands a pasted picture to the app, named.',
+  PastedMarkdown: 'Nothing. It draws nothing; it hands pasted text to the app\'s reader and puts back what that reads.',
   CodeBlockColours: 'Nothing. It names each word of a code block; the RichText class list colours them.',
   LinkChips: 'Nothing. It draws nothing; it turns the URLs the app recognises into chips.',
   // Its box is the Popover's, which owns what a box does; it holds which chip the menu is on.

package/src/registry/registry.test.ts

@@ -26,7 +26,7 @@ import { SCHEMA_VERSION, validateRegistry, type Registry, type RegistryEntry } f
 const root = process.cwd()
 const registry = buildRegistry({ root })
 /** Editor extensions: named like components by the catalogue, and not React components. */
-const EDITOR_EXTENSIONS = ['KeptSelection', 'BlockId', 'UnknownBlock', 'ReferenceNode', 'AttachmentNode', 'PersonMention', 'UrgentPersonMention', 'CaptionedReference', 'ReferenceTrigger', 'SlashCommands', 'PastedImages', 'CodeBlockColours', 'Checklist', 'Callout', 'ReferenceCards', 'LinkChips', 'ReferenceMenu']
+const EDITOR_EXTENSIONS = ['KeptSelection', 'BlockId', 'UnknownBlock', 'ReferenceNode', 'AttachmentNode', 'PersonMention', 'UrgentPersonMention', 'CaptionedReference', 'ReferenceTrigger', 'SlashCommands', 'PastedImages', 'PastedMarkdown', 'CodeBlockColours', 'Checklist', 'Callout', 'ReferenceCards', 'LinkChips', 'ReferenceMenu']
 const entry = (name: string): RegistryEntry => {
   const found = registry.entries.find((candidate) => candidate.name === name)
   if (!found) throw new Error(`no entry for ${name}`)
@@ -48,19 +48,19 @@ describe('the registry builds', () => {
     expect(registry.entries.map((one) => one.name).sort()).toEqual(values.map((one) => one.name).sort())
   })
 
-  it('counts 162 names over 80 files: 114 components, 46 helpers and 2 hooks (NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October; BlockHandle and EditorBlockHandle (RIC-18) on 2 October, moveBlock and blockDropCursor, the drop in the gutter, on 5 October, MembersPill and MembersDialog, moved from Peek (SHI-31), on 6 October, ShowMore on 7 October, AppProvider on 8 October, and KindIcon, thingKindOf and PastedImages with its two helpers, moved from Peek, on 8 October; CodeBlockColours, the coloured code block of the editor, on 9 October; Checklist, Callout, isChecklistTick and calloutLook (RIC-19) on 13 October; EditorTableControls and its four actions (RIC-21) on 13 October; ReferenceCards, useReferenceCards and its three helpers, the card a chip in a document asks for, on 14 October; LinkChips and its two helpers, a URL in a document read as its chip, on 14 October; ReferenceMenu, ReferenceMenuView and three helpers, the menu of a chip while writing, on 14 October)', () => {
+  it('counts 163 names over 81 files: 115 components, 46 helpers and 2 hooks (NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October; BlockHandle and EditorBlockHandle (RIC-18) on 2 October, moveBlock and blockDropCursor, the drop in the gutter, on 5 October, MembersPill and MembersDialog, moved from Peek (SHI-31), on 6 October, ShowMore on 7 October, AppProvider on 8 October, and KindIcon, thingKindOf and PastedImages with its two helpers, moved from Peek, on 8 October; CodeBlockColours, the coloured code block of the editor, on 9 October; Checklist, Callout, isChecklistTick and calloutLook (RIC-19) on 13 October; EditorTableControls and its four actions (RIC-21) on 13 October; ReferenceCards, useReferenceCards and its three helpers, the card a chip in a document asks for, on 14 October; LinkChips and its two helpers, a URL in a document read as its chip, on 14 October; ReferenceMenu, ReferenceMenuView and three helpers, the menu of a chip while writing, on 14 October; PastedMarkdown, markdown pasted as the blocks it spells (LEAF-10), on 15 October)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
     // The `EDITOR_EXTENSIONS` count as components by their names; they are
     // editor extensions, documented on SelectionToolbar's, BlockNodes' and
     // ComposerTriggers' pages.
     const kinds = registry.entries.reduce<Record<string, number>>((all, one) => ({ ...all, [one.kind]: (all[one.kind] ?? 0) + 1 }), {})
-    expect(kinds).toEqual({ component: 114, helper: 46, hook: 2 })
-    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(80)
+    expect(kinds).toEqual({ component: 115, helper: 46, hook: 2 })
+    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(81)
   })
 
   it('gives every entry a purpose, from its own page or from the comment above it', () => {
     expect(registry.entries.filter((one) => one.purpose.trim() === '')).toEqual([])
-    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(76)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(77)
     expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(86)
   })
 

package/stories/Choosing.mdx

@@ -98,6 +98,7 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | A link — in text, on a title, beside a note, or a whole box | **Link** — `text`, `quiet`, `underlined`, `plain`; `external` for a new tab |
 | A document or an image attached to something, posted or waiting to be sent | **AttachmentCard** — the file decides the shape; `pending` in a composer |
 | A picture pasted into an editor, attached rather than pasted | **PastedImages** — from `@estiva-app/ui/editor`; the app hands it its upload |
+| Markdown pasted as plain text, landing as the headings, lists and tables it spells | **PastedMarkdown** — from `@estiva-app/ui/editor`, in an editor that saves a block document; the app hands it the protocol's reader |
 | A card a chip in a document asks for, drawn after its line | **ReferenceCards** — from `@estiva-app/ui/editor`, beside `ReferenceNode`; the app draws its card into each slot |
 | A URL in a document that reads as the chip of what it points at | **LinkChips** — from `@estiva-app/ui/editor`, beside `ReferenceNode`; the app says what each URL names |
 | Open a chip in a document, or choose its card, while writing | **ReferenceMenu** — from `@estiva-app/ui/editor`, beside `ReferenceCards`; a click on the chip, or putting one in, opens it |