geonetwork-ui 2.4.0-dev.9075aa64 → 2.4.0-dev.9b37393d

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html

@@ -1,16 +1,10 @@
 <div class="flex flex-col gap-3">
   <div class="flex flex-row flex-wrap gap-2" data-test="rolesToPick">
     <ng-container *ngFor="let role of rolesToPick">
-      <gn-ui-button
-        extraClass="px-2 py-1.5"
-        (buttonClick)="addRoleToDisplay(role)"
-      >
-        <div class="flex flex-row gap-1 items-center">
-          <span class="text-primary text-[20px] leading-[0] font-bold pb-[5px]"
-            >&#8330;</span
-          >
-          <span class="font-bold" translate>{{ roleToLabel(role) }}</span>
-        </div>
+      <gn-ui-button type="gray" (buttonClick)="addRoleToDisplay(role)">
+        <mat-icon class="material-symbols-outlined text-primary">add</mat-icon>
+        &nbsp;
+        <span translate>{{ roleToLabel(role) }}</span>
       </gn-ui-button>
     </ng-container>
   </div>
@@ -43,33 +37,19 @@
         [displayWithFn]="displayWithFn"
         [minCharacterCount]="1"
         [clearOnSelection]="true"
+        [allowSubmit]="false"
       >
       </gn-ui-autocomplete>
 
       <ng-container *ngIf="contactsForRessourceByRole.get(role) as contacts">
-        <ng-container *ngIf="contacts.length > 1">
-          <gn-ui-sortable-list
-            [items]="contacts"
-            (itemsOrderChange)="handleContactsChanged($event)"
-            [elementTemplate]="contactTemplate"
-          ></gn-ui-sortable-list>
-          <ng-template #contactTemplate let-contact>
-            <div class="flex flex-row items-center gap-2">
-              <gn-ui-contact-card
-                [contact]="contact"
-                [removable]="false"
-              ></gn-ui-contact-card>
-            </div>
-          </ng-template>
-        </ng-container>
-        <ng-container *ngIf="contacts.length === 1">
-          <ng-container *ngFor="let contact of contacts">
-            <gn-ui-contact-card
-              [contact]="contact"
-              (contactRemoved)="removeContact(index)"
-            ></gn-ui-contact-card>
-          </ng-container>
-        </ng-container>
+        <gn-ui-sortable-list
+          [items]="contacts"
+          (itemsOrderChange)="handleContactsChanged($event)"
+          [elementTemplate]="contactTemplate"
+        ></gn-ui-sortable-list>
+        <ng-template #contactTemplate let-contact>
+          <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+        </ng-template>
       </ng-container>
 
       <hr class="border-t-[#D6D3D1] mt-4 mb-6" *ngIf="!isLast" />

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.ts

@@ -34,6 +34,7 @@ import {
 } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { ContactCardComponent } from '../../../contact-card/contact-card.component'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-form-field-contacts-for-resource',
@@ -50,6 +51,7 @@ import { ContactCardComponent } from '../../../contact-card/contact-card.compone
     TranslateModule,
     ContactCardComponent,
     SortableListComponent,
+    MatIconModule,
   ],
 })
 export class FormFieldContactsForResourceComponent

package/src/libs/feature/editor/src/lib/components/record-form/form-field/{form-field-resource-updated/form-field-resource-updated.component.ts → form-field-date-updated/form-field-date-updated.component.ts}

@@ -8,14 +8,14 @@ import {
 import { DatePickerComponent } from '../../../../../../../../../libs/ui/inputs/src'
 
 @Component({
-  selector: 'gn-ui-form-field-resource-updated',
-  templateUrl: './form-field-resource-updated.component.html',
-  styleUrls: ['./form-field-resource-updated.component.css'],
+  selector: 'gn-ui-form-field-date-updated',
+  templateUrl: './form-field-date-updated.component.html',
+  styleUrls: ['./form-field-date-updated.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [DatePickerComponent],
 })
-export class FormFieldResourceUpdatedComponent {
+export class FormFieldDateUpdatedComponent {
   @Input() value: Date
   @Output() valueChange: EventEmitter<Date> = new EventEmitter()
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.html

@@ -1,9 +1,10 @@
 <div class="flex flex-col gap-3">
   <gn-ui-generic-keywords
-    [keywords]="value"
+    [keywords]="filteredKeywords"
     [keywordTypes]="keywordTypes"
-    [placeholder]="placeholder | translate"
+    [placeholder]="'editor.form.keywords.placeholder' | translate"
     (changedKeywords)="handleKeywordsChange($event)"
+    [allowSubmit]="false"
   >
   </gn-ui-generic-keywords>
 </div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.ts

@@ -16,6 +16,10 @@ import { Keyword } from '../../../../../../../../../libs/common/domain/src/lib/m
 import { GenericKeywordsComponent } from '../../../generic-keywords/generic-keywords.component'
 import { TranslateModule } from '@ngx-translate/core'
 import { KeywordType } from '../../../../../../../../../libs/common/domain/src/lib/model/thesaurus'
+import { EditorFacade } from '../../../../+state/editor.facade'
+import { firstValueFrom, map } from 'rxjs'
+import { SPATIAL_SCOPES } from '../../../../fields.config'
+import { all } from 'ol/loadingstrategy'
 
 @Component({
   selector: 'gn-ui-form-field-keywords',
@@ -38,9 +42,37 @@ export class FormFieldKeywordsComponent {
   @Output() valueChange: EventEmitter<Keyword[]> = new EventEmitter()
 
   keywordTypes = ['temporal', 'theme', 'other'] as KeywordType[]
-  placeholder = 'editor.form.keywords.placeholder'
 
-  handleKeywordsChange(keywords: Keyword[]) {
-    this.valueChange.emit(keywords)
+  get filteredKeywords(): Keyword[] {
+    return (
+      this.value?.filter(
+        (keyword) =>
+          keyword.type !== 'place' && // filter out place keywords
+          !SPATIAL_SCOPES.some(
+            (spatialScope) => spatialScope.label === keyword.label
+          ) // filter out keywords matching spatialScope keys
+      ) || []
+    )
+  }
+
+  constructor(private editorFacade: EditorFacade) {}
+
+  async handleKeywordsChange(keywords: Keyword[]) {
+    const filteredKeywords = await firstValueFrom(
+      this.editorFacade.record$.pipe(
+        map((record) =>
+          record.keywords.filter(
+            (k) =>
+              k.type === 'place' || // get back place keyword
+              SPATIAL_SCOPES.some(
+                (spatialScope) => spatialScope.label === k.label // get back spatialScope keywords
+              )
+          )
+        )
+      )
+    )
+
+    const allKeywords = [...filteredKeywords, ...keywords]
+    this.valueChange.emit(allKeywords)
   }
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-license/form-field-license.component.css

@@ -0,0 +1,8 @@
+:host {
+  display: grid; /* this is required to be able to size the dropdown */
+}
+
+gn-ui-dropdown-selector {
+  /* FIXME: this includes the grid gap from the editor form, but there should be no dependency */
+  max-width: calc(50% - 16px);
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-link-resources/form-field-online-link-resources.component.html

@@ -5,6 +5,7 @@
   [uploadProgress]="uploadProgress"
   (urlChange)="handleUrlChange($event)"
 ></gn-ui-file-input>
+<div class="h-[8px]"></div>
 <gn-ui-sortable-list
   [items]="linkResources"
   (itemsOrderChange)="handleResourcesChange($event)"

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.html

@@ -1,20 +1,27 @@
 <gn-ui-form-field-wrapper [label]="label" [hint]="hint">
   <gn-ui-button
     form-field-interaction
-    [extraClass]="getButtonExtraClass()"
+    [type]="preview ? 'black' : 'gray'"
+    style="
+      --gn-ui-button-padding: 3px 8px;
+      --gn-ui-button-font-size: 12px;
+      --gn-ui-button-rounded: 20px;
+    "
     (buttonClick)="togglePreview()"
   >
-    <span class="material-symbols-outlined mr-1 gn-ui-icon-small">{{
-      preview ? 'visibility' : 'visibility_off'
-    }}</span>
+    <span
+      class="material-symbols-outlined gn-ui-icon-small"
+      [ngClass]="{ 'text-primary': !preview }"
+      >{{ preview ? 'visibility' : 'visibility_off' }}</span
+    >
+    &nbsp;
     {{ preview ? 'WYSIWYG' : 'Markdown' }}
   </gn-ui-button>
   <gn-ui-markdown-editor
-    class="h-full"
     [preview]="preview"
-    [helperText]="helperText"
     [placeholder]="placeholder"
     [textContent]="value"
     (textContentChanged)="valueChange.emit($event)"
+    textAreaExtraClass="min-h-[100px]"
   ></gn-ui-markdown-editor>
 </gn-ui-form-field-wrapper>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.ts

@@ -1,11 +1,9 @@
 import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
-  OnInit,
   Output,
 } from '@angular/core'
 import { ReactiveFormsModule } from '@angular/forms'
@@ -30,7 +28,6 @@ import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/la
 export class FormFieldRichComponent {
   @Input() label: string
   @Input() hint: string
-  @Input() helperText: string
   @Input() placeholder = 'Votre texte ici' //TODO: translate
   @Input() value: string
 
@@ -38,12 +35,6 @@ export class FormFieldRichComponent {
 
   preview = false
 
-  getButtonExtraClass() {
-    return `${
-      this.preview ? 'text-gray-200 bg-gray-900' : 'text-gray-900 bg-gray-200'
-    } rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24`
-  }
-
   togglePreview() {
     this.preview = !this.preview
   }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html

@@ -13,7 +13,7 @@
   >
   </gn-ui-generic-keywords>
 </div>
-<div class="w-full h-96">
+<div class="w-full h-96 mt-2">
   <gn-ui-form-field-map-container
     [spatialExtents]="spatialExtents$ | async"
   ></gn-ui-form-field-map-container>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts

@@ -175,16 +175,27 @@ export class FormFieldSpatialExtentComponent {
             ...(thesaurus && { thesaurus }),
           } as Keyword)
       )
-    const notPlaceKeywords = await firstValueFrom(
+
+    const notPlaceKwAndSpatialScopeKw = await firstValueFrom(
       this.editorFacade.record$.pipe(
-        map((record) => record.keywords.filter((k) => k.type !== 'place'))
+        map((record) =>
+          record.keywords.filter(
+            (k) =>
+              k.type !== 'place' ||
+              SPATIAL_SCOPES.some(
+                (spatialScope) => spatialScope.label === k.label // get back spatialScope keywords
+              )
+          )
+        )
       )
     )
 
-    this.editorFacade.updateRecordField('keywords', [
-      ...notPlaceKeywords,
+    const allKeywords = [
+      ...notPlaceKwAndSpatialScopeKw,
       ...filteredPlaceKeywords,
-    ])
+    ]
+
+    this.editorFacade.updateRecordField('keywords', allKeywords)
     this.editorFacade.updateRecordField('spatialExtents', spatialExtents)
   }
 

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.css

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.html

@@ -1,9 +1,10 @@
 <div class="flex gap-2 mb-2">
   <gn-ui-button
+    type="gray"
     *ngFor="let addOption of addOptions$ | async"
     (buttonClick)="onAdd(addOption.eventName)"
   >
-    <span class="material-symbols-outlined gn-ui-icon-small"> add </span>
+    <mat-icon class="material-symbols-outlined text-primary">add</mat-icon>
     &nbsp;{{ addOption.buttonLabel }}</gn-ui-button
   >
 </div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.ts

@@ -15,6 +15,7 @@ import {
 } from '../../../../../../../../../libs/ui/inputs/src'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { combineLatest, map } from 'rxjs'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-form-field-temporal-extents',
@@ -29,6 +30,7 @@ import { combineLatest, map } from 'rxjs'
     DatePickerComponent,
     DateRangePickerComponent,
     TranslateModule,
+    MatIconModule,
   ],
 })
 export class FormFieldTemporalExtentsComponent {

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.css

@@ -0,0 +1,4 @@
+gn-ui-dropdown-selector {
+  /* FIXME: this includes the grid gap from the editor form, but there should be no dependency */
+  max-width: calc(50% - 16px);
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.html

@@ -1,14 +1,16 @@
-<gn-ui-check-toggle
-  [label]="'editor.record.form.updateFrequency.planned' | translate"
-  [value]="planned"
-  (toggled)="onPlannedToggled()"
-></gn-ui-check-toggle>
-<gn-ui-dropdown-selector
-  title="updateFrequency"
-  [showTitle]="false"
-  [choices]="choices"
-  [selected]="selectedFrequency"
-  (selectValue)="onSelectFrequencyValue($event)"
-  [disabled]="!planned"
->
-</gn-ui-dropdown-selector>
+<div class="flex flex-col gap-2">
+  <gn-ui-check-toggle
+    [label]="'editor.record.form.updateFrequency.planned' | translate"
+    [value]="planned"
+    (toggled)="onPlannedToggled()"
+  ></gn-ui-check-toggle>
+  <gn-ui-dropdown-selector
+    title="updateFrequency"
+    [showTitle]="false"
+    [choices]="choices"
+    [selected]="selectedFrequency"
+    (selectValue)="onSelectFrequencyValue($event)"
+    [disabled]="!planned"
+  >
+  </gn-ui-dropdown-selector>
+</div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html

@@ -22,30 +22,31 @@
 <ng-template #fieldContent>
   <ng-container [ngSwitch]="model">
     <ng-container *ngSwitchCase="'title'">
-      <div class="flex justify-between items-center gap-3">
+      <div class="flex flex-row flex-start items-center gap-3 mb-[12px]">
         <span
           #titleInput
           class="grow font-title text-3xl font-normal"
           [gnUiEditableLabel]="valueAsString"
           (editableLabelChanged)="valueChange.emit($event)"
         ></span>
-        <span
-          class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
-          (click)="focusTitleInput()"
-          >edit</span
-        >
-        <span
-          class="material-symbols-outlined gn-ui-icon-small m-2"
-          [matTooltip]="config.hintKey! | translate"
-          matTooltipPosition="above"
-        >
-          help
-        </span>
+        <div class="flex flex-row justify-between">
+          <span
+            class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
+            (click)="focusTitleInput()"
+            >edit</span
+          >
+          <span
+            class="material-symbols-outlined gn-ui-icon-small m-2"
+            [matTooltip]="config.hintKey! | translate"
+            matTooltipPosition="above"
+          >
+            help
+          </span>
+        </div>
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="'abstract'">
       <gn-ui-form-field-rich
-        class="h-[8rem]"
         [label]="config.labelKey! | translate"
         [hint]="config.hintKey! | translate"
         [value]="valueAsString"
@@ -68,18 +69,16 @@
       ></gn-ui-form-field-simple>
     </ng-container>
     <ng-container *ngSwitchCase="'resourceUpdated'">
-      <gn-ui-form-field-resource-updated
+      <gn-ui-form-field-date-updated
         [value]="valueAsDate"
         (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-resource-updated>
+      ></gn-ui-form-field-date-updated>
     </ng-container>
     <ng-container *ngSwitchCase="'recordUpdated'">
-      <gn-ui-form-field-simple
-        type="date"
-        [readonly]="true"
+      <gn-ui-form-field-date-updated
         [value]="valueAsDate"
         (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-simple>
+      ></gn-ui-form-field-date-updated>
     </ng-container>
     <ng-container *ngSwitchCase="'updateFrequency'">
       <gn-ui-form-field-update-frequency

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts

@@ -25,7 +25,7 @@ import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layou
 import { TranslateModule } from '@ngx-translate/core'
 import {
   FormFieldLicenseComponent,
-  FormFieldResourceUpdatedComponent,
+  FormFieldDateUpdatedComponent,
   FormFieldTemporalExtentsComponent,
 } from '.'
 import { FieldModelSpecifier, FormFieldConfig } from '../../../models'
@@ -56,7 +56,7 @@ import { FormFieldOnlineLinkResourcesComponent } from './form-field-online-link-
     MatTooltipModule,
     FormFieldWrapperComponent,
     FormFieldLicenseComponent,
-    FormFieldResourceUpdatedComponent,
+    FormFieldDateUpdatedComponent,
     FormFieldUpdateFrequencyComponent,
     FormFieldTemporalExtentsComponent,
     FormFieldSimpleComponent,

package/src/libs/feature/editor/src/lib/components/record-form/form-field/index.ts

@@ -1,6 +1,6 @@
 export * from './form-field-keywords/form-field-keywords.component'
 export * from './form-field-license/form-field-license.component'
-export * from './form-field-resource-updated/form-field-resource-updated.component'
+export * from './form-field-date-updated/form-field-date-updated.component'
 export * from './form-field-temporal-extents/form-field-temporal-extents.component'
 export * from './form-field-simple/form-field-simple.component'
 export * from './form-field-file/form-field-file.component'

package/src/libs/feature/editor/src/lib/components/record-form/record-form.component.html

@@ -1,32 +1,28 @@
-<ng-container>
-  <div class="flex flex-col gap-6 p-8">
-    <ng-container
-      *ngFor="
-        let section of facade.currentSections$ | async;
-        trackBy: sectionTracker
-      "
-    >
-      <ng-container *ngIf="!section.hidden">
-        <div class="flex flex-col gap-8 border p-8 rounded-[8px] shadow">
+<div class="flex flex-col gap-6">
+  <ng-container
+    *ngFor="
+      let section of facade.currentSections$ | async;
+      trackBy: sectionTracker
+    "
+  >
+    <ng-container *ngIf="!section.hidden">
+      <div class="flex flex-col gap-8 border p-8 rounded-[8px] shadow">
+        <div
+          class="flex flex-col gap-2"
+          [ngClass]="section.labelKey ? 'mb-4' : 'hidden'"
+        >
           <div
-            class="flex flex-col gap-2"
-            [ngClass]="section.labelKey ? 'mb-4' : 'hidden'"
+            *ngIf="section.labelKey"
+            class="text-2xl font-title text-main"
+            translate
           >
-            <div
-              *ngIf="section.labelKey"
-              class="text-2xl font-title text-secondary"
-              translate
-            >
-              {{ section.labelKey }}
-            </div>
-            <div
-              *ngIf="section.descriptionKey"
-              class="text-secondary-lightest"
-              translate
-            >
-              {{ section.descriptionKey }}
-            </div>
+            {{ section.labelKey }}
           </div>
+          <div *ngIf="section.descriptionKey" class="text-gray-800" translate>
+            {{ section.descriptionKey }}
+          </div>
+        </div>
+        <div class="grid auto-rows-auto grid-cols-2 gap-[32px]">
           <ng-container
             *ngFor="
               let field of section.fieldsWithValues;
@@ -35,6 +31,11 @@
           >
             <ng-container *ngIf="!field.config.hidden">
               <gn-ui-form-field
+                [ngClass]="
+                  field.config.gridColumnSpan === 1
+                    ? 'col-span-1'
+                    : 'col-span-2'
+                "
                 [uniqueIdentifier]="recordUniqueIdentifier$ | async"
                 [model]="field.config.model!"
                 [modelSpecifier]="field.config.modelSpecifier!"
@@ -47,7 +48,7 @@
             </ng-container>
           </ng-container>
         </div>
-      </ng-container>
+      </div>
     </ng-container>
-  </div>
-</ng-container>
+  </ng-container>
+</div>

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -45,6 +45,7 @@ export const RECORD_RESOURCE_UPDATED_FIELD: EditorField = {
   formFieldConfig: {
     labelKey: marker('editor.record.form.field.resourceUpdated'),
   },
+  gridColumnSpan: 1,
 }
 
 export const RECORD_UPDATED_FIELD: EditorField = {
@@ -54,14 +55,15 @@ export const RECORD_UPDATED_FIELD: EditorField = {
     locked: true,
   },
   onSaveProcess: '${dateNow()}',
+  gridColumnSpan: 1,
 }
 
 export const RECORD_UPDATE_FREQUENCY_FIELD: EditorField = {
   model: 'updateFrequency',
-  formFieldConfig: {
-    labelKey: marker('editor.record.form.field.updateFrequency'),
-  },
+  formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.updateFrequency')
 
 export const RECORD_TEMPORAL_EXTENTS_FIELD: EditorField = {
   model: 'temporalExtents',

package/src/libs/feature/editor/src/lib/models/editor-config.model.ts

@@ -32,6 +32,9 @@ export interface EditorField {
   model?: CatalogRecordKeys
   modelSpecifier?: FieldModelSpecifier
 
+  // grid column span; if unspecified, full width will be used
+  gridColumnSpan?: number
+
   // a hidden field won't show but can still be used to modify the record
   // FIXME: currently this is redundant with an absence of formFieldConfig but necessary for clarity
   hidden?: boolean

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html

@@ -8,4 +8,5 @@
   [value]="searchInputValue$ | async"
   [preventCompleteOnSelection]="true"
   [autoFocus]="autoFocus"
+  [allowSubmit]="true"
 ></gn-ui-autocomplete>

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html

@@ -1,21 +1,14 @@
-<div class="h-full flex flex-col">
-  <p
-    *ngIf="helperText"
-    class="flex-none mb-2 font-medium text-sm text-gray-900"
-  >
-    {{ helperText }}
-  </p>
-  <div class="flex-1" [hidden]="preview">
-    <gn-ui-text-area
-      [placeholder]="placeholder"
-      [value]="textContent"
-      (valueChange)="textContentChangedHandler($event)"
-    ></gn-ui-text-area>
-  </div>
-  <div
-    class="flex-1 border border-gray-800 rounded overflow-y-scroll"
-    [hidden]="!preview"
-  >
-    <gn-ui-markdown-parser [textContent]="textContent"></gn-ui-markdown-parser>
-  </div>
+<gn-ui-text-area
+  [hidden]="preview"
+  [placeholder]="placeholder"
+  [value]="textContent"
+  [extraClass]="textAreaExtraClass + ' !leading-normal'"
+  (valueChange)="textContentChangedHandler($event)"
+></gn-ui-text-area>
+
+<div
+  class="gn-ui-text-input border-gray-100 hover:border-gray-100"
+  [hidden]="!preview"
+>
+  <gn-ui-markdown-parser [textContent]="textContent"></gn-ui-markdown-parser>
 </div>

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.ts

@@ -32,9 +32,9 @@ import { MatTooltipModule } from '@angular/material/tooltip'
 })
 export class MarkdownEditorComponent {
   @Input() preview = false
-  @Input() helperText?: string
   @Input() placeholder: string
   @Input() textContent: string
+  @Input() textAreaExtraClass = ''
   @Output() textContentChanged: EventEmitter<string> =
     new EventEmitter<string>()