@gravitee/ui-components 3.24.3-migrate-codemirror-f56ff96 → 3.24.3-migrate-codemirror-bed237b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-components",
-  "version": "3.24.3-migrate-codemirror-f56ff96",
+  "version": "3.24.3-migrate-codemirror-bed237b",
   "description": "Gravitee.io UI Components library, based on Web Components",
   "repository": {
     "type": "git",

package/src/molecules/gv-code.js

@@ -21,12 +21,11 @@ import { uuid } from '../lib/utils';
 import { classMap } from 'lit-html/directives/class-map';
 
 import { EditorView, basicSetup } from '@codemirror/basic-setup';
-import { EditorState, Compartment, Prec, EditorSelection } from '@codemirror/state';
-import { autocompletion, startCompletion, pickedCompletion } from '@codemirror/autocomplete';
+import { EditorState, Compartment } from '@codemirror/state';
+import { autocompletion } from '@codemirror/autocomplete';
 import { json } from '@codemirror/lang-json';
 import { languages } from '@codemirror/language-data';
-import { placeholder, keymap } from '@codemirror/view';
-import { get } from 'object-path';
+import { placeholder } from '@codemirror/view';
 import { InputElement } from '../mixins/input-element';
 import { i18n } from '../lib/i18n';
 import { skeleton } from '../styles/skeleton';
@@ -38,7 +37,7 @@ const readonlyCompartment = new Compartment();
 const placeholderCompartment = new Compartment();
 
 /**
- * Code editor component
+ * Code component
  *
  * ## Details
  * * has @theme facet
@@ -49,8 +48,7 @@ const placeholderCompartment = new Compartment();
  *
  * @attr {String} label - code language
  * @attr {String} value - code content to be highlighted
- * @attr {options} Object - options based on codemirror https://codemirror.net/doc/manual.html#config
- * @attr {Object} grammar - The grammar for Expression Language support
+ * @attr {options} Object - options based on codemirror
  * @attr {String} placeholder - an example value to display in the input when empty
  * @attr {Number} rows - number of rows of the text element
  * @attr {Boolean} large - for a large input (only if the field has one row)
@@ -71,7 +69,6 @@ export class GvCode extends InputElement(LitElement) {
       small: { type: Boolean },
       clipboard: { type: Boolean },
       _clipboardIcon: { type: String },
-      _codeMirror: { type: Object },
       rows: { type: Number },
       _error: { type: String, attribute: false },
     };
@@ -106,6 +103,7 @@ export class GvCode extends InputElement(LitElement) {
         <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}"
@@ -127,212 +125,31 @@ export class GvCode extends InputElement(LitElement) {
     return this.rows === 1;
   }
 
-  _getModelType(typeId) {
-    if (this.grammar != null) {
-      return get(this.grammar, `_types.${typeId}`);
-    }
-    return null;
-  }
-
-  _isMap(typeId) {
-    return ['Map', 'HttpHeaders', 'MultiValueMap'].includes(typeId);
-  }
-
-  _getEnum(typeId) {
-    if (this.grammar != null) {
-      return get(this.grammar, `_enums.${typeId}`);
-    }
-    return [''];
-  }
-
-  _convertType(type) {
-    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';
-      } else if (lowerType === 'int' || lowerType === 'long') {
-        return 'variable';
-      } else if (lowerType.includes('[]')) {
-        return 'enum';
-      }
-    }
-    return 'variable';
-  }
-
-  _autocomplete(ctx) {
-    const { handler, match } = this._findAutocompleteHandler(ctx);
-    return handler.run.call(this, ctx, match);
-  }
-
-  _buildMethods(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}`);
-      const label = `${name}(${displayParams.join(', ')})`;
-      const detail = `return ${returnType}`;
-      return {
-        type: 'method',
-        command,
-        apply: (view, completion, from, to) => {
-          const anchor = from + name.length + 1;
-          view.dispatch({
-            changes: { from, to, insert: completion.command },
-            selection: { anchor },
-            userEvent: 'input.complete',
-            annotations: pickedCompletion.of(view),
-          });
-        },
-        label,
-        detail,
-      };
-    });
+  _autocomplete(completionContext) {
+    const { handler, match } = this.findBestAutocompleteHandler(completionContext);
+    return handler.run.call(this, completionContext, match);
   }
 
-  _findAutocompleteHandler(ctx) {
-    return this._completionHandlers
-      .filter((handler) => (this.grammar != null && handler.supportEL === true) || handler.supportEL !== true)
-      .map((handler) => {
-        const match = handler.expr ? ctx.matchBefore(handler.expr) : true;
-        return { handler, match };
-      })
-      .find(({ match, expr }) => match);
+  findBestAutocompleteHandler(completionContext) {
+    return this.defaultCompletionHandler;
   }
 
-  get _completionHandlers() {
-    return [
-      {
-        expr: /{#[a-z]*/,
-        supportEL: true,
-        run(ctx, match) {
-          const prefix = match.text.replaceAll('{#', '');
-          const from = ctx.pos - prefix.length;
-          const options = Object.keys(this.grammar)
-            .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,
-                label: command,
-              };
-            });
-          return { from, options };
-        },
-      },
-      {
-        expr: /{#[a-z]*.[a-zA-Z]*/,
-        supportEL: true,
-        run(ctx, match) {
-          const tokens = match.text.split('.');
-          const key = tokens[0].replaceAll('{#', '');
-          const prefix = tokens[1];
-          const candidate = this.grammar[key][prefix];
-          let options = [];
-          let from = ctx.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);
-                const command = `['${value}'][0]`;
-                return {
-                  type,
-                  command,
-                  apply: command,
-                  label: value,
-                };
-              });
-            }
-          } else {
-            from -= prefix.length;
-            const candidate = this.grammar[key];
-            if (candidate._type) {
-              options = this._buildMethods(candidate._type);
-            } else {
-              options = Object.keys(candidate)
-                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-                .map((command) => ({
-                  type: this._convertType(candidate[command]._type),
-                  command,
-                  apply: command,
-                  label: command,
-                }));
-            }
-          }
-          return { from, options };
-        },
-      },
-      {
-        expr: /{#[a-z]*.[a-zA-Z]*.[a-zA-Z]*/,
-        supportEL: true,
-        run(ctx, match) {
-          const tokens = match.text.split('.');
-          const key = tokens[0].replaceAll('{#', '');
-          const word = tokens[1];
-          const prefix = tokens[2];
-          const candidate = this.grammar[key][word];
-          let options = [];
-          let from = ctx.pos;
-          if (candidate) {
-            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);
-                  return {
-                    type,
-                    command: `['${label}'][0]`,
-                    apply(view, completion, _from, to) {
-                      const from = _from - prefix.length - 1;
-                      view.dispatch({
-                        changes: { from, to, insert: completion.command },
-                        selection: { anchor: from + completion.command.length },
-                        userEvent: 'input.complete',
-                        annotations: pickedCompletion.of(view),
-                      });
-                    },
-                    label,
-                  };
-                });
-            } else {
-              if (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),
-                      command,
-                      apply: command,
-                      label: command,
-                    };
-                  });
-              }
-            }
-          }
-          return { from, options };
-        },
-      },
-      {
-        run(ctx) {
-          const autocompleteLanguage = ctx.state.languageDataAt('autocomplete', ctx.pos);
-          if (autocompleteLanguage.length > 0) {
-            return autocompleteLanguage[0](ctx);
+  get defaultCompletionHandler() {
+    return {
+      handler: {
+        run(completionContext) {
+          const language = completionContext.state.languageDataAt('autocomplete', completionContext.pos);
+          if (language.length > 0) {
+            return language[0](completionContext);
           }
-          return { from: ctx.pos, options: [] };
+          return { from: completionContext.pos, options: [] };
         },
       },
-    ];
+      match: true,
+    };
   }
 
-  getExtensions() {
+  _getExtensions() {
     return [
       basicSetup,
       languageCompartment.of(json()),
@@ -348,27 +165,12 @@ export class GvCode extends InputElement(LitElement) {
         activateOnTyping: true,
         override: [this._autocomplete.bind(this)],
       }),
-      Prec.high(this.insertELKeymap()),
+      ...this.getExtensions(),
     ];
   }
 
-  insertELKeymap() {
-    return keymap.of([
-      {
-        key: 'Ctrl-Shift-e',
-        mac: 'Cmd-Shift-e',
-        run(view) {
-          view.dispatch(
-            view.state.changeByRange((range) => ({
-              changes: [{ from: range.from, to: range.to, insert: '{#}' }],
-              range: EditorSelection.range(range.from + 2, range.to + 2),
-            })),
-          );
-          startCompletion(view);
-          return true;
-        },
-      },
-    ]);
+  getExtensions() {
+    return [];
   }
 
   firstUpdated() {
@@ -376,7 +178,7 @@ export class GvCode extends InputElement(LitElement) {
     const parent = this.shadowRoot.querySelector(`[id=${this._id}]`);
     this._editorState = EditorState.create({
       doc: this.value,
-      extensions: this.getExtensions(),
+      extensions: this._getExtensions(),
     });
     this._editorView = new EditorView({
       root: this.shadowRoot,
@@ -388,7 +190,7 @@ export class GvCode extends InputElement(LitElement) {
     if (this.clipboard) {
       import('clipboard-copy').then((mod) => {
         const copy = mod.default;
-        this.shadowRoot.querySelector('gv-button').addEventListener('gv-button:click', () => {
+        this.shadowRoot.querySelector('.btn-clipboard').addEventListener('gv-button:click', () => {
           copy(this.value);
           this._copied = true;
           this._clipboardIcon = shapeCopied;
@@ -405,38 +207,62 @@ export class GvCode extends InputElement(LitElement) {
 
   async updated(properties) {
     if (properties.has('placeholder')) {
-      this._editorView.dispatch({
-        effects: placeholderCompartment.reconfigure(placeholder(this.placeholder)),
-      });
+      this._reflectPlaceholder();
     }
     if (properties.has('value')) {
-      const transaction = this._editorState.update({ changes: { from: 0, to: this._editorState.doc.length, insert: this.value } });
-      this._editorState = transaction.state;
+      this._reflectValue();
     }
     if (properties.has('readonly')) {
-      this._editorView.dispatch({
-        effects: readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly)),
-      });
+      this._reflectReadonly();
     }
-
     if (properties.has('options') && this.options) {
-      if (this.options.mode) {
-        const language = languages.find((language) => {
-          return language.name.toUpperCase() === this.options.mode.toUpperCase() || language.alias.includes(this.options.mode);
-        });
-        if (language != null) {
-          if (language.support == null) {
-            await language.load();
-          }
-          this._editorView.dispatch({
-            effects: languageCompartment.reconfigure(language.support.extension),
-          });
-        } else {
-          console.warn(
-            `Cannot find language ${this.options.mode}, please use language supported by CodeMirror 6`,
-            languages.map((l) => l.name),
-          );
+      await this._reflectOptions();
+    }
+  }
+
+  _reflectPlaceholder() {
+    this._editorView.dispatch({
+      effects: placeholderCompartment.reconfigure(placeholder(this.placeholder)),
+    });
+  }
+
+  _reflectValue() {
+    const transaction = this._editorState.update({
+      changes: {
+        from: 0,
+        to: this._editorState.doc.length,
+        insert: this.value,
+      },
+    });
+    this._editorState = transaction.state;
+  }
+
+  _reflectReadonly() {
+    this._editorView.dispatch({
+      effects: readonlyCompartment.reconfigure(EditorView.editable.of(!this.readonly)),
+    });
+  }
+
+  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),
+        });
+      } else {
+        console.warn(
+          `Cannot find language ${this.options.mode}, please use language supported by CodeMirror 6`,
+          languages.map((l) => l.name),
+        );
       }
     }
   }
@@ -458,6 +284,14 @@ export class GvCode extends InputElement(LitElement) {
           position: relative;
         }
 
+        .btn-clipboard {
+          position: absolute;
+          right: 0;
+          top: 0;
+          z-index: 10;
+        }
+
+        /**  Override Codemirror style */
         .input .cm-gutters {
           display: none;
         }
@@ -477,13 +311,6 @@ export class GvCode extends InputElement(LitElement) {
         .ͼ1.cm-editor.cm-focused {
           outline: none;
         }
-
-        gv-button {
-          position: absolute;
-          right: 0;
-          top: 0;
-          z-index: 10;
-        }
       `,
     ];
   }

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

@@ -15,16 +15,259 @@
  */
 import { GvCode } from '../molecules/gv-code';
 import { dispatchCustomEvent } from '../lib/events';
+import { pickedCompletion, startCompletion } from '@codemirror/autocomplete';
+import { keymap } from '@codemirror/view';
+import { EditorSelection, Prec } from '@codemirror/state';
+import { get } from 'object-path';
 
 /**
  * Expression Language component
  *
+ * @fires gv-expression-language:input - input events with the `value` on `detail`
+ * @fires gv-expression-language:ready - event dispatch when component is ready
+ * @fires gv-expression-language:clipboard-copy - event dispatch when component the `value` has been copied to clipboard
+ *
+ * @attr {String} label - code language
+ * @attr {String} value - code content to be highlighted
+ * @attr {options} Object - options based on codemirror
+ * @attr {String} placeholder - an example value to display in the input when empty
+ * @attr {Number} rows - number of rows of the text element
+ * @attr {Boolean} large - for a large input (only if the field has one row)
+ * @attr {Boolean} medium - for a medium input (only if the field has one row) (Default)
+ * @attr {Boolean} small - for a small input (only if the field has one row)
+ * @attr {Object} grammar - The grammar for Expression Language support
+ *
+ * @attr {Boolean} [clipboard=false]- true if field has clipboard button
+ * @attr {Boolean} [autofocus=false] - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
  */
 export class GvExpressionLanguage extends GvCode {
+  static get properties() {
+    return {
+      ...super.properties,
+      grammar: { type: Object },
+    };
+  }
+
   firstUpdated() {
     super.firstUpdated();
     dispatchCustomEvent(this, 'ready');
   }
+
+  getExtensions() {
+    return [Prec.high(this.insertELKeymap())];
+  }
+
+  insertELKeymap() {
+    return keymap.of([
+      {
+        key: 'Ctrl-Shift-e',
+        mac: 'Cmd-Shift-e',
+        run(view) {
+          view.dispatch(
+            view.state.changeByRange((range) => ({
+              changes: [{ from: range.from, to: range.to, insert: '{#}' }],
+              range: EditorSelection.range(range.from + 2, range.to + 2),
+            })),
+          );
+          startCompletion(view);
+          return true;
+        },
+      },
+    ]);
+  }
+
+  buildMethods(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}`);
+      const label = `${name}(${displayParams.join(', ')})`;
+      const detail = `return ${returnType}`;
+      return {
+        type: 'method',
+        command,
+        apply: (view, completion, from, to) => {
+          const anchor = from + name.length + 1;
+          view.dispatch({
+            changes: { from, to, insert: completion.command },
+            selection: { anchor },
+            userEvent: 'input.complete',
+            annotations: pickedCompletion.of(view),
+          });
+        },
+        label,
+        detail,
+      };
+    });
+  }
+
+  findBestAutocompleteHandler(completionContext) {
+    return this.expressionLanguageCompletionHandlers
+      .filter((handler) => (this.grammar != null && handler.supportEL === true) || handler.supportEL !== true)
+      .map((handler) => {
+        const match = handler.expr ? completionContext.matchBefore(handler.expr) : true;
+        return { handler, match };
+      })
+      .find(({ match, expr }) => match);
+  }
+
+  getModelType(typeId) {
+    if (this.grammar != null) {
+      return get(this.grammar, `_types.${typeId}`);
+    }
+    return null;
+  }
+
+  isMap(typeId) {
+    return ['Map', 'HttpHeaders', 'MultiValueMap'].includes(typeId);
+  }
+
+  getEnum(typeId) {
+    if (this.grammar != null) {
+      return get(this.grammar, `_enums.${typeId}`);
+    }
+    return [''];
+  }
+
+  convertType(type) {
+    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';
+      } else if (lowerType === 'int' || lowerType === 'long') {
+        return 'variable';
+      } else if (lowerType.includes('[]')) {
+        return 'enum';
+      }
+    }
+    return 'variable';
+  }
+
+  get expressionLanguageCompletionHandlers() {
+    return [
+      {
+        expr: /{#[a-z]*/,
+        supportEL: true,
+        run(completionContext, match) {
+          const prefix = match.text.replaceAll('{#', '');
+          const from = completionContext.pos - prefix.length;
+          const options = Object.keys(this.grammar)
+            .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,
+                label: command,
+              };
+            });
+          return { from, options };
+        },
+      },
+      {
+        expr: /{#[a-z]*.[a-zA-Z]*/,
+        supportEL: true,
+        run(completionContext, match) {
+          const tokens = match.text.split('.');
+          const key = tokens[0].replaceAll('{#', '');
+          const prefix = tokens[1];
+          const 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);
+                const command = `['${value}'][0]`;
+                return {
+                  type,
+                  command,
+                  apply: command,
+                  label: value,
+                };
+              });
+            }
+          } else {
+            from -= prefix.length;
+            const candidate = this.grammar[key];
+            if (candidate._type) {
+              options = this.buildMethods(candidate._type);
+            } else {
+              options = Object.keys(candidate)
+                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
+                .map((command) => ({
+                  type: this.convertType(candidate[command]._type),
+                  command,
+                  apply: command,
+                  label: command,
+                }));
+            }
+          }
+          return { from, options };
+        },
+      },
+      {
+        expr: /{#[a-z]*.[a-zA-Z]*.[a-zA-Z]*/,
+        supportEL: true,
+        run(completionContext, match) {
+          const tokens = match.text.split('.');
+          const key = tokens[0].replaceAll('{#', '');
+          const word = tokens[1];
+          const prefix = tokens[2];
+          const candidate = this.grammar[key][word];
+          let options = [];
+          let from = completionContext.pos;
+          if (candidate) {
+            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);
+                  return {
+                    type,
+                    command: `['${label}'][0]`,
+                    apply(view, completion, _from, to) {
+                      const from = _from - prefix.length - 1;
+                      view.dispatch({
+                        changes: { from, to, insert: completion.command },
+                        selection: { anchor: from + completion.command.length },
+                        userEvent: 'input.complete',
+                        annotations: pickedCompletion.of(view),
+                      });
+                    },
+                    label,
+                  };
+                });
+            } else {
+              if (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),
+                      command,
+                      apply: command,
+                      label: command,
+                    };
+                  });
+              }
+            }
+          }
+          return { from, options };
+        },
+      },
+      this.defaultCompletionHandler,
+    ];
+  }
 }
 
 window.customElements.define('gv-expression-language', GvExpressionLanguage);

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

@@ -427,10 +427,6 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
           search.focus();
         }
       }
-      if (this.isPressed(KEYS.Esc)) {
-        this._closeFlowStepForm();
-        this._onCloseDocumentation();
-      }
     }
   }
 
@@ -1114,7 +1110,7 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
                   outlined
                   small
                   @gv-button:click="${this._onCloseFlowStepForm}"
-                  title="Close (esc)"
+                  title="Close"
                 ></gv-button>
                 <gv-button
                   slot="header-left"