diff --git a/web_editor_class_selector/README.rst b/web_editor_class_selector/README.rst new file mode 100644 index 000000000000..e8b855c81bba --- /dev/null +++ b/web_editor_class_selector/README.rst @@ -0,0 +1,113 @@ +.. image:: https://odoo-community.org/readme-banner-image + :target: https://odoo-community.org/get-involved?utm_source=readme + :alt: Odoo Community Association + +========================= +Web editor class selector +========================= + +.. + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! source digest: sha256:27dc2c3aadd6f0fa60d492916a82154019c52ba9203053995b113a2b00922c3f + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |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/license-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/19.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-19-0/web-19-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=19.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 + +Contributors +------------ + +- `Tecnativa `__: + + - Carlos Lopez + +- `Heliconia Solutions Pvt. Ltd. `__ + + - Bhavesh Heliconia + +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. + +.. |maintainer-carlos-lopez-tecnativa| image:: https://github.com/carlos-lopez-tecnativa.png?size=40px + :target: https://github.com/carlos-lopez-tecnativa + :alt: carlos-lopez-tecnativa + +Current `maintainer `__: + +|maintainer-carlos-lopez-tecnativa| + +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 000000000000..0650744f6bc6 --- /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 000000000000..4d26075d69cb --- /dev/null +++ b/web_editor_class_selector/__manifest__.py @@ -0,0 +1,31 @@ +{ + "name": "Web editor class selector", + "version": "19.0.1.0.0", + "summary": "", + "author": "Tecnativa, Odoo Community Association (OCA)", + "website": "https://github.com/OCA/web", + "depends": [ + "html_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/css_selector/**/*", + "web_editor_class_selector/static/src/scss/demo_styles.scss", + "web_editor_class_selector/static/src/js/fields/**/*", + "web_editor_class_selector/static/src/js/utils/**/*", + "web_editor_class_selector/static/src/js/wysiwyg/**/*", + ], + }, + "maintainers": ["carlos-lopez-tecnativa"], + "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 000000000000..a5805d839fb6 --- /dev/null +++ b/web_editor_class_selector/demo/web_editor_class_demo.xml @@ -0,0 +1,15 @@ + + + + Button + demo_button + + + Menu + demo_menu + + + Field + demo_field + + diff --git a/web_editor_class_selector/i18n/it.po b/web_editor_class_selector/i18n/it.po new file mode 100644 index 000000000000..1d8c61ff3ec7 --- /dev/null +++ b/web_editor_class_selector/i18n/it.po @@ -0,0 +1,116 @@ +# 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: 2025-02-20 11:07+0000\n" +"Last-Translator: mymage \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 +#, 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__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:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__sequence +msgid "Sequence" +msgstr "Sequenza" + +#. 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" + +#~ msgid "Last Modified on" +#~ msgstr "Ultima modifica il" 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 000000000000..6d3cdb5efaa2 --- /dev/null +++ b/web_editor_class_selector/i18n/web_editor_class_selector.pot @@ -0,0 +1,107 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_editor_class_selector +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 18.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/css_selector/css_selector_plugin.esm.js:0 +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__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:ir.model.fields,field_description:web_editor_class_selector.field_web_editor_class__sequence +msgid "Sequence" +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 000000000000..5b8909384f90 --- /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 000000000000..84c206955e7e --- /dev/null +++ b/web_editor_class_selector/models/web_editor_class.py @@ -0,0 +1,20 @@ +from odoo import fields, models + + +class WebEditorClass(models.Model): + _name = "web.editor.class" + _description = "Web editor class selector" + _order = "sequence,id" + + name = fields.Char(required=True) + sequence = fields.Integer(default=10) + 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) + + _class_name_uniq = models.Constraint( + "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 000000000000..4231d0cccb3d --- /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/CONTRIBUTORS.md b/web_editor_class_selector/readme/CONTRIBUTORS.md new file mode 100644 index 000000000000..063377c417aa --- /dev/null +++ b/web_editor_class_selector/readme/CONTRIBUTORS.md @@ -0,0 +1,5 @@ +- [Tecnativa](https://www.tecnativa.com): + - Carlos Lopez + +- [Heliconia Solutions Pvt. Ltd.](https://www.heliconia.io) + - Bhavesh Heliconia diff --git a/web_editor_class_selector/readme/DESCRIPTION.md b/web_editor_class_selector/readme/DESCRIPTION.md new file mode 100644 index 000000000000..a3ed4f069f6a --- /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 000000000000..f8a108cdadbe --- /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 000000000000..0400c8fffe12 --- /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 000000000000..373bd0465ba1 --- /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 000000000000..3a0328b516c4 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 000000000000..f429c2bf7109 --- /dev/null +++ b/web_editor_class_selector/static/description/index.html @@ -0,0 +1,459 @@ + + + + + +README.rst + + + +
+ + + +Odoo Community Association + +
+

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
    • +
+
+
+

Contributors

+ +
+
+

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.

+

Current maintainer:

+

carlos-lopez-tecnativa

+

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/css_selector/css_selector.esm.js b/web_editor_class_selector/static/src/js/css_selector/css_selector.esm.js new file mode 100644 index 000000000000..bc8b7a241c73 --- /dev/null +++ b/web_editor_class_selector/static/src/js/css_selector/css_selector.esm.js @@ -0,0 +1,25 @@ +import {Component, useState} from "@odoo/owl"; +import {Dropdown} from "@web/core/dropdown/dropdown"; +import {DropdownItem} from "@web/core/dropdown/dropdown_item"; + +export class CssSelector extends Component { + static template = "web_editor_class_selector.CssSelector"; + static props = { + getItems: Function, + getDisplay: Function, + onSelected: Function, + title: {type: [String, Function], optional: true}, + getSelection: {type: Function, optional: true}, + isDisabled: {type: [Function, Boolean], optional: true}, + }; + static components = {Dropdown, DropdownItem}; + + setup() { + this.items = this.props.getItems(); + this.state = useState(this.props.getDisplay()); + } + + onSelected(item) { + this.props.onSelected(item); + } +} diff --git a/web_editor_class_selector/static/src/js/css_selector/css_selector.xml b/web_editor_class_selector/static/src/js/css_selector/css_selector.xml new file mode 100644 index 000000000000..0f81d63180b7 --- /dev/null +++ b/web_editor_class_selector/static/src/js/css_selector/css_selector.xml @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + diff --git a/web_editor_class_selector/static/src/js/css_selector/css_selector_plugin.esm.js b/web_editor_class_selector/static/src/js/css_selector/css_selector_plugin.esm.js new file mode 100644 index 000000000000..3d73ab149e8a --- /dev/null +++ b/web_editor_class_selector/static/src/js/css_selector/css_selector_plugin.esm.js @@ -0,0 +1,71 @@ +import {CssSelector} from "./css_selector.esm"; +import {Plugin} from "@html_editor/plugin"; +import {_t} from "@web/core/l10n/translation"; +import {reactive} from "@odoo/owl"; +import {closestElement} from "@html_editor/utils/dom_traversal"; +import {isVisibleTextNode} from "@html_editor/utils/dom_info"; +import {withSequence} from "@html_editor/utils/resource"; + +export class CssSelectorPlugin extends Plugin { + static id = "css_selector_plugin"; + static dependencies = ["selection", "format"]; + resources = { + toolbar_groups: [withSequence(60, {id: "css-selector"})], + toolbar_items: [ + { + id: "css-selector", + groupId: "css-selector", + title: _t("Custom CSS"), + Component: CssSelector, + props: { + getItems: () => this.custom_class_css, + getDisplay: () => this.custom_css, + onSelected: (item) => { + this.dependencies.format.formatSelection(item.class_name, { + formatProps: {className: item.class_name}, + applyStyle: true, + }); + this.updateCustomCssSelectorParams(); + }, + }, + }, + ], + /** Handlers */ + selectionchange_handlers: [this.updateCustomCssSelectorParams.bind(this)], + post_undo_handlers: [this.updateCustomCssSelectorParams.bind(this)], + post_redo_handlers: [this.updateCustomCssSelectorParams.bind(this)], + }; + + setup() { + this.custom_css = reactive({displayName: this.defaultCustomCssName}); + this.custom_class_css = this.config.custom_class_css; + } + updateCustomCssSelectorParams() { + this.custom_css.displayName = this.customCssName; + } + get defaultCustomCssName() { + return _t("Custom CSS"); + } + get customCssName() { + const selectedNodes = this.dependencies.selection + .getTargetedNodes() + .filter( + (n) => + n.nodeType === Node.TEXT_NODE && + closestElement(n).isContentEditable && + isVisibleTextNode(n) + ); + let activeLabel = this.defaultCustomCssName; + for (const selectedTextNode of selectedNodes) { + const parentNode = selectedTextNode.parentElement; + for (const customCss of this.custom_class_css) { + const isActive = parentNode.classList.contains(customCss.class_name); + if (isActive) { + activeLabel = customCss.name; + break; + } + } + } + return activeLabel; + } +} diff --git a/web_editor_class_selector/static/src/js/fields/html_field.esm.js b/web_editor_class_selector/static/src/js/fields/html_field.esm.js new file mode 100644 index 000000000000..dd82d961bf62 --- /dev/null +++ b/web_editor_class_selector/static/src/js/fields/html_field.esm.js @@ -0,0 +1,29 @@ +import {CssSelectorPlugin} from "../css_selector/css_selector_plugin.esm"; +import {HtmlField} from "@html_editor/fields/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"] + ); + }); + }, + getConfig() { + // Add the new Plugin to the list of plugins. + // Provide the custom_class_css to the toolbar. + const config = super.getConfig(...arguments); + config.Plugins.push(CssSelectorPlugin); + config.custom_class_css = this.custom_class_css; + return config; + }, +}); diff --git a/web_editor_class_selector/static/src/js/utils/utils.esm.js b/web_editor_class_selector/static/src/js/utils/utils.esm.js new file mode 100644 index 000000000000..2c1ccfc5d751 --- /dev/null +++ b/web_editor_class_selector/static/src/js/utils/utils.esm.js @@ -0,0 +1,34 @@ +import {closestElement} from "@html_editor/utils/dom_traversal"; +import {formatsSpecs} from "@html_editor/utils/formatting"; + +// This function is called in the getEditorConfig 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 000000000000..eff2a277850c --- /dev/null +++ b/web_editor_class_selector/static/src/js/wysiwyg/wysiwyg.esm.js @@ -0,0 +1,16 @@ +import {Wysiwyg} from "@html_editor/wysiwyg"; +import {createCustomCssFormats} from "../utils/utils.esm"; +import {patch} from "@web/core/utils/patch"; + +patch(Wysiwyg.prototype, { + getEditorConfig() { + const res = super.getEditorConfig(...arguments); + if ( + this.props.config.custom_class_css && + this.props.config.custom_class_css.length > 0 + ) { + createCustomCssFormats(this.props.config.custom_class_css); + } + return res; + }, +}); 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 000000000000..e0cac6beaa7a --- /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/views/menus.xml b/web_editor_class_selector/views/menus.xml new file mode 100644 index 000000000000..2970af7a1cb1 --- /dev/null +++ b/web_editor_class_selector/views/menus.xml @@ -0,0 +1,9 @@ + + + + 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 000000000000..e50291710490 --- /dev/null +++ b/web_editor_class_selector/views/web_editor_class_views.xml @@ -0,0 +1,60 @@ + + + + view.web.editor.class.list + 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 + list,form + +

+ Click here to add new Web Editor Class. +

+ + +