including the richt text editor in the front end

ls1intum · Jan 6, 2025 · 0cafe5d · 0cafe5d
1 parent 60c0800
commit 0cafe5d
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 9 deletions.
diff --git a/clients/core/src/Application/MultiSelectForm/CheckboxQuestion.tsx b/clients/core/src/Application/MultiSelectForm/CheckboxQuestion.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import { UseFormReturn } from 'react-hook-form'
-import { FormDescription, FormLabel } from '@/components/ui/form'
+import { FormLabel } from '@/components/ui/form'
 import { Checkbox } from '@/components/ui/checkbox'
 import { ApplicationQuestionMultiSelect } from '@/interfaces/application_question_multi_select'
+import { FormDescriptionHTML } from '../components/FormDescriptionHTML'
 
 interface CheckboxQuestionProps {
   form: UseFormReturn<{ answers: string[] }>
@@ -28,7 +29,7 @@ export const CheckboxQuestion: React.FC<CheckboxQuestionProps> = ({
         {question.title}
         {question.is_required && <span className='text-destructive'> *</span>}
       </FormLabel>
-      {question.description && <FormDescription>{question.description}</FormDescription>}
+      {question.description && <FormDescriptionHTML htmlCode={question.description} />}
     </div>
   </div>
 )
diff --git a/clients/core/src/Application/MultiSelectForm/MultiSelectQuestion.tsx b/clients/core/src/Application/MultiSelectForm/MultiSelectQuestion.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { UseFormReturn } from 'react-hook-form'
-import { FormDescription, FormLabel } from '@/components/ui/form'
+import { FormLabel } from '@/components/ui/form'
 import { MultiSelect } from '@/components/MultiSelect'
 import { ApplicationQuestionMultiSelect } from '@/interfaces/application_question_multi_select'
 import {
@@ -10,6 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { FormDescriptionHTML } from '../components/FormDescriptionHTML'
 
 interface MultiSelectQuestionProps {
   form: UseFormReturn<{ answers: string[] }>
@@ -35,7 +36,7 @@ export const MultiSelectQuestion: React.FC<MultiSelectQuestionProps> = ({
         {question.title}
         {question.min_select > 0 && <span className='text-destructive'> *</span>}
       </FormLabel>
-      {question.description && <FormDescription>{question.description}</FormDescription>}
+      {question.description && <FormDescriptionHTML htmlCode={question.description} />}
       {question.max_select > 1 ? (
         <MultiSelect
           options={multiSelectOptions}

diff --git a/clients/core/src/Application/TextForm/ApplicationQuestionTextForm.tsx b/clients/core/src/Application/TextForm/ApplicationQuestionTextForm.tsx
@@ -4,7 +4,6 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -15,6 +14,7 @@ import { Textarea } from '@/components/ui/textarea'
 import { QuestionTextFormRef } from '../utils/QuestionTextFormRef'
 import { createValidationSchema } from './validationSchema'
 import { ApplicationQuestionText } from '@/interfaces/application_question_text'
+import { FormDescriptionHTML } from '../components/FormDescriptionHTML'
 
 interface ApplicationQuestionTextFormProps {
   question: ApplicationQuestionText
@@ -72,9 +72,7 @@ export const ApplicationQuestionTextForm = forwardRef(function ApplicationQuesti
                     {question.title}
                     {question.is_required ? <span className='text-destructive'> *</span> : ''}
                   </FormLabel>
-                  {question.description && (
-                    <FormDescription>{question.description}</FormDescription>
-                  )}
+                  {question.description && <FormDescriptionHTML htmlCode={question.description} />}
                   <div className='relative'>
                     {isTextArea ? (
                       <Textarea

diff --git a/clients/core/src/Application/components/FormDescriptionHTML.tsx b/clients/core/src/Application/components/FormDescriptionHTML.tsx
@@ -0,0 +1,25 @@
+import { FormDescription } from '@/components/ui/form'
+
+interface FormDescriptionHTMLProps {
+  htmlCode: string
+}
+
+export const FormDescriptionHTML = ({ htmlCode }: FormDescriptionHTMLProps): JSX.Element => {
+  return (
+    <FormDescription>
+      <style>
+        {`
+            a {
+                cursor: pointer;
+                color: #1d4ed8; /* Equivalent to text-blue-700 */
+                text-decoration: underline; /* Always underlined */
+            }
+            a:hover {
+                text-decoration: underline; /* Ensure underline on hover */
+            }
+    `}
+      </style>
+      <div dangerouslySetInnerHTML={{ __html: htmlCode }} />
+    </FormDescription>
+  )
+}
diff --git a/.../ApplicationConfiguration/ApplicationQuestionConfig/FormPages/ApplicationQuestionCard.tsx b/.../ApplicationConfiguration/ApplicationQuestionConfig/FormPages/ApplicationQuestionCard.tsx
@@ -29,6 +29,8 @@ import { DeleteConfirmation } from '../components/DeleteConfirmation'
 import { questionsEqual } from '../handlers/computeQuestionsModified'
 import { QuestionStatus, QuestionStatusBadge } from '../components/QuestionStatusBadge'
 import { checkCheckBoxQuestion } from '../../../../Application/utils/CheckBoxRequirements'
+import { DescriptionMinimalTiptapEditor } from '@/components/minimal-tiptap/form-description-tiptap'
+import { TooltipProvider } from '@/components/ui/tooltip'
 
 // If you plan to expose methods via this ref, define them here:
 export interface ApplicationQuestionCardRef {
@@ -177,12 +179,26 @@ export const ApplicationQuestionCard = forwardRef<
                     <FormItem>
                       <FormLabel>Description</FormLabel>
                       <FormControl>
-                        <Input {...field} placeholder='Enter question description' />
+                        <TooltipProvider>
+                          <DescriptionMinimalTiptapEditor
+                            {...field}
+                            // value={richEditorValue}
+                            // onChange={(answer) => setRichEditorValue(answer)}
+                            className='w-full'
+                            editorContentClassName='minimal-tiptap-editor'
+                            output='html'
+                            placeholder='Type your description here...'
+                            autofocus={false}
+                            editable={true}
+                            editorClassName='focus:outline-none'
+                          />
+                        </TooltipProvider>
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
+
                 {/** Checkbox Questions do not have a placeholder */}
                 {!isCheckboxQuestion && (
                   <FormField