fix: AST rendered wrapping node (#83)

Author: jamesdabbs

packages/core/src/Parser.ts

@@ -47,14 +47,14 @@ export function parser({
       // Convert {internal} and {{external}} mdast nodes to standard mdast link
       // nodes, using passed down linkers to generate href and title
       .use(references(link))
-      // Automatically remove outermost paragraph wrapper
-      .use(unnest)
       // Parse $ and $$ blocks in text as math
       .use(remarkMath)
       // Convert standard mdast nodes to hast
       .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,
@@ -70,7 +70,7 @@ export function parser({
  * Utility plugin. Use noOp(true) to log the current syntax tree at this point
  * in the chain.
  */
-function noOp(log = false) {
+function noOp({ log = false } = {}) {
   return (tree: Node) => {
     if (log) {
       console.log(tree)

packages/core/src/Parser/unnest.ts

@@ -1,37 +1,18 @@
-import { Node } from 'unist'
+import { Root } from 'hast'
 import { Transformer } from 'unified'
 
-type Tree = Node & { children?: Tree[] }
-
 /**
- * Many default parsers create an AST that looks like
- *
- *     root:
- *       children:
- *         - type: paragraph
- *           children:
- *             - type: singleton
- *
- * which renders as <p><singleton/></p>. This transformer removes the wrapping
- * <p/> node
- *
- *     root:
- *       children:
- *         - type: singleton
- *
- * to allow for inline-only <singleton/> elements.
+ * Simplifies outer wrapping nodes of ASTs, and
+ * ensures that they render an inline / non-block
+ * elvel elements.
  */
 export const unnest = () => {
-  const transformer: Transformer<Tree> = tree => {
-    if (
-      tree &&
-      tree.children?.length === 1 &&
-      tree.children[0].type === 'paragraph' &&
-      tree.children[0].children?.length === 1
-    ) {
-      return {
-        ...tree,
-        children: tree.children[0].children,
+  const transformer: Transformer<Root> = tree => {
+    if (tree && 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') {
+        tree.children[0].tagName = 'span'
       }
     }
 

packages/core/test/Parser.test.ts

@@ -1,4 +1,4 @@
-import { expect, it } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { parser } from '../src/Parser'
 
 function link([kind, id]: [unknown, unknown]) {
@@ -89,3 +89,17 @@ it.todo('expands math in linked titles', async () => {
     '<a href="" title="$S_0$" class="internal-link"><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>S</mi><mn>0</mn></msub></mrow><annotation encoding="application/x-tex">S_0</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8333em;vertical-align:-0.15em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.05764em;">S</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.3011em;"><span style="top:-2.55em;margin-left:-0.0576em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">0</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span></span></span></span></span></a>',
   )
 })
+
+describe('unwrapping', () => {
+  it('unwraps math', () => {
+    expect(parse('$\\sigma$')).resolves.toEqual(
+      '<span class="math math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>σ</mi></mrow><annotation encoding="application/x-tex">\\sigma</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.4306em;"></span><span class="mord mathnormal" style="margin-right:0.03588em;">σ</span></span></span></span></span>',
+    )
+  })
+
+  it('unwraps mixed math and text', () => {
+    expect(parse('$\\sigma$-locally finite')).resolves.toEqual(
+      '<span class="math math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>σ</mi></mrow><annotation encoding="application/x-tex">\\sigma</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.4306em;"></span><span class="mord mathnormal" style="margin-right:0.03588em;">σ</span></span></span></span></span>-locally finite',
+    )
+  })
+})

packages/core/vite.config.ts

@@ -17,9 +17,9 @@ export default defineConfig({
   },
   test: {
     coverage: {
-      lines: 91.27,
-      branches: 94.01,
-      statements: 91.27,
+      lines: 91.04,
+      branches: 93.68,
+      statements: 91.04,
       functions: 83.55,
       skipFull: true,
       thresholdAutoUpdate: true,

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

@@ -4,7 +4,7 @@
   import Atom from './Formula/Atom.svelte'
   import Compound from './Formula/Compound.svelte'
 
-  export let value: Formula<Property, null>
+  export let value: Formula<Property>
   export let link = true
 </script>
 

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

@@ -4,7 +4,7 @@
   import { Link, Typeset } from '@/components/Shared'
   import type { Property } from '@/models'
 
-  export let value: Atom<Property, null>
+  export let value: Atom<Property>
   export let link: boolean = true
 </script>
 

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

@@ -5,7 +5,7 @@
 
   import Formula from '../Formula.svelte'
 
-  export let value: And<Property, null> | Or<Property, null>
+  export let value: And<Property> | Or<Property>
   export let link = true
 
   $: connector = value.kind === 'and' ? '∧' : '∨'