CommentsField: add placeholder prop

assemblee-virtuelle · Dec 8, 2022 · abebb82 · abebb82
1 parent 08aacdb
commit abebb82
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 7 deletions.
diff --git a/src/frontend/packages/activitypub-components/package.json b/src/frontend/packages/activitypub-components/package.json
@@ -19,6 +19,7 @@
     "@semapps/semantic-data-provider": "0.4.0",
     "@tiptap/core": "^2.0.0-beta.95",
     "@tiptap/extension-mention": "^2.0.0-beta.95",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.95",
     "@tiptap/suggestion": "^2.0.0-beta.95",
     "ra-richtext-tiptap": "^0.0.1",
     "tippy.js": "^6.3.7"

diff --git a/src/frontend/packages/activitypub-components/src/components/CommentsField/CommentsField.js b/src/frontend/packages/activitypub-components/src/components/CommentsField/CommentsField.js
@@ -4,7 +4,7 @@ import PostCommentForm from './PostCommentForm';
 import CommentsList from './CommentsList';
 import useCollection from '../../hooks/useCollection';
 
-const CommentsField = ({ source, context, helperText, userResource, mentions }) => {
+const CommentsField = ({ source, context, helperText, placeholder, userResource, mentions }) => {
   const record = useRecordContext();
   const { items: comments, loading, addItem, removeItem } = useCollection(record.replies);
   if (!userResource) throw new Error('No userResource defined for CommentsField');
@@ -14,6 +14,7 @@ const CommentsField = ({ source, context, helperText, userResource, mentions })
         context={context}
         helperText={helperText}
         userResource={userResource}
+        placeholder={placeholder}
         mentions={mentions}
         addItem={addItem}
         removeItem={removeItem}
@@ -26,6 +27,7 @@ const CommentsField = ({ source, context, helperText, userResource, mentions })
 CommentsField.defaultProps = {
   addLabel: true,
   label: 'Commentaires',
+  placeholder: 'Commencez à taper votre commentaire...',
   source: 'id', // Ensure the field is always displayed
   context: 'id'
 };

diff --git a/src/frontend/packages/activitypub-components/src/components/CommentsField/PostCommentForm.js b/src/frontend/packages/activitypub-components/src/components/CommentsField/PostCommentForm.js
@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import { useGetIdentity, useNotify, useRecordContext } from 'react-admin';
 import { RichTextInput, DefaultEditorOptions } from 'ra-richtext-tiptap';
+import Placeholder from '@tiptap/extension-placeholder';
 import { Form } from 'react-final-form';
 import { Button, Box, makeStyles, Avatar } from '@material-ui/core';
 import SendIcon from '@material-ui/icons/Send';
@@ -43,14 +44,21 @@ const useStyles = makeStyles(theme => ({
       marginBlockStart: '0.5em',
       marginBlockEnd: '0.5em'
     },
+    '& > div > p.is-editor-empty:first-child::before': {
+      color: 'grey',
+      content: 'attr(data-placeholder)',
+      float: 'left',
+      height: 0,
+      pointerEvents: 'none'
+    },
     marginBottom: -19 // To hide helper text block
   },
   button: {
     marginBottom: 15
   }
 }));
 
-const PostCommentForm = ({ context, helperText, mentions, userResource, addItem, removeItem }) => {
+const PostCommentForm = ({ context, placeholder, helperText, mentions, userResource, addItem, removeItem }) => {
   const record = useRecordContext();
   const { identity } = useGetIdentity();
   const userDataModel = useDataModel(userResource);
@@ -145,6 +153,9 @@ const PostCommentForm = ({ context, helperText, mentions, userResource, addItem,
                     },
                     extensions: [
                       ...DefaultEditorOptions.extensions,
+                      placeholder
+                        ? Placeholder.configure({ placeholder })
+                        : null,
                       mentions
                         ? CustomMention.configure({
                             HTMLAttributes: {

diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
@@ -2143,6 +2143,11 @@
     prosemirror-state "^1.4.1"
     prosemirror-view "^1.28.2"
 
+"@tiptap/extension-placeholder@^2.0.0-beta.95":
+  version "2.0.0-beta.206"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.0.0-beta.206.tgz#e44c5e725d538362678af679c6ef3b8fb22dc8b4"
+  integrity sha512-v31hccx0IZMpz4wXKtKkqiNDbktmyJAoaS1gADt08uPYM+3sKX0hjVqs82rmt8FhtMJqpY5+awCZFnhrP+jO+A==
+
 "@tiptap/extension-strike@^2.0.0-beta.199":
   version "2.0.0-beta.199"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.199.tgz#5fc6e067728009d92027e58a042f18449f2fa264"

diff --git a/website/docs/frontend/activitypub-components.md b/website/docs/frontend/activitypub-components.md
@@ -50,11 +50,12 @@ const DocumentShow = props => {
 }
 ```
 
-| Property       | Type     | Default        | Description                                                                                                        |
-|----------------|----------|----------------|--------------------------------------------------------------------------------------------------------------------|
-| `userResource` | `String` | **required**   | React-Admin resource ID for users                                                                                  |
-| `label`        | `String` | "Commentaires" | The label to use for the field                                                                                     |
-| `mentions`     | `Object` |                | A tiptap [suggestion](https://tiptap.dev/api/utilities/suggestion) object. If present, it allows to mention users. |
+| Property       | Type     | Default                                  | Description                                                                                                        |
+|----------------|----------|------------------------------------------|--------------------------------------------------------------------------------------------------------------------|
+| `userResource` | `String` | **required**                             | React-Admin resource ID for users                                                                                  |
+| `label`        | `String` | "Commentaires"                           | The label to use for the field                                                                                     |
+| `placeholder`  | `String` | "Commencez à taper votre commentaire..." | A placeholder to show before the user starts typing text.                                                          |
+| `mentions`     | `Object` |                                          | A tiptap [suggestion](https://tiptap.dev/api/utilities/suggestion) object. If present, it allows to mention users. |
 
 > To display the users' avatars, the `fieldsMapping.image` property must be defined in the data model of the user resource.