diff --git a/apps/comments-ui/package.json b/apps/comments-ui/package.json index b62c0f6247..8567ab03ef 100644 --- a/apps/comments-ui/package.json +++ b/apps/comments-ui/package.json @@ -9,6 +9,10 @@ "@testing-library/jest-dom": "5.16.2", "@testing-library/react": "12.1.2", "@testing-library/user-event": "14.0.0", + "@tiptap/extension-link": "^2.0.0-beta.43", + "@tiptap/extension-placeholder": "^2.0.0-beta.53", + "@tiptap/react": "^2.0.0-beta.114", + "@tiptap/starter-kit": "^2.0.0-beta.191", "react": "17.0.2", "react-dom": "17.0.2", "react-scripts": "4.0.3", @@ -57,6 +61,7 @@ ] }, "devDependencies": { + "@headlessui/react": "1.6.5", "autoprefixer": "^10.4.7", "chalk": "4.1.2", "chokidar": "3.5.2", @@ -69,7 +74,6 @@ "serve-handler": "6.1.3", "source-map-explorer": "2.5.2", "tailwindcss": "^3.1.4", - "@headlessui/react": "1.6.5", "webpack-cli": "3.3.12" }, "resolutions": { diff --git a/apps/comments-ui/src/components/AddForm.js b/apps/comments-ui/src/components/AddForm.js index 5a689738ec..574cb66a75 100644 --- a/apps/comments-ui/src/components/AddForm.js +++ b/apps/comments-ui/src/components/AddForm.js @@ -1,22 +1,53 @@ -import React, {useContext, useState} from 'react'; +import React, {useContext} from 'react'; import {Transition} from '@headlessui/react'; import AppContext from '../AppContext'; import Avatar from './Avatar'; +import {useEditor, EditorContent} from '@tiptap/react'; +import Placeholder from '@tiptap/extension-placeholder'; +import Text from '@tiptap/extension-text'; +import Link from '@tiptap/extension-link'; +import Paragraph from '@tiptap/extension-paragraph'; +import Document from '@tiptap/extension-document'; const AddForm = (props) => { - const [message, setMessage] = useState(''); - const [focused, setFocused] = useState(false); const {member, postId, onAction} = useContext(AppContext); + const editor = useEditor({ + extensions: [ + Document, + Text, + Paragraph, + Link.configure({ + openOnClick: false, + // Add these HTML attributes to all the links + // Warning: we need to do backend changes to make sure the sanitizer always picks the same class for links + HTMLAttributes: { + class: 'underline' + } + }), + Placeholder.configure({ + placeholder: 'Join the discussion' + }) + ], + content: '', + autofocus: true, + editorProps: { + attributes: { + class: `focus:outline-0` + } + } + }); + + const focused = editor?.isFocused || !editor?.isEmpty; const getHTML = () => { // Convert newlines to
for now (until we add a real editor) - return message.replace('\n', '
'); + return editor.getHTML(); }; const submitForm = async (event) => { event.preventDefault(); - if (message.length === 0) { + if (editor.isEmpty) { return; } @@ -28,46 +59,32 @@ const AddForm = (props) => { html: getHTML() }); - // Clear message on success - setMessage(''); - setFocused(false); + // Clear message and blur on success + editor.chain().clearContent().blur().run(); } catch (e) { // eslint-disable-next-line no-console console.error(e); } }; - const handleChange = (event) => { - setMessage(event.target.value); - }; - - const handleBlur = (event) => { - if (message === '') { - setFocused(false); - } - }; - - const handleFocus = (event) => { - setFocused(true); + const focusEditor = (event) => { + editor.commands.focus(); }; return ( -
+
-
-