Fix ACF standard wysiwyg editor (#1186)

ACF is destroying HTML elements in their `initializeEditor` code.
This results in QTX hooks pointing to detached HTML elements that
no longer exist in the document, breaking the LSB switch.
See: AdvancedCustomFields/acf#767

Change the main i18n configuration to filter out any `acf-editor`
so that the hooks are not created too soon. Delaye them to the
`wysiwyg_tinymce_settings` filter which also sets the mceInit
callback for the visual mode.

i18n-config.json

@@ -24,7 +24,7 @@
               "encode": "display"
             },
             "wp-editor-area": {
-              "jquery": ".wp-editor-area"
+              "jquery": ".wp-editor-area:not([id^=acf-editor])"
             },
             "gallery-caption": {
               "jquery": ".gallery-caption",

modules/acf/js/qtranslatex.js

@@ -34,8 +34,7 @@ $(window).on('load', function () {
     // Add hooks for translatable standard fields, defined as field type -> selector.
     const fieldTypes = {
         text: 'input:text',
-        textarea: 'textarea',
-        wysiwyg: '.wp-editor-area',  // TODO: fix wysiwyg #1186
+        textarea: 'textarea', // only regular textarea, not wysiwyg editors (.wp-editor-area).
     };
     $.each(fieldTypes, function (fieldType, selector) {
         acf.findFields({type: fieldType}).each(function () {
@@ -48,6 +47,26 @@ $(window).on('load', function () {
         });
     });
 
+    // The wysiwyg editor must be handled later than the usual sequence, because ACF are destroying some HTML fields:
+    // See https://github.com/AdvancedCustomFields/acf/issues/767
+    // If the usual content hooks are created before, the references point to HTML objects becoming detached from the doc.
+    acf.addFilter('wysiwyg_tinymce_settings', function (mceInit, id, field) {
+        // In this filter the elements with new ID have been created, so we can finally create the content hooks.
+        const newFieldTextArea = field.$input()[0];
+        qtx.addContentHookB(newFieldTextArea);
+        // Link the init CB for the visual mode (HTML -> tinymce).
+        // Note: wysiwyg_tinymce_init event is not triggered if the Visual Mode is selected later.
+        const origInitCB = mceInit.init_instance_callback;
+        mceInit.init_instance_callback = function (editor) {
+            qtx.attachEditorHook(editor);
+            if (origInitCB !== undefined) {
+                origInitCB();
+            }
+        }
+        return mceInit;
+    });
+
+
     // Add display hooks for translatable settings.
     const displaySelector = '.acf-label > label, .acf-label > p.description, .acf-input > p.description';
     acf.findFields().each(function () {

qtranslate.php

@@ -54,7 +54,7 @@
  * Designed as interface for other plugin integration. The documentation is available at
  * https://github.com/qtranslate/qtranslate-xt/wiki/Integration-Guide/
  */
-define( 'QTX_VERSION', '3.13.0.dev.3' );
+define( 'QTX_VERSION', '3.13.0.dev.4' );
 
 if ( ! defined( 'QTRANSLATE_FILE' ) ) {
     define( 'QTRANSLATE_FILE', __FILE__ );