[IMP] web_editor: align t-field with other placeholders

This commit completes the addition of t-field with a few changes in its
behaviour in the editor:
- t-field nodes, like t-esc or t-out, are considered as unbreakable
- similarly, they are defined as 'demo data' which cannot be edited

closes odoo/odoo#128228

Related: odoo/enterprise#43978
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>

addons/web_editor/static/src/js/backend/QWebPlugin.js

@@ -44,7 +44,7 @@ export class QWebPlugin {
 
         this._fixInlines(subRoot);
 
-        const demoElements = subRoot.querySelectorAll('[t-esc], [t-raw], [t-out]');
+        const demoElements = subRoot.querySelectorAll('[t-esc], [t-raw], [t-out], [t-field]');
         for (const element of demoElements) {
             element.setAttribute('contenteditable', 'false');
         }

addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js

@@ -1320,7 +1320,8 @@ export function isUnbreakable(node) {
                 node.getAttribute('t-foreach') ||
                 node.getAttribute('t-value') ||
                 node.getAttribute('t-out') ||
-                node.getAttribute('t-raw'))) ||
+                node.getAttribute('t-raw')) ||
+                node.getAttribute('t-field')) ||
         node.classList.contains('oe_unbreakable')
     );
 }