[Bug] [PRO] TinyMCE fields overwrite 'content_css' option

[chrispittman]

Hi. Not sure where to report bugs in Backpack Pro; happy to re-report somewhere else if necessary.

Bug report

What I did

• Install Backpack and Backpack Pro
• Create a TinyMCE column, with an 'options' block containing a 'custom_css' key:

  CRUD::field('landing_page_content')
  ->type('tinymce')
  ->options([
          'content_css' => '/css/custom.css',
      ]);

What I expected to happen

TinyMCE applies the custom CSS file to the content, as described in the TinyMCE docs.

What happened

TinyMCE does not apply the custom content CSS. It doesn't even attempt to load the CSS file.

(In tinymce.blade.php, setTinyMceColorMode() overrides the content_css configuration. setTinyMceBackgroundColor() overrides body.style.cssText. In my opinion, those should both be skipped if there's an existing content_css configuration, because making text look like it's going to look on the resulting page is more important than applying dark mode.)

What I've already tried to fix it

Hacked tinymce.blade.php in the vendor folder and added an if (!configuration['content_css']) { block around the two lines mentioned above. This fixes it for me temporarily (until the next composer install, at least).

Is it a bug in the latest version of Backpack?

After I run composer update backpack/crud the bug... is it still there?

• Yes. Also still there after composer update backpack/pro.

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:

### PHP VERSION:
PHP 8.2.10-2ubuntu1 (cli) (built: Sep  5 2023 14:37:47) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.10, Copyright (c) Zend Technologies
    with Zend OPcache v8.2.10-2ubuntu1, Copyright (c), by Zend Technologies

### LARAVEL VERSION:
10.40.0.0

### BACKPACK PACKAGE VERSIONS:
backpack/basset: 1.2.2
backpack/crud: 6.7.1
backpack/generators: v4.0.2
backpack/permissionmanager: 7.1.1
backpack/pro: 2.1.11
backpack/settings: 3.1.0
backpack/theme-tabler: 1.2.0

[welcome[bot]]

Hello there! Thanks for opening your first issue on this repo!

Just a heads-up: Here at Backpack we use Github Issues only for tracking bugs. Talk about new features is also acceptable. This helps a lot in keeping our focus on improving Backpack. If you issue is not a bug/feature, please help us out by closing the issue yourself and posting in the appropriate medium (see below). If you're not sure where it fits, it's ok, a community member will probably reply to help you with that.

Backpack communication channels:

• Bug Reports, Feature Requests - Github Issues (here);
• Quick help (How do I do X) - Gitter Chatroom;
• Long questions (I have done X and Y and it won't do Z wtf) - Stackoverflow, using the backpack-for-laravel tag;
• Showing off something you've made, asking for opinion on Backpack/Laravel matters - Reddit;

Please keep in mind Backpack offers no official / paid support. Whatever help you receive here, on Gitter, Slack or Stackoverflow is thanks to our awesome awesome community members, who give up some of their time to help their peers. If you want to join our community, just start pitching in. We take pride in being a welcoming bunch.

Thank you!

-- Justin Case The Backpack Robot

[o15a3d4l11s2]

Hi, @chrispittman, I am sure the Backpack team will get back to you pretty fast.

In the meantime if it is important for you to re-run composer update or similar command, you can override the field by following this guide.

It will create your own copy of tinymce.blade.php which you can modify until your issue is reviewed and resolved. Just do not forget to delete your copy after that in order to get all new improvements/fixes on the field from the Backpack project.

[jcastroa87]

Hello @chrispittman

Thanks for bringing this issue to us, I created a PR https://github.com/Laravel-Backpack/PRO/pull/249 to try to solve it.

In pro file: resources/views/fields/tinymce.blade.php

replace this line:

configuration['content_css'] = isTinyMceEditorInDarkMode() ? 'dark' : '';

for this:

if (typeof configuration['content_css'] == 'undefined') {
    configuration['content_css'] = isTinyMceEditorInDarkMode() ? 'dark' : '';
}

replace this line:

body.style.cssText = isTinyMceEditorInDarkMode() ? 'background-color: #221e26; color: #c9c1d6;' : 'background-color: #fff;';

for this:

if (typeof configuration['content_css'] == 'undefined') {
                body.style.cssText = isTinyMceEditorInDarkMode() ? 'background-color: #221e26; color: #c9c1d6;' : 'background-color: #fff;';
            }

Let me know if that works for you; we will test it internally, too.

Cheers.

[chrispittman]

I can confirm that this works as expected (in both light and dark mode). Thanks! If there's anything I can do to help push this PR along, please let me know.

[jcastroa87]

The PR is merged, and the next release of PRO will be included.

I will close the issue.

Cheers.