Add auto-save to WYSIWYG editor

prose/prose.js

@@ -14,15 +14,40 @@ import {EditorState} from "prosemirror-state"
 import {schema, defaultMarkdownParser, defaultMarkdownSerializer} from "prosemirror-markdown"
 import {exampleSetup} from "prosemirror-example-setup"
 
+let $title = document.querySelector('#title')
+let $content = document.querySelector('#content')
+
 class ProseMirrorView {
     constructor(target, content) {
         this.view = new EditorView(target, {
             state: EditorState.create({
-                doc: defaultMarkdownParser.parse(content),
+                doc: function(content) {
+                    // console.log('loading '+window.draftKey)
+                    let localDraft = localStorage.getItem(window.draftKey);
+                    if (localDraft != null) {
+                        content = localDraft
+                    }
+                    if (content.indexOf("# ") === 0) {
+                        let eol = content.indexOf("\n");
+                        let title = content.substring("# ".length, eol);
+                        content = content.substring(eol+"\n\n".length);
+                        $title.value = title;
+                    }
+                    return defaultMarkdownParser.parse(content)
+                }(content),
                 plugins: exampleSetup({schema})
             }),
             dispatchTransaction(transaction) {
-                document.querySelector('#content').value = defaultMarkdownSerializer.serialize(transaction.doc)
+                // console.log('saving to '+window.draftKey)
+                $content.value = defaultMarkdownSerializer.serialize(transaction.doc)
+                localStorage.setItem(window.draftKey, function() {
+                    let draft = "";
+                    if ($title.value != null && $title.value !== "") {
+                        draft = "# "+$title.value+"\n\n"
+                    }
+                    draft += $content.value
+                    return draft
+                }());
                 let newState = this.state.apply(transaction)
                 this.updateState(newState)
             }
@@ -37,7 +62,7 @@ class ProseMirrorView {
 }
 
 let place = document.querySelector("#editor")
-let view = new ProseMirrorView(place, document.querySelector('#content').value)
+let view = new ProseMirrorView(place, $content.value)
 
 // document.querySelectorAll("input[type=radio]").forEach(button => {
 //   button.addEventListener("change", () => {

templates/wysiwyg.tmpl

@@ -70,7 +70,6 @@
 			</div>
 		</header>
 
-		<script src="/js/prose.bundle.js"></script>
 		<script src="/js/h.js"></script>
 		<script>
 		function toggleTheme() {
@@ -124,7 +123,11 @@
 		};
 		{{if .Post.Id}}var draftDoc = 'draft{{.Post.Id}}';
 		var origDoc = '{{.Post.Content}}';{{else}}var draftDoc = 'lastDoc';{{end}}
-		H.loadClassic($title, $writer, draftDoc, true);
+
+		// ProseMirror editor
+		window.draftKey = draftDoc;
+
+		// H.loadClassic($title, $writer, draftDoc, true);
 		updateWordCount();
 		
 		var typingTimer;
@@ -254,11 +257,6 @@
 		};
 
 		setButtonStates();
-		$title.on('keyup input', function() {
-			setButtonStates();
-			clearTimeout(typingTimer);
-			typingTimer = setTimeout(doneTyping, doneTypingInterval);
-		}, false);
 		$title.on('keydown', function(e) {
 			if (e.keyCode == 13) {
 				if (e.metaKey || e.ctrlKey) {
@@ -269,6 +267,7 @@
 				}
 			}
 		});
+		/*
 		$writer.on('keyup input', function() {
 			setButtonStates();
 			clearTimeout(typingTimer);
@@ -280,6 +279,7 @@
 				$btnPublish.el.click();
 			}
 		});
+		*/
 		$btnPublish.on('click', function(e) {
 			e.preventDefault();
 			if (!publishing && $content.el.value) {
@@ -394,6 +394,7 @@
 		  // whatevs
 		}
 		</script>
+		<script src="/js/prose.bundle.js"></script>
 		<link href="/css/icons.css" rel="stylesheet">
 	</body>
 </html>{{end}}