diff --git a/addons/website/static/src/components/ace_editor/ace_editor.js b/addons/website/static/src/components/ace_editor/ace_editor.js
deleted file mode 100644
index c48cfdd2767..00000000000
--- a/addons/website/static/src/components/ace_editor/ace_editor.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/** @odoo-module */
-
-import { useWidget } from "@web/legacy/utils";
-import {useService} from '@web/core/utils/hooks';
-import AceEditor from '@web_editor/js/backend/ace';
-
-import { Component, xml } from "@odoo/owl";
-import { AceEditorWarningOverlay } from "../ace_warning/ace_warning";
-
-export const WebsiteAceEditor = AceEditor.extend({
-
- //--------------------------------------------------------------------------
- // Public
- //--------------------------------------------------------------------------
-
- /**
- * @override
- */
- do_hide() {
- this.options.toggleAceEditor(false);
- },
-
- //--------------------------------------------------------------------------
- // Private
- //--------------------------------------------------------------------------
-
- /**
- * @override
- */
- _getContext() {
- return this.options.getContext();
- },
- /**
- * @override
- */
- _saveResources() {
- return this._super.apply(this, arguments).then(() => {
- const defs = [];
- if (this.currentType === 'xml') {
- // When saving a view, the view ID might change. Thus, the
- // active ID in the URL will be incorrect. After the save
- // reload, that URL ID won't be found and JS will crash.
- // We need to find the new ID (either because the view became
- // specific or because its parent was edited too and the view
- // got copy/unlink).
- const selectedView = Object.values(this.views).find(view => view.id === this._getSelectedResource());
- const context = this.options.getContext();
- defs.push(
- this.orm.searchRead(
- "ir.ui.view",
- [
- ["key", "=", selectedView.key],
- ["website_id", "=", context.website_id],
- ],
- ["id"],
- { context: this.options.getContext() }
- )
- );
- }
- return Promise.all(defs).then((async () => {
- await this._updateEditor();
- this.options.reload();
- }));
- });
- },
- /**
- * @override
- */
- _switchType(type) {
- const ret = this._super(...arguments);
-
- if (type === 'scss') {
- // By default show the user_custom_rules.scss one as some people
- // would write rules in user_custom_bootstrap_overridden.scss
- // otherwise, not reading the comment inside explaining how that
- // file should be used.
- this._displayResource('/website/static/src/scss/user_custom_rules.scss');
- }
-
- return ret;
- },
- /**
- * @override
- */
- _resetResource() {
- return this._super.apply(this, arguments).then((() => {
- this._updateEditor();
- this.options.reload();
- }).bind(this));
- },
- /**
- * Used to update UI (resource display, toggle resetButton visibility,...)
- * on save/reset since we reload the iframe only after an update.
- *
- * @private
- */
- async _updateEditor() {
- if (['js', 'scss'].includes(this.currentType)) {
- await this._loadResources();
- return this._displayResource(this._getSelectedResource());
- }
- },
-});
-
-export class AceEditorWrapper extends Component {
- static components = { AceEditorWarningOverlay };
- static template = xml`
-
-
-
-
-
-
- `;
-
- setup() {
- this.website = useService("website");
- this.user = useService("user");
- this.env = Component.env;
-
- useWidget("wrapper", WebsiteAceEditor, [
- this.website.pageDocument && this.website.pageDocument.documentElement.dataset.viewXmlid,
- {
- toggleAceEditor: () => this.website.context.showAceEditor = false,
- defaultBundlesRestriction: [
- 'web.assets_frontend',
- 'web.assets_frontend_minimal',
- 'web.assets_frontend_lazy',
- ],
- reload: () => {
- this.website.contentWindow.location.reload();
- },
- getContext: () => ({
- ...this.user.context,
- website_id: this.website.currentWebsite.id,
- }),
- noWarning: true,
- },
- ]);
- }
-}
diff --git a/addons/website/static/src/components/ace_editor/ace_editor.scss b/addons/website/static/src/components/ace_editor/ace_editor.scss
deleted file mode 100644
index d33d31588c8..00000000000
--- a/addons/website/static/src/components/ace_editor/ace_editor.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.o_ace_view_editor_wrapper:not(.oe_form_field) {
- @include o-position-absolute($o-navbar-height, 0, 0);
- position: fixed;
- z-index: $zindex-modal;
-
- .o_website_fullscreen & {
- top: 0;
- }
-}
diff --git a/addons/website/static/src/components/resource_editor/resource_editor.js b/addons/website/static/src/components/resource_editor/resource_editor.js
new file mode 100644
index 00000000000..f7caa1b689c
--- /dev/null
+++ b/addons/website/static/src/components/resource_editor/resource_editor.js
@@ -0,0 +1,501 @@
+/** @odoo-module */
+
+import { CodeEditor } from "@web/core/code_editor/code_editor";
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { _t } from "@web/core/l10n/translation";
+import { SelectMenu } from "@web/core/select_menu/select_menu";
+import { sortBy } from "@web/core/utils/arrays";
+import { KeepLast } from "@web/core/utils/concurrency";
+import { useService } from "@web/core/utils/hooks";
+
+import { ResourceEditorWarningOverlay } from "./resource_editor_warning";
+import { checkSCSS, checkXML, formatXML } from "./utils";
+
+import { Component, onWillUnmount, onWillStart, reactive, useRef, useState } from "@odoo/owl";
+
+const BUNDLES_RESTRICTION = [
+ "web.assets_frontend",
+ "web.assets_frontend_minimal",
+ "web.assets_frontend_lazy",
+];
+
+// TODO move in web?
+class CheckableDropdownItem extends DropdownItem {}
+CheckableDropdownItem.template = "website.CheckableDropdownItem";
+CheckableDropdownItem.props = {
+ ...DropdownItem.props,
+ checked: {
+ type: Boolean,
+ optional: false,
+ },
+};
+
+export class ResourceEditor extends Component {
+ static components = {
+ ResourceEditorWarningOverlay,
+ CodeEditor,
+ Dropdown,
+ DropdownItem,
+ CheckableDropdownItem,
+ SelectMenu,
+ };
+ static template = "website.ResourceEditor";
+ static props = {
+ close: { type: Function, optional: true },
+ };
+ static defaultProps = {
+ close: () => {},
+ };
+
+ setup() {
+ this.website = useService("website");
+ this.user = useService("user");
+ this.orm = useService("orm");
+ this.rpc = useService("rpc");
+ this.dialog = useService("dialog");
+
+ this.keepLast = new KeepLast();
+
+ this.editorRef = useRef("editor");
+
+ this.debug = this.env.debug;
+ this.viewKey =
+ this.website.pageDocument &&
+ this.website.pageDocument.documentElement.dataset.viewXmlid;
+
+ this.types = {
+ xml: "XML (HTML)",
+ scss: "SCSS (CSS)",
+ js: "JS",
+ };
+ this.xmlFilters = {
+ views: _t("Only Views"),
+ all: _t("Views and Assets bundles"),
+ };
+ this.scssFilters = {
+ custom: _t("Only Custom SCSS Files"),
+ restricted: _t("Only Page SCSS Files"),
+ all: _t("All SCSS Files"),
+ };
+ this.state = useState({
+ type: "xml",
+ xmlFilter: "views",
+ scssFilter: "custom",
+ currentResource: false,
+ showEditWarning: true,
+ resources: {
+ xml: {},
+ js: {},
+ scss: {},
+ },
+ sortedXML: [],
+ sortedSCSS: [],
+ sortedJS: [],
+ saving: false,
+ });
+
+ let showErrorInterval;
+ this.errors = reactive([], () => {
+ clearInterval(showErrorInterval);
+ if (this.errors.length) {
+ this.showErrorLine();
+ // The ace library updates its content asynchronously, and sometimes
+ // at unexpected moments, so we consistently re-apply the error indicators
+ // when they are errors. This is kind of a hack, but it works.
+ showErrorInterval = setInterval(() => this.showErrorLine(), 500);
+ } else {
+ this.clearErrorLine();
+ }
+ });
+ onWillUnmount(() => clearInterval(showErrorInterval));
+
+ onWillStart(async () => this.loadResources());
+ }
+
+ // -------------------------------------------------------------------------
+ // Getters
+ // -------------------------------------------------------------------------
+
+ get context() {
+ return {
+ ...this.user.context,
+ website_id: this.website.currentWebsite.id,
+ };
+ }
+
+ get resourceInfo() {
+ if (!this.state.currentResource) {
+ return "";
+ }
+ if (this.state.type === "xml") {
+ return _t("Template ID: %s", this.state.currentResource.key);
+ } else if (this.state.type === "scss") {
+ return _t("SCSS file: %s", this.state.currentResource.url);
+ } else {
+ return _t("JS file: %s", this.state.currentResource.url);
+ }
+ }
+
+ get selectMenuProps() {
+ const props = {
+ onSelect: (value) => {
+ this.state.currentResource = this.state.resources[this.state.type][value];
+ },
+ autoSort: false,
+ required: true,
+ };
+ if (this.state.type === "xml") {
+ const choices = this.state.sortedXML.map((view) => {
+ return { value: view.id, label: view.label };
+ });
+ const value = this.state.currentResource?.id;
+ return { ...props, choices, value };
+ } else {
+ const { type, sortedSCSS, sortedJS } = this.state;
+ const bundles = type === "scss" ? sortedSCSS : sortedJS;
+ const groups = bundles.map(([name, files]) => {
+ const choices = files.map((file) => ({ value: file.url, label: file.label }));
+ return { label: name, choices };
+ });
+ const value = this.state.currentResource?.url;
+ return { ...props, groups, value };
+ }
+ }
+
+ // -------------------------------------------------------------------------
+ // Methods
+ // -------------------------------------------------------------------------
+
+ /**
+ * Checks resource is customized or not.
+ *
+ * @param {string} url
+ * @returns {boolean}
+ */
+ isCustomResource(url) {
+ // TODO we should be able to detect if the XML template is customized
+ // to not show the warning in that case
+ if (this.state.type === "scss") {
+ return this.state.resources.scss[url].customized;
+ } else if (this.state.type === "js") {
+ return this.state.resources.js[url].customized;
+ }
+ return false;
+ }
+
+ async loadResources() {
+ const resources = await this.keepLast.add(
+ this.rpc("/web_editor/get_assets_editor_resources", {
+ key: this.viewKey,
+ bundles: this.state.xmlFilter === "all",
+ bundles_restriction: BUNDLES_RESTRICTION,
+ only_user_custom_files: this.state.scssFilter === "custom",
+ })
+ );
+ this.state.resources = { xml: {}, js: {}, scss: {} };
+ this.processResources(resources.views || [], "xml");
+ this.processResources(resources.scss || [], "scss");
+ this.processResources(resources.js || [], "js");
+ const type = this.state.type;
+ if (this.state.currentResource) {
+ this.state.currentResource = this.state.resources[type][this.state.currentResource.id];
+ }
+ if (!this.state.currentResource) {
+ this.setDefaultFile();
+ }
+ this.errors.length = 0;
+ }
+
+ processResources(resources, type) {
+ if (type === "xml") {
+ // Only keep the active views and index them by ID.
+ const indexedById = {};
+ resources
+ .filter((view) => view.active)
+ .forEach((view) => {
+ view.type = "xml";
+ indexedById[view.id] = view;
+ });
+ Object.assign(this.state.resources.xml, indexedById);
+
+ // Initialize a 0 level for each view and assign them an array containing their children.
+ const roots = [];
+ Object.values(this.state.resources.xml).forEach((view) => {
+ view.level = 0;
+ view.children = [];
+ });
+ Object.values(this.state.resources.xml).forEach((view) => {
+ const parentId = view.inherit_id[0];
+ const parent = parentId && this.state.resources.xml[parentId];
+ if (parent) {
+ parent.children.push(view);
+ } else {
+ roots.push(view);
+ }
+ });
+
+ // Assign the correct level based on children key and save a sorted array where
+ // each view is followed by their children.
+ const sortedXML = [];
+ const visit = (view, level) => {
+ view.level = level;
+ sortedXML.push(view);
+ view.children.forEach((child) => {
+ visit(child, level + 1);
+ });
+ };
+ roots.forEach((root) => {
+ visit(root, 0);
+ });
+ this.state.sortedXML = sortedXML;
+
+ // Compute labels
+ Object.values(this.state.resources.xml).forEach((view) => {
+ view.label = `${"-".repeat(view.level)} ${view.name}`;
+ if (this.debug && view.xml_id) {
+ view.label += ` (${view.xml_id})`;
+ }
+ });
+ } else if (type === "scss" || type === "js") {
+ // The received scss or js data is already sorted by bundle and DOM order
+ if (type === "scss") {
+ this.state.sortedSCSS = resources;
+ } else {
+ this.state.sortedJS = resources;
+ }
+
+ // Store the URL ungrouped by bundle and use the URL as key (resource ID)
+ resources.forEach(([bundle, files]) => {
+ const indexedByUrl = {};
+ files.forEach((file) => {
+ // Compute labels
+ file.label = file.url.split("/").at(-1).split(".")[0];
+ if (this.debug) {
+ file.label += ` (${file.url})`;
+ }
+
+ file.bundle = bundle;
+ file.id = file.url; // for consistency with xml resources
+ file.type = type;
+ indexedByUrl[file.url] = file;
+ });
+ if (type === "scss") {
+ Object.assign(this.state.resources.scss, indexedByUrl);
+ } else {
+ Object.assign(this.state.resources.js, indexedByUrl);
+ }
+ });
+ }
+ }
+
+ /**
+ * Forces the current scss/js file identified by its url to be reset to the way
+ * it was before the user started editing it.
+ *
+ * @todo views (xml) reset is not supported yet
+ *
+ * @returns {Promise}
+ */
+ async resetResource() {
+ if (this.state.type === "xml") {
+ throw new Error(_t("Reseting views is not supported yet"));
+ }
+ const resource = this.state.currentResource;
+ await this.orm.call("web_editor.assets", "reset_asset", [resource.url, resource.bundle], {
+ context: this.context,
+ });
+ await this.loadResources();
+ this.website.contentWindow.location.reload();
+ }
+
+ async saveResources() {
+ const { js, scss, xml } = this.state.resources;
+ const toSave = {
+ js: Object.values(js).filter((r) => r.dirty),
+ scss: Object.values(scss).filter((r) => r.dirty),
+ // child views first as COW on a parent would delete them
+ xml: sortBy(
+ Object.values(xml).filter((r) => r.dirty),
+ "id"
+ ).reverse(),
+ };
+
+ for (const [type, resources] of Object.entries(toSave)) {
+ for (let i = 0; i < resources.length; i++) {
+ const arch = resources[i].arch;
+ const { isValid, error } = type === "xml" ? checkXML(arch) : checkSCSS(arch);
+ if (!isValid) {
+ this.errors.push({ error, resource: resources[i] });
+ }
+ }
+ }
+ if (this.errors.length) {
+ // switch to the first resource in error if the current has no error
+ if (
+ !this.errors
+ .map(({ resource }) => resource.id)
+ .includes(this.state.currentResource.id)
+ ) {
+ this.state.currentResource = this.errors[0].resource;
+ this.state.type = this.errors[0].resource.type;
+ }
+ return;
+ }
+
+ // sequentially save all resources
+ for (const [type, resources] of Object.entries(toSave)) {
+ for (const resource of resources) {
+ if (type === "xml") {
+ await this.saveXML(resource);
+ } else {
+ await this.saveSCSSorJS(resource);
+ }
+ }
+ }
+ await this.loadResources();
+ this.website.contentWindow.location.reload();
+ }
+
+ /**
+ * Saves a unique SCSS or JS file.
+ *
+ * @private
+ * @param {Object} resource a SCSS or JS file to save
+ * @return {Promise} indicates if the save is finished or if an error occured.
+ */
+ async saveSCSSorJS(resource) {
+ const { url, arch } = resource;
+ const isJSFile = String(url).endsWith(".js");
+ const bundle = isJSFile
+ ? this.state.resources.js[url].bundle
+ : this.state.resources.scss[url].bundle;
+ const fileType = isJSFile ? "js" : "scss";
+ const params = [url, bundle, arch, fileType];
+ await this.orm.call("web_editor.assets", "save_asset", params, { context: this.context });
+ delete resource.dirty;
+ }
+
+ /**
+ * Saves a unique XML view.
+ *
+ * @param {Object} resource an xml view to save
+ * @returns {Promise} indicates if the save is finished or if an error occured.
+ */
+ async saveXML(resource) {
+ const { id, arch } = resource;
+ const context = { ...this.context, lang: false };
+ await this.orm.write("ir.ui.view", [id], { arch }, { context });
+ delete resource.dirty;
+ }
+
+ setDefaultFile() {
+ if (this.state.type === "xml") {
+ const views = Object.values(this.state.resources.xml);
+ let view = views.find((view) => [view.id, view.xml_id].includes(this.viewKey));
+ if (!view) {
+ view = views.find((view) => view.key === this.viewKey);
+ }
+ this.state.currentResource = view || this.state.sortedXML[0] || false;
+ } else if (this.state.type === "scss") {
+ // By default show the user_custom_rules.scss one as some people
+ // would write rules in user_custom_bootstrap_overridden.scss
+ // otherwise, not reading the comment inside explaining how that
+ // file should be used.
+ this.state.currentResource =
+ this.state.resources.scss["/website/static/src/scss/user_custom_rules.scss"];
+ } else {
+ this.state.currentResource =
+ this.state.sortedJS.map(([_, files]) => files).flat()[0] || false;
+ }
+ }
+
+ showErrorLine() {
+ const resourceId = this.state.currentResource.id;
+ const error = this.errors.find(({ resource }) => resource.id === resourceId)?.error;
+ if (error) {
+ const { line, message } = error;
+ const gutterCell = this.editorRef.el.querySelectorAll(".ace_gutter-cell")[line - 1];
+ if (gutterCell && !gutterCell.classList.contains("o_error")) {
+ gutterCell.classList.add("o_error");
+ gutterCell.setAttribute("data-tooltip", message);
+ gutterCell.setAttribute("data-tooltip-position", "left");
+ }
+ }
+ }
+
+ clearErrorLine() {
+ const allGutterCells = this.editorRef.el.querySelectorAll(".ace_gutter-cell");
+ for (const gutterCell of allGutterCells) {
+ gutterCell.classList.remove("o_error");
+ gutterCell.removeAttribute("data-tooltip");
+ gutterCell.removeAttribute("data-tooltip-position");
+ }
+ }
+
+ // -------------------------------------------------------------------------
+ // Handlers
+ // -------------------------------------------------------------------------
+
+ onEditorChange(value) {
+ const currentResource = this.state.currentResource;
+ currentResource.arch = value;
+ currentResource.dirty = true;
+ this.errors.length = 0;
+ }
+
+ /**
+ * @param {"xml"|"scss"|"js"} type
+ */
+ onFileTypeChange(type) {
+ if (type !== this.state.type) {
+ this.state.type = type;
+ this.setDefaultFile();
+ }
+ }
+
+ /**
+ * @param {"xml"|"scss"} type
+ * @param {string} filter
+ */
+ onFilterChange(type, filter) {
+ if (type === "scss") {
+ this.state.scssFilter = filter;
+ } else if (type === "xml") {
+ this.state.xmlFilter = filter;
+ }
+ this.loadResources();
+ }
+
+ onFormat() {
+ if (this.state.type === "xml") {
+ const { isValid, error } = checkXML(this.state.currentResource.arch);
+ if (isValid) {
+ this.state.currentResource.arch = formatXML(this.state.currentResource.arch);
+ } else {
+ this.errors.push({ error, resource: this.state.currentResource });
+ }
+ }
+ }
+
+ onReset() {
+ this.dialog.add(ConfirmationDialog, {
+ title: _t("Careful"),
+ body: _t(
+ "If you reset this file, all your customizations will be lost as it will be reverted to the default file."
+ ),
+ confirm: () => this.resetResource(),
+ cancel: () => {},
+ });
+ }
+
+ async onSave() {
+ this.state.saving = true;
+ try {
+ await this.saveResources();
+ } finally {
+ this.state.saving = false;
+ }
+ }
+}
diff --git a/addons/website/static/src/components/resource_editor/resource_editor.scss b/addons/website/static/src/components/resource_editor/resource_editor.scss
new file mode 100644
index 00000000000..5fb1aaadd03
--- /dev/null
+++ b/addons/website/static/src/components/resource_editor/resource_editor.scss
@@ -0,0 +1,80 @@
+$o-we-ace-color: #2F3129 !default;
+
+.o_resource_editor {
+ background: $o-we-ace-color;
+ color: white;
+ display: flex;
+ flex-flow: column nowrap;
+ opacity: 0.97;
+
+ .o_resource_editor_title {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ padding: $grid-gutter-width/4;
+
+ > .o_resource_editor_type_switcher > button::after {
+ @include o-caret-down;
+ margin-left: 4px;
+ }
+
+ > * {
+ flex: 0 0 auto;
+ margin: 0 $grid-gutter-width/4;
+
+ &.o_resource_editor_filter {
+ display: flex;
+ align-items: center;
+ font-size: 11px;
+ }
+
+ &.o_resource_editor_resource_list {
+ flex: 1 1 auto;
+ min-width: 60px;
+ }
+ }
+ }
+
+ #resource-editor-id {
+ flex: 0 0 auto;
+ padding: $grid-gutter-width/4 $grid-gutter-width/2;
+ background-color: lighten($o-we-ace-color, 10%);
+
+ .o_resource_editor_resource_info {
+ color: #ebecee;
+ }
+ }
+
+ #resource-editor {
+ @mixin ace-line-error-mixin {
+ content: "";
+ z-index: 1000;
+ display: flex;
+ background-color: $o-we-color-danger;
+ color: white;
+ font-size: 1.2em;
+ align-items: center;
+ justify-content: center;
+ cursor: help;
+ }
+
+ flex: 1 1 auto;
+ .ace_gutter {
+ .ace_gutter-cell.o_error {
+ position: relative;
+
+ &::before {
+ @include o-position-absolute(-100vh, 0, -100vh);
+ @include ace-line-error-mixin;
+ width: 2px;
+ }
+ &::after {
+ @include o-position-absolute(-100%, 0, -100%, 0);
+ @include ace-line-error-mixin;
+ font-family: FontAwesome;
+ content: "\f071";
+ }
+ }
+ }
+ }
+}
diff --git a/addons/website/static/src/components/resource_editor/resource_editor.xml b/addons/website/static/src/components/resource_editor/resource_editor.xml
new file mode 100644
index 00000000000..fcd1ca697d6
--- /dev/null
+++ b/addons/website/static/src/components/resource_editor/resource_editor.xml
@@ -0,0 +1,87 @@
+
+
+
+
+
+ menuitemcheckbox
+ props.checked ? 'true' : 'false'
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/addons/website/static/src/components/ace_warning/ace_warning.js b/addons/website/static/src/components/resource_editor/resource_editor_warning.js
similarity index 83%
rename from addons/website/static/src/components/ace_warning/ace_warning.js
rename to addons/website/static/src/components/resource_editor/resource_editor_warning.js
index dc45ffdeb0b..5b7816fd425 100644
--- a/addons/website/static/src/components/ace_warning/ace_warning.js
+++ b/addons/website/static/src/components/resource_editor/resource_editor_warning.js
@@ -6,12 +6,11 @@ import { browser } from "@web/core/browser/browser";
import { useService } from "@web/core/utils/hooks";
/**
- * Represents the warning overlay that appears when the user opens the Ace
- * editor. It provides options to hide the warning, inject code, and not show
- * the warning again.
+ * Represents the warning overlay that appears when the user opens the ResourceEditor
+ * It provides options to hide the warning, inject code, and not show the warning again.
*/
-export class AceEditorWarningOverlay extends Component {
- static template = "website.AceEditorWarningOverlay";
+export class ResourceEditorWarningOverlay extends Component {
+ static template = "website.ResourceEditorWarningOverlay";
/**
* Initializes the component by setting up the necessary services and state.
@@ -30,7 +29,7 @@ export class AceEditorWarningOverlay extends Component {
* Closes the Ace editor and updates the website context to hide it.
*/
onCloseEditor() {
- this.website.context.showAceEditor = false;
+ this.website.context.showResourceEditor = false;
}
/**
diff --git a/addons/website/static/src/components/ace_warning/ace_warning.xml b/addons/website/static/src/components/resource_editor/resource_editor_warning.xml
similarity index 96%
rename from addons/website/static/src/components/ace_warning/ace_warning.xml
rename to addons/website/static/src/components/resource_editor/resource_editor_warning.xml
index 7b050f76c20..5d278a7ea13 100644
--- a/addons/website/static/src/components/ace_warning/ace_warning.xml
+++ b/addons/website/static/src/components/resource_editor/resource_editor_warning.xml
@@ -1,7 +1,7 @@
-
+
diff --git a/addons/website/static/src/components/resource_editor/utils.js b/addons/website/static/src/components/resource_editor/utils.js
new file mode 100644
index 00000000000..891efc59d2f
--- /dev/null
+++ b/addons/website/static/src/components/resource_editor/utils.js
@@ -0,0 +1,110 @@
+/** @odoo-module */
+import { _t } from "@web/core/l10n/translation";
+
+const MAPPING = {
+ '{': '}', '}': '{',
+ '(': ')', ')': '(',
+ '[': ']', ']': '[',
+};
+const OPENINGS = ['{', '(', '['];
+const CLOSINGS = ['}', ')', ']'];
+
+/**
+ * Checks the syntax validity of some SCSS.
+*
+* @param {string} scss
+* @returns {Object} object with keys "isValid" and "error" if not valid
+*/
+export function checkSCSS(scss) {
+ const stack = [];
+ let line = 1;
+ for (let i = 0; i < scss.length; i++) {
+ if (OPENINGS.includes(scss[i])) {
+ stack.push(scss[i]);
+ } else if (CLOSINGS.includes(scss[i])) {
+ if (stack.pop() !== MAPPING[scss[i]]) {
+ return {
+ isValid: false,
+ error: {
+ line,
+ message: _t("Unexpected ") + scss[i],
+ },
+ };
+ }
+ } else if (scss[i] === '\n') {
+ line++;
+ }
+ }
+ if (stack.length > 0) {
+ return {
+ isValid: false,
+ error: {
+ line,
+ message: _t("Expected ") + MAPPING[stack.pop()],
+ },
+ };
+ }
+ return { isValid: true };
+}
+
+/**
+ * Checks the syntax validity of some XML.
+ *
+ * @param {string} xml
+ * @returns {Object} object with keys "isValid" and "error" if not valid
+ */
+export function checkXML(xml) {
+ const xmlDoc = (new window.DOMParser()).parseFromString(xml, 'text/xml');
+ const errorEls = xmlDoc.getElementsByTagName('parsererror');
+ if (errorEls.length > 0) {
+ const errorEl = errorEls[0];
+ const sourceTextEls = errorEl.querySelectorAll('sourcetext');
+ let codeEls = null;
+ if (sourceTextEls.length) {
+ codeEls = [...sourceTextEls].map(el => {
+ const codeEl = document.createElement('code');
+ codeEl.textContent = el.textContent;
+ const brEl = document.createElement('br');
+ brEl.classList.add('o_we_source_text_origin');
+ el.parentElement.insertBefore(brEl, el);
+ return codeEl;
+ });
+ for (const el of sourceTextEls) {
+ el.remove();
+ }
+ }
+ for (const el of [...errorEl.querySelectorAll(':not(code):not(pre):not(br)')]) {
+ const pEl = document.createElement('p');
+ for (const cEl of [...el.childNodes]) {
+ pEl.appendChild(cEl);
+ }
+ el.parentElement.insertBefore(pEl, el);
+ el.remove();
+ }
+ errorEl.querySelectorAll('.o_we_source_text_origin').forEach((el, i) => {
+ el.after(codeEls[i]);
+ });
+ return {
+ isValid: false,
+ error: {
+ line: parseInt(errorEl.innerHTML.match(/[Ll]ine[^\d]+(\d+)/)[1], 10),
+ message: errorEl.textContent,
+ },
+ };
+ }
+ return { isValid: true };
+}
+
+/**
+ * Formats some XML so that it has proper indentation and structure.
+ *
+ * @param {string} xml
+ * @returns {string} formatted xml
+ */
+export function formatXML(xml) {
+ // do nothing if an inline script is present to avoid breaking it
+ if (/]*)?>[^<][\s\S]*<\/script>/i.test(xml)) {
+ return xml;
+ }
+ return window.vkbeautify.xml(xml, 4);
+}
diff --git a/addons/website/static/src/services/website_custom_menus.js b/addons/website/static/src/services/website_custom_menus.js
index d4c4f4730b9..90f986cc974 100644
--- a/addons/website/static/src/services/website_custom_menus.js
+++ b/addons/website/static/src/services/website_custom_menus.js
@@ -90,7 +90,7 @@ registry.category('website_custom_menus').add('website.menu_optimize_seo', {
&& !!env.services.website.currentWebsite.metadata.canOptimizeSeo,
});
registry.category('website_custom_menus').add('website.menu_ace_editor', {
- openWidget: (services) => services.website.context.showAceEditor = true,
+ openWidget: (services) => services.website.context.showResourceEditor = true,
isDisplayed: (env) => env.services.website.currentWebsite
&& env.services.website.currentWebsite.metadata.viewXmlid
&& !env.services.ui.isSmall,
diff --git a/addons/website/static/src/services/website_service.js b/addons/website/static/src/services/website_service.js
index 50860132f0a..98942083a29 100644
--- a/addons/website/static/src/services/website_service.js
+++ b/addons/website/static/src/services/website_service.js
@@ -46,7 +46,7 @@ export const websiteService = {
const context = reactive({
showNewContentModal: false,
- showAceEditor: false,
+ showResourceEditor: false,
edition: false,
isPublicRootReady: false,
snippetsLoaded: false,
diff --git a/addons/website/static/tests/tours/html_editor.js b/addons/website/static/tests/tours/html_editor.js
index a931793175a..0a3d92a8ca4 100644
--- a/addons/website/static/tests/tours/html_editor.js
+++ b/addons/website/static/tests/tours/html_editor.js
@@ -32,30 +32,35 @@ wTourUtils.registerWebsitePreviewTour('html_editor_multiple_templates', {
content: "add something in the generic view",
trigger: 'div.ace_line .ace_xml:contains("Generic")',
run: function () {
- ace.edit('ace-view-editor').getSession().insert({row: 3, column: 1}, '