@ni/nimble-components 19.9.0 → 19.9.2

package/dist/esm/anchor-tabs/styles.js

@@ -5,7 +5,7 @@ export const styles = css `
 
     :host {
         box-sizing: border-box;
-        grid-template-columns: auto auto 1fr;
+        grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
     }
 

package/dist/esm/rich-text-viewer/index.d.ts

@@ -8,5 +8,35 @@ declare global {
  * A nimble styled rich text viewer
  */
 export declare class RichTextViewer extends FoundationElement {
+    /**
+     *
+     * @public
+     * Markdown string to render its corresponding rich text content in the component.
+     */
+    markdown: string;
+    /**
+     * @internal
+     */
+    viewer: HTMLDivElement;
+    private readonly markdownParser;
+    private readonly domSerializer;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    markdownChanged(): void;
+    private initializeMarkdownParser;
+    /**
+     *
+     * 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.
+     * If the markdown parser returns null, it will clear the viewer component by creating an empty document fragment.
+     */
+    private parseMarkdownToDOM;
+    private updateView;
 }
 export declare const richTextViewerTag: string;

package/dist/esm/rich-text-viewer/index.js

@@ -1,11 +1,83 @@
+import { __decorate } from "tslib";
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { schema, defaultMarkdownParser, MarkdownParser } from 'prosemirror-markdown';
+import { DOMSerializer } from 'prosemirror-model';
+import { observable } from '@microsoft/fast-element';
 import { template } from './template';
 import { styles } from './styles';
 /**
  * A nimble styled rich text viewer
  */
 export class RichTextViewer extends FoundationElement {
+    constructor() {
+        super();
+        /**
+         *
+         * @public
+         * Markdown string to render its corresponding rich text content in the component.
+         */
+        this.markdown = '';
+        this.domSerializer = DOMSerializer.fromSchema(schema);
+        this.markdownParser = this.initializeMarkdownParser();
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateView();
+    }
+    /**
+     * @internal
+     */
+    markdownChanged() {
+        if (this.$fastController.isConnected) {
+            this.updateView();
+        }
+    }
+    initializeMarkdownParser() {
+        /**
+         * 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/2b6cac25823af011ff3bc7628bc9b06e483c5a08/lib/presets/zero.js#L1
+         *
+         */
+        const zeroTokenizerConfiguration = defaultMarkdownParser.tokenizer.configure('zero');
+        // The detailed information of the supported rules were provided in the below CommonMark spec document.
+        // https://spec.commonmark.org/0.30/
+        const supportedTokenizerRules = zeroTokenizerConfiguration.enable([
+            'emphasis',
+            'list',
+            'autolink'
+        ]);
+        return new MarkdownParser(schema, supportedTokenizerRules, defaultMarkdownParser.tokens);
+    }
+    /**
+     *
+     * 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.
+     * If the markdown parser returns null, it will clear the viewer component by creating an empty document fragment.
+     */
+    parseMarkdownToDOM(value) {
+        const parsedMarkdownContent = this.markdownParser.parse(value);
+        if (parsedMarkdownContent === null) {
+            return document.createDocumentFragment();
+        }
+        return this.domSerializer.serializeFragment(parsedMarkdownContent.content);
+    }
+    updateView() {
+        if (this.markdown) {
+            const serializedContent = this.parseMarkdownToDOM(this.markdown);
+            this.viewer.replaceChildren(serializedContent);
+        }
+        else {
+            this.viewer.innerHTML = '';
+        }
+    }
 }
+__decorate([
+    observable
+], RichTextViewer.prototype, "markdown", void 0);
 const nimbleRichTextViewer = RichTextViewer.compose({
     baseName: 'rich-text-viewer',
     template,

package/dist/esm/rich-text-viewer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/rich-text-viewer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,iBAAiB;CAAG;AAExD,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC;IAChD,QAAQ,EAAE,kBAAkB;IAC5B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/rich-text-viewer/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EACH,MAAM,EACN,qBAAqB,EACrB,cAAc,EACjB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,iBAAiB;IAgBjD;QACI,KAAK,EAAE,CAAC;QAhBZ;;;;WAIG;QAEI,aAAQ,GAAG,EAAE,CAAC;QAWjB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAC1D,CAAC;IAED;;OAEG;IACa,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAED;;OAEG;IACI,eAAe;QAClB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YAClC,IAAI,CAAC,UAAU,EAAE,CAAC;SACrB;IACL,CAAC;IAEO,wBAAwB;QAC5B;;;;;WAKG;QACH,MAAM,0BAA0B,GAAG,qBAAqB,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAErF,uGAAuG;QACvG,oCAAoC;QACpC,MAAM,uBAAuB,GAAG,0BAA0B,CAAC,MAAM,CAAC;YAC9D,UAAU;YACV,MAAM;YACN,UAAU;SACb,CAAC,CAAC;QAEH,OAAO,IAAI,cAAc,CACrB,MAAM,EACN,uBAAuB,EACvB,qBAAqB,CAAC,MAAM,CAC/B,CAAC;IACN,CAAC;IAED;;;;;OAKG;IACK,kBAAkB,CAAC,KAAa;QACpC,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC/D,IAAI,qBAAqB,KAAK,IAAI,EAAE;YAChC,OAAO,QAAQ,CAAC,sBAAsB,EAAE,CAAC;SAC5C;QAED,OAAO,IAAI,CAAC,aAAa,CAAC,iBAAiB,CACvC,qBAAqB,CAAC,OAAO,CAChC,CAAC;IACN,CAAC;IAEO,UAAU;QACd,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,MAAM,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACjE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;SAClD;aAAM;YACH,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,EAAE,CAAC;SAC9B;IACL,CAAC;CACJ;AAjFG;IADC,UAAU;gDACU;AAmFzB,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC;IAChD,QAAQ,EAAE,kBAAkB;IAC5B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC"}

package/dist/esm/rich-text-viewer/styles.js

@@ -1,12 +1,52 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { bodyFont, bodyFontColor } from '../theme-provider/design-tokens';
+import { bodyFont, bodyFontColor, linkActiveFontColor, linkFontColor } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}
 
     :host {
         font: ${bodyFont};
+        outline: none;
         color: ${bodyFontColor};
+        inline-size: auto;
+        overflow: auto;
+        block-size: 100%;
+        min-block-size: 36px;
+    }
+
+    .viewer {
+        font: inherit;
+        outline: none;
+        box-sizing: border-box;
+        position: relative;
+        color: inherit;
+    }
+
+    .viewer > :first-child {
+        margin-block-start: 0;
+    }
+
+    .viewer > :last-child {
+        margin-block-end: 0;
+    }
+
+    li > p {
+        margin-block: 0;
+    }
+
+    ${
+/* In Firefox, if the paragraph within the list is empty, the ordered lists overlap. Therefore, hiding the paragraph element allows for the proper rendering of empty lists.  */ ''}
+    li > p:empty {
+        display: none;
+    }
+
+    a {
+        word-break: break-all;
+        color: ${linkFontColor};
+    }
+
+    a:active {
+        color: ${linkActiveFontColor};
     }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/rich-text-viewer/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/rich-text-viewer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAE1E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;iBACP,aAAa;;CAE7B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/rich-text-viewer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,mBAAmB,EACnB,aAAa,EAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;iBAEP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BxB;AACE,gLAAgL,CAAC,EACrL;;;;;;;iBAOa,aAAa;;;;iBAIb,mBAAmB;;CAEnC,CAAC"}

package/dist/esm/rich-text-viewer/template.js

@@ -1,5 +1,5 @@
-import { html } from '@microsoft/fast-element';
+import { html, ref } from '@microsoft/fast-element';
 export const template = html `
-    <template> Rich Text Viewer here. </template>
+    <div ${ref('viewer')} class="viewer"></div>
 `;
 //# sourceMappingURL=template.js.map

package/dist/esm/rich-text-viewer/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/rich-text-viewer/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgB;;CAE3C,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/rich-text-viewer/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgB;WACjC,GAAG,CAAC,QAAQ,CAAC;CACvB,CAAC"}

package/dist/esm/rich-text-viewer/testing/rich-text-viewer.pageobject.d.ts

@@ -0,0 +1,22 @@
+import type { RichTextViewer } from '..';
+/**
+ * Page object for the `nimble-rich-text-viewer` component.
+ */
+export declare class RichTextViewerPageObject {
+    private readonly richTextViewerElement;
+    constructor(richTextViewerElement: RichTextViewer);
+    getRenderedMarkdownLastChildContents(): string;
+    getRenderedMarkdownLastChildAttribute(attribute: string): string;
+    /**
+     * Retrieves tag names for the rendered markdown content in document order
+     * @returns An array of tag names in document order
+     */
+    getRenderedMarkdownTagNames(): string[];
+    /**
+     * Retrieves text contents for the rendered markdown content in document order
+     * @returns An array of text contents of last elements in a tree
+     */
+    getRenderedMarkdownLeafContents(): string[];
+    private getMarkdownRenderedElement;
+    private getLastChildMarkdownRenderedElement;
+}

package/dist/esm/rich-text-viewer/testing/rich-text-viewer.pageobject.js

@@ -0,0 +1,43 @@
+/**
+ * Page object for the `nimble-rich-text-viewer` component.
+ */
+export class RichTextViewerPageObject {
+    constructor(richTextViewerElement) {
+        this.richTextViewerElement = richTextViewerElement;
+    }
+    getRenderedMarkdownLastChildContents() {
+        return this.getLastChildMarkdownRenderedElement()?.textContent || '';
+    }
+    getRenderedMarkdownLastChildAttribute(attribute) {
+        return (this.getLastChildMarkdownRenderedElement()?.getAttribute(attribute) || '');
+    }
+    /**
+     * Retrieves tag names for the rendered markdown content in document order
+     * @returns An array of tag names in document order
+     */
+    getRenderedMarkdownTagNames() {
+        return Array.from(this.getMarkdownRenderedElement().querySelectorAll('*')).map(el => el.tagName);
+    }
+    /**
+     * Retrieves text contents for the rendered markdown content in document order
+     * @returns An array of text contents of last elements in a tree
+     */
+    getRenderedMarkdownLeafContents() {
+        return Array.from(this.getMarkdownRenderedElement().querySelectorAll('*'))
+            .filter((el, _) => {
+            return el.children.length === 0;
+        })
+            .map(el => el.textContent || '');
+    }
+    getMarkdownRenderedElement() {
+        return this.richTextViewerElement.shadowRoot?.querySelector('.viewer');
+    }
+    getLastChildMarkdownRenderedElement() {
+        let lastElement = this.getMarkdownRenderedElement()?.lastElementChild;
+        while (lastElement?.lastElementChild) {
+            lastElement = lastElement?.lastElementChild;
+        }
+        return lastElement;
+    }
+}
+//# sourceMappingURL=rich-text-viewer.pageobject.js.map

package/dist/esm/rich-text-viewer/testing/rich-text-viewer.pageobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-viewer.pageobject.js","sourceRoot":"","sources":["../../../../src/rich-text-viewer/testing/rich-text-viewer.pageobject.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,OAAO,wBAAwB;IACjC,YACqB,qBAAqC;QAArC,0BAAqB,GAArB,qBAAqB,CAAgB;IACvD,CAAC;IAEG,oCAAoC;QACvC,OAAO,IAAI,CAAC,mCAAmC,EAAE,EAAE,WAAW,IAAI,EAAE,CAAC;IACzE,CAAC;IAEM,qCAAqC,CAAC,SAAiB;QAC1D,OAAO,CACH,IAAI,CAAC,mCAAmC,EAAE,EAAE,YAAY,CACpD,SAAS,CACZ,IAAI,EAAE,CACV,CAAC;IACN,CAAC;IAED;;;OAGG;IACI,2BAA2B;QAC9B,OAAO,KAAK,CAAC,IAAI,CACb,IAAI,CAAC,0BAA0B,EAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAC3D,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAED;;;OAGG;IACI,+BAA+B;QAClC,OAAO,KAAK,CAAC,IAAI,CACb,IAAI,CAAC,0BAA0B,EAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAC3D;aACI,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;YACd,OAAO,EAAE,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;aACD,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;IACzC,CAAC;IAEO,0BAA0B;QAC9B,OAAO,IAAI,CAAC,qBAAqB,CAAC,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAC3E,CAAC;IAEO,mCAAmC;QACvC,IAAI,WAAW,GAAG,IAAI,CAAC,0BAA0B,EAAE,EAAE,gBAAgB,CAAC;QAEtE,OAAO,WAAW,EAAE,gBAAgB,EAAE;YAClC,WAAW,GAAG,WAAW,EAAE,gBAAgB,CAAC;SAC/C;QACD,OAAO,WAAW,CAAC;IACvB,CAAC;CACJ"}

package/dist/esm/src/rich-text-viewer/index.d.ts

@@ -8,5 +8,35 @@ declare global {
  * A nimble styled rich text viewer
  */
 export declare class RichTextViewer extends FoundationElement {
+    /**
+     *
+     * @public
+     * Markdown string to render its corresponding rich text content in the component.
+     */
+    markdown: string;
+    /**
+     * @internal
+     */
+    viewer: HTMLDivElement;
+    private readonly markdownParser;
+    private readonly domSerializer;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    markdownChanged(): void;
+    private initializeMarkdownParser;
+    /**
+     *
+     * 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.
+     * If the markdown parser returns null, it will clear the viewer component by creating an empty document fragment.
+     */
+    private parseMarkdownToDOM;
+    private updateView;
 }
 export declare const richTextViewerTag: string;

package/dist/esm/src/rich-text-viewer/testing/rich-text-viewer.pageobject.d.ts

@@ -0,0 +1,22 @@
+import type { RichTextViewer } from '..';
+/**
+ * Page object for the `nimble-rich-text-viewer` component.
+ */
+export declare class RichTextViewerPageObject {
+    private readonly richTextViewerElement;
+    constructor(richTextViewerElement: RichTextViewer);
+    getRenderedMarkdownLastChildContents(): string;
+    getRenderedMarkdownLastChildAttribute(attribute: string): string;
+    /**
+     * Retrieves tag names for the rendered markdown content in document order
+     * @returns An array of tag names in document order
+     */
+    getRenderedMarkdownTagNames(): string[];
+    /**
+     * Retrieves text contents for the rendered markdown content in document order
+     * @returns An array of text contents of last elements in a tree
+     */
+    getRenderedMarkdownLeafContents(): string[];
+    private getMarkdownRenderedElement;
+    private getLastChildMarkdownRenderedElement;
+}

package/dist/esm/tabs/styles.js

@@ -5,7 +5,7 @@ export const styles = css `
 
     :host {
         box-sizing: border-box;
-        grid-template-columns: auto auto 1fr;
+        grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "19.9.0",
+  "version": "19.9.2",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
@@ -69,11 +69,14 @@
     "@types/d3-scale": "^4.0.2",
     "@types/d3-selection": "^3.0.0",
     "@types/d3-zoom": "^3.0.0",
+    "@types/markdown-it": "^12.2.3",
     "d3-array": "^3.2.2",
     "d3-random": "^3.0.1",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
+    "prosemirror-markdown": "^1.11.0",
+    "prosemirror-model": "^1.19.2",
     "tslib": "^2.2.0"
   },
   "devDependencies": {
@@ -82,6 +85,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",
@@ -125,6 +129,7 @@
     "puppeteer": "^10.1.0",
     "remark-gfm": "^3.0.1",
     "rollup": "^3.10.1",
+    "rollup-plugin-polyfill-node": "^0.12.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "storybook": "^7.0.4",
     "ts-loader": "^9.2.5",