Skip to content

Commit

Permalink
Rich text editor | Update dependency on prosemirror-markdown (#1526)
Browse files Browse the repository at this point in the history
# 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.
-->
Fixes [Bug
2518928](https://dev.azure.com/ni/DevCentral/_workitems/edit/2518928):
Rich text editor | Bold italics not updating as expected

In markdown-serializer, if the the markdown string contains leading or
trailing whitespaces within marks, it will not parsed to an expected
rich text content. For example, entering "**Bold *Italics*** **bold**"
into the editor, the actual markdown serializer output is `**Bold
*italics *bold**` which renders as below in viewer.

![image](https://github.com/ni/nimble/assets/123377523/43e3db88-6d79-4027-a457-d8bfea802a56)

Expected output for the above example should be `**Bold *italics*
bold**`

## 👩‍💻 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.
-->
Bumped the `prosemirror-markdown` version from `1.11.0` to `1.11.2`
which fixes
[`expelEnclosingWhitespace`](https://github.com/ProseMirror/prosemirror-markdown/blob/c7210d0e55c82bfb0b2f7cba5dffe804575fafb3/src/to_markdown.ts#L21C3-L21C27)
property to expel any leading or trailing whitespaces within a mark to
outer nodes.

## 🧪 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. If any functionality is
not covered by automated testing, provide justification.
-->
1. Manually tested by getting markdown string for different bold and
italics mixed cases and loading it in the viewer.
2. Add test cases in the `markdown-serializer.ts` for different
scenarios with the example mentioned above and a few other test cases
that cause the leading and trailing whitespace. Please note that the
input HTML string given to the tests is the same as how the `Tiptap`
renders bold and italics cases. For example, strong has a higher
priority than italics, so the HTML will be like
    1. Italics between bold (**Bold *italics* bold**):
        ```html
        <strong>
            Bold 
            <em>italics </em>
            bold
        </strong>
        ``` 
    2. Bold between italics (*Italics **bold** italics*):
        ```html
        <em>Italics </em>
        <strong>
             <em>bold </em>
        </strong>
        <em>italics</em>
        ``` 

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

---------

Co-authored-by: vikisekarNI <[email protected]>
  • Loading branch information
vivinkrishna-ni and vikisekarNI authored Sep 14, 2023
1 parent 1c5811e commit e505291
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 5 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Mixed bold and italics formatting corner cases fixed. Update dependency on prosemirror-markdown",
"packageName": "@ni/nimble-components",
"email": "[email protected]",
"dependentChangeType": "patch"
}
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/nimble-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
"d3-scale": "^4.0.2",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0",
"prosemirror-markdown": "^1.11.0",
"prosemirror-markdown": "^1.11.2",
"prosemirror-model": "^1.19.2",
"tslib": "^2.2.0"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,46 @@ describe('Markdown serializer', () => {
html: '<strong><em>Bold and Italics</em></strong>',
markdown: '***Bold and Italics***'
},
{
name: 'Italics without spaces in between bold texts',
html: '<strong>Bold<em>italics</em>bold</strong>',
markdown: '**Bold*italics*bold**'
},
{
name: 'Italics with leading and trailing spaces in between bold texts',
html: '<strong>Bold<em> italics </em>bold</strong>',
markdown: '**Bold *italics* bold**'
},
{
name: 'Bold and italics with leading and trailing spaces in italics with isolated italics at the end',
html: '<strong>Bold<em> italics </em></strong><em>italics</em>',
markdown: '**Bold *italics*** *italics*'
},
{
name: 'Bold and italics with leading and trailing spaces in bold with isolated italics at the end',
html: '<strong> Bold <em>italics</em> </strong><em>italics</em>',
markdown: '**Bold *italics*** *italics*'
},
{
name: 'Bold and italics with leading and trailing spaces in both',
html: '<strong>Bold <em>italics</em> bold <em>italics </em></strong><em>italics</em>',
markdown: '**Bold *italics* bold *italics*** *italics*'
},
{
name: 'Bold without spaces in between italics texts',
html: '<em>Italics</em><strong><em>bold</em></strong><em>italics</em>',
markdown: '*Italics**bold**italics*'
},
{
name: 'Bold with leading and trailing spaces in between italics texts',
html: '<em>Italics</em><strong><em> bold </em></strong><em>italics</em>',
markdown: '*Italics **bold** italics*'
},
{
name: 'Italics and bold with leading and trailing spaces in bold with isolated bold at the end',
html: '<em>Italics </em><strong><em>bold </em>bold</strong>',
markdown: '*Italics **bold*** **bold**'
},
{
name: 'Numbered list',
html: '<ol><li><p>Numbered list</p></li></ol>',
Expand Down

0 comments on commit e505291

Please sign in to comment.