[Bug?]: Overriding em and strong to i and b gets re-overridden when saving

[kokoshneta]

What happened?

I’m not sure if this is a bug here or in TinyMCE itself (if at all) – I don’t have a full TinyMCE install anywhere to test with.

For semantic reasons (and for reasons of CSS styling), I don’t want my editor to use <em> and <strong> for italicised and bolded text, so I’ve added the following to override TinyEditor to use <i>  and <b> instead, based on the formats documentation:

'profiles' => [
  'base' => [
    'custom_configs' => [
      'formats' => [
        'bold' => [
          [
            'inline' => 'b',
            'remove' => 'all'
          ],
          [
            'inline' => 'strong',
            'remove' => 'all'
          ]
        ],
        'italic' => [
          [
            'inline' => 'i',
            'remove' => 'all'
          ],
          [
            'inline' => 'em',
            'remove' => 'all'
          ]
        ]
      ]
    ],
  ],
]

I expected this to consistently convert all <strong> and <em> tags/elements to <b> and <i> tags/elements, respectively, both when viewing, editing and saving using TinyEditor, and when I’m editing text in the editor now, the correct tags are in fact used: the indicator at the bottom shows P » B instead of P » STRONG, and when I inspect the actual element in the browser, I can confirm that it is a <b> element, not a <strong> element.

But as soon as I save the resource, the <i> and <b> tags are transformed into <em> and <strong> tags again, so when I reload the page after saving, the same element that was <b> before is now suddenly a <strong> element.

How to reproduce the bug

Add formats overrides as per above and use the Bold and Italic functionality to format it. Confirm that the status bar at the bottom of the editor correctly says P » I/B. Save the Filament resource you’re editing and reload the page, and the formatting has been reset to P » EM/STRONG.

Package Version

1.7.4

PHP Version

8.1.12

Laravel Version

9.52.10

Which operating systems does with happen with?

macOS, Windows

[mohamedsabil83]

This issue is related to the behavior of the editor itself. It has something like a dictionary of proper usage that auto-replace tags like b -> strong, i -> em ... etc.

You can override that by publishing the package's view:

php artisan vendor:publish --tage=filament-forms-tinyeditor-views

then add valid_elements: 'b,i,b/strong,i/em', after tinymce.init({.

Maybe will add a feature in a future release to configure this from the configuration file instead of publishing and modifying the view.

[kokoshneta]

Ah – a case of ‘it’s not a bug, it’s a feature (but it’s actually a bug)’ if ever there was one!

Publishing the view and adding those valid_elements rules almost fixed it, but of course removed all other valid elements. Adding them as extended_valid_elements instead made everything work perfectly. Thank you!

[mohamedsabil83]

You're welcome