Master mass mailing egg fix builder thjo

addons/html_builder/static/src/bs/bs.buttons.scss

@@ -1,4 +1,4 @@
-.o-website-builder_sidebar .btn {
+.o-snippets-menu .btn {
     --btn-font-weight: normal;
     --btn-font-size: #{$o-we-font-size-sm};
     --btn-box-shadow: 0 0;

addons/html_builder/static/src/builder.js

@@ -30,9 +30,9 @@ export class Builder extends Component {
     static template = "html_builder.Builder";
     static components = { BlockTab, CustomizeTab, InvisibleElementsPanel };
     static props = {
-        closeEditor: { type: Function },
+        closeEditor: { type: Function, optional: true },
         reloadEditor: { type: Function, optional: true },
-        snippetsName: { type: String },
+        snippetModel: { type: Object },
         toggleMobile: { type: Function },
         overlayRef: { type: Function },
         isTranslation: { type: Boolean },
@@ -41,6 +41,8 @@ export class Builder extends Component {
         Plugins: { type: Array, optional: true },
         config: { type: Object, optional: true },
         getThemeTab: { type: Function, optional: true },
+        editableSelector: { type: String },
+        toggleFullscreen: { type: Function, optional: true },
     };
     static defaultProps = {
         config: {},
@@ -65,6 +67,8 @@ export class Builder extends Component {
         this.dialog = useService("dialog");
         this.ui = useService("ui");
         this.notification = useService("notification");
+        this.snippetModel = useState(this.props.snippetModel);
+        this.snippetModel.registerBeforeReload(this.save.bind(this));
 
         const editorBus = new EventBus();
 
@@ -104,7 +108,7 @@ export class Builder extends Component {
                     });
                 },
                 closeEditor: async () => {
-                    await this.props.closeEditor();
+                    await this.props.closeEditor?.();
                 },
                 resources: {
                     trigger_dom_updated: () => {
@@ -146,8 +150,7 @@ export class Builder extends Component {
                     key: this.env.localOverlayContainerKey,
                     ref: this.props.overlayRef,
                 },
-                saveSnippet: (snippetEl, cleanForSaveHandlers) =>
-                    this.snippetModel.saveSnippet(snippetEl, cleanForSaveHandlers),
+                snippetModel: this.snippetModel,
                 getShared: () => this.editor.shared,
                 updateInvisibleElementsPanel: () => this.updateInvisibleEls(),
                 allowCustomStyle: true,
@@ -157,16 +160,15 @@ export class Builder extends Component {
             this.env.services
         );
 
-        this.snippetModel = useState(useService("html_builder.snippets"));
-        this.snippetModel.registerBeforeReload(this.save.bind(this));
-
         onWillStart(async () => {
             await this.snippetModel.load();
             // Ensure that the iframe is loaded and the editor is created before
             // instantiating the sub components that potentially need the
             // editor.
             const iframeEl = await this.props.iframeLoaded;
-            this.editableEl = iframeEl.contentDocument.body.querySelector("#wrapwrap");
+            this.editableEl = iframeEl.contentDocument.body.querySelector(
+                this.props.editableSelector
+            );
             setEditableWindow(iframeEl.contentWindow);
 
             // Prevent image dragging in the website builder. Not via css because
@@ -191,7 +193,7 @@ export class Builder extends Component {
         // });
         onWillDestroy(() => {
             this.editor.destroy();
-            this.editableEl.removeEventListener("dragstart", this.onDragStart);
+            this.editableEl?.removeEventListener("dragstart", this.onDragStart);
             this.snippetModel.unregisterBeforeReload();
             // actionService.setActionMode("current");
         });

addons/html_builder/static/src/builder.xml

@@ -10,8 +10,10 @@
             </div>
             <div class="d-flex gap-1">
                 <button t-on-click="onMobilePreviewClick" type="button" class="o-hb-btn btn d-flex align-items-center" t-att-class="{active: props.isMobile}" data-action="mobile" title="Mobile Preview" accesskey="v" style="--btn-font-size: 20px"><span class="fa fa-mobile" role="img"/></button>
-                <button type="button"  t-on-click="discard" class="o-hb-btn btn" data-action="cancel" title="Tip: Esc to preview" accesskey="j">Discard</button>
-                <button type="button" t-on-click="save" class="o-hb-btn btn btn-success px-3" data-action="save" accesskey="s">Save</button>
+                <button t-if="props.toggleFullscreen" t-on-click="props.toggleFullscreen"
+                    class="o-hb-btn btn d-flex align-items-center" title="Fullscreen" accesskey="f">FS</button>
+                <button t-if="props.closeEditor" type="button"  t-on-click="discard" class="o-hb-btn btn" data-action="cancel" title="Tip: Esc to preview" accesskey="j">Discard</button>
+                <button t-if="props.closeEditor" type="button" t-on-click="save" class="o-hb-btn btn btn-success px-3" data-action="save" accesskey="s">Save</button>
             </div>
         </div>
         <div class="o-snippets-tabs position-relative grid px-2 my-2" style="--columns: 3; --gap: 0.25rem">
@@ -34,7 +36,7 @@
         </div>
         <div class="o-tab-content overflow-y-auto overflow-x-hidden flex-grow-1">
             <t t-if="state.activeTab === 'blocks'">
-                <BlockTab />
+                <BlockTab snippetModel="snippetModel"/>
             </t>
             <t t-if="state.activeTab === 'customize'">
                 <t t-if="props.isTranslation" t-call="html_builder.CustomizeTranslationTab"/>

addons/html_builder/static/src/core/border_radius_style_plugin.js

@@ -37,4 +37,4 @@ class BorderRadiusStylePlugin extends Plugin {
         });
     }
 }
-registry.category("website-plugins").add(BorderRadiusStylePlugin.id, BorderRadiusStylePlugin);
+registry.category("builder-plugins").add(BorderRadiusStylePlugin.id, BorderRadiusStylePlugin);

addons/html_builder/static/src/core/builder_component_plugin.js

@@ -19,6 +19,8 @@ import { BuilderMany2One } from "./building_blocks/builder_many2one";
 import { ModelMany2Many } from "./building_blocks/model_many2many";
 import { Plugin } from "@html_editor/plugin";
 import { Img } from "./img";
+import { BuilderUrlPicker } from "./building_blocks/builder_urlpicker";
+import { BuilderFontFamilyPicker } from "./building_blocks/builder_fontfamilypicker";
 
 export class BuilderComponentPlugin extends Plugin {
     static id = "builderComponents";
@@ -27,7 +29,9 @@ export class BuilderComponentPlugin extends Plugin {
     resources = {
         builder_components: {
             BuilderContext,
+            BuilderFontFamilyPicker,
             BuilderRow,
+            BuilderUrlPicker,
             Dropdown,
             DropdownItem,
             BuilderButtonGroup,

addons/website/static/src/builder/builder_fontfamilypicker.js → addons/html_builder/static/src/core/building_blocks/builder_fontfamilypicker.js

@@ -12,7 +12,7 @@ import { BuilderSelect } from "@html_builder/core/building_blocks/builder_select
 import { BuilderSelectItem } from "@html_builder/core/building_blocks/builder_select_item";
 
 export class BuilderFontFamilyPicker extends Component {
-    static template = "website.BuilderFontFamilyPicker";
+    static template = "html_builder.BuilderFontFamilyPicker";
     static props = {
         ...basicContainerBuilderComponentProps,
         valueParamName: String,
@@ -44,7 +44,7 @@ export class BuilderFontFamilyPicker extends Component {
         });
         this.fonts = [];
         onWillStart(async () => {
-            const fontsData = await this.env.editor.shared.websiteFont.getFontsData();
+            const fontsData = await this.env.editor.shared.builderFont.getFontsData();
             this.fonts = fontsData._fonts;
         });
     }

addons/website/static/src/builder/builder_fontfamilypicker.xml → addons/html_builder/static/src/core/building_blocks/builder_fontfamilypicker.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-<t t-name="website.BuilderFontFamilyPicker">
+<t t-name="html_builder.BuilderFontFamilyPicker">
     <BuilderSelect className="getAllClasses()">
     <!-- TODO Can't t-att on component: t-att="getAllDataAttributes()" -->
         <t t-foreach="fonts" t-as="font" t-key="font_index">

addons/html_builder/static/src/core/building_blocks/builder_urlpicker.js

@@ -0,0 +1,48 @@
+import { BuilderComponent } from "@html_builder/core/building_blocks/builder_component";
+import {
+    BuilderTextInputBase,
+    textInputBasePassthroughProps,
+} from "@html_builder/core/building_blocks/builder_text_input_base";
+import {
+    basicContainerBuilderComponentProps,
+    useBuilderComponent,
+    useInputBuilderComponent,
+} from "@html_builder/core/utils";
+import { Component } from "@odoo/owl";
+import { useChildRef } from "@web/core/utils/hooks";
+import { pick } from "@web/core/utils/objects";
+
+export class BuilderUrlPicker extends Component {
+    static template = "html_builder.BuilderUrlPicker";
+    static props = {
+        ...basicContainerBuilderComponentProps,
+        ...textInputBasePassthroughProps,
+        default: { type: String, optional: true },
+    };
+    static components = {
+        BuilderComponent,
+        BuilderTextInputBase,
+    };
+
+    setup() {
+        this.inputRef = useChildRef();
+        useBuilderComponent();
+        const { state, commit, preview } = useInputBuilderComponent({
+            id: this.props.id,
+            defaultValue: this.props.default,
+        });
+        this.commit = commit;
+        this.preview = preview;
+        this.state = state;
+    }
+
+    get textInputBaseProps() {
+        return pick(this.props, ...Object.keys(textInputBasePassthroughProps));
+    }
+
+    openPreviewUrl() {
+        if (this.inputRef.el.value) {
+            window.open(this.inputRef.el.value, "_blank");
+        }
+    }
+}

addons/website/static/src/builder/builder_urlpicker.xml → addons/html_builder/static/src/core/building_blocks/builder_urlpicker.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-<t t-name="website.BuilderUrlPicker">
+<t t-name="html_builder.BuilderUrlPicker">
     <BuilderComponent>
         <BuilderTextInputBase
                 t-props="textInputBaseProps"

addons/html_builder/static/src/core/color_style_plugin.js

@@ -50,4 +50,4 @@ class ColorAction extends BuilderAction {
     }
 }
 
-registry.category("website-plugins").add(ColorStylePlugin.id, ColorStylePlugin);
+registry.category("builder-plugins").add(ColorStylePlugin.id, ColorStylePlugin);

addons/html_builder/static/src/core/customize_tab_plugin.js

@@ -39,4 +39,4 @@ export class CustomizeTabPlugin extends Plugin {
     }
 }
 
-registry.category("website-plugins").add(CustomizeTabPlugin.id, CustomizeTabPlugin);
+registry.category("builder-plugins").add(CustomizeTabPlugin.id, CustomizeTabPlugin);

addons/html_builder/static/src/core/disable_snippets_plugin.js

@@ -14,7 +14,7 @@ export class DisableSnippetsPlugin extends Plugin {
     };
 
     setup() {
-        this.snippetModel = this.services["html_builder.snippets"];
+        this.snippetModel = this.config.snippetModel;
         this._disableSnippets = this.disableUndroppableSnippets.bind(this);
 
         // TODO only for website ?
@@ -65,6 +65,9 @@ export class DisableSnippetsPlugin extends Plugin {
             }
         };
         const canDrop = (snippet) => {
+            if (!snippet) {
+                return false;
+            }
             const snippetEl = snippet.content;
             return !!dropAreasBySelector.find(
                 ({ selector, exclude, dropAreaEls }) =>

addons/html_builder/static/src/core/drop_zone_plugin.js

@@ -15,7 +15,7 @@ export class DropZonePlugin extends Plugin {
     ];
 
     setup() {
-        this.snippetModel = this.services["html_builder.snippets"];
+        this.snippetModel = this.config.snippetModel;
         this.dropzoneSelectors = this.getResource("dropzone_selector");
         this.iframe = this.document.defaultView.frameElement;
     }

addons/html_builder/static/src/core/save_snippet_plugin.js

@@ -38,7 +38,7 @@ export class SaveSnippetPlugin extends Plugin {
 
     async saveSnippet(el) {
         const cleanForSaveHandlers = this.getResource("clean_for_save_handlers");
-        const savedName = await this.config.saveSnippet(el, cleanForSaveHandlers);
+        const savedName = await this.config.snippetModel.saveSnippet(el, cleanForSaveHandlers);
         if (savedName) {
             const message = markup(
                 _t(

addons/website/static/src/builder/plugins/layout_option/select_number_column.js → addons/html_builder/static/src/core/select_number_column.js

@@ -3,7 +3,7 @@ import { areColsCustomized } from "@html_builder/utils/column_layout_utils";
 import { isMobileView } from "@html_builder/utils/utils";
 
 export class SelectNumberColumn extends BaseOptionComponent {
-    static template = "website.SelectNumberColumn";
+    static template = "html_builder.SelectNumberColumn";
     static props = {};
 
     setup() {

addons/website/static/src/builder/plugins/layout_option/select_number_column.xml → addons/html_builder/static/src/core/select_number_column.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-<t t-name="website.SelectNumberColumn">
+<t t-name="html_builder.SelectNumberColumn">
     <BuilderSelect action="'changeColumnCount'" >
         <BuilderSelectItem t-if="this.state.canHaveZeroColumns" actionValue="0">None</BuilderSelectItem>
         <t t-foreach="[1, 2, 3, 4, 5, 6]" t-as="column" t-key="column_index">
@@ -10,7 +10,4 @@
         <BuilderSelectItem t-if="this.state.isCustomColumn" actionValue="'custom'">Custom</BuilderSelectItem>
     </BuilderSelect>
 </t>
-
-
-
 </templates>

addons/html_builder/static/src/core/version_control_plugin.js

@@ -14,7 +14,7 @@ export class VersionControlPlugin extends Plugin {
             return this.accessPerOutdatedEl.get(el);
         }
         const snippetKey = el.dataset.snippet;
-        const snippet = this.services["html_builder.snippets"].getOriginalSnippet(snippetKey);
+        const snippet = this.config.snippetModel.getOriginalSnippet(snippetKey);
         let isUpToDate = true;
         if (snippet) {
             const {
@@ -34,7 +34,7 @@ export class VersionControlPlugin extends Plugin {
     }
     replaceWithNewVersion(el) {
         const snippetKey = el.dataset.snippet;
-        const snippet = this.services["html_builder.snippets"].getOriginalSnippet(snippetKey);
+        const snippet = this.config.snippetModel.getOriginalSnippet(snippetKey);
         const cloneEl = snippet.content.cloneNode(true);
         el.replaceWith(cloneEl);
         this.dependencies["builderOptions"].updateContainers(cloneEl);

addons/website/static/src/builder/plugins/alert_option.xml → addons/html_builder/static/src/plugins/alert_option.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-<t t-name="website.AlertOption">
+<t t-name="html_builder.AlertOption">
     <BuilderRow label.translate="Type">
         <BuilderSelect>
             <BuilderSelectItem classAction="'alert-primary'" action="'alertIcon'" actionParam="'fa-user-circle'">Primary</BuilderSelectItem>

addons/website/static/src/builder/plugins/alert_option_plugin.js → addons/html_builder/static/src/plugins/alert_option_plugin.js

@@ -1,5 +1,4 @@
-import { before } from "@html_builder/utils/option_sequence";
-import { WIDTH } from "@website/builder/option_sequence";
+import { before, WIDTH } from "@html_builder/utils/option_sequence";
 import { Plugin } from "@html_editor/plugin";
 import { fonts } from "@html_editor/utils/fonts";
 import { registry } from "@web/core/registry";
@@ -14,7 +13,7 @@ class AlertOptionPlugin extends Plugin {
         },
         builder_options: [
             withSequence(before(WIDTH), {
-                template: "website.AlertOption",
+                template: "html_builder.AlertOption",
                 selector: ".s_alert",
             }),
         ],
@@ -49,4 +48,4 @@ class AlertIconAction extends BuilderAction {
         return iconEl.classList.contains(className);
     }
 }
-registry.category("website-plugins").add(AlertOptionPlugin.id, AlertOptionPlugin);
+registry.category("builder-plugins").add(AlertOptionPlugin.id, AlertOptionPlugin);

addons/html_builder/static/src/plugins/background/background_color_option.xml

@@ -0,0 +1,6 @@
+<templates>
+<!-- TODO: handle bg_color_opt-->
+<t t-name="html_builder.BackgroundColorWidgetOption">
+    <BuilderColorPicker title.translate="Color" styleAction="'background-color'"/>
+</t>
+</templates>

addons/html_builder/static/src/plugins/border_configurator_option.js

@@ -1,4 +1,4 @@
-import { BaseOptionComponent, useDomState } from "@html_builder/core/utils";
+import { BaseOptionComponent, useDomState, useGetItemValue } from "@html_builder/core/utils";
 
 export class BorderConfigurator extends BaseOptionComponent {
     static template = "html_builder.BorderConfiguratorOption";
@@ -17,10 +17,16 @@ export class BorderConfigurator extends BaseOptionComponent {
 
     setup() {
         super.setup();
+        this.getItemValue = useGetItemValue();
         this.state = useDomState((editingElement) => ({
             hasBorder: this.hasBorder(editingElement),
         }));
     }
+
+    get showBorderRadiusOption() {
+        return this.props.withRoundCorner && parseInt(this.getItemValue("border_width_opt")) > 0;
+    }
+
     getStyleActionParam(param) {
         return `border-${this.props.direction ? this.props.direction + "-" : ""}${param}`;
     }

addons/html_builder/static/src/plugins/border_configurator_option.xml

@@ -3,7 +3,7 @@
 
 <t t-name="html_builder.BorderConfiguratorOption">
     <BuilderRow label="props.label">
-        <BuilderNumberInput action="props.action" actionParam="{ mainParam: getStyleActionParam('width'), extraClass: props.withBSClass and 'border' }" unit="'px'" min="0" default="0" composable="true"/>
+        <BuilderNumberInput id="'border_width_opt'" action="props.action" actionParam="{ mainParam: getStyleActionParam('width'), extraClass: props.withBSClass and 'border' }" unit="'px'" min="0" default="0" composable="true"/>
         <BuilderSelect action="props.action" actionParam="getStyleActionParam('style')" t-if="state.hasBorder">
             <BuilderSelectItem title.translate="Solid" actionValue="'solid'"><div class="o-hb-border-preview" style="border-style: solid;"/></BuilderSelectItem>
             <BuilderSelectItem title.translate="Dashed" actionValue="'dashed'"><div class="o-hb-border-preview" style="border-style: dashed;"/></BuilderSelectItem>
@@ -17,7 +17,7 @@
     </BuilderRow>
 
     <!-- TODO: handle the dependency with border_width_opt bg_color_opt-->
-    <BuilderRow t-if="props.withRoundCorner" label.translate="Round Corners">
+    <BuilderRow t-if="showBorderRadiusOption" label.translate="Round Corners">
         <BuilderNumberInput action="props.action" actionParam="{ mainParam: 'border-radius', extraClass: props.withBSClass and 'rounded' }" unit="'px'" default="0" min="0" composable="true"/>
     </BuilderRow>
 </t>