lask79 · lask79 · Feb 4, 2024 · Feb 4, 2024
diff --git a/README.adoc b/README.adoc
@@ -277,3 +277,31 @@ module.exports = require('asciidoctor-treeview')
 ----
 --------
 
+== HowTos
+
+I want to mark a line as folder even when it does not have children::
+Put a `/` at the end of the name.
+Then that line will be marked as a folder.
++
+[source,asciidoc]
+--------
+[treeview]
+----
+.
+# folder/
+# second-folder/
+----
+--------
+
+I want to add comments to a line::
+Put `//` at the end of the line.
+Then that line will be marked as a comment.
++
+[source,asciidoc]
+--------
+[treeview]
+----
+.
+# README.md // this is a comment
+----
+--------
diff --git a/lib/converter/treeline-to-html-converter.js b/lib/converter/treeline-to-html-converter.js
@@ -48,22 +48,29 @@ function createAsciiTreeLinePrefix (node, prefix, isLast) {
   return `<span class="tv-line-prefix">${linePrefix}</span>`
 }
 
+// TODO might need some refactoring to get the comments before this function during parsing
 function createNameWithIcon (node, theme) {
-  const icon = findIcon(node, theme)
+  const splitName = node.name.split(' ')
+  const name = splitName[0]
+  const reducedName = name.replace('/', '')
+  splitName[0] = reducedName
 
+  const icon = findIcon(node, name, theme)
   const url = `https://cdn.jsdelivr.net/npm/material-icon-theme@4.32.0/icons/${icon}`
 
-  return `<span class="tv-line-element"><img src="${url}" alt="${icon}"><span class="tv-item-name">${node.name}</span></span>`
+  return `<span class="tv-line-element"><img src="${url}" alt="${icon}"><span class="tv-item-name">${splitName.join(' ')}</span></span>`
 }
 
-function findIcon (node, theme) {
+function findIcon (node, name, theme) {
+  const reducedFolderName = name.replace('/', '')
+
   let foundIcon
   if (node.hasChildren()) {
-    foundIcon = getIconForOpenFolder(node.name.replace('/', ''), theme)
-  } else if (node.name.endsWith('/')) {
-    foundIcon = getIconForFolder(node.name.replace('/', ''), theme)
+    foundIcon = getIconForOpenFolder(reducedFolderName, theme)
+  } else if (name.endsWith('/')) {
+    foundIcon = getIconForFolder(reducedFolderName, theme)
   } else {
-    foundIcon = getIconForFile(node.name, theme)
+    foundIcon = getIconForFile(name, theme)
   }
 
   return foundIcon

diff --git a/lib/index.js b/lib/index.js
@@ -28,6 +28,7 @@ function registerBlockProcessor (context) {
 
     this.process((parent, reader, attrs) => {
       const block = this.createBlock(parent, 'listing', reader.getLines(), attrs)
+      // This is a temporary role for easier identification. Will be removed while rendering
       block.addRole('new-treeview')
       return block
     })
@@ -92,7 +93,7 @@ function processListing (processor, block, doc) {
 
   block.addRole('treeview')
   block.addRole(theme)
-  block.removeRole('new-treeview')
+  block.removeRole('new-treeview') // remove temporary role
 
   block.lines = renderedLines
 }

diff --git a/tests/extension.test.js b/tests/extension.test.js
@@ -153,7 +153,7 @@ README.adoc
       const html = asciidoctor.convert(source, { extension_registry: registry })
       // console.log(html)
 
-      expect(html).toInclude('<span class="tv-line-element"><img src="https://cdn.jsdelivr.net/npm/material-icon-theme@4.32.0/icons/folder-open.svg" alt="folder-open.svg"><span class="tv-item-name">converter/</span></span>')
+      expect(html).toInclude('<span class="tv-line-element"><img src="https://cdn.jsdelivr.net/npm/material-icon-theme@4.32.0/icons/folder-open.svg" alt="folder-open.svg"><span class="tv-item-name">converter</span></span>')
       expect(html).toInclude('<span class="tv-line-element"><img src="https://cdn.jsdelivr.net/npm/material-icon-theme@4.32.0/icons/file.svg" alt="file.svg"><span class="tv-item-name">converter</span></span>')
     // expect(html).to.contain('<span class="emoji"><img src="https://cdn.jsdelivr.net/npm/twemoji@latest/2/svg/1f604.svg" alt="smile" width="24px" height="24px"></span>')
     })
@@ -215,5 +215,19 @@ root1
       const html = asciidoctor.convert(source, { extension_registry: registry })
       expect(html).not.toInclude('<span class="tv-line-element"><img src="https://cdn.jsdelivr.net/npm/material-icon-theme@4.32.0/icons/file.svg" alt="file.svg"><span class="tv-item-name"></span></span>')
     })
+
+    it('should allow comments with //', async () => {
+      const source = `.Test
+[treeview]
+----
+README.adoc // Comment
+----`
+
+      const registry = asciidoctor.Extensions.create()
+      asciidoctorTreeView.register(registry)
+      const html = asciidoctor.convert(source, { extension_registry: registry })
+
+      expect(html).toInclude('<span class="tv-line-element"><img src="https://cdn.jsdelivr.net/npm/material-icon-theme@4.32.0/icons/asciidoc.svg" alt="asciidoc.svg"><span class="tv-item-name">README.adoc // Comment</span></span>')
+    })
   })
 })
diff --git a/tests/inputs/index.adoc b/tests/inputs/index.adoc
@@ -249,3 +249,17 @@ README.adoc
 # .vscode
 
 ----
+
+.Allow comments
+[treeview]
+----
+README.adoc // comment
+----
+
+.Don't show slash to mark folders
+[treeview]
+----
+gulp.d/
+----
+
+
diff --git a/tests/inputs/index.html b/tests/inputs/index.html
@@ -756,15 +756,28 @@ <h2 id="_test">Test</h2>
 <div class="title">Contains empty line</div>
 <div class="content">
 <pre><span class="tv-line"><span class="tv-line-prefix"></span><span class="tv-line-element"><img src="https://cdn.jsdelivr.net/npm/material-icon-theme@4.32.0/icons/folder-open.svg" alt="folder-open.svg"><span class="tv-item-name">.</span></span></span>
-<span class="tv-line"><span class="tv-line-prefix">└──&nbsp;</span><span class="tv-line-element"><img src="https://cdn.jsdelivr.net/npm/material-icon-theme@4.32.0/icons/file.svg" alt="file.svg"><span class="tv-item-name">.vscode</span></span></span></pre>
+<span class="tv-line"><span class="tv-line-prefix">└──&nbsp;</span><span class="tv-line-element"><img src="https://cdn.jsdelivr.net/npm/material-icon-theme@4.32.0/icons/file.svg" alt="file.svg"><span class="tv-item-name">.vscode</span></span></span>
+<span class="tv-line"></span></pre>
+</div>
+</div>
+<div class="listingblock treeview dark">
+<div class="title">Allow comments</div>
+<div class="content">
+<pre><span class="tv-line"><span class="tv-line-prefix"></span><span class="tv-line-element"><img src="https://cdn.jsdelivr.net/npm/material-icon-theme@4.32.0/icons/asciidoc.svg" alt="asciidoc.svg"><span class="tv-item-name">README.adoc // comment</span></span></span></pre>
+</div>
+</div>
+<div class="listingblock treeview dark">
+<div class="title">Don&#8217;t show slash to mark folders</div>
+<div class="content">
+<pre><span class="tv-line"><span class="tv-line-prefix"></span><span class="tv-line-element"><img src="https://cdn.jsdelivr.net/npm/material-icon-theme@4.32.0/icons/folder.svg" alt="folder.svg"><span class="tv-item-name">gulp.d</span></span></span></pre>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div id="footer">
 <div id="footer-text">
-Last updated 2024-02-04 13:50:48 +0100
+Last updated 2024-02-04 20:23:26 +0100
 </div>
 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/highlight.min.js"></script>