diff --git a/browser/package.json b/browser/package.json
index 00cca3e..44d559e 100644
--- 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
index b5ee544..b32e36f 100644
--- 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() {
Contribution
- {response?.length || 0} / {ResponseCharacterLimit}
+ {responseLength || 0} / {ResponseCharacterLimit}
>
diff --git a/browser/src/components/core/Editor.css b/browser/src/components/core/Editor.css
index 1a0fd79..7b51f7b 100755
--- 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;
- }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/browser/src/components/core/Editor.tsx b/browser/src/components/core/Editor.tsx
index f60b044..f5002bc 100755
--- 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,7 +21,6 @@ interface Props {
onChange: (value: string) => void;
responseLength: number | undefined;
setResponseLength: (value: number) => void;
- placeholder?: string;
}
export function Editor({
@@ -34,17 +28,17 @@ export function Editor({
onChange,
responseLength,
setResponseLength,
- placeholder,
}: Props) {
const [linkInput, setLinkInput] = useState(null);
- const [displayLinkModal, setDisplayLinkModal] = useState(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");
- }
}}
>
-
-
+
{
+ openLinkInputModal(editor, getPreviousLink());
+ }}
+ className={"menu"}
+ >
+
Add link
+
}
diff --git a/browser/src/helpers/contexts/ModalContext.tsx b/browser/src/helpers/contexts/ModalContext.tsx
index ccd2a85..ddab1f8 100644
--- 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 }) {
null}
- className="modal"
+ className="linkModal"
overlayClassName="overlay"
onRequestClose={() => closeLinkInputModal()}
shouldCloseOnOverlayClick={true}
diff --git a/browser/src/index.css b/browser/src/index.css
index 9936fa8..e131495 100644
--- 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
index f1ba711..0248e10 100644
--- 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"