Merge pull request #807 from geonetwork/ME/add-rich-text-input-component

Metadata Editor: add rich text input component

libs/feature/search/src/lib/results-list/results-list.container.component.spec.ts

@@ -47,9 +47,9 @@ describe('ResultsListContainerComponent', () => {
       declarations: [
         ResultsListContainerComponent,
         ResultsListMockComponent,
-        ButtonComponent,
         ViewportIntersectorMockComponent,
       ],
+      imports: [ButtonComponent],
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
         {

libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.css

@@ -0,0 +1,5 @@
+.icon-small {
+  font-size: 16px;
+  height: 16px;
+  width: 16px;
+}

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

@@ -0,0 +1,39 @@
+<div class="h-full flex flex-col">
+  <div class="flex-none w-full flex flex-row items-center">
+    <p class="flex-none font-bold">{{ label }}</p>
+    <div class="flex-1 flex justify-end items-center">
+      <gn-ui-button
+        [extraClass]="getButtonExtraClass()"
+        (buttonClick)="togglePreview()"
+      >
+        <span class="material-symbols-outlined mr-1 icon-small">{{
+          preview ? 'visibility' : 'visibility_off'
+        }}</span>
+        {{ preview ? 'WYSIWYG' : 'Markdown' }}
+      </gn-ui-button>
+      <span
+        class="material-symbols-outlined m-2 icon-small"
+        [matTooltip]="tooltip"
+        matTooltipPosition="above"
+      >
+        help
+      </span>
+    </div>
+  </div>
+  <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>
+</div>

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

@@ -0,0 +1,20 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { MarkdownEditorComponent } from './markdown-editor.component'
+
+describe('MarkdownEditorComponent', () => {
+  let component: MarkdownEditorComponent
+  let fixture: ComponentFixture<MarkdownEditorComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MarkdownEditorComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(MarkdownEditorComponent)
+    component = fixture.componentInstance
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,159 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'
+import { MarkdownEditorComponent } from './markdown-editor.component'
+
+export default {
+  title: 'Elements/MarkdownEditorComponent',
+  component: MarkdownEditorComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [MarkdownEditorComponent],
+    }),
+  ],
+} as Meta<MarkdownEditorComponent>
+
+export const Primary: StoryObj<MarkdownEditorComponent> = {
+  args: {
+    label: 'Some label',
+    tooltip: 'Some tooltip',
+    helperText: 'Some helper text',
+    placeholder: 'Some placeholder',
+    textContent: ` 
+# SUPPORTED MARKDOWN CONTENT
+
+## 1) Headings
+
++ # h1 Heading
++ ## h2 Heading
++ ### h3 Heading
++ #### h4 Heading
++ ##### h5 Heading
++ ###### h6 Heading
+
+
+## 2) Horizontal Rules
+
++ ___
+
++ ---
+
++ ***
+
+## 3) Emphasis
+
++ **This is bold text**
+
++ __This is bold text__
+
++ *This is italic text*
+
++ _This is italic text_
+
++ ~~Strikethrough~~
+
+
+## 3) Blockquotes
+
+
+> Blockquotes can also be nested...
+>> ...by using additional greater-than signs right next to each other...
+> > > ...or with spaces between arrows.
+
+
+## 4) Lists
+
+**Unordered**
+
++ Create a list by starting a line with +, -, or *
++ Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    * Ac tristique libero volutpat at
+    + Facilisis in pretium nisl aliquet
+    - Nulla volutpat aliquam velit
++ List continue here
+
+**Ordered**
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+
+1. You can use sequential numbers...
+1. ...or keep all the numbers as 1.
+
+**Start numbering with offset:**
+
+57. foo
+1. bar
+
+
+## 5) Code
+
+**Inline code**
+
+(no example)
+
+**Indented code**
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+
+**Block code "fences"**
+
+(no example)
+
+
+## 6) Tables
+
+**Left aligned columns**
+
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+**Right aligned columns**
+
+| Option | Description |
+| ------:| -----------:|
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+
+## 7) Links
+
+[link text](https://github.com/geonetwork/geonetwork-ui)
+
+[link with title](https://github.com/geonetwork/geonetwork-ui "title text!")
+
+
+## 8) Images
+
+**With and without title**
+
+![Geonetwork](https://geonetwork-opensource.org/_static/chrome/geonetwork3-logo.png "Geonetwork title")`,
+  },
+  argTypes: {
+    textContent: {
+      control: 'text',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+    <div style="width: 600px;height: 400px;">
+      <gn-ui-markdown-editor
+        [label]="label"
+        [tooltip]="tooltip"
+        [helperText]="helperText"
+        [placeholder]="placeholder"
+        [textContent]="textContent"
+      ></gn-ui-markdown-editor>
+    </div>`,
+  }),
+}

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

@@ -0,0 +1,58 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component'
+import { TranslateModule } from '@ngx-translate/core'
+import { ButtonComponent, TextAreaComponent } from '@geonetwork-ui/ui/inputs'
+import { MatIconModule } from '@angular/material/icon'
+import { MatTooltipModule } from '@angular/material/tooltip'
+
+@Component({
+  selector: 'gn-ui-markdown-editor',
+  templateUrl: './markdown-editor.component.html',
+  styleUrls: ['./markdown-editor.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule,
+    MatTooltipModule,
+    ButtonComponent,
+    TextAreaComponent,
+    MarkdownParserComponent,
+    TranslateModule,
+  ],
+})
+export class MarkdownEditorComponent {
+  @Input() label: string
+  @Input() tooltip?: string
+  @Input() helperText?: string
+  @Input() placeholder: string
+  @Input() textContent: string
+  @Output() textContentChanged: EventEmitter<string> =
+    new EventEmitter<string>()
+
+  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
+  }
+
+  textContentChangedHandler(textContent: string) {
+    this.textContent = textContent
+    this.textContentChanged.emit(this.textContent)
+  }
+}

libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.spec.ts

@@ -7,7 +7,7 @@ describe('MarkdownParserComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [MarkdownParserComponent],
+      imports: [MarkdownParserComponent],
     }).compileComponents()
 
     fixture = TestBed.createComponent(MarkdownParserComponent)

libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.stories.ts

@@ -6,7 +6,7 @@ export default {
   component: MarkdownParserComponent,
   decorators: [
     moduleMetadata({
-      declarations: [MarkdownParserComponent],
+      imports: [MarkdownParserComponent],
     }),
   ],
 } as Meta<MarkdownParserComponent>

libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.ts

@@ -6,6 +6,7 @@ import { marked } from 'marked'
   templateUrl: './markdown-parser.component.html',
   styleUrls: ['./markdown-parser.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class MarkdownParserComponent {
   @Input() textContent: string

libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.stories.ts

@@ -15,8 +15,9 @@ export default {
   component: PaginationButtonsComponent,
   decorators: [
     moduleMetadata({
-      declarations: [ButtonComponent, MatIcon],
+      declarations: [MatIcon],
       imports: [
+        ButtonComponent,
         UtilI18nModule,
         FormsModule,
         TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG),

libs/ui/elements/src/lib/pagination/pagination.component.stories.ts

@@ -19,8 +19,9 @@ export default {
   component: PaginationComponent,
   decorators: [
     moduleMetadata({
-      declarations: [ButtonComponent, MatIcon],
+      declarations: [MatIcon],
       imports: [
+        ButtonComponent,
         UtilI18nModule,
         FormsModule,
         TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG),

libs/ui/elements/src/lib/ui-elements.module.ts

@@ -45,6 +45,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     UiInputsModule,
     FormsModule,
     NgOptimizedImage,
+    MarkdownParserComponent,
   ],
   declarations: [
     MetadataInfoComponent,
@@ -67,7 +68,6 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     PaginationButtonsComponent,
     MaxLinesComponent,
     RecordApiFormComponent,
-    MarkdownParserComponent,
     ImageOverlayPreviewComponent,
   ],
   exports: [

libs/ui/inputs/src/lib/button/button.component.spec.ts

@@ -8,7 +8,7 @@ describe('ButtonComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ButtonComponent],
+      imports: [ButtonComponent],
     }).compileComponents()
   })
 

libs/ui/inputs/src/lib/button/button.component.ts

@@ -12,6 +12,7 @@ import { propagateToDocumentOnly } from '@geonetwork-ui/util/shared'
   templateUrl: './button.component.html',
   styleUrls: ['./button.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class ButtonComponent {
   private btnClass: string

libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.spec.ts

@@ -14,8 +14,9 @@ describe('DropdownMultiselectComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DropdownMultiselectComponent, ButtonComponent],
+      declarations: [DropdownMultiselectComponent],
       imports: [
+        ButtonComponent,
         OverlayModule,
         MatIconModule,
         TranslateModule.forRoot(),