implement editor usage

- allow to change note name
- allow to edit and save tags
- allow to edit and save content
- add NotImplementedDialog for snapshot and open folder

frontend/editor.js

@@ -5,6 +5,7 @@ import { markdown } from "@codemirror/lang-markdown"
 import { marked } from "marked"
 
 import { RemoveDialog } from "./removedialog.js"
+import { NotImplementedDialog } from "./notimplementeddialog.js"
 
 class Editor {
 
@@ -19,11 +20,24 @@ class Editor {
         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({
@@ -49,16 +63,21 @@ class Editor {
     }
 
     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(" "));
         }
-        this.#active_note = note;
-        this.#title.value = note.name;
-
-        this.#set_content(await note.get_content());
     }
 
     #set_content(content) {

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/note.js

@@ -1,15 +1,17 @@
 class Note {
     #name;
+    #tags;
     #provider;
     #editor;
     #list_item;
     #notelist
 
-    constructor(name, provider, notelist, editor) {
+    constructor(name, tags, provider, notelist, editor) {
         this.#name = name;
+        this.#tags = tags;
         this.#provider = provider;
         this.#editor = editor;
-        this.#notelist = notelist
+        this.#notelist = notelist;
         this.#create_listentry();
     }
 
@@ -18,6 +20,10 @@ class Note {
         return this.#name;
     }
 
+    get tags() {
+        return this.#tags;
+    }
+
     async get_content() {
         return await this.#provider.read(this.#name);
     }
@@ -39,12 +45,20 @@ class Note {
     }
 
     async deactivate() {
-        this.save();
         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() {

frontend/notelist.js

@@ -28,9 +28,8 @@ class NoteList {
     }
 
     async #add(name, activate) {
-        const text = await this.#provider.read(name);
         const tags = await this.#provider.read_tags(name);
-        const note = new Note(name, this.#provider, this, this.#editor);
+        const note = new Note(name, tags, this.#provider, this, this.#editor);
         this.#notes.set(name, note);
         if ((!this.#active_note) || (activate)) {
             this.activate(note);
@@ -54,6 +53,14 @@ class NoteList {
         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) {

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 }

index.html

@@ -44,7 +44,7 @@
       <div class="toolbar">
         <label class="lni lni-pencil"></label>
         <input type="text" id="editor-title"/>
-        <div class="button" id="editor-snapshot"><i class="lni lni-camera"></i></div>
+        <div class="button" id="editor-screenshot"><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>
@@ -76,6 +76,13 @@ <h2>Color Settings</h2>
     </form>
   </dialog>
 
+  <dialog id="not-implemented-dialog">
+    <p>Not implemented yet.</p>
+    <form class="controls">
+      <input type="button" data-button="ok" value="OK"/>
+    </form>
+  </dialog>
+
   <script type="module" src="/frontend/main.js"></script>
 </body>
 </html>