Merge branch 'main' into code4math

.github/workflows/e2e.yaml

@@ -66,7 +66,7 @@ jobs:
           cp cypress/fixtures/main.min.json dist/refs/heads/main.json
 
       - name: Cypress run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           browser: chrome
           build: echo "Start runs build"

packages/core/src/Parser.ts

@@ -53,14 +53,14 @@ export function parser({
       .use(remarkRehype)
       // Convert math nodes to hast
       .use(rehypeKatex)
-      // Automatically remove outermost paragraph wrapper
-      .use(unnest)
       // Optionally trim mdast to a minimal preview
       .use(truncator, {
         maxChars: 100,
         disable: !truncate,
         ignoreTags: ['math', 'inline-math'],
       })
+      // Automatically remove outermost paragraph wrapper
+      .use(unnest)
       // Render hast to HTML string
       .use(rehypeStringify)
   )

packages/core/src/Parser/truncate.ts

@@ -28,12 +28,16 @@ export function truncate({
 
     if (node.type === 'text') {
       foundText += node.value.length
+
       if (foundText >= maxChars) {
         node.value = `${node.value.slice(
           0,
           node.value.length - (foundText - maxChars),
         )}${ellipses}`
         return maxChars
+      } else if (node.value === '\n') {
+        node.value = ''
+        return maxChars
       }
     }
 

packages/core/src/Parser/unnest.ts

@@ -8,7 +8,11 @@ import { Transformer } from 'unified'
  */
 export const unnest = () => {
   const transformer: Transformer<Root> = tree => {
-    if (tree && tree.children?.length === 1 && 'tagName' in tree.children[0]) {
+    if (tree.children) {
+      tree.children = tree.children.filter(n => n.type !== 'text' || n.value)
+    }
+
+    if (tree?.children.length === 1 && 'tagName' in tree.children[0]) {
       tree.children = tree.children[0].children
 
       if ('tagName' in tree.children[0] && tree.children[0].tagName === 'p') {

packages/core/test/Parser.test.ts

@@ -8,12 +8,13 @@ function link([kind, id]: [unknown, unknown]) {
   }
 }
 
-async function parse(input: string) {
+async function parse(input: string, { truncate = false } = {}) {
   const file = await parser({
     link: {
       internal: link,
       external: link,
     },
+    truncate,
   }).process(input)
   return String(file)
 }
@@ -90,6 +91,38 @@ it.todo('expands math in linked titles', async () => {
   )
 })
 
+describe('truncate', () => {
+  it('breaks on newlines', () => {
+    const input = `a first sentence.\n\nand some extra stuff`
+    expect(parse(input)).resolves.toEqual(
+      '<p>a first sentence.</p>\n<p>and some extra stuff</p>',
+    )
+    expect(parse(input, { truncate: true })).resolves.toEqual(
+      'a first sentence.',
+    )
+  })
+
+  it('adds ellipses', () => {
+    expect(
+      parse(
+        'this is a fairly long sentence and it needs to be summarized because it is too long because it just goes on and on and on',
+        { truncate: true },
+      ),
+    ).resolves.toEqual(
+      'this is a fairly long sentence and it needs to be summarized because it is too long because it just …',
+    )
+  })
+
+  it('preserves math', () => {
+    expect(
+      parse(
+        'this is a fairly long sentence and it needs to be summarized because it is too long because it $T_{3\\frac{1}{2}}$ just goes on and on and on',
+        { truncate: true },
+      ),
+    ).resolves.toMatchSnapshot()
+  })
+})
+
 describe('unwrapping', () => {
   it('unwraps math', () => {
     expect(parse('$\\sigma$')).resolves.toEqual(

packages/core/test/__snapshots__/Parser.test.ts.snap

@@ -14,3 +14,5 @@ exports[`parses a complex example 1`] = `
 <li><a href=\\"mo://123\\" title=\\"123\\" class=\\"external-link\\">123</a></li>
 </ul>"
 `;
+
+exports[`truncate > preserves math 1`] = `"this is a fairly long sentence and it needs to be summarized because it is too long because it <span class=\\"math math-inline\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math xmlns=\\"http://www.w3.org/1998/Math/MathML\\"><semantics><mrow><msub><mi>T</mi><mrow><mn>3</mn><mfrac><mn>1</mn><mn>2</mn></mfrac></mrow></msub></mrow><annotation encoding=\\"application/x-tex\\">T_{3\\\\frac{1}{2}}</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:1.1704em;vertical-align:-0.487em;\\"></span><span class=\\"mord\\"><span class=\\"mord mathnormal\\" style=\\"margin-right:0.13889em;\\">T</span><span class=\\"msupsub\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.3448em;\\"><span style=\\"top:-2.7538em;margin-left:-0.1389em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mtight\\"><span class=\\"mord mtight\\">3</span><span class=\\"mord mtight\\"><span class=\\"mopen nulldelimiter sizing reset-size3 size6\\"></span><span class=\\"mfrac\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.8443em;\\"><span style=\\"top:-2.656em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"sizing reset-size3 size1 mtight\\"><span class=\\"mord mtight\\"><span class=\\"mord mtight\\">2</span></span></span></span><span style=\\"top:-3.2255em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"frac-line mtight\\" style=\\"border-bottom-width:0.049em;\\"></span></span><span style=\\"top:-3.384em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"sizing reset-size3 size1 mtight\\"><span class=\\"mord mtight\\"><span class=\\"mord mtight\\">1</span></span></span></span></span><span class=\\"vlist-s\\">​…</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>"`;

packages/core/vite.config.ts

@@ -17,10 +17,10 @@ export default defineConfig({
   },
   test: {
     coverage: {
-      lines: 91.04,
-      branches: 93.68,
-      statements: 91.04,
-      functions: 83.55,
+      lines: 93.04,
+      branches: 94.35,
+      statements: 93.04,
+      functions: 84.21,
       skipFull: true,
       thresholdAutoUpdate: true,
       exclude: ['src/Formula/Grammar.ts', 'test'],

packages/viewer/cypress/e2e/typesetting.spec.ts

@@ -12,6 +12,8 @@ it('renders internal links', () => {
   )
 
   cy.get('[data-testid=output]').contains(
-    'Discrete topology on a two-point set is $T_0$ as noted in Discrete topology on a two-point set is $T_0$',
+    // The T0T_0T0 rendering here is the text representation of the inner html of katex rendered math.
+    // We're effectively asserting that it _isn't_ still rendered as $T_0$
+    'Discrete topology on a two-point set is T0T_0T0​ as noted in Discrete topology on a two-point set is T0T_0T0​',
   )
 })

packages/viewer/src/components/Properties/List.svelte

@@ -1,35 +1,24 @@
 <script lang="ts">
-  import { derived, type Readable } from 'svelte/store'
+  import { Filter, Link, Title, Typeset } from '@/components/Shared'
+  import type { Property } from '@/models'
+  import type { Store } from '@/stores/list'
 
-  import { list } from '@/stores'
-
-  import { Filter, Link, Title, Typeset } from '../Shared'
-  import type { Collection, Property } from 'src/models'
-
-  export let properties: Readable<Collection<Property>>
-
-  const index = list(
-    derived(properties, ps => ps.all),
-    {
-      weights: { name: 0.7, aliases: 0.7, description: 0.3 },
-      queryParam: 'filter',
-    },
-  )
+  export let properties: Store<Property>
 </script>
 
 <Title title="Properties" />
 
-<Filter filter={index.filter} />
+<Filter filter={properties.filter} />
 
 <table class="table">
   <thead>
     <tr>
-      <th on:click={index.sort('id')}>Id</th>
-      <th on:click={index.sort('name')}>Name</th>
+      <th on:click={properties.sort('id')}>Id</th>
+      <th on:click={properties.sort('name')}>Name</th>
       <th>Description</th>
     </tr>
   </thead>
-  {#each $index as property (property.id)}
+  {#each $properties as property (property.id)}
     <tr>
       <td>
         <Link.Property {property}>{property.id}</Link.Property>

packages/viewer/src/components/Search/Search.svelte

@@ -20,15 +20,15 @@
   //
   // It really feels like we don't have the right architecture for this formula
   // state.
-  const suggest = writable(true)
+  const suggest = writable(false)
   rawFormula.subscribe(_ => ($suggest = true))
   function selectExample(example: string) {
     $rawFormula = example
     $suggest = false
   }
 
   urlSearchParam('text', text)
-  urlSearchParam('q', rawFormula)
+  urlSearchParam('q', rawFormula, () => ($suggest = false))
 
   let title: string
   $: if ($rawFormula.length > 0) {

packages/viewer/src/components/Shared/Aliases.svelte

@@ -8,8 +8,10 @@
   <small>
     <span class="text-muted">or</span>
     {#each aliases as alias, i (i)}
-      <Typeset body={alias} />
-      {#if i !== aliases.length - 1}<span class="text-muted comma">,</span>{/if}
+      <Typeset body={alias} />{#if i !== aliases.length - 1}<span
+          class="text-muted comma"
+          >,
+        </span>{/if}
     {/each}
   </small>
 {/if}

packages/viewer/src/components/Shared/Filter.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
   import type { Writable } from 'svelte/store'
+  import urlSearchParam from '@/stores/urlSearchParam'
+
   import { Search } from './Icons'
 
   export let filter: Writable<string>
+
+  urlSearchParam('filter', filter)
 </script>
 
 <div class="input-group">

packages/viewer/src/components/Shared/Formula/Input/Formula.svelte

@@ -35,6 +35,7 @@
 
 <input
   class="form-control"
+  autocomplete="off"
   {name}
   {placeholder}
   bind:value={$raw}

packages/viewer/src/components/Shared/Icons/Check.svelte

@@ -1,13 +1,14 @@
 <svg
-  width="2em"
-  height="2em"
-  viewBox="0 0 16 16"
   class="bi bi-check"
+  stroke="currentColor"
   fill="currentColor"
+  stroke-width="0"
+  viewBox="0 0 512 512"
+  style="margin-right: 0.4em;"
+  height="1em"
+  width="1em"
   xmlns="http://www.w3.org/2000/svg"
+  ><path
+    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+  /></svg
 >
-  <path
-    fill-rule="evenodd"
-    d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"
-  />
-</svg>

packages/viewer/src/components/Shared/Icons/X.svelte

@@ -1,13 +1,14 @@
 <svg
-  width="2em"
-  height="2em"
-  viewBox="0 0 16 16"
   class="bi bi-x"
+  stroke="currentColor"
   fill="currentColor"
+  stroke-width="0"
+  viewBox="0 0 352 512"
+  style="margin-right: 0.4em;"
+  height="1em"
+  width="1em"
   xmlns="http://www.w3.org/2000/svg"
+  ><path
+    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+  /></svg
 >
-  <path
-    fill-rule="evenodd"
-    d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
-  />
-</svg>

packages/viewer/src/components/Shared/Typeset.svelte

@@ -43,6 +43,10 @@
         continue
       }
 
+      $typeset(link.innerHTML, false).then(value => {
+        link.innerHTML = value
+      })
+
       link.setAttribute('_wired', 'true')
       link.addEventListener('click', e => {
         e.preventDefault()

packages/viewer/src/components/Spaces/List.svelte

@@ -1,35 +1,24 @@
 <script lang="ts">
-  import { derived, type Readable } from 'svelte/store'
+  import { Filter, Link, Title, Typeset } from '@/components/Shared'
+  import type { Space } from '@/models'
+  import type { Store } from '@/stores/list'
 
-  import { list } from '@/stores'
-
-  import { Filter, Link, Title, Typeset } from '../Shared'
-  import type { Collection, Space } from 'src/models'
-
-  export let spaces: Readable<Collection<Space>>
-
-  const index = list(
-    derived(spaces, ss => ss.all),
-    {
-      weights: { name: 0.7, aliases: 0.7, description: 0.3 },
-      queryParam: 'filter',
-    },
-  )
+  export let spaces: Store<Space>
 </script>
 
 <Title title="Spaces" />
 
-<Filter filter={index.filter} />
+<Filter filter={spaces.filter} />
 
 <table class="table">
   <thead>
     <tr>
-      <th on:click={index.sort('id')}>Id</th>
-      <th on:click={index.sort('name')}>Name</th>
+      <th on:click={spaces.sort('id')}>Id</th>
+      <th on:click={spaces.sort('name')}>Name</th>
       <th>Description</th>
     </tr>
   </thead>
-  {#each $index as space (space.id)}
+  {#each $spaces as space (space.id)}
     <tr>
       <td>
         <Link.Space {space}>{space.id}</Link.Space>

packages/viewer/src/components/Theorems/List.svelte

@@ -1,35 +1,25 @@
 <script lang="ts">
-  import { derived, type Readable } from 'svelte/store'
-  import { list } from '@/stores'
-
   import { Filter, Formula, Link, Title, Typeset } from '../Shared'
-  import type { Theorems } from 'src/models'
-
-  export let theorems: Readable<Theorems>
+  import type { Theorem } from '@/models'
+  import type { Store } from '@/stores/list'
 
-  const index = list(
-    derived(theorems, ts => ts.all),
-    {
-      weights: { name: 0.7, description: 0.3 },
-      queryParam: 'filter',
-    },
-  )
+  export let theorems: Store<Theorem>
 </script>
 
 <Title title="Theorems" />
 
-<Filter filter={index.filter} />
+<Filter filter={theorems.filter} />
 
 <table class="table">
   <thead>
     <tr>
-      <th on:click={index.sort('id')}>Id</th>
+      <th on:click={theorems.sort('id')}>Id</th>
       <th>If</th>
       <th>Then</th>
       <th>Description</th>
     </tr>
   </thead>
-  {#each $index as theorem (theorem.id)}
+  {#each $theorems as theorem (theorem.id)}
     <tr>
       <td>
         <Link.Theorem {theorem} />