Rich Text Editor | Add setMarkdown() and getMarkdown() methods to set and get content from Tip Tap editor #1424
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…rs/vivin/integrate-tiptap-editor
…rs/vivin/integrate-tiptap-editor
…rs/vivin/integrate-tiptap-editor
…rs/vivin/integrate-tiptap-editor
…rs/vivin/integrate-tiptap-editor
… into separate PRs
vivinkrishna-ni
requested review from
atmgrifter00 and
mollykreis
as code owners
…s://github.com/ni/nimble into users/aagash/markdown-parser-serializer-editor
jattasNI
approved these changes
Aug 18, 2023
packages/nimble-components/src/rich-text-editor/tests/rich-text-editor.stories.ts
Show resolved
Hide resolved
rajsite
approved these changes
Aug 21, 2023
packages/nimble-components/src/rich-text-editor/testing/rich-text-editor.pageobject.ts
Outdated
Show resolved
Hide resolved
| * @public | ||
| */ | ||
| public setMarkdown(markdown: string): void { | ||
| if (this.$fastController.isConnected) { |
There was a problem hiding this comment.
Re-opening again, unless I am mistaken I still do not see any test that asserts that the getMarkdown and setMarkdown methods actually work before the element is connected to the DOM. Every test seems to connect first and then test something.
I'll mark the PR approved assuming we have this test case and it goes well. @mollykreis or @m-akinc can one of y'all verify this test case is added (that the element can be created and calling set and get markdown functions even though the element is not attached to the dom, and after attached we see the expected content)
m-akinc
approved these changes
Aug 21, 2023
This was referenced Aug 30, 2023
vivinkrishna-ni
added a commit
that referenced
this pull request
Sep 6, 2023
# Pull Request ## 🤨 Rationale <!--- Provide some background and a description of your work. What problem does this change solve? Include links to issues, work items, or other discussions. --> Reorganize the folder structure of the `nimble-rich-text-editor` and `nimble-rich-text-viewer` to share the common functionalities between components. Part of #1447 ## 👩💻 Implementation <!--- Describe how the change addresses the problem. Consider factors such as complexity, alternative solutions, performance impact, etc. Consider listing files with important changes or comment on them directly in the pull request. --> Revamped folder structure in nimble-components: ``` /rich-text /editor editor component files... /viewer viewer component files... /specs README.md (common spec file for both editor and viewer) ``` Revamped folder structure in nimble-angular: ``` /rich-text /editor editor component files... /viewer viewer component files... ``` Related discussion: #1424 (comment) ## 🧪 Testing <!--- Detail the testing done to ensure this submission meets requirements. Include automated/manual test additions or modifications, testing done on a local build, private CI run results, and additional testing not covered by automatic pull request validation. --> - Manually tested the components in the local storybook build. ## ✅ 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.
jattasNI
added a commit
that referenced
this pull request
Sep 8, 2023
…ls (#1492) # Pull Request ## 🤨 Rationale - Created models for markdown functionalities to be used in rich text editor and text viewer components. ## 👩💻 Implementation - Moved markdown parsing and serializing functionalities from the rich text editor and viewer components into respective models. - `markdown-parser.ts` - Initialize the Prose Mirror markdown parse and expose the `parseMarkdownToDOM` method for parsing the markdown string into a corresponding document fragment, which can then be utilized by both the rich text components to load it in the UI. - `markdown-serializer.ts` - Initialize the Prose Mirror markdown parse and expose the `serializeDOMToMarkdown` method to convert the rendered node in the editor to a markdown string. Related discussion: #1424 (comment) ## 🧪 Testing - Migrated all the markdown parsing unit test cases from the components into `markdown-parser.spec.ts` ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Signed-off-by: Sai krishnan Perumal <[email protected]> Signed-off-by: Sai krishnan Perumal <[email protected]> Co-authored-by: SOLITONTECH\vivin.krishna <[email protected]> Co-authored-by: Jesse Attas <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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: #1288
👩💻 Implementation
emphasisandlistrules 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.MarkdownSerializer🧪 Testing
✅ Checklist