honmanyau/super-simple-offline-markdown-editor.html

## super-simple-offline-markdown-editor.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Super Simple Offline Markdown Editor</title>

  <script src="./marked.min.js"></script>
</head>
<body>
  <style>
    :root {
      --spacing: 20px;
      --half-spacing: calc(var(--spacing) / 2);
      --border: 1px solid #333;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: var(--spacing);
      background: var(--neu-primary);
    }

    #markdown {
      margin-right: var(--spacing);
    }

    #parsed {
      margin-left: var(--spacing);
      padding: 0 20px;
      overflow: scroll;
    }

    #load {
      display: none;
    }

    .container,
    .controls {
      display: flex;
      margin: var(--spacing) auto;
      width: 90vw;
      max-width: 1280px;
    }

    .container {
      justify-content: space-between;
    }

    .controls {
      justify-content: flex-end;
    }

    .box {
      flex-grow: 1;
      padding: var(--spacing);
      width: 45%;
      min-height: 20rem;
      border: var(--border);
    }

    .button {
      margin-left: var(--half-spacing);
      padding: 0.5em 1em;
      font-size: 0.9rem;
      text-decoration: none;
      border: var(--border);
      color: black;
      background: transparent;
    }

    .button:hover {
      cursor: pointer;
    }

    .button-load {
      border-color: crimson;
      color: white;
      background: crimson;
    }
  </style>

  <div class="controls">
    <a id="save" class="button" role="button" href="#">
      DOWNLOAD DATA
    </a>

    <label class="button button-load" role="button" for="load">
      LOAD
      <input id="load" type="file" />
    </label>
  </div>

  <main class="container">
    <textarea id="markdown" class="box" cols="64"></textarea>
    <div id="parsed" class="box"></div>
  </main>

  <script>
    const SAVE_INTERVAL = 5000;
    const STORAGE_KEY = 'markdown-editor';
    const markdown = document.getElementById('markdown');
    const parsed = document.getElementById('parsed');
    const saveButton = document.getElementById('save');
    const loadButton = document.getElementById('load');
    const restoreSession = new Promise((resolve) => {
      markdown.value = localStorage.getItem('storageKey');
      parsed.innerHTML = marked(markdown.value);

      resolve({ ok: true });
    });

    restoreSession
      .then(() => {
        try {
          if (localStorage) {
            setInterval(() => {
              localStorage.setItem('storageKey', markdown.value);
            }, SAVE_INTERVAL);
          }
        } catch {
          console.error('localStorage unavailable. Please download your data!');
        }
      });

    markdown.oninput = (e) => {
      parsed.innerHTML = marked(e.currentTarget.value);
    }

    saveButton.onclick = (e) => {
      e.currentTarget.href = `data:text/plain;base64,${btoa(markdown.value)}`;
      e.currentTarget.download = `markdown-${Date.now()}.md`;
    };

    loadButton.onchange = (e) => {
      e.currentTarget.files[0].text()
        .then((v) => {
          markdown.value = v;
          parsed.innerHTML = marked(markdown.value);
        });
    };
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Super Simple Offline Markdown Editor</title>

	<script src="./marked.min.js"></script>
	</head>
	<body>
	<style>
	:root {
	--spacing: 20px;
	--half-spacing: calc(var(--spacing) / 2);
	--border: 1px solid #333;
	}

	* {
	box-sizing: border-box;
	}

	body {
	margin: 0;
	padding: var(--spacing);
	background: var(--neu-primary);
	}

	#markdown {
	margin-right: var(--spacing);
	}

	#parsed {
	margin-left: var(--spacing);
	padding: 0 20px;
	overflow: scroll;
	}

	#load {
	display: none;
	}

	.container,
	.controls {
	display: flex;
	margin: var(--spacing) auto;
	width: 90vw;
	max-width: 1280px;
	}

	.container {
	justify-content: space-between;
	}

	.controls {
	justify-content: flex-end;
	}

	.box {
	flex-grow: 1;
	padding: var(--spacing);
	width: 45%;
	min-height: 20rem;
	border: var(--border);
	}

	.button {
	margin-left: var(--half-spacing);
	padding: 0.5em 1em;
	font-size: 0.9rem;
	text-decoration: none;
	border: var(--border);
	color: black;
	background: transparent;
	}

	.button:hover {
	cursor: pointer;
	}

	.button-load {
	border-color: crimson;
	color: white;
	background: crimson;
	}
	</style>

	<div class="controls">
	<a id="save" class="button" role="button" href="#">
	DOWNLOAD DATA
	</a>

	<label class="button button-load" role="button" for="load">
	LOAD
	<input id="load" type="file" />
	</label>
	</div>

	<main class="container">
	<textarea id="markdown" class="box" cols="64"></textarea>
	<div id="parsed" class="box"></div>
	</main>

	<script>
	const SAVE_INTERVAL = 5000;
	const STORAGE_KEY = 'markdown-editor';
	const markdown = document.getElementById('markdown');
	const parsed = document.getElementById('parsed');
	const saveButton = document.getElementById('save');
	const loadButton = document.getElementById('load');
	const restoreSession = new Promise((resolve) => {
	markdown.value = localStorage.getItem('storageKey');
	parsed.innerHTML = marked(markdown.value);

	resolve({ ok: true });
	});

	restoreSession
	.then(() => {
	try {
	if (localStorage) {
	setInterval(() => {
	localStorage.setItem('storageKey', markdown.value);
	}, SAVE_INTERVAL);
	}
	} catch {
	console.error('localStorage unavailable. Please download your data!');
	}
	});

	markdown.oninput = (e) => {
	parsed.innerHTML = marked(e.currentTarget.value);
	}

	saveButton.onclick = (e) => {
	e.currentTarget.href = `data:text/plain;base64,${btoa(markdown.value)}`;
	e.currentTarget.download = `markdown-${Date.now()}.md`;
	};

	loadButton.onchange = (e) => {
	e.currentTarget.files[0].text()
	.then((v) => {
	markdown.value = v;
	parsed.innerHTML = marked(markdown.value);
	});
	};
	</script>
	</body>
	</html>