feat: Added function support to disable / enable the new editor - fixed issue with not scrolling to the bottom - ensured back, redo and retry all trigger updates now in the editor

Author: prima

klite.embd

@@ -38037,109 +38037,152 @@ class MarkdownWYSIWYG {
 }
 </style>
 <script>
-	let gameEditor = document.createElement("div")
-	gameEditor.id = "gameEditor"
-	gameEditor.style = ""
-	document.getElementById("gamescreen").appendChild(gameEditor)
+	const renderGameTextRef = render_gametext, originalBack = btn_back, originalRedo = btn_redo, originalRetry = btn_retry;
 
-	let gameText = document.getElementById("gametext")
+	let enableNewEditor = () => {
+		let gameEditor = document.createElement("div")
+		gameEditor.id = "gameEditor"
+		gameEditor.style = ""
+		document.getElementById("gamescreen").appendChild(gameEditor)
 
-	let editor = new MarkdownWYSIWYG('gameEditor', {
-		initialValue: "",
-		onUpdate: (markdownContent) => {
-			gameText.innerHTML = markdownContent
+		let gameText = document.getElementById("gametext")
+
+		let editor = new MarkdownWYSIWYG('gameEditor', {
+			initialValue: "",
+			onUpdate: (markdownContent) => {
+				gameText.innerHTML = markdownContent
+				merge_edit_field()
+				rawTextEditor.innerHTML = gameText.innerHTML
+			}
+		});
+
+		let rawButton = document.createElement("button")
+		rawButton.classList.add("md-tab-button")
+		rawButton.innerText = "Raw text"
+		gameEditor.querySelector(".md-tabs").prepend(rawButton)
+
+		let rawTextEditor = document.createElement("span")
+		rawTextEditor.id = "rawTextEditor"
+		rawTextEditor.contentEditable = true
+		rawTextEditor.onclick = click_gametext
+		rawTextEditor.onblur = () => {
+			gameText.innerHTML = editor._htmlToMarkdown(rawTextEditor.innerHTML)
 			merge_edit_field()
-			rawTextEditor.innerHTML = gameText.innerHTML
+			editor.setValue(editor._htmlToMarkdown(rawTextEditor.innerHTML))
 		}
-	});
+		let editorContentArea = document.querySelector(".md-editor-content-area")
+		editorContentArea.prepend(rawTextEditor)
 
-	let rawButton = document.createElement("button")
-	rawButton.classList.add("md-tab-button")
-	rawButton.innerText = "Raw text"
-	gameEditor.querySelector(".md-tabs").prepend(rawButton)
-
-	let rawTextEditor = document.createElement("span")
-	rawTextEditor.id = "rawTextEditor"
-	rawTextEditor.contentEditable = true
-	rawTextEditor.onclick = click_gametext
-	rawTextEditor.onblur = () => {
-		gameText.innerHTML = editor._htmlToMarkdown(rawTextEditor.innerHTML)
-		merge_edit_field()
-		editor.setValue(editor._htmlToMarkdown(rawTextEditor.innerHTML))
-	}
-	let editorContentArea = document.querySelector(".md-editor-content-area")
-	editorContentArea.prepend(rawTextEditor)
-
-	document.querySelectorAll(".md-tab-button").forEach(elem => elem.addEventListener("mouseup", (elem) => {
-		document.querySelectorAll(".md-tab-button").forEach(elem => {
-			elem.classList.remove("active")
-		})
-		document.querySelectorAll("#rawTextEditor, .md-editable-area, .md-markdown-area").forEach(elem => elem.style.display = "none")
+		let scrollToBottom = () => {
+			setTimeout(() => {
+				// Scroll to latest message
+				[...document.querySelectorAll("#rawTextEditor, .md-editable-area, .md-markdown-area")].forEach(elem => elem.scrollTo(0, elem.scrollHeight));
+			}, 1)
+		}
 
-		elem.target.classList.add("active")
+		document.querySelectorAll(".md-tab-button").forEach(elem => elem.addEventListener("mouseup", (elem) => {
+			document.querySelectorAll(".md-tab-button").forEach(elem => {
+				elem.classList.remove("active")
+			})
+			document.querySelectorAll("#rawTextEditor, .md-editable-area, .md-markdown-area").forEach(elem => elem.style.display = "none")
 
-		let toolbarElem = document.getElementsByClassName("md-toolbar")[0]
-		if (elem.target.innerText === "Raw text")
-		{
-			rawTextEditor.style.display = "block"
-			toolbarElem.style.display = "none"
-		}
-		else if (elem.target.innerText === "WYSIWYG")
-		{
-			document.querySelectorAll(".md-editable-area").forEach(elem => elem.style.display = "block")
-			toolbarElem.style.display = "flex"
-		}
-		else if (elem.target.innerText === "Markdown")
-		{
-			document.querySelectorAll(".md-markdown-area").forEach(elem => elem.style.display = "block")
-			toolbarElem.style.display = "flex"
+			elem.target.classList.add("active")
+
+			let toolbarElem = document.getElementsByClassName("md-toolbar")[0]
+			if (elem.target.innerText === "Raw text") {
+				rawTextEditor.style.display = "block"
+				toolbarElem.style.display = "none"
+			}
+			else if (elem.target.innerText === "WYSIWYG") {
+				document.querySelectorAll(".md-editable-area").forEach(elem => elem.style.display = "block")
+				toolbarElem.style.display = "flex"
+			}
+			else if (elem.target.innerText === "Markdown") {
+				document.querySelectorAll(".md-markdown-area").forEach(elem => elem.style.display = "block")
+				toolbarElem.style.display = "flex"
+			}
+			scrollToBottom()
+		}))
+		rawButton.dispatchEvent(new CustomEvent("mouseup", { target: rawButton }))
+
+		render_gametext = (save, forceScroll) => {
+			renderGameTextRef(save, forceScroll)
+			removeChoiceContainer()
+			let isEditable = gameText.contentEditable === "true"
+			if (gameEditor.style.display === "none") {
+				rawTextEditor.innerHTML = gameText.innerHTML
+				editor.setValue(editor._htmlToMarkdown(rawTextEditor.innerHTML))
+			}
+			gameEditor.style.display = !!isEditable ? "block" : "none"
+			gameText.style.display = !!isEditable ? "none" : "block"
+			scrollToBottom()
 		}
-	}))
-	rawButton.dispatchEvent(new CustomEvent("mouseup", { target: rawButton }))
 
-	let renderGameTextRef = render_gametext
-	render_gametext = (save, forceScroll) => {
-		renderGameTextRef(save, forceScroll)
-		let isEditable = gameText.contentEditable === "true"
-		if (gameEditor.style.display === "none")
-		{
+		let overwriteRawContents = () => {
 			rawTextEditor.innerHTML = gameText.innerHTML
 			editor.setValue(editor._htmlToMarkdown(rawTextEditor.innerHTML))
+			scrollToBottom()
 		}
-		gameEditor.style.display = !!isEditable ? "block" : "none"
-		gameText.style.display = !!isEditable ? "none" : "block"
-	}
 
-	let titleRemapper = (params) => {
-		let {id, title} = params
-		let elem = document.querySelector(`[data-button-id=${id}]`)
-		if (!!elem)
-		{
-			elem.title = title
+		btn_back = () => {
+			originalBack()
+			overwriteRawContents()
 		}
+
+		btn_redo = () => {
+			originalRedo()
+			overwriteRawContents()
+		}
+
+		btn_retry = () => {
+			originalRetry()
+			overwriteRawContents()
+		}
+
+		let titleRemapper = (params) => {
+			let { id, title } = params
+			let elem = document.querySelector(`[data-button-id=${id}]`)
+			if (!!elem) {
+				elem.title = title
+			}
+		}
+
+		let titlesToRemapToEN = [
+			{ id: 'h1', title: 'Heading 1' },
+			{ id: 'h2', title: 'Heading 2' },
+			{ id: 'h3', title: 'Heading 3' },
+			{ id: 'bold', title: 'Bold' },
+			{ id: 'italic', title: 'Italic' },
+			{ id: 'strikethrough', title: 'Strikethrough' },
+			{ id: 'link', title: 'Link' },
+			{ id: 'ul', title: 'Unordered list' },
+			{ id: 'ol', title: 'Ordered list' },
+			{ id: 'outdent', title: 'Outdent' },
+			{ id: 'indent', title: 'Indent' },
+			{ id: 'blockquote', title: 'Citation' },
+			{ id: 'hr', title: 'Horizontal rule' },
+			{ id: 'table', title: 'Insert table' },
+			{ id: 'codeblock', title: 'Insert code block' },
+			{ id: 'inlinecode', title: 'Insert inline code' }
+		]
+
+		titlesToRemapToEN.forEach(titleRemapper)
+
+		render_gametext()
 	}
 
-	let titlesToRemapToEN = [
-		{ id: 'h1', title: 'Heading 1'},
-		{ id: 'h2', title: 'Heading 2'},
-		{ id: 'h3', title: 'Heading 3'},
-		{ id: 'bold', title: 'Bold'},
-		{ id: 'italic', title: 'Italic'},
-		{ id: 'strikethrough', title: 'Strikethrough'},
-		{ id: 'link', title: 'Link'},
-		{ id: 'ul', title: 'Unordered list'},
-		{ id: 'ol', title: 'Ordered list'},
-		{ id: 'outdent', title: 'Outdent'},
-		{ id: 'indent', title: 'Indent'},
-		{ id: 'blockquote', title: 'Citation'},
-		{ id: 'hr', title: 'Horizontal rule'},
-		{ id: 'table', title: 'Insert table'},
-		{ id: 'codeblock', title: 'Insert code block'},
-		{ id: 'inlinecode', title: 'Insert inline code'}
-	]
+	let disableNewEditor = () => {
+		document.getElementById("gameEditor")?.remove()
+		document.getElementById("gametext").style.display = "block"
+		render_gametext = renderGameTextRef
+		btn_back = originalBack
+		btn_redo = originalRedo
+		btn_retry = originalRetry
+		render_gametext()
+	}
 
-	titlesToRemapToEN.forEach(titleRemapper)
-          
+	enableNewEditor()
+	// disableNewEditor()
 </script>
 <style>
 	#gameEditor