@aquera/nile-elements 0.0.125 → 0.0.127

package/package.json

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

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

@@ -1,6 +1,5 @@
 import {
   KeyBinding,
-  lineNumbers,
   highlightActiveLineGutter,
   highlightSpecialChars,
   drawSelection,
@@ -68,7 +67,6 @@ export const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
   isValidSetup(options.foldKeymap) && keymaps.push(...foldKeymap);
   isValidSetup(options.lintKeymap) && keymaps.push(...lintKeymap);
   const extensions: Extension[] = [];
-  isValidSetup(options.lineNumbers) && extensions.push(lineNumbers());
   isValidSetup(options.highlightActiveLineGutter) && extensions.push(highlightActiveLineGutter());
   isValidSetup(options.highlightSpecialChars) && extensions.push(highlightSpecialChars());
   isValidSetup(options.history) && extensions.push(history());

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

@@ -31,7 +31,7 @@ import {
 } from '@codemirror/lang-javascript';
 import { sql } from '@codemirror/lang-sql';
 import { json } from '@codemirror/lang-json';
-import { autocompletion } from '@codemirror/autocomplete';
+import { autocompletion,CompletionContext,CompletionResult } from '@codemirror/autocomplete';
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
@@ -53,7 +53,7 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: String, reflect: true , attribute: true }) value = '';
 
-  @property({ type: Object, reflect: true , attribute: true }) customAutoCompletions: object = {};
+  @property({ type: Object, reflect: true , attribute: true }) customAutoCompletions: object | any = {};
 
   @property({ type: String, reflect: true , attribute: true}) language: 'javascript' | 'sql' | 'json' = 'javascript';
 
@@ -65,6 +65,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: true }) multiline: boolean = false;
 
+  @property({ type: Boolean, reflect: true , attribute: true }) suggestionBracketSupport: boolean = false;
+
   @property({ type: Boolean, reflect: true , attribute: true }) lineNumbers: boolean = false;
 
   @property({ type: Boolean, reflect: true , attribute: true }) lineNumbersMultiline: boolean = true;
@@ -145,11 +147,11 @@ export class NileCodeEditor extends NileElement {
         ]
       })
     }
-    if(changedProperties.has('customAutoCompletions')){
+    if(changedProperties.has('customAutoCompletions') || changedProperties.has('suggestionBracketSupport') ){
       this.view.dispatch({ 
         effects: [
           this.customCompletionComp.reconfigure(javascriptLanguage.data.of({
-            autocomplete: scopeCompletionSource(this.customAutoCompletions),
+            autocomplete: this.suggestionBracketSupport?this.customAutocomplete: scopeCompletionSource(this.customAutoCompletions),
           }))
         ]
       })
@@ -206,14 +208,13 @@ export class NileCodeEditor extends NileElement {
     const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
     const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())
     const customAutoCompletions = this.customCompletionComp.of(javascriptLanguage.data.of({
-      autocomplete: scopeCompletionSource(this.customAutoCompletions),
+      autocomplete: this.suggestionBracketSupport?this.customAutocomplete: scopeCompletionSource(this.customAutoCompletions),
     }));
     const language = this.getLanguageExtension()
     this.viewState = EditorState.create({
       doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,
       extensions: [
         basicSetup({
-          lineNumbers:  (!this.multiline && this.lineNumbers) || (this.multiline && this.lineNumbersMultiline),
           highlightActiveLine: false,
           foldGutter: false,
         }),
@@ -271,7 +272,6 @@ export class NileCodeEditor extends NileElement {
   
   //EXTENSION CONFIGURATIONS
   getLineNumbersExension() {
-
     return  (!this.multiline && this.lineNumbers) || (this.multiline && this.lineNumbersMultiline) ? lineNumbers() : [];
   }
   
@@ -287,7 +287,7 @@ export class NileCodeEditor extends NileElement {
   }
 
   getReadOnlyExtension() {
-    return EditorState.readOnly.of(this.readonly);
+    return this.readonly ? EditorState.readOnly.of(true) : [];
   }
 
   getSingleLineExtension() {
@@ -306,6 +306,101 @@ export class NileCodeEditor extends NileElement {
     this.emit('nile-expand', { expand: true },false);
   }
 
+  customAutocomplete = (context: CompletionContext): CompletionResult | null => {
+    // Getting the valid last line, last text from the code editor
+    let text = context.state.doc.sliceString(0, context.pos);
+    const [textBeforeCursor,textAfterSeperation]=this.splitStringAtLastSeparator(text.split('\n').at(-1)?.split(' ').at(-1)+'')
+
+    if (!this.isValidPath(textBeforeCursor)) return { from: context.pos, options: [] };
+    if(['.', '['].includes(textBeforeCursor[textBeforeCursor.length - 1])){
+      // Parse the path for dot or bracket notation
+      const path = this.parsePath(textBeforeCursor);
+      if (path) {
+        let resolved = this.resolveNestedProperties(this.customAutoCompletions, path);
+        if(textAfterSeperation){
+          const obj:any={}
+          Object.keys(resolved).forEach((key)=>{
+            if(key.startsWith(textAfterSeperation)){
+              obj[key]=resolved[key]
+            }
+          })
+          resolved=obj
+        }
+        // If resolved is an object, provide its keys as suggestions
+        if (resolved && typeof resolved === 'object') {
+          return {
+            from: context.pos,
+            options: Object.keys(resolved).map((key) => ({
+              label: key,
+              type: 'property',
+              info: `Key of ${path[path.length - 1]}`,
+              apply: key.slice(textAfterSeperation.length),
+              boost: 999
+            })),
+          };
+        }
+      }
+    }
+    
+    // Match for top-level object suggestions, e.g., "a"
+    const baseMatch: any = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
+    if (baseMatch) {
+      const optionsList=Object.keys(this.customAutoCompletions).filter(key=>key.startsWith(textBeforeCursor));
+      return {
+        from: context.pos - baseMatch[1].length,
+        options: optionsList.map((key) => ({
+          label: key,
+          type: 'property',
+          apply: key.slice(textBeforeCursor.length),
+          boost: 999
+        }))
+      }
+    }
+    // Default to an empty list if no match
+    return { from: context.pos, options: [] };
+  };
+
+  resolveNestedProperties = (obj:any, keys:any[]) => {
+    return keys.reduce((acc, key) => {
+      if (acc && typeof acc === 'object') {
+        return acc[key];
+      }
+      return null;
+    }, obj);
+  };
+
+  parsePath(text: string) {
+    const regex = /([a-zA-Z_$][\w$]*)(\[(?:[^\]]+)\]|\.[a-zA-Z_$][\w$]*)*/g;
+    const matches = [...text.matchAll(regex)];
+    if (matches.length > 0) {
+      const base = matches[0][1]; // The base object name
+      const keys = [base];
+      // Extract keys from dot or bracket notation
+      const pathMatches = text.match(/\[(.*?)\]|\.(\w+)/g) || [];
+      for (const match of pathMatches) {
+        if (match.startsWith('[')) {
+          keys.push(match.slice(1, -1).replace(/['"]/g, '')); // Remove brackets and quotes
+        } else if (match.startsWith('.')) {
+          keys.push(match.slice(1));
+        }
+      }
+      return keys;
+    }
+    return null;
+  };
+
+  isValidPath(path: string) {
+    // Regex to validate the format of the string
+    const regex = /^([a-zA-Z_$][\w$]*)(\.[a-zA-Z_$][\w$]*|\[\s*(['"]?[a-zA-Z0-9_$]*['"]?)\s*\])*([\.\[])?$/;
+    // Test the string against the regex
+    return regex.test(path);
+  }
+
+  splitStringAtLastSeparator(input:string) {
+    const lastSeparatorIndex = Math.max(input.lastIndexOf('.'), input.lastIndexOf('['));
+    if (lastSeparatorIndex === -1) return [input, ''];  
+    return [input.slice(0, lastSeparatorIndex + 1), input.slice(lastSeparatorIndex + 1).replace(/["'\[]/g, '')];
+  }
   /* #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  * `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`} - ",
+      "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` - \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  * `suggestionBracketSupport` {`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` - \n\n  * `language` {`\"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `suggestionBracketSupport` {`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  * `customAutocomplete` - \n\n  * `resolveNestedProperties` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -734,7 +734,7 @@
         },
         {
           "name": "customAutoCompletions",
-          "description": "`customAutoCompletions` {`object`} - \n\nProperty: customAutoCompletions\n\nDefault: [object Object]"
+          "description": "`customAutoCompletions` - \n\nProperty: customAutoCompletions\n\nDefault: [object Object]"
         },
         {
           "name": "language",
@@ -770,6 +770,11 @@
           "description": "`multiline` {`boolean`} - \n\nProperty: multiline\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "suggestionBracketSupport",
+          "description": "`suggestionBracketSupport` {`boolean`} - \n\nProperty: suggestionBracketSupport\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "lineNumbers",
           "description": "`lineNumbers` {`boolean`} - \n\nProperty: lineNumbers\n\nDefault: false",