NEAR-DevHub · Megha-Dev-19 · Oct 10, 2024 · Dec 7, 2023 · Dec 8, 2023 · Dec 18, 2023
@@ -116,11 +116,6 @@ const Compose = ({
                 src={`${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDEViewer`}
                 props={{
                   content: state.data,
-                  embeddCSS: `
-                body{
-                  font-size:14px;
-                }
-                `,
                 }}
               />
             </div>
@@ -189,11 +184,6 @@ const Compose = ({
                 src={`${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDEViewer`}
                 props={{
                   content: state.data,
-                  embeddCSS: `
-                    body {
-                      font-size: 14px;
-                    }
-                  `,
                 }}
               />
             </div>

@@ -1,139 +1,81 @@
 const content = props.content ?? "";
-const height = props.height;
 const embeddCSS = props.embeddCSS;
-const [iframeHeight, setIframeHeight] = useState("100px");
 
-const code = `
-    <!doctype html>
-    <html>
-    <head>
-      <meta charset="utf-8" />
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
-      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
-      <style>
-      body {  
-        margin: 0;
-        overflow: ${height ? "auto" : "hidden"};
-        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";
-        line-height:1.5;
-        font-weight:300;
-        color:#212529;
-      }
+const simplemdeCss = fetch(
+  "https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"
+).body;
+const githubCss = fetch(
+  "https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css"
+).body;
 
-      blockquote {
-        margin: 1em 0;
-        padding-left: 1.5em;
-        border-left: 4px solid #ccc;
-        color: #666;
-        font-style: italic;
-        font-size: inherit;
-      }
+const bootstrapCss = fetch(
+  "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+).body;
 
-      .no-margin {
-        margin: 0px !important;
-      }
+if (!simplemdeCss || !githubCss || !bootstrapCss) return "";
 
-      h1, h2, h3, h4, h5, h6 {
-        font-weight:500;
-        margin-block:5px;
-      }
-
-      p {
-        white-space: pre-wrap;
-      }
-
-      img {
-        height: 200px;
-        object-fit:contain;
-        width: -webkit-fill-available;
-      }
-
-      table {
-        border: 1px solid #dee2e6;
-      }
+const CssContainer = styled.div`
+  ${githubCss}
+  ${simplemdeCss}
 
-      table th, table td {
-        padding: 0.75rem;
-        vertical-align: top;
-      }
+  font-size:14px;
+  p {
+    white-space: normal;
+  }
 
-      table td {
-        border-top: 1px solid #dee2e6;
-      }
-
-      table thead th {
-        vertical-align: bottom;
-        border-bottom: 2px solid #dee2e6;
-      }
-
-      table tbody + tbody {
-        border-top: 2px solid #dee2e6;
-      }
-
-      /* Zebra-striping */
-      tbody tr:nth-of-type(odd) {
-        background-color: rgba(0, 0, 0, 0.05);
-      }
+  blockquote {
+    margin: 1em 0;
+    padding-left: 1.5em;
+    border-left: 4px solid #ccc;
+    color: #666;
+    font-style: italic;
+    font-size: inherit;
+  }
 
-      ${embeddCSS}
-    </style>
-      </head> 
-    <body>
-      <div id="content"></div>
-      <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-      <script>
-
-
+  pre {
+    background-color: #f4f4f4;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 1em;
+    overflow-x: auto;
+    font-family: "Courier New", Courier, monospace;
+  }
 
-      function updateContent(content) {
-        document.getElementById('content').innerHTML = marked.parse(content)
+  a {
+    color: #04a46e;
+  }
 
-        const newHeight = Math.max(
-          document.body.scrollHeight,
-          document.documentElement.scrollHeight,
-          document.body.offsetHeight,
-          document.documentElement.offsetHeight
-        );
-
-        window.parent.postMessage({
-          handler: 'IFRAME_HEIGHT',
-          height: newHeight
-        }, '*');
-      }
+  .remove-underline a {
+    text-decoration: none !important;
+  }
 
-      window.addEventListener('message', (event) => {
-        if (event.data.content) {
-          updateContent(event.data.content);
-        }
-      });
+  ${embeddCSS}
+`;
 
-      window.addEventListener('load', () => {
-        window.parent.postMessage({
-          handler: 'IFRAME_HEIGHT',
-          height: document.body.scrollHeight
-        }, '*');
-      });
-      </script>
-    </body>
-    </html>
-  `;
+const renderMention =
+  props.renderMention ??
+  ((accountId) => (
+    <span
+      key={accountId}
+      className="d-inline-flex remove-underline"
+      style={{ fontWeight: 500 }}
+    >
+      <Widget
+        src="${REPL_DEVHUB}/widget/devhub.components.molecule.ProfileLine"
+        props={{
+          accountId: accountId.toLowerCase(),
+          hideAccountId: true,
+          tooltip: true,
+        }}
+      />
+    </span>
+  ));
 
+const processedContent = content
+  .replace(/<br\s*\/?>/gi, "  \n")
+  .replace(/\n/g, "  \n");
 return (
-  <iframe
-    srcDoc={code}
-    message={{
-      content: content,
-    }}
-    style={{ height: height ?? iframeHeight }}
-    className="w-100"
-    onMessage={(e) => {
-      switch (e.handler) {
-        case "IFRAME_HEIGHT": {
-          setIframeHeight(`${e.height}px`);
-          break;
-        }
-      }
-    }}
-  />
+  <CssContainer>
+    <Markdown text={processedContent} onMention={renderMention} />
+  </CssContainer>
 );
@@ -222,11 +222,6 @@ const Comment = ({ commentItem }) => {
               src={`${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDEViewer`}
               props={{
                 content: content.text,
-                embeddCSS: `
-                  body {
-                    font-size:14px;
-                  }
-                `,
               }}
             />
 

@@ -870,11 +870,6 @@ return (
                       src={`${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDEViewer`}
                       props={{
                         content: snapshot.description,
-                        embeddCSS: `
-                        body {
-                          font-size: 14px;
-                        }
-                       `,
                       }}
                     />
 

@@ -108,11 +108,6 @@ const Compose = ({
               src={`${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDEViewer`}
               props={{
                 content: state.data,
-                embeddCSS: `
-                body {
-                  font-size: 14px;
-                }
-                `,
               }}
             />
           </div>

@@ -222,11 +222,6 @@ const Comment = ({ commentItem }) => {
               src={`${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDEViewer`}
               props={{
                 content: content.text,
-                embeddCSS: `
-                body {
-                  font-size: 14px;
-                }
-                `,
               }}
             />
 

@@ -868,11 +868,6 @@ return (
                       src={`${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDEViewer`}
                       props={{
                         content: snapshot.description,
-                        embeddCSS: `
-                        body {
-                          font-size: 14px;
-                        }
-                      `,
                       }}
                     />
 

@@ -103,16 +103,11 @@ const Compose = ({
             />
           </>
         ) : (
-          <div className="card-body">
+          <div className="card-body compose-preview">
             <Widget
               src={`${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDEViewer`}
               props={{
                 content: state.data,
-                embeddCSS: `
-                  body {
-                    font-size: 14px !important;
-                  }
-                `,
               }}
             />
           </div>

@@ -848,11 +848,6 @@ return (
                       src={`${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDEViewer`}
                       props={{
                         content: snapshot.description,
-                        embeddCSS: `
-                        body {
-                          font-size: 14px !important;
-                        }
-                        `,
                       }}
                     />
 

@@ -671,11 +671,6 @@ return (
                       src={`${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDEViewer`}
                       props={{
                         content: snapshot.description,
-                        embeddCSS: `
-                        body {
-                          font-size: 14px;
-                        }
-                        `,
                       }}
                     />
 

@@ -481,7 +481,6 @@ test.describe("Wallet is connected", () => {
     const delay_milliseconds_between_keypress_when_typing = 0;
     const commentEditor = page
       .frameLocator("iframe")
-      .last()
       .locator(".CodeMirror textarea");
     await commentEditor.focus();
     await commentEditor.pressSequentially(
@@ -492,7 +491,7 @@ test.describe("Wallet is connected", () => {
     );
 
     await pauseIfVideoRecording(page);
-    const iframe = page.frameLocator("iframe").last();
+    const iframe = page.frameLocator("iframe");
     const liFrameLocators = iframe.frameLocator(
       'ul[id="mentiondropdown"] > li'
     );

@@ -11,7 +11,7 @@ test.describe("Wallet is connected", () => {
     await expect(aboutHeaderLink).toBeVisible();
     await aboutHeaderLink.click();
     await expect(
-      page.frameLocator("iframe").getByRole("heading", { name: "Introduction" })
+      page.getByRole("heading", { name: "Introduction" })
     ).toBeVisible();
 
     const proposalsHeaderLink = await page.getByRole("link", {