From b33c77833256d705daee2952d37e81e73694f7e7 Mon Sep 17 00:00:00 2001
From: vtyeh <vtyeh24@gmail.com>
Date: Thu, 24 Oct 2024 17:45:46 -0700
Subject: [PATCH] Fix font toggle in classic editor using ProseMirror
 transactions

---
 prose/prose.js         |  1 +
 templates/classic.tmpl | 21 ++++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/prose/prose.js b/prose/prose.js
index cb39c6d..964688f 100644
--- a/prose/prose.js
+++ b/prose/prose.js
@@ -118,3 +118,4 @@ class ProseMirrorView {
 
 let place = document.querySelector("#editor");
 let view = new ProseMirrorView(place, $content.value);
+window.editorView = view;
diff --git a/templates/classic.tmpl b/templates/classic.tmpl
index 58f82c7..b3029f1 100644
--- a/templates/classic.tmpl
+++ b/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();