Rich text viewer | Implementation of markdown parser (#1335)

# Pull Request

## 🤨 Rationale

This PR includes the logic for parsing markdown input and rendering the
rich text content into the viewer component.
Issue: #1288
AzDo User Story: [Show the rich text content by parsing the markdown
input](https://dev.azure.com/ni/DevCentral/_backlogs/backlog/ASW%20SystemLink%20Platform/Initiatives/?workitem=2426496)

## 👩‍💻 Implementation

* Added
[prosemirror-markdown](https://github.com/ProseMirror/prosemirror-markdown/tree/master)
package for parsing markdown strings, and [prosemirror-model
](https://github.com/ProseMirror/prosemirror-model) package for DOM
serializer to serialize the content and render the rich text content in
the UI.
* Added `markdownValue` accessors to allow setting and retrieving the
markdown value. When setting the markdown input string, the component
performs operations to convert the markdown string into corresponding
document fragments for loading it into the container of the viewer
component.
* Enabled `emphasis`, `list`, and `autolink` from the
[markdown-it](https://github.com/markdown-it/markdown-it/tree/master),
which is internally used by prosemirror-markdown. This allows users to
add bold, italics, numbered, and bulleted lists, as well as direct links
in a CommonMark flavor. All other basic markdown formats are disabled.
* Added `json()` from the "@rollup/plugin-json" in the rollup.config.js
because prosemirror-markdown and markdown-it internally use JSON files
during the build process. Referred to this solution from the discussion
[here](https://discuss.prosemirror.net/t/unexpected-token-on-importing-of-markdown-stuff/2360/4).
* Also, added `nodePolyfills()` from
[rollup-plugin-polyfill-node](https://www.npmjs.com/package/rollup-plugin-polyfill-node)
as the `markdown-it` requires `punycode`([code
reference](https://github.com/markdown-it/markdown-it/blob/master/lib/index.js#L14))
but as mentioned in the
[punycode](https://www.npmjs.com/package/punycode), the right way to use
it is `require('punycode/')`. So use `nodePolyfills()` to rollup the
bundle with the `punycode` properly imported in the
`all-components.bundle.js`.

Spec update:
1. Latest `comments` desktop and mobile mockup links and updated a few
GitHub permalinks.
2. Removed the `fit-to-content` attribute for the viewer component. 
3. `markdown` accessor is changed to a property for the viewer
component.

## 🧪 Testing

Added unit tests and manually tested and verified the changes.

## ✅ 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.

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

@@ -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",

packages/nimble-components/rollup.config.js

@@ -3,6 +3,8 @@ import resolve from '@rollup/plugin-node-resolve';
 import sourcemaps from 'rollup-plugin-sourcemaps';
 import terser from '@rollup/plugin-terser';
 import replace from '@rollup/plugin-replace';
+import json from '@rollup/plugin-json';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
 
 const umdDevelopmentPlugin = () => replace({
     'process.env.NODE_ENV': JSON.stringify('development')
@@ -21,7 +23,14 @@ export default [
             format: 'iife',
             sourcemap: true
         },
-        plugins: [umdDevelopmentPlugin(), sourcemaps(), resolve(), commonJS()]
+        plugins: [
+            umdDevelopmentPlugin(),
+            nodePolyfills(),
+            sourcemaps(),
+            resolve(),
+            commonJS(),
+            json()
+        ]
     },
     {
         input: 'dist/esm/all-components.js',
@@ -37,6 +46,13 @@ export default [
                 })
             ]
         },
-        plugins: [umdProductionPlugin(), sourcemaps(), resolve(), commonJS()]
+        plugins: [
+            umdProductionPlugin(),
+            nodePolyfills(),
+            sourcemaps(),
+            resolve(),
+            commonJS(),
+            json()
+        ]
     }
 ];