Added new markdown viewer for IC about page (#921)

* added new markdown viewer * update css * fix about test
NEAR-DevHub · Aug 12, 2024 · b74195d · b74195d
1 parent b6dcc1a
commit b74195d
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 6 deletions.
diff --git a/instances/devhub.near/widget/devhub/components/molecule/SimpleMDEViewer.jsx b/instances/devhub.near/widget/devhub/components/molecule/SimpleMDEViewer.jsx
@@ -0,0 +1,66 @@
+const content = props.content ?? "";
+const height = props.height ?? "200px";
+
+const code = `
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    body {  
+      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+      height: ${height};
+    }
+
+    blockquote {
+      margin: 1em 0;
+      padding-left: 1.5em;
+      border-left: 4px solid #ccc;
+      color: #666;
+      font-style: italic;
+      font-size: inherit;
+    }
+
+    pre {
+      background-color: #f4f4f4;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      padding: 1em;
+      overflow-x: auto;
+      font-family: "Courier New", Courier, monospace;
+    }
+
+    a {
+        color: #3c697d;
+        font-weight: 500 !important;
+      }
+  </style>
+</head>
+<body>
+  <div id="content"></div>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script>
+    let isViewerInitialized = false;
+
+    function updateContent(content) {
+      document.getElementById('content').innerHTML = marked.parse(content);
+    }
+
+    window.addEventListener("message", (event) => {
+      updateContent(event.data.content);
+    });
+  </script>
+</body>
+</html>
+`;
+
+return (
+  <iframe
+    srcDoc={code}
+    message={{
+      content: content,
+    }}
+    style={{ height: height }}
+    className="w-100"
+  />
+);
diff --git a/instances/infrastructure-committee.near/widget/components/admin/AboutConfigurator.jsx b/instances/infrastructure-committee.near/widget/components/admin/AboutConfigurator.jsx
@@ -79,11 +79,12 @@ useEffect(() => {
 
 function Preview() {
   return (
-    <Tile className="p-3" style={{ background: "white" }}>
+    <Tile className="p-3" style={{ background: "white", minHeight: "500px" }}>
       <Widget
-        src={`${REPL_INFRASTRUCTURE_COMMITTEE}/widget/components.molecule.Markdown`}
+        src={`${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDEViewer`}
         props={{
           content: content,
+          height: "500px",
         }}
       />
     </Tile>

diff --git a/instances/infrastructure-committee.near/widget/components/pages/about.jsx b/instances/infrastructure-committee.near/widget/components/pages/about.jsx
@@ -18,9 +18,10 @@ if (!profile) {
 return (
   <div style={{ width: "-webkit-fill-available" }} className="p-3">
     <Widget
-      src={`${REPL_INFRASTRUCTURE_COMMITTEE}/widget/components.molecule.Markdown`}
+      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDEViewer`}
       props={{
         content: profile.description,
+        height: "70vh",
       }}
     />
   </div>

diff --git a/playwright-tests/tests/infrastructure/infrastructure.near.spec.js b/playwright-tests/tests/infrastructure/infrastructure.near.spec.js
@@ -10,9 +10,9 @@ test.describe("Wallet is connected", () => {
     const aboutHeaderLink = await page.getByRole("link", { name: "About" });
     await expect(aboutHeaderLink).toBeVisible();
     await aboutHeaderLink.click();
-    await expect(await page.locator(".content-container")).toContainText(
-      "Introduction"
-    );
+    await expect(
+      page.frameLocator("iframe").getByRole("heading", { name: "Introduction" })
+    ).toBeVisible();
 
     const proposalsHeaderLink = await page.getByRole("link", {
       name: "Proposals",