descope to links

verses-xyz · Feb 8, 2022 · 29ae964 · 29ae964
1 parent 2eca8b3
commit 29ae964
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 548 deletions.
diff --git a/browser/src/components/ContributionSection.tsx b/browser/src/components/ContributionSection.tsx
@@ -74,13 +74,8 @@ I am signing the document on ${date}, which lives on the permaweb on Arweave tx:
   return isDisagreeing ? PluriverseDissent : PluriverseAgreement;
 }
 
-<<<<<<< HEAD
-const ResponseCharacterLimit = 900;
-export const Placeholder = "...";
-=======
 export const ResponseCharacterLimit = 900;
-export const Placeholder = "________";
->>>>>>> c742010... support richtext in editor
+export const Placeholder = "...";
 export const replaceJSX = (
   str: string,
   replacement: { [x: string]: any; pattern?: JSX.Element },

diff --git a/browser/src/components/core/Editor.css b/browser/src/components/core/Editor.css
@@ -6,15 +6,18 @@
     overflow: hidden;
 
     /* Identical styling required!! */
-    border: 1px solid black;
+    border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 0.5rem;
     font: inherit;
 
-    width: 300px; 
     min-height: 200px; 
     max-height: 200px;
 
-    background-color: hsla(0,0%,100%,.1)
+    background-color: hsla(0,0%,100%,.1);
+
+    width: 100%;
+
+    cursor: text;
 }
 
 /* Placeholder (at the top) */
@@ -66,10 +69,6 @@
     margin-top: 24px;
 }
 
-.invalidLink {
-    border-color: red;
-}
-
 .linkIcon {
     padding-left: 2px;
 }

diff --git a/browser/src/components/core/Editor.tsx b/browser/src/components/core/Editor.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useContext, useState } from "react";
 import Modal from "react-modal";
 import { MdDock, MdLink } from "react-icons/md";
 
@@ -15,10 +15,10 @@ import History from "@tiptap/extension-history";
 import CharacterCount from "@tiptap/extension-character-count";
 
 import sanitizeHtml from "sanitize-html";
-import isURL from "validator/lib/isURL";
 
 import { ButtonClass } from "../../types/styles";
 import { ResponseCharacterLimit } from "../ContributionSection";
+import { ModalContext } from "src/helpers/contexts/ModalContext";
 import "./Editor.css";
 
 interface Props {
@@ -29,7 +29,6 @@ interface Props {
   placeholder?: string;
 }
 
-Modal.setAppElement("#root");
 export function Editor({
   value,
   onChange,
@@ -39,24 +38,13 @@ export function Editor({
 }: Props) {
   const [linkInput, setLinkInput] = useState<string | null>(null);
   const [displayLinkModal, setDisplayLinkModal] = useState<boolean>(false);
-  const [isInvalidInput, setIsInvalidInput] = useState<boolean>(false);
-
-  const openModal = () => {
-    setDisplayLinkModal(true)
-    toggleBackgroundScrollingOnModal(false);
-  }
-
-  const closeModal = () => {
-    setDisplayLinkModal(false);
-    setLinkInput(null);
-    toggleBackgroundScrollingOnModal(true)
-  }
+  const { openLinkInputModal, closeLinkInputModal } = useContext(ModalContext);
 
   // Set Cmd/Ctrl-k shortcut
   const CustomLink = Link.extend({
     addKeyboardShortcuts() {
       return {
-        "Mod-k": () => openModal(),
+        "Mod-k": () => openLinkInputModal(this.editor, getPreviousLink()),
       }
     },
   });
@@ -83,59 +71,8 @@ export function Editor({
     },
   })
 
-  const setLink = (save: boolean) => {
-    setIsInvalidInput(false);
-    if (!save) {
-      closeModal();
-    }
-
-    var url = null;
-    // If link is not null, check if it's valid and display error message otherwise.
-    if (!linkInput) {
-      if (isURL(linkInput)) {
-        url = linkInput;
-      } else {
-        setIsInvalidInput(true);
-        return;
-      }
-    } else {
-      editor.chain().focus().unsetLink().run();
-      closeModal();
-      return;
-    }
-
-    // Add so href doesn't point to pluriverse.world/{url}  
-    if (
-      !(url.toLowerCase().startsWith("https://")
-        || url.toLowerCase().startsWith("http://"))
-    ) {
-      url = "http://" + url;
-    }
-
-    // Set link.
-    editor.chain().focus().setLink({ href: url }).run();
-
-    closeModal();
-  };
-
   const getPreviousLink = () => {
-    const prevUrl = editor.getAttributes("link").href;
-    setLinkInput(prevUrl);
-  }
-
-  const toggleBackgroundScrollingOnModal = (scrollable: boolean) => {
-    if (scrollable) {
-      document.body.style.overflow = "scroll";
-    } else {
-      document.body.style.overflow = "hidden";
-    }
-  }
-
-  const handleKeyPress = (event) => {
-    // Enter key press
-    if (event.key === "Enter") {
-      setLink(true);
-    }
+    return editor.getAttributes("link").href;
   }
 
   return (
@@ -145,66 +82,33 @@ 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={() => {
-                openModal();
+              onClick={(event) => {
+                console.log("tippy clicky")
+                //openLinkInputModal(editor, getPreviousLink());
               }}
               className={`menuItem linkIcon ${displayLinkModal ? "shimmer" : "white"}`}
             >
-              <MdLink className={`${displayLinkModal ? "iconShimmer" : "white"}`} />
+              <div className={`addLinkTooltip ${displayLinkModal ? "iconShimmer" : "white"}`}>
+                Add link
+                <MdLink className={`${displayLinkModal ? "iconShimmer" : "white"}`} />
+              </div>
             </button>
           </div>
         </BubbleMenu>
       }
-      <Modal
-        isOpen={displayLinkModal}
-        onAfterOpen={getPreviousLink}
-        className="modal"
-        overlayClassName="overlay"
-        onRequestClose={() => closeModal()}
-        shouldCloseOnOverlayClick={true}
-      >
-        <h3 className="text-3xl font-bold">
-          Add Link
-        </h3>
-        <div>
-          <input
-            type="url"
-            className={`linkInput ${isInvalidInput && "invalidLink"}`}
-            placeholder="https://interdependence.online/declaration"
-            value={linkInput || ""}
-            onInput={e => {
-              setLinkInput((e.target.value) || "")
-            }}
-            onKeyPress={handleKeyPress}
-            autoFocus
-          />
-        </div>
-        <div className="modalButtons">
-          <div className="cancelButton">
-            <button
-              className={`${ButtonClass("blue")}`}
-              onClick={() => setLink(false)}
-            >
-              Cancel
-            </button>
-          </div>
-          <div className="addButton">
-            <button
-              className={`${ButtonClass("blue")}`}
-              onClick={() => setLink(true)}
-            >
-              Save
-            </button>
-          </div>
-        </div>
-      </Modal>
       <EditorContent
         className="form-textarea block w-full"
         editor={editor}
+        id="editor"
       />
     </>
   )

diff --git a/browser/src/helpers/contexts/ContributionsContext.tsx b/browser/src/helpers/contexts/ContributionsContext.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Contribution } from "src/types/common/server-api";
 import { getContributions, getContribution } from "../api";
+import { getMockContributions } from "../../utils/getMockContributions"
 
 interface ContributionsContextInfo {
   contributions: Contribution[];
@@ -11,7 +12,7 @@ interface ContributionsContextInfo {
 export const ContributionsContext =
   React.createContext<ContributionsContextInfo>({
     contributions: [],
-    fetchContributions: () => {},
+    fetchContributions: () => { },
     fetchContribution: () => Promise.resolve(undefined),
   });