Feature: Allow to edit notes

frontend/editor.js

@@ -0,0 +1,99 @@
+
+import { EditorView, basicSetup } from "codemirror"
+import { Compartment, Text } from "@codemirror/state"
+import { markdown } from "@codemirror/lang-markdown"
+import { marked } from "marked"
+
+import { RemoveDialog } from "./removedialog.js"
+import { NotImplementedDialog } from "./notimplementeddialog.js"
+
+class Editor {
+
+    #title
+    #tags
+    #active_note
+    #editor
+    #remove_dialog
+
+    constructor() {
+        this.#active_note = null;
+        this.#title = document.querySelector("#editor-title");
+        this.#tags = document.querySelector("#editor-tags");
+
+        document.querySelector("#editor-save").addEventListener("click", () => {
+            this.#save();
+        });
+
+        this.#remove_dialog = new RemoveDialog(document.querySelector("#remove-dialog"));
+        document.querySelector("#editor-remove").addEventListener("click", () => { 
+            this.#remove_dialog.show_modal(this.#active_note); 
+        });
+
+        const notImplementedDialog = new NotImplementedDialog();
+        document.querySelector("#editor-screenshot").addEventListener("click", () => {
+            notImplementedDialog.showModal();
+        });
+        document.querySelector("#editor-open-folder").addEventListener("click", () => {
+            notImplementedDialog.showModal();
+        });
+
+
+        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) {
+        this.#save();
+        this.#active_note = note;
+        this.#title.value = note.name;
+        this.#tags.value = note.tags.join(" ");
+
+        this.#set_content(await note.get_content());
+    }
+
+    #save() {
+        if (this.#active_note) {
+            this.#active_note.save(
+                this.#title.value,
+                this.#editor.state.doc.toString(),
+                this.#tags.value.split(" "));
+        }
+    }
+
+    #set_content(content) {
+        this.#editor.dispatch({changes: [{
+            from: 0,
+            to: this.#editor.state.doc.length,
+            insert: content
+        }]});
+    }
+
+    remove() {
+        this.#title.value = "";
+        this.#tags.value = "";
+        this.#set_content("");
+        this.#active_note = null;
+    }
+}
+
+export { Editor }

frontend/fakenoteprovider.js

@@ -25,7 +25,9 @@ class FakeNoteProvider extends NoteProvider {
 
     #get_note(name) {
         const note = this.#notes.get(name);
-        if (!note) { throw new Error(`unknown note \"${name}\"`); }
+        if (!note) { 
+            throw new Error(`unknown note \"${name}\"`); 
+        }
         return note;
     }
 

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,26 +1,72 @@
 class Note {
     #name;
+    #tags;
+    #provider;
+    #editor;
     #list_item;
+    #notelist
 
-    constructor(name, notelist) {
+    constructor(name, tags, provider, notelist, editor) {
         this.#name = name;
-        this.#create_listentry(notelist);
+        this.#tags = tags;
+        this.#provider = provider;
+        this.#editor = editor;
+        this.#notelist = notelist;
+        this.#create_listentry();
     }
 
 
     get name() {
         return this.#name;
     }
 
-    #create_listentry(notelist) {
+    get tags() {
+        return this.#tags;
+    }
+
+    async get_content() {
+        return await this.#provider.read(this.#name);
+    }
+
+    #create_listentry() {
         this.#list_item = document.createElement("li");
-        notelist.element.appendChild(this.#list_item);
+        this.#notelist.element.appendChild(this.#list_item);
 
         this.#list_item.textContent = this.#name;
         this.#list_item.addEventListener('click', async () => {
-            console.log("ToDo: activate");
+            this.#notelist.activate(this);
         }, false);
     }
+
+    activate() {
+        this.#list_item.classList.add("active");
+        this.#editor.set_note(this);
+
+    }
+
+    async deactivate() {
+        this.#list_item.classList.remove("active");
+    }
+
+    async save(name, content, tags) {
+        if (name != this.name) {
+            await this.#provider.rename(this.#name, name);
+            this.#list_item.textContent = name;
+            this.#notelist.rename(this.#name, name);
+            this.#name = name;
+        }
+        this.#provider.write(this.#name, content);
+
+        this.#tags = tags;
+        this.#provider.write_tags(this.#name, tags);
+    }
+
+    async remove() {
+        await this.#provider.remove(this.#name);
+        this.#list_item.remove();
+        this.#editor.remove();
+        this.#notelist.remove(this);
+    }
 }
 
 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();
     }
@@ -23,19 +27,48 @@ class NoteList {
         }
     }
 
-    async #add(name) {
-        const text = await this.#provider.read(name);
+    async #add(name, activate) {
         const tags = await this.#provider.read_tags(name);
-        const note = new Note(name, this);
+        const note = new Note(name, tags, this.#provider, this, this.#editor);
+        this.#notes.set(name, note);
+        if ((!this.#active_note) || (activate)) {
+            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);
+        this.#add(name, true);
+    }
+
+    rename(old_name, new_name) {
+        if (this.#notes.has(old_name)) {
+            const note = this.#notes.get(old_name);
+            this.#notes.delete(old_name);
+            this.#notes.set(new_name, note);
+        }
+    }
+
+    remove(note) {
+        this.#notes.delete(note.name);
+        if (this.#active_note == note) {
+            this.#active_note = null;
+            if (this.#notes.size > 0) {
+                this.activate(this.#notes.values().next().value);
+            }
+        }
     }
 }
 

frontend/notimplementeddialog.js

@@ -0,0 +1,17 @@
+class NotImplementedDialog {
+
+    #dialog
+
+    constructor() {
+        this.#dialog = document.querySelector("#not-implemented-dialog");
+        this.#dialog.querySelector("[data-button=ok]").addEventListener("click", () => {
+            this.#dialog.close();
+        });
+    }
+
+    showModal() {
+        this.#dialog.showModal();
+    }
+}
+
+export { NotImplementedDialog }

frontend/removedialog.js

@@ -0,0 +1,35 @@
+
+class RemoveDialog {
+
+    #dialog
+    #text
+    #note
+
+    constructor(dialog) {
+        this.#dialog = dialog;
+        this.#text = dialog.querySelector("[data-text]");
+        this.#note = null;
+
+        dialog.querySelector("[data-button=yes]").addEventListener("click", async () => {
+            if (this.#note) {
+                this.#note.remove();
+            }
+            this.#dialog.close()
+        })
+
+        dialog.querySelector("[data-button=no]").addEventListener("click", () => {
+            this.#dialog.close()
+        })
+    }
+
+    show_modal(note) {
+        if (note) {
+            this.#note = note;
+            this.#text.textContent = `Do you really want to remove note \"${note.name}\"?`;
+            this.#dialog.showModal();
+            this.#dialog.querySelector("[data-button=no]").focus();    
+        }
+    }
+}
+
+export { RemoveDialog }

frontend/style.css

@@ -60,7 +60,7 @@ body {
 }
 
 
-.controls {
+#sidebar .controls {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -141,4 +141,10 @@ body {
 
 .toolbar .lni {
   line-height: inherit;
+}
+
+dialog .controls {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
 }

frontend/titlebar.js

@@ -18,7 +18,6 @@ const init_titlebar = function() {
 
     const nav_main = document.querySelectorAll(".nav-main");
     nav_main.forEach((item) => {
-        console.log("click");
         item.addEventListener('click', () => {
             document.querySelector("#main").classList.remove("hidden");
             document.querySelector("#settings").classList.add("hidden");