Use resources instead of registries

addons/html_builder/static/src/builder/builder_helpers.js

@@ -1,16 +1,15 @@
 import { isTextNode } from "@html_editor/utils/dom_info";
 import {
     Component,
+    onWillDestroy,
     useComponent,
     useEffect,
     useEnv,
     useRef,
     useState,
     useSubEnv,
     xml,
-    onWillDestroy,
 } from "@odoo/owl";
-import { registry } from "@web/core/registry";
 import { useBus } from "@web/core/utils/hooks";
 
 export function useDomState(getState) {
@@ -133,11 +132,10 @@ export function useDependencies(dependencies) {
     return isDependenciesVisible;
 }
 
-const actionsRegistry = registry.category("website-builder-actions");
-
 export function useClickableWeWidget() {
     useWeComponent();
     const comp = useComponent();
+    const getAction = comp.env.editor.shared.builderActions.getAction;
     const call = comp.env.editor.shared.history.makePreviewableOperation(callActions);
     if (
         comp.props.preview === false ||
@@ -154,7 +152,7 @@ export function useClickableWeWidget() {
         useBus(comp.env.actionBus, "BEFORE_CALL_ACTIONS", () => {
             for (const [actionId, actionParam, actionValue] of getActions()) {
                 for (const editingElement of comp.env.getEditingElements()) {
-                    actionsRegistry.get(actionId).clean?.({
+                    getAction(actionId).clean?.({
                         editingElement,
                         param: actionParam,
                         value: actionValue,
@@ -168,13 +166,10 @@ export function useClickableWeWidget() {
         comp.env.actionBus?.trigger("BEFORE_CALL_ACTIONS");
         for (const [actionId, actionParam, actionValue] of getActions()) {
             for (const editingElement of comp.env.getEditingElements()) {
-                actionsRegistry.get(actionId).apply({
+                getAction(actionId).apply({
                     editingElement,
                     param: actionParam,
                     value: actionValue,
-                    // todo: should not be necessary if the actions are registred
-                    // through a plugin resource
-                    editor: comp.env.editor,
                 });
             }
         }
@@ -210,7 +205,7 @@ export function useClickableWeWidget() {
         return getActions().every(([actionId, actionParam, actionValue]) => {
             // TODO isActive === first editing el or all ?
             const editingElement = editingElements[0];
-            return actionsRegistry.get(actionId).isActive?.({
+            return getAction(actionId).isActive?.({
                 editingElement,
                 param: actionParam,
                 value: actionValue,
@@ -226,17 +221,15 @@ export function useClickableWeWidget() {
 }
 export function useInputWeWidget() {
     const comp = useComponent();
+    const getAction = comp.env.editor.shared.builderActions.getAction;
     const state = useDomState(getState);
     const applyValue = comp.env.editor.shared.history.makePreviewableOperation((value) => {
         for (const [actionId, actionParam] of getActions()) {
             for (const editingElement of comp.env.getEditingElements()) {
-                actionsRegistry.get(actionId).apply({
+                getAction(actionId).apply({
                     editingElement,
                     param: actionParam,
                     value,
-                    // todo: should not be necessary if the actions are registred
-                    // through a plugin resource
-                    editor: comp.env.editor,
                 });
             }
         }
@@ -248,7 +241,7 @@ export function useInputWeWidget() {
         }
         const [actionId, actionParam] = getActions()[0];
         return {
-            value: actionsRegistry.get(actionId).getValue({
+            value: getAction(actionId).getValue({
                 editingElement,
                 param: actionParam,
             }),

addons/html_builder/static/src/builder/core_builder_action_plugin.js

@@ -0,0 +1,81 @@
+import { Plugin } from "@html_editor/plugin";
+import { registry } from "@web/core/registry";
+
+class CoreBuilderActionPlugin extends Plugin {
+    static id = "CoreBuilderAction";
+    resources = {
+        builder_actions: actions,
+    };
+}
+registry.category("website-plugins").add(CoreBuilderActionPlugin.id, CoreBuilderActionPlugin);
+
+const styleMap = {
+    borderWidth: {
+        getValue: (editingElement) => {
+            return parseInt(
+                getComputedStyle(editingElement).getPropertyValue("border-width")
+            ).toString();
+        },
+        apply: (editingElement, value) => {
+            const parsedValue = parseInt(value);
+            const hasBorderClass = editingElement.classList.contains("border");
+            if (!parsedValue || parsedValue < 0) {
+                if (hasBorderClass) {
+                    editingElement.classList.remove("border");
+                }
+            } else {
+                if (!hasBorderClass) {
+                    editingElement.classList.add("border");
+                }
+            }
+            editingElement.style.setProperty("border-width", `${parsedValue}px`, "important");
+        },
+    },
+};
+
+const actions = {
+    classAction: {
+        isActive: ({ editingElement, param: className }) => {
+            return editingElement.classList.contains(className);
+        },
+        apply: ({ editingElement, param: className, value }) => {
+            editingElement.classList.add(className);
+        },
+        clean: ({ editingElement, param: className, value }) => {
+            editingElement.classList.remove(className);
+        },
+    },
+    styleAction: {
+        getValue: ({ editingElement, param: styleName }) => {
+            return styleMap[styleName]?.getValue(editingElement);
+        },
+        apply: ({ editingElement, param: styleName, value }) => {
+            styleMap[styleName]?.apply(editingElement, value);
+        },
+    },
+    attributeAction: {
+        getValue: ({ editingElement, param: attributeName }) => {
+            return editingElement.getAttribute(attributeName);
+        },
+        isActive: ({ editingElement, param: attributeName, value }) => {
+            if (value) {
+                return (
+                    editingElement.hasAttribute(attributeName) &&
+                    editingElement.getAttribute(attributeName) === value
+                );
+            } else {
+                return !editingElement.hasAttribute(attributeName);
+            }
+        },
+        apply: ({ editingElement, param: attributeName, value }) => {
+            if (value) {
+                editingElement.setAttribute(attributeName, value);
+            } else {
+                editingElement.removeAttribute(attributeName);
+            }
+        },
+        clean: ({ editingElement, param: attributeName }) => {
+            editingElement.removeAttribute(attributeName);
+        },
+    },
+};

addons/html_builder/static/src/builder/options/alert_option.js

@@ -1,7 +1,16 @@
+import { Plugin } from "@html_editor/plugin";
 import { registry } from "@web/core/registry";
+import { withSequence } from "@html_editor/utils/resource";
 
-registry.category("sidebar-element-option").add("AlertOption", {
-    template: "html_builder.AlertOption",
-    selector: ".s_alert",
-    sequence: 5,
-});
+class AlertOptionPlugin extends Plugin {
+    static id = "AlertOption";
+    resources = {
+        builder_options: [
+            withSequence(5, {
+                template: "html_builder.AlertOption",
+                selector: ".s_alert",
+            }),
+        ],
+    };
+}
+registry.category("website-plugins").add(AlertOptionPlugin.id, AlertOptionPlugin);

addons/html_builder/static/src/builder/options/alignment_option.js

@@ -1,6 +1,15 @@
+import { Plugin } from "@html_editor/plugin";
 import { registry } from "@web/core/registry";
 
-registry.category("sidebar-element-option").add("AlignmentOption", {
-    template: "html_builder.AlignmentOption",
-    selector: ".s_share, .s_text_highlight, .s_social_media, section",
-});
+class AlignmentOptionPlugin extends Plugin {
+    static id = "AlignmentOption";
+    resources = {
+        builder_options: [
+            {
+                template: "html_builder.AlignmentOption",
+                selector: ".s_share, .s_text_highlight, .s_social_media",
+            },
+        ],
+    };
+}
+registry.category("website-plugins").add(AlignmentOptionPlugin.id, AlignmentOptionPlugin);

addons/html_builder/static/src/builder/options/block_alignment_option.js

@@ -1,7 +1,17 @@
+import { Plugin } from "@html_editor/plugin";
 import { registry } from "@web/core/registry";
+import { withSequence } from "@html_editor/utils/resource";
 
-registry.category("sidebar-element-option").add("BlockAlignmentOption", {
-    template: "html_builder.BlockAlignmentOption",
-    selector: ".s_alert, .s_blockquote, .s_text_highlight",
-    sequence: 30,
-});
+class BlockAlignmentOptionPlugin extends Plugin {
+    static id = "BlockAlignmentOption";
+    resources = {
+        builder_options: [
+            withSequence(30, {
+                template: "html_builder.BlockAlignmentOption",
+                selector: ".s_alert, .s_blockquote, .s_text_highlight",
+            }),
+        ],
+    };
+}
+
+registry.category("website-plugins").add(BlockAlignmentOptionPlugin.id, BlockAlignmentOptionPlugin);

addons/html_builder/static/src/builder/options/border_option.js

@@ -1,11 +1,20 @@
+import { Plugin } from "@html_editor/plugin";
 import { registry } from "@web/core/registry";
 
 export const card_parent_handlers =
     ".s_three_columns .row > div, .s_comparisons .row > div, .s_cards_grid .row > div, .s_cards_soft .row > div, .s_product_list .row > div";
 
-registry.category("sidebar-element-option").add("BorderOption", {
-    template: "html_builder.BorderOption",
-    selector: "section .row > div",
-    exclude: `.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div, .s_masonry_block .s_col_no_resize, .s_text_cover .row > .o_not_editable, ${card_parent_handlers}`,
-    // TODO add border shadow.
-});
+class BorderOptionPlugin extends Plugin {
+    static id = "BorderOption";
+    resources = {
+        builder_options: [
+            {
+                template: "html_builder.BorderOption",
+                selector: "section .row > div",
+                exclude: `.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div, .s_masonry_block .s_col_no_resize, .s_text_cover .row > .o_not_editable, ${card_parent_handlers}`,
+                // TODO add border shadow.
+            },
+        ],
+    };
+}
+registry.category("website-plugins").add(BorderOptionPlugin.id, BorderOptionPlugin);

addons/html_builder/static/src/builder/options/content_width_option.js

@@ -1,11 +1,18 @@
+import { Plugin } from "@html_editor/plugin";
 import { registry } from "@web/core/registry";
 
-// TODO to import in html_builder
-
-registry.category("sidebar-element-option").add("ContentWidthOption", {
-    template: "html_builder.ContentWidthOption",
-    selector: "section, .s_carousel .carousel-item, .s_carousel_intro_item",
-    exclude: "[data-snippet] :not(.oe_structure) > [data-snippet]",
-    // TODO  add target and remove applyTo in the template of ContentWidthOption ?
-    // target: "> .container, > .container-fluid, > .o_container_small",
-});
+class ContentWidthOptionPlugin extends Plugin {
+    static id = "ContentWidthOption";
+    resources = {
+        builder_options: [
+            {
+                template: "html_builder.ContentWidthOption",
+                selector: "section, .s_carousel .carousel-item, .s_carousel_intro_item",
+                exclude: "[data-snippet] :not(.oe_structure) > [data-snippet]",
+                // TODO  add target and remove applyTo in the template of ContentWidthOption ?
+                // target: "> .container, > .container-fluid, > .o_container_small",
+            },
+        ],
+    };
+}
+registry.category("website-plugins").add(ContentWidthOptionPlugin.id, ContentWidthOptionPlugin);