@estiva-app/ui 0.74.0 → 0.74.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.74.0",
+  "version": "0.74.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.74.0",
+    "packageVersion": "0.74.1",
     "exports": 178,
     "typeExports": 164,
     "files": null

package/src/CommentHighlights.test.ts

@@ -7,7 +7,7 @@
 import { afterEach, describe, expect, it } from 'vitest'
 import { Editor } from '@tiptap/core'
 import StarterKit from '@tiptap/starter-kit'
-import { BlockId } from './BlockNodes'
+import { BlockId, ReferenceNode } from './BlockNodes'
 import { CommentHighlights, anchorOfSelection, commentPlace } from './CommentHighlights'
 
 let editor: Editor | undefined
@@ -62,7 +62,49 @@ describe('anchorOfSelection', () => {
     ])
     // The quote opens at 0, its first line's text at 2–10, the second's at 12–20.
     e.commands.setTextSelection({ from: 6, to: 15 })
-    expect(anchorOfSelection(e)).toEqual({ blocks: ['q1'], quote: { start: 'linetwo' } })
+    // The quote's lines are joined with '\n', as the protocol reads the quote's text.
+    expect(anchorOfSelection(e)).toEqual({ blocks: ['q1'], quote: { start: 'line\ntwo' } })
+  })
+
+  it('quotes a line break inside a paragraph as a new line', () => {
+    const e = open([{ type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: 'A line' }, { type: 'hardBreak' }, { type: 'text', text: 'broken here' }] }])
+    // "A line" at 1–7, the break at 7, "broken here" at 8–19.
+    e.commands.setTextSelection({ from: 3, to: 14 })
+    expect(anchorOfSelection(e)).toEqual({ blocks: ['p1'], quote: { start: 'line\nbroken' } })
+  })
+
+  it('anchors nothing when only the edge between two lines of a quote, or a line break, is selected', () => {
+    const e = open([
+      { type: 'blockquote', attrs: { blockId: 'q1' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'one line' }] }, { type: 'paragraph', content: [{ type: 'text', text: 'two line' }] }] },
+      { type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: 'A line' }, { type: 'hardBreak' }, { type: 'text', text: 'broken here' }] },
+    ])
+    // The quote's first line ends at 10, its second starts at 12; the paragraph opens at 22, its break at 29.
+    e.commands.setTextSelection({ from: 10, to: 12 })
+    expect(anchorOfSelection(e)).toBeNull()
+    e.commands.setTextSelection({ from: 29, to: 30 })
+    expect(anchorOfSelection(e)).toBeNull()
+  })
+
+  it('quotes a list item as its own words, its nested items as the items after it', () => {
+    const item = (blockId: string, text: string, nested?: object) => ({
+      type: 'listItem',
+      attrs: { blockId },
+      content: [{ type: 'paragraph', content: [{ type: 'text', text }] }, ...(nested ? [nested] : [])],
+    })
+    const e = open([{ type: 'bulletList', attrs: { blockId: 'l1' }, content: [item('a', 'alpha', { type: 'bulletList', content: [item('b', 'beta')] }), item('c', 'gamma')] }])
+    // "alpha" at 3–8; the nested list's item "beta" at 12–16.
+    e.commands.setTextSelection({ from: 3, to: 8 })
+    expect(anchorOfSelection(e)).toEqual({ blocks: ['a'] })
+    // The list's text on the wire is "alpha\nbeta\ngamma": the nested item sits between its parent and the next.
+    expect(commentPlace(e, { id: 'c', blocks: ['l1'], quote: { start: 'alpha\nbeta' } })).toEqual({ state: 'resolved', from: 3, to: 16, words: true })
+  })
+
+  it('quotes a URL chip as its URL, as on the wire', () => {
+    const content = [
+      { type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: 'see ' }, { type: 'reference', attrs: { uri: '', href: 'https://ship.estiva.app/x' } }, { type: 'text', text: ' ok' }] },
+    ]
+    const e = (editor = new Editor({ extensions: [StarterKit, BlockId, ReferenceNode, CommentHighlights], content: { type: 'doc', content } }))
+    expect(commentPlace(e, { id: 'c', blocks: ['p1'], quote: { start: 'see https://ship' } })).toMatchObject({ state: 'resolved', from: 1 })
   })
 
   it('keeps the words around a quote only when the quoted words repeat', () => {
@@ -88,6 +130,18 @@ describe('commentPlace', () => {
     expect(commentPlace(e, { id: 'c', blocks: ['p1'], quote: { start: 'omega' } })).toEqual({ state: 'reworded', from: 0, to: 18 })
   })
 
+  it('finds words across two lines of a quote, as the protocol writes them', () => {
+    const e = open([
+      { type: 'blockquote', attrs: { blockId: 'q1' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'one line' }] }, { type: 'paragraph', content: [{ type: 'text', text: 'two line' }] }] },
+    ])
+    expect(commentPlace(e, { id: 'c', blocks: ['q1'], quote: { start: 'line\ntwo' } })).toEqual({ state: 'resolved', from: 6, to: 15, words: true })
+  })
+
+  it('finds words across a line break, as the protocol writes them', () => {
+    const e = open([{ type: 'paragraph', attrs: { blockId: 'p1' }, content: [{ type: 'text', text: 'A line' }, { type: 'hardBreak' }, { type: 'text', text: 'broken here' }] }])
+    expect(commentPlace(e, { id: 'c', blocks: ['p1'], quote: { start: 'line\nbroken' } })).toEqual({ state: 'resolved', from: 3, to: 14, words: true })
+  })
+
   it('says detached when none of the blocks is left', () => {
     const e = open()
     expect(commentPlace(e, { id: 'c', blocks: ['gone'], quote: { start: 'alpha' } })).toEqual({ state: 'detached' })

package/src/CommentHighlights.ts

@@ -106,27 +106,64 @@ function placesIn(doc: ProseMirrorNode): Map<string, Place> {
 
 /**
  * A block's text, and the document position where each of its characters
- * starts and ends. A chip counts as its `nostr:` text, as on the wire.
+ * starts and ends. It is the text the protocol's `inlineTextOf` reads from the
+ * same block on the wire, or a quote written here would not be found there: a
+ * chip counts as the text it is on the wire (a URL chip its URL, any other its
+ * `nostr:` reference), a line break as `\n`, and the blocks inside a block (a
+ * quote's lines, a list's items, a table's cells) are joined with `\n`. A list
+ * item is its own text: the list inside it is flat on the wire, its items
+ * following it in the list.
  */
 function textOf(block: Place): { text: string; starts: number[]; ends: number[] } {
   let text = ''
   const starts: number[] = []
   const ends: number[] = []
-  block.node.descendants((node, offset) => {
-    const at = block.pos + 1 + offset
-    if (node.isText && node.text) {
-      for (let i = 0; i < node.text.length; i++) (starts.push(at + i), ends.push(at + i + 1))
-      text += node.text
-    } else if (node.isInline && node.isLeaf) {
-      const wire = typeof node.attrs.uri === 'string' ? node.attrs.uri : ''
-      for (let i = 0; i < wire.length; i++) (starts.push(at), ends.push(at + node.nodeSize))
-      text += wire
+  const add = (chars: string, start: number, end: number) => {
+    for (let i = 0; i < chars.length; i++) (starts.push(start), ends.push(end))
+    text += chars
+  }
+  const walk = (node: ProseMirrorNode, pos: number) => {
+    if (node.isTextblock) {
+      node.forEach((child, offset) => {
+        const at = pos + 1 + offset
+        if (child.isText && child.text) {
+          for (let i = 0; i < child.text.length; i++) (starts.push(at + i), ends.push(at + i + 1))
+          text += child.text
+        } else if (child.type.name === 'hardBreak') add('\n', at, at + child.nodeSize)
+        else if (child.isInline && child.isLeaf) add(String(child.attrs.href || child.attrs.uri || ''), at, at + child.nodeSize)
+      })
+      return
     }
-    return true
-  })
+    // A list item's paragraphs are one run on the wire, with nothing between them.
+    if (node.type.name === 'listItem') {
+      node.forEach((child, offset) => void (LISTS.has(child.type.name) || walk(child, pos + 1 + offset)))
+      return
+    }
+    const children = LISTS.has(node.type.name) ? itemsOf(node, pos) : childrenOf(node, pos)
+    children.forEach(({ node: child, pos: at }, index) => {
+      // Between two blocks: the boundary, where neither one's text is.
+      if (index > 0) add('\n', at, at)
+      walk(child, at)
+    })
+  }
+  walk(block.node, block.pos)
   return { text, starts, ends }
 }
 
+/** The lists whose nested items the wire holds flat, after the item they are in. */
+const LISTS = new Set(['bulletList', 'orderedList'])
+
+function childrenOf(node: ProseMirrorNode, pos: number): { node: ProseMirrorNode; pos: number }[] {
+  const out: { node: ProseMirrorNode; pos: number }[] = []
+  node.forEach((child, offset) => void out.push({ node: child, pos: pos + 1 + offset }))
+  return out
+}
+
+/** A list's items as the wire lists them: each one, then the items of a list inside it. */
+function itemsOf(list: ProseMirrorNode, pos: number): { node: ProseMirrorNode; pos: number }[] {
+  return childrenOf(list, pos).flatMap((item) => [item, ...childrenOf(item.node, item.pos).flatMap((c) => (LISTS.has(c.node.type.name) ? itemsOf(c.node, c.pos) : []))])
+}
+
 /** Where `words` sits in `text` at or after `from`: the occurrence whose context matches, else the first. */
 function find(text: string, words: string, from: number, context: (at: number) => boolean): number {
   let first = -1
@@ -391,6 +428,8 @@ export function anchorOfSelection(editor: Editor): SelectionAnchor | null {
   if (run.length === 1) lastText = firstText
   // Between two blocks, with no character selected: nothing to comment on.
   if (run.length === 1 && firstText.text && start >= end) return null
+  // Only a line break, or the edge between two lines of one block: no word to comment on either.
+  if (run.length === 1 && firstText.text && !firstText.text.slice(start, end).replace(/\n/g, '')) return null
   const blocks = run.map((p) => p.node.attrs.blockId as string)
   if (start === 0 && end >= lastText.text.length) return { blocks }