feat: save editor states in url

Author: smeijer

package-lock.json

@@ -13,6 +13,7 @@
     "codemirror": "5.53.2",
     "dom-accessibility-api": "^0.4.3",
     "lodash.debounce": "4.0.8",
+    "lz-string": "^1.4.4",
     "pretty-format": "26.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

package.json

@@ -8,10 +8,13 @@ import parser from '../parser';
 import { initialValues } from '../constants';
 import { useAppContext } from './Context';
 import HtmlPreview from './HtmlPreview';
+import state from '../lib/state';
+
+const savedState = state.load();
 
 function App() {
-  const [html, setHtml] = useState(initialValues.html);
-  const [js, setJs] = useState(initialValues.js);
+  const [html, setHtml] = useState(savedState.html || initialValues.html);
+  const [js, setJs] = useState(savedState.js || initialValues.js);
 
   const {
     htmlEditorRef,
@@ -26,6 +29,7 @@ function App() {
     setParsed(parsed);
 
     parsed.targets?.forEach((el) => el.classList.add('highlight'));
+    state.save({ html, js });
 
     return () => {
       parsed.targets?.forEach((el) => el.classList.remove('highlight'));
@@ -53,7 +57,7 @@ function App() {
           <div>
             <Editor
               mode="javascript"
-              initialValue={initialValues.js}
+              initialValue={js}
               onChange={setJs}
               ref={jsEditorRef}
             />

src/components/App.js

@@ -0,0 +1,37 @@
+import {
+  compressToEncodedURIComponent,
+  decompressFromEncodedURIComponent,
+} from 'lz-string';
+
+function unindent(string) {
+  return string.replace(/[ \t]*[\n][ \t]*/g, '\n');
+}
+
+function save({ html, js }) {
+  const state = [
+    compressToEncodedURIComponent(unindent(html)),
+    compressToEncodedURIComponent(unindent(js)),
+  ].join('&');
+
+  history.replaceState(null, '', window.location.pathname + '#' + state);
+}
+
+function load() {
+  const [htmlCompressed, jsCompressed] = window.location.hash
+    .slice(1)
+    .split('&');
+
+  console.log('load', { htmlCompressed, jsCompressed });
+
+  return {
+    html: htmlCompressed && decompressFromEncodedURIComponent(htmlCompressed),
+    js: jsCompressed && decompressFromEncodedURIComponent(jsCompressed),
+  };
+}
+
+const state = {
+  save,
+  load,
+};
+
+export default state;