implemented cancel format page feature

extension/ui/bg/ui-editor.js

@@ -144,7 +144,11 @@ singlefile.extension.ui.bg.editor = (() => {
 		}
 	};
 	formatPageButton.onclick = () => {
-		enableFormatPage();
+		if (formatPageButton.classList.contains("format-disabled")) {
+			formatPage();
+		} else {
+			cancelFormatPage();
+		}
 	};
 	cutInnerPageButton.onclick = () => {
 		if (toolbarElement.classList.contains("edit-mode")) {
@@ -221,7 +225,7 @@ singlefile.extension.ui.bg.editor = (() => {
 			if (tabData.options.defaultEditorMode == "edit") {
 				enableEditPage();
 			} else if (tabData.options.defaultEditorMode == "format" && !tabData.options.disableFormatPage) {
-				enableFormatPage();
+				formatPage();
 			} else if (tabData.options.defaultEditorMode == "cut") {
 				enableCutInnerPage();
 			}
@@ -310,12 +314,16 @@ singlefile.extension.ui.bg.editor = (() => {
 		editorElement.contentWindow.postMessage(JSON.stringify({ method: "enableEditPage" }), "*");
 	}
 
-	function enableFormatPage() {
-		if (formatPageButton.classList.contains("format-disabled")) {
-			formatPageButton.classList.remove("format-disabled");
-			updatedResources = {};
-			editorElement.contentWindow.postMessage(JSON.stringify({ method: tabData.options.applySystemTheme ? "formatPage" : "formatPageNoTheme" }), "*");
-		}
+	function formatPage() {
+		formatPageButton.classList.remove("format-disabled");
+		updatedResources = {};
+		editorElement.contentWindow.postMessage(JSON.stringify({ method: tabData.options.applySystemTheme ? "formatPage" : "formatPageNoTheme" }), "*");
+	}
+
+	function cancelFormatPage() {
+		formatPageButton.classList.add("format-disabled");
+		updatedResources = {};
+		editorElement.contentWindow.postMessage(JSON.stringify({ method: "cancelFormatPage" }), "*");
 	}
 
 	function enableCutInnerPage() {

extension/ui/content/content-ui-editor-web.js

@@ -810,7 +810,7 @@ table {
 }`;
 
 	let NOTES_WEB_STYLESHEET, MASK_WEB_STYLESHEET, HIGHLIGHTS_WEB_STYLESHEET;
-	let selectedNote, anchorElement, maskNoteElement, maskPageElement, highlightSelectionMode, removeHighlightMode, resizingNoteMode, movingNoteMode, highlightColor, collapseNoteTimeout, cuttingOuterMode, cuttingMode, cuttingPath, cuttingPathIndex;
+	let selectedNote, anchorElement, maskNoteElement, maskPageElement, highlightSelectionMode, removeHighlightMode, resizingNoteMode, movingNoteMode, highlightColor, collapseNoteTimeout, cuttingOuterMode, cuttingMode, cuttingPath, cuttingPathIndex, previousDoc;
 	let removedElements = [], removedElementIndex = 0;
 
 	window.onmessage = async event => {
@@ -859,6 +859,9 @@ table {
 		if (message.method == "formatPageNoTheme") {
 			formatPage(false);
 		}
+		if (message.method == "cancelFormatPage") {
+			cancelFormatPage();
+		}
 		if (message.method == "disableEditPage") {
 			document.body.contentEditable = false;
 		}
@@ -1477,6 +1480,7 @@ table {
 	}
 
 	function formatPage(applySystemTheme) {
+		previousDoc = document.documentElement.cloneNode(true);
 		const shadowRoots = {};
 		const classesToPreserve = ["single-file-highlight", "single-file-highlight-yellow", "single-file-highlight-green", "single-file-highlight-pink", "single-file-highlight-blue"];
 		document.querySelectorAll(NOTE_TAGNAME).forEach(containerElement => {
@@ -1531,6 +1535,20 @@ table {
 		onUpdate(false);
 	}
 
+	function cancelFormatPage() {
+		if (previousDoc) {
+			document.documentElement.replaceChild(previousDoc.querySelector("html > head"), document.head);
+			document.documentElement.replaceChild(previousDoc.querySelector("html > body"), document.body);
+			removedElements = [];
+			removedElementIndex = 0;
+			maskPageElement = getMaskElement(PAGE_MASK_CLASS, PAGE_MASK_CONTAINER_CLASS);
+			maskNoteElement = getMaskElement(NOTE_MASK_CLASS);
+			reflowNotes();
+			onUpdate(false);
+			previousDoc = null;
+		}
+	}
+
 	function getContent(compressHTML, updatedResources) {
 		unhighlightCutElement();
 		serializeShadowRoots(document);