[IMP] Reorganize snippets in categories

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

@@ -6,6 +6,7 @@ import {
     onWillDestroy,
     onWillStart,
     onWillUpdateProps,
+    status,
     useRef,
     useState,
     useSubEnv,
@@ -30,18 +31,22 @@ 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 },
         onEditorLoad: { type: Function, optional: true },
         installSnippetModule: { type: Function, optional: true },
-        snippetsName: { type: String },
+        snippetModel: { type: Object },
         toggleMobile: { type: Function },
         overlayRef: { type: Function },
         iframeLoaded: { type: Object },
         isMobile: { type: Boolean },
         Plugins: { type: Array, optional: true },
         config: { type: Object, optional: true },
         getThemeTab: { type: Function, optional: true },
+        editableSelector: { type: String },
+        toggleFullscreen: { type: Function, optional: true },
+        toggleCodeView: { type: Function, optional: true },
+        getExternalScrollableAncestor: { type: Function, optional: true },
     };
     static defaultProps = {
         onEditorLoad: () => {},
@@ -66,6 +71,7 @@ export class Builder extends Component {
         this.dialog = useService("dialog");
         this.ui = useService("ui");
         this.notification = useService("notification");
+        this.snippetModel = useState(this.props.snippetModel);
 
         const editorBus = new EventBus();
 
@@ -79,6 +85,9 @@ export class Builder extends Component {
                     if (!isPreviewing) {
                         this.state.canUndo = this.editor.shared.history.canUndo();
                         this.state.canRedo = this.editor.shared.history.canRedo();
+                        if (this.props.config.onChange) {
+                            this.props.config.onChange();
+                        }
                         this.updateInvisibleEls();
                         editorBus.trigger("UPDATE_EDITING_ELEMENT");
                         editorBus.trigger("DOM_UPDATED");
@@ -91,10 +100,10 @@ export class Builder extends Component {
                     });
                 },
                 closeEditor: async () => {
-                    await this.props.closeEditor();
+                    await this.props.closeEditor?.();
                 },
                 installSnippetModule: async (snippet) =>
-                    this.props.installSnippetModule(snippet, this.save.bind(this)),
+                    this.props.installSnippetModule?.(snippet, this.save.bind(this)),
                 resources: {
                     trigger_dom_updated: () => {
                         editorBus.trigger("DOM_UPDATED");
@@ -128,6 +137,7 @@ export class Builder extends Component {
                         cleanForSaveHandlers,
                         wrapWithSaveSnippetHandlers
                     ),
+                snippetModel: this.snippetModel,
                 getShared: () => this.editor.shared,
                 updateInvisibleElementsPanel: () => this.updateInvisibleEls(),
                 allowCustomStyle: true,
@@ -138,15 +148,18 @@ export class Builder extends Component {
         );
         this.props.onEditorLoad(this.editor);
 
-        this.snippetModel = useState(useService("html_builder.snippets"));
-
         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");
+            if (status(this) === "destroyed") {
+                return;
+            }
+            this.editableEl = iframeEl.contentDocument.body.querySelector(
+                this.props.editableSelector
+            );
             setEditableWindow(iframeEl.contentWindow);
             setEditableDocument(iframeEl.contentDocument);
 
@@ -172,7 +185,7 @@ export class Builder extends Component {
         // });
         onWillDestroy(() => {
             this.editor.destroy();
-            this.editableEl.removeEventListener("dragstart", this.onDragStart);
+            this.editableEl?.removeEventListener("dragstart", this.onDragStart);
             // actionService.setActionMode("current");
         });
 
@@ -221,6 +234,9 @@ export class Builder extends Component {
     }
 
     async save() {
+        if (!this.props.closeEditor) {
+            return;
+        }
         this.editor.shared.operation.next(this._save.bind(this), { withLoadingEffect: false });
     }
 
@@ -266,13 +282,19 @@ export class Builder extends Component {
     }
 
     onBeforeUnload(event) {
+        if (!this.props.closeEditor) {
+            return;
+        }
         if (!this.isSaving && this.state.canUndo) {
             event.preventDefault();
             event.returnValue = "Unsaved changes";
         }
     }
 
     async onBeforeLeave() {
+        if (!this.props.closeEditor) {
+            return true;
+        }
         if (this.state.canUndo && !this.editor.shared.savePlugin.isAlreadySaved()) {
             let continueProcess = true;
             await new Promise((resolve) => {

addons/html_builder/static/src/builder.xml

@@ -9,9 +9,13 @@
                 <button type="button"  t-on-click="() => this.redo()" class="o-hb-btn btn fa fa-repeat" t-att-disabled="!state.canRedo"/>
             </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-on-click="onMobilePreviewClick" type="button" class="o-hb-btn btn d-flex align-items-center" t-att-class="{active: props.isMobile, disabled: props.isMobile}" data-action="mobile" title="Mobile Preview" accesskey="v" style="--btn-font-size: 20px"><span class="fa fa-mobile" role="img"/></button>
+                <button t-if="props.toggleCodeView" t-on-click="props.toggleCodeView"
+                    class="o-hb-btn btn d-flex align-items-center" title="Code View" accesskey="c"><i class="fa fa-code"/></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">
@@ -29,12 +33,12 @@
                 <i class="oi oi-settings-adjust me-1" role="img"/>Edit
             </button>
             <button data-name="theme" data-hotkey="2" t-if="ThemeTab" class="o-hb-btn position-relative btn" t-att-class="{'active cursor-default': state.activeTab === 'theme'}" t-on-click="() => this.onTabClick('theme')" t-att-disabled="displayOnlyCustomizeTab">
-                <i class="fa fa-cog me-1" role="img"/>Theme
+                <i class="fa fa-cog me-1" role="img"/><t t-out="ThemeTab.displayName"/>
             </button>
         </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" getExternalScollableAncestor="props.getExternalScollableAncestor"/>
             </t>
             <t t-if="state.activeTab === 'customize'">
                 <t t-if="!!props.config.customizeTab" t-call="{{props.config.customizeTab}}"/>

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_options_plugin.js

@@ -352,7 +352,7 @@ export class BuilderOptionsPlugin extends Plugin {
     }
 
     patchBuilderOptions({ target_name, target_element, method, value }) {
-        if (!target_name || !target_element || !method || !value) {
+        if (!target_name || !target_element || !method || (!value && method !== "remove")) {
             throw new Error(
                 `Missing patch_builder_options required parameters: target_name, target_element, method, value`
             );
@@ -367,6 +367,9 @@ export class BuilderOptionsPlugin extends Plugin {
             case "replace":
                 builderOption[target_element] = value;
                 break;
+            case "remove":
+                delete builderOption[target_element];
+                break;
             case "add":
                 if (!builderOption[target_element]) {
                     throw new Error(

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

@@ -108,6 +108,7 @@ export class BuilderColorPicker extends Component {
         getUsedCustomColors: { type: Function, optional: true },
         selectedTab: { type: String, optional: true },
         defaultColor: { type: String, optional: true },
+        colorPrefix: { type: String, optional: true },
     };
     static defaultProps = {
         getUsedCustomColors: () => [],
@@ -133,7 +134,7 @@ export class BuilderColorPicker extends Component {
                 applyColorPreview: onPreview,
                 applyColorResetPreview: onPreviewRevert,
                 getUsedCustomColors: this.props.getUsedCustomColors,
-                colorPrefix: "color-prefix-",
+                colorPrefix: this.props.colorPrefix || "color-prefix-",
                 showRgbaField: true,
                 noTransparency: this.props.noTransparency,
                 enabledTabs: this.props.enabledTabs,

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

@@ -33,4 +33,4 @@ class ColorStylePlugin extends Plugin {
     }
 }
 
-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/drag_and_drop_plugin.js

@@ -107,7 +107,9 @@ export class DragAndDropPlugin extends Plugin {
             this.document.defaultView !== window ? this.document.defaultView : false;
 
         const scrollingElement = () =>
-            this.dependencies.dropzone.getDropRootElement() || getScrollingElement(this.document);
+            this.dependencies.dropzone.getDropRootElement() ||
+            this.config.getExternalScrollableAncestor?.() ||
+            getScrollingElement(this.document);
 
         const dragAndDropOptions = {
             ref: { el: element },

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/setup_editor_plugin.js

@@ -8,6 +8,7 @@ export class SetupEditorPlugin extends Plugin {
     resources = {
         clean_for_save_handlers: this.cleanForSave.bind(this),
         normalize_handlers: withSequence(0, this.setContenteditable.bind(this)),
+        o_editable_selectors: "[data-oe-model]",
     };
 
     setup() {
@@ -20,7 +21,9 @@ export class SetupEditorPlugin extends Plugin {
             return;
         }
         // Add the `o_editable` class on the editable elements
-        let editableEls = this.getEditableElements("[data-oe-model]")
+        let editableEls = this.getEditableElements(
+            this.getResource("o_editable_selectors").join(", ")
+        )
             .filter((el) => !el.matches("link, script"))
             .filter((el) => !el.hasAttribute("data-oe-readonly"))
             .filter(

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/html_builder/static/src/plugins/alert_option_plugin.js

@@ -15,6 +15,7 @@ class AlertOptionPlugin extends Plugin {
             withSequence(before(WIDTH), {
                 template: "html_builder.AlertOption",
                 selector: ".s_alert",
+                name: "alertTypeOption",
             }),
         ],
         so_content_addition_selector: [".s_alert"],
@@ -48,4 +49,4 @@ export 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/website/static/src/builder/plugins/background_option/background_image_option_plugin.js → addons/html_builder/static/src/plugins/background_option/background_image_option_plugin.js

@@ -220,5 +220,5 @@ export class DynamicColorAction extends BuilderAction {
 }
 
 registry
-    .category("website-plugins")
+    .category("builder-plugins")
     .add(BackgroundImageOptionPlugin.id, BackgroundImageOptionPlugin);

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

@@ -7,7 +7,7 @@ import { ImageFilterOption } from "@html_builder/plugins/image/image_filter_opti
 import { ImageFormatOption } from "@html_builder/plugins/image/image_format_option";
 
 export class BackgroundOption extends BaseOptionComponent {
-    static template = "website.BackgroundOption";
+    static template = "html_builder.BackgroundOption";
     static components = {
         BackgroundImageOption,
         BackgroundPositionOption,

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

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-<t t-name="website.BackgroundOption">
+<t t-name="html_builder.BackgroundOption">
     <!-- BackgroundToggler -->
     <BuilderRow label.translate="Background" t-if="props.withColors or props.withImages">
     <!-- todo adapt when colorpicker is implemented: snippet_options_background_color_widget-->

addons/website/static/src/builder/plugins/background_option/background_option_plugin.js → addons/html_builder/static/src/plugins/background_option/background_option_plugin.js

@@ -1,4 +1,4 @@
-import { applyFunDependOnSelectorAndExclude } from "@website/builder/plugins/utils";
+import { applyFunDependOnSelectorAndExclude } from "@html_builder/plugins/utils";
 import { Plugin } from "@html_editor/plugin";
 import { registry } from "@web/core/registry";
 
@@ -22,4 +22,4 @@ class BackgroundOptionPlugin extends Plugin {
         editingEl.classList.add("o_colored_level");
     }
 }
-registry.category("website-plugins").add(BackgroundOptionPlugin.id, BackgroundOptionPlugin);
+registry.category("builder-plugins").add(BackgroundOptionPlugin.id, BackgroundOptionPlugin);

addons/website/static/src/builder/plugins/background_option/background_position_option_plugin.js → addons/html_builder/static/src/plugins/background_option/background_position_option_plugin.js

@@ -121,5 +121,5 @@ export class BackgroundPositionOverlayAction extends BuilderAction {
 }
 
 registry
-    .category("website-plugins")
+    .category("builder-plugins")
     .add(BackgroundPositionOptionPlugin.id, BackgroundPositionOptionPlugin);

addons/website/static/src/builder/plugins/background_option/background_shape_option_plugin.js → addons/html_builder/static/src/plugins/background_option/background_shape_option_plugin.js

@@ -458,5 +458,5 @@ class BackgroundShapeColorAction extends BaseAnimationAction {
 }
 
 registry
-    .category("website-plugins")
+    .category("builder-plugins")
     .add(BackgroundShapeOptionPlugin.id, BackgroundShapeOptionPlugin);

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

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

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 && this.state.hasBorder;
+    }
+
     getStyleActionParam(param) {
         return `border-${this.props.direction ? this.props.direction + "-" : ""}${param}`;
     }