@gravitee/ui-components 3.24.4-migrate-codemirror-0dec695 → 3.24.4-migrate-codemirror-f45e984

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-components",
-  "version": "3.24.4-migrate-codemirror-0dec695",
+  "version": "3.24.4-migrate-codemirror-f45e984",
   "description": "Gravitee.io UI Components library, based on Web Components",
   "repository": {
     "type": "git",
@@ -49,22 +49,9 @@
     "package.json": "npm run lint:package"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^0.19.9",
     "@codemirror/basic-setup": "^0.19.1",
-    "@codemirror/closebrackets": "^0.19.0",
-    "@codemirror/commands": "^0.19.6",
-    "@codemirror/fold": "^0.19.1",
-    "@codemirror/gutter": "^0.19.4",
-    "@codemirror/highlight": "^0.19.6",
-    "@codemirror/history": "^0.19.0",
-    "@codemirror/lang-html": "^0.19.3",
-    "@codemirror/lang-java": "^0.19.1",
-    "@codemirror/lang-javascript": "^0.19.2",
-    "@codemirror/language": "^0.19.3",
     "@codemirror/language-data": "^0.19.1",
-    "@codemirror/matchbrackets": "^0.19.3",
-    "@codemirror/state": "^0.19.6",
-    "@codemirror/view": "^0.19.32",
+    "@codemirror/stream-parser": "^0.19.3",
     "@formatjs/intl-locale": "^2.4.40",
     "@formatjs/intl-relativetimeformat": "^9.3.2",
     "clipboard-copy": "^4.0.0",

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,
@@ -497,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 = {
@@ -540,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`

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/molecules/gv-code.js

@@ -31,22 +31,6 @@ 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();
-
-const overrideTheme = 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))',
-  },
-});
-
 /**
  * Code component
  *
@@ -88,6 +72,9 @@ export class GvCode extends GvInput {
     this.autofocus = false;
     this.clipboard = false;
     this._clipboardIcon = shapeClipboard;
+    this.languageCompartment = new Compartment();
+    this.readonlyCompartment = new Compartment();
+    this.placeholderCompartment = new Compartment();
   }
 
   render() {
@@ -97,6 +84,7 @@ export class GvCode extends GvInput {
       large: this.large,
       medium: this.medium || (!this.large && !this.small),
       small: this.small,
+      copied: this.hasClipboard && this._copied,
     };
     const inputClasses = {
       content: true,
@@ -107,7 +95,10 @@ export class GvCode extends GvInput {
     return html`
       <div class="${classMap(classes)}">
         ${this.label ? html`<label for="code">${this.label}</label>` : ''}
-        <div id="${this._id}" class="${classMap(inputClasses)}">${this.renderIcon()}</div>
+        <div id="${this._id}" class="${classMap(inputClasses)}">
+          <!-- No format please -->
+          ${this.renderIcon()}
+        </div>
       </div>
       ${this.description != null ? html`<div class="description" .innerHTML="${this.description}"></div>` : ''}
     `;
@@ -149,11 +140,11 @@ export class GvCode extends GvInput {
   _getExtensions() {
     return [
       basicSetup,
-      overrideTheme,
-      languageCompartment.of(json()),
-      placeholderCompartment.of(placeholder(this.placeholder || '')),
+      GvCode.codemirrorTheme,
+      this.languageCompartment.of(json()),
+      this.placeholderCompartment.of(placeholder(this.placeholder || '')),
       EditorState.transactionFilter.of((tr) => (this.hasInputStyle && tr.newDoc.lines > 1 ? [] : tr)),
-      readonlyCompartment.of(EditorView.editable.of(!this.readonly && !this.disabled)),
+      this.readonlyCompartment.of(EditorView.editable.of(!this.readonly && !this.disabled)),
       EditorView.updateListener.of((viewUpdate) => {
         if (viewUpdate.docChanged) {
           this.value = this._editorView.state.doc.toString();
@@ -211,7 +202,7 @@ export class GvCode extends GvInput {
 
   _reflectPlaceholder() {
     this._editorView.dispatch({
-      effects: placeholderCompartment.reconfigure(placeholder(this.placeholder)),
+      effects: this.placeholderCompartment.reconfigure(placeholder(this.placeholder)),
     });
   }
 
@@ -228,32 +219,61 @@ export class GvCode extends GvInput {
 
   _reflectReadonlyDisabled() {
     this._editorView.dispatch({
-      effects: readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly && !this.disabled)),
+      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() {
@@ -272,6 +292,12 @@ export class GvCode extends GvInput {
 
         .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 {
@@ -281,11 +307,10 @@ export class GvCode extends GvInput {
         }
 
         .code .box-icon {
-          border-radius: 0;
-          top: 0;
+          border-radius: 3px;
         }
 
-        /**  Override Codemirror style */
+        /**  Override Codemirror theme */
         .input .cm-gutters {
           display: none;
         }
@@ -294,7 +319,8 @@ export class GvCode extends GvInput {
           overflow: hidden;
         }
 
-        .input .cm-activeLine {
+        .input .cm-activeLine,
+        :host([readonly]) .cm-activeLine {
           background-color: transparent;
         }
 

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;