feat: add rich text editor

src/sections/collection-featured-items/featured-items-form/FeaturedItemsForm.tsx

@@ -59,7 +59,7 @@ export const FeaturedItemsForm = ({ defaultValues }: FeaturedItemsFormProps) =>
   }
 
   const submitForm = (data: FeaturedItemsFormData) => {
-    console.log(data)
+    console.log({ data })
   }
 
   //   const formFieldsToFeaturedItems: CollectionFeaturedItem[] = form

src/sections/collection-featured-items/featured-items-form/featured-item/FeaturedItem.module.scss

@@ -46,6 +46,10 @@
     }
   }
 
+  .form-group-content {
+    cursor: auto;
+  }
+
   .image-dropzone {
     display: grid;
     place-items: center;
@@ -67,4 +71,11 @@
       margin: 0;
     }
   }
+
+  .error-msg {
+    width: 100%;
+    margin-top: 0.25rem;
+    color: $dv-danger-color;
+    font-size: 0.875em;
+  }
 }

src/sections/collection-featured-items/featured-items-form/featured-item/FeaturedItem.tsx

@@ -1,7 +1,7 @@
 import { Controller, useFormContext } from 'react-hook-form'
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { Col, Form, Row } from '@iqss/dataverse-design-system'
+import { Col, Form, RichTextEditor, Row } from '@iqss/dataverse-design-system'
 import cn from 'classnames'
 import { DynamicFieldsButtons } from '@/sections/shared/form/DynamicFieldsButtons/DynamicFieldsButtons'
 import styles from './FeaturedItem.module.scss'
@@ -14,6 +14,9 @@ interface FeaturedItemProps {
   disableDragWhenOnlyOneItem: boolean
 }
 
+// TODO:ME - Image just an input image field, no dropzone as it is too small
+// TODO:ME - Logic to show the image thumbnail on top of the image input field, if an image is uploaded (use the image field from the form). Add button to remove the image. how that logic could be?
+
 export const FeaturedItem = ({
   id,
   itemIndex,
@@ -113,26 +116,39 @@ export const FeaturedItem = ({
             </Form.Group>
           </Row>
           <Row>
-            <Form.Group controlId={`featuredItems.${itemIndex}.content`} as={Col}>
-              <Form.Group.Label required={true}>Content</Form.Group.Label>
+            <Form.Group as={Col} className={styles['form-group-content']}>
+              <Form.Group.Label required={true} id={`featuredItems.${itemIndex}.content`}>
+                Content
+              </Form.Group.Label>
 
               <Controller
                 name={`featuredItems.${itemIndex}.content`}
                 control={control}
-                rules={{ required: 'Content is required' }}
-                render={({ field: { onChange, ref, value }, fieldState: { invalid, error } }) => (
-                  <Col>
-                    <Form.Group.TextArea
-                      value={value as string}
-                      onChange={onChange}
-                      isInvalid={invalid}
-                      aria-required={true}
-                      rows={3}
-                      ref={ref}
-                    />
-                    <Form.Group.Feedback type="invalid">{error?.message}</Form.Group.Feedback>
-                  </Col>
-                )}
+                rules={{
+                  required: 'Content is required',
+                  validate: (value: string) => {
+                    if (value === '<p></p>' || value === '') {
+                      return 'Content is required'
+                    }
+                    return true
+                  }
+                }}
+                render={({ field: { onChange, ref, value }, fieldState: { invalid, error } }) => {
+                  // TODO:ME - Make ref work with RichTextEditor
+                  // TODO:ME - Allow passing aria-required to RichTextEditor
+                  return (
+                    <Col>
+                      <RichTextEditor
+                        // editorContentId="asd"
+                        initialValue={value as string}
+                        editorContentAriaLabelledBy={`featuredItems.${itemIndex}.content`}
+                        onChange={onChange}
+                      />
+
+                      {invalid && <div className={styles['error-msg']}>{error?.message}</div>}
+                    </Col>
+                  )
+                }}
               />
             </Form.Group>
           </Row>

tests/component/collection/domain/models/CollectionFeaturedItemMother.ts

@@ -9,15 +9,15 @@ export class CollectionFeaturedItemMother {
         order: 1,
         title: 'Featured item 1',
         content:
-          'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut alias eos expedita quae quisquam ea nemo neque incidunt amet. Odit quos libero aliquam labore dicta eaque dolorum, consequuntur itaque corrupti, reiciendis quas ab. Voluptatem alias, quam, aliquid excepturi repudiandae ab ex pariatur, est id perspiciatis porro impedit adipisci beatae ipsam.'
+          '<p>Lorem 1 <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. Aut alias eos expedita quae quisquam ea nemo neque incidunt amet. Odit quos libero aliquam labore dicta eaque dolorum, consequuntur itaque corrupti, reiciendis quas ab. Voluptatem alias, quam, aliquid excepturi repudiandae ab ex pariatur, est id perspiciatis porro impedit adipisci beatae ipsam.</p>'
       },
       {
         id: 'item-2-id',
         type: 'custom',
         order: 2,
         title: 'Featured item 2',
         content:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem assumenda nam repellendus adipisci doloremque fugit maiores. Repudiandae sequi illo eum quod id quisquam vero enim ipsa distinctio, quia, consequatur harum dolor non voluptatibus ipsum, rem vel quo voluptates magni eveniet velit hic! Repellendus, provident? Dolore maxime ullam ut est, delectus itaque beatae alias corporis doloremque architecto magni officiis tenetur reprehenderit.',
+          '<p>Lorem 2 <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. Aut alias eos expedita quae quisquam ea nemo neque incidunt amet. Odit quos libero aliquam labore dicta eaque dolorum, consequuntur itaque corrupti, reiciendis quas ab. Voluptatem alias, quam, aliquid excepturi repudiandae ab ex pariatur, est id perspiciatis porro impedit adipisci beatae ipsam.</p>',
         imageUrl: 'https://via.placeholder.com/150x80'
       },
       {
@@ -26,15 +26,15 @@ export class CollectionFeaturedItemMother {
         order: 3,
         title: 'Featured item 3',
         content:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem assumenda nam repellendus adipisci doloremque fugit maiores. Repudiandae sequi illo eum quod id quisquam vero enim ipsa distinctio, quia, consequatur harum dolor non voluptatibus ipsum, rem vel quo voluptates magni eveniet velit hic! Repellendus, provident? Dolore maxime ullam ut est, delectus itaque beatae alias corporis doloremque architecto magni officiis tenetur reprehenderit.'
+          '<p>Lorem 3 <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. Aut alias eos expedita quae quisquam ea nemo neque incidunt amet. Odit quos libero aliquam labore dicta eaque dolorum, consequuntur itaque corrupti, reiciendis quas ab. Voluptatem alias, quam, aliquid excepturi repudiandae ab ex pariatur, est id perspiciatis porro impedit adipisci beatae ipsam.</p>'
       },
       {
         id: 'item-4-id',
         type: 'custom',
         order: 4,
         title: 'Featured item 4',
         content:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere enim alias quibusdam debitis quaerat, consectetur velit aliquid ipsum! Iusto obcaecati quibusdam hic nam voluptate. Consequuntur laborum officia aliquid recusandae ut, numquam sequi explicabo voluptatum reprehenderit, minima nulla repudiandae at magni fugit quis. Numquam architecto voluptas repudiandae vel totam officia ut? Nobis ex natus optio. Laborum veniam inventore suscipit architecto consectetur minima commodi dolore ducimus ipsam sint vitae doloremque, dolorem ullam! Iusto corporis commodi, pariatur vel magni, dolorum vero non, exercitationem cumque in deserunt? Iste quia dolor aut ullam dolorem eum quidem id accusamus officiis dolore. Quia placeat sapiente aperiam vero distinctio quidem, fugiat recusandae quisquam saepe ut, nesciunt laborum. Aspernatur ea, quasi, facilis impedit optio repellendus quo dolorum velit officia nihil mollitia provident commodi, delectus vero sint porro modi dolores? Ipsam doloribus impedit iure nemo architecto minima explicabo, eligendi dolorem voluptatem sequi aperiam, quisquam placeat ullam facere ut, minus at sit inventore enim eveniet cum. Repellendus eius quam architecto vel cum quod, tenetur neque deserunt, hic a perferendis adipisci fuga quibusdam dignissimos accusantium autem. Quisquam, ipsum harum fugit voluptatum aperiam minus corrupti hic qui impedit eveniet facere ut iure omnis error dicta nobis eum. Repellendus quia, laboriosam laudantium voluptates expedita fuga nulla? Quia nobis labore possimus debitis temporibus minus neque molestiae quam! Repellat reiciendis culpa similique odit doloribus quas praesentium quasi. Voluptatem amet iusto dolore, id, ut eligendi soluta assumenda excepturi perferendis, reiciendis odit explicabo ipsam maiores. Aut corporis eveniet quia repudiandae dolorem nam, excepturi ipsam veniam amet perferendis ullam eaque suscipit unde consequuntur asperiores maiores vel. Adipisci, asperiores. Iure quasi natus repudiandae quod, placeat blanditiis earum tenetur at dolores? Laudantium nam aperiam architecto consequatur, quos molestiae, amet sit itaque debitis neque quo? Iste repellendus vero illo deleniti eum impedit perferendis odit earum, iusto in porro id itaque quasi voluptate.',
+          '<p>Lorem 4 <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. Aut alias eos expedita quae quisquam ea nemo neque incidunt amet. Odit quos libero aliquam labore dicta eaque dolorum, consequuntur itaque corrupti, reiciendis quas ab. Voluptatem alias, quam, aliquid excepturi repudiandae ab ex pariatur, est id perspiciatis porro impedit adipisci beatae ipsam.</p>',
         imageUrl: 'https://via.placeholder.com/400x400'
       }
     ]
@@ -47,7 +47,7 @@ export class CollectionFeaturedItemMother {
       order: 1,
       title: 'Featured item',
       content:
-        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem assumenda nam repellendus adipisci doloremque fugit maiores. Repudiandae sequi illo eum quod id quisquam vero enim ipsa distinctio, quia, consequatur harum dolor non voluptatibus ipsum, rem vel quo voluptates magni eveniet velit hic! Repellendus, provident? Dolore maxime ullam ut est, delectus itaque beatae alias corporis doloremque architecto magni officiis tenetur reprehenderit.',
+        '<p>Lorem <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. Aut alias eos expedita quae quisquam ea nemo neque incidunt amet. Odit quos libero aliquam labore dicta eaque dolorum, consequuntur itaque corrupti, reiciendis quas ab. Voluptatem alias, quam, aliquid excepturi repudiandae ab ex pariatur, est id perspiciatis porro impedit adipisci beatae ipsam.</p>',
       imageUrl: 'https://via.placeholder.com/150x80',
       ...props
     }