Summernote wrapping content in spans

REVEB · January 19, 2025, 6:53pm

I am using the PDF creator to generate a pdf file which is a "text" from Summernote textarea. All seem to be working fine except when I try to print the file and then I get the following error:

Could not parse color "var(--bs-body-bg)"
parseColor @ browser.min.js:7
(anonymous) @ browser.min.js:7
parseStyle @ browser.min.js:7
(anonymous) @ browser.min.js:7
applyStyle @ browser.min.js:7
parseElement @ browser.min.js:7
(anonymous) @ browser.min.js:7
parseElement @ browser.min.js:7
(anonymous) @ browser.min.js:7
parseElement @ browser.min.js:7
(anonymous) @ browser.min.js:7
parseElement @ browser.min.js:7
(anonymous) @ browser.min.js:7
parseElement @ browser.min.js:7
(anonymous) @ browser.min.js:7
parseElement @ browser.min.js:7
(anonymous) @ browser.min.js:7
parseElement @ browser.min.js:7
(anonymous) @ browser.min.js:7
parseElement @ browser.min.js:7
(anonymous) @ browser.min.js:7
parseElement @ browser.min.js:7
(anonymous) @ browser.min.js:7
parseElement @ browser.min.js:7
convertHtml @ browser.min.js:7
htmlToPdfMake @ browser.min.js:7
1.module.exports @ browser.min.js:7
_createContent @ pdfContent.js:105
_createPdf @ pdfCreator.js:244
download @ pdfCreator.js:89
Object.keys.forEach.data. @ BaseComponent.js:470
(anonymous) @ parser.js:727
(anonymous) @ parser.js:469
dmx.parse @ parser.js:404
(anonymous) @ on.js:14
a @ events.js:280
dispatch @ jquery-3.5.1.slim.min.js:2
v.handle @ jquery-3.5.1.slim.min.js:2Understand this errorAI
object.js:128 Uncaught (in promise) Error: unsupported number: NaN
at number (object.js:128:11)
at PDFDocument.rect (vector.js:111:36)
at Object.drawBackground (textDecorator.js:149:5)
at renderLine (printer.js:480:16)
at renderPages (printer.js:399:6)
at PdfPrinter.createPdfKitDocument (printer.js:165:2)
at pdfMake.js:128:21

And this is what I see in the console when I inspect it

A heterogeneous mass is seen measuring 56 x 54 cm, arising from fundus of gallbladder with resultant wall irregularity. A heterogeneous mass is seen measuring 56 x 54 cm, arising from fundus of gallbladder extending into the liver. 

I think this happens when I try to edit the text in the text box.
Any suggestion will be much appreiated.

brad · January 19, 2025, 6:59pm

Looks like you copy and pasted your text from the web/email and pasted it in your Summernote textarea. Never a good idea. Always paste as plain text.

This is not created by Summernte:

<span style="background-color: var(--bs-body-bg); font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); text-align: var(--bs-body-text-align);">

REVEB · January 19, 2025, 7:09pm

@brad Thank you for your response.
The text was not copy and pasted from somewhere. I have buttons on my page which when clicked, insert the text into the editor.
This is how it is:
I have a button with an onclick function, and the function insert text into the the editor when clicked.
The error therefore is created when I try to paragraph the text or remove the spaces which create the span thereby adding the style to it

REVEB · January 21, 2025, 8:40pm

Please any suggestion on this?

brad · January 21, 2025, 9:05pm

Your pasted content contains invalid code. The code is not from Summernote. Summernote doesn't support span tags. where is your text coming from?

Try just typing some content in the Summernote and see if you still have the same issue.

REVEB · January 22, 2025, 10:06am

Okay so these are my observations:

If I enter the text manually into the editor, and I add some paragraphs, or spaces and I try to clear the paragraphs or the spaces, the span get created in the code and I think is caused by the bootstrap classes.

The same way when my buttons which contains the text release the text into the editor, it'll seem fine untill i try to remove some spaces or do away with some paragraphs, then the error appears.

If i don't remove the paragraphs or spaces, the pdf creator works fine but the moment i did, then the error appears.

I think this is caused by some bootstrap classes.

brad · January 22, 2025, 4:39pm

Do you have the 'Show HTML' button available on your summernote toolbar? If so, view the HTML right in the Summernote editor before and after editing.

REVEB · January 22, 2025, 4:59pm

This is what I found:

Before editing:
 Mass like areas obliterating the gallbladder lumen with multiple internal cystic spaces suggestive of adenomyosis are noted arising from anterior wall . Focal area of thickening is seen in fundus with bright echogenic foci showing distal comet-tail artifact. Multiple cystic spaces within the adenomyoma are seen in fundus . Mass like areas obliterating the gallbladder lumen with multiple internal cystic spaces suggestive of adenomyosis are noted arising from fundus . Focal area of thickening is seen in fundus with bright echogenic foci showing distal comet-tail artifact. Multiple echogenic calcific foci are seen in its walls. Multiple focal, noncontiguous, hypoechoic pockets of edema fluid within the thickened walls seen.

After editing:
Mass like areas obliterating the gallbladder lumen with multiple internal cystic spaces suggestive of adenomyosis are noted arising from anterior wall . Focal area of thickening is seen in fundus with bright echogenic foci showing distal comet-tail artifact. Multiple cystic spaces within the adenomyoma are seen in fundus . Mass like areas obliterating the gallbladder lumen with multiple internal cystic spaces suggestive of adenomyosis are noted arising from fundus . Focal area of thickening is seen in fundus with bright echogenic foci showing distal comet-tail artifact. Multiple echogenic calcific foci are seen in its walls. Multiple focal, noncontiguous, hypoechoic pockets of edema fluid within the thickened walls seen.

brad · January 22, 2025, 5:07pm

Hmmm, that's very strange. I have never seen that before. Now I am curious and need to do some testing.

Might need Teodor's help on this one.

REVEB · January 22, 2025, 5:09pm

Yeah it's kind of strange and disturbing as well. I don't know what to do next

brad · January 22, 2025, 5:13pm

I never noticed this before. I just checked my own Summernote text areas on one of my projects and it is doing the same thing. I think this is more of a Summernote Bug than a PDF Creator Bug.

That is disturbing indeed. Any ideas @Teodor?

Teodor · January 22, 2025, 5:15pm

What are the steps to recreate this? I am not sure i understand.

REVEB · January 22, 2025, 5:21pm

okay so I want to export some text from the summernote editor to pdf.
I have buttons which contains the text so when the user clicks on it, it dynamically inserts text into the editor which have an export button on the page to export the contents into pdf.
All seems to be working until I decide to edits the text in the editor and then the error appears.

brad · January 22, 2025, 5:21pm

Just take this text and put it in a Summernote text area.

<p><br></p><p>Mass like areas obliterating the gallbladder lumen with multiple internal cystic spaces suggestive of adenomyosis are noted arising from anterior wall . Focal area of thickening is seen in fundus with bright echogenic foci showing distal comet-tail artifact. Multiple cystic spaces within the adenomyoma are seen in fundus . Mass like areas obliterating the gallbladder lumen with multiple internal cystic spaces suggestive of adenomyosis are noted arising from fundus . Focal area of thickening is seen in fundus with bright echogenic foci showing distal comet-tail artifact. <br></p><p>Multiple echogenic calcific foci are seen in its walls. Multiple focal, noncontiguous, hypoechoic pockets of edema fluid within the thickened walls seen. <br></p>

Then in the editor remove the first empty paragraph. Then check the code again and it has added span tags with all of the bootstrap attributes.

REVEB · January 23, 2025, 2:01am

@Teodor please I'm still waiting for your suggestion on this

Teodor · January 23, 2025, 9:13am

That is some bug with summernote and chrome it seems:

github.com/summernote/summernote

Chrome is wrapping line in span with styling upon deleting previous line break

opened 08:55AM - 13 Dec 18 UTC

closed 01:25PM - 02 Dec 20 UTC

giorgioscia

bug 🐞

Bootstrap 4 version is wrapping 2nd half of merged paragraphs (when I say merged…, just hit backspace between two paras to delete linebreak) in a `` with a load of styling #### steps to reproduce 1. Go to [For bootstrap 4](https://summernote.org/getting-started/#for-bootstrap-4) 2. Type in a sentence 3. Hit return 4. Type in a new sentence 5. Inspect code and see two paras eg. ... ``` The quick brown fox jumps over the lazy dog. One, two, three, four. ``` 6. Go to beginning of 2nd line and hit backspace Expected result... ``` The quick brown fox jumps over the lazy dog.One, two, three, four. ``` Actual result... ``` The quick brown fox jumps over the lazy dog.<span style="background-color: rgb(255, 255, 255); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1rem;">One, two, three, four. ``` #### browser version and os version and summernote version Browser -> Chrome Version 70.0.3538.110 (Official Build) (64-bit) OS -> OS X 10.14.2

github.com/summernote/summernote

Nasty <span style=".." when pasting (macOS)

opened 02:10PM - 27 Mar 20 UTC

closed 05:02AM - 05 Dec 20 UTC

flaushi

bug 🐞

When pasting on macOS (Chrome) I sometimes get such HTML span's: ``` <span sty…le="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 0.9rem;"> ``` I have aready included a callback of the onPaste event, but still, sometimes these tags are created. ``` onPaste: function (e) { var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text'); e.preventDefault(); // Firefox fix setTimeout(function () { document.execCommand('insertText', false, bufferText); }, 10); } ``` This can help find and resolve any issues. 1. Operating System: macOS 2. Browser and Version: Chrome 80 (but also previous versions show this behaviour sometimes) 3. Summernote Version 0.8.12

Please check the solutions offered and we will see if they ever fixed it in summernote updates.

brad · January 23, 2025, 7:52pm

Unfortunately neither of the suggested fixes worked. I hope this can be resolved. I have been getting on our staff's cases for not pasting as plain text only to find out it isn't their fault.

Those solutions are 5-7 years old.

brad · January 23, 2025, 10:01pm

Happens in Safari and Edge as well. Firefox seems to work.

brad · January 23, 2025, 11:54pm

ChatGPT offers up a couple solutions but they don't seem to be doing anything either. I may be doing something wrong. But thought I would post this here to maybe allow someone to get us on the right track.

 $('#summernote').summernote({
    styleWithSpan: false, // Prevents Summernote from wrapping content in span tags
});

or

$('#summernote').summernote({
    callbacks: {
        onChange: function(contents, $editable) {
            const cleanedContent = contents.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, '');
            $('#summernote').summernote('code', cleanedContent);
        }
    }
});

Here is a video of what is happening.