@estiva-app/ui 0.65.1 → 0.65.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.65.1",
+  "version": "0.65.3",
   "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,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.65.1",
+    "packageVersion": "0.65.3",
     "exports": 140,
     "typeExports": 145,
     "files": null

package/src/BlockNodes.test.tsx

@@ -477,3 +477,99 @@ describe('what it draws', () => {
     expect(container.querySelector('h1')?.getAttribute('data-block-id')).toBe('h1')
   })
 })
+
+describe('Tab on a list item — MAN-13', () => {
+  /** A key as a person presses it: through the editor's own key handling, not a command. */
+  const press = (key: string, shiftKey = false) =>
+    editor!.view.someProp('handleKeyDown', (f) => f(editor!.view, new KeyboardEvent('keydown', { key, shiftKey })))
+  const LIST = {
+    type: 'doc',
+    content: [
+      {
+        type: 'bulletList',
+        attrs: { blockId: 'l1' },
+        content: [
+          { type: 'listItem', attrs: { blockId: 'i1' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'intro' }] }] },
+          { type: 'listItem', attrs: { blockId: 'i2' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'after' }] }] },
+        ],
+      },
+    ],
+  }
+  /** The end of "after": 1 opens the list, 2 the first item, 3 its paragraph, then "intro", two closes, two opens. */
+  const END_OF_AFTER = 1 + 1 + 1 + 5 + 2 + 2 + 5
+
+  it('puts the item in a list inside the one above, keeping its id, and gives that list none', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: LIST })
+    editor.commands.setTextSelection(END_OF_AFTER)
+    expect(press('Tab')).toBe(true)
+    const list = (editor.getJSON() as Json).content![0]
+    expect(list.content!.map((n) => n.attrs?.blockId)).toEqual(['i1'])
+    const inner = list.content![0].content![1]
+    expect(inner.type).toBe('bulletList')
+    expect(inner.attrs?.blockId ?? null).toBeNull()
+    expect(inner.content![0].attrs?.blockId).toBe('i2')
+    expect(JSON.stringify(inner)).toContain('after')
+  })
+
+  it('names an item made by Enter inside the inner list, so a save does not re-mint it each time', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: LIST })
+    editor.commands.setTextSelection(END_OF_AFTER)
+    press('Tab')
+    press('Enter')
+    editor.commands.insertContent('third')
+    const inner = (editor.getJSON() as Json).content![0].content![0].content![1]
+    const ids = inner.content!.map((n) => n.attrs?.blockId)
+    expect(ids[0]).toBe('i2')
+    expect(typeof ids[1]).toBe('string')
+    expect(ids[1]).not.toBe('i2')
+    expect(inner.attrs?.blockId ?? null).toBeNull()
+  })
+
+  it('names an item in an inner list that arrives without an id, as it does one in the outer list', async () => {
+    const nested = structuredClone(LIST)
+    const [first, second] = nested.content[0].content
+    ;(first.content as unknown[]).push({ type: 'bulletList', content: [{ ...second, attrs: {} }] })
+    nested.content[0].content = [first]
+    editor = new Editor({ extensions: EXTENSIONS, content: nested })
+    // The editor's `create` comes a tick after it mounts.
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    const inner = (editor.getJSON() as Json).content![0].content![0].content![1]
+    expect(typeof inner.content![0].attrs?.blockId).toBe('string')
+    expect(inner.attrs?.blockId ?? null).toBeNull()
+  })
+
+  it('brings it back out with Shift+Tab, id and text kept', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: LIST })
+    editor.commands.setTextSelection(END_OF_AFTER)
+    press('Tab')
+    press('Tab', true)
+    const list = (editor.getJSON() as Json).content![0]
+    expect(list.content!.map((n) => n.attrs?.blockId)).toEqual(['i1', 'i2'])
+    expect(list.content![0].content).toHaveLength(1)
+  })
+
+  it('clears an id an inner list arrives with, since the save writes no block for it', () => {
+    const nested = structuredClone(LIST)
+    const [first, second] = nested.content[0].content
+    ;(first.content as unknown[]).push({ type: 'bulletList', attrs: { blockId: 'stray' }, content: [second] })
+    nested.content[0].content = [first]
+    editor = new Editor({ extensions: EXTENSIONS, content: nested })
+    // Any change that brings in a block runs the check; Enter at the end of "after" is one.
+    editor.commands.setTextSelection(END_OF_AFTER)
+    press('Enter')
+    expect(JSON.stringify(editor.getJSON())).not.toContain('stray')
+  })
+
+  it('never lets an inner list keep a real block\'s id: the block keeps it', () => {
+    const nested = structuredClone(LIST)
+    const [first, second] = nested.content[0].content
+    ;(first.content as unknown[]).push({ type: 'bulletList', attrs: { blockId: 'i1' }, content: [second] })
+    nested.content[0].content = [first]
+    editor = new Editor({ extensions: EXTENSIONS, content: nested })
+    editor.commands.setTextSelection(END_OF_AFTER)
+    press('Enter')
+    const item = (editor.getJSON() as Json).content![0].content![0]
+    expect(item.attrs?.blockId).toBe('i1')
+    expect(item.content![1].attrs?.blockId ?? null).toBeNull()
+  })
+})

package/src/BlockNodes.tsx

@@ -72,9 +72,12 @@ interface Claim {
 /** Every block that claims an id, by id, in document order. */
 function claimsIn(doc: ProseMirrorNode): Map<string, Claim[]> {
   const claims = new Map<string, Claim[]>()
-  doc.descendants((node, pos) => {
+  doc.descendants((node, pos, parent) => {
     const fixed = node.type.name === 'unknownBlock'
     if (!fixed && !BLOCK_TYPE_SET.has(node.type.name)) return
+    // A list inside a list item is no block (MAN-13): an id it arrived with is
+    // cleared, never a claim that could take a real block's.
+    if (parent?.type.name === 'listItem' && LISTS.has(node.type.name)) return
     const id = node.attrs.blockId
     if (typeof id !== 'string' || id === '') return
     const copies = claims.get(id)
@@ -151,6 +154,22 @@ const BLOCK_CONTAINERS = new Set(['bulletList', 'orderedList', 'table', 'tableRo
 /** The wrappers the save flattens: their paragraphs become inline runs of theirs. */
 const FLATTENED = new Set(['listItem', 'blockquote'])
 
+/**
+ * The lists Tab puts inside a list item (MAN-13). §13.3 keeps a list flat and
+ * marks an item's depth, so the save walks into such a list for its items and
+ * writes no block for the list itself: its items get ids, it gets none.
+ */
+const LISTS = new Set(['bulletList', 'orderedList'])
+
+/** The lists inside a list item, with where each starts. */
+function innerLists(item: ProseMirrorNode, pos: number): { pos: number; node: ProseMirrorNode }[] {
+  const out: { pos: number; node: ProseMirrorNode }[] = []
+  item.forEach((child, offset) => {
+    if (LISTS.has(child.type.name)) out.push({ pos: pos + 1 + offset, node: child })
+  })
+  return out
+}
+
 const idOf = (node: ProseMirrorNode): string | undefined => {
   const id = node.attrs.blockId
   return typeof id === 'string' && id !== '' ? id : undefined
@@ -163,6 +182,9 @@ function addressedBlocks(doc: ProseMirrorNode): { pos: number; node: ProseMirror
     if (!BLOCK_TYPE_SET.has(node.type.name)) return
     out.push({ pos, node })
     if (BLOCK_CONTAINERS.has(node.type.name)) node.forEach((child, offset) => visit(child, pos + 1 + offset))
+    if (node.type.name === 'listItem') {
+      for (const list of innerLists(node, pos)) list.node.forEach((child, offset) => visit(child, list.pos + 1 + offset))
+    }
   }
   doc.forEach((node, offset) => visit(node, offset))
   return out
@@ -175,13 +197,17 @@ function unnamedBlocks(doc: ProseMirrorNode): number[] {
     .map((b) => b.pos)
 }
 
-/** Where a paragraph inside a list item or a quote claims an id — which the save drops. */
+/**
+ * Where a paragraph inside a list item or a quote claims an id, or a list
+ * inside a list item does — both of which the save drops.
+ */
 function hiddenIds(doc: ProseMirrorNode): number[] {
   const out: number[] = []
   doc.descendants((node, pos) => {
     if (!FLATTENED.has(node.type.name)) return
     node.forEach((child, offset) => {
-      if (child.isTextblock && idOf(child) !== undefined) out.push(pos + 1 + offset)
+      const inner = child.isTextblock || (node.type.name === 'listItem' && LISTS.has(child.type.name))
+      if (inner && idOf(child) !== undefined) out.push(pos + 1 + offset)
     })
   })
   return out

package/src/RichText.stories.tsx

@@ -84,6 +84,33 @@ export const WithTheAppsOwnParts: Story = {
   },
 }
 
+/** Items indented under the one above, two levels deep, in both lists: each level is the type of the list it sits in. */
+export const IndentedItems: Story = {
+  args: {
+    blocks: [
+      {
+        type: 'bulletList',
+        children: [
+          { type: 'listItem', inline: [t('Item one')] },
+          { type: 'listItem', indent: 1, inline: [t('Item one, under it')] },
+          { type: 'listItem', indent: 2, inline: [t('A level further in')] },
+          { type: 'listItem', indent: 1, inline: [t('Back one level')] },
+          { type: 'listItem', inline: [t('Item two')] },
+        ],
+      },
+      {
+        type: 'orderedList',
+        children: [
+          { type: 'listItem', inline: [t('The first step')] },
+          { type: 'listItem', indent: 1, inline: [t('Each level counts from one')] },
+          { type: 'listItem', indent: 1, inline: [t('Then two')] },
+          { type: 'listItem', inline: [t('The second step')] },
+        ],
+      },
+    ],
+  },
+}
+
 /** A block this part has no design for, from a later version: its words are drawn, never dropped. */
 export const UnknownBlock: Story = {
   args: {

package/src/RichText.test.tsx

@@ -147,3 +147,38 @@ describe('RichText', () => {
     expect(richTextClassName('default', 'outline-none')).toContain('outline-none')
   })
 })
+
+describe('an indented list item — MAN-13', () => {
+  const item = (id: string, text: string, indent?: number): RichTextBlock => ({ type: 'listItem', id, inline: [t(text)], ...(indent ? { indent } : {}) })
+
+  it('draws an item inside the one above, in a list of the same type with no id', () => {
+    const { container } = render(
+      <RichText blocks={[{ type: 'orderedList', id: 'l1', children: [item('i1', 'intro'), item('i2', 'after', 1), item('i3', 'deeper', 2), item('i4', 'back')] }]} />,
+    )
+    const outer = container.querySelector('ol[data-block-id="l1"]')!
+    expect([...outer.children].map((li) => li.getAttribute('data-block-id'))).toEqual(['i1', 'i4'])
+    const inner = outer.querySelector(':scope > li > ol')!
+    expect(inner.hasAttribute('data-block-id')).toBe(false)
+    expect(inner.querySelector(':scope > li')?.getAttribute('data-block-id')).toBe('i2')
+    expect(inner.querySelector(':scope > li > ol > li')?.textContent).toBe('deeper')
+  })
+
+  it('never draws an item more than one level below the one before it', () => {
+    const { container } = render(<RichText blocks={[{ type: 'bulletList', children: [item('a', 'first', 2), item('b', 'next', 3)] }]} />)
+    const outer = container.querySelector('ul')!
+    expect([...outer.children].map((li) => li.getAttribute('data-block-id'))).toEqual(['a'])
+    expect(outer.querySelector(':scope > li > ul > li')?.getAttribute('data-block-id')).toBe('b')
+  })
+
+  it('never nests deeper than 8 levels (SPEC §13.3)', () => {
+    const deep = Array.from({ length: 20 }, (_, i) => item(`d${i}`, `level ${i}`, i))
+    const { container } = render(<RichText blocks={[{ type: 'bulletList', children: deep }]} />)
+    expect(container.querySelectorAll('ul').length).toBe(9)
+    expect(container.querySelector('[data-block-id="d19"]')!.parentElement).toBe(container.querySelector('[data-block-id="d8"]')!.parentElement)
+  })
+
+  it('draws an item with an indent that is not a whole number above 0 at the left', () => {
+    const { container } = render(<RichText blocks={[{ type: 'bulletList', children: [item('a', 'one'), { ...item('b', 'two'), indent: -1 }, { ...item('c', 'three'), indent: Number.NaN }]}]} />)
+    expect([...container.querySelector('ul')!.children].map((li) => li.getAttribute('data-block-id'))).toEqual(['a', 'b', 'c'])
+  })
+})

package/src/RichText.tsx

@@ -49,6 +49,8 @@ export interface RichTextBlock {
   language?: string
   /** A numbered list's first number. */
   start?: number
+  /** How far a list item is indented under the items above it. A list's items stay flat; this draws them nested. */
+  indent?: number
   attrs?: Record<string, unknown>
   inline?: readonly RichTextRun[]
   children?: readonly RichTextBlock[]
@@ -237,6 +239,31 @@ function Table({ block, draw }: { block: RichTextBlock; draw: Draw }) {
   )
 }
 
+interface NestedItem {
+  item: RichTextBlock
+  key: number
+  below: NestedItem[]
+}
+
+const MAX_DEPTH = 8
+
+/** A list's flat items, each under the last item one level up — never more than one level below the item before. */
+function nestItems(items: readonly RichTextBlock[]): NestedItem[] {
+  const top: NestedItem[] = []
+  // The last item seen at each depth.
+  const path: NestedItem[] = []
+  items.forEach((item, key) => {
+    const asked = Number.isInteger(item.indent) && item.indent! > 0 ? item.indent! : 0
+    // SPEC §13.3: never deeper than 8, so a hostile list cannot nest thousands deep.
+    const depth = Math.min(asked, path.length, MAX_DEPTH)
+    path.length = depth
+    const node: NestedItem = { item, key, below: [] }
+    ;(depth === 0 ? top : path[depth - 1].below).push(node)
+    path.push(node)
+  })
+  return top
+}
+
 function Block({ block, draw }: { block: RichTextBlock; draw: Draw }): ReactNode {
   const own = draw.renderBlock?.(block)
   if (own !== undefined) return own
@@ -251,14 +278,19 @@ function Block({ block, draw }: { block: RichTextBlock; draw: Draw }): ReactNode
       return <p data-block-id={block.id}>{runs}</p>
     case 'bulletList':
     case 'orderedList': {
-      const items = (block.children ?? []).map((item, i) => (
-        <li key={item.id ?? i} data-block-id={item.id}>
-          <Runs runs={item.inline} draw={draw} />
-        </li>
-      ))
-      return block.type === 'bulletList'
-        ? <ul data-block-id={block.id}>{items}</ul>
-        : <ol data-block-id={block.id} start={block.start}>{items}</ol>
+      const ordered = block.type === 'orderedList'
+      const items = (nodes: readonly NestedItem[]): ReactNode[] =>
+        nodes.map(({ item, key, below }) => (
+          <li key={item.id ?? key} data-block-id={item.id}>
+            <Runs runs={item.inline} draw={draw} />
+            {/* The list an indented item sits in is drawn, not stored: it has no id, and the type of the list around it. */}
+            {below.length > 0 && (ordered ? <ol>{items(below)}</ol> : <ul>{items(below)}</ul>)}
+          </li>
+        ))
+      const top = items(nestItems(block.children ?? []))
+      return ordered
+        ? <ol data-block-id={block.id} start={block.start}>{top}</ol>
+        : <ul data-block-id={block.id}>{top}</ul>
     }
     case 'blockquote':
       return <blockquote data-block-id={block.id}>{runs}</blockquote>