Confirmed Invalid selectors and other issues in editor.js cause pasted text not to be normalized

[Mick West]

Affected version

2.3.6

Copying and pasting formatted text should remove most formatting like colors and font size.

However, editor.js has two instances of

table.querySelectorAll('> tbody > tr')

and two of

row.querySelectorAll('> td, > th')

in

let maxColumns = 0
table.querySelectorAll('> tbody > tr').forEach(row =>
{
const columnCount = row.querySelectorAll('> td, > th').length
    maxColumns = Math.max(maxColumns, columnCount)
})

table.querySelectorAll('> tbody > tr').forEach(row =>
{
const cells = row.querySelectorAll('> td, > th')
const columnCount = cells.length
    if (columnCount < maxColumns)
    {
const tag = columnCount && cells[0].tagName === 'TH' ? '<th />' : '<td />'
       for (let i = columnCount; i < maxColumns; i++)
       {
const newCell = document.createElement(tag)
row.appendChild(newCell)
       }
    }
})

This is an invalid selector, and causes an error to be thrown when pasting in text with a table:

editor-compiled.js?_v=b0e17cd4:1050 Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': '> tbody > tr' is not a valid selector.
    at editor-compiled.js?_v=b0e17cd4:1050:126
    at NodeList.forEach (<anonymous>)
    at b.normalizePaste (editor-compiled.js?_v=b0e17cd4:1049:368)
    at Object.<anonymous> (editor-compiled.js?_v=b0e17cd4:1045:398)
    at Object.chainTrigger (editor-compiled.js?_v=b0e17cd4:79:6)
    at w (editor-compiled.js?_v=b0e17cd4:329:188)
    at D (editor-compiled.js?_v=b0e17cd4:325:199)
    at HTMLDivElement.f (editor-compiled.js?_v=b0e17cd4:312:52)

(The above error is from editing this post, just now)

This causes the selection to be pasted with all formatting, which initially looks fine, but as nothing has been normalized, it looks like this:

[th]
8.5 Character Set

[/th]​

[td width="20%"]
Prev

[/td]

[th]
8 DICOM File Service

[/th]​

[td width="20%"]
Next

[/td]​

---

8.5 Character Set​

This also contains unwanted COLOR and FONT codes, as the error causes the normalization to stop.

(The above copied from the top of https://dicom.nema.org/dicom/2013/output/chtml/part10/sect_8.5.html )

It should perhaps be:

row.querySelectorAll(':scope > td, :scope > th')

and

table.querySelectorAll(':scope > tbody > tr')

While that seems to fix, there is then an error at:

const tag = columnCount && cells[0].tagName === 'TH' ? '<th />' : '<td />'

Possible related to

D

Thread 'The bold function not working on formatted copied and pasted text'

Jul 3, 2024

Pasting a piece of text copied from websites, for example, the title of a YouTube video (which has heading tags of h1,h2,h3... seen from the inspect element tool).
In the forum text box, it doesn't allow the copied text to be unbolded or rebolded.

Working locally via the inspect element tool, I was able to fix this issue by applying a style tag encompassing all heading tags h1-7 and changing the font-weight value to normal.

E.g:
<style> h1,h2,h3,h4,h5,h6,h7 {font-weight: normal} </style>
This allowed the new pasted Text to be bolded and unbolded.

I wanted to now incorporate this change...

• DFB
• bold function not working on formatted text
• Replies: 2
• Forum: Bug reports