@estiva-app/ui 0.49.0 → 0.50.1

package/dist/eslint/no-restyled-part.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"no-restyled-part.d.ts","sourceRoot":"","sources":["../../src/eslint/no-restyled-part.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"no-restyled-part.d.ts","sourceRoot":"","sources":["../../src/eslint/no-restyled-part.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.49.0",
+  "version": "0.50.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,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.49.0",
+    "packageVersion": "0.50.1",
     "exports": 104,
     "typeExports": 113,
     "files": null

package/src/BlockNodes.test.tsx

@@ -83,6 +83,104 @@ describe('what the editor hands back', () => {
   })
 })
 
+describe('Enter inside an anchored block — MAN-10', () => {
+  const TWO = {
+    type: 'doc',
+    content: [
+      { type: 'paragraph', attrs: { blockId: 'p0' }, content: [{ type: 'text', text: 'intro' }] },
+      { type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: 'anchored' }] },
+    ],
+  }
+  // Where "anchored" starts: "intro" is 1 + 5 + 1, then 1 opens the paragraph.
+  const START = 8
+  const blocks = () => {
+    const out: { id: unknown; text: string }[] = []
+    editor!.state.doc.forEach((node) => out.push({ id: node.attrs.blockId, text: node.textContent }))
+    return out
+  }
+
+  it('keeps the id on the text when Enter is pressed at the start and the new line is typed into', () => {
+    // The usual reason to press Enter there: to write a paragraph above. By the
+    // time it saves both halves hold text, so only the editor can tell them apart.
+    editor = new Editor({ extensions: EXTENSIONS, content: TWO })
+    editor.commands.setTextSelection(START)
+    editor.commands.keyboardShortcut('Enter')
+    editor.chain().setTextSelection(START).insertContent('new line above').run()
+
+    const [intro, above, anchored] = blocks()
+    expect(intro).toEqual({ id: 'p0', text: 'intro' })
+    expect(anchored).toEqual({ id: 'p1', text: 'anchored' })
+    expect(above.text).toBe('new line above')
+    expect(above.id).toMatch(/^[0-9a-f]{12}$/)
+  })
+
+  it('keeps the id on the first half when Enter is pressed in the middle', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: TWO })
+    editor.commands.setTextSelection(START + 3)
+    editor.commands.keyboardShortcut('Enter')
+    const [, first, second] = blocks()
+    expect(first).toEqual({ id: 'p1', text: 'anc' })
+    expect(second.id).not.toBe('p1')
+  })
+
+  it('keeps the id on the text when Enter is pressed at the end', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: TWO })
+    editor.commands.setTextSelection(START + 'anchored'.length)
+    editor.commands.keyboardShortcut('Enter')
+    const [, first, second] = blocks()
+    expect(first).toEqual({ id: 'p1', text: 'anchored' })
+    expect(second.id).not.toBe('p1')
+  })
+
+  it('does the same for a list item', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: DOCUMENT })
+    // The start of the list item's text: the last block, inside list, item and paragraph.
+    let at = 0
+    editor.state.doc.descendants((node, pos) => {
+      if (node.type.name === 'listItem') at = pos + 2
+    })
+    editor.commands.setTextSelection(at)
+    editor.commands.keyboardShortcut('Enter')
+    const items = (editor.getJSON() as Json).content?.[4].content ?? []
+    expect(items).toHaveLength(2)
+    expect(items[1].attrs?.blockId).toBe('i1')
+    expect(items[0].attrs?.blockId).not.toBe('i1')
+  })
+
+  it('leaves the id on the original when a copy is pasted above it', () => {
+    // Both copies hold the same text; only the change says which one was there.
+    editor = new Editor({ extensions: EXTENSIONS, content: TWO })
+    editor.commands.insertContentAt(START - 1, {
+      type: 'paragraph',
+      attrs: { blockId: 'p1' },
+      content: [{ type: 'text', text: 'anchored' }],
+    })
+    const [, pasted, original] = blocks()
+    expect(original).toEqual({ id: 'p1', text: 'anchored' })
+    expect(pasted.text).toBe('anchored')
+    expect(pasted.id).not.toBe('p1')
+  })
+
+  it('never takes an unknown block’s id, which the save hands back untouched', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: DOCUMENT })
+    editor.commands.insertContentAt(0, { type: 'paragraph', attrs: { blockId: 'w1' }, content: [{ type: 'text', text: 'same id' }] })
+    const [first, , , unknown] = blocks()
+    expect(unknown.id).toBe('w1')
+    expect(first.id).not.toBe('w1')
+  })
+
+  it('takes the fresh id back with an undo of the split', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: TWO })
+    editor.commands.setTextSelection(START)
+    editor.commands.keyboardShortcut('Enter')
+    editor.commands.undo()
+    expect(blocks()).toEqual([
+      { id: 'p0', text: 'intro' },
+      { id: 'p1', text: 'anchored' },
+    ])
+  })
+})
+
 describe('what it draws', () => {
   function WithAnEditor({ view }: { view: ((props: ReferenceViewProps) => React.ReactNode) | null }) {
     const e = useEditor({

package/src/BlockNodes.tsx

@@ -1,5 +1,8 @@
 import type { ComponentType } from 'react'
 import { Extension, Node } from '@tiptap/core'
+import type { Node as ProseMirrorNode, Slice } from '@tiptap/pm/model'
+import { Plugin, PluginKey, type Transaction } from '@tiptap/pm/state'
+import { Mapping } from '@tiptap/pm/transform'
 import { NodeViewWrapper, ReactNodeViewRenderer, type ReactNodeViewProps } from '@tiptap/react'
 
 /*
@@ -41,6 +44,115 @@ const BLOCK_TYPES = [
   // comment anchored to it stops resolving.
   'attachment',
 ]
+const BLOCK_TYPE_SET = new Set(BLOCK_TYPES)
+
+/** protocol's `newBlockId`: six random bytes as hex. */
+function newBlockId(): string {
+  return Array.from(crypto.getRandomValues(new Uint8Array(6)), (b) => b.toString(16).padStart(2, '0')).join('')
+}
+
+/** Whether anything typed or inserted is inside — protocol's `holdsText`. An empty paragraph is not; a lone line break is. */
+function holdsText(node: ProseMirrorNode): boolean {
+  let found = false
+  node.descendants((child) => {
+    if (found) return false
+    if ((child.isText && child.text !== '') || child.type.name === 'hardBreak' || child.type.name === 'reference') found = true
+    return !found
+  })
+  return found
+}
+
+interface Claim {
+  pos: number
+  node: ProseMirrorNode
+  /** An unknown block: the translation hands its source back untouched, so re-minting it here would be undone on save. */
+  fixed: boolean
+}
+
+/** 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) => {
+    const fixed = node.type.name === 'unknownBlock'
+    if (!fixed && !BLOCK_TYPE_SET.has(node.type.name)) return
+    const id = node.attrs.blockId
+    if (typeof id !== 'string' || id === '') return
+    const copies = claims.get(id)
+    if (copies) copies.push({ pos, node, fixed })
+    else claims.set(id, [{ pos, node, fixed }])
+  })
+  return claims
+}
+
+/**
+ * The copy the block that was there before carried on into: where the start
+ * of its content landed. Enter at the very start pushes that content into the
+ * lower half; a split anywhere else leaves it in the upper; a pasted copy,
+ * above or below, never moves it out of the original.
+ */
+function carriedOn(copies: Claim[], before: Claim, mapping: Mapping): Claim | undefined {
+  if (before.node.isLeaf) {
+    const at = mapping.map(before.pos, 1)
+    return copies.find((c) => c.pos === at)
+  }
+  // The start of its text, inside the paragraph a list item or quote wraps it in.
+  let start = before.pos + 1
+  if (!before.node.isTextblock) {
+    let found = false
+    before.node.descendants((node, pos) => {
+      if (found) return false
+      if (node.isTextblock) {
+        start = before.pos + 1 + pos + 1
+        found = true
+      }
+      return !found
+    })
+  }
+  const at = mapping.map(start, 1)
+  return copies.find((c) => c.pos < at && at < c.pos + c.node.nodeSize)
+}
+
+/**
+ * Where a block claims an id another block keeps — see {@link BlockId}. An
+ * unknown block always keeps its id; otherwise the copy the original carried
+ * on into, and failing that protocol's rule: the first that holds text, or
+ * the first.
+ */
+function repeatedBlockIds(doc: ProseMirrorNode, before: ProseMirrorNode, mapping: Mapping): number[] {
+  const claims = claimsIn(doc)
+  let previous: Map<string, Claim[]> | undefined
+  const losers: number[] = []
+  for (const [id, copies] of claims) {
+    if (copies.length < 2) continue
+    previous ??= claimsIn(before)
+    const original = previous.get(id)?.[0]
+    const owner =
+      copies.find((c) => c.fixed) ??
+      (original && carriedOn(copies, original, mapping)) ??
+      copies.find((c) => holdsText(c.node)) ??
+      copies[0]
+    for (const copy of copies) if (copy !== owner && !copy.fixed) losers.push(copy.pos)
+  }
+  return losers
+}
+
+/**
+ * Whether a change could have made a repeat: only a step that brings in
+ * blocks can. Typing, deleting and marks bring in none, so most keystrokes
+ * skip the walk.
+ */
+function bringsInBlocks(transactions: readonly Transaction[]): boolean {
+  return transactions.some((tr) =>
+    tr.steps.some((step) => {
+      const slice = (step as { slice?: Slice }).slice
+      let blocks = false
+      slice?.content.forEach((node) => {
+        if (node.isBlock) blocks = true
+      })
+      return blocks
+    }),
+  )
+}
 
 /**
  * `id` on every block, carried as the `blockId` attribute.
@@ -52,9 +164,39 @@ const BLOCK_TYPES = [
  *
  * Rendered as `data-block-id`, which is what `RichText` already emits, so the
  * reading and the editing surface address a block the same way.
+ *
+ * **A split gives the new half its own id, the moment it happens** (MAN-10).
+ * ProseMirror copies a split node's attrs to both halves, so Enter leaves two
+ * blocks claiming one id. Enter at the very start of a paragraph puts the
+ * copy *above* it — and once something is typed there, nothing at save time
+ * can tell which half was the original, so protocol's `fromEditorDocument`
+ * gave the id, and every comment anchored to it, to the new line. Settled
+ * here instead, in the same transaction, where the change itself says which
+ * copy the original carried on into — so a copy pasted above a block does
+ * not take its id either. The others get fresh ids. `fromEditorDocument`
+ * keeps its own rule (the copy that holds text) as the backstop for an
+ * editor without this extension; where the change says nothing, this falls
+ * back to that rule too.
  */
 export const BlockId = Extension.create({
   name: 'blockId',
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('blockIdSplit'),
+        appendTransaction: (transactions, old, state) => {
+          if (!bringsInBlocks(transactions)) return null
+          const mapping = new Mapping()
+          for (const tr of transactions) mapping.appendMapping(tr.mapping)
+          const repeats = repeatedBlockIds(state.doc, old.doc, mapping)
+          if (repeats.length === 0) return null
+          const tr = state.tr
+          for (const pos of repeats) tr.setNodeAttribute(pos, 'blockId', newBlockId())
+          return tr
+        },
+      }),
+    ]
+  },
   addGlobalAttributes() {
     return [
       {

package/src/Form.mdx

@@ -63,6 +63,11 @@ import { Button, Field, Form, TextInput } from '@estiva-app/ui'
   September), so every form reads the same. Pass no layout of your own: the
   gate lint refuses a gap, a direction or a grid on a `Form`. `className`
   still places the form itself: its space around, its size.
+- **Words before the fields go inside the form**, as one block (a title and
+  its sentence, 8px apart): the form then puts the same 24px between them
+  and the first field. A box of your own around the words and the form, with
+  its own gap, sets that space instead, and the gate lint refuses it
+  (Katerina, 1 October: Archive read 12px where Move read 24px).
 - **`layout="free"`** is for a form that is not a list of fields: a field and
   its button, a composer. It places nothing, and `className` lays it out.
 - The form draws no box, and neither does the `<fieldset>` inside it.
@@ -77,6 +82,7 @@ It does these by itself. Write none of them around it.
 | Leaves Enter alone where it means something else: a Textarea, a list, a people picker | exceptions of your own |  |
 | Does nothing while it is sending: no second send, and nothing inside takes focus | a busy flag on every control |  |
 | Stacks its fields in one column, 24px apart | a gap, a direction or a grid on the form | `no-restyled-part` |
+| Puts 24px between the words before the fields and the first one | a spaced box around the words and the form | `no-restyled-part` |
 
 ## Keys
 

package/src/eslint/no-restyled-part.test.ts

@@ -77,6 +77,10 @@ tester.run('no-restyled-part', noRestyledPart, {
     { name: 'Form placed, its fields its own', filename: app, code: ui('Form', '    <Form onSubmit={send} className="min-h-0 flex-1 px-5">x</Form>') },
     { name: 'a free Form lays itself out', filename: app, code: ui('Form', '    <Form onSubmit={send} layout="free" className="flex items-center gap-2">x</Form>') },
     { name: 'a Form whose layout the rule cannot read passes', filename: app, code: ui('Form', '    <Form onSubmit={send} layout={how} className="flex gap-2">x</Form>') },
+    { name: "Peek's MoveDialog: the sentences one block inside the Form", filename: app, code: ui('Form', '    <Form onSubmit={send}><div className="flex flex-col gap-2"><p>Notes</p><p>Everyone who can read it now still can.</p></div>x</Form>') },
+    { name: 'a spaced box with only the Form in it spaces nothing', filename: app, code: ui('Form', '    <div className="flex flex-col gap-3"><Form onSubmit={send}>x</Form></div>') },
+    { name: 'a box beside the Form with no spacing of its own', filename: app, code: ui('Form', '    <div className="flex flex-col"><p>Hides it.</p><Form onSubmit={send}>x</Form></div>') },
+    { name: 'a free Form in a spaced row is laid out by its row', filename: app, code: ui('Form', '    <div className="flex items-center gap-2"><p>Name</p><Form onSubmit={send} layout="free">x</Form></div>') },
     // escapes
     { name: 'escaped, with its reason', filename: app, code: ui('Link', '    // @estiva-escape(no-restyled-part): the whole row is the link, and no part does that yet\n    <Link href="/x" className="after:absolute after:inset-0">x</Link>') },
     // the package itself
@@ -189,6 +193,18 @@ tester.run('no-restyled-part', noRestyledPart, {
       code: "import { Link, type LinkProps } from '@estiva-app/ui'\nfunction RouterLink({ href, ...props }: LinkProps) {\n  return <Link href={href} {...props} />\n}\nexport function Probe() {\n  return <RouterLink href=\"/x\" className=\"text-h5\">x</RouterLink>\n}\n",
       errors: [{ message: restyled('`text-h5`', '`RouterLink` (it hands its props to `Link`)', ' Use its `variant`, `truncate` or `cover`.') }],
     },
+    {
+      name: "Peek's and Ship's ArchiveDialog at 0.49.0: sentences and the Form in a gap-3 box, 12px above the field",
+      filename: app,
+      code: ui('Form', '    <div className="flex flex-col gap-3 text-body-2 text-text-primary"><p>This hides the topic.</p><p>Nothing is deleted.</p><Form id="f" onSubmit={send}>x</Form></div>'),
+      errors: [{ message: '`gap-3` on the box around `Form` spaces the form from what is beside it, so the gap above its first field is not the form’s 24px. Put what is beside it inside the `Form`, as one block before the fields, and drop the box: the Form puts 24px between them (Katerina, 1 October; MoveDialog in Peek does this).' }],
+    },
+    {
+      name: "a DialogShell's body spaced around the Form and a sentence",
+      filename: app,
+      code: ui('DialogShell, Form', '    <DialogShell title="Note" onClose={send} bodyClassName="flex flex-col space-y-4"><p>Say why.</p><Form onSubmit={send}>x</Form></DialogShell>'),
+      errors: [{ message: '`space-y-4` on the box around `Form` spaces the form from what is beside it, so the gap above its first field is not the form’s 24px. Put what is beside it inside the `Form`, as one block before the fields, and drop the box: the Form puts 24px between them (Katerina, 1 October; MoveDialog in Peek does this).' }],
+    },
     {
       name: 'a Form laid out by hand',
       filename: app,

package/src/eslint/no-restyled-part.ts

@@ -105,6 +105,12 @@ const isFieldsLayout = (token: string) => {
   return !variants.some((variant) => REACHING_VARIANT.test(variant)) && FIELDS_LAYOUT.test(utility)
 }
 
+/** Room between a box's children, down the page or across it: what spaces a Form from its neighbours. */
+const isSpacing = (token: string) => {
+  const { variants, utility } = splitClass(token)
+  return !variants.some((variant) => REACHING_VARIANT.test(variant)) && /^(?:gap|gap-x|gap-y|space-x|space-y)-/.test(utility)
+}
+
 const isPadding = (token: string) => {
   const { variants, utility } = splitClass(token)
   return !variants.some((variant) => REACHING_VARIANT.test(variant)) && /^p[xytrblse]?-/.test(utility)
@@ -623,6 +629,8 @@ export const noRestyledPart: Rule.RuleModule = {
         '{{classes}} pads {{where}}. EmptyState takes no padding (Katerina, 14 September): its room comes from the box its rows live in, so put the padding on that box.',
       formLayout:
         '{{classes}} lays out the fields of {{where}}. A Form places its own fields, 24px apart (Katerina, 28 September), so every form reads the same: remove it. A form that is not a list of fields (a field and its button, a composer) says `layout="free"` and lays itself out.',
+      formSpacedFromOutside:
+        '{{classes}} on the box around `Form` spaces the form from what is beside it, so the gap above its first field is not the form’s 24px. Put what is beside it inside the `Form`, as one block before the fields, and drop the box: the Form puts 24px between them (Katerina, 1 October; MoveDialog in Peek does this).',
       ...ESCAPE_MESSAGES,
     },
   },
@@ -685,6 +693,34 @@ export const noRestyledPart: Rule.RuleModule = {
       context.report({ loc: at.loc as NonNullable<Rule.Node['loc']>, messageId: 'restyledStyle', data: { keys: code([...new Set(keys)]), where, use } })
     }
 
+    /**
+     * A Form with something beside it, in a box that spaces them: the gap
+     * above the first field is then the box's, not the Form's 24px (Peek's and
+     * Ship's ArchiveDialog, 1 October: 12px). Read on the box's own class
+     * props, `className` or a part's `bodyClassName`; a box with only the Form
+     * in it spaces nothing.
+     */
+    const checkSpacedFromOutside = (opening: Node) => {
+      const form = opening.parent as Node | undefined
+      const box = form?.parent as Node | undefined
+      if (form?.type !== 'JSXElement' || box?.type !== 'JSXElement') return
+      const beside = children(box, 'children').filter((node) => {
+        if (!node || node === form) return false
+        if (node.type === 'JSXText') return String(node.value).trim() !== ''
+        if (node.type === 'JSXExpressionContainer') return child(node, 'expression')?.type !== 'JSXEmptyExpression'
+        return true
+      })
+      if (!beside.length) return
+      const boxOpening = child(box, 'openingElement') as Node
+      const spacing = children(boxOpening, 'attributes').flatMap((attribute) => {
+        if (attribute?.type !== 'JSXAttribute') return []
+        const prop = nameOf(child(attribute, 'name'))
+        return prop === 'className' || prop === 'bodyClassName' ? classesOf(child(attribute, 'value'), scopeOf).filter(isSpacing) : []
+      })
+      if (!spacing.length || escaped(opening)) return
+      context.report({ loc: opening.loc as NonNullable<Rule.Node['loc']>, messageId: 'formSpacedFromOutside', data: { classes: code([...new Set(spacing)]) } })
+    }
+
     return {
       Program(program) {
         locals = moduleParts(file, program as unknown as Node, parser, new Set([file])).locals
@@ -693,6 +729,7 @@ export const noRestyledPart: Rule.RuleModule = {
         const element = ruleNode as unknown as Node
         const binding = locals && bindingOfTag(child(element, 'name'), locals)
         if (!binding) return
+        if (binding.part === 'Form' && binding.props === 'all' && placesItsFields(element)) checkSpacedFromOutside(element)
         for (const attribute of children(element, 'attributes')) {
           if (!attribute) continue
           if (attribute.type === 'JSXAttribute') {