website: upgrade example & fix type error. (#593)

Author: jaywcjlove

core/README.md

@@ -718,16 +718,26 @@ const randomid = () => parseInt(String(Math.random() * 1e15), 10).toString(36);
 const Code = ({ inline, children = [], className, ...props }) => {
   const demoid = useRef(`dome${randomid()}`);
   const [container, setContainer] = useState(null);
-  const isMermaid = className && /^language-mermaid/.test(className.toLocaleLowerCase());
-  const code = props.node && props.node.children ? getCodeString(props.node.children) : children[0] || '';
+  const isMermaid =
+    className && /^language-mermaid/.test(className.toLocaleLowerCase());
+  const code = children
+    ? getCodeString(props.node.children)
+    : children[0] || "";
+
   useEffect(() => {
-    if (container && isMermaid) {
-      try {
-        const str = mermaid.render(demoid.current, code);
-        container.innerHTML = str;
-      } catch (error) {
-        container.innerHTML = error;
-      }
+    if (container && isMermaid && demoid.current && code) {
+      mermaid
+        .render(demoid.current, code)
+        .then(({ svg, bindFunctions }) => {
+          console.log("svg:", svg);
+          container.innerHTML = svg;
+          if (bindFunctions) {
+            bindFunctions(container);
+          }
+        })
+        .catch((error) => {
+          console.log("error:", error);
+        });
     }
   }, [container, isMermaid, code, demoid]);
 
@@ -741,11 +751,11 @@ const Code = ({ inline, children = [], className, ...props }) => {
     return (
       <Fragment>
         <code id={demoid.current} style={{ display: "none" }} />
-        <code ref={refElement} data-name="mermaid" />
+        <code className={className} ref={refElement} data-name="mermaid" />
       </Fragment>
     );
   }
-  return <code>{children}</code>;
+  return <code className={className}>{children}</code>;
 };
 
 export default function App() {

core/package.json

@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "@uiw/react-markdown-preview": "^5.0.0",
+    "@uiw/react-markdown-preview": "^5.0.2",
     "rehype": "~13.0.0",
     "rehype-prism-plus": "~1.6.1"
   },

package.json

@@ -28,7 +28,7 @@
     "husky": "~8.0.0",
     "kkt": "^7.4.9",
     "lerna": "^7.1.0",
-    "lint-staged": "^14.0.0",
+    "lint-staged": "^15.1.0",
     "prettier": "^3.0.0",
     "react-test-renderer": "~18.2.0",
     "tsbb": "^4.1.5",

www/package.json

@@ -5,8 +5,8 @@
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "author": "kenny wang <wowohoo@qq.com>",
   "scripts": {
-    "build": "kkt build",
-    "start": "kkt start",
+    "build": "GENERATE_SOURCEMAP=false kkt build",
+    "start": "GENERATE_SOURCEMAP=false kkt start",
     "map": "source-map-explorer build/static/js/*.js --html build/website-result.html"
   },
   "license": "MIT",
@@ -26,7 +26,7 @@
     "@uiw/react-md-editor": "3.25.6",
     "dom-to-image": "^2.6.0",
     "katex": "~0.16.0",
-    "mermaid": "~9.4.3",
+    "mermaid": "~10.6.1",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "rehype-sanitize": "~6.0.0"

www/src/Example.tsx

@@ -34,7 +34,6 @@ const Example = (props = {} as { mdStr: string }) => {
         value={state.value}
         overflow={state.overflow}
         previewOptions={{
-          linkTarget: '_blank',
           rehypePlugins: [
             [
               rehypeSanitize,