Angular support for nimble-rich-text-editor

angular-workspace/projects/example-client-app/src/app/app.module.ts

@@ -19,6 +19,7 @@ import { NimbleTableColumnAnchorModule } from '@ni/nimble-angular/table-column/a
 import { NimbleTableColumnDateTextModule } from '@ni/nimble-angular/table-column/date-text';
 import { NimbleTableColumnEnumTextModule } from '@ni/nimble-angular/table-column/enum-text';
 import { NimbleRichTextViewerModule } from '@ni/nimble-angular/rich-text-viewer';
+import { NimbleRichTextEditorModule } from '@ni/nimble-angular/rich-text-editor';
 import { AppComponent } from './app.component';
 import { CustomAppComponent } from './customapp/customapp.component';
 import { HeaderComponent } from './header/header.component';
@@ -81,6 +82,7 @@ import { HeaderComponent } from './header/header.component';
         NimbleMappingTextModule,
         NimbleBannerModule,
         NimbleRichTextViewerModule,
+        NimbleRichTextEditorModule,
         RouterModule.forRoot(
             [
                 { path: '', redirectTo: '/customapp', pathMatch: 'full' },

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html

@@ -170,10 +170,18 @@
                 <nimble-list-option *ngFor="let item of comboboxItems" [ngValue]="item">{{ item ? item.first : '' }}</nimble-list-option>
             </nimble-combobox>
         </div>
+        <div class="sub-container">
+            <div class="container-label">Rich Text Editor</div>
+            <div class="rich-text-editor-container">
+                <nimble-rich-text-editor placeholder="Rich text editor" #editor>
+                    <nimble-button slot="footer-actions" (click)="loadContent()">Load Content</nimble-button>
+                </nimble-rich-text-editor>
+            </div>
+        </div>
         <div class="sub-container">
             <div class="container-label">Rich Text Viewer</div>
             <div class="rich-text-viewer-container">
-                <nimble-rich-text-viewer [markdown]="markdownString"></nimble-rich-text-viewer>
+                <nimble-rich-text-viewer [markdown]="viewerMarkdownString"></nimble-rich-text-viewer>
             </div>
         </div>
         <div class="sub-container">

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.scss

@@ -83,3 +83,7 @@ nimble-table {
     padding: $ni-nimble-small-padding;
     width: 350px;
 }
+
+.rich-text-editor-container {
+    padding: $ni-nimble-small-padding;
+}

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.ts

@@ -3,6 +3,7 @@ import { Component, Inject, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { DrawerLocation, MenuItem, NimbleDialogDirective, NimbleDrawerDirective, OptionNotFound, OPTION_NOT_FOUND, UserDismissed } from '@ni/nimble-angular';
 import type { TableRecord } from '@ni/nimble-angular/table';
+import { NimbleRichTextEditorDirective } from '@ni/nimble-angular/rich-text-editor';
 import { BehaviorSubject, Observable } from 'rxjs';
 
 interface ComboboxItem {
@@ -43,7 +44,7 @@ export class CustomAppComponent {
     public selectedRadio = 'mango';
     public activeTabId = 'tab-1';
     public activeAnchorTabId = 'a-tab-2';
-    public markdownString = `Supported rich text formatting options:
+    public viewerMarkdownString = `Supported rich text formatting options:
 1. **Bold**
 2. *Italics*
 3. Numbered lists
@@ -55,11 +56,23 @@ export class CustomAppComponent {
 5. Absolute link: <https://nimble.ni.dev/>
 `;
 
+    public editorMarkdownString = `Supported rich text formatting options:
+1. **Bold**
+2. *Italics*
+3. Numbered lists
+    1. Option 1
+    2. Option 2
+4. Bulleted lists
+    * Option 1
+    * Option 2
+`;
+
     public readonly tableData$: Observable<SimpleTableRecord[]>;
     private readonly tableDataSubject = new BehaviorSubject<SimpleTableRecord[]>([]);
 
     @ViewChild('dialog', { read: NimbleDialogDirective }) private readonly dialog: NimbleDialogDirective<string>;
     @ViewChild('drawer', { read: NimbleDrawerDirective }) private readonly drawer: NimbleDrawerDirective<string>;
+    @ViewChild('editor', { read: NimbleRichTextEditorDirective }) private readonly editor: NimbleRichTextEditorDirective;
 
     public constructor(@Inject(ActivatedRoute) public readonly route: ActivatedRoute) {
         this.tableData$ = this.tableDataSubject.asObservable();
@@ -113,4 +126,8 @@ export class CustomAppComponent {
         });
         this.tableDataSubject.next(tableData);
     }
+
+    public loadContent(): void {
+        this.editor.setMarkdown(this.editorMarkdownString);
+    }
 }

angular-workspace/projects/ni/nimble-angular/rich-text-editor/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+}

angular-workspace/projects/ni/nimble-angular/rich-text-editor/nimble-rich-text-editor.directive.ts

@@ -0,0 +1,93 @@
+import { Directive, ElementRef, EventEmitter, HostListener, Input, Output, Renderer2 } from '@angular/core';
+import type { RichTextEditor } from '@ni/nimble-components/dist/esm/rich-text-editor';
+import { BooleanValueOrAttribute, toBooleanProperty } from '@ni/nimble-angular/internal-utilities';
+
+export type { RichTextEditor };
+
+/**
+ * Directive to provide Angular integration for the rich text editor element.
+ */
+@Directive({
+    selector: 'nimble-rich-text-editor'
+})
+
+export class NimbleRichTextEditorDirective {
+    @Output() public inputEvent = new EventEmitter<boolean>();
+
+    public get disabled(): boolean {
+        return this.elementRef.nativeElement.disabled;
+    }
+
+    @Input() public set disabled(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
+    }
+
+    public get footerHidden(): boolean {
+        return this.elementRef.nativeElement.footerHidden;
+    }
+
+    // Renaming because property should have camel casing, but attribute should not
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('footer-hidden') public set footerHidden(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'footerHidden', toBooleanProperty(value));
+    }
+
+    public get fitToContent(): boolean {
+        return this.elementRef.nativeElement.fitToContent;
+    }
+
+    // Renaming because property should have camel casing, but attribute should not
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('fit-to-content') public set fitToContent(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'fitToContent', toBooleanProperty(value));
+    }
+
+    public get errorVisible(): boolean {
+        return this.elementRef.nativeElement.errorVisible;
+    }
+
+    // Renaming because property should have camel casing, but attribute should not
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('error-visible') public set errorVisible(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'errorVisible', toBooleanProperty(value));
+    }
+
+    public get errorText(): string | undefined {
+        return this.elementRef.nativeElement.errorText;
+    }
+
+    // Renaming because property should have camel casing, but attribute should not
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('error-text') public set errorText(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'errorText', value);
+    }
+
+    public get placeholder(): string {
+        return this.elementRef.nativeElement.placeholder;
+    }
+
+    @Input() public set placeholder(value: string) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'placeholder', value);
+    }
+
+    public constructor(private readonly renderer: Renderer2, private readonly elementRef: ElementRef<RichTextEditor>) { }
+
+    public getMarkdown(): string {
+        return this.elementRef.nativeElement.getMarkdown();
+    }
+
+    public setMarkdown(value: string): void {
+        this.elementRef.nativeElement.setMarkdown(value);
+    }
+
+    public get empty(): boolean {
+        return this.elementRef.nativeElement.empty;
+    }
+
+    @HostListener('input', ['$event'])
+    public onInput($event: Event): void {
+        if ($event.target === this.elementRef.nativeElement) {
+            this.inputEvent.emit();
+        }
+    }
+}

angular-workspace/projects/ni/nimble-angular/rich-text-editor/nimble-rich-text-editor.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NimbleRichTextEditorDirective } from './nimble-rich-text-editor.directive';
+
+import '@ni/nimble-components/dist/esm/rich-text-editor';
+
+@NgModule({
+    declarations: [NimbleRichTextEditorDirective],
+    imports: [CommonModule],
+    exports: [NimbleRichTextEditorDirective]
+})
+export class NimbleRichTextEditorModule { }

angular-workspace/projects/ni/nimble-angular/rich-text-editor/public-api.ts

@@ -0,0 +1,2 @@
+export * from './nimble-rich-text-editor.directive';
+export * from './nimble-rich-text-editor.module';