Skip to content

Fix issues with copying and pasting in content editor

Himanshu Kapoor requested to merge 406522-fix-paste into master

What does this MR do and why?

Fix issues with pasting html in content editor

  • Do not render class attribute as it could render in unexpected ways, which aren't supported when real markdown is rendered.
  • Strip any stray div, span or pre tags in pasted HTML before paste
  • Pasting code from VSCode no longer breaks.
  • Copying content from content editor copies as markdown.

Screenshots or screen recordings

How to access content editor:

  1. Enable feature flag: :content_editor_on_issues.
  2. Go to an issue. Scroll down to the comment box on the bottom of the issue.
  3. Click Switch to rich text to access the content editor.
Scenario Before After

Stray <div> and <span> tags.

To test:

  1. Go to Test document.
  2. Select all text.
  3. Paste in content editor.
  4. Switch to Markdown.
  5. Notice the stray <span> tags (or lack thereof).

image.png

image.png

Classes in links: Previously link elements in content editor supported a class attribute. Which allowed having classes already defined in pasted HTML to render incorrectly.

To test:

  1. Select the branch name text on this MR and copy it. (Do not copy using the clipboard button.)

    image.png

  2. Paste in content editor.

  3. Notice the styling (or lack thereof).

image.png

image.png

Copying from VSCode

To test:

  1. Open a JS file in VSCode.
  2. Copy some code.
  3. Paste in content editor.
  4. Previously, it would render incorrectly showing a frontmatter:javascript label on the right. And would fail to serialize to markdown.

image.png

image.png

image.png

image.png

Copying from content editor itself (Case 1)

To test:

  1. Upload an image in content editor. Let the upload finish.
  2. Copy the image using Cmd+C.
  3. Paste it next to the original image.
  4. Previously the image would have a blob URL on paste and would disappear on switching to markdown or on saving.

image.png

image.png

image.png

image.png

Copying from content editor itself (Case 2: #412317 (closed))

To test:

  1. Insert a label in Content editor using the ~ shortcut.
  2. Select and copy the newly inserted label.
  3. Paste it in the content editor.
  4. Switch to markdown.

Unable to paste, it glitches and the label disappears.

image.png

The second label is successfully inserted:

image.png

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #406522 (closed)

Edited by Himanshu Kapoor

Merge request reports