Fix font toggle in classic editor using ProseMirror transactions

prose/prose.js

@@ -118,3 +118,4 @@ class ProseMirrorView {
 
 let place = document.querySelector("#editor");
 let view = new ProseMirrorView(place, $content.value);
+window.editorView = view;

templates/classic.tmpl

@@ -348,13 +348,27 @@
 		  } catch (e) {}
 		};
 		var fonts = document.querySelectorAll('nav#font-picker a.font');
+		var setFontClass = function(fontClass) {
+			return (state, dispatch) => {
+				if (dispatch && window.editorView) {
+					window.editorView.view.dom.classList.remove("norm", "sans", "wrap");
+					window.editorView.view.dom.classList.add(fontClass);
+				}
+				return true;
+			}
+		}
+		var changeEditorFont = function(fontClass) {
+			if (window.editorView) {
+				const command = setFontClass(fontClass);
+				command(window.editorView.view.state, window.editorView.view.dispatch);
+			}
+		};
 		for (var i=0; i<fonts.length; i++) {
 			fonts[i].addEventListener('click', function(e) {
 				e.preventDefault();
 				selectedFont = this.href.substring(this.href.indexOf('#')+1);
-				// TODO: don't change classes on the editor window
-				//$title.el.className = selectedFont;
-				//$writer.el.className = selectedFont;
+				$title.el.className = selectedFont;
+				changeEditorFont(selectedFont);
 				document.querySelector('nav#font-picker li.selected').classList.remove('selected');
 				this.parentElement.classList.add('selected');
 				H.set('{{if .Editing}}draft{{.Post.Id}}font{{else}}padFont{{end}}', selectedFont);
@@ -364,6 +378,7 @@
 			});
 		}
 		var selectedFont = H.get('{{if .Editing}}draft{{.Post.Id}}font{{else}}padFont{{end}}', '{{.Post.Font}}');
+		document.addEventListener('DOMContentLoaded', () => {changeEditorFont(selectedFont)});
 		var sfe = document.querySelector('nav#font-picker a.font.'+selectedFont);
 		if (sfe != null) {
 			sfe.click();