@estiva-app/ui 0.72.0 → 0.73.0-inline-text.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.72.0",
+  "version": "0.73.0-inline-text.1",
   "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.72.0",
-    "exports": 177,
-    "typeExports": 162,
+    "packageVersion": "0.73.0-inline-text.1",
+    "exports": 178,
+    "typeExports": 164,
     "files": null
   },
   "storybook": {
@@ -3445,6 +3445,100 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "InlineText",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/InlineText.tsx",
+      "purpose": "A page's title, or the line under it, edited where it stands, as in a document: the text is the editor, with no box and nothing moving.",
+      "purposeFrom": "page",
+      "props": [
+        {
+          "name": "value",
+          "takes": "text",
+          "required": true,
+          "note": "The saved text. A new value is loaded when you are not in the field and hold nothing unsaved."
+        },
+        {
+          "name": "placeholder",
+          "takes": "text",
+          "required": true,
+          "note": "What it is for, muted, while it is empty: \"Untitled\", \"Add a summary\"."
+        },
+        {
+          "name": "label",
+          "takes": "text",
+          "required": true,
+          "note": "The accessible name: \"Title\", \"Summary\"."
+        },
+        {
+          "name": "onCommit",
+          "takes": "a handler",
+          "required": true,
+          "note": "Save it: resolve `true` when saved; `false` keeps your text in place."
+        },
+        {
+          "name": "onText",
+          "takes": "a handler",
+          "required": false,
+          "note": "The text as it is being written, on focus and every change; `null` when you leave."
+        },
+        {
+          "name": "onEnter",
+          "takes": "a handler",
+          "required": false,
+          "note": "Enter, after the save has started: where the caret goes next."
+        },
+        {
+          "name": "variant",
+          "takes": "title | summary",
+          "required": false,
+          "note": "`title`: the page's heading. `summary`: the line under it, quieter."
+        },
+        {
+          "name": "clearable",
+          "takes": "true/false",
+          "required": false,
+          "note": "Empty is a value (a summary). Otherwise leaving it empty brings the saved one back (a title)."
+        },
+        {
+          "name": "readOnly",
+          "takes": "true/false",
+          "required": false,
+          "note": "Text only, the same size and place: nobody can change it, or the editor is not ready."
+        },
+        {
+          "name": "className",
+          "takes": "text",
+          "required": false,
+          "note": "Placement only."
+        },
+        {
+          "name": "ref",
+          "takes": "Ref<InlineTextHandle>",
+          "required": false,
+          "note": null
+        }
+      ],
+      "variants": [
+        {
+          "prop": "variant",
+          "values": [
+            "title",
+            "summary"
+          ]
+        }
+      ],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-inlinetext--docs",
+      "storyId": "primitives-inlinetext--default",
+      "docPage": "src/InlineText.mdx",
+      "app": null,
+      "looks": []
+    },
     {
       "name": "InputChip",
       "repo": "estiva-ui",

package/src/InlineText.mdx

@@ -0,0 +1,64 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as InlineTextStories from './InlineText.stories'
+
+<Meta of={InlineTextStories} />
+
+# InlineText
+
+A page's title, or the line under it, edited where it stands, as in a document: the text is the editor, with no box and nothing moving.
+
+<Canvas of={InlineTextStories.Default} />
+
+## When
+
+- **`variant="title"`**: a page's heading. Left empty, the saved one comes back.
+- **`variant="summary"`** with **`clearable`**: the quieter line under it. Left empty, it is saved as nothing.
+- `readOnly` for someone who cannot change it, or until the app can save: the same text in the same place.
+
+<Canvas of={InlineTextStories.Empty} />
+<Canvas of={InlineTextStories.Refused} />
+
+## When not
+
+- A field in a form, a dialog or a settings row → **TextInput** or **Textarea**, in a **Form**.
+- Text you click to open as a field, in a list or a sidebar → **EditableText**.
+- Several paragraphs, lists or links → the app's block editor, with **EditorBlockHandle** and **SelectionToolbar**.
+
+## How
+
+```tsx
+import { InlineText, type InlineTextHandle } from '@estiva-app/ui/editor'
+
+const summary = useRef<InlineTextHandle>(null)
+
+<InlineText variant="title" label="Title" placeholder="Untitled" value={title} onCommit={rename} onEnter={() => summary.current?.focus()} />
+<InlineText ref={summary} variant="summary" clearable label="Summary" placeholder="Add a summary" value={line} onCommit={summarize} onText={setCount} />
+```
+
+- **`onCommit` resolves `true` when saved.** `false` keeps your text where it is; say why under it (a `FieldLine` with `tone="error"`). A change made elsewhere is not loaded over unsaved text.
+- **`onText`** gives the text as it is written, and `null` on leaving: for a count under it.
+- **`onEnter`** says where the caret goes after Enter: the next line down. `ref.focus('start' | 'end')` puts it there.
+- `label` is required: it is the editor's accessible name.
+- Base UI has no part for an editable line of a document; the editor is Tiptap, the same kind of surface as the block editor below it.
+
+## What it owns
+
+It does these by itself. Write none of them around it.
+
+| It does | So you never write |
+|---|---|
+| The size and colour of a title or a summary, the same at rest and while written | a class for the text, or for a field state |
+| Line breaks and pasted lines become one line of plain text | a paste handler or a clean-up before saving |
+| An unchanged or (for a title) empty value is not a write | a compare before saving |
+| Your text stays after a refused save, and a change from elsewhere waits | a draft kept beside it |
+| The placeholder while it is empty | an empty check |
+
+## Keys
+
+| Key | What it does |
+|---|---|
+| Enter | Saves, and calls `onEnter` |
+| Escape | Stops editing and saves what was typed |
+| Ctrl+Z / Ctrl+Shift+Z | Undo / redo |
+
+<Controls />

package/src/InlineText.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useRef, useState } from 'react'
+import { FieldLine } from './Field'
+import { InlineText, type InlineTextHandle } from './InlineText'
+
+/**
+ * A page's title and the line under it, edited where they stand. Click into
+ * either and type: no box, nothing moves. Enter saves and goes on down the
+ * page; Escape or clicking away saves too.
+ */
+const meta = {
+  title: 'Primitives/InlineText',
+  component: InlineText,
+  parameters: { layout: 'padded' },
+  decorators: [
+    (Story) => (
+      <div className="w-[560px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof InlineText>
+
+export default meta
+type Story = StoryObj
+
+const LINE = 'A line of plain text under the title, saying in a sentence what this is about.'
+const LONG = 'A line of plain text under the title that goes on for longer than a line should, so it wraps the way the text around it does and the reader sees all of it, without anything cut off at the edge or hidden behind a control.'
+
+/** A title, the line under it, and the text below: Enter in the title goes to the line, Enter in the line goes to the text. */
+function Page({ title = 'Item one', line = LINE, refuse = false, readOnly = false }: { title?: string; line?: string; refuse?: boolean; readOnly?: boolean }) {
+  const lineRef = useRef<InlineTextHandle>(null)
+  const textRef = useRef<HTMLParagraphElement>(null)
+  const [saved, setSaved] = useState({ title, line })
+  const [refused, setRefused] = useState(false)
+  return (
+    <div className="flex flex-col">
+      <InlineText
+        variant="title"
+        label="Title"
+        placeholder="Untitled"
+        value={saved.title}
+        readOnly={readOnly}
+        onCommit={(next) => (setSaved((s) => ({ ...s, title: next })), true)}
+        onEnter={() => lineRef.current?.focus('start')}
+      />
+      <InlineText
+        ref={lineRef}
+        variant="summary"
+        label="Summary"
+        placeholder="Add a line"
+        clearable
+        value={saved.line}
+        readOnly={readOnly}
+        onText={(text) => text !== null && setRefused(false)}
+        onCommit={(next) => {
+          if (refuse) {
+            setRefused(true)
+            return false
+          }
+          setSaved((s) => ({ ...s, line: next }))
+          return true
+        }}
+        onEnter={() => textRef.current?.focus()}
+      />
+      {refused && <FieldLine tone="error">Not saved: the change was refused. Your text is still here.</FieldLine>}
+      <p ref={textRef} tabIndex={-1} className="mt-4 text-body-1 text-text-primary outline-none">
+        The text of the page starts here. Nothing above it moves while you write in the title or the line under it.
+      </p>
+    </div>
+  )
+}
+
+export const Default: Story = { render: () => <Page /> }
+
+/** Nothing written yet: what each is for, muted, in its place. */
+export const Empty: Story = { render: () => <Page title="" line="" /> }
+
+/** A long line wraps like the text around it. */
+export const Long: Story = { render: () => <Page line={LONG} /> }
+
+/** The save is refused: the text stays where you wrote it, and the app says why under it. */
+export const Refused: Story = { render: () => <Page refuse /> }
+
+/** Someone who cannot change it: the same text, in the same place. */
+export const ReadOnly: Story = { render: () => <Page readOnly /> }

package/src/InlineText.test.tsx

@@ -0,0 +1,187 @@
+// @vitest-environment jsdom
+/**
+ * What the InlineText page claims, pinned: the text is the editor, Enter saves
+ * and moves on, Escape and leaving save, nothing unchanged is written, a title
+ * left empty comes back and a summary left empty is cleared, a refused save
+ * keeps your text, a paste is one line, and read-only is text only.
+ *
+ * jsdom lays nothing out, so text goes in through the editor and the caret is
+ * put at the end by hand; the keys are real key presses.
+ */
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { Editor } from '@tiptap/core'
+import { InlineText, type InlineTextProps } from './InlineText'
+
+// jsdom draws nothing, so it has no rects; the editor asks for them when it scrolls to the caret.
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn()
+  Element.prototype.getClientRects = () => [] as unknown as DOMRectList
+  Range.prototype.getClientRects = () => [] as unknown as DOMRectList
+  Range.prototype.getBoundingClientRect = () => new DOMRect()
+})
+
+afterEach(cleanup)
+
+const field = (name = 'Title') => screen.getByRole('textbox', { name })
+const editorOf = (box: HTMLElement) => (box as HTMLElement & { editor: Editor }).editor
+
+function draw(props: Partial<InlineTextProps> = {}) {
+  const onCommit = props.onCommit ?? vi.fn(() => true)
+  const base = { value: 'Item one', placeholder: 'Untitled', label: 'Title' }
+  const view = render(<InlineText {...base} {...props} onCommit={onCommit} />)
+  return { onCommit, rerender: (next: Partial<InlineTextProps>) => view.rerender(<InlineText {...base} {...props} {...next} onCommit={onCommit} />) }
+}
+
+/** Click into it: focus, with the caret at the end. */
+async function enter(name?: string) {
+  const box = field(name)
+  await act(async () => {
+    box.focus()
+    editorOf(box).commands.setTextSelection(editorOf(box).state.doc.content.size - 1)
+  })
+}
+
+/** Type at the caret. */
+async function type(text: string, name?: string) {
+  await act(async () => {
+    editorOf(field(name)).commands.insertContent(text)
+  })
+}
+
+/** Delete everything in it. */
+async function clear(name?: string) {
+  await act(async () => {
+    editorOf(field(name)).commands.clearContent(true)
+  })
+}
+
+describe('InlineText: the text is the editor', () => {
+  it('is an editable text box named for what it edits, holding the saved text, with no button to open it', () => {
+    draw()
+    expect(field().getAttribute('contenteditable')).toBe('true')
+    expect(field().textContent).toBe('Item one')
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+
+  it('shows the placeholder while empty, and not once there is text', async () => {
+    draw({ value: '', clearable: true })
+    expect(screen.queryByText('Untitled')).not.toBeNull()
+    await enter()
+    await type('A')
+    expect(screen.queryByText('Untitled')).toBeNull()
+  })
+
+  it('read-only is the text alone: not editable and no placeholder', () => {
+    draw({ value: '', readOnly: true })
+    expect(field().getAttribute('contenteditable')).toBe('false')
+    expect(screen.queryByText('Untitled')).toBeNull()
+  })
+})
+
+describe('InlineText: keys and saving', () => {
+  it('Enter saves the text and moves on', async () => {
+    const onEnter = vi.fn()
+    const { onCommit } = draw({ onEnter })
+    await enter()
+    await type(' two')
+    await userEvent.keyboard('{Enter}')
+    expect(onCommit).toHaveBeenCalledWith('Item one two')
+    expect(onEnter).toHaveBeenCalledTimes(1)
+    expect(field().textContent).toBe('Item one two')
+  })
+
+  it('Escape stops editing and saves what was typed', async () => {
+    const { onCommit } = draw()
+    await enter()
+    await type(' two')
+    await userEvent.keyboard('{Escape}')
+    expect(document.activeElement).not.toBe(field())
+    expect(onCommit).toHaveBeenCalledWith('Item one two')
+    expect(field().textContent).toBe('Item one two')
+  })
+
+  it('leaving saves it', async () => {
+    const { onCommit } = draw()
+    await enter()
+    await type(' two')
+    await act(async () => field().blur())
+    expect(onCommit).toHaveBeenCalledWith('Item one two')
+  })
+
+  it('an unchanged text is not a write', async () => {
+    const { onCommit } = draw()
+    await enter()
+    await userEvent.keyboard('{Enter}')
+    await userEvent.keyboard('{Escape}')
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
+  it('a title left empty brings the saved one back, and is not a write', async () => {
+    const { onCommit } = draw()
+    await enter()
+    await clear()
+    await userEvent.keyboard('{Escape}')
+    expect(onCommit).not.toHaveBeenCalled()
+    expect(field().textContent).toBe('Item one')
+  })
+
+  it('a clearable one left empty is saved as nothing', async () => {
+    const { onCommit } = draw({ clearable: true, label: 'Summary' })
+    await enter('Summary')
+    await clear('Summary')
+    await userEvent.keyboard('{Escape}')
+    expect(onCommit).toHaveBeenCalledWith('')
+  })
+
+  it('a paste of several lines is one line of plain text', async () => {
+    const { onCommit } = draw({ value: '', clearable: true })
+    await enter()
+    await userEvent.paste('Line one\n\nline   two\n')
+    await userEvent.keyboard('{Enter}')
+    expect(onCommit).toHaveBeenCalledWith('Line one line two')
+  })
+
+  it('reports the text being written, and null on leaving', async () => {
+    const onText = vi.fn()
+    draw({ onText })
+    await enter()
+    expect(onText).toHaveBeenLastCalledWith('Item one')
+    await type('!')
+    expect(onText).toHaveBeenLastCalledWith('Item one!')
+    await userEvent.keyboard('{Escape}')
+    expect(onText).toHaveBeenLastCalledWith(null)
+  })
+})
+
+describe('InlineText: a refused save, and a change from elsewhere', () => {
+  it('a refused save keeps your text where it is, and a change from elsewhere does not overwrite it', async () => {
+    const onCommit = vi.fn(() => false)
+    const { rerender } = draw({ onCommit })
+    await enter()
+    await type(' two')
+    await userEvent.keyboard('{Escape}')
+    expect(onCommit).toHaveBeenCalledWith('Item one two')
+    expect(field().textContent).toBe('Item one two')
+    rerender({ value: 'Item three' })
+    expect(field().textContent).toBe('Item one two')
+  })
+
+  it('a change from elsewhere is loaded while you are not in it', async () => {
+    const { rerender } = draw()
+    rerender({ value: 'Item three' })
+    await waitFor(() => expect(field().textContent).toBe('Item three'))
+  })
+
+  it('your own save coming back is not loaded over what you go on typing', async () => {
+    const { rerender, onCommit } = draw()
+    await enter()
+    await type(' two')
+    await userEvent.keyboard('{Enter}')
+    expect(onCommit).toHaveBeenCalledWith('Item one two')
+    await type('!')
+    rerender({ value: 'Item one two' })
+    expect(field().textContent).toBe('Item one two!')
+  })
+})

package/src/InlineText.tsx

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useImperativeHandle, useRef, useState, type Ref } from 'react'
+import { Extension, Node } from '@tiptap/core'
+import { history, redo, undo } from '@tiptap/pm/history'
+import { EditorContent, useEditor } from '@tiptap/react'
+import { cn } from './cn'
+
+/**
+ * A line of plain text on a page that you edit where it stands, as in a
+ * document: a title, a summary. Ship's title editor (Katerina, 29 September,
+ * findings E1 and E2), moved here for the summary (Miky, 16 October: "it feels
+ * like a document, not a form") so every app's header edits the same way.
+ *
+ * - **No box**, on hover or on click, and nothing moves: the text is the
+ *   editor, in its own size and colour. The text cursor is the only sign.
+ * - **The caret goes where you click**, and nothing is selected.
+ * - **Enter saves and moves on** — `onEnter` says where: the title to the
+ *   summary, the summary to the description.
+ * - **Escape stops editing and keeps the text**, saving it, as leaving does.
+ *   Nothing is thrown away; Ctrl+Z undoes.
+ * - **An unchanged value is not a write.** Leaving it empty brings the saved
+ *   one back, unless `clearable`: then empty is saved, as nothing.
+ * - **A refused save keeps your text where it is**, and the app says why
+ *   beside it; a change made elsewhere does not overwrite it until you have
+ *   saved, changed or emptied it.
+ *
+ * One paragraph and no marks, so pasted line breaks become spaces and it wraps
+ * like text, which a one-line `<input>` cannot. A Tiptap editor rather than a
+ * raw `contenteditable`, so it is the same kind of surface as the description
+ * under it.
+ */
+export interface InlineTextProps {
+  /** The saved text. A new value is loaded when you are not in the field and hold nothing unsaved. */
+  value: string
+  /** What it is for, muted, while it is empty: "Untitled", "Add a summary". */
+  placeholder: string
+  /** The accessible name: "Title", "Summary". */
+  label: string
+  /** Save it: resolve `true` when saved; `false` keeps your text in place. */
+  onCommit: (value: string) => Promise<boolean> | boolean
+  /** The text as it is being written, on focus and every change; `null` when you leave. For a count. */
+  onText?: (text: string | null) => void
+  /** Enter, after the save has started: where the caret goes next. */
+  onEnter?: () => void
+  /** `title`: the page's heading. `summary`: the line under it, quieter. */
+  variant?: 'title' | 'summary'
+  /** Empty is a value (a summary). Otherwise leaving it empty brings the saved one back (a title). */
+  clearable?: boolean
+  /** Text only, the same size and place: nobody can change it, or the editor is not ready. */
+  readOnly?: boolean
+  /** Placement only. */
+  className?: string
+  ref?: Ref<InlineTextHandle>
+}
+
+type CaretAt = 'start' | 'end'
+
+export interface InlineTextHandle {
+  /** Put the caret in it, at the start or the end. */
+  focus: (at?: CaretAt) => void
+}
+
+/** Size and tone, per variant: the same for the text at rest and while it is written. */
+const VARIANT = {
+  title: 'text-h2 text-text-primary',
+  summary: 'text-body-1 text-text-secondary',
+} as const
+
+/** The room around the text: the caret has a little space at the edges, and the text still lines up with what is above and below it. */
+const ROOM = '-mx-2 px-2 py-1'
+
+// The whole schema: one paragraph of text. Written with the core, so the
+// package's peers stay what they were.
+const OneLine = Node.create({ name: 'doc', topNode: true, content: 'paragraph' })
+const Paragraph = Node.create({
+  name: 'paragraph',
+  content: 'text*',
+  parseHTML: () => [{ tag: 'p' }],
+  renderHTML: () => ['p', 0],
+})
+const Text = Node.create({ name: 'text' })
+const Undo = Extension.create({
+  name: 'inlineTextUndo',
+  addProseMirrorPlugins: () => [history()],
+  addKeyboardShortcuts() {
+    const run = (command: typeof undo) => () => command(this.editor.state, this.editor.view.dispatch)
+    return { 'Mod-z': run(undo), 'Shift-Mod-z': run(redo), 'Mod-y': run(redo) }
+  },
+})
+
+const doc = (text: string) => ({ type: 'doc', content: [{ type: 'paragraph', content: text ? [{ type: 'text', text }] : [] }] })
+
+/** One line: every run of white space, line breaks included, is one space. */
+const oneLine = (text: string) => text.replace(/\s+/g, ' ').trim()
+
+export function InlineText({ value, placeholder, label, onCommit, onText, onEnter, variant = 'title', clearable = false, readOnly = false, className, ref }: InlineTextProps) {
+  const saved = useRef(value)
+  // The placeholder follows the text as it is typed or deleted, not the saved value.
+  const [empty, setEmpty] = useState(!value)
+  // Read at key time: the editor's handlers are built once, and a prop they
+  // closed over would be the first render's.
+  const latest = useRef({ onEnter, onText, onCommit, clearable })
+  latest.current = { onEnter, onText, onCommit, clearable }
+
+  const save = useCallback(async (text: string) => {
+    const next = oneLine(text)
+    if (next === saved.current) return
+    if (!next && !latest.current.clearable) return
+    if (await latest.current.onCommit(next)) saved.current = next
+  }, [])
+
+  const editor = useEditor({
+    extensions: [OneLine, Paragraph, Text, Undo],
+    content: doc(value),
+    editable: !readOnly,
+    editorProps: {
+      attributes: {
+        'aria-label': label,
+        role: 'textbox',
+        'aria-multiline': 'false',
+        'aria-placeholder': placeholder,
+        ...(readOnly ? { 'aria-readonly': 'true' } : {}),
+        class: 'outline-none',
+      },
+      handleKeyDown: (view, event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault()
+          void save(view.state.doc.textContent)
+          latest.current.onEnter?.()
+          return true
+        }
+        if (event.key === 'Escape') {
+          view.dom.blur()
+          return true
+        }
+        return false
+      },
+      // A paste is its plain text on this one line, whatever it was copied from.
+      handlePaste: (view, event) => {
+        const text = event.clipboardData?.getData('text/plain')
+        if (text == null) return false
+        view.dispatch(view.state.tr.insertText(text.replace(/\s+/g, ' ')))
+        return true
+      },
+    },
+    onFocus: ({ editor: e }) => latest.current.onText?.(e.getText()),
+    onUpdate: ({ editor: e }) => {
+      setEmpty(e.isEmpty)
+      latest.current.onText?.(e.getText())
+    },
+    onBlur: ({ editor: e }) => {
+      latest.current.onText?.(null)
+      // Left empty where empty is not a value: the saved text comes back, so
+      // the page never shows the placeholder while everyone else sees the text.
+      if (e.isEmpty && saved.current && !latest.current.clearable) {
+        e.commands.setContent(doc(saved.current), { emitUpdate: false })
+        setEmpty(false)
+        return
+      }
+      void save(e.getText())
+    },
+  }, [readOnly])
+
+  // A change made elsewhere is loaded while you are not in the field and hold
+  // nothing unsaved; your own save coming back is left alone.
+  useEffect(() => {
+    if (!editor || editor.isDestroyed || value === saved.current || editor.isFocused) return
+    if (oneLine(editor.getText()) !== saved.current) return
+    editor.commands.setContent(doc(value), { emitUpdate: false })
+    saved.current = value
+    setEmpty(!value)
+  }, [editor, value])
+
+  useImperativeHandle(ref, () => ({
+    focus: (at = 'start') => editor?.commands.focus(at),
+  }), [editor])
+
+  return (
+    <div className={cn('relative', VARIANT[variant], className)}>
+      <EditorContent editor={editor} className={cn(ROOM, !readOnly && 'cursor-text')} />
+      {/* Empty — never saved, or just deleted — shows what it is for, muted,
+          and is not part of the text. Drawn over the editor, where the text starts. */}
+      {empty && !readOnly && (
+        <span aria-hidden className="pointer-events-none absolute left-0 top-1 text-text-muted">{placeholder}</span>
+      )}
+    </div>
+  )
+}

package/src/editor.ts

@@ -9,6 +9,7 @@
  */
 export { KeptSelection, SelectionToolbar, keepSelection, releaseSelection, normalizeHref, type MarkId, type SelectionAction, type SelectionToolbarProps } from './SelectionToolbar'
 export { ComposeBox, ComposeKeys, COMPOSE_EDITOR_CLASSES, type ComposeBoxProps } from './ComposeBox'
+export { InlineText, type InlineTextProps, type InlineTextHandle } from './InlineText'
 export {
   CommentHighlights,
   setCommentAnchors,