Froala's Editor is removing style when it comes in the head tag

guipilon commented 6 years ago

Expected behavior.

When Copying a Text from Pages (MacOS), the font-family, font color and other formatting parameters should be present when pasting it to froala's eidtor.

Actual behavior.

When Copying a Text from Pages (MacOS), the font-family, font color and other formatting parameters are being removed when pasting it to froala's eidtor.

Steps to reproduce the problem.

-Copy a text with formatting (text color, font size) from Page. -Paste the text to froala's editor. -Verify that the formatting was not carried from Pages to froala's editor

Additional information.

HTML in event beforeCleanup.paste: `<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

this text is red

` HTML in event afterCleanup.paste: `

this text is red

` Froala Options: `pasteDeniedAttrs: ['id'], htmlDoNotWrapTags: ['script', 'style', 'span', 'div', 'pre'], pasteAllowedStyleProps: [ 'white-space', 'font-family', 'font-size', 'background', 'color', 'width', 'text-indent', 'text-align', 'vertical-align', 'background-color', 'padding-left', 'padding', 'margin', 'height', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'text-decoration', 'font-weight', 'font-style', 'pre', 'type' ], htmlAllowedTags: [ 'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'queue', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'style', 'section', 'select', 'small', 'source', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr' ], htmlAllowedEmptyTags: ['textarea', 'a', 'iframe', 'object', 'video', 'style', 'script', '.fa', 'span', 'div'], htmlRemoveTags: ['script'], height: 250, useClasses: false, fullPage: true, toolbarBottom: true, placeholderText: 'Email body', charCounterCount: false, linkList: [], tabSpaces: 4, scrollableContainer: '.email-dialog', imageUploadMethod: 'PUT', imageUploadURL: Config.restURL + '/media/inline-images', requestHeaders: {Authorization: 'Bearer ' + $cookieStore.get('bearerToken')}, toolbarButtons : ['attachFiles','insertLink', 'insertImage', '|','fontFormat', 'color', '|', 'outdent', 'indent', 'quote', 'formatOL', 'formatUL', 'align', 'html', '|', 'trackClicks', 'trackOpens'], pluginsEnabled: ['align', 'charCounter', 'codeBeautifier', 'codeView', 'colors', 'fontFormatPlugin', 'emoticons', 'entities', 'fontFamily', 'fontSize', 'fullscreen', 'image', 'inlineStyle', 'lineBreaker', 'link', 'lists', 'paragraphFormat', 'paragraphStyle', 'quote', 'save', 'table', 'url', 'video', 'wordPaste'], wordPasteModal: false,` ##### OS. Mac OS 10.10 Yosemite ##### Browser. Google Chrome 65

Alderr commented 6 years ago

@stefanneculai This exact bug had me up all night. 😭. I thought it was just a bug in the react version lol.

A couple hundred google searches later I realized:

[1] These demos work! https://codepen.io/Froala/pen/qrwQRp https://codepen.io/obi_obi/pen/RLEpQb

As long as the options/setup match the RLEpQb aka iframe demo (iframe, div vs textarea, etc).

So, I ended up just looking at demos' imports &... ta-dah. duct tape fix.

If you replace the js file import in the HTML files of the demos with the most recent froala version, the bug appears again.

Video: The bug in its habitat