Rich text viewer | Implementation of markdown parser #1335

vivinkrishna-ni · 2023-06-30T09:49:53Z

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

👩‍💻 Implementation

Added prosemirror-markdown package for parsing markdown strings, and 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, 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.
Also, added nodePolyfills() from rollup-plugin-polyfill-node as the markdown-it requires punycode(code reference) but as mentioned in the 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:

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

🧪 Testing

Added unit tests and manually tested and verified the changes.

✅ Checklist

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

…omponent

…kage in tiptap/pm is vulnerable

vikisekarNI

I am approving this PR to unblock you next week as I will be out of office, otherwise would take another pass.

Pls go through the comments and address them as necessary.

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

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

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

…ation

vivinkrishna-ni · 2023-06-30T15:41:37Z

moved to thread: #1335 (comment)

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

packages/nimble-components/package.json

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

…ation

…omponent

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

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

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

…ation

…ec doc.

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

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

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

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

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

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

# Pull Request ## 🤨 Rationale Updates dependencies to the latest resolved by our package.json files without modifying those specifiers. Hoping it pre-emptively helps the discussion of [issues around dependency changes](#1335 (comment)) but useful regardless. As a bonus, fixes #1146 ## 👩‍💻 Implementation - Regenerate the lock file (delete lock file, node_modules, and npm install) - Update CI node and npm version to reflect Skyline recent update and better reflect local dev - Pin Blazor playwright version to correspond to latest released on nuget.org (as of writing [1.36.0](https://www.nuget.org/packages/Microsoft.Playwright)) vs latest released on npm which the previous specifier would resolve to (as of writing [1.36.1](https://www.npmjs.com/package/playwright)). - Update tests and stories based on lint rule behavior changes ## 🧪 Testing Manual test storybook build but rely on CI for most. ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Co-authored-by: Malcolm Smith <[email protected]>

…ation

rajsite

Approved assuming default normalization is re-enabled with test cases added

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

…ation

…ttps://github.com/ni/nimble into users/vivin/viewer-markdown-parser-implementation

…ation

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

jattasNI · 2023-07-24T18:30:24Z

You're good to merge this PR this whenever you're ready! (No need to wait on the last reviewer)

…ation

# Pull Request ## 🤨 Rationale Fixes #1700 These two polyfills were added in #1335 because markdown-it implicitly depended on some functionality that existed in Node but not browser environments. We've since upgraded markdown-it to a version that expresses those dependencies on normal npm packages, so the polyfills are no longer needed. markdown-it/markdown-it#967 ## 👩‍💻 Implementation Remove rollup plugins and npm dependencies on those plugins that were added in #1335. ## 🧪 Testing Mostly depending on PR build but also spot checking rich text functionality in storybook. ## ✅ Checklist  - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.

vivinkrishna-ni added 2 commits June 30, 2023 13:55

Implemented markdown parser and added markdown value API for viewer c…

5a348d0

…omponent

Change files

53bc3ce

vivinkrishna-ni requested a review from suseendran-ni June 30, 2023 09:49

vivinkrishna-ni requested review from rajsite, jattasNI and vikisekarNI as code owners June 30, 2023 09:49

vivinkrishna-ni marked this pull request as draft June 30, 2023 09:50

Removed tiptap/pm and added only pm-markdown and pm-model as some pac…

590a2c8

…kage in tiptap/pm is vulnerable

vikisekarNI approved these changes Jun 30, 2023

View reviewed changes

Merge branch 'main' into users/vivin/viewer-markdown-parser-implement…

68b157c

…ation

jattasNI reviewed Jun 30, 2023

View reviewed changes

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

packages/nimble-components/package.json Show resolved Hide resolved

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

vivinkrishna-ni changed the title ~~Users/vivin/viewer markdown parser implementation~~ Rich text viewer | Implementation of markdown parser Jul 1, 2023

vivinkrishna-ni added 4 commits July 4, 2023 10:56

Resolved some of the PR comments

698f22b

Merge branch 'main' into users/vivin/viewer-markdown-parser-implement…

8b955cb

…ation

Resolve linting errors

f625d25

Added node polyfills to support punycode used in the markdown-it library

5db53e9

vivinkrishna-ni mentioned this pull request Jul 5, 2023

Initial Angular code bring up for nimble-rich-text-viewer component #1336

Merged

1 task

vivinkrishna-ni added 3 commits July 5, 2023 18:15

Added append document fragment when setting the markdown value

c7d4d23

Cleared the inner HTML and appended the rich text content to viewer c…

b503590

…omponent

Run npm install in the root directory

7d1b9ee

vivinkrishna-ni marked this pull request as ready for review July 7, 2023 12:03

vivinkrishna-ni marked this pull request as draft July 10, 2023 07:58

Updated UI and added storybook matrix tests

a713cfd

vivinkrishna-ni requested a review from vikisekarNI July 10, 2023 09:56

vikisekarNI reviewed Jul 10, 2023

View reviewed changes

packages/nimble-components/src/rich-text-viewer/index.ts Outdated Show resolved Hide resolved

vikisekarNI approved these changes Jul 10, 2023

View reviewed changes

vikisekarNI reviewed Jul 10, 2023

View reviewed changes

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

Resolved some of the PR comments

bb0d76a

vivinkrishna-ni marked this pull request as ready for review July 10, 2023 14:01

rajsite mentioned this pull request Jul 18, 2023

Update dependencies to latest supported #1361

Merged

1 task

vivinkrishna-ni added 3 commits July 19, 2023 08:16

Merge branch 'main' into users/vivin/viewer-markdown-parser-implement…

770a349

…ation

Updated and added few test cases for markdown strings. Updated the sp…

c520616

…ec doc.

Updated few minor changes.

5757830

jattasNI approved these changes Jul 19, 2023

View reviewed changes

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

rajsite reviewed Jul 19, 2023

View reviewed changes

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

vivinkrishna-ni added 3 commits July 20, 2023 09:39

Merge branch 'main' into users/vivin/viewer-markdown-parser-implement…

351cd1e

…ation

Updated package-lock.json

8eff4f6

Changes for resolving some comments

a29a7f9

vivinkrishna-ni mentioned this pull request Jul 21, 2023

Create a new anchor pattern to share styles across nimble components #1372

Open

Merge branch 'main' into users/vivin/viewer-markdown-parser-implement…

14ab812

…ation

vivinkrishna-ni requested a review from rajsite July 21, 2023 04:42

rajsite approved these changes Jul 21, 2023

View reviewed changes

packages/nimble-components/src/rich-text-viewer/tests/rich-text-viewer.spec.ts Outdated Show resolved Hide resolved

packages/nimble-components/src/rich-text-viewer/tests/rich-text-viewer.spec.ts Outdated Show resolved Hide resolved

vivinkrishna-ni added 6 commits July 21, 2023 21:58

Merge branch 'main' into users/vivin/viewer-markdown-parser-implement…

426ee92

…ation

Enabled normalize setting back and updated test cases accordingly.

0b22333

Merge branch 'users/vivin/viewer-markdown-parser-implementation' of h…

9927fc8

…ttps://github.com/ni/nimble into users/vivin/viewer-markdown-parser-implementation

Merge branch 'main' into users/vivin/viewer-markdown-parser-implement…

71f520f

…ation

Merge branch 'main' into users/vivin/viewer-markdown-parser-implement…

247c156

…ation

Merge branch 'main' into users/vivin/viewer-markdown-parser-implement…

e3d9d40

…ation

suseendran-ni approved these changes Jul 24, 2023

View reviewed changes

jattasNI approved these changes Jul 24, 2023

View reviewed changes

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

Merge branch 'main' into users/vivin/viewer-markdown-parser-implement…

bc69fb9

…ation

vivinkrishna-ni merged commit 05f2975 into main Jul 25, 2023

vivinkrishna-ni deleted the users/vivin/viewer-markdown-parser-implementation branch July 25, 2023 03:29

jattasNI mentioned this pull request Dec 4, 2023

Remove Node polyfill needed for markdown-it / rich text components #1700

Closed

jattasNI mentioned this pull request Jun 17, 2024

Remove node polyfills no longer needed for rich text components #2195

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rich text viewer | Implementation of markdown parser #1335

Rich text viewer | Implementation of markdown parser #1335

vivinkrishna-ni commented Jun 30, 2023 •

edited

Loading

vikisekarNI left a comment

vivinkrishna-ni commented Jun 30, 2023 •

edited by rajsite

Loading

rajsite left a comment

jattasNI commented Jul 24, 2023

Rich text viewer | Implementation of markdown parser #1335

Rich text viewer | Implementation of markdown parser #1335

Conversation

vivinkrishna-ni commented Jun 30, 2023 • edited Loading

Pull Request

🤨 Rationale

👩‍💻 Implementation

🧪 Testing

✅ Checklist

vikisekarNI left a comment

Choose a reason for hiding this comment

vivinkrishna-ni commented Jun 30, 2023 • edited by rajsite Loading

rajsite left a comment

Choose a reason for hiding this comment

jattasNI commented Jul 24, 2023

vivinkrishna-ni commented Jun 30, 2023 •

edited

Loading

vivinkrishna-ni commented Jun 30, 2023 •

edited by rajsite

Loading