clean up

browser/src/components/ContributionCard.tsx

@@ -1,12 +1,4 @@
-<<<<<<< HEAD
-import {
-  Contribution,
-  PatternToDisplay,
-  Prompt,
-} from "src/types/common/server-api";
-=======
-import { ClientContribution, PatternToDisplay } from "src/types/common/server-api";
->>>>>>> 3f698bd... WIP markdown support
+import { ClientContribution, PatternToDisplay, Prompt } from "src/types/common/server-api";
 import dayjs from "dayjs";
 import { BlobSingle } from "src/components/BlobSingle";
 import "./ContributionCard.css";
@@ -56,15 +48,33 @@ export function getFullContributionResponse({
   );
 }
 
+const renderHtml = (resp: string): string | JSX.Element | JSX.Element[] => {
+  // Remove first p tag to prevent first text going to next line, sanitize html string
+  // and then convert to JSX element
+  return parse(
+    sanitizeHtml(
+      resp.replace(
+        /<p[^>]*>|<\/p[^>]*>/,
+        ""
+      )
+    )
+  )
+};
+
 export function getContributionCardResponse({
   response,
+  responseHtml,
   prompt,
   pattern,
-}: Contribution) {
+}: ClientContribution) {
   if (!response) {
     return response;
   }
 
+  const input = renderHtml(
+    responseHtml || response
+  );
+
   switch (prompt) {
     case Prompt.LooksLike:
     case Prompt.WeNeed:
@@ -74,7 +84,7 @@ export function getContributionCardResponse({
           {replaceJSX(PromptDescriptions[prompt], {
             [Placeholder]: <b>{getPatternPlaceholder(pattern, prompt)}</b>,
           })}{" "}
-          {response}
+          {input}
         </>
       );
     // TODO: this doesn't replace with the right case from before.
@@ -124,24 +134,6 @@ export function ContributionCard({
   const { openContributionModal, openContributionId } =
     useContext(ModalContext);
 
-
-  const renderHtml = (resp: string): string | JSX.Element | JSX.Element[] => {
-    // Remove first p tag to prevent first text going to next line, sanitize html string
-    // and then convert to JSX element
-    return parse(
-      sanitizeHtml(
-        resp.replace(
-          /<p[^>]*>|<\/p[^>]*>/,
-          ""
-        )
-      )
-    )
-  };
-
-  const input = renderHtml(
-    responseHtml || response
-  );
-
   return (
     <div
       className={

browser/src/components/core/Editor.css

@@ -70,16 +70,6 @@
     border-color: red;
 }
 
-.modal {
-    background-color: hsla(0, 0%, 15%, 1);
-    width:100%;
-    max-width:576px;
-    padding:3rem; 
-    position:relative;
-    border-radius:0.375rem;
-    z-index: 9999;
-}
-
 .linkIcon {
     padding-left: 2px;
 }
@@ -112,20 +102,6 @@
   padding-right: 6px;
 }
 
-.overlay {
-    background-color: hsla(0,0%,100%,.1);
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    display:flex;
-    align-items: center;
-    justify-content:center;
-    z-index: 8000;
-}
-
 .iconShimmer {
     text-align: center;
 

browser/src/components/core/Editor.tsx

@@ -18,7 +18,6 @@ import sanitizeHtml from "sanitize-html";
 import isURL from "validator/lib/isURL";
 
 import { ButtonClass } from "../../types/styles";
-import { selectFullWordCommand, unsetWhitespaceMarksCommand } from "./commands";
 import { ResponseCharacterLimit } from "../ContributionSection";
 import "./Editor.css";
 
@@ -92,18 +91,15 @@ export function Editor({
 
     var url = null;
     // If link is not null, check if it's valid and display error message otherwise.
-    if (!(linkInput === "" || linkInput === null || linkInput === undefined)) {
+    if (!linkInput) {
       if (isURL(linkInput)) {
         url = linkInput;
       } else {
         setIsInvalidInput(true);
         return;
       }
     } else {
-      editor.chain().focus().command(({ tr, commands }) => {
-        return selectFullWordCommand({ tr, commands })
-      }).unsetLink().run();
-
+      editor.chain().focus().unsetLink().run();
       closeModal();
       return;
     }
@@ -117,9 +113,7 @@ export function Editor({
     }
 
     // Set link.
-    editor.chain().focus().command(({ tr, commands }) => {
-      return selectFullWordCommand({ tr, commands })
-    }).setLink({ href: url }).run();
+    editor.chain().focus().setLink({ href: url }).run();
 
     closeModal();
   };

browser/src/components/core/commands.test.tsx

@@ -173,15 +173,13 @@ test("two words and surrounding spaces selected", () => {
 });
 
 test("punctuation stuff", () => {
-    console.log("________________________")
     testCommand({
         selectedFrom: 47,
         selectedTo: 50,
         expectedFrom: 49,
         expectedTo: 51,
         expectedContent: "22",
     })
-    console.log("________________________")
 });
 
 test("in the middle of multiple spaces", () => {

browser/src/helpers/api.ts

@@ -84,11 +84,14 @@ export async function getContribution({
   });
 
   const mdToHtmlConverter = new Converter();
-  response.responseHtml = mdToHtmlConverter.makeHtml(
+  const responseHtml = mdToHtmlConverter.makeHtml(
     response.response
   );
 
-  return response as ClientContribution;
+  return {
+    ...response,
+    responseHtml,
+  } as ClientContribution;
 }
 
 export async function getContributions({
@@ -106,14 +109,17 @@ export async function getContributions({
   );
 
   const mdToHtmlConverter = new Converter();
-  const responseWithHtml = response.map((res) => {
-    res.responseHtml = mdToHtmlConverter.makeHtml(
+  const responseWithHtml = response.map((res: ClientContribution) => {
+    const responseHtml = mdToHtmlConverter.makeHtml(
       res.response
     );
-    return res;
+    return {
+      ...res,
+      responseHtml,
+    } as ClientContribution
   });
 
-  return response as ClientContribution[];
+  return responseWithHtml as ClientContribution[];
 }
 
 export async function getUser({

browser/src/types/common/server-api/index.ts

@@ -69,7 +69,6 @@ export interface AddContributionRequest {
   walletId: string;
   // This should be the full text response, formatted as markdown.
   response: string;
-  // Full text response formatted as markdown as HTML.
   prompt: Prompt;
   pattern: Pattern;
 }