search

jpuri / react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
MIT License
6.38k stars 1.16k forks source link

Special characters in editor state's JSON data not being escaped on paste action #1393

Open Loreen-netizen opened 10 months ago

Loreen-netizen commented 10 months ago

Description:

I've observed a problem related to the handling of special characters when users paste content into the react-draft-wysiwyg editor from some websites.

Steps to Reproduce:

  1. Navigate to https://www.lipsum.com/.
  2. Copy some of the text provided.
  3. Paste the copied content into the react-draft-wysiwyg editor.
  4. Capture the editor state as JSON.

Expected Behavior:

Special characters within the pasted text should be properly escaped in the JSON representation of the editor state.

Actual Behavior:

The special characters from the pasted content appear to not be properly escaped within the JSON representation.

Sample Data:

Here's the JSON output I got from the editor state after following the above steps:

{\"blocks\":[{\"key\":\"9ao15\",\"text\":\"Lorem Ipsum\",\"type\":\"header-one\",\"depth\":0,\"inlineStyleRanges\":[{\"offset\":0,\"length\":11,\"style\":\"color-rgb(0,0,0)\"},{\"offset\":0,\"length\":11,\"style\":\"bgcolor-rgb(255,255,255)\"},{\"offset\":0,\"length\":11,\"style\":\"fontsize-70\"},{\"offset\":0,\"length\":11,\"style\":\"fontfamily-DauphinPlain\"}],\"entityRanges\":[],\"data\":{\"text-align\":\"center\"}},{\"key\":\"uqol\",\"text\":\"\\\"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...\\\"\",\"type\":\"header-four\",\"depth\":0,\"inlineStyleRanges\":[{\"offset\":0,\"length\":96,\"style\":\"color-rgb(0,0,0)\"},{\"offset\":0,\"length\":96,\"style\":\"bgcolor-rgb(255,255,255)\"},{\"offset\":0,\"length\":96,\"style\":\"fontsize-14\"},{\"offset\":0,\"length\":96,\"style\":\"fontfamily-Open Sans\\\", Arial, sans-serif\"},{\"offset\":0,\"length\":96,\"style\":\"ITALIC\"}],\"entityRanges\":[],\"data\":{\"text-align\":\"center\"}},{\"key\":\"bqh5q\",\"text\":\"\\\"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...\\\"\",\"type\":\"header-five\",\"depth\":0,\"inlineStyleRanges\":[{\"offset\":0,\"length\":110,\"style\":\"color-rgb(0,0,0)\"},{\"offset\":0,\"length\":110,\"style\":\"bgcolor-rgb(255,255,255)\"},{\"offset\":0,\"length\":110,\"style\":\"fontsize-12\"},{\"offset\":0,\"length\":110,\"style\":\"fontfamily-Open Sans\\\", Arial, sans-serif\"}],\"entityRanges\":[],\"data\":{\"text-align\":\"center\"}}],\"entityMap\":{}}

Concern:

From the sample data, you can observe the additional escape sequences (e.g., \\\"). This is causing issues during further data processing when handling editor state.

I appreciate any guidance or resolution on this matter. Thank you!