Fix function list bug

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.21.13",
+  "version": "0.21.16",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/code_manager/model/CodeMirrorEditor.ts

@@ -1,7 +1,7 @@
 import { bindAll } from 'underscore';
 import { Model } from '../../common';
 import { EditorState, Extension, Compartment } from '@codemirror/state';
-import { EditorViewConfig, lineNumbers, lineNumberMarkers, gutterLineClass } from '@codemirror/view';
+import { EditorViewConfig, lineNumbers, lineNumberMarkers, gutterLineClass, ViewUpdate } from '@codemirror/view';
 import readOnlyRangesExtension from 'codemirror-readonly-ranges';
 import { EditorView, basicSetup } from 'codemirror';
 import { LanguageSupport, syntaxHighlighting } from '@codemirror/language';
@@ -75,7 +75,7 @@ export default class CodeMirrorEditor extends Model {
   }
 
   init(el: HTMLTextAreaElement) {
-    bindAll(this, 'onChange');
+    // bindAll(this, 'onChange');
     const languageState = this.getCodeLanguage(this.get('codeName'));
 
     let extensions: Extension[] = [];
@@ -86,25 +86,30 @@ export default class CodeMirrorEditor extends Model {
     languageState && extensions.push(languageState);
     extensions.push(this.readOnlyCompartment.of(EditorState.readOnly.of(this.readonly)));
     extensions.push(readOnlyRangesExtension(this.readOnlyRanges));
+    extensions.push(
+      EditorView.updateListener.of((v: ViewUpdate) => {
+        if (v.docChanged) {
+          console.log(this);
+          // Document changed
+          this.trigger('update', this);
+        }
+      })
+    );
     const state = EditorState.create({
       doc: el.value,
       extensions,
     });
+    this.on('update', () => console.log('change'));
 
     this.editor = this.editorFromTextArea(el, {
       state,
       ...this.attributes,
     });
     this.element = el;
-    this.editor.dom.addEventListener('change', this.onChange);
 
     return this;
   }
 
-  onChange() {
-    this.trigger('update', this);
-  }
-
   getEditor() {
     return this.editor!;
   }

src/common/traits/model/TraitList.ts

@@ -42,18 +42,13 @@ export default class TraitList<TModel extends Model = Model>
   setParentValue(name: string, value: any): void {
     let values = this.value;
     const index = values.findIndex(item => item.id == name);
-    console.log(value);
-    console.log(values);
     values[index] = { id: name, value };
-    console.log(values);
-    this.setValue(values);
+    this.value = values;
   }
 
   private initTrait(index: string, value?: any) {
     const { templates } = this;
     const traits = this.templates;
-    console.log('paklsjdf;lkj;laksdjf;lakjdsf;lakjsdf;laksjf;laksej;lsdk');
-    console.log(value);
     // console.log(this.traits)
     // const index = this.traits.length as any
     if (isArray(templates) && templates.length > 1) {

src/common/traits/view/TraitFunctionView.ts

@@ -75,9 +75,9 @@ export default class TraitFunctionView extends TraitInputView<Trait<string>> {
     const inputs = $el.find('[data-input]');
     const el = inputs[inputs.length - 1];
     const txtarea = document.createElement('textarea');
-    txtarea.value = `function(${variables?.join(', ') ?? ''}){ \n //TODO: implementing it \n}`;
+    txtarea.value = `(${variables?.join(', ') ?? ''}) => { \n \n}`;
     el.appendChild(txtarea);
-    const editor = new CodeMirrorEditor({
+    this.editor = new CodeMirrorEditor({
       el: txtarea,
       readOnly: false,
       lineNumbers: false,
@@ -97,8 +97,8 @@ export default class TraitFunctionView extends TraitInputView<Trait<string>> {
     //   readOnlyRanges: (state: EditorState) =>
     //   [{to: state.doc.line(1).to}, {from: state.doc.line(state.doc.lines).from}]
     // });
-    editor.init(txtarea);
-    editor.on('update', this.codeUpdated, this);
+    this.editor.init(txtarea);
+    this.editor.on('update', this.codeUpdated, this);
     // editor.setContent(`function(){ \n //TODO: implementing it \n}`)
     // editor.setElement(el);
     // if (!elInput) {