Paste content with styling issue

[kranczeer]

Hello,

I want to thank you once again for this editor. Very good job!
After your newest release I used attributesWhitelist to keep style attribute while pasting following elements: table, tbody, thead, tr, td. I have following problem: some of styles are just missing. What is really strange, that this happens only when I have version from NPM. When I downloaded release version and added whole dist folder, then suneditor behaves as it should.

In my case, the border-type style disappear (I noticed only this, maybe something else). Please check it on following codesandboxes - please select and copy table which is under text editor and try to paste it. For this example I disabled your custom CSS styles for tables.

NPM example: https://i.imgur.com/wb0cuzC.gifv
NPM sandbox: https://codesandbox.io/s/suneditor-paste-npm-9mwt9

non-NPM example: https://i.imgur.com/6en9YRp.gifv
non-NPM: https://codesandbox.io/s/suneditor-paste-no-npm-e7fs4

I will be thankful for any investigation in this case and fixing this bug, because this is one of most important functionality in my application (pasting every style).

Kind regards,
Adrian

[JiHong88]

Hi
Both modes work fine.

<table style="color: rgb(0, 0, 0); font-family: sans-serif; font-size: medium; border-width: initial; border-style: none; border-color: initial;">
    <tbody>
        <tr style="height: 14pt;">
            <td style="width: 198.45pt; border-top: 1pt solid black; border-right: 1pt solid black; border-bottom: 1pt solid black; padding: 0in 5.4pt; height: 14pt;">

However, I noticed that "styles.css" is defined differently.
NPM sandbox > styles.css

body {
  font-family: sans-serif;
}

.sun-editor-editable table td,
.sun-editor-editable table th {
  border: none !important;
}

non-NPM sandbox > styles.css

body {
  font-family: sans-serif;
}

.sun-editor-editable table td {
  border: none;
}

.sun-editor-editable table td.se-table-selected-cell {
  border: none;
}

Try the test again.
Thank you.

[kranczeer]

Hello,

thank you for fast response. Yes, it's my mistake on the styles because I was disabling all borders for rows and cols. Right now styles are the same. But please take a look at the difference between source codes after pasting the tables (screen below). On non-NPM version we have full style border-bottom: 1pt solid black but on NPM version, the border-type is missing which cause divided CSS properties which we can see on right side.

I noticed that this behaviour is only on Google Chrome browser, because on Firefox this works fine. Styles on both versions (npm and non-npm) are applied to this element:

While debugging this issue on NPM version I saw, that you are calling execCommand function in 5186 line in core.js file with insertHTML parameter and cleanData. Here the cleanData is okay, but when you are trying to get this data by getContents function from innerHTML in 3656 line then the attributes like border-type are missing. I found some related issues on Internet, maybe this will be helpful for you.

https://stackoverflow.com/questions/25941559/is-there-a-way-to-keep-execcommandinserthtml-from-removing-attributes-in-chr

tiff/wysihtml5#167

I will be thankfull for any help, because main target of my application is Google Chrome and this is very important feature.

Kind regards,
Adrian

[kranczeer]

Hello,

I have small question - do you think about some concrete date to release new version with this bug fixed? Because I need to make a decision what to do - wait for your release or make some temporary workaround for it :)

I really appreciate your work, good job!

Thanks,
Adrian

[JiHong88]

Hello,

I'll update the version if only this issue is fixed.
no matter how late, it will be release at the this week.

Thank you

[JiHong88]

The 2.27.0 version has been updated.
If there is an issue, please register as a new issue.
Thank you.

[deveshlashkari]

Hello, I am facing the same issue in the React version of the editor. Is the issue fixed for the same ? @JiHong88

[JiHong88]

@deveshlashkari This issue has been resolved.
Try the latest version.

[Arushi2012]

@JiHong88 Our project is also facing the same issue.

Node version is: 16.19.1
Npm : v8
suneditor: 2.44.5
browser: google chrome Version 111.0.5563.146 (Official Build) (x86_64)
react version: 16.6

The error we are getting is:

vendor.js:2 Uncaught TypeError: Cannot read properties of null (reading '1')
    at Object._cleanStyle (suneditor.js:1:450406)
    at Object._cleanTags (suneditor.js:1:451352)
    at String.replace (<anonymous>)
    at Object.cleanHTML (suneditor.js:1:453242)
    at Object.getContents (suneditor.js:1:447129)
    at h (suneditor.js:1:463964)
    at suneditor.js:1:464594
    at i (vendor.js:2:150133)
_cleanStyle @ suneditor.js:1
_cleanTags @ suneditor.js:1
cleanHTML @ suneditor.js:1
getContents @ suneditor.js:1
h @ suneditor.js:1
(anonymous) @ suneditor.js:1
i @ vendor.js:2
setTimeout (async)
(anonymous) @ vendor.js:2
push @ suneditor.js:1
onInput_wysiwyg @ suneditor.js:1
i @ vendor.js:2

vendor.js:2 Uncaught TypeError: Cannot read properties of null (reading '1')
    at Object._convertFontSize (suneditor.js:1:449226)
    at Object.active (suneditor.js:1:76439)
    at _applyTagEffects (suneditor.js:1:472796)
    at i (vendor.js:2:150133)

Our application has a form which has some text data in it.
This error comes when we are pasting the content of this text inside SunEditor.

This is really critical for our application.
Can this be resolved soon?

[JiHong88]

@Arushi2012 I think it might be for the same reason as this issue. #1207
It will be fixed in the next version.

[Arushi2012]

Ah yes!
@JiHong88 Do you have an ETA when the next release will happen?

[JiHong88]

@Arushi2012 I will update the version once this issue is resolved.
It will be within this week.

[Arushi2012]

Awesom @JiHong88 !
Thank you so much!
You are a saviour.

[Arushi2012]

@JiHong88 There seems to be one more problem, I'm not sure if this has been reported earlier so mentioning it here. When we make a change in the editor, the following problem is reported in the console:

Uncaught TypeError: this._resourcesStateChange is not a function
    at Object.<anonymous> (suneditor.js:1:470327)
    at i (vendor.js:2:150133)

[JiHong88]

@Arushi2012 Do you using suneditor-react?
I don't know the exact cause yet, but it seems that the error appears when using <React.StrictMode>.

[JiHong88]

@Arushi2012 The 2.44.7 version has been updated.
Thank you.

[Arushi2012]

-react?

Yes @JiHong88 , we use suneditor-react.

Thank you so much for the release!