diff --git a/web_editor_class_selector/README.rst b/web_editor_class_selector/README.rst
new file mode 100644
index 000000000..c020da6a5
--- /dev/null
+++ b/web_editor_class_selector/README.rst
@@ -0,0 +1,90 @@
+=========================
+Web editor class selector
+=========================
+
+..
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ !! This file is generated by oca-gen-addon-readme !!
+ !! changes will be overwritten. !!
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ !! source digest: sha256:87a4e58b89ecc7f911d8e9fad84c60f0b1a024d6564c5040550651ed2be7ff83
+ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+.. |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/17.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-17-0/web-17-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=17.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 <https://github.com/OCA/web/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 <https://github.com/OCA/web/issues/new?body=module:%20web_editor_class_selector%0Aversion:%2017.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+
+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 <https://github.com/OCA/web/tree/17.0/web_editor_class_selector>`_ 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..e9c34962b
--- /dev/null
+++ b/web_editor_class_selector/__manifest__.py
@@ -0,0 +1,32 @@
+{
+ "name": "Web editor class selector",
+ "version": "17.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.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,
+ "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 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<odoo>
+
+ <record id="class_button" model="web.editor.class">
+ <field name="name">Button</field>
+ <field name="class_name">demo_button</field>
+ </record>
+ <record id="class_menu" model="web.editor.class">
+ <field name="name">Menu</field>
+ <field name="class_name">demo_menu</field>
+ </record>
+ <record id="class_field" model="web.editor.class">
+ <field name="name">Field</field>
+ <field name="class_name">demo_field</field>
+ </record>
+
+</odoo>
diff --git a/web_editor_class_selector/i18n/it.po b/web_editor_class_selector/i18n/it.po
new file mode 100644
index 000000000..c40c294ba
--- /dev/null
+++ b/web_editor_class_selector/i18n/it.po
@@ -0,0 +1,114 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# * web_editor_class_selector
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 16.0\n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: 2024-10-07 10:06+0000\n"
+"Last-Translator: mymage <stefano.consolaro@mymage.it>\n"
+"Language-Team: none\n"
+"Language: it\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
+"X-Generator: Weblate 5.6.2\n"
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__active
+msgid "Active"
+msgstr "Attiva"
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__class_name
+msgid "Class Name"
+msgstr "Nome classe"
+
+#. module: web_editor_class_selector
+#: model:ir.model.constraint,message:web_editor_class_selector.constraint_web_editor_class_class_name_uniq
+msgid "Class name must be unique"
+msgstr "Il nome della classe deve essere univoco"
+
+#. module: web_editor_class_selector
+#: model_terms:ir.actions.act_window,help:web_editor_class_selector.action_web_editor_class
+msgid "Click here to add new Web Editor Class."
+msgstr "Fare clic qui per aggiungere una nuova classe editor web."
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__create_uid
+msgid "Created by"
+msgstr "Creato da"
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__create_date
+msgid "Created on"
+msgstr "Creato il"
+
+#. module: web_editor_class_selector
+#. odoo-javascript
+#: code:addons/web_editor_class_selector/static/src/js/odoo-editor/OdooEditor.esm.js:0
+#: code:addons/web_editor_class_selector/static/src/xml/web_editor.xml:0
+#: code:addons/web_editor_class_selector/static/src/xml/web_editor.xml:0
+#, python-format
+msgid "Custom CSS"
+msgstr "CSS personalizzato"
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__display_name
+msgid "Display Name"
+msgstr "Nome visualizzato"
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__id
+msgid "ID"
+msgstr "ID"
+
+#. 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 "Ultima modifica il"
+
+#. 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"
+msgstr "Ultimo aggiornamento di"
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__write_date
+msgid "Last Updated on"
+msgstr "Ultimo aggiornamento il"
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__name
+msgid "Name"
+msgstr "Nome"
+
+#. module: web_editor_class_selector
+#: model_terms:ir.ui.view,arch_db:web_editor_class_selector.view_web_editor_class_form
+msgid "Name..."
+msgstr "Nome..."
+
+#. module: web_editor_class_selector
+#: model_terms:ir.ui.view,arch_db:web_editor_class_selector.view_web_editor_class_form
+msgid "Some CSS class"
+msgstr "Qualche classe CSS"
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,help:web_editor_class_selector.field_web_editor_class__class_name
+msgid ""
+"The class name to be added to the tag. It must be created in the CSS file."
+msgstr ""
+"Il nome della classe da aggiungere al tag. Deve essere creata nel file CSS."
+
+#. module: web_editor_class_selector
+#: model:ir.actions.act_window,name:web_editor_class_selector.action_web_editor_class
+#: model:ir.ui.menu,name:web_editor_class_selector.web_editor_class_menu
+msgid "Web Editor Class"
+msgstr "Classe editor web"
+
+#. module: web_editor_class_selector
+#: model:ir.model,name:web_editor_class_selector.model_web_editor_class
+msgid "Web editor class selector"
+msgstr "Selettore classe editore web"
diff --git a/web_editor_class_selector/i18n/web_editor_class_selector.pot b/web_editor_class_selector/i18n/web_editor_class_selector.pot
new file mode 100644
index 000000000..b1807675b
--- /dev/null
+++ b/web_editor_class_selector/i18n/web_editor_class_selector.pot
@@ -0,0 +1,110 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# * web_editor_class_selector
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 16.0\n"
+"Report-Msgid-Bugs-To: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__active
+msgid "Active"
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__class_name
+msgid "Class Name"
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model:ir.model.constraint,message:web_editor_class_selector.constraint_web_editor_class_class_name_uniq
+msgid "Class name must be unique"
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model_terms:ir.actions.act_window,help:web_editor_class_selector.action_web_editor_class
+msgid "Click here to add new Web Editor Class."
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__create_uid
+msgid "Created by"
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__create_date
+msgid "Created on"
+msgstr ""
+
+#. module: web_editor_class_selector
+#. odoo-javascript
+#: code:addons/web_editor_class_selector/static/src/js/odoo-editor/OdooEditor.esm.js:0
+#: code:addons/web_editor_class_selector/static/src/xml/web_editor.xml:0
+#: code:addons/web_editor_class_selector/static/src/xml/web_editor.xml:0
+#, python-format
+msgid "Custom CSS"
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__display_name
+msgid "Display Name"
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__id
+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"
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__write_date
+msgid "Last Updated on"
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__name
+msgid "Name"
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model_terms:ir.ui.view,arch_db:web_editor_class_selector.view_web_editor_class_form
+msgid "Name..."
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model_terms:ir.ui.view,arch_db:web_editor_class_selector.view_web_editor_class_form
+msgid "Some CSS class"
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model:ir.model.fields,help:web_editor_class_selector.field_web_editor_class__class_name
+msgid ""
+"The class name to be added to the tag. It must be created in the CSS file."
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model:ir.actions.act_window,name:web_editor_class_selector.action_web_editor_class
+#: model:ir.ui.menu,name:web_editor_class_selector.web_editor_class_menu
+msgid "Web Editor Class"
+msgstr ""
+
+#. module: web_editor_class_selector
+#: model:ir.model,name:web_editor_class_selector.model_web_editor_class
+msgid "Web editor class selector"
+msgstr ""
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..a9878bbc0
--- /dev/null
+++ b/web_editor_class_selector/models/web_editor_class.py
@@ -0,0 +1,18 @@
+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/pyproject.toml b/web_editor_class_selector/pyproject.toml
new file mode 100644
index 000000000..4231d0ccc
--- /dev/null
+++ b/web_editor_class_selector/pyproject.toml
@@ -0,0 +1,3 @@
+[build-system]
+requires = ["whool"]
+build-backend = "whool.buildapi"
diff --git a/web_editor_class_selector/readme/DESCRIPTION.md b/web_editor_class_selector/readme/DESCRIPTION.md
new file mode 100644
index 000000000..a3ed4f069
--- /dev/null
+++ b/web_editor_class_selector/readme/DESCRIPTION.md
@@ -0,0 +1,4 @@
+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.
diff --git a/web_editor_class_selector/readme/ROADMAP.md b/web_editor_class_selector/readme/ROADMAP.md
new file mode 100644
index 000000000..f8a108cda
--- /dev/null
+++ b/web_editor_class_selector/readme/ROADMAP.md
@@ -0,0 +1,2 @@
+Add support to apply class to any element (currently, only span is
+supported)
diff --git a/web_editor_class_selector/readme/USAGE.md b/web_editor_class_selector/readme/USAGE.md
new file mode 100644
index 000000000..0400c8fff
--- /dev/null
+++ b/web_editor_class_selector/readme/USAGE.md
@@ -0,0 +1,6 @@
+- 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/icon.png b/web_editor_class_selector/static/description/icon.png
new file mode 100644
index 000000000..3a0328b51
Binary files /dev/null and b/web_editor_class_selector/static/description/icon.png differ
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..7b8cd3e90
--- /dev/null
+++ b/web_editor_class_selector/static/description/index.html
@@ -0,0 +1,437 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="generator" content="Docutils: https://docutils.sourceforge.io/" />
+<title>Web editor class selector</title>
+<style type="text/css">
+
+/*
+:Author: David Goodger (goodger@python.org)
+:Id: $Id: html4css1.css 9511 2024-01-13 09:50:07Z milde $
+:Copyright: This stylesheet has been placed in the public domain.
+
+Default cascading style sheet for the HTML output of Docutils.
+Despite the name, some widely supported CSS2 features are used.
+
+See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
+customize this style sheet.
+*/
+
+/* used to remove borders from tables and images */
+.borderless, table.borderless td, table.borderless th {
+ border: 0 }
+
+table.borderless td, table.borderless th {
+ /* Override padding for "table.docutils td" with "! important".
+ The right padding separates the table cells. */
+ padding: 0 0.5em 0 0 ! important }
+
+.first {
+ /* Override more specific margin styles with "! important". */
+ margin-top: 0 ! important }
+
+.last, .with-subtitle {
+ margin-bottom: 0 ! important }
+
+.hidden {
+ display: none }
+
+.subscript {
+ vertical-align: sub;
+ font-size: smaller }
+
+.superscript {
+ vertical-align: super;
+ font-size: smaller }
+
+a.toc-backref {
+ text-decoration: none ;
+ color: black }
+
+blockquote.epigraph {
+ margin: 2em 5em ; }
+
+dl.docutils dd {
+ margin-bottom: 0.5em }
+
+object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] {
+ overflow: hidden;
+}
+
+/* Uncomment (and remove this text!) to get bold-faced definition list terms
+dl.docutils dt {
+ font-weight: bold }
+*/
+
+div.abstract {
+ margin: 2em 5em }
+
+div.abstract p.topic-title {
+ font-weight: bold ;
+ text-align: center }
+
+div.admonition, div.attention, div.caution, div.danger, div.error,
+div.hint, div.important, div.note, div.tip, div.warning {
+ margin: 2em ;
+ border: medium outset ;
+ padding: 1em }
+
+div.admonition p.admonition-title, div.hint p.admonition-title,
+div.important p.admonition-title, div.note p.admonition-title,
+div.tip p.admonition-title {
+ font-weight: bold ;
+ font-family: sans-serif }
+
+div.attention p.admonition-title, div.caution p.admonition-title,
+div.danger p.admonition-title, div.error p.admonition-title,
+div.warning p.admonition-title, .code .error {
+ color: red ;
+ font-weight: bold ;
+ font-family: sans-serif }
+
+/* Uncomment (and remove this text!) to get reduced vertical space in
+ compound paragraphs.
+div.compound .compound-first, div.compound .compound-middle {
+ margin-bottom: 0.5em }
+
+div.compound .compound-last, div.compound .compound-middle {
+ margin-top: 0.5em }
+*/
+
+div.dedication {
+ margin: 2em 5em ;
+ text-align: center ;
+ font-style: italic }
+
+div.dedication p.topic-title {
+ font-weight: bold ;
+ font-style: normal }
+
+div.figure {
+ margin-left: 2em ;
+ margin-right: 2em }
+
+div.footer, div.header {
+ clear: both;
+ font-size: smaller }
+
+div.line-block {
+ display: block ;
+ margin-top: 1em ;
+ margin-bottom: 1em }
+
+div.line-block div.line-block {
+ margin-top: 0 ;
+ margin-bottom: 0 ;
+ margin-left: 1.5em }
+
+div.sidebar {
+ margin: 0 0 0.5em 1em ;
+ border: medium outset ;
+ padding: 1em ;
+ background-color: #ffffee ;
+ width: 40% ;
+ float: right ;
+ clear: right }
+
+div.sidebar p.rubric {
+ font-family: sans-serif ;
+ font-size: medium }
+
+div.system-messages {
+ margin: 5em }
+
+div.system-messages h1 {
+ color: red }
+
+div.system-message {
+ border: medium outset ;
+ padding: 1em }
+
+div.system-message p.system-message-title {
+ color: red ;
+ font-weight: bold }
+
+div.topic {
+ margin: 2em }
+
+h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
+h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
+ margin-top: 0.4em }
+
+h1.title {
+ text-align: center }
+
+h2.subtitle {
+ text-align: center }
+
+hr.docutils {
+ width: 75% }
+
+img.align-left, .figure.align-left, object.align-left, table.align-left {
+ clear: left ;
+ float: left ;
+ margin-right: 1em }
+
+img.align-right, .figure.align-right, object.align-right, table.align-right {
+ clear: right ;
+ float: right ;
+ margin-left: 1em }
+
+img.align-center, .figure.align-center, object.align-center {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+table.align-center {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.align-left {
+ text-align: left }
+
+.align-center {
+ clear: both ;
+ text-align: center }
+
+.align-right {
+ text-align: right }
+
+/* reset inner alignment in figures */
+div.align-right {
+ text-align: inherit }
+
+/* div.align-center * { */
+/* text-align: left } */
+
+.align-top {
+ vertical-align: top }
+
+.align-middle {
+ vertical-align: middle }
+
+.align-bottom {
+ vertical-align: bottom }
+
+ol.simple, ul.simple {
+ margin-bottom: 1em }
+
+ol.arabic {
+ list-style: decimal }
+
+ol.loweralpha {
+ list-style: lower-alpha }
+
+ol.upperalpha {
+ list-style: upper-alpha }
+
+ol.lowerroman {
+ list-style: lower-roman }
+
+ol.upperroman {
+ list-style: upper-roman }
+
+p.attribution {
+ text-align: right ;
+ margin-left: 50% }
+
+p.caption {
+ font-style: italic }
+
+p.credits {
+ font-style: italic ;
+ font-size: smaller }
+
+p.label {
+ white-space: nowrap }
+
+p.rubric {
+ font-weight: bold ;
+ font-size: larger ;
+ color: maroon ;
+ text-align: center }
+
+p.sidebar-title {
+ font-family: sans-serif ;
+ font-weight: bold ;
+ font-size: larger }
+
+p.sidebar-subtitle {
+ font-family: sans-serif ;
+ font-weight: bold }
+
+p.topic-title {
+ font-weight: bold }
+
+pre.address {
+ margin-bottom: 0 ;
+ margin-top: 0 ;
+ font: inherit }
+
+pre.literal-block, pre.doctest-block, pre.math, pre.code {
+ margin-left: 2em ;
+ margin-right: 2em }
+
+pre.code .ln { color: gray; } /* line numbers */
+pre.code, code { background-color: #eeeeee }
+pre.code .comment, code .comment { color: #5C6576 }
+pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
+pre.code .literal.string, code .literal.string { color: #0C5404 }
+pre.code .name.builtin, code .name.builtin { color: #352B84 }
+pre.code .deleted, code .deleted { background-color: #DEB0A1}
+pre.code .inserted, code .inserted { background-color: #A3D289}
+
+span.classifier {
+ font-family: sans-serif ;
+ font-style: oblique }
+
+span.classifier-delimiter {
+ font-family: sans-serif ;
+ font-weight: bold }
+
+span.interpreted {
+ font-family: sans-serif }
+
+span.option {
+ white-space: nowrap }
+
+span.pre {
+ white-space: pre }
+
+span.problematic, pre.problematic {
+ color: red }
+
+span.section-subtitle {
+ /* font-size relative to parent (h1..h6 element) */
+ font-size: 80% }
+
+table.citation {
+ border-left: solid 1px gray;
+ margin-left: 1px }
+
+table.docinfo {
+ margin: 2em 4em }
+
+table.docutils {
+ margin-top: 0.5em ;
+ margin-bottom: 0.5em }
+
+table.footnote {
+ border-left: solid 1px black;
+ margin-left: 1px }
+
+table.docutils td, table.docutils th,
+table.docinfo td, table.docinfo th {
+ padding-left: 0.5em ;
+ padding-right: 0.5em ;
+ vertical-align: top }
+
+table.docutils th.field-name, table.docinfo th.docinfo-name {
+ font-weight: bold ;
+ text-align: left ;
+ white-space: nowrap ;
+ padding-left: 0 }
+
+/* "booktabs" style (no vertical lines) */
+table.docutils.booktabs {
+ border: 0px;
+ border-top: 2px solid;
+ border-bottom: 2px solid;
+ border-collapse: collapse;
+}
+table.docutils.booktabs * {
+ border: 0px;
+}
+table.docutils.booktabs th {
+ border-bottom: thin solid;
+ text-align: left;
+}
+
+h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
+h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
+ font-size: 100% }
+
+ul.auto-toc {
+ list-style-type: none }
+
+</style>
+</head>
+<body>
+<div class="document" id="web-editor-class-selector">
+<h1 class="title">Web editor class selector</h1>
+
+<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+!! This file is generated by oca-gen-addon-readme !!
+!! changes will be overwritten. !!
+!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+!! source digest: sha256:87a4e58b89ecc7f911d8e9fad84c60f0b1a024d6564c5040550651ed2be7ff83
+!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
+<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&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
+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.</p>
+<p><strong>Table of contents</strong></p>
+<div class="contents local topic" id="contents">
+<ul class="simple">
+<li><a class="reference internal" href="#usage" id="toc-entry-1">Usage</a></li>
+<li><a class="reference internal" href="#known-issues-roadmap" id="toc-entry-2">Known issues / Roadmap</a></li>
+<li><a class="reference internal" href="#bug-tracker" id="toc-entry-3">Bug Tracker</a></li>
+<li><a class="reference internal" href="#credits" id="toc-entry-4">Credits</a><ul>
+<li><a class="reference internal" href="#authors" id="toc-entry-5">Authors</a></li>
+<li><a class="reference internal" href="#maintainers" id="toc-entry-6">Maintainers</a></li>
+</ul>
+</li>
+</ul>
+</div>
+<div class="section" id="usage">
+<h1><a class="toc-backref" href="#toc-entry-1">Usage</a></h1>
+<ul class="simple">
+<li>Go to Settings > Technical > User Interface > Web editor Class.</li>
+<li>Create and name your custom CSS classes.</li>
+<li>Go to any model with an HTML field (e.g., Settings > Users >
+Preferences > Signature).</li>
+<li>In the HTML editor, select any content block.</li>
+<li>Choose from the available CSS classes to apply the desired styling.</li>
+</ul>
+</div>
+<div class="section" id="known-issues-roadmap">
+<h1><a class="toc-backref" href="#toc-entry-2">Known issues / Roadmap</a></h1>
+<p>Add support to apply class to any element (currently, only span is
+supported)</p>
+</div>
+<div class="section" id="bug-tracker">
+<h1><a class="toc-backref" href="#toc-entry-3">Bug Tracker</a></h1>
+<p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
+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
+<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_editor_class_selector%0Aversion:%2017.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
+<p>Do not contact contributors directly about support or help with technical issues.</p>
+</div>
+<div class="section" id="credits">
+<h1><a class="toc-backref" href="#toc-entry-4">Credits</a></h1>
+<div class="section" id="authors">
+<h2><a class="toc-backref" href="#toc-entry-5">Authors</a></h2>
+<ul class="simple">
+<li>Tecnativa</li>
+</ul>
+</div>
+<div class="section" id="maintainers">
+<h2><a class="toc-backref" href="#toc-entry-6">Maintainers</a></h2>
+<p>This module is maintained by the OCA.</p>
+<a class="reference external image-reference" href="https://odoo-community.org">
+<img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" />
+</a>
+<p>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.</p>
+<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/17.0/web_editor_class_selector">OCA/web</a> project on GitHub.</p>
+<p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
+</div>
+</div>
+</div>
+</body>
+</html>
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..67b45aae3
--- /dev/null
+++ b/web_editor_class_selector/static/src/js/backend/html_field.esm.js
@@ -0,0 +1,31 @@
+/** @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, {
+ setup() {
+ super.setup(...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"]
+ );
+ });
+ },
+ 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,
+ },
+ };
+ },
+});
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..74734b0fe
--- /dev/null
+++ b/web_editor_class_selector/static/src/js/odoo-editor/OdooEditor.esm.js
@@ -0,0 +1,68 @@
+/** @odoo-module **/
+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, {
+ _updateToolbar(show) {
+ const res = super._updateToolbar(show);
+ if (!this.toolbar || !this.custom_class_css) {
+ 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 <br> 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/toolbar.esm.js b/web_editor_class_selector/static/src/js/odoo-editor/toolbar.esm.js
new file mode 100644
index 000000000..6e2afe703
--- /dev/null
+++ b/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: [],
+});
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..fccd793b1
--- /dev/null
+++ b/web_editor_class_selector/static/src/js/wysiwyg/wysiwyg.esm.js
@@ -0,0 +1,17 @@
+/** @odoo-module **/
+import {Wysiwyg} from "@web_editor/js/wysiwyg/wysiwyg";
+import {createCustomCssFormats} from "../odoo-editor/utils.esm";
+import {patch} from "@web/core/utils/patch";
+
+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);
+ }
+ },
+});
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..031225160
--- /dev/null
+++ b/web_editor_class_selector/static/src/xml/web_editor.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates id="template" xml:space="preserve">
+ <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"
+ data-bs-toggle="dropdown"
+ title="Custom CSS"
+ tabindex="-1"
+ data-bs-original-title="Custom CSS"
+ aria-expanded="false"
+ >
+ <span>Custom CSS</span>
+ </button>
+ <ul class="dropdown-menu">
+ <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"
+ href="#"
+ data-call="setCustomCss"
+ t-att-data-arg1="line.id"
+ ><span t-att-class="line.class_name" t-out="line.name" /></a>
+ </li>
+ </ul>
+ </div>
+ </xpath>
+ </t>
+</templates>
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 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<odoo>
+
+ <menuitem
+ id="web_editor_class_menu"
+ action="action_web_editor_class"
+ parent="base.next_id_2"
+ sequence="50"
+ />
+
+</odoo>
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 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<odoo>
+
+ <record id="view_web_editor_class_tree" model="ir.ui.view">
+ <field name="name">view.web.editor.class.tree</field>
+ <field name="model">web.editor.class</field>
+ <field name="arch" type="xml">
+ <tree>
+ <field name="name" />
+ <field name="class_name" />
+ </tree>
+ </field>
+ </record>
+
+ <record id="view_web_editor_class_form" model="ir.ui.view">
+ <field name="name">view.web.editor.class.form</field>
+ <field name="model">web.editor.class</field>
+ <field name="arch" type="xml">
+ <form>
+ <sheet>
+ <div class="oe_title">
+ <label for="name" />
+ <h1>
+ <field name="name" placeholder="Name..." />
+ </h1>
+ </div>
+ <group>
+ <field name="class_name" placeholder="Some CSS class" />
+ </group>
+ </sheet>
+ </form>
+ </field>
+ </record>
+
+ <record id="view_web_editor_class_search" model="ir.ui.view">
+ <field name="name">view.web.editor.class.search</field>
+ <field name="model">web.editor.class</field>
+ <field name="arch" type="xml">
+ <search>
+ <field
+ name="name"
+ filter_domain="['|', ('name', 'ilike', self), ('class_name', 'ilike', self)]"
+ />
+ </search>
+ </field>
+ </record>
+
+ <record id="action_web_editor_class" model="ir.actions.act_window">
+ <field name="name">Web Editor Class</field>
+ <field name="type">ir.actions.act_window</field>
+ <field name="res_model">web.editor.class</field>
+ <field name="view_mode">tree,form</field>
+ <field name="help" type="html">
+ <p class="o_view_nocontent_smiling_face">
+ Click here to add new Web Editor Class.
+ </p>
+ </field>
+ </record>
+
+</odoo>