From 42928b304ad9b9362501f6bc923f21b4e1e81ddc Mon Sep 17 00:00:00 2001
From: aagash-ni <123377167+aagash-ni@users.noreply.github.com>
Date: Tue, 22 Aug 2023 17:56:05 +0530
Subject: [PATCH] Rich Text Editor | Add setMarkdown() and getMarkdown()
 methods to set and get content from Tip Tap editor  (#1424)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 🤨 Rationale
This PR contains logic for parsing the assigned markdown content,
setting it to the editor and also serializing the editor's data to
markdown content.

AzDo Feature:
https://dev.azure.com/ni/DevCentral/_backlogs/backlog/ASW%20SystemLink%20LIMS/Features/?workitem=2350963
Issue: https://github.com/ni/nimble/issues/1288

## 👩‍💻 Implementation

* Exposed getMarkdown() and setmarkdown() methods to facilitate the
exchange of data with the editor.
* Used MarkdownParser from
[prosemirror-markdown](https://github.com/ProseMirror/prosemirror-markdown/tree/master)
package for parsing markdown strings, DOM serializer from
[prosemirror-model ](https://github.com/ProseMirror/prosemirror-model)
package to serialize the content as DOM structure, XML Serializer to
serialize it to HTML string and sets it to the editor.
* To serialize the tip-tap [document
](https://prosemirror.net/docs/ref/#model.Document_Structure)in
getMarkdown() used MarkdownSerializer from
[prosemirror-markdown](https://github.com/ProseMirror/prosemirror-markdown/tree/master)
package to serialize the node based on schema.
* Enabled `emphasis` and `list` rules in MarkdownParser, this allows
users to set bold, italics, numbered, and bulleted lists in a CommonMark
flavor to the editor. All other basic markdown formats are disabled.
* Added only respective nodes and marks for bold, italics, numbered and
bulleted lists in `MarkdownSerializer`

## 🧪 Testing

* Added unit tests and visual tests for the component.
* Manually tested and verified the functionality of the supported
features.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Signed-off-by: Aagash Raaj <aagash.maridas@solitontech.com>
Co-authored-by: SOLITONTECH\vivin.krishna <123377523+vivinkrishna-ni@users.noreply.github.com>
Co-authored-by: SOLITONTECH\aagash.maridas <aagash.maridas@solitontech.com>
Co-authored-by: Jesse Attas <jattasNI@users.noreply.github.com>
---
 ...-9d517129-f95f-4278-97e4-b2987f9507f4.json |   7 +
 .../src/rich-text-editor/index.ts             | 135 +++-
 .../src/rich-text-editor/styles.ts            |   4 +
 .../src/rich-text-editor/template.ts          |   6 +-
 .../testing/rich-text-editor.pageobject.ts    |  43 +-
 .../tests/rich-text-editor-matrix.stories.ts  |  51 ++
 .../tests/rich-text-editor.spec.ts            | 724 +++++++++++++++++-
 .../tests/rich-text-editor.stories.ts         |  76 +-
 8 files changed, 1013 insertions(+), 33 deletions(-)
 create mode 100644 change/@ni-nimble-components-9d517129-f95f-4278-97e4-b2987f9507f4.json

diff --git a/change/@ni-nimble-components-9d517129-f95f-4278-97e4-b2987f9507f4.json b/change/@ni-nimble-components-9d517129-f95f-4278-97e4-b2987f9507f4.json
new file mode 100644
index 0000000000..660c1db7a0
--- /dev/null
+++ b/change/@ni-nimble-components-9d517129-f95f-4278-97e4-b2987f9507f4.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add setMarkdown and getMarkdown methods in rich-text-editor",
+  "packageName": "@ni/nimble-components",
+  "email": "jattasNI@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/nimble-components/src/rich-text-editor/index.ts b/packages/nimble-components/src/rich-text-editor/index.ts
index 3c6687ae68..b88609bf97 100644
--- a/packages/nimble-components/src/rich-text-editor/index.ts
+++ b/packages/nimble-components/src/rich-text-editor/index.ts
@@ -2,6 +2,15 @@ import { observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
 import { Editor } from '@tiptap/core';
+import {
+    schema,
+    defaultMarkdownParser,
+    MarkdownParser,
+    MarkdownSerializer,
+    defaultMarkdownSerializer,
+    MarkdownSerializerState
+} from 'prosemirror-markdown';
+import { DOMSerializer, Node } from 'prosemirror-model';
 import Bold from '@tiptap/extension-bold';
 import BulletList from '@tiptap/extension-bullet-list';
 import Document from '@tiptap/extension-document';
@@ -52,16 +61,29 @@ export class RichTextEditor extends FoundationElement {
     /**
      * @internal
      */
-    public editor!: HTMLDivElement;
+    public editorContainer!: HTMLDivElement;
 
     private tiptapEditor!: Editor;
+    private editor!: HTMLDivElement;
+
+    private readonly markdownParser = this.initializeMarkdownParser();
+    private readonly markdownSerializer = this.initializeMarkdownSerializer();
+    private readonly domSerializer = DOMSerializer.fromSchema(schema);
+    private readonly xmlSerializer = new XMLSerializer();
+
+    public constructor() {
+        super();
+        this.initializeEditor();
+    }
 
     /**
      * @internal
      */
     public override connectedCallback(): void {
         super.connectedCallback();
-        this.initializeEditor();
+        if (!this.editor.isConnected) {
+            this.editorContainer.append(this.editor);
+        }
         this.bindEditorTransactionEvent();
     }
 
@@ -153,6 +175,26 @@ export class RichTextEditor extends FoundationElement {
         return true;
     }
 
+    /**
+     * This function load tip tap editor with provided markdown content by parsing into html
+     * @public
+     */
+    public setMarkdown(markdown: string): void {
+        const html = this.getHtmlContent(markdown);
+        this.tiptapEditor.commands.setContent(html);
+    }
+
+    /**
+     * This function returns markdown string by serializing tiptap editor document using prosemirror MarkdownSerializer
+     * @public
+     */
+    public getMarkdown(): string {
+        const markdownContent = this.markdownSerializer.serialize(
+            this.tiptapEditor.state.doc
+        );
+        return markdownContent;
+    }
+
     /**
      * @internal
      */
@@ -163,7 +205,96 @@ export class RichTextEditor extends FoundationElement {
         return false;
     }
 
+    /**
+     * This function takes the Fragment from parseMarkdownToDOM function and return the serialized string using XMLSerializer
+     */
+    private getHtmlContent(markdown: string): string {
+        const documentFragment = this.parseMarkdownToDOM(markdown);
+        return this.xmlSerializer.serializeToString(documentFragment);
+    }
+
+    private initializeMarkdownParser(): MarkdownParser {
+        /**
+         * 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'
+        ]);
+
+        return new MarkdownParser(
+            schema,
+            supportedTokenizerRules,
+            defaultMarkdownParser.tokens
+        );
+    }
+
+    private initializeMarkdownSerializer(): MarkdownSerializer {
+        /**
+         * orderedList Node is getting 'order' attribute which it is not present in the
+         * tip-tap orderedList Node and having start instead of order, Changed it to start (nodes.attrs.start)
+         * Assigned updated node in place of orderedList node from defaultMarkdownSerializer
+         * https://github.com/ProseMirror/prosemirror-markdown/blob/b7c1fd2fb74c7564bfe5428c7c8141ded7ebdd9f/src/to_markdown.ts#L94C2-L101C7
+         */
+        const orderedListNode = function orderedList(
+            state: MarkdownSerializerState,
+            node: Node
+        ): void {
+            const start = (node.attrs.start as number) || 1;
+            const maxW = String(start + node.childCount - 1).length;
+            const space = state.repeat(' ', maxW + 2);
+            state.renderList(node, space, i => {
+                const nStr = String(start + i);
+                return `${state.repeat(' ', maxW - nStr.length) + nStr}. `;
+            });
+        };
+
+        /**
+         * Internally Tiptap editor creates it own schema ( Nodes AND Marks ) based on the extensions ( Here Starter Kit is used for Bold, italic, orderedList and
+         * bulletList extensions) and defaultMarkdownSerializer uses schema from prosemirror-markdown to serialize the markdown.
+         * So, there is variations in the nodes and marks name (Eg. 'ordered_list' in prosemirror-markdown schema whereas 'orderedList' in tip tap editor schema),
+         * To fix up this reassigned the respective nodes and marks with tip-tap editor schema.
+         */
+        const nodes = {
+            bulletList: defaultMarkdownSerializer.nodes.bullet_list!,
+            listItem: defaultMarkdownSerializer.nodes.list_item!,
+            orderedList: orderedListNode,
+            doc: defaultMarkdownSerializer.nodes.doc!,
+            paragraph: defaultMarkdownSerializer.nodes.paragraph!,
+            text: defaultMarkdownSerializer.nodes.text!
+        };
+        const marks = {
+            italic: defaultMarkdownSerializer.marks.em!,
+            bold: defaultMarkdownSerializer.marks.strong!
+        };
+        return new MarkdownSerializer(nodes, marks);
+    }
+
+    private parseMarkdownToDOM(value: string): HTMLElement | DocumentFragment {
+        const parsedMarkdownContent = this.markdownParser.parse(value);
+        if (parsedMarkdownContent === null) {
+            return document.createDocumentFragment();
+        }
+
+        return this.domSerializer.serializeFragment(
+            parsedMarkdownContent.content
+        );
+    }
+
     private initializeEditor(): void {
+        // Create div from the constructor because the TipTap editor requires its host element before the template is instantiated.
+        this.editor = document.createElement('div');
+        this.editor.className = 'editor';
+        this.editor.setAttribute('aria-multiline', 'true');
+        this.editor.setAttribute('role', 'textbox');
+
         /**
          * For more information on the extensions for the supported formatting options, refer to the links below.
          * Tiptap marks: https://tiptap.dev/api/marks
diff --git a/packages/nimble-components/src/rich-text-editor/styles.ts b/packages/nimble-components/src/rich-text-editor/styles.ts
index 2a14c19c84..e32148e60e 100644
--- a/packages/nimble-components/src/rich-text-editor/styles.ts
+++ b/packages/nimble-components/src/rich-text-editor/styles.ts
@@ -73,6 +73,10 @@ export const styles = css`
         overflow: auto;
     }
 
+    .editor-container {
+        display: contents;
+    }
+
     .ProseMirror {
         ${
             /**
diff --git a/packages/nimble-components/src/rich-text-editor/template.ts b/packages/nimble-components/src/rich-text-editor/template.ts
index 4cf48755a7..e8db67808a 100644
--- a/packages/nimble-components/src/rich-text-editor/template.ts
+++ b/packages/nimble-components/src/rich-text-editor/template.ts
@@ -11,11 +11,7 @@ import { iconNumberListTag } from '../icons/number-list';
 export const template = html<RichTextEditor>`
     <template>
         <div class="container">
-            <section
-                ${ref('editor')}
-                class="editor"
-                role="textbox"
-                aria-multiline="true">
+            <section ${ref('editorContainer')} class="editor-container">
             </section>
             <section class="footer-section" part="footer-section">
                 <${toolbarTag}>
diff --git a/packages/nimble-components/src/rich-text-editor/testing/rich-text-editor.pageobject.ts b/packages/nimble-components/src/rich-text-editor/testing/rich-text-editor.pageobject.ts
index 131ae19cba..2ad02b8ee3 100644
--- a/packages/nimble-components/src/rich-text-editor/testing/rich-text-editor.pageobject.ts
+++ b/packages/nimble-components/src/rich-text-editor/testing/rich-text-editor.pageobject.ts
@@ -2,6 +2,7 @@ import { keySpace, keyEnter, keyTab } from '@microsoft/fast-web-utilities';
 import type { RichTextEditor } from '..';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import type { ToggleButton } from '../../toggle-button';
+import type { ToolbarButton } from './types';
 
 /**
  * Page object for the `nimble-rich-text-editor` component.
@@ -73,54 +74,54 @@ export class RichTextEditorPageObject {
 
     /**
      * To click a formatting button in the footer section, pass its position value as an index (starting from '0')
-     * @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
+     * @param button can be imported from an enum for each button using the `ButtonIndex`.
      */
-    public async clickFooterButton(buttonIndex: number): Promise<void> {
-        const button = this.getFormattingButton(buttonIndex);
-        button!.click();
+    public async clickFooterButton(button: ToolbarButton): Promise<void> {
+        const toggleButton = this.getFormattingButton(button);
+        toggleButton!.click();
         await waitForUpdatesAsync();
     }
 
     /**
      * To retrieve the checked state of the button, provide its position value as an index (starting from '0')
-     * @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
+     * @param button can be imported from an enum for each button using the `ButtonIndex`.
      */
-    public getButtonCheckedState(buttonIndex: number): boolean {
-        const button = this.getFormattingButton(buttonIndex);
-        return button!.checked;
+    public getButtonCheckedState(button: ToolbarButton): boolean {
+        const toggleButton = this.getFormattingButton(button);
+        return toggleButton!.checked;
     }
 
     /**
      * To retrieve the tab index of the button, provide its position value as an index (starting from '0')
-     * @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
+     * @param button can be imported from an enum for each button using the `ButtonIndex`.
      */
-    public getButtonTabIndex(buttonIndex: number): number {
-        const button = this.getFormattingButton(buttonIndex);
-        return button!.tabIndex;
+    public getButtonTabIndex(button: ToolbarButton): number {
+        const toggleButton = this.getFormattingButton(button);
+        return toggleButton!.tabIndex;
     }
 
     /**
      * To trigger a space key press for the button, provide its position value as an index (starting from '0')
-     * @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
+     * @param button can be imported from an enum for each button using the `ButtonIndex`.
      */
-    public spaceKeyActivatesButton(buttonIndex: number): void {
-        const button = this.getFormattingButton(buttonIndex)!;
+    public spaceKeyActivatesButton(button: ToolbarButton): void {
+        const toggleButton = this.getFormattingButton(button)!;
         const event = new KeyboardEvent('keypress', {
             key: keySpace
         } as KeyboardEventInit);
-        button.control.dispatchEvent(event);
+        toggleButton.control.dispatchEvent(event);
     }
 
     /**
      * To trigger a enter key press for the button, provide its position value as an index (starting from '0')
-     * @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
+     * @param button can be imported from an enum for each button using the `ButtonIndex`.
      */
-    public enterKeyActivatesButton(buttonIndex: number): void {
-        const button = this.getFormattingButton(buttonIndex)!;
+    public enterKeyActivatesButton(button: ToolbarButton): void {
+        const toggleButton = this.getFormattingButton(button)!;
         const event = new KeyboardEvent('keypress', {
             key: keyEnter
         } as KeyboardEventInit);
-        button.control.dispatchEvent(event);
+        toggleButton.control.dispatchEvent(event);
     }
 
     public async setEditorTextContent(value: string): Promise<void> {
@@ -166,7 +167,7 @@ export class RichTextEditorPageObject {
     }
 
     private getFormattingButton(
-        index: number
+        index: ToolbarButton
     ): ToggleButton | null | undefined {
         const buttons: NodeListOf<ToggleButton> = this.richTextEditorElement.shadowRoot!.querySelectorAll(
             'nimble-toggle-button'
diff --git a/packages/nimble-components/src/rich-text-editor/tests/rich-text-editor-matrix.stories.ts b/packages/nimble-components/src/rich-text-editor/tests/rich-text-editor-matrix.stories.ts
index 799b31fba4..a88a07e49a 100644
--- a/packages/nimble-components/src/rich-text-editor/tests/rich-text-editor-matrix.stories.ts
+++ b/packages/nimble-components/src/rich-text-editor/tests/rich-text-editor-matrix.stories.ts
@@ -15,6 +15,7 @@ import {
     tokenNames
 } from '../../theme-provider/design-token-names';
 import { buttonTag } from '../../button';
+import { loremIpsum } from '../../utilities/tests/lorem-ipsum';
 
 const metadata: Meta = {
     title: 'Tests/Rich Text Editor',
@@ -23,6 +24,8 @@ const metadata: Meta = {
     }
 };
 
+const richTextMarkdownString = '1. **Bold*Italics***';
+
 export default metadata;
 
 // prettier-ignore
@@ -30,6 +33,11 @@ const component = (): ViewTemplate => html`
     <${richTextEditorTag}></${richTextEditorTag}>
 `;
 
+const playFunction = (): void => {
+    const editorNodeList = document.querySelectorAll('nimble-rich-text-editor');
+    editorNodeList.forEach(element => element.setMarkdown(richTextMarkdownString));
+};
+
 const editorSizingTestCase = (
     [widthLabel, widthStyle]: [string, string],
     [heightLabel, heightStyle]: [string, string]
@@ -49,6 +57,8 @@ export const richTextEditorThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component)
 );
 
+richTextEditorThemeMatrix.play = playFunction;
+
 export const richTextEditorSizing: StoryFn = createStory(html`
     ${createMatrix(editorSizingTestCase, [
         [
@@ -64,6 +74,47 @@ export const richTextEditorSizing: StoryFn = createStory(html`
     ])}
 `);
 
+const mobileWidthComponent = html`
+    <${richTextEditorTag} style="padding: 20px; width: 300px;">
+        <${buttonTag} slot="footer-actions" appearance="ghost">Cancel</${buttonTag}>
+        <${buttonTag} slot="footer-actions" appearance="outline">Ok</${buttonTag}>
+    </${richTextEditorTag}>
+`;
+
+export const plainTextContentInMobileWidth: StoryFn = createStory(mobileWidthComponent);
+
+plainTextContentInMobileWidth.play = (): void => {
+    document.querySelector('nimble-rich-text-editor')!.setMarkdown(loremIpsum);
+};
+
+const multipleSubPointsContent = `
+1. Sub point 1
+   1. Sub point 2
+      1. Sub point 3
+         1. Sub point 4
+            1. Sub point 5
+               1. Sub point 6
+                  1. Sub point 7
+                     1. Sub point 8
+                        1. Sub point 9`;
+
+export const multipleSubPointsContentInMobileWidth: StoryFn = createStory(mobileWidthComponent);
+
+multipleSubPointsContentInMobileWidth.play = (): void => {
+    document
+        .querySelector('nimble-rich-text-editor')!
+        .setMarkdown(multipleSubPointsContent);
+};
+
+export const longWordContentInMobileWidth: StoryFn = createStory(mobileWidthComponent);
+
+longWordContentInMobileWidth.play = (): void => {
+    document
+        .querySelector('nimble-rich-text-editor')!
+        .setMarkdown(
+            'ThisIsALongWordWithoutSpaceToTestLongWordInSmallWidthThisIsALongWordWithoutSpaceToTestLongWordInSmallWidth'
+        );
+};
 export const hiddenRichTextEditor: StoryFn = createStory(
     hiddenWrapper(html`<${richTextEditorTag} hidden></${richTextEditorTag}>`)
 );
diff --git a/packages/nimble-components/src/rich-text-editor/tests/rich-text-editor.spec.ts b/packages/nimble-components/src/rich-text-editor/tests/rich-text-editor.spec.ts
index 2a4742e16e..761db3fb45 100644
--- a/packages/nimble-components/src/rich-text-editor/tests/rich-text-editor.spec.ts
+++ b/packages/nimble-components/src/rich-text-editor/tests/rich-text-editor.spec.ts
@@ -105,7 +105,7 @@ describe('RichTextEditor', () => {
 
     const formattingButtons: {
         name: string,
-        toolbarButtonIndex: number,
+        toolbarButtonIndex: ToolbarButton,
         iconName: string,
         shortcutKey: string,
         shiftKey: boolean
@@ -624,4 +624,726 @@ describe('RichTextEditor', () => {
             );
         });
     });
+
+    it('setting an empty string should clear a value in the editor', () => {
+        element.setMarkdown('markdown string');
+        expect(pageObject.getEditorTagNames()).toEqual(['P']);
+        expect(pageObject.getEditorLeafContents()).toEqual(['markdown string']);
+
+        element.setMarkdown('');
+        expect(pageObject.getEditorTagNames()).toEqual(['P', 'BR']);
+        expect(pageObject.getEditorLeafContents()).toEqual(['']);
+
+        element.setMarkdown('new markdown string');
+        expect(pageObject.getEditorTagNames()).toEqual(['P']);
+        expect(pageObject.getEditorLeafContents()).toEqual([
+            'new markdown string'
+        ]);
+    });
+
+    describe('supported rich text formatting options from markdown string to its respective HTML elements', () => {
+        beforeEach(async () => {
+            await connect();
+        });
+
+        afterEach(async () => {
+            await disconnect();
+        });
+
+        it('bold markdown string("**") to "strong" HTML tag', () => {
+            element.setMarkdown('**Bold**');
+            expect(pageObject.getEditorTagNames()).toEqual(['P', 'STRONG']);
+            expect(pageObject.getEditorLeafContents()).toEqual(['Bold']);
+        });
+
+        it('bold markdown string("__") to "strong" HTML tag', () => {
+            element.setMarkdown('__Bold__');
+
+            expect(pageObject.getEditorTagNames()).toEqual(['P', 'STRONG']);
+            expect(pageObject.getEditorLeafContents()).toEqual(['Bold']);
+        });
+
+        it('italics markdown string("*") to "em" HTML tag', () => {
+            element.setMarkdown('*Italics*');
+
+            expect(pageObject.getEditorTagNames()).toEqual(['P', 'EM']);
+            expect(pageObject.getEditorLeafContents()).toEqual(['Italics']);
+        });
+
+        it('italics markdown string("_") to "em" HTML tag', () => {
+            element.setMarkdown('_Italics_');
+
+            expect(pageObject.getEditorTagNames()).toEqual(['P', 'EM']);
+            expect(pageObject.getEditorLeafContents()).toEqual(['Italics']);
+        });
+
+        it('numbered list markdown string("1.") to "ol" and "li" HTML tags', () => {
+            element.setMarkdown('1. Numbered list');
+
+            expect(pageObject.getEditorTagNames()).toEqual(['OL', 'LI', 'P']);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Numbered list'
+            ]);
+        });
+
+        it('numbered list markdown string("1)") to "ol" and "li" HTML tags', () => {
+            element.setMarkdown('1) Numbered list');
+
+            expect(pageObject.getEditorTagNames()).toEqual(['OL', 'LI', 'P']);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Numbered list'
+            ]);
+        });
+
+        it('multiple numbered lists markdown string("1.\n2.") to "ol" and "li" HTML tags', () => {
+            element.setMarkdown('1. Option 1\n 2. Option 2');
+
+            expect(pageObject.getEditorTagNames()).toEqual([
+                'OL',
+                'LI',
+                'P',
+                'LI',
+                'P'
+            ]);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Option 1',
+                'Option 2'
+            ]);
+        });
+
+        it('multiple empty numbered lists markdown string("1.\n2.") to "ol" and "li" HTML tags', () => {
+            element.setMarkdown('1.    \n 2.    ');
+
+            expect(pageObject.getEditorTagNames()).toEqual([
+                'OL',
+                'LI',
+                'P',
+                'BR',
+                'LI',
+                'P',
+                'BR'
+            ]);
+            expect(pageObject.getEditorLeafContents()).toEqual(['', '']);
+        });
+
+        it('numbered lists that start with numbers and are not sequential to "ol" and "li" HTML tags', () => {
+            element.setMarkdown('1. Option 1\n 1. Option 2');
+
+            expect(pageObject.getEditorTagNames()).toEqual([
+                'OL',
+                'LI',
+                'P',
+                'LI',
+                'P'
+            ]);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Option 1',
+                'Option 2'
+            ]);
+        });
+
+        it('numbered lists if there is some content between lists', () => {
+            element.setMarkdown(
+                '1. Option 1\n\nSome content in between lists\n\n 2. Option 2'
+            );
+
+            expect(pageObject.getEditorTagNames()).toEqual([
+                'OL',
+                'LI',
+                'P',
+                'P',
+                'OL',
+                'LI',
+                'P'
+            ]);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Option 1',
+                'Some content in between lists',
+                'Option 2'
+            ]);
+        });
+
+        it('bulleted list markdown string("*") to "ul" and "li" HTML tags', () => {
+            element.setMarkdown('* Bulleted list');
+
+            expect(pageObject.getEditorTagNames()).toEqual(['UL', 'LI', 'P']);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Bulleted list'
+            ]);
+        });
+
+        it('bulleted list markdown string("-") to "ul" and "li" HTML tags', () => {
+            element.setMarkdown('- Bulleted list');
+
+            expect(pageObject.getEditorTagNames()).toEqual(['UL', 'LI', 'P']);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Bulleted list'
+            ]);
+        });
+
+        it('bulleted list markdown string("+") to "ul" and "li" HTML tags', () => {
+            element.setMarkdown('+ Bulleted list');
+
+            expect(pageObject.getEditorTagNames()).toEqual(['UL', 'LI', 'P']);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Bulleted list'
+            ]);
+        });
+
+        it('multiple bulleted lists markdown string("* \n* \n*") to "ul" and "li" HTML tags', () => {
+            element.setMarkdown('* Option 1\n * Option 2\n * Option 3');
+
+            expect(pageObject.getEditorTagNames()).toEqual([
+                'UL',
+                'LI',
+                'P',
+                'LI',
+                'P',
+                'LI',
+                'P'
+            ]);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Option 1',
+                'Option 2',
+                'Option 3'
+            ]);
+        });
+
+        it('bulleted lists if there is some content between lists', () => {
+            element.setMarkdown(
+                '* Option 1\n\nSome content in between lists\n\n * Option 2'
+            );
+
+            expect(pageObject.getEditorTagNames()).toEqual([
+                'UL',
+                'LI',
+                'P',
+                'P',
+                'UL',
+                'LI',
+                'P'
+            ]);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Option 1',
+                'Some content in between lists',
+                'Option 2'
+            ]);
+        });
+
+        it('numbered list with bold markdown string to "ol", "li" and "strong" HTML tags', () => {
+            element.setMarkdown('1. **Numbered list in bold**');
+
+            expect(pageObject.getEditorTagNames()).toEqual([
+                'OL',
+                'LI',
+                'P',
+                'STRONG'
+            ]);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Numbered list in bold'
+            ]);
+        });
+
+        it('bulleted list with italics markdown string to "ul", "li" and "em" HTML tags', () => {
+            element.setMarkdown('* *Bulleted list in italics*');
+
+            expect(pageObject.getEditorTagNames()).toEqual([
+                'UL',
+                'LI',
+                'P',
+                'EM'
+            ]);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Bulleted list in italics'
+            ]);
+        });
+
+        it('combination of all supported markdown string', () => {
+            element.setMarkdown(
+                '1. ***Numbered list with bold and italics***\n* ___Bulleted list with bold and italics___'
+            );
+
+            expect(pageObject.getEditorTagNames()).toEqual([
+                'OL',
+                'LI',
+                'P',
+                'STRONG',
+                'EM',
+                'UL',
+                'LI',
+                'P',
+                'STRONG',
+                'EM'
+            ]);
+            expect(pageObject.getEditorLeafContents()).toEqual([
+                'Numbered list with bold and italics',
+                'Bulleted list with bold and italics'
+            ]);
+        });
+    });
+
+    describe('various not supported markdown string values render as unchanged strings', () => {
+        const notSupportedMarkdownStrings: { name: string }[] = [
+            { name: '> blockquote' },
+            { name: '`code`' },
+            { name: '```fence```' },
+            { name: '~~Strikethrough~~' },
+            { name: '# Heading 1' },
+            { name: '## Heading 2' },
+            { name: '### Heading 3' },
+            { name: '[link](url)' },
+            { name: '[ref][link] [link]:url' },
+            { name: '![Text](Image)' },
+            { name: '&nbsp;' },
+            { name: '---' },
+            { name: '***' },
+            { name: '___' },
+            { name: '(c) (C) (r) (R) (tm) (TM) (p) (P) +-' },
+            { name: '<div><p>text</p></div>' },
+            { name: '<b>not bold</b>' },
+            { name: '<em>not italic</em>' },
+            { name: '<ol><li>not list</li><li>not list</li></ol>' },
+            { name: '<ul><li>not list</li><li>not list</li></ul>' },
+            {
+                name: '<a href="https://nimble.ni.dev/">https://nimble.ni.dev/</a>'
+            },
+            { name: '<script>alert("not alert")</script>' }
+        ];
+
+        const focused: string[] = [];
+        const disabled: string[] = [];
+        for (const value of notSupportedMarkdownStrings) {
+            const specType = getSpecTypeByNamedList(value, focused, disabled);
+            // eslint-disable-next-line @typescript-eslint/no-loop-func
+            specType(
+                `string "${value.name}" renders as plain text "${value.name}" within paragraph tag`,
+                // eslint-disable-next-line @typescript-eslint/no-loop-func
+                async () => {
+                    element.setMarkdown(value.name);
+
+                    await connect();
+
+                    expect(pageObject.getEditorTagNames()).toEqual(['P']);
+                    expect(pageObject.getEditorLeafContents()).toEqual([
+                        value.name
+                    ]);
+
+                    await disconnect();
+                }
+            );
+        }
+    });
+
+    describe('various wacky string values render as unchanged strings', () => {
+        const focused: string[] = [];
+        const disabled: string[] = [];
+
+        wackyStrings
+            .filter(value => value.name !== '\x00')
+            .forEach(value => {
+                const specType = getSpecTypeByNamedList(
+                    value,
+                    focused,
+                    disabled
+                );
+                // eslint-disable-next-line @typescript-eslint/no-loop-func
+                specType(
+                    `wacky string "${value.name}" that are unmodified when set the same "${value.name}" within paragraph tag`,
+                    // eslint-disable-next-line @typescript-eslint/no-loop-func
+                    async () => {
+                        element.setMarkdown(value.name);
+
+                        await connect();
+
+                        expect(pageObject.getEditorTagNames()).toEqual(['P']);
+                        expect(pageObject.getEditorLeafContents()).toEqual([
+                            value.name
+                        ]);
+
+                        await disconnect();
+                    }
+                );
+            });
+    });
+
+    describe('various wacky string values modified when rendered', () => {
+        const focused: string[] = [];
+        const disabled: string[] = [];
+        const modifiedWackyStrings: {
+            name: string,
+            tags: string[],
+            textContent: string[]
+        }[] = [
+            { name: '\0', tags: ['P'], textContent: ['�'] },
+            { name: '\uFFFD', tags: ['P'], textContent: ['�'] },
+            { name: '\x00', tags: ['P'], textContent: ['�'] },
+            { name: '\r\r', tags: ['P', 'BR'], textContent: [''] }
+        ];
+
+        for (const value of modifiedWackyStrings) {
+            const specType = getSpecTypeByNamedList(value, focused, disabled);
+            // eslint-disable-next-line @typescript-eslint/no-loop-func
+            specType(
+                `wacky string "${value.name}" modified when rendered`,
+                // eslint-disable-next-line @typescript-eslint/no-loop-func
+                async () => {
+                    element.setMarkdown(value.name);
+
+                    await connect();
+
+                    expect(pageObject.getEditorTagNames()).toEqual(value.tags);
+                    expect(pageObject.getEditorLeafContents()).toEqual(
+                        value.textContent
+                    );
+
+                    await disconnect();
+                }
+            );
+        }
+    });
+
+    it('Should return a empty string when empty string is assigned', () => {
+        element.setMarkdown('markdown string');
+        expect(element.getMarkdown()).toBe('markdown string');
+
+        element.setMarkdown('');
+        expect(element.getMarkdown()).toBe('');
+
+        element.setMarkdown('new markdown string');
+        expect(element.getMarkdown()).toBe('new markdown string');
+    });
+
+    describe('Should return respective markdown when supported rich text formatting options from markdown string is assigned', () => {
+        beforeEach(async () => {
+            await connect();
+        });
+
+        afterEach(async () => {
+            await disconnect();
+        });
+
+        it('Should return bold markdown ("**") when bold markdown string("**") is assigned ', () => {
+            element.setMarkdown('**Bold**');
+            expect(element.getMarkdown()).toBe('**Bold**');
+        });
+
+        it('Should return bold markdown ("**") when bold markdown string("__") is assigned', () => {
+            element.setMarkdown('__Bold__');
+            expect(element.getMarkdown()).toBe('**Bold**');
+        });
+
+        it('Should return italics markdown ("*") when italics markdown string("*") is assigned', () => {
+            element.setMarkdown('*Italics*');
+            expect(element.getMarkdown()).toBe('*Italics*');
+        });
+
+        it('Should return italics markdown ("*") when italics markdown string("_") is assigned', () => {
+            element.setMarkdown('_Italics_');
+            expect(element.getMarkdown()).toBe('*Italics*');
+        });
+
+        it('Should return respective markdown when numbered list markdown ("1.") is assigned', () => {
+            element.setMarkdown('1. Numbered list');
+            expect(element.getMarkdown()).toBe('1. Numbered list');
+        });
+
+        it('Should return respective markdown when numbered list markdown ("1)") is assigned', () => {
+            element.setMarkdown('1) Numbered list');
+            expect(element.getMarkdown()).toBe('1. Numbered list');
+        });
+
+        it('Should return respective markdown when multiple numbered lists markdown string("1.\n2.") is assigned', () => {
+            element.setMarkdown('1. Option 1\n\n2. Option 2');
+            expect(element.getMarkdown()).toBe('1. Option 1\n\n2. Option 2');
+        });
+
+        it('Should return respective markdown when multiple empty numbered lists markdown string("1.\n2.") is assigned', () => {
+            element.setMarkdown('1. \n\n2. ');
+            expect(element.getMarkdown()).toBe('1. \n\n2. ');
+        });
+
+        it('Should return respective markdown whennumbered lists that start with numbers and are not sequential is assigned', () => {
+            element.setMarkdown('1. Option 1\n 1. Option 2');
+            expect(element.getMarkdown()).toBe('1. Option 1\n\n2. Option 2');
+        });
+
+        it('Should return respective markdown when numbered lists if there is some content between lists is assigned', () => {
+            element.setMarkdown(
+                '1. Option 1\n\nSome content in between lists\n\n2. Option 2'
+            );
+            expect(element.getMarkdown()).toBe(
+                '1. Option 1\n\nSome content in between lists\n\n2. Option 2'
+            );
+        });
+
+        it('Should return respective markdown when bulleted list markdown string("*") is assigned', () => {
+            element.setMarkdown('* Bulleted list');
+            expect(element.getMarkdown()).toBe('* Bulleted list');
+        });
+
+        it('Should return respective markdown when bulleted list markdown string("-") is assigned', () => {
+            element.setMarkdown('- Bulleted list');
+            expect(element.getMarkdown()).toBe('* Bulleted list');
+        });
+
+        it('Should return respective markdown when bulleted list markdown string("+") is assigned', () => {
+            element.setMarkdown('+ Bulleted list');
+            expect(element.getMarkdown()).toBe('* Bulleted list');
+        });
+
+        it('Should return respective markdown when multiple bulleted lists markdown string("* \n* \n*") is assigned', () => {
+            element.setMarkdown('* Option 1\n\n* Option 2\n\n* Option 3');
+            expect(element.getMarkdown()).toBe(
+                '* Option 1\n\n* Option 2\n\n* Option 3'
+            );
+        });
+
+        it('Should return respective markdown when bulleted lists with some content between lists is assigned', () => {
+            element.setMarkdown(
+                '* Option 1\n\nSome content in between lists\n\n* Option 2'
+            );
+            expect(element.getMarkdown()).toBe(
+                '* Option 1\n\nSome content in between lists\n\n* Option 2'
+            );
+        });
+
+        it('Should return respective markdown when numbered list with bold markdown string is assigned', () => {
+            element.setMarkdown('1. **Numbered list in bold**');
+            expect(element.getMarkdown()).toBe('1. **Numbered list in bold**');
+        });
+
+        it('Should return respective markdown when bulleted list with italics markdown string is assigned', () => {
+            element.setMarkdown('* *Bulleted list in italics*');
+            expect(element.getMarkdown()).toBe('* *Bulleted list in italics*');
+        });
+
+        it('Should return respective markdown when combination of all supported markdown string is assigned', () => {
+            element.setMarkdown(
+                '1. ***Numbered list with bold and italics***\n\n* ___Bulleted list with bold and italics___'
+            );
+            expect(element.getMarkdown()).toBe(
+                '1. ***Numbered list with bold and italics***\n\n* ***Bulleted list with bold and italics***'
+            );
+        });
+    });
+
+    describe('Should return markdown without any changes when various not supported markdown string values are assigned', () => {
+        const notSupportedMarkdownStrings: { name: string }[] = [
+            { name: '&nbsp;' },
+            { name: '(c) (C) (r) (R) (tm) (TM) (p) (P) +-' },
+            { name: '<div><p>text</p></div>' },
+            { name: '<b>not bold</b>' },
+            { name: '<em>not italic</em>' },
+            { name: '<ol><li>not list</li><li>not list</li></ol>' },
+            { name: '<ul><li>not list</li><li>not list</li></ul>' },
+            {
+                name: '<a href="https://nimble.ni.dev/">https://nimble.ni.dev/</a>'
+            },
+            { name: '<script>alert("not alert")</script>' }
+        ];
+
+        const focused: string[] = [];
+        const disabled: string[] = [];
+        for (const value of notSupportedMarkdownStrings) {
+            const specType = getSpecTypeByNamedList(value, focused, disabled);
+            // eslint-disable-next-line @typescript-eslint/no-loop-func
+            specType(
+                `markdown string "${value.name}" returns as plain text "${value.name}" without any change`,
+                // eslint-disable-next-line @typescript-eslint/no-loop-func
+                async () => {
+                    element.setMarkdown(value.name);
+
+                    await connect();
+
+                    expect(element.getMarkdown()).toBe(value.name);
+
+                    await disconnect();
+                }
+            );
+        }
+    });
+
+    describe('Should return markdown with escape character (back slash) when various special markdown syntax are assigned', () => {
+        const r = String.raw;
+        const specialMarkdownStrings: { name: string, value: string }[] = [
+            { name: '> blockquote', value: r`\> blockquote` },
+            { name: '`code`', value: '\\`code\\`' },
+            { name: '```fence```', value: '\\`\\`\\`fence\\`\\`\\`' },
+            { name: '~~Strikethrough~~', value: r`\~\~Strikethrough\~\~` },
+            { name: '# Heading 1', value: r`\# Heading 1` },
+            { name: '## Heading 2', value: r`\## Heading 2` },
+            { name: '### Heading 3', value: r`\### Heading 3` },
+            { name: '[link](url)', value: r`\[link\](url)` },
+            {
+                name: '[ref][link] [link]:url',
+                value: r`\[ref\]\[link\] \[link\]:url`
+            },
+            { name: '![Text](Image)', value: r`!\[Text\](Image)` },
+            { name: '---', value: r`\---` },
+            { name: '***', value: r`\*\*\*` },
+            { name: '___', value: r`\__\_` },
+            { name: '-Infinity', value: r`\-Infinity` },
+            { name: '-2147483648/-1', value: r`\-2147483648/-1` }
+        ];
+
+        const focused: string[] = [];
+        const disabled: string[] = [];
+        for (const value of specialMarkdownStrings) {
+            const specType = getSpecTypeByNamedList(value, focused, disabled);
+            // eslint-disable-next-line @typescript-eslint/no-loop-func
+            specType(
+                `special markdown string "${value.name}" returns as plain text "${value.value}" with added esacpe character`,
+                // eslint-disable-next-line @typescript-eslint/no-loop-func
+                async () => {
+                    element.setMarkdown(value.name);
+
+                    await connect();
+
+                    expect(element.getMarkdown()).toBe(value.value);
+
+                    await disconnect();
+                }
+            );
+        }
+    });
+
+    describe('Should return markdown without any changes when various wacky string values are assigned', () => {
+        const focused: string[] = [];
+        const disabled: string[] = [];
+
+        wackyStrings
+            .filter(
+                value => value.name !== '\x00'
+                    && value.name !== '-Infinity'
+                    && value.name !== '-2147483648/-1'
+            )
+            .forEach(value => {
+                const specType = getSpecTypeByNamedList(
+                    value,
+                    focused,
+                    disabled
+                );
+                // eslint-disable-next-line @typescript-eslint/no-loop-func
+                specType(
+                    `wacky string "${value.name}" returns unmodified when set the same markdown string"${value.name}"`,
+                    // eslint-disable-next-line @typescript-eslint/no-loop-func
+                    async () => {
+                        element.setMarkdown(value.name);
+
+                        await connect();
+
+                        expect(element.getMarkdown()).toBe(value.name);
+
+                        await disconnect();
+                    }
+                );
+            });
+    });
+
+    describe('Should return markdown with escape character (back slash) when wacky string with special markdown syntax are assigned', () => {
+        const r = String.raw;
+        const wackyStringWithSpecialMarkdownCharacter: {
+            name: string,
+            value: string
+        }[] = [
+            { name: '-Infinity', value: r`\-Infinity` },
+            { name: '-2147483648/-1', value: r`\-2147483648/-1` }
+        ];
+
+        const focused: string[] = [];
+        const disabled: string[] = [];
+        for (const value of wackyStringWithSpecialMarkdownCharacter) {
+            const specType = getSpecTypeByNamedList(value, focused, disabled);
+            // eslint-disable-next-line @typescript-eslint/no-loop-func
+            specType(
+                ` wacky string contains special markdown syntax "${value.name}" returns as plain text "${value.value}" with added esacpe character`,
+                // eslint-disable-next-line @typescript-eslint/no-loop-func
+                async () => {
+                    element.setMarkdown(value.name);
+
+                    await connect();
+
+                    expect(element.getMarkdown()).toBe(value.value);
+
+                    await disconnect();
+                }
+            );
+        }
+    });
+
+    describe('Should return modified markdown when various wacky string values are assigned', () => {
+        const focused: string[] = [];
+        const disabled: string[] = [];
+        const modifiedWackyStrings: {
+            name: string,
+            content: string
+        }[] = [
+            { name: '\0', content: '�' },
+            { name: '\uFFFD', content: '�' },
+            { name: '\x00', content: '�' },
+            { name: '\r\r', content: '' }
+        ];
+
+        for (const value of modifiedWackyStrings) {
+            const specType = getSpecTypeByNamedList(value, focused, disabled);
+            // eslint-disable-next-line @typescript-eslint/no-loop-func
+            specType(
+                `wacky string "${value.name}" returns modified when assigned`,
+                // eslint-disable-next-line @typescript-eslint/no-loop-func
+                async () => {
+                    element.setMarkdown(value.name);
+
+                    await connect();
+
+                    expect(element.getMarkdown()).toBe(value.content);
+
+                    await disconnect();
+                }
+            );
+        }
+    });
+});
+
+describe('RichTextEditor Before DOM Connection', () => {
+    let element: RichTextEditor;
+    let connect: () => Promise<void>;
+    let disconnect: () => Promise<void>;
+    let pageObject: RichTextEditorPageObject;
+
+    beforeEach(async () => {
+        ({ element, connect, disconnect } = await setup());
+    });
+
+    it('Should return respective markdown when combination of all supported markdown string is assigned before the dom is connected to element', async () => {
+        element.setMarkdown(
+            '1. ***Numbered list with bold and italics***\n\n* ___Bulleted list with bold and italics___'
+        );
+        expect(element.getMarkdown()).toBe(
+            '1. ***Numbered list with bold and italics***\n\n* ***Bulleted list with bold and italics***'
+        );
+        expect(element.isConnected).toBeFalsy();
+        await connect();
+        expect(element.isConnected).toBeTruthy();
+        pageObject = new RichTextEditorPageObject(element);
+        expect(pageObject.getEditorTagNames()).toEqual([
+            'OL',
+            'LI',
+            'P',
+            'STRONG',
+            'EM',
+            'UL',
+            'LI',
+            'P',
+            'STRONG',
+            'EM'
+        ]);
+        expect(pageObject.getEditorLeafContents()).toEqual([
+            'Numbered list with bold and italics',
+            'Bulleted list with bold and italics'
+        ]);
+        expect(element.getMarkdown()).toBe(
+            '1. ***Numbered list with bold and italics***\n\n* ***Bulleted list with bold and italics***'
+        );
+        await disconnect();
+    });
 });
diff --git a/packages/nimble-components/src/rich-text-editor/tests/rich-text-editor.stories.ts b/packages/nimble-components/src/rich-text-editor/tests/rich-text-editor.stories.ts
index 4f1295dd89..ff2adc95cf 100644
--- a/packages/nimble-components/src/rich-text-editor/tests/rich-text-editor.stories.ts
+++ b/packages/nimble-components/src/rich-text-editor/tests/rich-text-editor.stories.ts
@@ -1,18 +1,49 @@
-import { html, when } from '@microsoft/fast-element';
+import { html, ref, when } from '@microsoft/fast-element';
 import type { Meta, StoryObj } from '@storybook/html';
 import {
     createUserSelectedThemeStory,
     incubatingWarning
 } from '../../utilities/tests/storybook';
-import { richTextEditorTag } from '..';
+import { RichTextEditor, richTextEditorTag } from '..';
 import { buttonTag } from '../../button';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface RichTextEditorArgs {
+    data: ExampleDataType;
     footerActionButtons: boolean;
+    getMarkdown: undefined;
+    editorRef: RichTextEditor;
+    setMarkdownData: (args: RichTextEditorArgs) => void;
 }
 
+type ExampleDataType = (typeof exampleDataType)[keyof typeof exampleDataType];
+
+const exampleDataType = {
+    plainString: 'PlainString',
+    markdownString: 'MarkdownString'
+} as const;
+
+const plainString = 'Plain text' as const;
+
+const markdownString = `
+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` as const;
+
+const dataSets = {
+    [exampleDataType.plainString]: plainString,
+    [exampleDataType.markdownString]: markdownString
+} as const;
+
 const richTextEditorDescription = 'The rich text editor component allows users to add/edit text formatted with various styling options including bold, italics, numbered lists, and bulleted lists. The editor generates markdown output and takes markdown as input. The markdown flavor used is [CommonMark](https://spec.commonmark.org/0.30/).\n\n See the [rich text viewer](?path=/docs/incubating-rich-text-viewer--docs) component to render markdown without allowing editing.';
+const setMarkdownDescription = 'A function that sets content in the editor with the provided markdown string.';
+const getMarkdownDescription = 'A function that serializes the current data in the editor and returns the markdown string.';
 const footerActionButtonDescription = `To place content such as a button at the far-right of the footer section, set \`slot="footer-actions"\`.
 
 Note: The content in the \`footer-actions\` slot will not adjust based on the state of the rich-text-editor (e.g. disabled). It is the responsibility of the
@@ -36,19 +67,56 @@ const metadata: Meta<RichTextEditorArgs> = {
         componentName: 'rich text editor',
         statusLink: 'https://github.com/ni/nimble/issues/1288'
     })}
-    <${richTextEditorTag}>
+    <${richTextEditorTag}
+        ${ref('editorRef')}
+        data-unused="${x => x.setMarkdownData(x)}"
+    >
         ${when(x => x.footerActionButtons, html`
             <${buttonTag} appearance="ghost" slot="footer-actions">Cancel</${buttonTag}>
             <${buttonTag} slot="footer-actions">OK</${buttonTag}>`)}
     </${richTextEditorTag}>
     `),
     argTypes: {
+        data: {
+            name: 'setMarkdown(value)',
+            description: setMarkdownDescription,
+            options: Object.values(exampleDataType),
+            control: {
+                type: 'radio',
+                labels: {
+                    [exampleDataType.plainString]: 'Plain string',
+                    [exampleDataType.markdownString]:
+                        'Combination of all supported markdown string'
+                }
+            }
+        },
         footerActionButtons: {
             description: footerActionButtonDescription
+        },
+        getMarkdown: {
+            name: 'getMarkdown()',
+            description: getMarkdownDescription,
+            control: false
+        },
+        editorRef: {
+            table: { disable: true }
+        },
+        setMarkdownData: {
+            table: { disable: true }
         }
     },
     args: {
-        footerActionButtons: false
+        data: exampleDataType.plainString,
+        footerActionButtons: false,
+        editorRef: undefined,
+        setMarkdownData: x => {
+            void (async () => {
+                // Safari workaround: the nimble-rich-text-editor element instance is made at this point
+                // but doesn't seem to be upgraded to a custom element yet
+                await customElements.whenDefined('nimble-rich-text-editor');
+                x.editorRef.setMarkdown(dataSets[x.data]);
+            })();
+        }
     }
 };