geonetwork-ui 2.4.0-dev.5cc37149 → 2.4.0-dev.614b0d9f

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -1,31 +1,19 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  OnDestroy,
-  OnInit,
+  ViewChild,
 } from '@angular/core'
-import {
-  FeatureInfoService,
-  MapContextLayerModel,
-  MapContextLayerTypeEnum,
-  MapContextModel,
-  MapManagerService,
-  MapStyleService,
-  MapUtilsService,
-} from '../../../../../../libs/feature/map/src'
-import { getOptionalMapConfig, MapConfig } from '../../../../../../libs/util/app-config/src'
+import { MapUtilsService } from '../../../../../../libs/feature/map/src'
 import { getLinkLabel } from '../../../../../../libs/util/shared/src'
-import Feature from 'ol/Feature'
-import { Geometry } from 'ol/geom'
-import { StyleLike } from 'ol/style/Style'
 import {
   BehaviorSubject,
   combineLatest,
   from,
   Observable,
   of,
-  Subscription,
+  startWith,
   throwError,
   withLatestFrom,
 } from 'rxjs'
@@ -34,13 +22,22 @@ import {
   distinctUntilChanged,
   finalize,
   map,
-  startWith,
   switchMap,
   tap,
 } from 'rxjs/operators'
 import { MdViewFacade } from '../state/mdview.facade'
 import { DataService } from '../../../../../../libs/feature/dataviz/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  createViewFromLayer,
+  MapContext,
+  MapContextLayer,
+} from '@geospatial-sdk/core'
+import {
+  MapContainerComponent,
+  prioritizePageScroll,
+} from '../../../../../../libs/ui/map/src'
+import { Feature } from 'geojson'
 
 @Component({
   selector: 'gn-ui-map-view',
@@ -48,11 +45,10 @@ import { DatasetDistribution } from '../../../../../../libs/common/domain/src/li
   styleUrls: ['./map-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MapViewComponent implements OnInit, OnDestroy {
-  mapConfig: MapConfig = getOptionalMapConfig()
-  selection: Feature<Geometry>
-  private subscription = new Subscription()
-  private selectionStyle: StyleLike
+export class MapViewComponent implements AfterViewInit {
+  @ViewChild('mapContainer') mapContainer: MapContainerComponent
+
+  selection: Feature
 
   compatibleMapLinks$ = combineLatest([
     this.mdViewFacade.mapApiLinks$,
@@ -102,93 +98,70 @@ export class MapViewComponent implements OnInit, OnDestroy {
     })
   )
 
-  mapContext$ = this.currentLayers$.pipe(
+  mapContext$: Observable<MapContext> = this.currentLayers$.pipe(
     switchMap((layers) =>
-      from(this.mapUtils.getLayerExtent(layers[0])).pipe(
-        catchError(() => {
-          this.error = 'The layer has no extent'
-          return of(undefined)
-        }),
-        map(
-          (extent) =>
-            ({
-              layers,
-              view: {
-                extent,
-              },
-            } as MapContextModel)
-        ),
-        tap((res) => {
+      from(createViewFromLayer(layers[0])).pipe(
+        catchError(() => of(null)), // could not zoom on the layer: use the record extent
+        map((view) => ({
+          layers,
+          view,
+        })),
+        tap(() => {
           this.resetSelection()
         })
       )
     ),
     startWith({
       layers: [],
-      view: {},
-    } as MapContextModel),
+      view: null,
+    }),
     withLatestFrom(this.mdViewFacade.metadata$),
     map(([context, metadata]) => {
-      if (context.view.extent) return context
+      if (context.view) return context
       const extent = this.mapUtils.getRecordExtent(metadata)
+      const view = extent ? { extent } : null
       return {
         ...context,
-        view: {
-          ...context.view,
-          extent,
-        },
+        view,
       }
     })
   )
 
   constructor(
     private mdViewFacade: MdViewFacade,
-    private mapManager: MapManagerService,
     private mapUtils: MapUtilsService,
     private dataService: DataService,
-    private featureInfo: FeatureInfoService,
-    private changeRef: ChangeDetectorRef,
-    private styleService: MapStyleService
+    private changeRef: ChangeDetectorRef
   ) {}
 
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe()
-  }
-
-  ngOnInit(): void {
-    this.mapUtils.prioritizePageScroll(this.mapManager.map.getInteractions())
-    this.selectionStyle = this.styleService.styles.defaultHL
-    this.featureInfo.handleFeatureInfo()
-    this.subscription.add(
-      this.featureInfo.features$.subscribe((features) => {
-        this.onMapFeatureSelect(features)
-      })
-    )
+  async ngAfterViewInit() {
+    const map = await this.mapContainer.openlayersMap
+    prioritizePageScroll(map.getInteractions())
   }
 
-  onMapFeatureSelect(features: Feature<Geometry>[]): void {
+  onMapFeatureSelect(features: Feature[]): void {
     this.resetSelection()
     this.selection = features?.length > 0 && features[0]
     if (this.selection) {
-      this.selection.setStyle(this.selectionStyle)
+      // FIXME: restore styling of selected feature
+      // this.selection.setStyle(this.selectionStyle)
     }
     this.changeRef.detectChanges()
   }
 
   resetSelection(): void {
     if (this.selection) {
-      this.selection.setStyle(null)
+      // FIXME: restore styling of selected feature
+      // this.selection.setStyle(null)
     }
     this.selection = null
   }
 
-  getLayerFromLink(
-    link: DatasetDistribution
-  ): Observable<MapContextLayerModel> {
+  getLayerFromLink(link: DatasetOnlineResource): Observable<MapContextLayer> {
     if (link.type === 'service' && link.accessServiceProtocol === 'wms') {
       return of({
         url: link.url.toString(),
-        type: MapContextLayerTypeEnum.WMS,
+        type: 'wms',
         name: link.name,
       })
     } else if (
@@ -197,7 +170,7 @@ export class MapViewComponent implements OnInit, OnDestroy {
     ) {
       return of({
         url: link.url.toString(),
-        type: MapContextLayerTypeEnum.WMTS,
+        type: 'wmts',
         name: link.name,
       })
     } else if (
@@ -209,7 +182,7 @@ export class MapViewComponent implements OnInit, OnDestroy {
     ) {
       return this.dataService.readAsGeoJson(link).pipe(
         map((data) => ({
-          type: MapContextLayerTypeEnum.GEOJSON,
+          type: 'geojson',
           data,
         }))
       )

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -63,7 +63,11 @@ export class MdViewFacade {
   chartConfig$ = this.store.pipe(select(MdViewSelectors.getChartConfig))
 
   allLinks$ = this.metadata$.pipe(
-    map((record) => ('distributions' in record ? record.distributions : []))
+    map((record) =>
+      record.kind === 'dataset' && 'onlineResources' in record
+        ? record.onlineResources
+        : []
+    )
   )
 
   apiLinks$ = this.allLinks$.pipe(

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

@@ -6,6 +6,7 @@
   (inputSubmitted)="handleInputSubmission($event)"
   (inputCleared)="handleInputCleared()"
   [value]="searchInputValue$ | async"
-  [clearOnSelection]="true"
+  [preventCompleteOnSelection]="true"
   [autoFocus]="autoFocus"
+  [allowSubmit]="true"
 ></gn-ui-autocomplete>

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.html

@@ -1,9 +1,12 @@
 <gn-ui-results-table
   [records]="records$ | async"
-  [recordHasDraft]="hasDraft"
+  [hasDraft]="hasDraft"
   [selectedRecordsIdentifiers]="selectedRecords$ | async"
   [sortOrder]="sortBy$ | async"
+  [isUnsavedDraft]="isUnsavedDraft"
   (recordClick)="handleRecordClick($event)"
+  (duplicateRecord)="handleDuplicateRecord($event)"
+  (deleteRecord)="handleDeleteRecord($event)"
   (recordsSelectedChange)="handleRecordsSelectedChange($event[0], $event[1])"
   (sortByChange)="handleSortByChange($event[0], $event[1])"
 ></gn-ui-results-table>

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -1,4 +1,10 @@
-import { Component, EventEmitter, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+} from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SearchFacade } from '../state/search.facade'
 import { SelectionService } from '../../../../../../libs/api/repository/src'
@@ -6,6 +12,9 @@ import { SearchService } from '../utils/service/search.service'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { ResultsTableComponent } from '../../../../../../libs/ui/search/src'
 import { CommonModule } from '@angular/common'
+import { Subscription } from 'rxjs'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-results-table-container',
@@ -14,8 +23,11 @@ import { CommonModule } from '@angular/common'
   standalone: true,
   imports: [CommonModule, ResultsTableComponent],
 })
-export class ResultsTableContainerComponent {
+export class ResultsTableContainerComponent implements OnDestroy {
   @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
+
+  subscription = new Subscription()
 
   records$ = this.searchFacade.results$
   selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
@@ -24,17 +36,64 @@ export class ResultsTableContainerComponent {
   hasDraft = (record: CatalogRecord): boolean =>
     this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
 
+  isUnsavedDraft = (record: CatalogRecord): boolean =>
+    this.recordsRepository.isRecordNotYetSaved(record.uniqueIdentifier)
+
   constructor(
     private searchFacade: SearchFacade,
     private searchService: SearchService,
     private selectionService: SelectionService,
-    private recordsRepository: RecordsRepositoryInterface
+    private recordsRepository: RecordsRepositoryInterface,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService
   ) {}
 
   handleRecordClick(item: unknown) {
     this.recordClick.emit(item as CatalogRecord)
   }
 
+  handleDuplicateRecord(item: unknown) {
+    this.duplicateRecord.emit(item as CatalogRecord)
+  }
+
+  async handleDeleteRecord(item: unknown) {
+    const uniqueIdentifier = (item as CatalogRecord).uniqueIdentifier
+    this.subscription.add(
+      this.recordsRepository.deleteRecord(uniqueIdentifier).subscribe({
+        next: () => {
+          this.recordsRepository.clearRecordDraft(uniqueIdentifier)
+          this.searchFacade.requestNewResults()
+          this.notificationsService.showNotification(
+            {
+              type: 'success',
+              title: this.translateService.instant(
+                'editor.record.deleteSuccess.title'
+              ),
+              text: `${this.translateService.instant(
+                'editor.record.deleteSuccess.body'
+              )}`,
+            },
+            2500
+          )
+        },
+        error: (error) => {
+          this.notificationsService.showNotification({
+            type: 'error',
+            title: this.translateService.instant(
+              'editor.record.deleteError.title'
+            ),
+            text: `${this.translateService.instant(
+              'editor.record.deleteError.body'
+            )} ${error}`,
+            closeMessage: this.translateService.instant(
+              'editor.record.deleteError.closeMessage'
+            ),
+          })
+        },
+      })
+    )
+  }
+
   handleSortByChange(col: string, order: 'asc' | 'desc') {
     this.searchService.setSortBy([order, col])
   }
@@ -46,4 +105,8 @@ export class ResultsTableContainerComponent {
       this.selectionService.selectRecords(records)
     }
   }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
 }

package/src/libs/feature/search/src/lib/state/fixtures/search-state.fixtures.ts

@@ -1,4 +1,4 @@
-export const SEARCH_STATE_FILTERS_FIXTURE = {
+export const searchStateFiltersFixture = () => ({
   recursiveTerms: {
     resourceType: {
       service: {
@@ -26,4 +26,4 @@ export const SEARCH_STATE_FILTERS_FIXTURE = {
       availableInViewService: '+linkProtocol:/OGC:WMS.*/',
     },
   },
-}
+})

package/src/libs/feature/search/src/lib/state/search.facade.ts

@@ -8,6 +8,7 @@ import {
   Paginate,
   RequestMoreOnAggregation,
   RequestMoreResults,
+  RequestNewResults,
   SetConfigAggregations,
   SetConfigFilters,
   SetConfigRequestFields,
@@ -151,6 +152,11 @@ export class SearchFacade {
     return this
   }
 
+  requestNewResults(): SearchFacade {
+    this.store.dispatch(new RequestNewResults(this.searchId))
+    return this
+  }
+
   requestMoreOnAggregation(key: string, increment: number): SearchFacade {
     this.store.dispatch(
       new RequestMoreOnAggregation(key, increment, this.searchId)

package/src/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.ts

@@ -6,12 +6,19 @@ import {
 } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { SortByField } from '../../../../../../libs/common/domain/src/lib/model/search'
-import { Subject, debounceTime } from 'rxjs'
+import { debounceTime, Subject } from 'rxjs'
+import {
+  DropdownSelectorComponent,
+  SearchInputComponent,
+} from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-organisations-filter',
   templateUrl: './organisations-filter.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [SearchInputComponent, DropdownSelectorComponent, TranslateModule],
 })
 export class OrganisationsFilterComponent {
   choices: { value: string; label: string }[] = [

package/src/libs/ui/catalog/src/lib/ui-catalog.module.ts

@@ -5,7 +5,6 @@ import { OrganisationPreviewComponent } from './organisation-preview/organisatio
 import { TranslateModule } from '@ngx-translate/core'
 import { MatIconModule } from '@angular/material/icon'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
-import { OrganisationsFilterComponent } from './organisations-filter/organisations-filter.component'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { LanguageSwitcherComponent } from './language-switcher/language-switcher.component'
 import { OrganisationsResultComponent } from './organisations-result/organisations-result.component'
@@ -15,7 +14,6 @@ import { RouterLink } from '@angular/router'
   declarations: [
     CatalogTitleComponent,
     OrganisationPreviewComponent,
-    OrganisationsFilterComponent,
     LanguageSwitcherComponent,
     OrganisationsResultComponent,
   ],
@@ -30,7 +28,6 @@ import { RouterLink } from '@angular/router'
   exports: [
     CatalogTitleComponent,
     OrganisationPreviewComponent,
-    OrganisationsFilterComponent,
     LanguageSwitcherComponent,
     OrganisationsResultComponent,
   ],

package/src/libs/ui/dataviz/src/lib/chart/chart.fixtures.ts

@@ -1,4 +1,4 @@
-export const CHART_ITEM_FIXTURE = [
+export const charItemFixture = () => [
   {
     name: 'name 1',
     id: 'id 1',
@@ -19,7 +19,7 @@ export const CHART_ITEM_FIXTURE = [
   },
 ]
 
-export const CHART_ITEM_FIXTURE_HAB = [
+export const chartItemHabFixture = () => [
   {
     name: 'France',
     id: '1',

package/src/libs/ui/dataviz/src/lib/table/table.fixtures.ts

@@ -1,4 +1,4 @@
-export const TABLE_ITEM_FIXTURE = [
+export const tableItemFixture = () => [
   {
     name: 'name 1',
     id: 'id 1',
@@ -16,7 +16,7 @@ export const TABLE_ITEM_FIXTURE = [
   },
 ]
 
-export const TABLE_ITEM_FIXTURE_HAB = [
+export const someHabTableItemFixture = () => [
   {
     name: 'France',
     id: '1',

package/src/libs/ui/elements/src/index.ts

@@ -1,5 +1,6 @@
 export * from './lib/api-card/api-card.component'
 export * from './lib/avatar/avatar.component'
+export * from './lib/confirmation-dialog/confirmation-dialog.component'
 export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
@@ -18,7 +19,7 @@ export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination/pagination.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
-export * from './lib/sortable-list/sortable-list.component'
 export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
 export * from './lib/user-preview/user-preview.component'
+export * from './lib/user-feedback-item/user-feedback-item.component'

package/src/libs/ui/elements/src/lib/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,12 @@
+<h1 mat-dialog-title>{{ data.title }}</h1>
+<div mat-dialog-content>{{ data.message }}</div>
+<div mat-dialog-actions>
+  <gn-ui-button (buttonClick)="onCancel()">{{ data.cancelText }}</gn-ui-button>
+  <gn-ui-button
+    (buttonClick)="onConfirm()"
+    cdkFocusInitial
+    class="ml-2"
+    data-cy="confirm-button"
+    >{{ data.confirmText }}</gn-ui-button
+  >
+</div>

package/src/libs/ui/elements/src/lib/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+export interface ConfirmationDialogData {
+  title: string
+  message: string
+  confirmText: string
+  cancelText: string
+}
+
+@Component({
+  selector: 'gn-ui-confirmation-dialog',
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrls: ['./confirmation-dialog.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatDialogModule, ButtonComponent],
+})
+export class ConfirmationDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmationDialogData
+  ) {}
+
+  onConfirm() {
+    this.dialogRef.close(true)
+  }
+
+  onCancel() {
+    this.dialogRef.close(false)
+  }
+}

package/src/libs/ui/elements/src/lib/download-item/download-item.component.ts

@@ -1,11 +1,11 @@
 import {
-  Component,
   ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
   Input,
   Output,
-  EventEmitter,
 } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-download-item',
@@ -14,7 +14,7 @@ import { DatasetDistribution } from '../../../../../../libs/common/domain/src/li
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DownloadItemComponent {
-  @Input() link: DatasetDistribution
+  @Input() link: DatasetOnlineResource
   @Input() color: string
   @Input() format: string
   @Input() isFromWfs: boolean

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 marker('datahub.search.filter.all')
 marker('datahub.search.filter.others')
@@ -19,11 +19,11 @@ type FilterFormat = typeof FILTER_FORMATS[number]
 export class DownloadsListComponent {
   constructor(private translateService: TranslateService) {}
 
-  @Input() links: DatasetDistribution[]
+  @Input() links: DatasetOnlineResource[]
 
   activeFilterFormats: FilterFormat[] = ['all']
 
-  get filteredLinks(): DatasetDistribution[] {
+  get filteredLinks(): DatasetOnlineResource[] {
     return this.links.filter((link) =>
       this.activeFilterFormats.some((format) =>
         this.isLinkOfFormat(link, format)
@@ -68,7 +68,7 @@ export class DownloadsListComponent {
     return format
   }
 
-  isLinkOfFormat(link: DatasetDistribution, format: FilterFormat): boolean {
+  isLinkOfFormat(link: DatasetOnlineResource, format: FilterFormat): boolean {
     if (format === 'all') {
       return true
     }
@@ -86,15 +86,15 @@ export class DownloadsListComponent {
     return getFileFormat(link).includes(format)
   }
 
-  getLinkFormat(link: DatasetDistribution) {
+  getLinkFormat(link: DatasetOnlineResource) {
     return getFileFormat(link)
   }
 
-  getLinkColor(link: DatasetDistribution) {
+  getLinkColor(link: DatasetOnlineResource) {
     return getBadgeColor(getFileFormat(link))
   }
 
-  isFromWfs(link: DatasetDistribution) {
+  isFromWfs(link: DatasetOnlineResource) {
     return link.type === 'download' && link.accessServiceProtocol === 'wfs'
   }
 }

package/src/libs/ui/elements/src/lib/link-card/link-card.component.ts

@@ -1,5 +1,5 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { MatIconModule } from '@angular/material/icon'
 import { CommonModule } from '@angular/common'
 
@@ -12,7 +12,7 @@ import { CommonModule } from '@angular/common'
   imports: [CommonModule, MatIconModule],
 })
 export class LinkCardComponent {
-  @Input() link: DatasetDistribution
+  @Input() link: DatasetOnlineResource
   @Input() compact = false
 
   get title() {

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

@@ -1,18 +1,14 @@
-<div class="h-full flex flex-col">
-  <p 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>