first setup of new arcs editor

+import ARCS from 'arcs';
+
+import {EditorView, basicSetup} from "codemirror";
+import {json} from "@codemirror/lang-json";
+
+
+let ARCSEditor = {};
+let application = new ARCS.Application();
+let $ = (id) => (id)?document.getElementById(id):document;
+
+let editor = new EditorView({
+    extensions: [basicSetup, json()],
+    parent: $('component-form')
+});
+
+console.log(editor);
+
+
+$("import-library-button").addEventListener("click", 
+    () =>ARCSEditor.loadLibrary($("library-file"))
+);
+
+$("modal-component").addEventListener("show.bs.modal", 
+    () => {
+        ARCSEditor.populateFactories($("component-type"));
+        editor.dispatch({ changes: {
+            from: 0,
+            to: editor.state.doc.length,
+            insert: ''
+        }});
+    }
+);
+
+$("create-component-button").addEventListener("click",
+    () => {
+        ARCSEditor.addComponent(
+            $("component-type").value,
+            $("component-name").value,
+
+            editor.state.doc.toString()
+
+            //$("component-value").value
+        );
+    }
+);
+
+
+ARCSEditor.loadLibrary = function (element,cb) {
+    let libName;
+    if (typeof element === "string") {
+        application.loadLibrary(element,cb);
+        libName = element;
+    } else {
+        if (element.files === undefined) return;      
+        if (element.files.length === 0) return;            
+        application.getContext().loadLibrary({ 
+            url : URL.createObjectURL(element.files[0]), 
+            name: element.files[0].name 
+        },cb);
+        libName = element.files[0].name;
+    }
+    
+    let libraryList = $("library-list");
+    let li = $().createElement('li');
+    li.classList.add("list-group-item");
+    li.innerHTML = libName;
+    libraryList.appendChild(li);
+    
+    //ARCSEditor.Dialog.close();*/
+};
+
+
+
+ARCSEditor.populateFactories = function(elt) {
+    let clist = application.getContext().getFactoryList();
+    clist.sort();
+    var i, option;
+    elt.innerHTML = '';
+    for (i = 0; i < clist.length; i++) {
+        option = $().createElement("option");
+        option.text = escape(clist[i]);
+        elt.add(option);
+    }
+};
+
+
+ARCSEditor.addComponent = function (type, name, value) {
+    let objectValue;
+    if (name == "") {
+        alert("Your component should have a name !");
+        return;            
+    }
+    
+    if (application.getContext().getComponent(name) !== undefined) {
+        alert('Your application already have a component named "'+name+'"!');
+        return;
+    }
+
+    // arcs application part
+    if (value !== undefined) {
+        if (value.trim() !== "") {
+            try {
+                objectValue = JSON.parse(value);
+            } catch (e) {
+                alert(value + " in add Component " + e.message);
+                return;
+            }
+        }
+    }
+    application.getContext().addComponent(name, type, objectValue);
+    
+    // editor part
+    /*var createComponentDeletor = function (cName) {
+        return function () {
+            var line = document.querySelector("tr[data-cmp='"+cName+"']");
+            line.parentNode.removeChild(line);
+            application.removeComponent(cName);
+        };
+    };
+
+    var createComponentEditor = function (name,type,value) {
+        return function () { ARCSEditor.componentDialog.exec(name,type,value); };        
+    };*/
+    
+    /*var setLineId = function(elt) { elt.dataset.cmp = name; };
+
+    var table = document.querySelector("tbody#componentlist");*/
+
+    let table = $("table-components");
+    let line = $().createElement("tr");
+    line.innerHTML = `<td>${name}</td><td>${type}</td><td>${value.replaceAll("\n","<br/>")}</td>`;
+    table.appendChild(line);
+
+    
+    /*var lineTemplate = new ARCSEditor.Template("#component-row");
+    table.appendChild(
+        lineTemplate.apply(
+            { selector: "#name", key: "innerHTML", value: name },
+            { selector: "#type", key: "innerHTML", value: type },
+            { selector: "#value", key: "innerHTML", value: value },
+            { selector: "#line", run: setLineId },
+            { selector: ".edit", key: "onclick", value: createComponentEditor(name,type,value) },
+            { selector: ".delete", key: "onclick", value: createComponentDeletor(name) }        
+        )
+    );*/
+};
\ No newline at end of file

+{
+  "name": "arcs.js-editor",
+  "version": "0.9.7",
+  "description": "Graphical editor for arcs.js",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "augmented",
+    "reality",
+    "visual",
+    "programming",
+    "no",
+    "code"
+  ],
+  "author": "Jean-Yves Didier",
+  "license": "ISC",
+  "dependencies": {
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/state": "^6.2.1",
+    "@codemirror/view": "^6.16.0",
+    "arcsjs": "^0.9.7",
+    "bootstrap": "^5.3.1",
+    "bootstrap-icons": "^1.10.5",
+    "codemirror": "^6.0.1",
+    "cytoscape": "^3.26.0",
+    "serve": "^14.2.0"
+  }
+}