Merge pull request #95 from Mogztter/issue-93-block-attrs

dist/browser/asciidoctor-kroki.js

@@ -18064,8 +18064,9 @@ const processKroki = (processor, parent, attrs, diagramType, diagramText, contex
     diagramText = require('./preprocess.js').preprocessPlantUML(diagramText, context, doc.getBaseDir())
   }
   const blockId = attrs.id
-  const title = attrs.title
   const format = attrs.format || 'svg'
+  const caption = attrs.caption
+  const title = attrs.title
   let role = attrs.role
   if (role) {
     if (format) {
@@ -18076,11 +18077,12 @@ const processKroki = (processor, parent, attrs, diagramType, diagramText, contex
   } else {
     role = 'kroki'
   }
-  const blockAttrs = {
-    role,
-    title,
-    format
-  }
+  const blockAttrs = Object.assign({}, attrs)
+  blockAttrs.role = role
+  blockAttrs.format = format
+  delete blockAttrs.title
+  delete blockAttrs.caption
+  delete blockAttrs.opts
   const inline = attrs['inline-option'] === ''
   if (inline) {
     blockAttrs['inline-option'] = ''
@@ -18095,18 +18097,28 @@ const processKroki = (processor, parent, attrs, diagramType, diagramText, contex
   const krokiDiagram = new KrokiDiagram(diagramType, format, diagramText)
   const httpClient = isBrowser() ? require('./http/browser-http.js') : require('./http/node-http.js')
   const krokiClient = new KrokiClient(doc, httpClient)
+  let block
   if (format === 'txt' || format === 'atxt' || format === 'utxt') {
     const textContent = krokiClient.getTextContent(krokiDiagram)
-    return processor.createBlock(parent, 'literal', textContent, blockAttrs, {})
+    block = processor.createBlock(parent, 'literal', textContent, blockAttrs)
   } else {
-    const target = attrs.target
-    const imageUrl = createImageSrc(doc, krokiDiagram, target, context.vfs, krokiClient)
-    const imageBlockAttrs = Object.assign({}, blockAttrs, {
-      target: imageUrl,
-      alt: target || 'diagram'
-    })
-    return processor.createImageBlock(parent, imageBlockAttrs)
+    let alt
+    if (attrs.title) {
+      alt = attrs.title
+    } else if (attrs.target) {
+      alt = attrs.target
+    } else {
+      alt = 'Diagram'
+    }
+    blockAttrs.target = createImageSrc(doc, krokiDiagram, attrs.target, context.vfs, krokiClient)
+    blockAttrs.alt = alt
+    block = processor.createImageBlock(parent, blockAttrs)
+  }
+  if (title) {
+    block.setTitle(title)
   }
+  block.$assign_caption(caption, 'figure')
+  return block
 }
 
 function diagramBlock (context) {

src/asciidoctor-kroki.js

@@ -48,8 +48,9 @@ const processKroki = (processor, parent, attrs, diagramType, diagramText, contex
     diagramText = require('./preprocess.js').preprocessPlantUML(diagramText, context, doc.getBaseDir())
   }
   const blockId = attrs.id
-  const title = attrs.title
   const format = attrs.format || 'svg'
+  const caption = attrs.caption
+  const title = attrs.title
   let role = attrs.role
   if (role) {
     if (format) {
@@ -60,11 +61,12 @@ const processKroki = (processor, parent, attrs, diagramType, diagramText, contex
   } else {
     role = 'kroki'
   }
-  const blockAttrs = {
-    role,
-    title,
-    format
-  }
+  const blockAttrs = Object.assign({}, attrs)
+  blockAttrs.role = role
+  blockAttrs.format = format
+  delete blockAttrs.title
+  delete blockAttrs.caption
+  delete blockAttrs.opts
   const inline = attrs['inline-option'] === ''
   if (inline) {
     blockAttrs['inline-option'] = ''
@@ -79,18 +81,28 @@ const processKroki = (processor, parent, attrs, diagramType, diagramText, contex
   const krokiDiagram = new KrokiDiagram(diagramType, format, diagramText)
   const httpClient = isBrowser() ? require('./http/browser-http.js') : require('./http/node-http.js')
   const krokiClient = new KrokiClient(doc, httpClient)
+  let block
   if (format === 'txt' || format === 'atxt' || format === 'utxt') {
     const textContent = krokiClient.getTextContent(krokiDiagram)
-    return processor.createBlock(parent, 'literal', textContent, blockAttrs, {})
+    block = processor.createBlock(parent, 'literal', textContent, blockAttrs)
   } else {
-    const target = attrs.target
-    const imageUrl = createImageSrc(doc, krokiDiagram, target, context.vfs, krokiClient)
-    const imageBlockAttrs = Object.assign({}, blockAttrs, {
-      target: imageUrl,
-      alt: target || 'diagram'
-    })
-    return processor.createImageBlock(parent, imageBlockAttrs)
+    let alt
+    if (attrs.title) {
+      alt = attrs.title
+    } else if (attrs.target) {
+      alt = attrs.target
+    } else {
+      alt = 'Diagram'
+    }
+    blockAttrs.target = createImageSrc(doc, krokiDiagram, attrs.target, context.vfs, krokiClient)
+    blockAttrs.alt = alt
+    block = processor.createImageBlock(parent, blockAttrs)
+  }
+  if (title) {
+    block.setTitle(title)
   }
+  block.$assign_caption(caption, 'figure')
+  return block
 }
 
 function diagramBlock (context) {

test/block-attributes.spec.js

@@ -0,0 +1,112 @@
+/* global describe it */
+const chai = require('chai')
+const expect = chai.expect
+const dirtyChai = require('dirty-chai')
+
+chai.use(dirtyChai)
+
+const asciidoctorKroki = require('../src/asciidoctor-kroki.js')
+const asciidoctor = require('@asciidoctor/core')()
+
+describe('Block attributes', () => {
+  describe('When extension is registered', () => {
+    it('should convert a diagram with an explicit width and height', () => {
+      const input = `
+[plantuml,alice-bob,svg,width=100%,height=100%]
+....
+alice -> bob
+....
+`
+      const registry = asciidoctor.Extensions.create()
+      asciidoctorKroki.register(registry)
+      const html = asciidoctor.convert(input, { extension_registry: registry })
+      expect(html).to.equal(`<div class="imageblock kroki">
+<div class="content">
+<img src="https://kroki.io/plantuml/svg/eNpLzMlMTlXQtVNIyk8CABoDA90=" alt="alice-bob" width="100%" height="100%">
+</div>
+</div>`)
+    })
+    it('should convert a diagram with a title', () => {
+      const input = `
+.alice and bob
+[plantuml,alice-bob,svg]
+....
+alice -> bob
+....
+`
+      const registry = asciidoctor.Extensions.create()
+      asciidoctorKroki.register(registry)
+      const html = asciidoctor.convert(input, { extension_registry: registry })
+      expect(html).to.equal(`<div class="imageblock kroki">
+<div class="content">
+<img src="https://kroki.io/plantuml/svg/eNpLzMlMTlXQtVNIyk8CABoDA90=" alt="alice and bob">
+</div>
+<div class="title">Figure 1. alice and bob</div>
+</div>`)
+    })
+    it('should convert a diagram with a caption', () => {
+      const input = `
+.alice and bob
+[plantuml,alice-bob,svg,caption="Figure A. "]
+....
+alice -> bob
+....
+`
+      const registry = asciidoctor.Extensions.create()
+      asciidoctorKroki.register(registry)
+      const html = asciidoctor.convert(input, { extension_registry: registry })
+      expect(html).to.equal(`<div class="imageblock kroki">
+<div class="content">
+<img src="https://kroki.io/plantuml/svg/eNpLzMlMTlXQtVNIyk8CABoDA90=" alt="alice and bob">
+</div>
+<div class="title">Figure A. alice and bob</div>
+</div>`)
+    })
+    it('should convert a diagram with the float attribute', () => {
+      const input = `
+[plantuml,alice-bob,svg,float=left]
+....
+alice -> bob
+....
+`
+      const registry = asciidoctor.Extensions.create()
+      asciidoctorKroki.register(registry)
+      const html = asciidoctor.convert(input, { extension_registry: registry })
+      expect(html).to.equal(`<div class="imageblock left kroki">
+<div class="content">
+<img src="https://kroki.io/plantuml/svg/eNpLzMlMTlXQtVNIyk8CABoDA90=" alt="alice-bob">
+</div>
+</div>`)
+    })
+    it('should automatically increment caption if diagrams has title and caption is enabled', () => {
+      const input = `
+.alice and bob
+[plantuml,alice-bob,svg]
+....
+alice -> bob
+....
+
+.dan and andre
+[plantuml,dan-andre,svg]
+....
+dan -> andre
+....
+`
+      const registry = asciidoctor.Extensions.create()
+      asciidoctorKroki.register(registry)
+      const html = asciidoctor.convert(input, { extension_registry: registry })
+      expect(html).to.equal(`<div class="imageblock kroki">
+<div class="content">
+<img src="https://kroki.io/plantuml/svg/eNpLzMlMTlXQtVNIyk8CABoDA90=" alt="alice and bob">
+</div>
+<div class="title">Figure 1. alice and bob</div>
+</div>
+<div class="imageblock kroki">
+<div class="content">
+<img src="https://kroki.io/plantuml/svg/eNpLScxT0LVTSMxLKUoFABg_A-k=" alt="dan and andre">
+</div>
+<div class="title">Figure 2. dan and andre</div>
+</div>`)
+    })
+  })
+})

test/browser/test.js

@@ -93,7 +93,7 @@ alice -> bob
         })
         const text = httpGet(`${baseDir}/test/fixtures/alice.puml`, 'utf8')
         const html = asciidoctor.convert(input, { extension_registry: registry })
-        expect(html).to.contain(`<img src="https://kroki.io/plantuml/svg/${encodeText(text)}" alt="diagram">`)
+        expect(html).to.contain(`<img src="https://kroki.io/plantuml/svg/${encodeText(text)}" alt="Diagram">`)
       }).timeout(5000)
       it('should convert a diagram with a relative path to an image', () => {
         const input = `plantuml::../fixtures/alice.puml[svg,role=sequence]`
@@ -113,7 +113,7 @@ alice -> bob
         })
         const text = httpGet(`${baseDir}/test/fixtures/alice.puml`, 'utf8')
         const html = asciidoctor.convert(input, { extension_registry: registry })
-        expect(html).to.contain(`<img src="https://kroki.io/plantuml/svg/${encodeText(text)}" alt="diagram">`)
+        expect(html).to.contain(`<img src="https://kroki.io/plantuml/svg/${encodeText(text)}" alt="Diagram">`)
       }).timeout(5000)
     })
   })