From 865080f5f652e1734f9a743a6e0e860aacc7fb74 Mon Sep 17 00:00:00 2001
From: Ingolf Steinhardt <info@e-spin.de>
Date: Wed, 2 Sep 2026 15:56:03 +0200
Subject: [PATCH] Add Twig templates for be_ace_mm and be_tinyMCE_mm

Both legacy .html5 templates now have a Twig counterpart, so the
Twig-preferred loader picks them up automatically. be_ace_mm mirrors
the original inline-script approach (creates the ACE editor div,
theme detection, maxLines/minLines from rows, turbo:render rebinding).
be_tinyMCE_mm extends core's own @Contao/be_tinyMCE.html.twig and
overrides the "custom" block to add max_height from rows, matching
the previous PHP template inheritance.

Verified with Playwright against the mm_employees devstack: ACE editor
renders with correct maxLines/minLines, TinyMCE renders with the
max_height override, no JS errors in either case.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018K6QN9FHjYVFbdRF7PP5fi
---
 .../contao/templates/be_ace_mm.html.twig      | 100 ++++++++++++++++++
 .../contao/templates/be_tinyMCE_mm.html.twig  |   7 ++
 2 files changed, 107 insertions(+)
 create mode 100644 src/CoreBundle/Resources/contao/templates/be_ace_mm.html.twig
 create mode 100644 src/CoreBundle/Resources/contao/templates/be_tinyMCE_mm.html.twig

diff --git a/src/CoreBundle/Resources/contao/templates/be_ace_mm.html.twig b/src/CoreBundle/Resources/contao/templates/be_ace_mm.html.twig
new file mode 100644
index 000000000..a778e291c
--- /dev/null
+++ b/src/CoreBundle/Resources/contao/templates/be_ace_mm.html.twig
@@ -0,0 +1,100 @@
+{% if enableAce|default %}
+    {# Use document.write() here in case ACE is loaded in a subpalette (see #1424) #}
+    <script>window.ace || document.write('<script src="{{ asset('js/ace.js', 'contao-components/ace') }}" charset="utf-8">\x3C/script><script src="{{ asset('js/ext-language_tools.js', 'contao-components/ace') }}" charset="utf-8">\x3C/script><script src="{{ asset('js/ext-whitespace.js', 'contao-components/ace') }}" charset="utf-8">\x3C/script>')</script>
+    <script>
+    window.ace && (function() {
+      let init = function() {
+        let ta = document.getElementById('{{ selector|e('js') }}');
+        if (!ta) return;
+
+        // The editor is already attached - happens when Turbo restores a cached page without
+        // re-running this script. Without this guard a second editor div would be created.
+        if (document.getElementById('{{ selector|e('js') }}_div')) return;
+
+        // Create a div to apply the editor to
+        let div = document.createElement('div');
+        div.id = '{{ selector|e('js') }}_div';
+        div.className = ta.className;
+        ta.parentNode.insertBefore(div, ta.nextSibling);
+
+        // Hide the textarea
+        ta.style['display'] = 'none';
+
+        // Instantiate the editor
+        let editor = ace.edit('{{ selector|e('js') }}_div', {maxLines: Infinity});
+        editor.$blockScrolling = Infinity;
+        editor.setTheme((document.documentElement.dataset.colorScheme === 'dark' ? 'ace/theme/twilight' : 'ace/theme/clouds'));
+        editor.renderer.setScrollMargin(3, 3, 0, 0);
+        editor.renderer.scrollBy(0, -6);
+        editor.container.style.lineHeight = 1.45;
+        editor.getSession().setValue(ta.value);
+        editor.getSession().setMode("ace/mode/{{ aceType|e('js') }}");
+        editor.getSession().setUseSoftTabs(false);
+        editor.getSession().setUseWrapMode(true);
+        editor.setAutoScrollEditorIntoView(true);
+
+      {% if readonly|default %}
+        editor.setReadOnly(true);
+      {% endif %}
+
+        // Auto-detect the indentation
+        let ws = ace.require('ace/ext/whitespace');
+        ws.detectIndentation(editor.getSession());
+
+        // Add the fullscreen command
+        editor.commands.addCommand({
+          name: 'Fullscreen',
+          bindKey: 'F11',
+          exec: function(editor) {
+            let dom = ace.require('ace/lib/dom');
+            dom.toggleCssClass(document.body, 'ace-fullsize');
+            editor.resize();
+          }
+        });
+
+        editor.setOptions({
+          enableSnippets: true,
+          enableBasicAutocompletion: true,
+          enableLiveAutocompletion: true,
+          enableKeyboardAccessibility: true,
+        {% if rows|default %}
+          maxLines: {{ rows|e('js') }},
+          minLines: 2,
+        {% endif %}
+        });
+
+        editor.on('focus', function() {
+          window.dispatchEvent(new Event('store-scroll-offset'));
+        });
+
+        editor.getSession().on('change', function() {
+          ta.value = editor.getValue();
+        });
+
+        // Disable command conflicts with AltGr (see #5792)
+        editor.commands.bindKey('Ctrl-alt-a|Ctrl-alt-e|Ctrl-alt-h|Ctrl-alt-l|Ctrl-alt-s', null);
+      };
+
+      // Contao re-fires the MooTools "domready" on "turbo:render" as a bridge for legacy code
+      // (see backend.js). Without MooTools we listen to that event ourselves, the same way the
+      // core Stimulus controllers do. The listener removes itself once its field is gone, so it
+      // does not pile up while navigating.
+      let onRender = function() {
+        if (!document.getElementById('{{ selector|e('js') }}')) {
+          document.documentElement.removeEventListener('turbo:render', onRender);
+          return;
+        }
+
+        init();
+      };
+
+      if ('loading' === document.readyState) {
+        document.addEventListener('DOMContentLoaded', init, {once: true});
+      } else {
+        init();
+      }
+
+      document.documentElement.addEventListener('turbo:render', onRender);
+    })();
+    </script>
+{% endif %}
diff --git a/src/CoreBundle/Resources/contao/templates/be_tinyMCE_mm.html.twig b/src/CoreBundle/Resources/contao/templates/be_tinyMCE_mm.html.twig
new file mode 100644
index 000000000..224419706
--- /dev/null
+++ b/src/CoreBundle/Resources/contao/templates/be_tinyMCE_mm.html.twig
@@ -0,0 +1,7 @@
+{% extends "@Contao/be_tinyMCE.html.twig" %}
+
+{% block custom %}
+    {% if rows|default %}
+        max_height: {{ rows|e('js') }},
+    {% endif %}
+{% endblock %}