Rich text viewer | Implementation of markdown parser

change/@ni-nimble-components-99393253-07d1-4ec4-902b-41680bddd36e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Implementation of markdown parser for converting markdown input to rich text content in the viewer",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/package.json

@@ -64,6 +64,7 @@
     "@ni/nimble-tokens": "^6.1.0",
     "@tanstack/table-core": "^8.7.0",
     "@tanstack/virtual-core": "^3.0.0-beta.44",
+    "@tiptap/pm": "^2.0.3",
     "@types/d3-array": "^3.0.4",
     "@types/d3-random": "^3.0.1",
     "@types/d3-scale": "^4.0.2",
@@ -82,6 +83,7 @@
     "@ni/eslint-config-javascript": "^4.2.0",
     "@ni/eslint-config-typescript": "^4.2.0",
     "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-terser": "^0.4.0",
@@ -98,6 +100,7 @@
     "@storybook/html-webpack5": "^7.0.4",
     "@storybook/theming": "^7.0.4",
     "@types/jasmine": "^4.3.1",
+    "@types/markdown-it": "^12.2.3",
     "@types/webpack-env": "^1.15.2",
     "babel-loader": "^9.1.2",
     "circular-dependency-plugin": "^5.2.0",

packages/nimble-components/rollup.config.js

@@ -4,6 +4,9 @@ import sourcemaps from 'rollup-plugin-sourcemaps';
 import terser from '@rollup/plugin-terser';
 import replace from '@rollup/plugin-replace';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+import json from '@rollup/plugin-json';
+
 const umdDevelopmentPlugin = () => replace({
     'process.env.NODE_ENV': JSON.stringify('development')
 });
@@ -21,7 +24,13 @@ export default [
             format: 'iife',
             sourcemap: true
         },
-        plugins: [umdDevelopmentPlugin(), sourcemaps(), resolve(), commonJS()]
+        plugins: [
+            umdDevelopmentPlugin(),
+            sourcemaps(),
+            resolve(),
+            commonJS(),
+            json()
+        ]
     },
     {
         input: 'dist/esm/all-components.js',
@@ -37,6 +46,12 @@ export default [
                 })
             ]
         },
-        plugins: [umdProductionPlugin(), sourcemaps(), resolve(), commonJS()]
+        plugins: [
+            umdProductionPlugin(),
+            sourcemaps(),
+            resolve(),
+            commonJS(),
+            json()
+        ]
     }
 ];

packages/nimble-components/src/rich-text-viewer/index.ts

@@ -1,4 +1,10 @@
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import {
+    schema,
+    defaultMarkdownParser,
+    MarkdownParser
+} from '@tiptap/pm/markdown';
+import { DOMSerializer } from '@tiptap/pm/model';
 import { template } from './template';
 import { styles } from './styles';
 
@@ -11,7 +17,75 @@ declare global {
 /**
  * A nimble styled rich text viewer
  */
-export class RichTextViewer extends FoundationElement {}
+export class RichTextViewer extends FoundationElement {
+    /**
+     * @public
+     * @remarks
+     * Accessor: uses the parsing logic to convert the input markdown string to render in the component.
+     */
+    public set markdownValue(value: string) {
+        this._markdownValue = value;
+        this.serializedContent = this.parseMarkdownToDOM(value);
+    }
+
+    /**
+     * @public
+     * @remarks
+     * Accessor: gets the raw markdown string.
+     */
+    public get markdownValue(): string {
+        return this._markdownValue;
+    }
+
+    public serializedContent?: HTMLElement | DocumentFragment;
+    private _markdownValue = '';
+
+    /**
+     * @internal
+     */
+    public override connectedCallback(): void {
+        super.connectedCallback();
+        this.appendSerializedContentToViewer();
+    }
+
+    /**
+     *
+     * This function takes a markdown string, parses it using the ProseMirror MarkdownParser, serializes the parsed content into a
+     * DOM structure using a DOMSerializer, and returns the serialized result.
+     *
+     * @internal
+     */
+    public parseMarkdownToDOM(value: string): HTMLElement | DocumentFragment {
+        const serializer = DOMSerializer.fromSchema(schema);
+
+        /**
+         * It configures the tokenizer of the default Markdown parser with the 'zero' preset.
+         * The 'zero' preset is a configuration with no rules enabled by default to selectively enable specific rules.
+         * https://github.com/markdown-it/markdown-it/blob/master/lib/presets/zero.js#L1
+         *
+         */
+        const zeroTokenizerConfiguration = defaultMarkdownParser.tokenizer.configure('zero');
+        const supportedTokenizerRules = zeroTokenizerConfiguration.enable([
+            'emphasis',
+            'list',
+            'autolink'
+        ]);
+
+        const parser = new MarkdownParser(
+            schema,
+            supportedTokenizerRules,
+            defaultMarkdownParser.tokens
+        );
+        return serializer.serializeFragment(parser.parse(value)!.content);
+    }
+
+    private appendSerializedContentToViewer(): void {
+        const viewer = this.shadowRoot?.querySelector('#viewer');
+        if (viewer && this.serializedContent) {
+            viewer.appendChild(this.serializedContent.cloneNode(true));
+        }
+    }
+}
 
 const nimbleRichTextViewer = RichTextViewer.compose({
     baseName: 'rich-text-viewer',

packages/nimble-components/src/rich-text-viewer/styles.ts

@@ -1,12 +1,41 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { bodyFont, bodyFontColor } from '../theme-provider/design-tokens';
+import {
+    bodyFont,
+    bodyFontColor,
+    bodyFontLineHeight,
+    linkActiveFontColor,
+    linkFontColor,
+    smallPadding
+} from '../theme-provider/design-tokens';
 
 export const styles = css`
     ${display('flex')}
 
     :host {
         font: ${bodyFont};
+        outline: none;
         color: ${bodyFontColor};
+        padding: ${smallPadding};
+        width: auto;
+        overflow: auto;
+    }
+
+    p,
+    ol,
+    ul,
+    li {
+        margin-block-start: 0px;
+        margin-block-end: 0px;
+        line-height: ${bodyFontLineHeight};
+    }
+
+    a {
+        word-break: break-all;
+        color: ${linkFontColor};
+    }
+
+    a:active {
+        color: ${linkActiveFontColor};
     }
 `;

packages/nimble-components/src/rich-text-viewer/template.ts

@@ -2,5 +2,7 @@ import { html } from '@microsoft/fast-element';
 import type { RichTextViewer } from '.';
 
 export const template = html<RichTextViewer>`
-    <template> Rich Text Viewer here. </template>
+    <template>
+        <div id="viewer"></div>
+    </template>
 `;

packages/nimble-components/src/rich-text-viewer/testing/rich-text-viewer.pageobject.ts

@@ -0,0 +1,27 @@
+import type { RichTextViewer } from '..';
+
+/**
+ * Page object for the `nimble-rich-text-viewer` component.
+ */
+export class RichTextViewerPageObject {
+    public constructor(
+        private readonly richTextViewerElement: RichTextViewer
+    ) {}
+
+    public getFirstChildElementTagName(
+        element: Element | null | undefined
+    ): string {
+        return element?.tagName || '';
+    }
+
+    public getChildElementTextContent(
+        element: Element | null | undefined
+    ): string {
+        return element?.textContent || '';
+    }
+
+    public getFirstChildElement(): Element | null | undefined {
+        return this.richTextViewerElement.shadowRoot?.querySelector('#viewer')
+            ?.firstElementChild;
+    }
+}

packages/nimble-components/src/rich-text-viewer/tests/rich-text-viewer-matrix.stories.ts

@@ -10,6 +10,7 @@ import {
 } from '../../utilities/tests/matrix';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { richTextViewerTag } from '..';
+import { richTextMarkdownString } from '../../utilities/tests/rich-text-markdown-string';
 
 const metadata: Meta = {
     title: 'Tests/Rich Text Viewer',
@@ -22,7 +23,7 @@ export default metadata;
 
 // prettier-ignore
 const component = (): ViewTemplate => html`
-    <${richTextViewerTag}></${richTextViewerTag}>
+    <${richTextViewerTag} :markdownValue="${_ => richTextMarkdownString}"></${richTextViewerTag}>
 `;
 
 export const richTextViewerThemeMatrix: StoryFn = createMatrixThemeStory(