Fix non working xref in preview pane

preview-src/index.ts

@@ -82,7 +82,7 @@ const onUpdateView = (() => {
 const updateImageSizes = throttle(() => {
   const imageInfo: { id: string, height: number, width: number }[] = []
   const images = document.getElementsByTagName('img')
-  if (images) {
+  if (images && images.length > 0) {
     let i
     for (i = 0; i < images.length; i++) {
       const img = images[i]

src/asciidoctorWebViewConverter.ts

@@ -202,12 +202,56 @@ export class AsciidoctorWebViewConverter {
       </body>
       </html>`
     }
-    if (nodeName === 'inline_anchor' && node.type === 'link') {
-      const href = isSchemeBlacklisted(node.target) ? '#' : node.target
-      const id = node.hasAttribute('id') ? ` id="${node.id}"` : ''
-      const role = node.hasAttribute('role') ? ` class="${node.getRole()}"` : ''
-      const title = node.hasAttribute('title') ? ` title="${node.title}"` : ''
-      return `<a href="${href}"${id}${role}${title} data-href="${href}">${node.text}</a>`
+    if (nodeName === 'inline_anchor') {
+      if (node.type === 'link') {
+        const href = isSchemeBlacklisted(node.target) ? '#' : node.target
+        const id = node.hasAttribute('id') ? ` id="${node.id}"` : ''
+        const role = node.hasAttribute('role') ? ` class="${node.getRole()}"` : ''
+        const title = node.hasAttribute('title') ? ` title="${node.title}"` : ''
+        return `<a href="${href}"${id}${role}${title} data-href="${href}">${node.text}</a>`
+      }
+      if (node.type === 'xref') {
+        const attrs = []
+        attrs.push(` href="${node.target}"`)
+
+        if (node.hasAttribute('id')) { attrs.push(` id="${node.id}"`) }
+        if (node.hasAttribute('role')) { attrs.push(` class="${node.getRole()}"`) }
+        if (node.hasAttribute('title')) { attrs.push(` title="${node.title}"`) }
+
+        attrs.push(` data-href="${node.target}"`)
+
+        let text: string
+
+        // explicit text overrides all other options
+        if (typeof node.text === 'string') {
+          text = node.text
+        } else { // no explicit text
+          const path = node.getAttribute('path')
+          // cross reference points to a file, use the file name
+          if (typeof path === 'string') {
+            text = node.getAttribute('path')
+          } else { // cross reference is an internal reference
+            const refid = node.getAttribute('refid')
+            const refsCatalog = node.getDocument().getRefs()
+
+            // lookup reference by id
+            const refNode = refsCatalog[refid]
+
+            // no reference found for id
+            if (typeof refNode === 'undefined') {
+              text = refid
+            } else { // reference found
+              // maybe the refered node has a reftext which should be used
+              if (refNode.hasAttribute('reftext')) {
+                text = refNode.getReftext()
+              } else { // fall back to title
+                text = refNode.getTitle()
+              }
+            }
+          }
+        }
+        return `<a${attrs.join('')}>${text}</a>`
+      }
     }
     if (nodeName === 'image') {
       const nodeAttributes = node.getAttributes()

src/test/asciidoctorWebViewConverter.test.ts

@@ -54,7 +54,13 @@ async function testAsciidoctorWebViewConverter (
     antoraDocumentContext,
     undefined
   )
-  const html = processor.convert(input, { converter: asciidoctorWebViewConverter })
+
+  const html = processor.convert(input, {
+    converter: asciidoctorWebViewConverter,
+    // required for navigation between source files in preview
+    // see: https://docs.asciidoctor.org/asciidoc/latest/macros/inter-document-xref/#navigating-between-source-files
+    attributes: { relfilesuffix: '.adoc' },
+  })
   assert.strictEqual(html, expected)
 }
 
@@ -144,6 +150,97 @@ link:help.adoc[]
       antoraDocumentContext: undefined, // Antora not enabled
       expected: `<div class="paragraph">
 <p><a href="full.adoc" class="bare action button" data-href="full.adoc">full.adoc</a></p>
+</div>`,
+    },
+    // xref
+    {
+      title: 'Should resolve "xref:" macro to document',
+      filePath: ['asciidoctorWebViewConverterTest.adoc'],
+      input: 'xref:other.adoc[]',
+      antoraDocumentContext: undefined, // Antora not enabled
+      expected: `<div class="paragraph">
+<p><a href="other.adoc" data-href="other.adoc">other.adoc</a></p>
+</div>`,
+    },
+    {
+      title: 'Should resolve "xref:" macro to document - with explicit text',
+      filePath: ['asciidoctorWebViewConverterTest.adoc'],
+      input: 'xref:other.adoc[Other document]',
+      antoraDocumentContext: undefined, // Antora not enabled
+      expected: `<div class="paragraph">
+<p><a href="other.adoc" data-href="other.adoc">Other document</a></p>
+</div>`,
+    },
+    {
+      title: 'Should resolve "xref:" macro to document - with roles',
+      filePath: ['asciidoctorWebViewConverterTest.adoc'],
+      input: 'xref:other.adoc[role="foo"]',
+      antoraDocumentContext: undefined, // Antora not enabled
+      expected: `<div class="paragraph">
+<p><a href="other.adoc" class="foo" data-href="other.adoc">other.adoc</a></p>
+</div>`,
+    },
+    {
+      title: 'Should resolve "xref:" macro for internal cross reference',
+      filePath: ['asciidoctorWebViewConverterTest.adoc'],
+      input: `xref:_text_test[]
+
+= Text test`,
+      antoraDocumentContext: undefined, // Antora not enabled
+      expected: `<div class="paragraph">
+<p><a href="#_text_test" data-href="#_text_test">Text test</a></p>
+</div>
+<h1 id="_text_test" class="sect0">Text test</h1>
+`,
+    },
+    {
+      title: 'Should resolve "xref:" macro for internal cross reference - with explicit text',
+      filePath: ['asciidoctorWebViewConverterTest.adoc'],
+      input: `xref:_text_test[Explicit text]
+
+= Text test`,
+      antoraDocumentContext: undefined, // Antora not enabled
+      expected: `<div class="paragraph">
+<p><a href="#_text_test" data-href="#_text_test">Explicit text</a></p>
+</div>
+<h1 id="_text_test" class="sect0">Text test</h1>
+`,
+    },
+    {
+      title: 'Should resolve "xref:" macro for internal cross reference - with reftext',
+      filePath: ['asciidoctorWebViewConverterTest.adoc'],
+      input: `xref:_reftext_test[]
+
+[reftext="Test reftext"]
+= Reftext Test`,
+      antoraDocumentContext: undefined, // Antora not enabled
+      expected: `<div class="paragraph">
+<p><a href="#_reftext_test" data-href="#_reftext_test">Test reftext</a></p>
+</div>
+<h1 id="_reftext_test" class="sect0">Reftext Test</h1>
+`,
+    },
+    {
+      title: 'Should resolve "xref:" macro for internal cross reference - with reftext and explicit text',
+      filePath: ['asciidoctorWebViewConverterTest.adoc'],
+      input: `xref:_reftext_test[Explicit text]
+
+[reftext="Test reftext"]
+= Reftext Test`,
+      antoraDocumentContext: undefined, // Antora not enabled
+      expected: `<div class="paragraph">
+<p><a href="#_reftext_test" data-href="#_reftext_test">Explicit text</a></p>
+</div>
+<h1 id="_reftext_test" class="sect0">Reftext Test</h1>
+`,
+    },
+    {
+      title: 'Should resolve "xref:" macro for internal cross reference - without matching anchor',
+      filePath: ['asciidoctorWebViewConverterTest.adoc'],
+      input: 'xref:_non_existing_ref_test[]',
+      antoraDocumentContext: undefined, // Antora not enabled
+      expected: `<div class="paragraph">
+<p><a href="#_non_existing_ref_test" data-href="#_non_existing_ref_test">_non_existing_ref_test</a></p>
 </div>`,
     },
     {