[IMP] apply todos: batch 2

Author: abd-msyukyu-odoo

addons/html_editor/static/src/main/toolbar/toolbar.js

@@ -87,7 +87,11 @@ export function composeToolbarButton(userCommand, toolbarItem) {
         isAvailable: (selection) =>
             [userCommand.isAvailable, toolbarItem.isAvailable]
                 .filter(Boolean)
-                .every((predicate) => predicate(selection)),
+                .every((predicate) => {
+                    console.log("heyy");
+                    return predicate(selection);
+                }),
+
         description: description instanceof Function ? description : () => description,
     };
 }

addons/mass_mailing/static/src/fields/html_field/mass_mailing_html_field.js

@@ -4,7 +4,6 @@ import { MassMailingIframe } from "@mass_mailing/iframe/mass_mailing_iframe";
 import { ThemeSelector } from "@mass_mailing/themes/theme_selector/theme_selector";
 import { onWillUpdateProps, status, toRaw, useEffect, useRef } from "@odoo/owl";
 import { useChildRef, useService } from "@web/core/utils/hooks";
-import { useTransition } from "@web/core/transition";
 import { effect } from "@web/core/utils/reactive";
 import { htmlField, HtmlField } from "@html_editor/fields/html_field";
 import { normalizeHTML, parseHTML } from "@html_editor/utils/html";
@@ -41,22 +40,12 @@ export class MassMailingHtmlField extends HtmlField {
         this.iframeRef = useChildRef();
         this.codeViewButtonRef = useRef("codeViewButtonRef");
 
-        // Use a transition to display the HtmlField only when the themes
-        // service finished loading
-        this.displayTransition = useTransition({
-            name: "mass_mailing_html_field",
-            initialVisibility: false,
-            immediate: false,
-            leaveDuration: 150,
-            onLeave: () => {},
-        });
-
-        // Force a full reload for MassMailingIframe on readonly change
         onWillUpdateProps((nextProps) => {
             if (
                 this.props.readonly !== nextProps.readonly &&
                 (this.props.readonly || nextProps.readonly)
             ) {
+                // Force a full reload for MassMailingIframe on readonly change
                 this.state.key++;
             }
             if (nextProps.readonly) {
@@ -65,27 +54,30 @@ export class MassMailingHtmlField extends HtmlField {
             if (nextProps.record.isNew) {
                 Object.assign(toRaw(this.state), {
                     activeTheme: undefined,
+                    showCodeView: false,
                     showThemeSelector: true,
-                    showCodeView: true,
                 });
             }
         });
 
-        // Recompute the themeOptions when the html value changes on the record
         let currentKey;
         effect(
             (state) => {
                 if (status(this) === "destroyed") {
                     return;
                 }
                 if (state.key !== currentKey) {
-                    this.updateActiveTheme();
+                    // html value may have been reset from the server:
+                    // - await the new iframe
                     this.resetIframe();
+                    // - ensure that the activeTheme is up to date.
+                    this.updateActiveTheme();
                     currentKey = state.key;
                 }
             },
             [this.state]
         );
+
         // Evaluate if the themeSelector should be displayed
         effect(
             (state) => {
@@ -95,25 +87,26 @@ export class MassMailingHtmlField extends HtmlField {
                 const activeTheme = state.activeTheme;
                 const showThemeSelector = state.showThemeSelector;
                 if (!activeTheme && !showThemeSelector && !this.props.readonly) {
-                    // Always show the theme selector when the theme is unknown
+                    // Show the ThemeSelector when the theme is unknown and the content can be
+                    // changed (invalid value).
                     state.showThemeSelector = true;
                 } else if ((activeTheme && showThemeSelector) || this.props.readonly) {
                     state.showThemeSelector = false;
                 }
                 if (showThemeSelector && toRaw(state.showCodeView)) {
-                    // Ensure that the code view is always disabled when the theme selector
-                    // is displayed
+                    // Never show the CodeView with the ThemeSelector.
                     state.showCodeView = false;
                 }
             },
             [this.state]
         );
-        // Sets the iframe height
+
         useEffect(
             () => {
                 if (!this.codeViewRef.el) {
                     return;
                 }
+                // Set the initial textArea height.
                 this.codeViewRef.el.style.height = this.codeViewRef.el.scrollHeight + "px";
             },
             () => [this.codeViewRef.el]
@@ -129,6 +122,10 @@ export class MassMailingHtmlField extends HtmlField {
         this.lastIframeLoaded = this.keepLastIframe.add(this.iframeLoaded);
     }
 
+    onIframeLoad(iframeLoaded) {
+        this.iframeLoaded.resolve(iframeLoaded);
+    }
+
     updateActiveTheme() {
         const activeTheme = this.themeService.getThemeName(this.value);
         if (toRaw(this.state).activeTheme !== activeTheme) {
@@ -157,18 +154,15 @@ export class MassMailingHtmlField extends HtmlField {
     }
 
     /**
-     * Contrary to the super method, toggling the codeView in mass_mailing
-     * does not keep the editor alive, as the editor does properly support
-     * reinsertion. Instead, a new editor will be reconstructed from the
-     * codeView value, and all plugins will be instantiated from scratch.
+     * Content reinsertion as done in the super method is not properly supported
+     * by the editor (corrupted state). This override forces the creation of
+     * a new editor instead, and all plugins will be instantiated from scratch.
      * @override
      */
     async toggleCodeView() {
         await this.commitChanges();
         this.state.showCodeView = !this.state.showCodeView;
-        if (!this.state.showCodeView && this.editor) {
-            this.state.key++;
-        }
+        this.state.key++;
     }
 
     /**
@@ -193,22 +187,26 @@ export class MassMailingHtmlField extends HtmlField {
 
     getBuilderConfig() {
         const config = super.getConfig();
-        // All plugins for the html builder are defined in mass_mailing_builder
+        // All plugins for the html Builder are defined in MassMailingBuilder
         delete config.Plugins;
         return {
             ...config,
-            allowMediaDialogVideo: false, // videos aren't allowed in mails
-            withBuilder: true,
-            toggleThemeSelector: (show) => this.toggleThemeSelector(show),
             mobileBreakpoint: "md",
         };
     }
 
     getSimpleEditorConfig() {
+        const config = super.getConfig();
+        const codeViewCommand = [config.resources?.user_commands]
+            .filter(Boolean)
+            .flat()
+            .find((cmd) => cmd.id === "codeview");
+        if (codeViewCommand) {
+            codeViewCommand.isAvailable = () => this.env.debug;
+        }
         return {
-            ...super.getConfig(),
+            ...config,
             Plugins: [...MAIN_EDITOR_PLUGINS, DynamicPlaceholderPlugin],
-            toggleThemeSelector: (show) => this.toggleThemeSelector(show),
         };
     }
 
@@ -224,33 +222,15 @@ export class MassMailingHtmlField extends HtmlField {
         };
     }
 
-    onIframeLoad(iframeLoaded) {
-        this.iframeLoaded.resolve(iframeLoaded);
-    }
-
-    toggleThemeSelector(show = true) {
-        this.state.showThemeSelector = show;
-    }
-
-    /**
-     * Process the content at a specifically designed location to avoid
-     * interference with the UI.
-     * @override
-     */
-    insertForInlineProcessing(el) {
-        const processingContainer = this.iframeRef.el.contentDocument.querySelector(
-            ".o_mass_mailing_processing_container"
-        );
-        processingContainer.append(el);
-    }
-
     onTextareaInput(ev) {
+        this.onChange();
         ev.target.style.height = ev.target.scrollHeight + "px";
     }
 
     /**
      * Ensure that the inlineField has its first value set (in case the
-     * body_arch was set manually without using this widget).
+     * field value was set manually without using this widget).
+     * @override
      */
     async _commitChanges({ urgent }) {
         if (
@@ -269,20 +249,21 @@ export class MassMailingHtmlField extends HtmlField {
      * Complete rewrite of `updateValue` to ensure that both the field and the
      * inlineField are saved at the same time. Depends on the iframe to compute
      * the style of the inlineField.
-     * TODO EGGMAIL: this is too slow for urgent save. We should display the
-     * save confirmation popup like in website on beforeUnload, unlike other
-     * html_fields in form views.
      * @override
      */
     async updateValue(value) {
         await this.lastIframeLoaded;
         this.lastValue = normalizeHTML(value, this.clearElementToCompare.bind(this));
         this.isDirty = false;
         const shouldRestoreDisplayNone = this.iframeRef.el.classList.contains("d-none");
+        // d-none must be removed for style computation.
         this.iframeRef.el.classList.remove("d-none");
         const processingEl = this.iframeRef.el.contentDocument.createElement("DIV");
         processingEl.append(parseHTML(this.iframeRef.el.contentDocument, value));
-        this.insertForInlineProcessing(processingEl);
+        const processingContainer = this.iframeRef.el.contentDocument.querySelector(
+            ".o_mass_mailing_processing_container"
+        );
+        processingContainer.append(processingEl);
         const cssRules = getCSSRules(this.iframeRef.el.contentDocument);
         await toInline(processingEl, cssRules);
         const inlineValue = processingEl.innerHTML;
@@ -305,11 +286,16 @@ export const massMailingHtmlField = {
     component: MassMailingHtmlField,
     extractProps({ attrs, options }) {
         const props = htmlField.extractProps(...arguments);
+        props.editorConfig.allowVideo = false;
+        props.editorConfig.baseContainers = ["P"];
         Object.assign(props, {
             filterTemplates: options.filterTemplates,
             inlineField: options["inline_field"],
             migrateHTML: false,
             embeddedComponents: false,
+            isCollaborative: false,
+            sandboxedPreview: false,
+            codeview: true,
         });
         return props;
     },

addons/mass_mailing/static/src/fields/html_field/mass_mailing_html_field.xml

@@ -6,10 +6,10 @@
         <t t-if="state.showCodeView">
             <div class="d-flex">
                 <textarea name="codeView" t-ref="codeView" class="o_codeview" t-att-value="this.value"
-                    t-on-change="onChange" t-on-input="onTextareaInput"/>
+                    t-on-input="onTextareaInput"/>
                 <div t-if="state.showCodeView" t-ref="codeViewButtonRef"
-                    class="btn-group o_mass_mailing_code_view" t-on-click="toggleCodeView">
-                    <button class="o_codeview_btn btn btn-primary">
+                    class="btn-group o_mass_mailing_code_view">
+                    <button class="o_codeview_btn btn btn-primary" t-on-click="toggleCodeView" accesskey="d">
                         <i class="fa fa-code" />
                     </button>
                 </div>