Merge pull request #295 from jerry-goodman/develop

0307_pr

Author: neon-balcony

client/packages/openblocks-comps/package.json

@@ -7,7 +7,7 @@
     "@types/react": "17",
     "@types/react-dom": "17",
     "big.js": "^6.2.1",
-    "mermaid": "^10.0.0",
+    "mermaid": "^10.0.2",
     "openblocks-cli": "workspace:^",
     "openblocks-sdk": "workspace:^",
     "react": "17",
@@ -32,14 +32,6 @@
           "w": 15,
           "h": 60
         }
-      },
-      "mermaid": {
-        "name": "Mermaid",
-        "icon": "./icons/icon-chart.svg",
-        "layoutInfo": {
-          "w": 15,
-          "h": 60
-        }
       }
     }
   },

client/packages/openblocks-comps/src/comps/mermaidComp/index.tsx

@@ -8,10 +8,11 @@ import {
   withMethodExposing,
 } from "openblocks-sdk";
 
-import Mermaid from "./mermaid"
+import Mermaid from "./mermaid";
 
 const childrenMap = {
-  code: stringExposingStateControl("code",
+  code: stringExposingStateControl(
+    "code",
     `graph LR
    Start --> Stop`
   ),
@@ -26,22 +27,18 @@ const childrenMap = {
 
 const CompBase = new UICompBuilder(childrenMap, (props: any) => {
   const code = props.code.value;
-  return (
-    <Mermaid code={code}/>
-  );
-}).setPropertyViewFn((children: any) => {
-  return (
-    <>
-      <Section name="Basic">
-        {children.code.propertyView({ label: "code" })}
-      </Section>
-      <Section name="Interaction">{children.onEvent.propertyView()}</Section>
-    </>
-  );
-}).build();
+  return <Mermaid code={code} />;
+})
+  .setPropertyViewFn((children: any) => {
+    return (
+      <>
+        <Section name="Basic">{children.code.propertyView({ label: "code" })}</Section>
+        <Section name="Interaction">{children.onEvent.propertyView()}</Section>
+      </>
+    );
+  })
+  .build();
 
 const AppViewCompTemp = withMethodExposing(CompBase, []);
 
-export const MermaidComp = withExposingConfigs(AppViewCompTemp, [
-  new NameConfig("code", ""),
-]);
+export const MermaidComp = withExposingConfigs(AppViewCompTemp, [new NameConfig("code", "")]);

client/packages/openblocks-comps/src/comps/mermaidComp/mermaid.tsx

@@ -1,29 +1,29 @@
-import React, { useEffect, useState } from "react"
-import mermaid from "mermaid"
+import React, { useEffect, useState } from "react";
+import mermaid from "mermaid";
 
 function escape(str: string): string {
-  const entries: { [index: string]: any } = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: "\"" }
-  return str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (_, t) {
-    return entries[t]
-  }).trim()
+  const entries: { [index: string]: any } = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
+  return str
+    .replace(/&(lt|gt|nbsp|amp|quot);/gi, function (_, t) {
+      return entries[t];
+    })
+    .trim();
 }
 
 export default ({ id = "graphDiv", code = "" }) => {
-  const [svg, setSvg] = useState('')
+  const [svg, setSvg] = useState("");
 
   useEffect(() => {
-    mermaid.initialize({ startOnLoad: false })
-  }, [])
+    mermaid.initialize({ startOnLoad: false });
+  }, []);
 
   useEffect(() => {
-    if (!code) return
+    if (!code) return;
 
-    mermaid.mermaidAPI.render(id, escape(code)).then(res => {
-      setSvg(res.svg)
-    })
-  }, [code, setSvg])
+    mermaid.mermaidAPI.render(id, escape(code)).then((res) => {
+      setSvg(res.svg);
+    });
+  }, [code, setSvg]);
 
-  return (
-    <pre className="mermaid" dangerouslySetInnerHTML={{ __html: svg }}></pre>
-  )
-}
+  return <pre className="mermaid" dangerouslySetInnerHTML={{ __html: svg }}></pre>;
+};

client/packages/openblocks-comps/src/index.ts

@@ -1,9 +1,7 @@
 import { ChartCompWithDefault } from "./comps/chartComp/chartComp";
 import { ImageEditorComp } from "./comps/imageEditorComp/index";
-import {MermaidComp} from "./comps/mermaidComp";
 
 export default {
   chart: ChartCompWithDefault,
   imageEditor: ImageEditorComp,
-  mermaid: MermaidComp,
 };