website: Support link sharing.

uiwjs · Nov 2, 2021 · 062777c · 062777c
1 parent b1a67c1
commit 062777c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -52,26 +52,26 @@
     "@kkt/less-modules": "6.11.0",
     "@kkt/raw-modules": "6.11.0",
     "@kkt/scope-plugin-options": "6.11.0",
-    "@mapbox/rehype-prism": "0.7.0",
-    "@types/react": "17.0.21",
-    "@types/react-dom": "17.0.9",
-    "@types/react-router-dom": "5.1.9",
+    "@mapbox/rehype-prism": "0.8.0",
+    "@types/react": "17.0.33",
+    "@types/react-dom": "17.0.10",
+    "@types/react-router-dom": "5.3.2",
     "@types/react-test-renderer": "17.0.1",
     "@uiw/react-github-corners": "1.5.3",
-    "@uiw/react-markdown-preview": "3.3.3",
+    "@uiw/react-markdown-preview": "3.4.1",
     "@uiw/react-split": "5.8.4",
-    "@uiw/react-textarea-code-editor": "1.4.13",
-    "husky": "7.0.2",
+    "@uiw/react-textarea-code-editor": "1.4.14",
+    "husky": "7.0.4",
     "kkt": "6.11.0",
-    "lint-staged": "11.1.2",
+    "lint-staged": "11.2.6",
     "prettier": "2.4.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-router-dom": "5.3.0",
     "react-test-renderer": "17.0.2",
     "rehype": "12.0.0",
     "rehype-parse": "8.0.3",
-    "tsbb": "3.2.1"
+    "tsbb": "3.4.4"
   },
   "eslintConfig": {
     "extends": [

diff --git a/website/pages/run/index.tsx b/website/pages/run/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useLocation, Link } from 'react-router-dom';
+import { useLocation, useHistory, Link } from 'react-router-dom';
 import Split from '@uiw/react-split';
 import CodeEditor from '@uiw/react-textarea-code-editor';
 import Tag from './Tag';
@@ -14,7 +14,8 @@ export default function Run() {
   const [htmlStr, setHtmlStr] = useState('');
   const [cssStr, setCssStr] = useState('');
   const [jsStr, setJsStr] = useState('');
-  let query = useQuery();
+  const query = useQuery();
+  const history = useHistory();
 
   useEffect(() => {
     const html = query.get('html');
@@ -32,6 +33,26 @@ export default function Run() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleChange = (value: string, type: 'html' | 'css' | 'js') => {
+    switch (type) {
+      case 'html':
+        setHtmlStr(value);
+        query.set('html', value);
+        break;
+      case 'css':
+        setCssStr(value);
+        query.set('css', value);
+        break;
+      case 'js':
+        setJsStr(value);
+        query.set('js', value);
+        break;
+      default:
+        break;
+    }
+    history.push(`?${query.toString()}`);
+  };
+
   return (
     <div style={{ minHeight: '100vh' }}>
       <div className={styles.header}>
@@ -52,7 +73,7 @@ export default function Run() {
                 value={htmlStr}
                 style={{ minHeight: '100%' }}
                 placeholder="Please enter HTML code."
-                onChange={(evn) => setHtmlStr(evn.target.value)}
+                onChange={(evn) => handleChange(evn.target.value, 'html')}
                 language="html"
               />
             </div>
@@ -70,7 +91,7 @@ export default function Run() {
                 value={jsStr}
                 style={{ minHeight: '100%' }}
                 placeholder="Please enter JavaScript code."
-                onChange={(evn) => setJsStr(evn.target.value)}
+                onChange={(evn) => handleChange(evn.target.value, 'js')}
                 language="js"
               />
             </div>
@@ -88,7 +109,7 @@ export default function Run() {
                 value={cssStr}
                 style={{ minHeight: '100%' }}
                 placeholder="Please enter CSS code."
-                onChange={(evn) => setCssStr(evn.target.value)}
+                onChange={(evn) => handleChange(evn.target.value, 'css')}
                 language="css"
               />
             </div>