Autosave / better highlighting of when things aren't saved (#292)

archivy/config.py

@@ -28,6 +28,7 @@ def __init__(self):
         }
         self.DATAOBJ_JS_EXTENSION = ""
         self.EDITOR_CONF = {
+            "autosave": False,
             "settings": {
                 "html": False,
                 "xhtmlOut": False,

archivy/routes.py

@@ -35,7 +35,7 @@ def pass_defaults():
     # check windows parsing for js (https://github.com/Uzay-G/archivy/issues/115)
     if SEP == "\\":
         SEP += "\\"
-    return dict(dataobjs=dataobjs, SEP=SEP, version=version)
+    return dict(dataobjs=dataobjs, SEP=SEP, version=version, config=app.config)
 
 
 @app.before_request
@@ -70,7 +70,6 @@ def index():
         delete_form=forms.DeleteFolderForm(),
         rename_form=forms.RenameDirectoryForm(),
         view_only=0,
-        search_engine=app.config["SEARCH_CONF"]["engine"],
     )
 
 

archivy/templates/dataobjs/show.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 
+
+{% set search_enabled = config['SEARCH_CONF']['enabled'] %}
 {% block content %}
   <form id="tag_tooltip" class="hidden">
     <input list="tags" id="tag_tooltip_input" class="floating_input" required />
@@ -186,7 +188,7 @@ <h1>Backlinks</h3>
           imageAccept: "image/png, image/jpeg, image/gif",
           imageMaxSize: "100000000",
           toolbar: [
-            {% for icon in icons %}
+            {% for icon in config['EDITOR_CONF']['toolbar_icons'] %}
               "{{ icon }}",
             {% endfor %}
             {
@@ -236,20 +238,20 @@ <h1>Backlinks</h3>
                 saveDoc()
               }, // action
             }, // save-button
-            {
-              name: "status",
-              className: "fa fa-check-circle status"
-            },
             {
               name: "doc",
               className: "fa fa-question-circle",
               action: "https://archivy.github.io/editing",
               title: "Editing Guide"
-            }
+            },
+            {
+              name: "status",
+              className: "fa fa-check-circle status"
+            },
           ], // toolbar
           shortcuts: {
             "save": "Ctrl-S"
-          },
+          }
         });  // EasyMDE
 
         editor.value(content)
@@ -260,9 +262,11 @@ <h1>Backlinks</h3>
         {% endif %}
 
         let statusBtn = document.querySelector(".status .fa");
+        statusBtn.style.color = "green";
         editor.codemirror.on("change", function() {
           statusBtn.classList.remove("fa-check-circle");
           statusBtn.classList.add("fa-times")
+          statusBtn.style.color = "red";
         })
         oldContent = document.getElementById("content"), editorDiv = document.querySelector(".EasyMDEContainer");
         editorDiv.classList.add("hidden");
@@ -315,6 +319,7 @@ <h1>Backlinks</h3>
           response = fetch(`${SCRIPT_ROOT}/tags/add_to_index`, payload);
         }
 
+        let timeoutId;
         async function saveDoc() {
           let req;
           try {
@@ -335,6 +340,7 @@ <h1>Backlinks</h3>
           if (!req.ok) { alert("Error saving document."); }
           statusBtn.classList.add("fa-check-circle");
           statusBtn.classList.remove("fa-times");
+          statusBtn.style.color = "green";
           savedContent = editor.value();
           // update dataobj tags
           let post_tags = document.querySelector(".embedded-tags");
@@ -389,6 +395,13 @@ <h1>Backlinks</h3>
         //   Check what the last character is. Is it a `#`?
         //   Then get rid of the `#` and put it into the tag tooltip and show that.
         editor.codemirror.on("change", function(ed, change) {
+          // auto save functionality
+          {% if config["EDITOR_CONF"]['autosave'] %}
+            if (!timeoutId)
+            {
+              timeoutId = setTimeout(() => {saveDoc(); timeoutId = null;}, 2500);
+            }
+          {% endif %}
           let line = ed.doc.getCursor().line, // Cursor line
           ch = ed.doc.getCursor().ch;
           let currLine = ed.doc.getLine(line);

archivy/templates/home.html

@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
 
+{% set search_enabled = config['SEARCH_CONF']['enabled'] %}
 {% if search_enabled %}
     <input type="text" id="searchBar" placeholder="Search">
     <ul id="searchHits"></ul>

docs/config.md

@@ -120,10 +120,14 @@ specification](https://specifications.freedesktop.org/basedir-spec/basedir-spec-
 
 
 ### Editor configuration
+
+To enable auto save in the editor, set `EDITOR_CONF -> autosave` to True. 
+
 Archivy uses the [markdown-it](https://github.com/markdown-it/markdown-it) parser for its editor. This parser can be configured to change the output according to your needs. The default values of `EDITOR_CONF` are given below. Refer to the [markdown-it docs](https://github.com/markdown-it/markdown-it#init-with-presets-and-options) for a full list of possible options.
 
 ```yaml
 EDITOR_CONF:
+  autosave: False
   settings:
     linkify: true
     html: false

docs/editing.md

@@ -1,3 +1,5 @@
+Note: to enable auto save in the editor, see [this](https://archivy.github.io/config/#editor-configuration).
+
 ## Format
 
 Archivy files are in the [markdown](https://daringfireball.net/projects/markdown/basics) format following the [commonmark spec](https://spec.commonmark.org/).

requirements.txt

@@ -7,6 +7,8 @@
 # archivy/models.py: 13
 # archivy/routes.py: 7
 Flask == 2.0.0
+werkzeug == 2.0.3
+jinja2 == 3.0.0
 
 # archivy/forms.py: 2
 Flask_WTF == 0.14.3
@@ -57,3 +59,4 @@ click_plugins
 html2text
 flask_compress
 readability-lxml
+