From 20bcbc1c11546c365278af9e53638689da1687ad Mon Sep 17 00:00:00 2001 From: Carlos Lopez Date: Tue, 24 Sep 2024 10:27:55 -0500 Subject: [PATCH] [ADD] web_editor_class_selector: new module to add custom CSS in HTML editor. This module allows users to create custom CSS classes, which can then be selected and applied directly in the HTML editor. --- .../odoo/addons/web_editor_class_selector | 1 + setup/web_editor_class_selector/setup.py | 6 + web_editor_class_selector/README.rst | 86 ++++ web_editor_class_selector/__init__.py | 1 + web_editor_class_selector/__manifest__.py | 32 ++ .../demo/web_editor_class_demo.xml | 17 + web_editor_class_selector/models/__init__.py | 1 + .../models/web_editor_class.py | 17 + .../readme/DESCRIPTION.rst | 2 + web_editor_class_selector/readme/ROADMAP.rst | 1 + web_editor_class_selector/readme/USAGE.rst | 5 + .../security/ir.model.access.csv | 3 + .../static/description/index.html | 433 ++++++++++++++++++ .../static/src/js/backend/html_field.esm.js | 27 ++ .../src/js/odoo-editor/OdooEditor.esm.js | 68 +++ .../static/src/js/odoo-editor/commands.esm.js | 12 + .../static/src/js/odoo-editor/utils.esm.js | 37 ++ .../static/src/js/wysiwyg/wysiwyg.esm.js | 25 + .../static/src/scss/demo_styles.scss | 21 + .../static/src/xml/web_editor.xml | 33 ++ web_editor_class_selector/views/menus.xml | 11 + .../views/web_editor_class_views.xml | 60 +++ 22 files changed, 899 insertions(+) create mode 120000 setup/web_editor_class_selector/odoo/addons/web_editor_class_selector create mode 100644 setup/web_editor_class_selector/setup.py create mode 100644 web_editor_class_selector/README.rst create mode 100644 web_editor_class_selector/__init__.py create mode 100644 web_editor_class_selector/__manifest__.py create mode 100644 web_editor_class_selector/demo/web_editor_class_demo.xml create mode 100644 web_editor_class_selector/models/__init__.py create mode 100644 web_editor_class_selector/models/web_editor_class.py create mode 100644 web_editor_class_selector/readme/DESCRIPTION.rst create mode 100644 web_editor_class_selector/readme/ROADMAP.rst create mode 100644 web_editor_class_selector/readme/USAGE.rst create mode 100644 web_editor_class_selector/security/ir.model.access.csv create mode 100644 web_editor_class_selector/static/description/index.html create mode 100644 web_editor_class_selector/static/src/js/backend/html_field.esm.js create mode 100644 web_editor_class_selector/static/src/js/odoo-editor/OdooEditor.esm.js create mode 100644 web_editor_class_selector/static/src/js/odoo-editor/commands.esm.js create mode 100644 web_editor_class_selector/static/src/js/odoo-editor/utils.esm.js create mode 100644 web_editor_class_selector/static/src/js/wysiwyg/wysiwyg.esm.js create mode 100644 web_editor_class_selector/static/src/scss/demo_styles.scss create mode 100644 web_editor_class_selector/static/src/xml/web_editor.xml create mode 100644 web_editor_class_selector/views/menus.xml create mode 100644 web_editor_class_selector/views/web_editor_class_views.xml diff --git a/setup/web_editor_class_selector/odoo/addons/web_editor_class_selector b/setup/web_editor_class_selector/odoo/addons/web_editor_class_selector new file mode 120000 index 000000000..0f0c3eb61 --- /dev/null +++ b/setup/web_editor_class_selector/odoo/addons/web_editor_class_selector @@ -0,0 +1 @@ +../../../../web_editor_class_selector \ No newline at end of file diff --git a/setup/web_editor_class_selector/setup.py b/setup/web_editor_class_selector/setup.py new file mode 100644 index 000000000..28c57bb64 --- /dev/null +++ b/setup/web_editor_class_selector/setup.py @@ -0,0 +1,6 @@ +import setuptools + +setuptools.setup( + setup_requires=['setuptools-odoo'], + odoo_addon=True, +) diff --git a/web_editor_class_selector/README.rst b/web_editor_class_selector/README.rst new file mode 100644 index 000000000..557772afe --- /dev/null +++ b/web_editor_class_selector/README.rst @@ -0,0 +1,86 @@ +========================= +Web editor class selector +========================= + +.. + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! source digest: sha256:519b892f6dfb515ada002bc115cddb3c321b017022ab87e2a93a4be36865bb84 + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png + :target: https://odoo-community.org/page/development-status + :alt: Beta +.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png + :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html + :alt: License: AGPL-3 +.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github + :target: https://github.com/OCA/web/tree/16.0/web_editor_class_selector + :alt: OCA/web +.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png + :target: https://translation.odoo-community.org/projects/web-16-0/web-16-0-web_editor_class_selector + :alt: Translate me on Weblate +.. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png + :target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=16.0 + :alt: Try me on Runboat + +|badge1| |badge2| |badge3| |badge4| |badge5| + +This module allows users to create custom CSS class records, which can then be selected and applied directly in the HTML editor. +Note: The actual CSS file containing the class definitions is not provided by this module and must be loaded in a custom module. + +**Table of contents** + +.. contents:: + :local: + +Usage +===== + +* Go to `Settings` > `Technical` > `User Interface` > `Web editor Class`. +* Create and name your custom CSS classes. +* Go to any model with an HTML field (e.g., `Settings` > `Users` > `Preferences` > `Signature`). +* In the HTML editor, select any content block. +* Choose from the available CSS classes to apply the desired styling. + +Known issues / Roadmap +====================== + +Add support to apply class to any element (currently, only `span` is supported) + +Bug Tracker +=========== + +Bugs are tracked on `GitHub Issues `_. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us to smash it by providing a detailed and welcomed +`feedback `_. + +Do not contact contributors directly about support or help with technical issues. + +Credits +======= + +Authors +~~~~~~~ + +* Tecnativa + +Maintainers +~~~~~~~~~~~ + +This module is maintained by the OCA. + +.. image:: https://odoo-community.org/logo.png + :alt: Odoo Community Association + :target: https://odoo-community.org + +OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use. + +This module is part of the `OCA/web `_ project on GitHub. + +You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute. diff --git a/web_editor_class_selector/__init__.py b/web_editor_class_selector/__init__.py new file mode 100644 index 000000000..0650744f6 --- /dev/null +++ b/web_editor_class_selector/__init__.py @@ -0,0 +1 @@ +from . import models diff --git a/web_editor_class_selector/__manifest__.py b/web_editor_class_selector/__manifest__.py new file mode 100644 index 000000000..b9162a733 --- /dev/null +++ b/web_editor_class_selector/__manifest__.py @@ -0,0 +1,32 @@ +{ + "name": "Web editor class selector", + "version": "16.0.1.0.0", + "summary": "", + "author": "Tecnativa, Odoo Community Association (OCA)", + "website": "https://github.com/OCA/web", + "depends": [ + "web_editor", + ], + "data": [ + "security/ir.model.access.csv", + "views/web_editor_class_views.xml", + "views/menus.xml", + ], + "demo": [ + "demo/web_editor_class_demo.xml", + ], + "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_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", + ], + }, + "installable": True, + "auto_install": False, + "license": "AGPL-3", +} diff --git a/web_editor_class_selector/demo/web_editor_class_demo.xml b/web_editor_class_selector/demo/web_editor_class_demo.xml new file mode 100644 index 000000000..a210e9306 --- /dev/null +++ b/web_editor_class_selector/demo/web_editor_class_demo.xml @@ -0,0 +1,17 @@ + + + + + Button + demo_button + + + Menu + demo_menu + + + Field + demo_field + + + diff --git a/web_editor_class_selector/models/__init__.py b/web_editor_class_selector/models/__init__.py new file mode 100644 index 000000000..5b8909384 --- /dev/null +++ b/web_editor_class_selector/models/__init__.py @@ -0,0 +1 @@ +from . import web_editor_class diff --git a/web_editor_class_selector/models/web_editor_class.py b/web_editor_class_selector/models/web_editor_class.py new file mode 100644 index 000000000..eb5bdf93f --- /dev/null +++ b/web_editor_class_selector/models/web_editor_class.py @@ -0,0 +1,17 @@ +from odoo import fields, models + + +class WebEditorClass(models.Model): + _name = "web.editor.class" + _description = "Web editor class selector" + + 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.", + ) + active = fields.Boolean(default=True) + + _sql_constraints = [ + ("class_name_uniq", "unique(class_name)", "Class name must be unique") + ] diff --git a/web_editor_class_selector/readme/DESCRIPTION.rst b/web_editor_class_selector/readme/DESCRIPTION.rst new file mode 100644 index 000000000..72f02eca5 --- /dev/null +++ b/web_editor_class_selector/readme/DESCRIPTION.rst @@ -0,0 +1,2 @@ +This module allows users to create custom CSS class records, which can then be selected and applied directly in the HTML editor. +Note: The actual CSS file containing the class definitions is not provided by this module and must be loaded in a custom module. \ No newline at end of file diff --git a/web_editor_class_selector/readme/ROADMAP.rst b/web_editor_class_selector/readme/ROADMAP.rst new file mode 100644 index 000000000..ef40b9ac0 --- /dev/null +++ b/web_editor_class_selector/readme/ROADMAP.rst @@ -0,0 +1 @@ +Add support to apply class to any element (currently, only `span` is supported) \ No newline at end of file diff --git a/web_editor_class_selector/readme/USAGE.rst b/web_editor_class_selector/readme/USAGE.rst new file mode 100644 index 000000000..d9242875d --- /dev/null +++ b/web_editor_class_selector/readme/USAGE.rst @@ -0,0 +1,5 @@ +* Go to `Settings` > `Technical` > `User Interface` > `Web editor Class`. +* Create and name your custom CSS classes. +* Go to any model with an HTML field (e.g., `Settings` > `Users` > `Preferences` > `Signature`). +* In the HTML editor, select any content block. +* Choose from the available CSS classes to apply the desired styling. diff --git a/web_editor_class_selector/security/ir.model.access.csv b/web_editor_class_selector/security/ir.model.access.csv new file mode 100644 index 000000000..373bd0465 --- /dev/null +++ b/web_editor_class_selector/security/ir.model.access.csv @@ -0,0 +1,3 @@ +id,name,model_id/id,group_id/id,perm_read,perm_write,perm_create,perm_unlink +access_web_editor_class_group_user,access_web_editor_class_group_user,model_web_editor_class,base.group_user,1,0,0,0 +access_web_editor_class_group_no_one,access_web_editor_class_group_no_one,model_web_editor_class,base.group_no_one,1,1,1,1 diff --git a/web_editor_class_selector/static/description/index.html b/web_editor_class_selector/static/description/index.html new file mode 100644 index 000000000..f2f96bca7 --- /dev/null +++ b/web_editor_class_selector/static/description/index.html @@ -0,0 +1,433 @@ + + + + + +Web editor class selector + + + +
+

Web editor class selector

+ + +

Beta License: AGPL-3 OCA/web Translate me on Weblate Try me on Runboat

+

This module allows users to create custom CSS class records, which can then be selected and applied directly in the HTML editor. +Note: The actual CSS file containing the class definitions is not provided by this module and must be loaded in a custom module.

+

Table of contents

+ +
+

Usage

+
    +
  • Go to Settings > Technical > User Interface > Web editor Class.
    • +
  • Create and name your custom CSS classes.
    • +
  • Go to any model with an HTML field (e.g., Settings > Users > Preferences > Signature).
    • +
  • In the HTML editor, select any content block.
    • +
  • Choose from the available CSS classes to apply the desired styling.
    • +
+
+
+

Known issues / Roadmap

+

Add support to apply class to any element (currently, only span is supported)

+
+
+

Bug Tracker

+

Bugs are tracked on GitHub Issues. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us to smash it by providing a detailed and welcomed +feedback.

+

Do not contact contributors directly about support or help with technical issues.

+
+
+

Credits

+
+

Authors

+
    +
  • Tecnativa
    • +
+
+
+

Maintainers

+

This module is maintained by the OCA.

+ +Odoo Community Association + +

OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use.

+

This module is part of the OCA/web project on GitHub.

+

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

+
+
+
+ + diff --git a/web_editor_class_selector/static/src/js/backend/html_field.esm.js b/web_editor_class_selector/static/src/js/backend/html_field.esm.js new file mode 100644 index 000000000..7bbbb3dbf --- /dev/null +++ b/web_editor_class_selector/static/src/js/backend/html_field.esm.js @@ -0,0 +1,27 @@ +/** @odoo-module **/ +import {HtmlField} from "@web_editor/js/backend/html_field"; +import {patch} from "@web/core/utils/patch"; +import {useService} from "@web/core/utils/hooks"; + +const {onWillStart} = owl; + +patch(HtmlField.prototype, "web_editor_class_selector.HtmlField", { + setup() { + this._super(...arguments); + this.orm = useService("orm"); + this.custom_class_css = []; + onWillStart(async () => { + this.custom_class_css = await this.orm.searchRead( + "web.editor.class", + [], + ["name", "class_name"] + ); + }); + }, + 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); + }, +}); diff --git a/web_editor_class_selector/static/src/js/odoo-editor/OdooEditor.esm.js b/web_editor_class_selector/static/src/js/odoo-editor/OdooEditor.esm.js new file mode 100644 index 000000000..2895276ba --- /dev/null +++ b/web_editor_class_selector/static/src/js/odoo-editor/OdooEditor.esm.js @@ -0,0 +1,68 @@ +/** @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"; + +patch(OdooEditor.prototype, "web_editor_class_selector.OdooEditor", { + _updateToolbar(show) { + const res = this._super(show); + if (!this.toolbar) { + return res; + } + const sel = this.document.getSelection(); + if (!this.isSelectionInEditable(sel)) { + return res; + } + // Get selected nodes within td to handle non-p elements like h1, h2... + // Targeting
to ensure span stays inside its corresponding block node. + const selectedNodesInTds = [ + ...this.editable.querySelectorAll(".o_selected_td"), + ].map((node) => closestElement(node).querySelector("br")); + const selectedNodes = getSelectedNodes(this.editable).filter( + (n) => + n.nodeType === Node.TEXT_NODE && + closestElement(n).isContentEditable && + isVisibleTextNode(n) + ); + const selectedTextNodes = selectedNodes.length + ? selectedNodes + : selectedNodesInTds; + let activeLabel = ""; + for (const selectedTextNode of selectedTextNodes) { + const parentNode = selectedTextNode.parentElement; + for (const customCss of this.custom_class_css) { + const button = this.toolbar.querySelector("#" + customCss.class_name); + if (button) { + const isActive = parentNode.classList.contains( + customCss.class_name + ); + button.classList.toggle("active", isActive); + + if (isActive) { + activeLabel = button.textContent; + } + } + } + } + // Show current class active in the toolbar + // or remove active class if nothing is selected + const styleSection = this.toolbar.querySelector("#custom_class"); + if (styleSection) { + if (!activeLabel) { + const css_selectors = this.toolbar.querySelectorAll(".css_selector"); + for (const node of css_selectors) { + node.classList.toggle("active", false); + } + } + styleSection.querySelector("button span").textContent = activeLabel + ? activeLabel + : _t("Custom CSS"); + } + return res; + }, +}); diff --git a/web_editor_class_selector/static/src/js/odoo-editor/commands.esm.js b/web_editor_class_selector/static/src/js/odoo-editor/commands.esm.js new file mode 100644 index 000000000..e04641be3 --- /dev/null +++ b/web_editor_class_selector/static/src/js/odoo-editor/commands.esm.js @@ -0,0 +1,12 @@ +/** @odoo-module **/ +import {editorCommands} from "@web_editor/js/editor/odoo-editor/src/commands/commands"; +import {formatSelection} from "@web_editor/js/editor/odoo-editor/src/utils/utils"; + +const newCommands = { + setCustomCss: (editor, ...args) => { + const selectedId = parseInt(args[0], 10); + const record = editor.custom_class_css.find((item) => item.id === selectedId); + formatSelection(editor, record.class_name); + }, +}; +Object.assign(editorCommands, newCommands); diff --git a/web_editor_class_selector/static/src/js/odoo-editor/utils.esm.js b/web_editor_class_selector/static/src/js/odoo-editor/utils.esm.js new file mode 100644 index 000000000..706df1302 --- /dev/null +++ b/web_editor_class_selector/static/src/js/odoo-editor/utils.esm.js @@ -0,0 +1,37 @@ +/** @odoo-module **/ +import { + closestElement, + formatsSpecs, +} from "@web_editor/js/editor/odoo-editor/src/utils/utils"; + +// This function is called in the _configureToolbar method of the Wysiwyg class +// It generates the new formatsSpecs object with the custom CSS class +export function createCustomCssFormats(custom_class_css) { + const newformatsSpecs = {}; + const class_names = custom_class_css.map((customCss) => customCss.class_name); + const removeCustomClass = (node) => { + for (const class_name of class_names) { + node.classList.remove(class_name); + if (node.parentElement) { + node.parentElement.classList.remove(class_name); + } + } + }; + for (const customCss of custom_class_css) { + const className = customCss.class_name; + newformatsSpecs[className] = { + tagName: "span", + isFormatted: (node) => closestElement(node).classList.contains(className), + isTag: (node) => + ["SPAN"].includes(node.tagName) && node.classList.contains(className), + hasStyle: (node) => closestElement(node).classList.contains(className), + addStyle: (node) => { + removeCustomClass(node); + node.classList.add(className); + }, + addNeutralStyle: (node) => removeCustomClass(node), + removeStyle: (node) => removeCustomClass(node), + }; + } + Object.assign(formatsSpecs, newformatsSpecs); +} diff --git a/web_editor_class_selector/static/src/js/wysiwyg/wysiwyg.esm.js b/web_editor_class_selector/static/src/js/wysiwyg/wysiwyg.esm.js new file mode 100644 index 000000000..7fa75f0d4 --- /dev/null +++ b/web_editor_class_selector/static/src/js/wysiwyg/wysiwyg.esm.js @@ -0,0 +1,25 @@ +/** @odoo-module **/ +import Wysiwyg from "web_editor.wysiwyg"; +import core from "web.core"; +import {createCustomCssFormats} from "../odoo-editor/utils.esm"; + +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); + } + }, +}); diff --git a/web_editor_class_selector/static/src/scss/demo_styles.scss b/web_editor_class_selector/static/src/scss/demo_styles.scss new file mode 100644 index 000000000..e0cac6bea --- /dev/null +++ b/web_editor_class_selector/static/src/scss/demo_styles.scss @@ -0,0 +1,21 @@ +.demo_menu { + font-weight: bold; + font-style: italic; + color: #714b67; +} + +.demo_button { + border: 1px solid #71639e; + border-radius: 0.25rem; + padding: 0.25rem 0.7rem; + font-weight: bold; + color: #343a40; + background-color: #dee2e6; + border-color: #dee2e6 !important; +} + +.demo_field { + border-top: 1px solid grey; + border-bottom: 1px solid grey; + font-weight: bold; +} diff --git a/web_editor_class_selector/static/src/xml/web_editor.xml b/web_editor_class_selector/static/src/xml/web_editor.xml new file mode 100644 index 000000000..d930766dc --- /dev/null +++ b/web_editor_class_selector/static/src/xml/web_editor.xml @@ -0,0 +1,33 @@ + + + + + + + + + + diff --git a/web_editor_class_selector/views/menus.xml b/web_editor_class_selector/views/menus.xml new file mode 100644 index 000000000..3681b315d --- /dev/null +++ b/web_editor_class_selector/views/menus.xml @@ -0,0 +1,11 @@ + + + + + + diff --git a/web_editor_class_selector/views/web_editor_class_views.xml b/web_editor_class_selector/views/web_editor_class_views.xml new file mode 100644 index 000000000..f295c9c21 --- /dev/null +++ b/web_editor_class_selector/views/web_editor_class_views.xml @@ -0,0 +1,60 @@ + + + + + view.web.editor.class.tree + web.editor.class + + + + + + + + + + view.web.editor.class.form + web.editor.class + +
+ +
+
+ + + + +
+ + + + + view.web.editor.class.search + web.editor.class + + + + + + + + + Web Editor Class + ir.actions.act_window + web.editor.class + tree,form + +

+ Click here to add new Web Editor Class. +

+ + + +