TinyMCE field keeps modifying HTML after saving page a second time

[gadgetto]

Short description of the issue

TinyMCE field keeps modifying HTML markup which is pasted via code editor (code plugin) after saving the page a second time. I already "aggressively" changed field and module settings to allow each and every content.

Expected behavior

TinyMCE should accept field/module settings and not modifying HTML markup.

Actual behavior

When pasting HTML via TinyMCE code editor and saving the page twice the HTMl markup is modified and some style properties are removed.

Steps to reproduce the issue

1. create a field an set input to TinyMCE
2. set the Pastefilter whitelist in TinyMCE module config to: *[*]
3. enable the code plugin in field settings
4. disable HTML purifier in field settings
5. disable field setting Markup toggles / Convert div tags to p tags on save
6. set Custom settings JSON / JSON text to: { "valid_elements": "*[*]" }
7. create/open a page which contains the TinyMCE field
8. open the code editor and paste the following content:

<h3 class="about-title">Loren ipsum</h3>
<div class="about-item">
    <h4>Server Administration</h4>
    <p><em>Lorem ipsum dolor sit amet</em></p>
    <ul>
        <li>Managed up to 5 projects or tasks at a given time while under pressure</li>
        <li>Recommended and consulted with clients on the most appropriate graphic design</li>
        <li>Created 4+ design presentations and proposals a month for clients and account managers</li>
    </ul>
</div>
<div class="about-item">
    <h4>Email Systems</h4>
    <p><em>Lorem ipsum dolor sit amet</em></p>
    <p>Qui deserunt veniam. Et sed aliquam labore tempore sed quisquam iusto autem sit. Ea vero voluptatum qui ut dignissimos deleniti nerada porti sand markend</p>
</div>
<div class="about-item">
    <h4>Technical Support & Security</h4>
    <p><em>Lorem ipsum dolor sit amet</em></p>
    <p>Quia nobis sequi est occaecati aut. Repudiandae et iusto quae reiciendis et quis Eius vel ratione eius unde vitae rerum voluptates asperiores voluptatem Earum molestiae consequatur neque etlon sader mart dila</p>
</div>

9. now save the page - the HTML markup seems to be fine at this stage
10. save the page a second time - the HTML markup looks something like this now:

<h3 class="about-title">Loren ipsum</h3>
<p></p>
<h4>Server Administration</h4>
<p><em>Lorem ipsum dolor sit amet</em></p>
<ul>
<li>Managed up to 5 projects or tasks at a given time while under pressure</li>
<li>Recommended and consulted with clients on the most appropriate graphic design</li>
<li>Created 4+ design presentations and proposals a month for clients and account managers</li>
</ul>
<p></p>
<p></p>
<h4>Email Systems</h4>
<p><em>Lorem ipsum dolor sit amet</em></p>
<p>Qui deserunt veniam. Et sed aliquam labore tempore sed quisquam iusto autem sit. Ea vero voluptatum qui ut dignissimos deleniti nerada porti sand markend</p>
<p></p>
<p></p>
<h4>Technical Support &amp; Security</h4>
<p><em>Lorem ipsum dolor sit amet</em></p>
<p>Quia nobis sequi est occaecati aut. Repudiandae et iusto quae reiciendis et quis Eius vel ratione eius unde vitae rerum voluptates asperiores voluptatem Earum molestiae consequatur neque etlon sader mart dila</p>
<p></p>

Setup/Environment

Server Details

Software	Version
ProcessWire	3.0.218
PHP	8.1.13
Webserver	Apache/2.4.54 (Unix) OpenSSL/1.0.2u mod_wsgi/3.5 Python/2.7.18 mod_fastcgi/mod_fastcgi-SNAP-0910052141 mod_perl/2.0.11 Perl/v5.30.1
MySQL Server	5.7.39
MySQL Client	mysqlnd 8.1.13

Server Settings

Parameter	Value
allow_url_fopen	1
max_execution_time	30 (changeable)
max_input_nesting_level	64
max_input_time	60
max_input_vars	1000
memory_limit	128M
post_max_size	8M
upload_max_filesize	32M
xdebug
xdebug.max_nesting_level	256
mod_rewrite
mod_security
EXIF Support	1
FreeType	1

GD Settings

Parameter	Value
Version	bundled (2.1.0 compatible)
GIF	1
JPG	1
PNG	1
WebP	1

iMagick Settings

Parameter	Value
Version	6.9.6
GIF	1
JPG	1
PNG	1
SVG	1
PDF	1
WebP	1

Module Details

Module ClassName	Version
ProcessTracyAdminer	1.1.3
ProcessWireUpgrade	0.1.1
ProcessWireUpgradeCheck	0.0.9
TracyDebugger	4.24.6

[matjazpotocnik]

@gadgetto please edit /wire/modules/Inputfield/InputfieldTinyMCE/InputfieldTinyMCETools.php, line 156 and remove === false so it reads if(in_array(InputfieldTinyMCE::toggleCleanDiv, $toggles) && strpos($value, '<div') !== false) {

@ryancramerdesign I can't disable all options in Markup toggles. If I uncheck all checkboxes, like this:

all checkboxes are checked again after saving the field. I would fix that by setting the default toggles to an empty array, making the checkboxes unchecked by default, as this is the case with the CKE editor.

[ryancramerdesign]

@gadgetto @matjazpotocnik Thanks, I've pushed a fix for this. I used Matjaz's suggestion and that also seemed to fix the issue Gadgetto mentioned, as I can't duplicate it here any more (the markup divs and classes remain after multiple saves). Though please let me know if you are still observing any issues.

[gadgetto]

Problem fixed! Great! Thanks.