feat: support {S#|P#} syntax for linking to traits

fixes #66

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

@@ -0,0 +1,17 @@
+import { deduce, setup } from '../support'
+
+beforeEach(setup)
+
+it('renders internal links', () => {
+ cy.visit('dev/preview')
+ deduce()
+
+ cy.get('[data-testid=input]').type(
+ // {{} is Cypress escaping for {. See https://docs.cypress.io/api/commands/type#Arguments
+ `{{}S000001} is {{}P000001} as noted in {{}S000001|P000001}`,
+ )
+
+ 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 | $T_0$',
+ )
+})

packages/viewer/src/components/Dev/Preview.svelte

@@ -11,7 +11,12 @@
 <div class="row">
  <div class="col-sm">
  <div class="input-group">
- <textarea bind:value={body} class="form-control" {rows} />
+ <textarea
+ bind:value={body}
+ class="form-control"
+ data-testid="input"
+ {rows}
+ />
  </div>
  <div class="input-group">
  <div class="form-check">
@@ -31,7 +36,7 @@
  }}
  />
  </div>
- <div class="col-sm">
+ <div class="col-sm" data-testid="output">
  <Typeset {body} {truncated} />
  </div>
 </div>

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

@@ -15,7 +15,18 @@
  return
  }
 
- container.innerHTML = await $typeset(text, truncated_)
+ try {
+ container.innerHTML = await $typeset(text, truncated_)
+ } catch (e: any) {
+ // FIXME: this is a kludgey fix for the fact that the {id} parser throws
+ // assertion errors on incomplete / unbalanced sets of {}s. The better fix
+ // is to make it more robust.
+ if (e?.name === 'Assertion') {
+ console.warn(e)
+ } else {
+ throw e
+ }
+ }
 
  /**
  * We're adding "real" <a/> tags to the DOM, even for parsed internal

packages/viewer/src/parser/internalLinks.ts

@@ -9,6 +9,20 @@ export function internal(
  return function linker([kind, id]: ['S' | 'P' | 'T', string]) {
  switch (kind) {
  case 'S':
+ // Support e.g. {S001|P002} as a link to the trait
+ const match = /(?<sid>\d+)\|P(?<pid>\d+)/.exec(id)
+ if (match?.groups) {
+ const { sid, pid } = match.groups
+ const space = spaces.find(Number(sid))
+ const property = properties.find(Number(pid))
+ return {
+ href: `/spaces/S${sid}/properties/P${pid}`,
+ title: `${space ? space.name : 'S' + sid} | ${
+ property ? property.name : 'P' + pid
+ }`,
+ }
+ }
+
  const space = spaces.find(Number(id))
  return {
  href: `/spaces/S${id}`,