@aquera/nile-elements 0.0.122 → 0.0.124

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.122",
+  "version": "0.0.124",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-code-editor/nile-code-editor.ts

@@ -67,6 +67,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: true }) lineNumbers: boolean = false;
 
+  @property({ type: Boolean, reflect: true , attribute: true }) lineNumbersMultiline: boolean = true;
+
   @property({ type: Boolean, reflect: true , attribute: true }) hasScroller: boolean = true;
 
   @property({ type: Boolean, reflect: true , attribute: true }) expandable: boolean = true;
@@ -76,6 +78,7 @@ export class NileCodeEditor extends NileElement {
   @property({ type: Boolean, reflect: true , attribute: true}) debounce: boolean = false;
 
   public view: EditorView;
+  public viewState:EditorState;
   private timeOut: any = null;
 
   // Compartments for initialiazing and switching extensions
@@ -94,6 +97,7 @@ export class NileCodeEditor extends NileElement {
 
   connectedCallback(): void {
     super.connectedCallback();
+    this.createState()
     this.emit('nile-init',undefined,false);
   }
 
@@ -134,7 +138,7 @@ export class NileCodeEditor extends NileElement {
         ]
       })
     }
-    if (changedProperties.has('lineNumbers')) {
+    if (changedProperties.has('lineNumbers') || changedProperties.has('lineNumbersMultiline')) {
       this.view.dispatch({ 
         effects: [
           this.lineNumbersComp.reconfigure(this.getLineNumbersExension()),
@@ -189,6 +193,15 @@ export class NileCodeEditor extends NileElement {
 
   createNewView(emitEvent=true){
     if(this.view) this.view.destroy();
+    this.view = new EditorView({
+      state: this.viewState,
+      parent: this.codeEditor
+    });
+
+    if(emitEvent) this.emit('nile-after-update',{ createNewView: this.createNewView, codeMirrorInstance: this.view,  }, false );
+  }
+
+  createState(){
     const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());
     const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
     const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())
@@ -196,11 +209,11 @@ export class NileCodeEditor extends NileElement {
       autocomplete: scopeCompletionSource(this.customAutoCompletions),
     }));
     const language = this.getLanguageExtension()
-    let startState = EditorState.create({
+    this.viewState = EditorState.create({
       doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,
       extensions: [
         basicSetup({
-          lineNumbers: this.lineNumbers || this.multiline,
+          lineNumbers:  (!this.multiline && this.lineNumbers) || (this.multiline && this.lineNumbersMultiline),
           highlightActiveLine: false,
           foldGutter: false,
         }),
@@ -222,13 +235,7 @@ export class NileCodeEditor extends NileElement {
         }),
       ],
     });
-
-    this.view = new EditorView({
-      state: startState,
-      parent: this.codeEditor
-    });
-
-    if(emitEvent) this.emit('nile-after-update',{ createNewView: this.createNewView, codeMirrorInstance: this.view,  }, false );
+    return this.viewState
   }
 
   singleLineMultiLineToggle() {
@@ -264,7 +271,8 @@ export class NileCodeEditor extends NileElement {
   
   //EXTENSION CONFIGURATIONS
   getLineNumbersExension() {
-    return  this.lineNumbers || this.multiline ? lineNumbers() : [];
+
+    return  (!this.multiline && this.lineNumbers) || (this.multiline && this.lineNumbersMultiline) ? lineNumbers() : [];
   }
   
   getLanguageExtension(){
@@ -296,7 +304,6 @@ export class NileCodeEditor extends NileElement {
 
   emitNileExpand() {
     this.emit('nile-expand', { expand: true },false);
-    this.createNewView()
   }
 
   /* #endregion */

package/vscode-html-custom-data.json

@@ -726,7 +726,7 @@
     },
     {
       "name": "nile-code-editor",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `customAutoCompletions` {`object`} - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `customAutoCompletions` {`object`} - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `view` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `customAutoCompletions` {`object`} - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `customAutoCompletions` {`object`} - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -775,6 +775,11 @@
           "description": "`lineNumbers` {`boolean`} - \n\nProperty: lineNumbers\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "lineNumbersMultiline",
+          "description": "`lineNumbersMultiline` {`boolean`} - \n\nProperty: lineNumbersMultiline\n\nDefault: true",
+          "valueSet": "v"
+        },
         {
           "name": "hasScroller",
           "description": "`hasScroller` {`boolean`} - \n\nProperty: hasScroller\n\nDefault: true",