Eye Highlight Tool fails to highlight content when allow HTML tags are defined using ACF Extended Pro plugin

[suascat]

• [ ] I've read and understood the contribution guidelines.
• [ ] I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened.

ACF Extended Pro extension of Advanced Custom Field (ACF) allows the Text Editor to filter and only allow certain HTML characters (p,strong,b,em,i,br,h2,h3,h4,h5,h6). When we specify these tags, the eye highlight fails to highlight content in the editor.

When you disable this feature, clicking the eye-icon works again!

Please describe what you expected to happen and why.

Eye Highlight should work even when those tags are set.

How can we reproduce this behavior?

1. Install and activate ACF or ACF Pro
2. ACF Content Analysis for Yoast SEO
3. Install and activate ACF Extended Pro extension
4. Install Yoast SEO free and/or Premium
5. Add new field type WYSIWYG Editor.
6. Within this field type setting, enable the Valid Elements setting and input the HTML tags (p,strong,b,em,i,br,h2,h3.. etc) that you want to allow in the editor.

7. Input some text in the ACF WYSIWYG editor and click the eye icon. Eye highlight fails to highlight content.

When you disable this feature, clicking the eye-icon works again!

Technical info

• WordPress version: 6.3.1
• ACF Content Analysis for Yoast SEO version: 3.1
• Yoast SEO version: 21.2
• ACF type: ACF Pro 6.2.1.1 or ACF 6.2.1
• Relevant plugins in case of a bug: ACF Extended Pro extension

[suascat]

Please inform the customer of conversation # 1056670 when this conversation has been closed.

[jasonridesabike]

Is there an ETA on this? I have a particularly annoyed client atm.

[acf-extended]

Hello! ACF Extended here!

I'm not quite sure how to reproduce the issue, as I don't use Yoast Premium. The "readability" icon is green on my side when using Yoast Free + ACF Yoast + ACF Extended Pro "Valid Elements" in the WYSIWYG. So maybe this was fixed?

In case it wasn't, here are some insights on how the ACFE "Valid Elements" feature works:

It uses the native ACF JS hook wysiwyg_tinymce_settings which can be found here: /advanced-custom-fields-pro/assets/build/js/acf-input.js:8913 in order to get in the TinyMCE editor settings (which is the JS version of the tiny_mce_before_init WP PHP hook), and pass the valid_elements setting (see documentation).

The setting is only set in Javascript, there is no PHP involved in this feature.

I hope this will give you some leads.

Regards.