WIP markdown support

verses-xyz · Feb 1, 2022 · 3f698bd · 3f698bd
1 parent 3184758
commit 3f698bd
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/browser/src/components/ContributionCard.tsx b/browser/src/components/ContributionCard.tsx
@@ -1,4 +1,4 @@
-import { Contribution, PatternToDisplay } from "src/types/common/server-api";
+import { ClientContribution, PatternToDisplay } from "src/types/common/server-api";
 import dayjs from "dayjs";
 import { BlobSingle } from "src/components/BlobSingle";
 import "./ContributionCard.css";

diff --git a/browser/src/components/core/Editor.css b/browser/src/components/core/Editor.css
@@ -93,7 +93,6 @@
 }
 
 .linkIcon {
-    font-size: 85%; 
     padding-left: 2px;
 }
 
@@ -138,3 +137,24 @@
     justify-content:center;
     z-index: 8000;
 }
+
+.iconShimmer {
+    text-align: center;
+
+    background: linear-gradient(
+        90deg,
+        #0000 33%,
+        rgba(255, 255, 255, 0.5) 50%,
+        #0000 66%
+      )
+      rgb(198, 142, 255);
+    background-size: 200% auto;
+
+    color: rgb(198, 142, 255);
+    background-clip: text;
+    text-fill-color: transparent;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    animation: shine 2s linear infinite;
+  }
diff --git a/browser/src/components/core/Editor.tsx b/browser/src/components/core/Editor.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from "react";
 import Modal from "react-modal";
+import { MdLink } from "react-icons/md";
 
 // Tiptap + extensions
 import { useEditor, EditorContent } from "@tiptap/react";
@@ -82,6 +83,7 @@ export function Editor({
       onChange(
         sanitizeHtml(editor.getHTML())
       );
+      console.log(editor.state.doc)
       // Okay so what we want is ContributionCard should render the 
       // html directly to be fast, but we should store markdown
       // so we should keep onChange the same so that contribution card is
@@ -169,7 +171,7 @@ export function Editor({
               }}
               className={`menuItem linkIcon ${displayLinkModal ? 'shimmer' : 'white'}`}
             >
-              <strong>🔗</strong>
+              <MdLink className={`${displayLinkModal ? 'iconShimmer' : 'white'}`} />
             </button>
           </div>
         </>
@@ -179,7 +181,7 @@ export function Editor({
         onAfterOpen={getPreviousLink}
         className="modal"
         overlayClassName="overlay"
-        onRequestClose={() => onCloseModal()}
+        onRequestClose={() => closeModal()}
         shouldCloseOnOverlayClick={true}
       >
         <h3 className="text-3xl font-bold">