@gravitee/ui-components 3.24.3-migrate-codemirror-bed237b → 3.24.4-migrate-codemirror-6bf640d

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.24.4](https://github.com/gravitee-io/gravitee-ui-components/compare/v3.24.3...v3.24.4) (2021-12-16)
+
+
+### Bug Fixes
+
+* remove unnecessary perform update ([1b8fee6](https://github.com/gravitee-io/gravitee-ui-components/commit/1b8fee6711bf1af63bf40ca9aca2fac570590076))
+
 ## [3.24.3](https://github.com/gravitee-io/gravitee-ui-components/compare/v3.24.2...v3.24.3) (2021-12-15)
 
 

package/assets/i18n/en.json

@@ -18,9 +18,6 @@
     "empty": "No data to display",
     "error": "An error has occurred"
   },
-  "gv-code": {
-    "copy": "Copy to clipboard"
-  },
   "gv-confirm": {
     "cancel": "No",
     "ok": "Yes"

package/assets/i18n/fr.json

@@ -18,9 +18,6 @@
     "empty": "Aucune donnée à afficher ici",
     "error": "Une erreur est survenue pendant le chargement"
   },
-  "gv-code": {
-    "copy": "Copier dans le presse papier"
-  },
   "gv-confirm": {
     "cancel": "Non",
     "ok": "Oui"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-components",
-  "version": "3.24.3-migrate-codemirror-bed237b",
+  "version": "3.24.4-migrate-codemirror-6bf640d",
   "description": "Gravitee.io UI Components library, based on Web Components",
   "repository": {
     "type": "git",
@@ -64,6 +64,7 @@
     "@codemirror/language-data": "^0.19.1",
     "@codemirror/matchbrackets": "^0.19.3",
     "@codemirror/state": "^0.19.6",
+    "@codemirror/stream-parser": "^0.19.3",
     "@codemirror/view": "^0.19.32",
     "@formatjs/intl-locale": "^2.4.40",
     "@formatjs/intl-relativetimeformat": "^9.3.2",
@@ -99,7 +100,6 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "bundle-phobia-cli": "0.14.13",
     "chromatic": "6.1.0",
-    "codemirror-asciidoc": "1.0.4",
     "danger": "10.7.1",
     "del": "6.0.0",
     "eslint": "8.4.0",
@@ -146,7 +146,6 @@
     "@highcharts/map-collection": "^1.0.0",
     "asciidoctor": "^2.2.4",
     "asciidoctor-highlight.js": "^0.3.0 || ^0.4.0",
-    "codemirror-asciidoc": "^1.0.4",
     "highcharts": "^8.0.0 || ^9.0.0",
     "highlight.js": "^10.7.0 || ^11.1.0"
   },
@@ -163,9 +162,6 @@
     "asciidoctor-highlight.js": {
       "optional": true
     },
-    "codemirror-asciidoc": {
-      "optional": true
-    },
     "highcharts": {
       "optional": true
     },

package/src/atoms/gv-button.js

@@ -322,14 +322,6 @@ export class GvButton extends LitElement {
     }
   }
 
-  async performUpdate() {
-    super.performUpdate();
-    const icon = this.shadowRoot.querySelector('gv-icon');
-    if (icon) {
-      icon.performUpdate();
-    }
-  }
-
   render() {
     const classes = {
       button: true,

package/src/atoms/gv-input.js

@@ -111,8 +111,12 @@ export class GvInput extends InputElement(LitElement) {
           --gv-icon--s: 22px;
         }
 
-        .box-icon.copied gv-icon {
-          --gv-icon--c: #339900;
+        .copied {
+          --gv-input--bdc: var(--gv-theme-color-success-light, #81c784);
+        }
+
+        .copied .box-icon gv-icon {
+          --gv-icon--c: var(--gv-theme-color-success-dark, #388e3c);
         }
 
         div.box-icon gv-icon.loading,
@@ -272,19 +276,7 @@ export class GvInput extends InputElement(LitElement) {
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
 
-    const defaultInputElement = this.getInputElement();
-    for (const node of this.childNodes) {
-      if (node.nodeType === 1) {
-        const child = node.nodeName.toLowerCase() === 'input' ? node : node.querySelector('input');
-        if (child) {
-          this._input = child;
-          break;
-        }
-      }
-    }
-    if (this._input) {
-      defaultInputElement.remove();
-    }
+    this.catchSlot();
 
     if (this.clipboard) {
       import('clipboard-copy').then(
@@ -304,13 +296,6 @@ export class GvInput extends InputElement(LitElement) {
 
       setTimeout(() => {
         const clipboardPopover = this.shadowRoot.querySelector('.clipboard__popover');
-        if (this.readonly) {
-          this.getInputElement().addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            clipboardPopover.click();
-          });
-        }
         clipboardPopover.addEventListener('click', (e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -325,11 +310,32 @@ export class GvInput extends InputElement(LitElement) {
     }
 
     this.getInputElement().id = this._id;
+
+    this.bindInputEvents();
+  }
+
+  bindInputEvents() {
     this.getInputElement().addEventListener('input', this._onInput.bind(this));
     this.getInputElement().addEventListener('keyup', this._onKeyUp.bind(this));
     this.getInputElement().addEventListener('keypress', this._onKeyPress.bind(this));
   }
 
+  catchSlot() {
+    const defaultInputElement = this.getInputElement();
+    for (const node of this.childNodes) {
+      if (node.nodeType === 1) {
+        const child = node.nodeName.toLowerCase() === 'input' ? node : node.querySelector('input');
+        if (child) {
+          this._input = child;
+          break;
+        }
+      }
+    }
+    if (this._input) {
+      defaultInputElement.remove();
+    }
+  }
+
   updateState(value) {
     super.updateState(value);
     if (this.valid === true && !this.readonly) {
@@ -481,7 +487,7 @@ export class GvInput extends InputElement(LitElement) {
     return !this.loading;
   }
 
-  _renderIcon() {
+  renderIcon() {
     let shape = null;
     if ((!this.isPassword && this.icon) || this.iconLeft) {
       shape = (!this.isPassword && this.icon) || this.iconLeft;
@@ -495,7 +501,6 @@ export class GvInput extends InputElement(LitElement) {
         'box-icon': true,
         'box-icon-left': this.iconLeft != null || this.clearable,
         'box-icon-bgc': this.hasBackground,
-        copied: this.hasClipboard && this._copied,
       };
 
       const iconClasses = {
@@ -538,6 +543,7 @@ export class GvInput extends InputElement(LitElement) {
       'icon-left': !!this.iconLeft || (!!this.icon && this.clearable),
       clipboard: this.hasClipboard,
       required: this.required,
+      copied: this.hasClipboard && this._copied,
     };
 
     return html`
@@ -545,7 +551,7 @@ export class GvInput extends InputElement(LitElement) {
         ${this.renderLabel()}
         <input />
         <slot></slot>
-        ${this._renderClearIcon()} ${this._renderIcon()} ${this._renderPasswordIcon()}
+        ${this._renderClearIcon()} ${this.renderIcon()} ${this._renderPasswordIcon()}
       </div>
       ${this.description != null ? html`<div class="description" .innerHTML="${this.description}"></div>` : ''}
     `;

package/src/lib/asciidoc-lang.js

@@ -0,0 +1,642 @@
+/*
+ * Copyright (C) 2021 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// Ace highlight rules function imported below.
+const HighlightRules = function () {
+  const identifierRe = '[a-zA-Z\u00a1-\uffff]+\\b';
+  /* eslint no-useless-escape: "off" */
+  this.$rules = {
+    start: [
+      { token: 'empty', regex: /$/ },
+      { token: 'literal', regex: /^\.{4,}\s*$/, next: 'listingBlock' },
+      { token: 'literal', regex: /^-{4,}\s*$/, next: 'literalBlock' },
+      { token: 'literal', regex: /^\+{4,}\s*$/, next: 'passthroughBlock' },
+      { token: 'keyword', regex: /^={4,}\s*$/ },
+      { token: 'text', regex: /^\s*$/ },
+      // immediately return to the start mode without matching anything
+      { token: 'empty', regex: '', next: 'dissallowDelimitedBlock' },
+    ],
+
+    dissallowDelimitedBlock: [
+      { include: 'paragraphEnd' },
+      { token: 'comment', regex: '^//.+$' },
+      { token: 'keyword', regex: '^(?:NOTE|TIP|IMPORTANT|WARNING|CAUTION):\\s' },
+
+      { include: 'listStart' },
+      { token: 'literal', regex: /^\s+.+$/, next: 'indentedBlock' },
+      { token: 'empty', regex: '', next: 'text' },
+    ],
+
+    paragraphEnd: [
+      { token: 'doc.comment', regex: /^\/{4,}\s*$/, next: 'commentBlock' },
+      { token: 'tableBlock', regex: /^\s*[|!]=+\s*$/, next: 'tableBlock' },
+      // open block, ruler
+      { token: 'keyword', regex: /^(?:--|''')\s*$/, next: 'start' },
+      { token: 'option', regex: /^\[.*\]\s*$/, next: 'start' },
+      { token: 'pageBreak', regex: /^>{3,}$/, next: 'start' },
+      { token: 'literal', regex: /^\.{4,}\s*$/, next: 'listingBlock' },
+      { token: 'titleUnderline', regex: /^(?:={2,}|-{2,}|~{2,}|\^{2,}|\+{2,})\s*$/, next: 'start' },
+      { token: 'singleLineTitle', regex: /^={1,6}\s+\S.*$/, next: 'start' },
+
+      { token: 'otherBlock', regex: /^(?:\*{2,}|_{2,})\s*$/, next: 'start' },
+      // .optional title
+      { token: 'optionalTitle', regex: /^\.[^.\s].+$/, next: 'start' },
+    ],
+
+    listStart: [
+      {
+        token: 'keyword',
+        regex: /^\s*(?:\d+\.|[a-zA-Z]\.|[ixvmIXVM]+\)|\*{1,5}|-|\.{1,5})\s/,
+        next: 'listText',
+      },
+      { token: 'meta.tag', regex: /^.+(?::{2,4}|;;)(?: |$)/, next: 'listText' },
+      // continuation
+      { token: 'keyword', regex: /^\+\s*$/, next: 'start' },
+    ],
+
+    text: [
+      {
+        token: ['link', 'link'],
+        regex: /((?:https?:\/\/|ftp:\/\/|file:\/\/|mailto:|callto:)[^\s\[]+)(\[.*?\])/,
+      },
+      { token: ['link', 'link'], regex: /(?:https?:\/\/|ftp:\/\/|file:\/\/|mailto:|callto:)[^\s\[]+/ },
+      { token: 'link', regex: /\b[\w\.\/\-]+@[\w\.\/\-]+\b/ },
+      { include: 'macros' },
+      { include: 'paragraphEnd' },
+      { token: 'literal', regex: /\+{3,}/, next: 'smallPassthrough' },
+      {
+        token: 'escape',
+        regex: /\((?:C|TM|R)\)|\.{3}|->|<-|=>|<=|&#(?:\d+|x[a-fA-F\d]+);|(?: |^)--(?=\s+\S)/,
+      },
+      { token: 'escape', regex: /\\[_*'`+#]|\\{2}[_*'`+#]{2}/ },
+      { token: 'keyword', regex: /\s\+$/ },
+      // any word
+      { token: 'text', regex: identifierRe },
+      {
+        token: ['keyword', 'string', 'keyword'],
+        regex: /(<<[\w\d\-$]+,)(.*?)(>>|$)/,
+      },
+      { token: 'keyword', regex: /<<[\w\d\-$]+,?|>>/ },
+      { token: 'constant.character', regex: /\({2,3}.*?\){2,3}/ },
+      // List of callouts
+      { token: 'support.function.list.callout', regex: /^(?:<\d+>|\d+>|>) /, next: 'text' },
+      // Anchor
+      { token: 'keyword', regex: /\[\[.+?\]\]/ },
+      // bibliography
+      { token: 'support', regex: /^\[{3}[\w\d =\-]+\]{3}/ },
+
+      { include: 'quotes' },
+      // text block end
+      { token: 'empty', regex: /^\s*$/, next: 'start' },
+    ],
+
+    listText: [{ include: 'listStart' }, { include: 'text' }],
+
+    indentedBlock: [
+      { token: 'literal', regex: /^[\s\w].+$/, next: 'indentedBlock' },
+      { token: 'literal', regex: '', next: 'start' },
+    ],
+
+    listingBlock: [
+      { token: 'literal', regex: /^\.{4,}\s*$/, next: 'dissallowDelimitedBlock' },
+      { token: 'constant.numeric', regex: '<\\d+>' },
+      { token: 'literal', regex: '[^<]+' },
+      { token: 'literal', regex: '<' },
+    ],
+    literalBlock: [
+      { token: 'literal', regex: /^-{4,}\s*$/, next: 'dissallowDelimitedBlock' },
+      { token: 'constant.numeric', regex: '<\\d+>' },
+      { token: 'literal', regex: '[^<]+' },
+      { token: 'literal', regex: '<' },
+    ],
+    passthroughBlock: [
+      { token: 'literal', regex: /^\+{4,}\s*$/, next: 'dissallowDelimitedBlock' },
+      { token: 'literal', regex: identifierRe + '|\\d+' },
+      { include: 'macros' },
+      { token: 'literal', regex: '.' },
+    ],
+
+    smallPassthrough: [
+      { token: 'literal', regex: /[+]{3,}/, next: 'dissallowDelimitedBlock' },
+      { token: 'literal', regex: /^\s*$/, next: 'dissallowDelimitedBlock' },
+      { token: 'literal', regex: identifierRe + '|\\d+' },
+      { include: 'macros' },
+    ],
+
+    commentBlock: [
+      { token: 'doc.comment', regex: /^\/{4,}\s*$/, next: 'dissallowDelimitedBlock' },
+      { token: 'doc.comment', regex: '^.*$' },
+    ],
+    tableBlock: [
+      { token: 'tableBlock', regex: /^\s*\|={3,}\s*$/, next: 'dissallowDelimitedBlock' },
+      { token: 'tableBlock', regex: /^\s*!={3,}\s*$/, next: 'innerTableBlock' },
+      { token: 'tableBlock', regex: /\|/ },
+      { include: 'text', noEscape: true },
+    ],
+    innerTableBlock: [
+      { token: 'tableBlock', regex: /^\s*!={3,}\s*$/, next: 'tableBlock' },
+      { token: 'tableBlock', regex: /^\s*|={3,}\s*$/, next: 'dissallowDelimitedBlock' },
+      { token: 'tableBlock', regex: /\!/ },
+    ],
+    macros: [
+      { token: 'macro', regex: /{[\w\-$]+}/ },
+      {
+        token: ['text', 'string', 'text', 'constant.character', 'text'],
+        regex: /({)([\w\-$]+)(:)?(.+)?(})/,
+      },
+      {
+        token: ['text', 'markup.list.macro', 'keyword', 'string'],
+        regex: /(\w+)(footnote(?:ref)?::?)([^\s\[]+)?(\[.*?\])?/,
+      },
+      {
+        token: ['markup.list.macro', 'keyword', 'string'],
+        regex: /([a-zA-Z\-][\w\.\/\-]*::?)([^\s\[]+)(\[.*?\])?/,
+      },
+      { token: ['markup.list.macro', 'keyword'], regex: /([a-zA-Z\-][\w\.\/\-]+::?)(\[.*?\])/ },
+      { token: 'keyword', regex: /^:.+?:(?= |$)/ },
+    ],
+
+    quotes: [
+      { token: 'string.italic', regex: /__[^_\s].*?__/ },
+      { token: 'string.italic', regex: quoteRule('_') },
+
+      { token: 'keyword.bold', regex: /\*\*[^*\s].*?\*\*/ },
+      { token: 'keyword.bold', regex: quoteRule('\\*') },
+
+      { token: 'literal', regex: /\+\+[^+\s].*?\+\+/ },
+      { token: 'literal', regex: quoteRule('\\+') },
+
+      { token: 'literal', regex: /\$\$.+?\$\$/ },
+      { token: 'literal', regex: quoteRule('\\$') },
+
+      { token: 'literal', regex: /``[^`\s].*?``/ },
+      { token: 'literal', regex: quoteRule('`') },
+
+      { token: 'keyword', regex: /\^[^\^].*?\^/ },
+      { token: 'keyword', regex: quoteRule('\\^') },
+      { token: 'keyword', regex: /~[^~].*?~/ },
+      { token: 'keyword', regex: quoteRule('~') },
+
+      { token: 'keyword', regex: /##?/ },
+      { token: 'keyword', regex: /(?:\B|^)``|\b''/ },
+    ],
+  };
+
+  function quoteRule(ch) {
+    const prefix = /\w/.test(ch) ? '\\b' : '(?:\\B|^)';
+    return prefix + ch + '[^' + ch + '].*?' + ch + '(?![\\w*])';
+  }
+
+  // addQuoteBlock("text")
+
+  const tokenMap = {
+    macro: 'constant.character',
+    tableBlock: 'doc.comment',
+    titleUnderline: 'markup.heading',
+    singleLineTitle: 'markup.heading',
+    pageBreak: 'string',
+    option: 'string.regexp',
+    otherBlock: 'markup.list',
+    literal: 'support.function',
+    optionalTitle: 'constant.numeric',
+    escape: 'constant.language.escape',
+    link: 'markup.underline.list',
+  };
+
+  for (const state in this.$rules) {
+    const stateRules = this.$rules[state];
+    for (let i = stateRules.length; i--; ) {
+      const rule = stateRules[i];
+      if (rule.include || typeof rule === 'string') {
+        let args = [i, 1].concat(this.$rules[rule.include || rule]);
+        if (rule.noEscape) {
+          args = args.filter(function (x) {
+            return !x.next;
+          });
+        }
+        stateRules.splice.apply(stateRules, args);
+      } else if (rule.token in tokenMap) {
+        rule.token = tokenMap[rule.token];
+      }
+    }
+  }
+};
+
+// Ace's Syntax Tokenizer.
+
+// tokenizing lines longer than this makes editor very slow
+let MAX_TOKEN_COUNT = 1000;
+const Tokenizer = function (rules) {
+  this.states = rules;
+
+  this.regExps = {};
+  this.matchMappings = {};
+  for (const key in this.states) {
+    const state = this.states[key];
+    const ruleRegExps = [];
+    let matchTotal = 0;
+    const mapping = (this.matchMappings[key] = { defaultToken: 'text' });
+    let flag = 'g';
+
+    const splitterRurles = [];
+    for (let i = 0; i < state.length; i++) {
+      const rule = state[i];
+      if (rule.defaultToken) mapping.defaultToken = rule.defaultToken;
+      if (rule.caseInsensitive) flag = 'gi';
+      if (rule.regex == null) continue;
+
+      if (rule.regex instanceof RegExp) rule.regex = rule.regex.toString().slice(1, -1);
+
+      // Count number of matching groups. 2 extra groups from the full match
+      // And the catch-all on the end (used to force a match);
+      let adjustedregex = rule.regex;
+      let matchcount = new RegExp('(?:(' + adjustedregex + ')|(.))').exec('a').length - 2;
+      if (Array.isArray(rule.token)) {
+        if (rule.token.length === 1 || matchcount === 1) {
+          rule.token = rule.token[0];
+        } else if (matchcount - 1 !== rule.token.length) {
+          throw new Error(
+            "number of classes and regexp groups in '" +
+              rule.token +
+              "'\n'" +
+              rule.regex +
+              "' doesn't match\n" +
+              (matchcount - 1) +
+              '!=' +
+              rule.token.length,
+          );
+        } else {
+          rule.tokenArray = rule.token;
+          rule.token = null;
+          rule.onMatch = this.$arrayTokens;
+        }
+      } else if (typeof rule.token === 'function' && !rule.onMatch) {
+        if (matchcount > 1) rule.onMatch = this.$applyToken;
+        else rule.onMatch = rule.token;
+      }
+
+      if (matchcount > 1) {
+        if (/\\\d/.test(rule.regex)) {
+          // Replace any backreferences and offset appropriately.
+          adjustedregex = rule.regex.replace(/\\([0-9]+)/g, function (match, digit) {
+            return '\\' + (parseInt(digit, 10) + matchTotal + 1);
+          });
+        } else {
+          matchcount = 1;
+          adjustedregex = this.removeCapturingGroups(rule.regex);
+        }
+        if (!rule.splitRegex && typeof rule.token !== 'string')
+          // flag will be known only at the very end
+          splitterRurles.push(rule);
+      }
+
+      mapping[matchTotal] = i;
+      matchTotal += matchcount;
+
+      ruleRegExps.push(adjustedregex);
+
+      // makes property access faster
+      if (!rule.onMatch) rule.onMatch = null;
+    }
+
+    splitterRurles.forEach(function (rule) {
+      rule.splitRegex = this.createSplitterRegexp(rule.regex, flag);
+    }, this);
+
+    this.regExps[key] = new RegExp('(' + ruleRegExps.join(')|(') + ')|($)', flag);
+  }
+};
+
+(function () {
+  this.$setMaxTokenCount = function (m) {
+    MAX_TOKEN_COUNT = m | 0;
+  };
+
+  this.$applyToken = function (str) {
+    const values = this.splitRegex.exec(str).slice(1);
+    const types = this.token.apply(this, values);
+
+    // required for compatibility with old modes
+    if (typeof types === 'string') return [{ type: types, value: str }];
+
+    const tokens = [];
+    for (let i = 0, l = types.length; i < l; i++) {
+      if (values[i])
+        tokens[tokens.length] = {
+          type: types[i],
+          value: values[i],
+        };
+    }
+    return tokens;
+  };
+
+  this.$arrayTokens = function (str) {
+    if (!str) return [];
+    const values = this.splitRegex.exec(str);
+    if (!values) return 'text';
+    const tokens = [];
+    const types = this.tokenArray;
+    for (let i = 0, l = types.length; i < l; i++) {
+      if (values[i + 1])
+        tokens[tokens.length] = {
+          type: types[i],
+          value: values[i + 1],
+        };
+    }
+    return tokens;
+  };
+
+  this.removeCapturingGroups = function (src) {
+    const r = src.replace(/\[(?:\\.|[^\]])*?\]|\\.|\(\?[:=!]|(\()/g, function (x, y) {
+      return y ? '(?:' : x;
+    });
+    return r;
+  };
+
+  this.createSplitterRegexp = function (src, flag) {
+    if (src.indexOf('(?=') !== -1) {
+      let stack = 0;
+      let inChClass = false;
+      const lastCapture = {};
+      src.replace(/(\\.)|(\((?:\?[=!])?)|(\))|([\[\]])/g, function (m, esc, parenOpen, parenClose, square, index) {
+        if (inChClass) {
+          inChClass = square !== ']';
+        } else if (square) {
+          inChClass = true;
+        } else if (parenClose) {
+          if (stack === lastCapture.stack) {
+            lastCapture.end = index + 1;
+            lastCapture.stack = -1;
+          }
+          stack--;
+        } else if (parenOpen) {
+          stack++;
+          if (parenOpen.length !== 1) {
+            lastCapture.stack = stack;
+            lastCapture.start = index;
+          }
+        }
+        return m;
+      });
+
+      if (lastCapture.end != null && /^\)*$/.test(src.substr(lastCapture.end)))
+        src = src.substring(0, lastCapture.start) + src.substr(lastCapture.end);
+    }
+    return new RegExp(src, (flag || '').replace('g', ''));
+  };
+
+  /**
+   * Returns an object containing two properties: `tokens`, which contains all the tokens; and `state`, the current state.
+   * @returns {Object}
+   **/
+  this.getLineTokens = function (line, startState) {
+    let stack = [];
+    if (startState && typeof startState !== 'string') {
+      stack = startState.slice(0);
+      startState = stack[0];
+    }
+
+    let currentState = startState || 'start';
+    let state = this.states[currentState];
+    if (!state) {
+      currentState = 'start';
+      state = this.states[currentState];
+    }
+    let mapping = this.matchMappings[currentState];
+    let re = this.regExps[currentState];
+    re.lastIndex = 0;
+
+    let match;
+    const tokens = [];
+    let lastIndex = 0;
+
+    let token = { type: null, value: '' };
+
+    /* eslint no-cond-assign: "off" */
+    while ((match = re.exec(line))) {
+      let type = mapping.defaultToken;
+      let rule = null;
+      const value = match[0];
+      const index = re.lastIndex;
+
+      if (index - value.length > lastIndex) {
+        const skipped = line.substring(lastIndex, index - value.length);
+        if (token.type === type) {
+          token.value += skipped;
+        } else {
+          if (token.type) tokens.push(token);
+          token = { type: type, value: skipped };
+        }
+      }
+
+      for (let i = 0; i < match.length - 2; i++) {
+        if (match[i + 1] === undefined) continue;
+
+        rule = state[mapping[i]];
+
+        if (rule.onMatch) type = rule.onMatch(value, currentState, stack);
+        else type = rule.token;
+
+        if (rule.next) {
+          if (typeof rule.next === 'string') currentState = rule.next;
+          else currentState = rule.next(currentState, stack);
+
+          state = this.states[currentState];
+          if (!state) {
+            window.console && console.error && console.error(currentState, "doesn't exist");
+            currentState = 'start';
+            state = this.states[currentState];
+          }
+          mapping = this.matchMappings[currentState];
+          lastIndex = index;
+          re = this.regExps[currentState];
+          re.lastIndex = index;
+        }
+        break;
+      }
+
+      if (value) {
+        if (typeof type === 'string') {
+          if ((!rule || rule.merge !== false) && token.type === type) {
+            token.value += value;
+          } else {
+            if (token.type) tokens.push(token);
+            token = { type: type, value: value };
+          }
+        } else if (type) {
+          if (token.type) tokens.push(token);
+          token = { type: null, value: '' };
+          for (let i = 0; i < type.length; i++) tokens.push(type[i]);
+        }
+      }
+
+      if (lastIndex === line.length) break;
+
+      lastIndex = index;
+
+      if (tokens.length > MAX_TOKEN_COUNT) {
+        // chrome doens't show contents of text nodes with very long text
+        while (lastIndex < line.length) {
+          if (token.type) tokens.push(token);
+          token = {
+            value: line.substring(lastIndex, (lastIndex += 2000)),
+            type: 'overflow',
+          };
+        }
+        currentState = 'start';
+        stack = [];
+        break;
+      }
+    }
+
+    if (token.type) tokens.push(token);
+
+    if (stack.length > 1) {
+      if (stack[0] !== currentState) stack.unshift(currentState);
+    }
+    return {
+      tokens: tokens,
+      state: stack.length ? stack : currentState,
+    };
+  };
+}.call(Tokenizer.prototype));
+
+// Token conversion.
+// See <https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode#common-tokens>
+// This is not an exact match nor the best match that can be made.
+const tokenFromAceToken = {
+  empty: null,
+  text: null,
+
+  // Keyword
+  keyword: 'keyword',
+  control: 'keyword',
+  operator: 'operator',
+
+  // Constants
+  constant: 'atom',
+  numeric: 'number',
+  character: 'atom',
+  escape: 'atom',
+
+  // Variables
+  variable: 'variable',
+  parameter: 'variable-3',
+  // Python's `self` uses that.
+  language: 'variable-2',
+
+  // Comments
+  comment: 'comment',
+  line: 'comment',
+  'double-slash': 'comment',
+  'double-dash': 'comment',
+  'number-sign': 'comment',
+  percentage: 'comment',
+  block: 'comment',
+  doc: 'comment',
+
+  // String
+  string: 'string',
+  quoted: 'string',
+  single: 'string',
+  double: 'string',
+  triple: 'string',
+  unquoted: 'string',
+  interpolated: 'string',
+  regexp: 'string-2',
+
+  meta: 'keyword',
+  literal: 'qualifier',
+  support: 'builtin',
+
+  // Markup
+  markup: 'tag',
+  underline: 'link',
+  link: 'link',
+  strong: 'strong',
+  heading: 'header',
+  em: 'em',
+  list: 'variable-2',
+  numbered: 'variable-2',
+  unnumbered: 'variable-2',
+  quote: 'quote',
+  // Markdown's raw block uses that.
+  raw: 'variable-2',
+
+  // Invalid
+  invalid: 'error',
+  illegal: 'invalidchar',
+  deprecated: 'error',
+};
+
+// Takes a list of Ace tokens, returns a (string) CodeMirror token.
+const cmTokenFromAceTokens = function (tokens) {
+  let token = null;
+  for (let i = 0; i < tokens.length; i++) {
+    // Find the most specific token.
+    if (tokenFromAceToken[tokens[i]] !== undefined) {
+      token = tokenFromAceToken[tokens[i]];
+    }
+  }
+  return token;
+};
+
+// Consume a token from plannedTokens.
+const consumeToken = function (stream, state) {
+  const plannedToken = state.plannedTokens.shift();
+  if (plannedToken === undefined) {
+    return null;
+  }
+  stream.match(plannedToken.value);
+  const tokens = plannedToken.type.split('.');
+  return cmTokenFromAceTokens(tokens);
+};
+
+const matchToken = function (stream, state) {
+  // Anormal start: we already have planned tokens to consume.
+  if (state.plannedTokens.length > 0) {
+    return consumeToken(stream, state);
+  }
+
+  // Normal start.
+  const currentState = state.current;
+  const currentLine = stream.match(/.*$/, false)[0];
+  const tokenized = tokenizer.getLineTokens(currentLine, currentState);
+  // We got a {tokens, state} object.
+  // Each token is a {value, type} object.
+  state.plannedTokens = tokenized.tokens;
+  state.current = tokenized.state;
+
+  // Consume a token.
+  return consumeToken(stream, state);
+};
+
+// Initialize all state.
+const aceHighlightRules = new HighlightRules();
+const tokenizer = new Tokenizer(aceHighlightRules.$rules);
+
+export const asciidoc = {
+  startState: function () {
+    return {
+      current: 'start',
+      // List of {value, type}, with type being an Ace token string.
+      plannedTokens: [],
+    };
+  },
+  blankLine: function (state) {
+    matchToken('', state);
+  },
+  token: matchToken,
+};

package/src/mixins/input-element.js

@@ -52,13 +52,16 @@ export function InputElement(ParentClass) {
           :host([invalid]) :not(.clipboard) ::slotted(.input),
           :host([invalid]) :not(.clipboard) .box-icon-left,
           :host([invalid]) :not(.clipboard) textarea,
-          :host([invalid]) :not(.clipboard) select {
+          :host([invalid]) :not(.clipboard) select,
+          :host([invalid]) :not(.clipboard) .input {
             box-shadow: inset 3px 0 0 var(--gv-input-invalid--bxshc, var(--gv-theme-color-error, #da1a1b));
           }
 
           :host([readonly]) :not(.clipboard) input,
           :host([readonly]) :not(.clipboard) ::slotted(.input),
-          :host([readonly]) .textarea :host([readonly]) :not(.clipboard) select {
+          :host([readonly]) .textarea,
+          :host([readonly]) :not(.clipboard) select,
+          :host([readonly]) .input {
             border-left: 1px solid var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
           }
 
@@ -86,7 +89,7 @@ export function InputElement(ParentClass) {
 
     setValidity(isInvalid = false, violation = '') {
       const element = this.getInputElement();
-      if (element) {
+      if (element && element.setCustomValidity) {
         if (isInvalid) {
           if (violation == null || violation.trim() === '') {
             violation = 'field is not valid';
@@ -95,6 +98,7 @@ export function InputElement(ParentClass) {
         } else {
           element.setCustomValidity('');
         }
+        element.reportValidity();
       }
       this.invalid = isInvalid;
       this.valid = !this.invalid;

package/src/molecules/gv-code.js

@@ -13,12 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { css, LitElement, html } from 'lit';
-
-import { shapeClipboard, shapeCopied } from '../styles/shapes';
-import { dispatchCustomEvent } from '../lib/events';
-import { uuid } from '../lib/utils';
-import { classMap } from 'lit-html/directives/class-map';
+import { css, html } from 'lit';
 
 import { EditorView, basicSetup } from '@codemirror/basic-setup';
 import { EditorState, Compartment } from '@codemirror/state';
@@ -26,16 +21,16 @@ import { autocompletion } from '@codemirror/autocomplete';
 import { json } from '@codemirror/lang-json';
 import { languages } from '@codemirror/language-data';
 import { placeholder } from '@codemirror/view';
-import { InputElement } from '../mixins/input-element';
-import { i18n } from '../lib/i18n';
+
+import { shapeClipboard } from '../styles/shapes';
+import { dispatchCustomEvent } from '../lib/events';
+import { uuid } from '../lib/utils';
+import { classMap } from 'lit-html/directives/class-map';
+import { GvInput } from '../atoms/gv-input';
 import { skeleton } from '../styles/skeleton';
 import { empty } from '../styles/empty';
 import { input } from '../styles/input';
 
-const languageCompartment = new Compartment();
-const readonlyCompartment = new Compartment();
-const placeholderCompartment = new Compartment();
-
 /**
  * Code component
  *
@@ -59,16 +54,11 @@ const placeholderCompartment = new Compartment();
  * @attr {Boolean} [autofocus=false] - true to put the focus on the input
  * @attr {Boolean} [readonly=false] - true if field is readonly mode
  */
-export class GvCode extends InputElement(LitElement) {
+export class GvCode extends GvInput {
   static get properties() {
     return {
       ...super.properties,
       options: { type: Object },
-      large: { type: Boolean },
-      medium: { type: Boolean },
-      small: { type: Boolean },
-      clipboard: { type: Boolean },
-      _clipboardIcon: { type: String },
       rows: { type: Number },
       _error: { type: String, attribute: false },
     };
@@ -82,6 +72,9 @@ export class GvCode extends InputElement(LitElement) {
     this.autofocus = false;
     this.clipboard = false;
     this._clipboardIcon = shapeClipboard;
+    this.languageCompartment = new Compartment();
+    this.readonlyCompartment = new Compartment();
+    this.placeholderCompartment = new Compartment();
   }
 
   render() {
@@ -91,37 +84,32 @@ export class GvCode extends InputElement(LitElement) {
       large: this.large,
       medium: this.medium || (!this.large && !this.small),
       small: this.small,
+      copied: this.hasClipboard && this._copied,
     };
     const inputClasses = {
       content: true,
-      input: this.singleLine,
+      code: !this.hasInputStyle,
+      input: this.hasInputStyle,
     };
 
     return html`
       <div class="${classMap(classes)}">
         ${this.label ? html`<label for="code">${this.label}</label>` : ''}
-        <div id="${this._id}" class="${classMap(inputClasses)}">
-          ${this.clipboard
-            ? html`<gv-button
-                class="btn-clipboard"
-                title="${i18n('gv-code.copy')}"
-                ?outlined="${!this._copied}"
-                ?primary="${this._copied}"
-                small
-                icon="${this._clipboardIcon}"
-              ></gv-button>`
-            : ''}
-        </div>
+        <div id="${this._id}" class="${classMap(inputClasses)}">${this.renderIcon()}</div>
       </div>
       ${this.description != null ? html`<div class="description" .innerHTML="${this.description}"></div>` : ''}
     `;
   }
 
+  bindInputEvents() {
+    dispatchCustomEvent(this, 'ready', { currentTarget: this });
+  }
+
   _onChange() {
     dispatchCustomEvent(this, 'input', this.value);
   }
 
-  get singleLine() {
+  get hasInputStyle() {
     return this.rows === 1;
   }
 
@@ -131,34 +119,32 @@ export class GvCode extends InputElement(LitElement) {
   }
 
   findBestAutocompleteHandler(completionContext) {
-    return this.defaultCompletionHandler;
+    return { handler: this.defaultCompletionHandler, match: true };
   }
 
   get defaultCompletionHandler() {
     return {
-      handler: {
-        run(completionContext) {
-          const language = completionContext.state.languageDataAt('autocomplete', completionContext.pos);
-          if (language.length > 0) {
-            return language[0](completionContext);
-          }
-          return { from: completionContext.pos, options: [] };
-        },
+      run(completionContext) {
+        const language = completionContext.state.languageDataAt('autocomplete', completionContext.pos);
+        if (language.length > 0) {
+          return language[0](completionContext);
+        }
+        return { from: completionContext.pos, options: [] };
       },
-      match: true,
     };
   }
 
   _getExtensions() {
     return [
       basicSetup,
-      languageCompartment.of(json()),
-      placeholderCompartment.of(placeholder(this.placeholder || '')),
-      EditorState.transactionFilter.of((tr) => (this.singleLine && tr.newDoc.lines > 1 ? [] : tr)),
-      readonlyCompartment.of(EditorView.editable.of(!this.readonly)),
-      EditorView.updateListener.of((update) => {
-        if (update.view.contentDOM.innerText) {
-          this.value = update.view.contentDOM.innerText;
+      GvCode.codemirrorTheme,
+      this.languageCompartment.of(json()),
+      this.placeholderCompartment.of(placeholder(this.placeholder || '')),
+      EditorState.transactionFilter.of((tr) => (this.hasInputStyle && tr.newDoc.lines > 1 ? [] : tr)),
+      this.readonlyCompartment.of(EditorView.editable.of(!this.readonly && !this.disabled)),
+      EditorView.updateListener.of((viewUpdate) => {
+        if (viewUpdate.docChanged) {
+          this.value = this._editorView.state.doc.toString();
         }
       }),
       autocompletion({
@@ -173,9 +159,15 @@ export class GvCode extends InputElement(LitElement) {
     return [];
   }
 
+  getInputElement() {
+    return this.shadowRoot.querySelector(`[id=${this._id}]`);
+  }
+
   firstUpdated() {
     super.firstUpdated();
-    const parent = this.shadowRoot.querySelector(`[id=${this._id}]`);
+
+    const parent = this.getInputElement();
+
     this._editorState = EditorState.create({
       doc: this.value,
       extensions: this._getExtensions(),
@@ -185,35 +177,20 @@ export class GvCode extends InputElement(LitElement) {
       parent,
       state: this._editorState,
     });
-    parent.appendChild(this._editorView.dom);
 
-    if (this.clipboard) {
-      import('clipboard-copy').then((mod) => {
-        const copy = mod.default;
-        this.shadowRoot.querySelector('.btn-clipboard').addEventListener('gv-button:click', () => {
-          copy(this.value);
-          this._copied = true;
-          this._clipboardIcon = shapeCopied;
-          dispatchCustomEvent(this, 'clipboard-copy');
-          setTimeout(() => {
-            this._copied = false;
-            this._clipboardIcon = shapeClipboard;
-          }, 1000);
-        });
-      });
-    }
-    dispatchCustomEvent(this, 'ready');
+    parent.appendChild(this._editorView.dom);
   }
 
   async updated(properties) {
+    super.updated(properties);
     if (properties.has('placeholder')) {
       this._reflectPlaceholder();
     }
     if (properties.has('value')) {
       this._reflectValue();
     }
-    if (properties.has('readonly')) {
-      this._reflectReadonly();
+    if (properties.has('readonly') || properties.has('disabled')) {
+      this._reflectReadonlyDisabled();
     }
     if (properties.has('options') && this.options) {
       await this._reflectOptions();
@@ -222,7 +199,7 @@ export class GvCode extends InputElement(LitElement) {
 
   _reflectPlaceholder() {
     this._editorView.dispatch({
-      effects: placeholderCompartment.reconfigure(placeholder(this.placeholder)),
+      effects: this.placeholderCompartment.reconfigure(placeholder(this.placeholder)),
     });
   }
 
@@ -237,38 +214,68 @@ export class GvCode extends InputElement(LitElement) {
     this._editorState = transaction.state;
   }
 
-  _reflectReadonly() {
+  _reflectReadonlyDisabled() {
     this._editorView.dispatch({
-      effects: readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly)),
+      effects: this.readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly && !this.disabled)),
     });
   }
 
-  async _reflectOptions() {
-    if (this.options.mode) {
-      const language = languages.find((languageDescription) => {
-        return (
-          languageDescription.name.toUpperCase() === this.options.mode.toUpperCase() ||
-          languageDescription.alias.includes(this.options.mode)
-        );
-      });
-      if (language != null) {
-        if (language.support == null) {
-          await language.load();
-        }
-        this._editorView.dispatch({
-          effects: languageCompartment.reconfigure(language.support.extension),
-        });
+  static async findLanguage(mode) {
+    if (mode) {
+      const modeOnly = mode.split('/').pop();
+      if (modeOnly === 'asciidoc') {
+        const [{ asciidoc }, { StreamLanguage }] = await Promise.all([import('../lib/asciidoc-lang'), import('@codemirror/stream-parser')]);
+        return {
+          name: 'asciidoc',
+          support: {
+            extension: StreamLanguage.define(asciidoc),
+          },
+        };
       } else {
-        console.warn(
-          `Cannot find language ${this.options.mode}, please use language supported by CodeMirror 6`,
-          languages.map((l) => l.name),
-        );
+        const language = languages.find((languageDescription) => {
+          return languageDescription.name.toUpperCase() === modeOnly.toUpperCase() || languageDescription.alias.includes(modeOnly);
+        });
+        if (language == null) {
+          console.warn(
+            `Cannot find language ${mode}, please use language supported by CodeMirror 6`,
+            languages.map((l) => l.name),
+          );
+        }
+        return language;
       }
     }
+    return null;
+  }
+
+  async _reflectOptions() {
+    const language = await GvCode.findLanguage(this.options.mode);
+    if (language != null) {
+      if (language.support == null) {
+        await language.load();
+      }
+      this._editorView.dispatch({
+        effects: this.languageCompartment.reconfigure(language.support.extension),
+      });
+    }
+  }
+
+  static get codemirrorTheme() {
+    return EditorView.theme({
+      '&.cm-editor.cm-focused': {
+        outline: 'none',
+      },
+      '.cm-gutters': {
+        backgroundColor: 'var(--gv-input-icon--bgc, var(--gv-theme-neutral-color, #f5f5f5))',
+        color: 'var(--gv-theme-font-color-dark, #262626)',
+        borderLeft: '5px solid',
+        borderColor: 'var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9))',
+      },
+    });
   }
 
   static get styles() {
     return [
+      ...super.styles,
       skeleton,
       empty,
       input,
@@ -282,16 +289,25 @@ export class GvCode extends InputElement(LitElement) {
 
         .content {
           position: relative;
+          border: var(--gv-input--bdw, 1px) var(--gv-input--bds, solid) var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+          box-sizing: border-box;
+          border-radius: 4px;
+        }
+
+        .btn_copy {
+        }
+
+        .box-icon {
+          bottom: -1px;
+          right: -1px;
+          z-index: 1;
         }
 
-        .btn-clipboard {
-          position: absolute;
-          right: 0;
-          top: 0;
-          z-index: 10;
+        .code .box-icon {
+          border-radius: 3px;
         }
 
-        /**  Override Codemirror style */
+        /**  Override Codemirror theme */
         .input .cm-gutters {
           display: none;
         }
@@ -300,7 +316,8 @@ export class GvCode extends InputElement(LitElement) {
           overflow: hidden;
         }
 
-        .input .cm-activeLine {
+        .input .cm-activeLine,
+        :host([readonly]) .cm-activeLine {
           background-color: transparent;
         }
 
@@ -308,8 +325,8 @@ export class GvCode extends InputElement(LitElement) {
           padding: 0;
         }
 
-        .ͼ1.cm-editor.cm-focused {
-          outline: none;
+        :host([invalid]) .cm-gutters {
+          border-color: var(--gv-theme-color-error, #da1a1b);
         }
       `,
     ];

package/src/molecules/gv-expression-language.js

@@ -51,7 +51,7 @@ export class GvExpressionLanguage extends GvCode {
 
   firstUpdated() {
     super.firstUpdated();
-    dispatchCustomEvent(this, 'ready');
+    dispatchCustomEvent(this, 'ready', { currentTarget: this });
   }
 
   getExtensions() {
@@ -78,7 +78,7 @@ export class GvExpressionLanguage extends GvCode {
   }
 
   buildMethods(type) {
-    const modelType = this._getModelType(type);
+    const modelType = this.getModelType(type);
     return modelType.methods.map(({ name, params = [], returnType }) => {
       const command = `${name}()`;
       const displayParams = params.map((p) => `${p.type} ${p.name}`);
@@ -134,7 +134,6 @@ export class GvExpressionLanguage extends GvCode {
     if (type) {
       const lowerType = type.toLowerCase();
       if (lowerType === 'string') {
-        // class, constant, enum, function, interface, keyword, method, namespace, property, text, type, and variable.
         return 'text';
       } else if (lowerType === 'httpheaders' || lowerType === 'multivaluemap') {
         return 'type';
@@ -159,7 +158,6 @@ export class GvExpressionLanguage extends GvCode {
             .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
             .map((command) => {
               return {
-                // class, constant, enum, function, interface, keyword, method, namespace, property, text, type, and variable.
                 type: 'variable',
                 command,
                 apply: command,
@@ -176,11 +174,10 @@ export class GvExpressionLanguage extends GvCode {
           const tokens = match.text.split('.');
           const key = tokens[0].replaceAll('{#', '');
           const prefix = tokens[1];
-          const candidate = this.grammar[key][prefix];
+          let candidate = this.grammar[key][prefix];
           let options = [];
           let from = completionContext.pos;
           if (candidate) {
-            // const modelType = this._getModelType(candidate._type);
             if (this.isMap(candidate._type)) {
               options = this.getEnum(candidate._type).map((value) => {
                 const type = this.convertType(candidate._type);
@@ -195,7 +192,7 @@ export class GvExpressionLanguage extends GvCode {
             }
           } else {
             from -= prefix.length;
-            const candidate = this.grammar[key];
+            candidate = this.grammar[key];
             if (candidate._type) {
               options = this.buildMethods(candidate._type);
             } else {
@@ -224,16 +221,16 @@ export class GvExpressionLanguage extends GvCode {
           let options = [];
           let from = completionContext.pos;
           if (candidate) {
-            if (this._isMap(candidate._type)) {
-              options = this._getEnum(candidate._type)
+            if (this.isMap(candidate._type)) {
+              options = this.getEnum(candidate._type)
                 .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
                 .map((label) => {
-                  const type = this._convertType(candidate._type);
+                  const type = this.convertType(candidate._type);
                   return {
                     type,
                     command: `['${label}'][0]`,
                     apply(view, completion, _from, to) {
-                      const from = _from - prefix.length - 1;
+                      from = _from - prefix.length - 1;
                       view.dispatch({
                         changes: { from, to, insert: completion.command },
                         selection: { anchor: from + completion.command.length },
@@ -246,14 +243,14 @@ export class GvExpressionLanguage extends GvCode {
                 });
             } else {
               if (candidate._type) {
-                options = this._buildMethods(candidate._type);
+                options = this.buildMethods(candidate._type);
               } else {
                 from -= prefix.length;
                 options = Object.keys(candidate)
                   .filter((command) => command.startsWith(prefix))
                   .map((command) => {
                     return {
-                      type: this._convertType(candidate[command]._type),
+                      type: this.convertType(candidate[command]._type),
                       command,
                       apply: command,
                       label: command,

package/src/styles/input.js

@@ -122,6 +122,7 @@ export const input = css`
   ::slotted(.input),
   .input {
     border: var(--gv-input--bdw, 1px) var(--gv-input--bds, solid) var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+    transition: border 10ms ease-in-out;
     box-sizing: border-box;
     border-radius: 4px;
     font-style: normal;
@@ -232,6 +233,7 @@ export const input = css`
   }
 
   :host([disabled]) input,
+  :host([disabled]) .input,
   :host([disabled]) ::slotted(input) {
     cursor: default;
     opacity: 0.5;