Prevent TinyMCE to remove styles when content is pasted from a template

[cedric-anne]

Q	A
Bug fix?	yes
New feature?	no
BC breaks?	no
Deprecations?	no
Tests pass?	yes
Fixed tickets	#15636

After some reverse engeneering, I figured out that there was an undocumented internal option that could be passed to mceInsertClipboardContent command. Passing this option with the true values disable some filtering operations that seems to be the cause of the issue here.

I was not able to identify exactly what is the issue here, and if it is a bug from TinyMCE or an expected behaviour. I will probably open an issue on their repository later.

To reproduce :

• create a solution template that contains a table with a background color;
• create a ticket and add a solution based on this template;
• check whether the background color is preserved when solution content is copied from the template.

[cedric-anne]

I was not able to identify exactly what is the issue here, and if it is a bug from TinyMCE or an expected behaviour. I will probably open an issue on their repository later.

It seems to be an intended behaviour. As an alternative solution, I tried to disable the TinyMCE paste_remove_styles_if_webkit option, but it is probably a bad idea.

diff --git a/src/Html.php b/src/Html.php
index 7e6a86ce90..cfd78268c6 100644
--- a/src/Html.php
+++ b/src/Html.php
@@ -3930,6 +3930,7 @@ JS;
                readonly: {$readonlyjs},
                relative_urls: false,
                remove_script_host: false,
+               paste_remove_styles_if_webkit: false,
 
                // Misc options
                browser_spellcheck: true,

The side effect is that, when I paste a content copied from a webpage, every element of the pasted content has a style property that contains its computed styles. For instance, if I copy

and paste it into TinyMCE, it will produce the following rich text code:

<div class="flex-shrink-0 mb-2 flex-self-start flex-md-self-center" style="box-sizing: border-box; flex-shrink: 0 !important; align-self: center !important; margin-bottom: var(--base-size-8, 8px) !important; color: rgb(101, 109, 118); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span class="js-flywheel-draft-pr-step State State--open" style="box-sizing: border-box; border-radius: 2em; display: inline-block; font-size: var(--text-body-size-medium, 0.875rem); font-weight: var(--base-text-weight-medium, 500); line-height: var(--control-medium-lineBoxHeight, 1.25rem); padding: 5px var(--control-medium-paddingInline-normal, 0.75rem); text-align: center; white-space: nowrap; background-color: var(--bgcolor-open-emphasis, var(--color-open-emphasis)); border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid #0000; color: var(--fgcolor-onemphasis, var(--color-fg-on-emphasis)); margin-right: 8px;" title="Status: Open" data-view-component="true"> Open</span></div>
<div class="flex-auto min-width-0 mb-2" style="box-sizing: border-box; flex: 1 1 auto !important; min-width: 0px !important; margin-bottom: var(--base-size-8, 8px) !important; color: rgb(101, 109, 118); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><a class="author Link--secondary text-bold css-truncate css-truncate-target expandable" style="box-sizing: border-box; background-color: transparent; color: var(--fgcolor-muted, var(--color-fg-muted)) !important; text-decoration: none; font-weight: var(--base-text-weight-semibold, 600) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 125px; vertical-align: top;" href="https://github.com/cedric-anne" data-hovercard-type="user" data-hovercard-url="/users/cedric-anne/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self">cedric-anne</a> wants to merge <span class="js-updating-pull-request-commits-count" style="box-sizing: border-box;">1</span> commit into <span class="commit-ref css-truncate user-select-contain expandable base-ref" style="box-sizing: border-box; position: relative; display: inline-block; padding: 0px 4px; font: 0.85em / 1.8 ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; color: var(--fgcolor-muted, var(--color-fg-muted)); white-space: nowrap; background-color: var(--bgcolor-accent-muted, var(--color-accent-subtle)); border-radius: 6px;" title="glpi-project/glpi:10.0/bugfixes"><a class="no-underline " style="box-sizing: border-box; background-color: transparent; color: var(--fgcolor-accent, var(--color-accent-fg)); text-decoration: none !important;" title="glpi-project/glpi:10.0/bugfixes" href="https://github.com/glpi-project/glpi/tree/10.0/bugfixes"><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 80vw; vertical-align: top;">glpi-project</span>:<span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 80vw; vertical-align: top;">10.0/bugfixes</span></a></span> from <span class="commit-ref css-truncate user-select-contain expandable head-ref" style="box-sizing: border-box; position: relative; display: inline-block; padding: 0px 4px; font: 0.85em / 1.8 ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; color: var(--fgcolor-muted, var(--color-fg-muted)); white-space: nowrap; background-color: var(--bgcolor-accent-muted, var(--color-accent-subtle)); border-radius: 6px;" title="cedric-anne/glpi:10.0/tinymce-paste"><a class="no-underline " style="box-sizing: border-box; background-color: transparent; color: var(--fgcolor-accent, var(--color-accent-fg)); text-decoration: none !important;" title="cedric-anne/glpi:10.0/tinymce-paste" href="https://github.com/cedric-anne/glpi/tree/10.0/tinymce-paste"><span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 80vw; vertical-align: top;">cedric-anne</span>:<span class="css-truncate-target" style="box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 80vw; vertical-align: top;">10.0/tinymce-paste</span></a></span></div>

Without paste_remove_styles_if_webkit: false option, produced rich text code is:

<div class="flex-shrink-0 mb-2 flex-self-start flex-md-self-center"><span class="js-flywheel-draft-pr-step State State--open" title="Status: Open" data-view-component="true"> Open</span></div>
<div class="flex-auto min-width-0 mb-2"><a class="author Link--secondary text-bold css-truncate css-truncate-target expandable" href="https://github.com/cedric-anne" data-hovercard-type="user" data-hovercard-url="/users/cedric-anne/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self">cedric-anne</a> wants to merge <span class="js-updating-pull-request-commits-count">1</span> commit into <span class="commit-ref css-truncate user-select-contain expandable base-ref" title="glpi-project/glpi:10.0/bugfixes"><a class="no-underline " title="glpi-project/glpi:10.0/bugfixes" href="https://github.com/glpi-project/glpi/tree/10.0/bugfixes"><span class="css-truncate-target">glpi-project</span>:<span class="css-truncate-target">10.0/bugfixes</span></a></span> from <span class="commit-ref css-truncate user-select-contain expandable head-ref" title="cedric-anne/glpi:10.0/tinymce-paste"><a class="no-underline " title="cedric-anne/glpi:10.0/tinymce-paste" href="https://github.com/cedric-anne/glpi/tree/10.0/tinymce-paste"><span class="css-truncate-target">cedric-anne</span>:<span class="css-truncate-target">10.0/tinymce-paste</span></a></span></div>

[AdrienClairembault]

@cedric-anne it does not seem totally effective, see !30132.

[cedric-anne]

@cedric-anne it does not seem totally effective, see !30132.

It was not working due to usage of the minified JS file that was not patched. After removal of this minified file, it is OK.

[trasher]

No feedback from original reporter, I guess this is OK