notea-de-me/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>
	#easyMDEwrap {
		flex-grow: 1;
	}
	.CodeMirror-scroll, .CodeMirror-sizer {
		min-height: 10px !important;
		height: auto !important;
	}
	#article {
		display: flex;
		flex-direction: column;
	}
	#titlepath, #title {
		font-size: 2rem;
		font-weight: 600;
	}
	.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>
	var saveFeedbackInterval = null
	function pushFile() {
		const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
		const body = easyMDE.value() ? easyMDE.value() : ""
		const id = {{ js .This.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}`
			}
			document.getElementById("saveFeedback").style.display = "block"
			if (saveFeedbackInterval) {
				clearTimeout(saveFeedbackInterval)
			}
			saveFeedbackInterval = setTimeout(() => {document.getElementById("saveFeedback").style.display = "none"}, 2500)
		}, body, headers)
	}
	function deleteFile() {
		const id = {{ js .This.ID }}
		const pid = {{ js .This.PID }}
		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}`
			}
			window.location.href = `${window.location.protocol}\/\/${window.location.host}/ui/files/${pid}`
		})
	}
</script>
<div class="fullscreen tb_fullscreen">
	<article id="article">
		<div class="columns">
			<span class="r_buffer">
	         <form action="#" onsubmit="pushFile(); return false;">
				   <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 onsubmit="deleteFile(); return false;"> <!-- TODO -->
				   <input class="button-error lil_btn" type="submit" onclick="confirm('are you sure?');" value="DELETE"/>
	         </form>
			</span>
		</div>
		<!-- todo: each line no is an anchor -->
		<div id="easyMDEwrap" class="monospace">
			<textarea id="my-text-area"></textarea>
		</div>
		<div style="min-height: 2em;"></div>
			<div id="saveFeedback" class="button success" style="text-align: right; cursor: auto; display: none;">
				Saved!
			</div>
		</div>
	</article>
</div>
<script>
	const easyMDE = new EasyMDE({
		autoDownloadFontAwesome: true,
		autofocus: true,
		autosave: {
			enabled: false,
		},
		element: document.getElementById('my-text-area'),
		forceSync: true,
		indentWithTabs: false,
		initialValue: "{{ .This.Content }}",
		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 }}