diff --git a/package-lock.json b/package-lock.json index fedab72..158226e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "dompurify": "^3.2.5", "github-markdown-css": "^5.8.1", + "lz-string": "^1.5.0", "marked": "^15.0.7", "monaco-editor": "^0.52.2", "storehouse-js": "github:tanabe/Storehouse-js" @@ -1219,6 +1220,15 @@ "node": ">=0.10.0" } }, + "node_modules/lz-string": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", + "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", + "license": "MIT", + "bin": { + "lz-string": "bin/bin.js" + } + }, "node_modules/marked": { "version": "15.0.7", "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.7.tgz", diff --git a/package.json b/package.json index bf4ca6f..dd7050e 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "dependencies": { "dompurify": "^3.2.5", "github-markdown-css": "^5.8.1", + "lz-string": "^1.5.0", "marked": "^15.0.7", "monaco-editor": "^0.52.2", "storehouse-js": "github:tanabe/Storehouse-js" diff --git a/src/main.js b/src/main.js index 2aa4626..a21230d 100644 --- a/src/main.js +++ b/src/main.js @@ -2,6 +2,7 @@ import Storehouse from 'storehouse-js'; import * as monaco from 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/+esm'; import { marked } from 'marked'; import DOMPurify from 'dompurify'; +import lzstring from 'lz-string'; import 'github-markdown-css/github-markdown-light.css'; const init = () => { @@ -118,6 +119,15 @@ This web site is using ${"`"}markedjs/marked${"`"}. saveLastContent(value); }); + window.addEventListener('keydown', (e) => { + if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') { + e.preventDefault(); + const value = editor.getValue(); + const compressed = lzstring.compressToEncodedURIComponent(value); + window.location.hash = compressed; + } + }); + editor.onDidScrollChange((e) => { if (!scrollBarSync) { return; @@ -158,6 +168,11 @@ This web site is using ${"`"}markedjs/marked${"`"}. return; } } + + if (window.location.hash) { + history.replaceState(null, '', window.location.pathname + window.location.search); + } + presetValue(defaultInput); document.querySelectorAll('.column').forEach((element) => { element.scrollTo({ top: 0 }); @@ -337,13 +352,35 @@ This web site is using ${"`"}markedjs/marked${"`"}. }; // ----- entry point ----- + const hash = window.location.hash ? window.location.hash.substring(1) : ''; let lastContent = loadLastContent(); let editor = setupEditor(); - if (lastContent) { + function loadFromHash(hashValue) { + try { + const decompressed = lzstring.decompressFromEncodedURIComponent(hashValue); + if (decompressed) { + presetValue(decompressed); + } + } catch (e) { + // invalid hash, ignore and leave data as it is + } + } + + if (hash) { + loadFromHash(hash); + } else if (lastContent) { presetValue(lastContent); } else { presetValue(defaultInput); } + + window.addEventListener('hashchange', () => { + const newHash = window.location.hash ? window.location.hash.substring(1) : ''; + if (newHash) { + loadFromHash(newHash); + } + }); + setupResetButton(); setupCopyButton(editor);