allow to edit notes

frontend/editor.js

@@ -0,0 +1,66 @@
+
+import { EditorView, basicSetup } from "codemirror"
+import { Compartment, Text } from "@codemirror/state"
+import { markdown } from "@codemirror/lang-markdown"
+import { marked } from "marked"
+
+class Editor {
+
+    #title
+    #tags
+    #active_note
+    #editor
+
+    constructor() {
+        this.#active_note = null;
+        this.#title = document.querySelector("#editor-title");
+        this.#tags = document.querySelector("#editor-tags");
+
+        const language = new Compartment();
+        const editor_element = document.querySelector("#editor");
+        this.#editor = new EditorView({
+            extensions: [
+                basicSetup,
+                language.of(markdown())
+            ],
+            doc: "",
+            parent: editor_element
+        });
+
+        /*
+        editor.dom.addEventListener('input', async () => {
+        const text = editor.state.doc.toString();
+        const html = marked.parse(text, {
+            pedantic: false,
+            gfm: true
+        });
+        document.querySelector("#view").innerHTML = html;
+        });
+        */
+
+    }
+
+    async set_note(note) {
+        if (this.#active_note) {
+            this.#active_note.save(
+                this.#title.value,
+                this.#editor.state.doc.toString(),
+                this.#tags.value.split(" "));
+        }
+        this.#active_note = note;
+        this.#title.value = note.name;
+
+        this.#set_content(await note.get_content());
+    }
+
+    #set_content(content) {
+        this.#editor.dispatch({changes: [{
+            from: 0,
+            to: this.#editor.state.doc.length,
+            insert: content
+        }]});
+    }
+
+}
+
+export { Editor }

frontend/main.js

@@ -1,46 +1,26 @@
 
 import "lineicons/web-font/lineicons.css"
-import { EditorView, basicSetup } from "codemirror"
-import { Compartment, Text } from "@codemirror/state"
-import { markdown } from "@codemirror/lang-markdown"
-import { marked } from "marked"
 
 import { slider_attach } from "./slider.js"
 import { init_titlebar } from "./titlebar.js"
 import { init_settings } from "./settings.js"
 import { FakeNoteProvider } from "./fakenoteprovider.js"
 import { NoteList } from "./notelist.js"
+import { Editor } from "./editor.js"
 
 init_titlebar();
 init_settings();
 slider_attach(document.querySelector("#slider"));
 
+const editor = new Editor();
+
 const noteProvider = new FakeNoteProvider();
 const notelist_element = document.querySelector("#notelist");
-const notelist = new NoteList(noteProvider, notelist_element);
+const notelist = new NoteList(noteProvider, notelist_element, editor);
 document.querySelector("#add-note").addEventListener("click", async () => {
   notelist.add_new();
 })
 
-const language = new Compartment();
-const editor_element = document.querySelector("#editor");
-const editor = new EditorView({
-    extensions: [
-        basicSetup,
-        language.of(markdown())
-    ],
-    doc: "",
-    parent: editor_element
-});
-
-/*
-editor.dom.addEventListener('input', async () => {
-  const text = editor.state.doc.toString();
-  const html = marked.parse(text, {
-    pedantic: false,
-    gfm: true
-  });
-  document.querySelector("#view").innerHTML = html;
-});
-*/
+
+
 

frontend/note.js

@@ -1,9 +1,13 @@
 class Note {
     #name;
+    #provider;
+    #editor;
     #list_item;
 
-    constructor(name, notelist) {
+    constructor(name, provider, notelist, editor) {
         this.#name = name;
+        this.#provider = provider;
+        this.#editor = editor;
         this.#create_listentry(notelist);
     }
 
@@ -12,15 +16,34 @@ class Note {
         return this.#name;
     }
 
+    async get_content() {
+        return await this.#provider.read(this.#name);
+    }
+
     #create_listentry(notelist) {
         this.#list_item = document.createElement("li");
         notelist.element.appendChild(this.#list_item);
 
         this.#list_item.textContent = this.#name;
         this.#list_item.addEventListener('click', async () => {
-            console.log("ToDo: activate");
+            notelist.activate(this);
         }, false);
     }
+
+    activate() {
+        this.#list_item.classList.add("active");
+        this.#editor.set_note(this);
+
+    }
+
+    async deactivate() {
+        this.save();
+        this.#list_item.classList.remove("active");
+    }
+
+    async save(name, content, tags) {
+        this.#provider.write(this.#name, content);
+    }
 }
 
 export { Note }

frontend/notelist.js

@@ -4,11 +4,15 @@ class NoteList {
 
     #provider
     #element;
+    #editor;
     #notes;
+    #active_note;
 
-    constructor(provider, element) {
+    constructor(provider, element, editor) {
         this.#provider = provider;
         this.#element = element;
+        this.#editor = editor;
+        this.#active_note = null;
 
         this.#update();
     }
@@ -26,13 +30,25 @@ class NoteList {
     async #add(name) {
         const text = await this.#provider.read(name);
         const tags = await this.#provider.read_tags(name);
-        const note = new Note(name, this);
+        const note = new Note(name, this.#provider, this, this.#editor);
+        this.#notes[name] = note;
+        if (!this.#active_note) {
+            this.activate(note);
+        }
     }
 
     get element() {
         return this.#element;
     }
 
+    activate(note) {
+        if (this.#active_note) {
+            this.#active_note.deactivate();            
+        }
+        this.#active_note = note;
+        this.#active_note.activate();
+    }
+
     async add_new() {
         const name = await this.#provider.create();
         this.#add(name);

index.html

@@ -43,16 +43,16 @@
     <div id="content">
       <div class="toolbar">
         <label class="lni lni-pencil"></label>
-        <input type="text" />
-        <div class="button"><i class="lni lni-camera"></i></div>
-        <div class="button"><i class="lni lni-folder"></i></div>
-        <div class="button"><i class="lni lni-save"></i></div>
+        <input type="text" id="editor-title"/>
+        <div class="button" id="editor-snapshot"><i class="lni lni-camera"></i></div>
+        <div class="button" id="editor-open-folder"><i class="lni lni-folder"></i></div>
+        <div class="button" id="editor-save"><i class="lni lni-save"></i></div>
         <div class="spacer"></div>
-        <div class="button"><i class="lni lni-trash-can"></i></div>
+        <div class="button" id="editor-remove"><i class="lni lni-trash-can"></i></div>
       </div>
       <div class="toolbar">
         <label class="lni lni-tag"></label>
-        <input type="text" />
+        <input type="text" id="editor-tags"/>
       </div>
       <hr/>
       <div id="editor"></div>