update editor

src/Components/Input/TextAreaInput.tsx

@@ -1,5 +1,8 @@
-import { useEffect, useRef, useState } from 'react'
-import SimpleMDE from 'react-simplemde-editor'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { SimpleMdeReact } from 'react-simplemde-editor'
+
+import type SimpleMDE from 'easymde'
+import type { InputHTMLAttributes } from 'react'
 
 interface TextAreaProps {
   labelTitle?: string
@@ -42,25 +45,14 @@ export function TextAreaInput({
     }
   }
 
-  console.log('required not enforced', required)
-  return (
-    <div className={`tw:form-control tw:w-full ${containerStyle ?? ''}`}>
-      {labelTitle ? (
-        <label className='tw:label'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
-      <SimpleMDE
-        ref={ref}
-        id={dataField}
-        value={inputValue}
-        placeholder={placeholder ?? ''}
-        onChange={handleChange}
-        options={{ status: false }}
-        /*
-        options={
+  const options = useMemo(() => {
+    return {
+      status: false,
+      lineNumbers: false,
+      minHeight: '100px',
+      forceSync: true,
+      // inputStyle: 'textarea',
+      /*
           autoDownloadFontAwesome?: boolean;
           autofocus?: boolean;
           autosave?: AutoSaveOptions;
@@ -72,7 +64,6 @@ export function TextAreaInput({
           indentWithTabs?: boolean;
           initialValue?: string;
           insertTexts?: InsertTextOptions;
-          lineNumbers?: boolean;
           lineWrapping?: boolean;
           minHeight?: string;
           maxHeight?: string;
@@ -121,8 +112,32 @@ export function TextAreaInput({
           overlayMode?: OverlayModeOptions;
 
           direction?: 'ltr' | 'rtl';
+          */
+    } as SimpleMDE.Options
+  }, [])
+
+  return (
+    <div className={`tw:form-control ${containerStyle ?? ''}`}>
+      {labelTitle ? (
+        <label className='tw:label'>
+          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
+            {labelTitle}
+            {required && !inputValue ? ' (this field is required)' : null}
+          </span>
+        </label>
+      ) : null}
+      <SimpleMdeReact
+        textareaProps={
+          {
+            required,
+          } as InputHTMLAttributes<HTMLTextAreaElement>
         }
-        */
+        ref={ref}
+        id={dataField}
+        value={inputValue}
+        placeholder={placeholder ?? ''}
+        onChange={handleChange}
+        options={options}
         className={`${inputStyle ?? ''}`}
       />
     </div>

src/Components/Input/TextInput.cy.tsx

@@ -1,66 +0,0 @@
-/// <reference types="cypress" />
-import { mount } from 'cypress/react'
-
-import { TextInput } from './TextInput'
-
-describe('<TextInput />', () => {
-  it('renders with default props', () => {
-    mount(<TextInput />)
-    cy.get('input').should('have.attr', 'type', 'text')
-    cy.get('input').should('have.attr', 'placeholder', '')
-    cy.get('input').should('have.attr', 'required')
-    cy.get('input').should('have.class', 'input')
-    cy.get('input').should('have.class', 'input-bordered')
-    cy.get('input').should('have.class', 'tw:w-full')
-  })
-
-  it('renders with given labelTitle', () => {
-    mount(<TextInput labelTitle='Test Title' />)
-    cy.get('label').should('contain.text', 'Test Title')
-  })
-
-  it('renders with given type', () => {
-    mount(<TextInput type='email' />)
-    cy.get('input').should('have.attr', 'type', 'email')
-  })
-
-  it('accepts user input', () => {
-    mount(<TextInput dataField='test-input' />)
-    cy.get('input[name="test-input"]').type('Hello Test')
-    cy.get('input[name="test-input"]').should('have.value', 'Hello Test')
-  })
-
-  it('renders a label, if labelTitle is set', () => {
-    mount(<TextInput dataField='test-input' labelTitle='Test Label' />)
-    cy.contains('Test Label').should('exist')
-  })
-
-  it('handles default value correctly', () => {
-    mount(<TextInput dataField='test-input' defaultValue='Default Value' />)
-    cy.get('input[name="test-input"]').should('have.value', 'Default Value')
-  })
-
-  it('calls updateFormValue on change', () => {
-    const onChangeSpy = cy.spy().as('updateFormValueSpy')
-    mount(<TextInput dataField='test-input' updateFormValue={onChangeSpy} />)
-    cy.get('input[name="test-input"]').type('Test')
-    cy.get('@updateFormValueSpy').should('have.been.calledWith', 'Test')
-  })
-
-  it('accepts a specific input type', () => {
-    mount(<TextInput dataField='test-input' type='email' />)
-    cy.get('input[name="test-input"]').should('have.attr', 'type', 'email')
-  })
-
-  it('respects the autocomplete attribute', () => {
-    mount(<TextInput dataField='test-input' autocomplete='off' />)
-    cy.get('input[name="test-input"]').should('have.attr', 'autocomplete', 'off')
-  })
-
-  it('updates form value on change', () => {
-    const updateFormValue = cy.stub()
-    mount(<TextInput updateFormValue={updateFormValue} />)
-    cy.get('input').type('Hello')
-    cy.wrap(updateFormValue).should('have.been.calledWith', 'Hello')
-  })
-})

src/Components/Profile/Templates/TabsForm.tsx

@@ -91,6 +91,7 @@ export const TabsForm = ({
             )}
 
             <TextAreaInput
+              labelTitle='About me'
               placeholder='about ...'
               defaultValue={item?.text ? item.text : ''}
               updateFormValue={(v) =>
@@ -99,10 +100,11 @@ export const TabsForm = ({
                   text: v,
                 }))
               }
-              containerStyle='tw:grow'
+              // containerStyle='tw:grow'
               inputStyle={`tw:h-full  ${!item.layer.itemType.show_start_end_input && 'tw:border-t-0 tw:rounded-tl-none'}`}
             />
             <TextAreaInput
+              labelTitle='Contact Info'
               placeholder='contact info ...'
               defaultValue={state.contact || ''}
               updateFormValue={(c) =>
@@ -112,7 +114,8 @@ export const TabsForm = ({
                 }))
               }
               inputStyle=''
-              containerStyle='tw:pt-4 tw:h-24 tw:flex-none'
+              containerStyle='tw:pt-4'
+              // containerStyle='tw:pt-4 tw:h-24 tw:flex-none'
               required={false}
             />
           </div>