notea-de-me/spike/review/reinvent/ezmded/ui/templates/_editor.ctmpl

{{ define "_editor" }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
<style>
	.EasyMDEContainer button {
		color: black;
	}
	img {
		max-width: 100%;
		max-height: 100%;
	}
	.monospace {
		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
	}
	.lil_btn {
		width: initial;
		display: inline-block;
	}
	input, label, textarea {
		margin: initial;
	}
	.editor-toolbar > button.preview {
		color: #08c;
	}
</style>
<script>
	function deleteFile() {
		if (!confirm("would you like to delete this file?"))
			return
		const id = easyMDE.meta.id
		if (!id || id.length == 0)
			return
		http("DELETE", "/api/v0/files/" + id, (body, status) => {
			if (status != 200) {
				alert(`failed to delete file ${id}: ${status}: ${body}`)
				throw `failed to delete file ${id}: ${status}: ${body}`
			}
			drawTree()
			var pid = id.slice(0, id.lastIndexOf("/"))
			if (pid) {
				drawFile(pid)
			} else {
				disableMDE()
			}
		})
	}

	var saveFeedbackInterval = null
	function pushFile() {
		const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
		const body = easyMDE.value() ? easyMDE.value() : ""
		const id = easyMDE.meta.id ? easyMDE.meta.id : ""
		headers = {}
		if (title)
			headers["Title"] = title
		http("PUT", "/api/v0/files/" + id, (body, status) => {
			if (status != 200) {
				alert(`failed to push file ${id}: ${status}: ${body}`)
				throw `failed to push file ${id}: ${status}: ${body}`
			}
			drawTree()
			//drawFile(id)
			document.getElementById("saveFeedback").innerHTML = "success!"
			if (saveFeedbackInterval) {
				clearTimeout(saveFeedbackInterval)
			}
			saveFeedbackInterval = setTimeout(() => {document.getElementById("saveFeedback").innerHTML = ""}, 5000)
		}, body, headers)
	}

	function drawFile(id) {
		if (!id || id.length < 1) {
			return
		}
		http("GET", "/api/v0/files/"+id, (body, status, headers) => {
			if (status != 200) {
				throw `ERR loading file: ${status}: ${body}`
			}
			const title = headers("title") ? headers("title") : ""
			setMDE(id, title, body)
		})
	}

	function drawNewFile(pid) {
		setMDE(pid + "/" + crypto.randomUUID().substr(0, 5), "", "")
		if (easyMDE.isPreviewActive()) {
			easyMDE.togglePreview()
		}
	}

	function enableMDE() {
		document.getElementById("searchResults").className = "mia";
		document.getElementById("article").className = "";
	}

	function disableMDE() {
		document.getElementById("article").className = "mia";
		document.getElementById("searchResults").className = "";
	}

	var liveLeafTimeout = null

	function setMDE(id, title, body) {
		if (id[0] == "/")
			id = id.slice(1, id.length)
		if (id[id.length-1] == "/")
			id = id.slice(0, id.length-1)
		var pids = id.split("/")
		pids = pids.slice(0, pids.length-1)

		var titlePath = "/"
		for (var i = 0; i < pids.length; i++) {
			const fullPid = pids.slice(0, i+1)
			titlePath = `/ <input type="button" class="lil_btn" value="${idsToTitle(fullPid)}" onclick="drawFile('${fullPid.join("/")}');"/> /`
		}
		if (pids.length > 1) {
			titlePath = "/ ... "+titlePath
		}

		enableMDE()
		document.getElementById("titlePath").innerHTML = titlePath
		document.getElementById("title").innerHTML = title
		easyMDE.value(body)
		easyMDE.meta = {
			id: id,
		}
		if (!easyMDE.isPreviewActive()) {
			easyMDE.togglePreview()
			var previews = document.getElementsByClassName("preview")
		}
		const previouslyHighlighted = document.getElementsByClassName("live_leaf")
		for (var i in previouslyHighlighted)
			if (previouslyHighlighted && previouslyHighlighted[i] && previouslyHighlighted[i].classList)
				previouslyHighlighted[i].classList.remove("live_leaf")
		if (liveLeafTimeout)
			clearTimeout(liveLeafTimeout)
		liveLeafTimeout = setTimeout(() => {
			const toHighlight = document.getElementsByClassName(btoa("/"+id))
			for (var i = 0; i < toHighlight.length; i++) {
				if (toHighlight && toHighlight[i] && toHighlight[i].classList)
					toHighlight[i].classList.add("live_leaf")
			}
		}, 100)
		navigateToQuery("f", id)
	}
</script>
<article id="article">
	<h1 class="columns">
		<span class="r_buffer">
         <form action="#" onsubmit="pushFile(); return false;"> <!-- TODO -->
			   <input class="button-info lil_btn" type="submit" value="SAVE"/>
         </form>
		</span>
		<span id="titlePath">
			/
         {{ if ne .This.PID "" }}
            <a href="/ui/files/{{ .This.PID }}">{{ .This.PTitle }}</a> /
         {{ end }}
      </span>
		<span id="title" class="thic_flex" contenteditable>{{ .This.Title }}</span>
		<span class="l_buffer">
         <form action="#" onsubmit="return confirm('are you sure?') && deleteFile();"> <!-- TODO -->
			   <input class="button-error lil_btn" type="submit" value="DELETE"/>
         </form>
		</span>
	</h1>
	<div id="saveFeedback" style="min-height: 1.2em; text-align: right;">
	</div>
	<!-- todo: each line no is an anchor -->
	<div class="monospace">
		<textarea id="my-text-area"></textarea>
	</div>
</article>
<script>
	const easyMDE = new EasyMDE({
		autoDownloadFontAwesome: true,
		autofocus: true,
		autosave: {
			enabled: false,
		},
		element: document.getElementById('my-text-area'),
		forceSync: true,
		indentWithTabs: false,
		initialValue: "# initial\nvalue",
		showIcons: ["code", "table"],
		spellChecker: false,
		sideBySideFullscreen: false,
		tabSize: 3,
		previewImagesInEditor: true,
		insertTexts: {
			image: ["![](", ")"],
			link: ["[](", ")"],
		},
		lineNumbers: true,
		lineWrapping: false,
		uploadImage: true,
		imageUploadEndpoint: "/api/v0/media", // POST wants {data: {filePath: "/..."}}
		imagePathAbsolute: false,
		renderingConfig: {
			codeSyntaxHighlighting: true,
		},
		status: ["lines", "words", "cursor"],
	})
</script>
{{ end }}