[MIG] web_editor_class_selector: Migration to 17.0

web_editor_class_selector/README.rst

@@ -7,7 +7,7 @@ Web editor class selector
    !! This file is generated by oca-gen-addon-readme !!
    !! changes will be overwritten.                   !!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-   !! source digest: sha256:87a4e58b89ecc7f911d8e9fad84c60f0b1a024d6564c5040550651ed2be7ff83
+   !! source digest: sha256:1001db1827a41a874f6505371f07ecc14ff40c6e3f1a6b7d7ec8e5805c8e4c03
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
 .. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png

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/i18n/web_editor_class_selector.pot

@@ -4,7 +4,7 @@
 #
 msgid ""
 msgstr ""
-"Project-Id-Version: Odoo Server 16.0\n"
+"Project-Id-Version: Odoo Server 17.0\n"
 "Report-Msgid-Bugs-To: \n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -62,11 +62,6 @@ msgstr ""
 msgid "ID"
 msgstr ""
 
-#. module: web_editor_class_selector
-#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class____last_update
-msgid "Last Modified on"
-msgstr ""
-
 #. module: web_editor_class_selector
 #: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__write_uid
 msgid "Last Updated by"

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/description/index.html

@@ -367,7 +367,7 @@ ul.auto-toc {
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-!! source digest: sha256:87a4e58b89ecc7f911d8e9fad84c60f0b1a024d6564c5040550651ed2be7ff83
+!! source digest: sha256:1001db1827a41a874f6505371f07ecc14ff40c6e3f1a6b7d7ec8e5805c8e4c03
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
 <p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/web/tree/17.0/web_editor_class_selector"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-17-0/web-17-0-web_editor_class_selector"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&amp;target_branch=17.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
 <p>This module allows users to create custom CSS class records, which can

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) {
+    get wysiwygOptions() {
-        // Provide the custom class css to the wysiwyg editor
+        // Provide the custom_class_css to the toolbar through the toolbarOptions.
-        // to render the custom class css in the toolbar
+        return {
-        wysiwyg.options.custom_class_css = this.custom_class_css;
+            ...super.wysiwygOptions,
-        return this._super(wysiwyg);
+            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 {Wysiwyg} from "@web_editor/js/wysiwyg/wysiwyg";
-import core from "web.core";
 import {createCustomCssFormats} from "../odoo-editor/utils.esm";
+import {patch} from "@web/core/utils/patch";
 
-const Qweb = core.qweb;
+patch(Wysiwyg.prototype, {
-
+    _configureToolbar(options) {
-Wysiwyg.include({
+        super._configureToolbar(options);
-    _configureToolbar: function (options) {
+        if (
-        this._super(options);
+            options.toolbarOptions.custom_class_css &&
-        if (options.custom_class_css && options.custom_class_css.length > 0) {
+            options.toolbarOptions.custom_class_css.length > 0
-            const $dialogContent = $(
+        ) {
-                Qweb.render("web_editor_class_selector.custom_class_css", {
+            this.odooEditor.custom_class_css = options.toolbarOptions.custom_class_css;
-                    custom_class_css: options.custom_class_css,
+            createCustomCssFormats(options.toolbarOptions.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);
         }
     },
 });

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-inherit="web_editor.toolbar" t-inherit-mode="extension">
-        <t t-jquery="#decoration" t-operation="before">
+        <xpath expr="//div[@id='chatgpt']" position="after">
-
+            <div
-            <div id="custom_class" class="btn-group dropdown">
+                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>