[MIG] web_editor_class_selector: Migration to 17.0

web_editor_class_selector/__manifest__.py

@@ -1,6 +1,6 @@
 {
     "name": "Web editor class selector",
-    "version": "16.0.1.0.1",
+    "version": "17.0.1.0.0",
     "summary": "",
     "author": "Tecnativa, Odoo Community Association (OCA)",
     "website": "https://github.com/OCA/web",
@@ -18,12 +18,12 @@
     "assets": {
         "web.assets_backend": [
             "web_editor_class_selector/static/src/js/backend/**/*",
-            "web_editor_class_selector/static/src/xml/**/",
         ],
-        "web_editor.assets_wysiwyg": [
+        "web_editor.backend_assets_wysiwyg": [
             "web_editor_class_selector/static/src/js/odoo-editor/**/*",
             "web_editor_class_selector/static/src/js/wysiwyg/**/*",
             "web_editor_class_selector/static/src/scss/demo_styles.scss",
+            "web_editor_class_selector/static/src/xml/**/",
         ],
     },
     "installable": True,

web_editor_class_selector/models/web_editor_class.py

@@ -8,7 +8,8 @@ class WebEditorClass(models.Model):
     name = fields.Char(required=True)
     class_name = fields.Char(
         required=True,
-        help="The class name to be added to the tag. It must be created in the CSS file.",
+        help="The class name to be added to the tag. "
+        "It must be created in the CSS file.",
     )
     active = fields.Boolean(default=True)
 

web_editor_class_selector/static/src/js/backend/html_field.esm.js

@@ -5,9 +5,9 @@ import {useService} from "@web/core/utils/hooks";
 
 const {onWillStart} = owl;
 
-patch(HtmlField.prototype, "web_editor_class_selector.HtmlField", {
+patch(HtmlField.prototype, {
     setup() {
-        this._super(...arguments);
+        super.setup(...arguments);
         this.orm = useService("orm");
         this.custom_class_css = [];
         onWillStart(async () => {
@@ -18,10 +18,14 @@ patch(HtmlField.prototype, "web_editor_class_selector.HtmlField", {
             );
         });
     },
-    async startWysiwyg(wysiwyg) {
-        // Provide the custom class css to the wysiwyg editor
-        // to render the custom class css in the toolbar
-        wysiwyg.options.custom_class_css = this.custom_class_css;
-        return this._super(wysiwyg);
+    get wysiwygOptions() {
+        // Provide the custom_class_css to the toolbar through the toolbarOptions.
+        return {
+            ...super.wysiwygOptions,
+            toolbarOptions: {
+                ...super.wysiwygOptions.toolbarOptions,
+                custom_class_css: this.custom_class_css,
+            },
+        };
     },
 });

web_editor_class_selector/static/src/js/odoo-editor/OdooEditor.esm.js

@@ -1,16 +1,16 @@
 /** @odoo-module **/
-import {_t} from "web.core";
-import {patch} from "web.utils";
 import {
     closestElement,
     getSelectedNodes,
     isVisibleTextNode,
 } from "@web_editor/js/editor/odoo-editor/src/utils/utils";
 import {OdooEditor} from "@web_editor/js/editor/odoo-editor/src/OdooEditor";
+import {_t} from "@web/core/l10n/translation";
+import {patch} from "@web/core/utils/patch";
 
-patch(OdooEditor.prototype, "web_editor_class_selector.OdooEditor", {
+patch(OdooEditor.prototype, {
     _updateToolbar(show) {
-        const res = this._super(show);
+        const res = super._updateToolbar(show);
         if (!this.toolbar || !this.custom_class_css) {
             return res;
         }

web_editor_class_selector/static/src/js/odoo-editor/toolbar.esm.js

@@ -0,0 +1,13 @@
+/** @odoo-module */
+
+import {Toolbar} from "@web_editor/js/editor/toolbar";
+import {patch} from "@web/core/utils/patch";
+
+patch(Toolbar.props, {
+    ...Toolbar.props,
+    custom_class_css: {type: Array, optional: true},
+});
+patch(Toolbar.defaultProps, {
+    ...Toolbar.defaultProps,
+    custom_class_css: [],
+});

web_editor_class_selector/static/src/js/wysiwyg/wysiwyg.esm.js

@@ -1,25 +1,17 @@
 /** @odoo-module **/
-import Wysiwyg from "web_editor.wysiwyg";
-import core from "web.core";
+import {Wysiwyg} from "@web_editor/js/wysiwyg/wysiwyg";
 import {createCustomCssFormats} from "../odoo-editor/utils.esm";
+import {patch} from "@web/core/utils/patch";
 
-const Qweb = core.qweb;
-
-Wysiwyg.include({
-    _configureToolbar: function (options) {
-        this._super(options);
-        if (options.custom_class_css && options.custom_class_css.length > 0) {
-            const $dialogContent = $(
-                Qweb.render("web_editor_class_selector.custom_class_css", {
-                    custom_class_css: options.custom_class_css,
-                })
-            );
-            $dialogContent.appendTo(this.toolbar.$el);
-            // Binding the new commands to the editor
-            // to react to the click on the new options
-            this.odooEditor.bindExecCommand($dialogContent[0]);
-            this.odooEditor.custom_class_css = options.custom_class_css;
-            createCustomCssFormats(options.custom_class_css);
+patch(Wysiwyg.prototype, {
+    _configureToolbar(options) {
+        super._configureToolbar(options);
+        if (
+            options.toolbarOptions.custom_class_css &&
+            options.toolbarOptions.custom_class_css.length > 0
+        ) {
+            this.odooEditor.custom_class_css = options.toolbarOptions.custom_class_css;
+            createCustomCssFormats(options.toolbarOptions.custom_class_css);
         }
     },
 });

web_editor_class_selector/static/src/xml/web_editor.xml

@@ -1,9 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates id="template" xml:space="preserve">
-    <t t-name="web_editor_class_selector.custom_class_css">
-        <t t-jquery="#decoration" t-operation="before">
-
-            <div id="custom_class" class="btn-group dropdown">
+    <t t-inherit="web_editor.toolbar" t-inherit-mode="extension">
+        <xpath expr="//div[@id='chatgpt']" position="after">
+            <div
+                id="custom_class"
+                class="btn-group dropdown"
+                t-if="props.custom_class_css and props.custom_class_css.length"
+            >
                 <button
                     type="button"
                     class="btn dropdown-toggle"
@@ -16,7 +19,7 @@
                     <span>Custom CSS</span>
                 </button>
                 <ul class="dropdown-menu">
-                    <li t-foreach="custom_class_css" t-as="line">
+                    <li t-foreach="props.custom_class_css" t-as="line" t-key="line.id">
                         <a
                             class="dropdown-item css_selector"
                             t-att-id="line.class_name"
@@ -27,7 +30,6 @@
                     </li>
                 </ul>
             </div>
-        </t>
-
+        </xpath>
     </t>
 </templates>