Skip to content

Improve preservation of marks in RTE

What does this MR do and why?

Improve preservation of marks in RTE

This MR improves preservation of marks as described in the table below:

Scenario Bold Italic Strike Code Link Inline Diff Inline Math

Is markdown style is preserved when text within the mark is changed?

Markdown style means whether ** or __ is used to style a bold tag, etc.

Is HTML style is preserved when text within the mark is changed?

HTML style means whether a <b> or <strong> tag is to style a bold tag.

Is whitespace preserved when markdown is used to render the mark?

When the mark uses markdown for formatting, is unchanged, but surrounding text in the same paragraph is changed.

2

1

2

Is whitespace preserved when HTML is used to render the mark?

When the mark uses HTML tags for formatting, is unchanged, but surrounding text in the same paragraph is changed.

3

Notes:

  1. Source maps are not supported for Inline diff yet: #474589.
  2. Inline code and inline math have source maps available and can be preserved, but since both their configs have escape: false, it needs modification to the serializer state. This will be possible once we remove dependency from prosemirror-markdown and don't have to hack around it to do things: #476697.
  3. Sourcemaps are not supported for HTML nodes.

This is a multi-MR effort to split and merge !149930 (closed) (issue: #455457 (closed)) and other work related to issues in &7722 behind a feature flag.

Related to issues:

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots

Included in the setup instructions below:

How to set up and validate locally

  1. Enable feature flag :preserve_markdown.
  2. In an issue comment, switch to plain text editor.
  3. Enter the following test markdown:
Testing bold:

- **bold using asterisks**
- __bold using underscores__
- <b>bold using b tag</b>
- <strong>bold using strong tag</strong>

Testing italics:

- *italic using asterisks*
- _italic using underscores_
- <em>italic using em tag</em>
- <i>italic using i tag</i>

Testing inline code:

- `inline code using backticks`
- <code>inline code using code tag</code>

Testing strike:

- ~~strike using tilde~~
- <s>strike using s tag</s>
- <strike>strike using strike tag</strike>
- <del>strike using del tag</del>

Testing inline math:

- $`a^2 + b^2`$

Testing inline diff

- {+30 lines changed+}
- {-30 lines changed-}

Testing links

- [link using markdown syntax](https://example.com "example title")
- <a href="https://example.com" title="example title">link using HTML syntax</a>
  1. Switch to rich text editor. It should look like this:

    image.png

  2. Now change something in every bullet point. I just added changed word in each line.

    • IMPORTANT: Do not copy paste because copy/paste will also copy the style (like bold/italic)
    • It should look like this:
    • image.png
  3. Switch back to plain text editing.

  4. Note that the markdown or HTML style of each mark is preserved.

  5. The final markdown should look something like this:

Testing bold:

- **bold changed using asterisks**
- __bold changed using underscores__
- <b>bold changed using b tag</b>
- <strong>bold changed using strong tag</strong>

Testing italics:

- *italic changed using asterisks*
- _italic changed using underscores_
- <em>italic changed using em tag</em>
- <i>italic changed using i tag</i>

Testing inline code:

- `inline code changed using backticks`
- <code>inline code changed using code tag</code>

Testing strike:

- ~~strike changed using tilde~~
- <s>strike changed using s tag</s>
- <strike>strike changed using strike tag</strike>
- <del>strike changed using del tag</del>

Testing inline math:

- $`a^2 + b^2 changed`$

Testing inline diff

- {+30 changed lines changed+}
- {-30 changed lines changed-}

Testing links

- [link changed using markdown syntax](https://example.com "example title")
- <a href="https://example.com" title="example title">link changed using HTML syntax</a>
Edited by Himanshu Kapoor

Merge request reports

Loading