feat(gv-documentation): update to handle asciidoc outside policy studio

package.json

@@ -69,6 +69,7 @@
     "whatwg-fetch": "^3.4.1"
   },
   "devDependencies": {
+    "@asciidoctor/core": "2.2.4",
     "@babel/core": "7.14.6",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/preset-env": "7.14.5",
@@ -90,6 +91,7 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "bundle-phobia-cli": "0.14.13",
     "chromatic": "5.9.2",
+    "codemirror-asciidoc": "^1.0.4",
     "del": "6.0.0",
     "eslint": "7.29.0",
     "eslint-config-prettier": "8.3.0",
@@ -128,19 +130,27 @@
     "webpack-merge": "5.8.0"
   },
   "peerDependencies": {
-    "asciidoctor": "^2.0.0",
+    "@asciidoctor/core": "^2.2.4",
+    "asciidoctor": "^2.2.4",
     "asciidoctor-highlight.js": "^0.3.0",
+    "codemirror-asciidoc": "^1.0.4",
     "@highcharts/map-collection": "^1.0.0",
     "highcharts": "^8.0.0 || ^9.0.0",
     "highlight.js": "^10.7.0"
   },
   "peerDependenciesMeta": {
+    "@asciidoctor/core": {
+      "optional": true
+    },
     "asciidoctor": {
       "optional": true
     },
     "asciidoctor-highlight.js": {
       "optional": true
     },
+    "codemirror-asciidoc": {
+      "optional": true
+    },
     "@highcharts/map-collection": {
       "optional": true
     },

src/lib/text-format.js

@@ -34,11 +34,11 @@ export function setAsciiDoctorAsGlobal(asciidoctor, highlightJsExt) {
 }
 
 export function toDom(text, type = 'adoc', small = false) {
-  if (window._gvAsciidoctor) {
+  return loadAsciiDoctor().then((asciidoctor) => {
     if (text) {
       let innerHTML = '';
       if (type === 'adoc') {
-        innerHTML = window._gvAsciidoctor.convert(text, {
+        innerHTML = asciidoctor.convert(text, {
           attributes: {
             showtitle: true,
             'source-highlighter': 'highlightjs-ext',
@@ -57,13 +57,13 @@ export function toDom(text, type = 'adoc', small = false) {
       if (small) {
         element.classList.add('small');
       }
-      const title = element.querySelector('h1').textContent;
+      const titleElement = element.querySelector('h1');
+      let title = '';
+      if (titleElement) {
+        title = titleElement.textContent;
+      }
 
       return { title, element };
     }
-  } else {
-    console.error('Should loadAsciiDoctor before convert content');
-  }
-
-  return null;
+  });
 }

src/molecules/gv-code.js

@@ -109,7 +109,11 @@ export class GvCode extends InputElement(LitElement) {
 
       try {
         if (options.mode != null) {
-          await import(`codemirror/mode/${options.mode}/${options.mode}`);
+          if (options.mode === 'asciidoc') {
+            await import('codemirror-asciidoc/lib/asciidoc');
+          } else {
+            await import(`codemirror/mode/${options.mode}/${options.mode}`);
+          }
         }
       } catch (er) {}
 

src/organisms/gv-documentation.js

@@ -26,6 +26,7 @@ export class GvDocumentation extends LitElement {
       image: { type: String },
       _dom: { type: Object, attribute: false },
       disabled: { type: Boolean },
+      withoutHeader: { type: Boolean, attribute: 'without-header' },
     };
   }
 
@@ -137,8 +138,8 @@ export class GvDocumentation extends LitElement {
       this._dom = await toDom(this.text, this.type, true);
       if (this._dom) {
         const title = this._dom.element.querySelector('h1');
-        if (title) {
-          this._dom.element.querySelector('h1').remove();
+        if (title && !this.withoutHeader) {
+          title.remove();
         }
         this._dom.element.querySelectorAll('a').forEach((link) => (link.target = '_blank'));
       }
@@ -157,33 +158,28 @@ export class GvDocumentation extends LitElement {
         <div>See the documentation about plugins.</div>
       </div>`;
     }
-    return html`<link rel="stylesheet" href="css/documentation.css">
-                  <div class="container">  
-                    <div class="header">
-                      <div class="title">${title}</div>
-                        <div class="left">
-                          ${
-                            this.disabled
-                              ? html``
-                              : html`<gv-button
-                                  icon="general:close"
-                                  outlined
-                                  small
-                                  @gv-button:click="${this._onCloseDocumentation}"
-                                  title="Close"
-                                ></gv-button>`
-                          }
-                        </div>
-                        <div class="right">
-                          ${this._renderIcon()}
-                        </div>
-                      </div>
-                      <div class="content">
-                        ${content}
-                      </div>
-                    </div>
-                  </div>
-                  `;
+
+    return html`<link rel="stylesheet" href="css/documentation.css" />
+      <div class="container">
+        ${this.withoutHeader
+          ? html``
+          : html` <div class="header">
+              <div class="left">
+                ${this.disabled
+                  ? html``
+                  : html`<gv-button
+                      icon="general:close"
+                      outlined
+                      small
+                      @gv-button:click="${this._onCloseDocumentation}"
+                      title="Close"
+                    ></gv-button>`}
+              </div>
+              <div class="title">${title}</div>
+              <div class="right">${this._renderIcon()}</div>
+            </div>`}
+        <div class="content">${content}</div>
+      </div> `;
   }
 }
 

src/policy-studio/gv-policy-studio.js

@@ -28,7 +28,6 @@ import './gv-flow';
 import './gv-flow-step';
 import './gv-policy-studio-menu';
 import { empty } from '../styles/empty';
-import { loadAsciiDoctor } from '../lib/text-format';
 import { cache } from 'lit-html/directives/cache';
 import { deepClone, deepEqual, uuid } from '../lib/utils';
 import { KeyboardElement, KEYS } from '../mixins/keyboard-element';
@@ -333,7 +332,6 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
     this._tabs = [{ id: 'design', title: 'Design', icon: 'navigation:exchange' }];
     this._policyFilter = [];
     this._flowFilter = [];
-    loadAsciiDoctor();
   }
 
   set hasProperties(value) {

stories/molecules/gv-code.stories.js

@@ -35,10 +35,10 @@ const shellOptions = {
   mode: 'shell',
 };
 
-const shell = `curl -X POST "https://api-market-place.ai.ovh.net/sound-spleeter/process" 
-     -H "accept: application/zip" -H "X-OVH-Api-Key: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" 
-     -H "Content-Type: application/json" 
-     -d '{"url": "https://github.com/deezer/spleeter/raw/master/audio_example.mp3", "nb_stems": 5}' 
+const shell = `curl -X POST "https://api-market-place.ai.ovh.net/sound-spleeter/process"
+     -H "accept: application/zip" -H "X-OVH-Api-Key: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+     -H "Content-Type: application/json"
+     -d '{"url": "https://github.com/deezer/spleeter/raw/master/audio_example.mp3", "nb_stems": 5}'
      -o splitted_output.zip`;
 
 export const ReadonlyShell = makeStory(conf, {
@@ -155,11 +155,11 @@ export const Json = makeStory(conf, {
   items: [{ value: jsonSrc, options: jsonOptions }],
 });
 
-const groovySrc = `println 'Hello'                                 
+const groovySrc = `println 'Hello'
 
-int power(int n) { 2**n }                       
+int power(int n) { 2**n }
 
-println "2^6==\${power(6)}"    
+println "2^6==\${power(6)}"
 `;
 
 const groovyOptions = {
@@ -260,3 +260,103 @@ const inputSrc =
 export const Input = makeStory(conf, {
   items: [{ value: inputSrc, options: inputOptions, rows: 1 }],
 });
+
+const asciiDocOptions = {
+  placeholder: 'Put the body content here',
+  mode: 'asciidoc',
+};
+
+const asciiDocSrc = `= AsciiDoc Article Title
+3.0, July 29, 2022: AsciiDoc article template
+:toc:
+:icons: font
+:url-quickref: https://docs.asciidoctor.org/asciidoc/latest/syntax-quick-reference/
+
+Content entered directly below the header but before the first section heading is called the preamble.
+
+== First level heading
+
+This is a paragraph with a *bold* word and an _italicized_ word.
+
+.Image caption
+image::image-file-name.png[I am the image alt text.]
+
+This is another paragraph.footnote:[I am footnote text and will be displayed at the bottom of the article.]
+
+=== Second level heading
+
+.Unordered list title
+* list item 1
+** nested list item
+*** nested nested list item 1
+*** nested nested list item 2
+* list item 2
+
+This is a paragraph.
+
+.Example block title
+====
+Content in an example block is subject to normal substitutions.
+====
+
+.Sidebar title
+****
+Sidebars contain aside text and are subject to normal substitutions.
+****
+
+==== Third level heading
+
+[#id-for-listing-block]
+.Listing block title
+----
+Content in a listing block is subject to verbatim substitutions.
+Listing block content is commonly used to preserve code input.
+----
+
+===== Fourth level heading
+
+.Table title
+|===
+|Column heading 1 |Column heading 2
+
+|Column 1, row 1
+|Column 2, row 1
+
+|Column 1, row 2
+|Column 2, row 2
+|===
+
+====== Fifth level heading
+
+[quote, firstname lastname, movie title]
+____
+I am a block quote or a prose excerpt.
+I am subject to normal substitutions.
+____
+
+[verse, firstname lastname, poem title and more]
+____
+I am a verse block.
+  Indents and endlines are preserved in verse blocks.
+____
+
+== First level heading
+
+TIP: There are five admonition labels: Tip, Note, Important, Caution and Warning.
+
+// I am a comment and won't be rendered.
+
+. ordered list item
+.. nested ordered list item
+. ordered list item
+
+The text at the end of this sentence is cross referenced to <<_third_level_heading,the third level heading>>
+
+== First level heading
+
+This is a link to the https://docs.asciidoctor.org/home/[Asciidoctor documentation].
+This is an attribute reference {url-quickref}[that links this text to the AsciiDoc Syntax Quick Reference].`;
+
+export const AsciiDoc = makeStory(conf, {
+  items: [{ value: asciiDocSrc, options: asciiDocOptions }],
+});

stories/organisms/gv-documentation.stories.js

@@ -40,3 +40,7 @@ export const Empty = makeStory(conf, {
 export const PolicyReadme = makeStory(conf, {
   items: [{ text: content }],
 });
+
+export const WithoutHeader = makeStory(conf, {
+  items: [{ text: content, 'without-header': true }],
+});