codex-team / editor.js

A block-style editor with clean JSON output
https://editorjs.io
Apache License 2.0
28.7k stars 2.08k forks source link

Managing Unexpected Line Breaks in Paragraph Blocks #1795

Open rudyharrelson opened 3 years ago

rudyharrelson commented 3 years ago

Question

Hello. I am integrating EditorJS into a React project I'm working on and have occasionally run into issues where the formatting/parsing of white space or line breaks gives me results I'm not expecting. I suspect this might be due to a misunderstanding on my part on how EditorJS handles text, or how pasting text from other sources is handled.

Context

I'm using EditorJS in a React application. Version information:

"react": "16.5.2", "@editorjs/editorjs": "^2.16.1"

Usually I type directly into EditorJS, but sometimes I'll copy text from an outside Word document or web page and then paste it into a Paragraph block in Editor.JS. This can sometimes result in multiple line breaks (\n Unicode characters) being present in the text block when I save it. It doesn't appear in the Editor itself that anything is amiss (the line breaks don't appear in the Editor), but then when I save the contents of the Editor to my database as a JSON string, the line breaks are now present as '\n' characters in the Paragraph block. When I go to render the saved content in another part of my application, the line breaks do appear, and the extra white space is noticeable.

Comments

I've attempted manually removing the extra '\n's with Regular Expressions when it's time to save the contents of Editor.JS, like so:

    //time to commit the contents of EditorJS to a database
    let savedData = await this.state.editor.save(); //get data from EditorJS component
    savedData = this.sanitize_blocks(savedData); //remove unwanted line breaks with regular expressions with a custom function using .trim() to remove unwanted white space on each paragraph block's text
    let body = JSON.stringify(savedData); //we save the EditorJS contents as a JSON string to our database. This JSON will be parsed in another section of the React application
    //followed by commiting this 'body' variable to a database

The trim() function works nicely to remove the beginning/trailing white space on the Paragraph block, but this won't account for '\n' characters that occur in the middle of the Paragraph block, so this is a suboptimal workaround on my part. Ideally the '\n' characters wouldn't need to be removed at all since they don't appear when using the Editor, but I'm not sure how to accomplish that.

Any insight into line break management in EditorJS is appreciated; I haven't found too much discussion on this topic elsewhere, so I fear I may be simply missing something obvious, or misunderstanding EditorJS's behavior.

Thank you for your time.

ilesar commented 3 months ago

@rudyharrelson Did you manage to get around this?