@aquera/nile-elements 0.0.42-1 → 0.0.42-2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.42-1",
+  "version": "0.0.42-2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -104,4 +104,4 @@
       "prettier --write"
     ]
   }
-}
+}

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

@@ -18,6 +18,7 @@ import { styles } from './nile-code-editor.css';
 import { EditorView } from 'codemirror';
 import { ViewUpdate } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
+import {lineNumbers} from '@codemirror/view';
 import {
   javascript,
   javascriptLanguage,
@@ -80,49 +81,76 @@ export class NileCodeEditor extends NileElement {
     return code.replace(/\s+/g, ' ').trim();
   }
   lineNumbersComp = new Compartment();
+  restrictSingleLineComp = new Compartment();
+  readOnlyComp = new Compartment();
+
 
   @watch(['value'], { waitUntilFirstUpdate: true })
-  handleValueChange() {}
+  handleValueChange() { }
 
-  updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-    if (changedProperties.has('value')) {
-      const customAutoCompletions = javascriptLanguage.data.of({
-        autocomplete: scopeCompletionSource(this.customAutoCompletions),
-      });
-      if (!this.view) {
-        let startState = EditorState.create({
-          doc: !this.multiline
-            ? this.convertToSingleLine(this.value)
-            : this.value,
-          extensions: [
-            basicSetup({
-              lineNumbers: !!this.multiline,
+  getLineNumbersExension() {
+    return this.multiline ? lineNumbers() : [];
+  }
+
+  getReadOnlyExtension() {
+    return EditorState.readOnly.of(this.readonly);
+  }
+
+  getSingleLineExtension(){
+     return !this.multiline ? EditorState.transactionFilter.of(tr =>
+      tr.newDoc.lines > 1 ? [] : tr
+    ) : [];
+  }
+
+  firstUpdated() {
+    const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());
+    const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
+    const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())
+    const customAutoCompletions = javascriptLanguage.data.of({
+      autocomplete: scopeCompletionSource(this.customAutoCompletions),
+    });
+    let startState = EditorState.create({
+      doc: !this.multiline
+        ? this.convertToSingleLine(this.value)
+        : this.value,
+      extensions: [
+          basicSetup({
+              lineNumbers: false,
               highlightActiveLine: false,
-              foldGutter: !!this.multiline,
-            }),
-            EditorState.readOnly.of(this.readonly),
-            customAutoCompletions,
-            autocompletion(),
-            javascript(),
-            this.setTheme(),
-            !this.multiline ? this.restrictSingleLine() : [],
-            EditorView.updateListener.of((v: ViewUpdate) => {
-              if (v.docChanged) {
-                this.emitValues(this.view.state.doc.toString());
-              }
+              foldGutter: false,
             }),
-          ],
-        });
-
-        this.view = new EditorView({
-          state: startState,
-          parent: this.codeEditor,
-        });
-      } else {
-        if (this.updateValue) {
-          // Editor has already been initialized, update its state
-          this.view.dispatch({
+        lineNumbersExtension,
+        readOnlyExtension,
+        restrictSingleLineExtension,
+        customAutoCompletions,
+        autocompletion(),
+        javascript(),
+        this.setTheme(),
+        EditorView.updateListener.of((v: ViewUpdate) => {
+          if (v.docChanged) {
+            this.emitValues(this.view.state.doc.toString());
+          }
+        }),
+           
+      ],
+    });
+
+    this.view = new EditorView({
+      state: startState,
+      parent: this.codeEditor,
+    });
+    this.addOpenListeners();
+  }
+  
+
+  addOpenListeners() {
+    this.view.contentDOM.addEventListener('blur', () => this.toggleFocusAndBlur('blur'));
+    this.view.contentDOM.addEventListener('focus', () => this.toggleFocusAndBlur('focus'));
+  }
+  
+
+  singleLineMultiLineToggle() {
+     this.view.dispatch({
             changes: {
               from: 0,
               to: this.view.state.doc.length,
@@ -131,11 +159,35 @@ export class NileCodeEditor extends NileElement {
                 : this.value,
             },
           });
+  }
+  
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has('value') && this.updateValue) {
+          // Editor has already been initialized, update its state
+          this.singleLineMultiLineToggle();
         }
-      }
+    if (changedProperties.has('multiline')) {
+      this.view.dispatch({
+        effects: [this.lineNumbersComp.reconfigure(this.getLineNumbersExension()),
+          this.restrictSingleLineComp.reconfigure(this.getSingleLineExtension())],
+      })
+      this.singleLineMultiLineToggle();
+    }
+    if (changedProperties.has('readonly')) {
+      this.view.dispatch({ effects: this.readOnlyComp.reconfigure(this.getReadOnlyExtension()) })      
     }
   }
 
+  toggleFocusAndBlur(action: 'blur' | 'focus') {
+    if(action === 'blur'){
+      this.emit('nile-blur', { onBlur : true });
+     }
+    if (action === 'focus') {
+      this.emit('nile-focus', { onFocus : true });
+    }
+ }
+
   setTheme() {
     return EditorView.theme(Theme);
   }