diff --git a/package-lock.json b/package-lock.json index b1ebb298..5d351fea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9451,12 +9451,32 @@ "yargs": "15.3.1" } }, + "@asciidoctor/core": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@asciidoctor/core/-/core-2.2.4.tgz", + "integrity": "sha512-rk7YSD6QAY6kInW5JVYi2ICjC3r90kXGlARwpfKQ99e/qy/2Vq31coL6nFFiWRuQxbh4EBqzUbC5uUUUjiu+Vw==", + "dev": true, + "requires": { + "asciidoctor-opal-runtime": "0.3.3", + "unxhr": "1.0.1" + } + }, "ansi-regex": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", "dev": true }, + "asciidoctor-opal-runtime": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/asciidoctor-opal-runtime/-/asciidoctor-opal-runtime-0.3.3.tgz", + "integrity": "sha512-/CEVNiOia8E5BMO9FLooo+Kv18K4+4JBFRJp8vUy/N5dMRAg+fRNV4HA+o6aoSC79jVU/aT5XvUpxSxSsTS8FQ==", + "dev": true, + "requires": { + "glob": "7.1.3", + "unxhr": "1.0.1" + } + }, "cliui": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", @@ -9484,6 +9504,20 @@ "path-exists": "^4.0.0" } }, + "glob": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz", + "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + }, "is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", @@ -11822,6 +11856,12 @@ "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.59.2.tgz", "integrity": "sha512-/D5PcsKyzthtSy2NNKCyJi3b+htRkoKv3idswR/tR6UAvMNKA7SrmyZy6fOONJxSRs1JlUWEDAbxqfdArbK8iA==" }, + "codemirror-asciidoc": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/codemirror-asciidoc/-/codemirror-asciidoc-1.0.4.tgz", + "integrity": "sha1-dDn8w48w8UCKsUTRVr85jtNbLMA=", + "dev": true + }, "collapse-white-space": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz", diff --git a/package.json b/package.json index 27e9f5b0..47e99d4a 100644 --- a/package.json +++ b/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 }, diff --git a/src/lib/text-format.js b/src/lib/text-format.js index e202aeaf..25afc5b0 100644 --- a/src/lib/text-format.js +++ b/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; + }); } diff --git a/src/molecules/gv-code.js b/src/molecules/gv-code.js index aec8615f..aaf2c529 100644 --- a/src/molecules/gv-code.js +++ b/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) {} diff --git a/src/organisms/gv-documentation.js b/src/organisms/gv-documentation.js index a8860f2d..f56b197e 100644 --- a/src/organisms/gv-documentation.js +++ b/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 {
See the documentation about plugins.
`; } - return html` -
-
-
${title}
-
- ${ - this.disabled - ? html`` - : html`` - } -
-
- ${this._renderIcon()} -
-
-
- ${content} -
-
- - `; + + return html` +
+ ${this.withoutHeader + ? html`` + : html`
+
+ ${this.disabled + ? html`` + : html``} +
+
${title}
+
${this._renderIcon()}
+
`} +
${content}
+
`; } } diff --git a/src/policy-studio/gv-policy-studio.js b/src/policy-studio/gv-policy-studio.js index 073959ea..3d0953cd 100644 --- a/src/policy-studio/gv-policy-studio.js +++ b/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) { diff --git a/stories/molecules/gv-code.stories.js b/stories/molecules/gv-code.stories.js index 793d9283..4fbec37f 100644 --- a/stories/molecules/gv-code.stories.js +++ b/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 }], +}); diff --git a/stories/organisms/gv-documentation.stories.js b/stories/organisms/gv-documentation.stories.js index d8176e94..87a620fd 100644 --- a/stories/organisms/gv-documentation.stories.js +++ b/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 }], +});