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"