feat(admin-ui): Add rich text control form input

Relates to #415, relates to #722

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/prosemirror.scss

@@ -334,6 +334,6 @@
 
     .ProseMirror p {
         margin-bottom: 0.5rem;
-        color: var(--color-grey-800);
+        color: var(--color-grey-800) !important;
     }
 }

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/register-dynamic-input-components.ts

@@ -17,6 +17,7 @@ import { NumberFormInputComponent } from './number-form-input/number-form-input.
 import { PasswordFormInputComponent } from './password-form-input/password-form-input.component';
 import { ProductSelectorFormInputComponent } from './product-selector-form-input/product-selector-form-input.component';
 import { RelationFormInputComponent } from './relation-form-input/relation-form-input.component';
+import { RichTextFormInputComponent } from './rich-text-form-input/rich-text-form-input.component';
 import { SelectFormInputComponent } from './select-form-input/select-form-input.component';
 import { TextFormInputComponent } from './text-form-input/text-form-input.component';
 import { TextareaFormInputComponent } from './textarea-form-input/textarea-form-input.component';
@@ -34,6 +35,7 @@ export const defaultFormInputs = [
     PasswordFormInputComponent,
     RelationFormInputComponent,
     TextareaFormInputComponent,
+    RichTextFormInputComponent,
 ];
 
 /**

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/rich-text-form-input/rich-text-form-input.component.html

@@ -0,0 +1,4 @@
+<vdr-rich-text-editor
+    [readonly]="readonly"
+    [formControl]="formControl"
+></vdr-rich-text-editor>

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/rich-text-form-input/rich-text-form-input.component.scss

@@ -0,0 +1,7 @@
+:host {
+    textarea {
+        resize: both;
+        height: 6rem;
+        width: 100%;
+    }
+}

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/rich-text-form-input/rich-text-form-input.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { DefaultFormComponentConfig, DefaultFormComponentId } from '@vendure/common/lib/shared-types';
+
+import { FormInputComponent, InputComponentConfig } from '../../../common/component-registry-types';
+
+@Component({
+    selector: 'vdr-rich-text-form-input',
+    templateUrl: './rich-text-form-input.component.html',
+    styleUrls: ['./rich-text-form-input.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RichTextFormInputComponent implements FormInputComponent {
+    static readonly id: DefaultFormComponentId = 'rich-text-form-input';
+    readonly: boolean;
+    formControl: FormControl;
+    config: DefaultFormComponentConfig<'rich-text-form-input'>;
+}

packages/admin-ui/src/lib/core/src/shared/shared.module.ts

@@ -102,6 +102,7 @@ import {
 } from './dynamic-form-inputs/relation-form-input/relation-card/relation-card.component';
 import { RelationFormInputComponent } from './dynamic-form-inputs/relation-form-input/relation-form-input.component';
 import { RelationSelectorDialogComponent } from './dynamic-form-inputs/relation-form-input/relation-selector-dialog/relation-selector-dialog.component';
+import { RichTextFormInputComponent } from './dynamic-form-inputs/rich-text-form-input/rich-text-form-input.component';
 import { SelectFormInputComponent } from './dynamic-form-inputs/select-form-input/select-form-input.component';
 import { TextFormInputComponent } from './dynamic-form-inputs/text-form-input/text-form-input.component';
 import { TextareaFormInputComponent } from './dynamic-form-inputs/textarea-form-input/textarea-form-input.component';
@@ -242,6 +243,7 @@ const DYNAMIC_FORM_INPUTS = [
     RelationCardDetailDirective,
     RelationSelectorDialogComponent,
     TextareaFormInputComponent,
+    RichTextFormInputComponent,
 ];
 
 @NgModule({

packages/common/src/shared-types.ts

@@ -140,6 +140,7 @@ export type DefaultFormComponentId =
     | 'customer-group-form-input'
     | 'text-form-input'
     | 'textarea-form-input'
+    | 'rich-text-form-input'
     | 'password-form-input'
     | 'relation-form-input';
 
@@ -164,6 +165,7 @@ type DefaultFormConfigHash = {
     'textarea-form-input': {
         spellcheck?: boolean;
     };
+    'rich-text-form-input': {};
     'password-form-input': {};
     'relation-form-input': {};
 };