Organization working hours notice to End User with hyperlink (#1083)

* Added RichTextField * Added rich text area * remove rich text field
buerokratt · Dec 13, 2024 · d448337 · d448337
1 parent 4d6988a
commit d448337
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 66 deletions.
diff --git a/GUI/package.json b/GUI/package.json
@@ -59,12 +59,13 @@
     "react-textarea-autosize": "^8.4.0",
     "reactflow": "^11.4.0",
     "regexify-string": "^1.0.19",
+    "rich-textarea": "^0.26.4",
     "rxjs": "^7.8.1",
     "timeago.js": "^4.0.2",
+    "use-debounce": "^10.0.1",
     "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0",
-    "zustand": "^4.4.4",
-    "use-debounce": "^10.0.1"
+    "zustand": "^4.4.4"
   },
   "devDependencies": {
     "@types/howler": "^2.2.11",

diff --git a/GUI/src/components/FormElements/FormTextarea/index.tsx b/GUI/src/components/FormElements/FormTextarea/index.tsx
@@ -1,72 +1,133 @@
 import { ChangeEvent, forwardRef, useId, useState } from 'react';
-import TextareaAutosize, { TextareaAutosizeProps } from 'react-textarea-autosize';
+import TextareaAutosize, {
+  TextareaAutosizeProps,
+} from 'react-textarea-autosize';
+import {
+  createRegexRenderer,
+  RichTextarea,
+  RichTextareaProps,
+} from 'rich-textarea';
 import clsx from 'clsx';
 
 import './FormTextarea.scss';
 
-type TextareaProps = TextareaAutosizeProps & {
-  label: string;
-  name: string;
-  hideLabel?: boolean;
-  showMaxLength?: boolean;
-  maxLengthBottom?: boolean;
-};
+type TextareaProps = TextareaAutosizeProps &
+  RichTextareaProps & {
+    label: string;
+    name: string;
+    hideLabel?: boolean;
+    showMaxLength?: boolean;
+    maxLengthBottom?: boolean;
+    useRichText?: boolean;
+  };
 
-const FormTextarea = forwardRef<HTMLTextAreaElement, TextareaProps>((
-  {
-    label,
-    name,
-    maxLength = 2000,
-    minRows = 3,
-    maxRows = 3,
-    disabled,
-    hideLabel,
-    showMaxLength,
-    maxLengthBottom,
-    defaultValue,
-    onChange,
-    ...rest
-  },
-  ref,
-) => {
-  const id = useId();
-  const [currentLength, setCurrentLength] = useState((typeof defaultValue === 'string' && defaultValue.length) || 0);
-  const textareaClasses = clsx(
-    'textarea',
-    disabled && 'textarea--disabled',
-    showMaxLength && 'textarea--maxlength-shown',
-  );
+const FormTextarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      label,
+      name,
+      maxLength = 2000,
+      minRows = 3,
+      maxRows = 3,
+      disabled,
+      hideLabel,
+      showMaxLength,
+      maxLengthBottom,
+      defaultValue,
+      useRichText,
+      onChange,
+      ...rest
+    },
+    ref
+  ) => {
+    const id = useId();
+    const [currentLength, setCurrentLength] = useState(
+      (typeof defaultValue === 'string' && defaultValue.length) || 0
+    );
+    const textareaClasses = clsx(
+      'textarea',
+      disabled && 'textarea--disabled',
+      showMaxLength && 'textarea--maxlength-shown'
+    );
 
-  const handleOnChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    if (showMaxLength) {
-      setCurrentLength(e.target.value.length);
-    }
-  };
+    const handleOnChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+      if (showMaxLength) {
+        setCurrentLength(e.target.value.length);
+      }
+    };
 
-  return (
-    <div className={textareaClasses}>
-      {label && !hideLabel && <label htmlFor={id} className='textarea__label'>{label}</label>}
-      <div className='textarea__wrapper'>
-        <TextareaAutosize
-          id={id}
-          maxLength={maxLength}
-          minRows={minRows}
-          maxRows={maxRows}
-          ref={ref}
-          defaultValue={defaultValue}
-          aria-label={hideLabel ? label : undefined}
-          onChange={(e) => {
-            if (onChange) onChange(e);
-            handleOnChange(e);
-          }}
-          {...rest}
-        />
-        {showMaxLength && (
-          <div className={maxLengthBottom ? 'textarea__max-length-bottom' : 'textarea__max-length-top'}>{currentLength}/{maxLength}</div>
+    return (
+      <div className={textareaClasses}>
+        {label && !hideLabel && (
+          <label htmlFor={id} className="textarea__label">
+            {label}
+          </label>
         )}
+        <div className="textarea__wrapper">
+          {useRichText ? (
+            <RichTextarea
+              id={id}
+              style={{ width: '100%', height: '95px' }}
+              maxLength={maxLength}
+              ref={ref}
+              defaultValue={defaultValue ?? ''}
+              aria-label={hideLabel ? label : undefined}
+              onChange={(e) => {
+                if (onChange) onChange(e);
+                handleOnChange(e);
+              }}
+            >
+              {createRegexRenderer([
+                [
+                  /https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+/g,
+                  ({ children, key, value }) => (
+                    <a
+                      style={{
+                        color: 'blue',
+                        textDecoration: 'underline',
+                        cursor: 'pointer',
+                      }}
+                      key={key}
+                      href={value}
+                      target="_blank"
+                    >
+                      {children}
+                    </a>
+                  ),
+                ],
+              ])}
+            </RichTextarea>
+          ) : (
+            <TextareaAutosize
+              id={id}
+              maxLength={maxLength}
+              minRows={minRows}
+              maxRows={maxRows}
+              ref={ref}
+              defaultValue={defaultValue}
+              aria-label={hideLabel ? label : undefined}
+              onChange={(e) => {
+                if (onChange) onChange(e);
+                handleOnChange(e);
+              }}
+              {...rest}
+            />
+          )}
+          {showMaxLength && (
+            <div
+              className={
+                maxLengthBottom
+                  ? 'textarea__max-length-bottom'
+                  : 'textarea__max-length-top'
+              }
+            >
+              {currentLength}/{maxLength}
+            </div>
+          )}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 export default FormTextarea;
diff --git a/GUI/src/pages/Settings/SettingsWorkingTime/index.tsx b/GUI/src/pages/Settings/SettingsWorkingTime/index.tsx
@@ -458,13 +458,13 @@ const SettingsWorkingTime: FC = () => {
               render={({ field }) => (
                 <FormTextarea
                   label={t('settings.workingTime.outsideWorkingHoursMessage')}
-                  minRows={4}
                   maxLength={OUTSIDE_WORKING_HOURS_MESSAGE_LENGTH}
                   showMaxLength
                   maxLengthBottom
                   onChange={field.onChange}
-                  value={field.value}
+                  defaultValue={field.value}
                   name="label"
+                  useRichText
                 />
               )}
             />
@@ -507,13 +507,13 @@ const SettingsWorkingTime: FC = () => {
             render={({ field }) => (
               <FormTextarea
                 label={t('settings.workingTime.noCsaAvailableMessage')}
-                minRows={4}
                 maxLength={NO_CSA_MESSAGE_LENGTH}
                 showMaxLength
                 maxLengthBottom
                 onChange={field.onChange}
-                value={field.value}
+                defaultValue={field.value}
                 name="label"
+                useRichText
               />
             )}
           />