[AR-1206] - Rich Text Data Type

.gitignore

@@ -1,7 +1,6 @@
 node_modules/
 dist/
 coverage/
-public/
 csp.json
 env.json
 .env.local

package.json

@@ -41,6 +41,7 @@
     "@commercetools-uikit/data-table": "^18.4.0",
     "@commercetools-uikit/date-input": "^18.4.0",
     "@commercetools-uikit/date-time-input": "^18.4.0",
+    "@commercetools-uikit/dropdown-menu": "^20.0.0",
     "@commercetools-uikit/flat-button": "^18.4.0",
     "@commercetools-uikit/grid": "^18.4.0",
     "@commercetools-uikit/hooks": "^18.4.0",
@@ -65,6 +66,14 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@formatjs/cli": "^6.2.7",
     "@jest/types": "27.5.1",
+    "@lexical/code": "^0.32.1",
+    "@lexical/history": "^0.32.1",
+    "@lexical/html": "^0.32.1",
+    "@lexical/link": "^0.32.1",
+    "@lexical/list": "^0.32.1",
+    "@lexical/markdown": "^0.32.1",
+    "@lexical/react": "^0.32.1",
+    "@lexical/rich-text": "^0.32.1",
     "@manypkg/cli": "^0.21.3",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
@@ -80,6 +89,7 @@
     "jest": "27.5.1",
     "jest-runner-eslint": "^2.2.0",
     "jest-watch-typeahead": "1.1.0",
+    "lexical": "^0.32.1",
     "lodash": "^4.17.21",
     "lodash.omit": "4.5.0",
     "msw": "^2.2.3",

src/components/container-form/attribute.tsx

@@ -65,6 +65,10 @@ const typeOptions = [
     label: <FormattedMessage {...messages.referenceLabel} />,
     value: TYPES.Reference,
   },
+  {
+    label: <FormattedMessage {...messages.richTextLabel} />,
+    value: TYPES.RichText,
+  },
 ];
 
 type Props = {

src/components/container-form/messages.ts

@@ -187,4 +187,9 @@ export default defineMessages({
     description: 'The error message for required fields',
     defaultMessage: 'This field is required. Provide a value.',
   },
+  richTextLabel: {
+    id: 'Container.form.type.label.richText',
+    description: 'Label for attributes rich text value',
+    defaultMessage: 'Rich Text',
+  },
 });

src/components/custom-object-form/attribute-input.tsx

@@ -18,6 +18,7 @@ import Spacings from '@commercetools-uikit/spacings';
 import { TYPES } from '../../constants';
 import nestedStyles from '../container-form/nested-attributes.module.css';
 import AttributeField from './attribute-field'; // eslint-disable-line import/no-cycle
+import LexicalEditorField from './lexical-editor-field';
 
 type Props = {
   type: string;
@@ -254,6 +255,27 @@ const AttributeInput: FC<Props> = ({
       );
     }
 
+    case TYPES.RichText:
+      return (
+        <Spacings.Stack scale="xs">
+          <LexicalEditorField
+            name={name}
+            initialValue={value}
+            onChange={(fieldName, newValue) => {
+              onChange({ target: { name: fieldName, value: newValue } });
+            }}
+            onBlur={() => {
+              if (onBlur) {
+                onBlur({ target: { name } });
+              }
+            }}
+          />
+          {touched && errors && (
+            <ErrorMessage data-testid="field-error-richtext">{errors}</ErrorMessage>
+          )}
+        </Spacings.Stack>
+      );
+
     case TYPES.Object:
       return (
         <div className={`${nestedStyles.nested}`}>