clean up editor

verses-xyz · Feb 9, 2022 · 48a68bf · 48a68bf
1 parent 29ae964
commit 48a68bf
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 87 deletions.
diff --git a/browser/package.json b/browser/package.json
@@ -14,17 +14,13 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@tiptap/core": "^2.0.0-beta.163",
-    "@tiptap/extension-bold": "^2.0.0-beta.25",
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.54",
     "@tiptap/extension-character-count": "^2.0.0-beta.24",
     "@tiptap/extension-document": "^2.0.0-beta.15",
     "@tiptap/extension-history": "^2.0.0-beta.21",
-    "@tiptap/extension-italic": "^2.0.0-beta.25",
     "@tiptap/extension-link": "^2.0.0-beta.35",
     "@tiptap/extension-paragraph": "^2.0.0-beta.23",
-    "@tiptap/extension-placeholder": "^2.0.0-beta.46",
     "@tiptap/extension-text": "^2.0.0-beta.15",
-    "@tiptap/extension-underline": "^2.0.0-beta.22",
     "@tiptap/html": "^2.0.0-beta.162",
     "@tiptap/react": "^2.0.0-beta.105",
     "@tiptap/starter-kit": "^2.0.0-beta.171",

diff --git a/browser/src/components/ContributionSection.tsx b/browser/src/components/ContributionSection.tsx
@@ -39,6 +39,7 @@ import { ArweaveContext } from "src/helpers/contexts/ArweaveContext";
 import { MdArrowBack, MdArrowForward } from "react-icons/md";
 import { BiErrorCircle } from "react-icons/bi";
 
+import sanitizeHtml from "sanitize-html";
 import { Converter } from "showdown";
 
 enum Page {
@@ -459,7 +460,7 @@ export function ContributionSection() {
       const newContributionId = await addContribution({
         prompt: selectedPrompt,
         pattern: selectedPattern,
-        response: toMarkdownConverter.makeMarkdown(response),
+        response: toMarkdownConverter.makeMarkdown(sanitizeHtml(response)),
         walletId: currentUser!.walletId,
       });
       // TODO: eliminate this and just return th actual contribution data with the response above.
@@ -707,7 +708,7 @@ export function ContributionSection() {
                             <p className="text-xl">Contribution</p>
                             <span className="flex-grow" />
                             <p className="text-lg opacity-50">
-                              {response?.length || 0} / {ResponseCharacterLimit}
+                              {responseLength || 0} / {ResponseCharacterLimit}
                             </p>
                           </div>
                           <AutoGrowInput

diff --git a/browser/src/components/core/AutoGrowInput.tsx b/browser/src/components/core/AutoGrowInput.tsx
@@ -57,7 +57,6 @@ export function AutoGrowInput({
           onChange={onChange}
           responseLength={responseLength}
           setResponseLength={setResponseLength}
-          placeholder={extraProps.placeholder ? extraProps.placeholder : null}
         />
       </div>
     </>

diff --git a/browser/src/components/core/Editor.css b/browser/src/components/core/Editor.css
@@ -7,13 +7,13 @@
 
     /* Identical styling required!! */
     border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
     padding: 0.5rem;
     font: inherit;
 
-    min-height: 200px; 
-    max-height: 200px;
+    min-height: 150px; 
 
-    background-color: hsla(0,0%,100%,.1);
+    background-color: hsla(0,0%,100%,.05);
 
     width: 100%;
 
@@ -53,29 +53,37 @@
 }
 
 .menu {
-    background-color: hsla(0, 0%, 15%, 1);
+    background-color: hsla(0, 0%, 0%, 1);
+    border-color: #FFFFFF15;
+    border-width: 1px;
     width:100%;
     padding:0.375rem; 
     position:relative;
-    border-radius:0.375rem;
+    border-radius: 8px;;
+    cursor: pointer;
+    padding: 2.5px 5px 2.5px;
+}
+
+.menuItem {
+    display: inline-block;
+    margin: 0px 5px 0px;
 }
 
 .linkInput {
     font: inherit;
     padding-top: 0;     
     padding-bottom: 0;     
-    border-radius: 0.375rem;
+    border-radius: 8px;
     width: 100%;
     margin-top: 24px;
 }
 
 .linkIcon {
-    padding-left: 2px;
+    margin-bottom: 2px;
 }
 
-.white {
-    text-align: center;
 
+.white {
     background: white;
     background-size: 200% auto;
 
@@ -99,25 +107,4 @@
 
 .cancelButton { 
   padding-right: 6px;
-}
-
-.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
@@ -7,15 +7,10 @@ import { useEditor, EditorContent, BubbleMenu } from "@tiptap/react";
 import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";
 import Text from "@tiptap/extension-text";
-import Bold from "@tiptap/extension-bold";
-import Italic from "@tiptap/extension-italic";
 import Link from "@tiptap/extension-link";
-import Placeholder from "@tiptap/extension-placeholder";
 import History from "@tiptap/extension-history";
 import CharacterCount from "@tiptap/extension-character-count";
 
-import sanitizeHtml from "sanitize-html";
-
 import { ButtonClass } from "../../types/styles";
 import { ResponseCharacterLimit } from "../ContributionSection";
 import { ModalContext } from "src/helpers/contexts/ModalContext";
@@ -26,25 +21,24 @@ interface Props {
   onChange: (value: string) => void;
   responseLength: number | undefined;
   setResponseLength: (value: number) => void;
-  placeholder?: string;
 }
 
 export function Editor({
   value,
   onChange,
   responseLength,
   setResponseLength,
-  placeholder,
 }: Props) {
   const [linkInput, setLinkInput] = useState<string | null>(null);
-  const [displayLinkModal, setDisplayLinkModal] = useState<boolean>(false);
   const { openLinkInputModal, closeLinkInputModal } = useContext(ModalContext);
 
   // Set Cmd/Ctrl-k shortcut
   const CustomLink = Link.extend({
     addKeyboardShortcuts() {
       return {
-        "Mod-k": () => openLinkInputModal(this.editor, getPreviousLink()),
+        "Mod-k": () => {
+          openLinkInputModal(this.editor, getPreviousLink())
+        },
       }
     },
   });
@@ -59,13 +53,10 @@ export function Editor({
       CharacterCount.configure({
         limit: ResponseCharacterLimit,
       }),
-      Placeholder.configure({
-        placeholder: `${placeholder}`,
-      }),
     ],
     onUpdate: ({ editor }) => {
       onChange(
-        sanitizeHtml(editor.getHTML())
+        editor.getHTML()
       );
       setResponseLength(editor.storage.characterCount.characters());
     },
@@ -82,26 +73,16 @@ export function Editor({
           editor={editor}
           tippyOptions={{
             placement: "bottom",
-            onClickOutside: () => { console.log("clicked outside") },
-            content: (reference) => {
-              console.log(reference);
-              return reference.getAttribute("title");
-            }
           }}
         >
-          <div className="menu">
-            <button
-              onClick={(event) => {
-                console.log("tippy clicky")
-                //openLinkInputModal(editor, getPreviousLink());
-              }}
-              className={`menuItem linkIcon ${displayLinkModal ? "shimmer" : "white"}`}
-            >
-              <div className={`addLinkTooltip ${displayLinkModal ? "iconShimmer" : "white"}`}>
-                Add link
-                <MdLink className={`${displayLinkModal ? "iconShimmer" : "white"}`} />
-              </div>
-            </button>
+          <div
+            onClick={(event) => {
+              openLinkInputModal(editor, getPreviousLink());
+            }}
+            className={"menu"}
+          >
+            <div className="menuItem">Add link</div>
+            <MdLink className={"menuItem linkIcon white"} />
           </div>
         </BubbleMenu>
       }

diff --git a/browser/src/helpers/contexts/ModalContext.tsx b/browser/src/helpers/contexts/ModalContext.tsx
@@ -157,10 +157,12 @@ export function ModalProvider({ children }) {
     toggleBackgroundScrollingOnModal(true);
     setLinkInput(null);
     if (editor) {
-      // Unselect text
+      // Unselect text and stop adding link to text
+      // after type
+      // TODO: This doesn't work
       editor.chain().focus().setTextSelection(
         editor.state.selection.to
-      ).run()
+      ).unsetLink.run()
     }
   };
 
@@ -243,7 +245,7 @@ export function ModalProvider({ children }) {
       <Modal
         isOpen={linkInputModalOpen}
         onAfterOpen={() => null}
-        className="modal"
+        className="linkModal"
         overlayClassName="overlay"
         onRequestClose={() => closeLinkInputModal()}
         shouldCloseOnOverlayClick={true}

diff --git a/browser/src/index.css b/browser/src/index.css
@@ -269,6 +269,18 @@ footer {
   overflow-y: scroll;
 }
 
+.linkModal {
+  background-color: hsla(0, 0%, 0%, 1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  max-width: 700px;
+  width: 100%;
+  padding: 3rem;
+  position: relative;
+  border-radius: 0.4rem;
+  z-index: 5000;
+  max-height: 80vh;
+}
+
 .overlay {
   background-color: hsla(0, 0%, 100%, 0.1);
   position: fixed;
@@ -306,5 +318,5 @@ footer {
 }
 
 .invalidLink {
-  border-color: red;
+    border-color: red;
 }
diff --git a/browser/yarn.lock b/browser/yarn.lock
@@ -3659,15 +3659,6 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.0.0-beta.23.tgz#2ab77308519494994d7a9e5a4acd14042f45f28c"
   integrity sha512-VWAxyzecErYWk97Kv/Gkghh97zAQTcaVOisEnYYArZAlyYDaYM48qVssAC/vnRRynP2eQxb1EkppbAxE+bMHAA==
 
-"@tiptap/extension-placeholder@^2.0.0-beta.46":
-  version "2.0.0-beta.46"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.0.0-beta.46.tgz#9aac81183f270fcf09ca9ae79c5bd3f83326fe29"
-  integrity sha512-/Oz8fS95qA+sHX70AC85mc5RARIEeNbdKr97DCYjrsH2P3uDwt4O5NSxNZvvtxzBmBxmN+rfUhiCjIN/GlldlQ==
-  dependencies:
-    prosemirror-model "^1.16.1"
-    prosemirror-state "^1.3.4"
-    prosemirror-view "^1.23.5"
-
 "@tiptap/extension-strike@^2.0.0-beta.27":
   version "2.0.0-beta.27"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.27.tgz#c5187bf3c28837f95a5c0c0617d0dd31c318353d"
@@ -3678,11 +3669,6 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.0.0-beta.15.tgz#f08cff1b78f1c6996464dfba1fef8ec1e107617f"
   integrity sha512-S3j2+HyV2gsXZP8Wg/HA+YVXQsZ3nrXgBM9HmGAxB0ESOO50l7LWfip0f3qcw1oRlh5H3iLPkA6/f7clD2/TFA==
 
-"@tiptap/extension-underline@^2.0.0-beta.22":
-  version "2.0.0-beta.22"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.0.0-beta.22.tgz#e6b83be0c0944183b47aa30d53f2ab5cd7defe23"
-  integrity sha512-c+tOv4CRBG2pgtAACEsDwvbmM8C89M/CeelTcLLu8zrk+PRy7yj8DKLUtcb9Ybsa7f1Suk6iqyj3dkfxuuvDLw==
-
 "@tiptap/html@^2.0.0-beta.162":
   version "2.0.0-beta.162"
   resolved "https://registry.yarnpkg.com/@tiptap/html/-/html-2.0.0-beta.162.tgz#c85fbbee95cbe68ea4fa9b16c75aeaecbf262a30"