EmbedCodeOption

addons/html_builder/static/src/plugins/embed_code_option.js

@@ -0,0 +1,79 @@
+import { Plugin } from "@html_editor/plugin";
+import { EmbedCodeOptionDialog } from "@html_builder/plugins/embed_code_option_dialog";
+import { withSequence } from "@html_editor/utils/resource";
+import { _t } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { cloneContentEls } from "@website/js/utils";
+
+class EmbedCodeOptionPlugin extends Plugin {
+    static id = "EmbedCodeOption";
+
+    resources = {
+        builder_options: [
+            withSequence(5, {
+                template: "html_builder.EmbedCodeOption",
+                selector: ".s_embed_code",
+            }),
+        ],
+        builder_actions: this.getActions(),
+        clean_for_save_handlers: this.cleanForSave.bind(this),
+    };
+
+    getTemplateEl(editingElement) {
+        return editingElement.querySelector("template.s_embed_code_saved");
+    }
+
+    getActions() {
+        return {
+            editCode: {
+                load: async ({ editingElement }) => {
+                    let newContent;
+                    await new Promise((resolve) => {
+                        this.services.dialog.add(
+                            EmbedCodeOptionDialog,
+                            {
+                                title: _t("Edit embedded code"),
+                                value: this.getTemplateEl(editingElement).innerHTML.trim(),
+                                mode: "xml",
+                                confirm: (newValue) => {
+                                    newContent = newValue;
+                                },
+                            },
+                            { onClose: resolve }
+                        );
+                    });
+                    return newContent;
+                },
+                apply: ({ editingElement, loadResult: content }) => {
+                    if (!content) {
+                        return;
+                    }
+                    // Remove scripts tags from the DOM as we don't want them to
+                    // interfere during edition, but keeps them in a
+                    // `<template>` that will be saved to the database.
+                    this.getTemplateEl(editingElement).content.replaceChildren(
+                        cloneContentEls(content, true)
+                    );
+                    editingElement
+                        .querySelector(".s_embed_code_embedded")
+                        .replaceChildren(cloneContentEls(content));
+                },
+            },
+        };
+    }
+
+    cleanForSave({ root }) {
+        // Saving Embed Code snippets with <script> in the database, as these
+        // elements are removed in edit mode.
+        for (const embedCodeEl of root.querySelectorAll(".s_embed_code")) {
+            const embedTemplateEl = embedCodeEl.querySelector(".s_embed_code_saved");
+            if (embedTemplateEl) {
+                embedCodeEl
+                    .querySelector(".s_embed_code_embedded")
+                    .replaceChildren(cloneContentEls(embedTemplateEl.content, true));
+            }
+        }
+    }
+}
+
+registry.category("website-plugins").add(EmbedCodeOptionPlugin.id, EmbedCodeOptionPlugin);

addons/html_builder/static/src/plugins/embed_code_option.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+<t t-name="html_builder.EmbedCodeOption">
+    <BuilderRow label.translate="Code">
+        <BuilderButton action="'editCode'" preview="false"
+                className="'o_we_edit_code o_we_no_toggle o_we_bg_success active'"
+                title.translate="Edit embedded code">
+            Edit
+        </BuilderButton>
+    </BuilderRow>
+    <BuilderRow label.translate="Alignment">
+        <BuilderButtonGroup>
+            <BuilderButton className="'fa fa-fw fa-align-left'" title.translate="Left" classAction="'text-start'"/>
+            <BuilderButton className="'fa fa-fw fa-align-center'" title.translate="Center" classAction="'text-center'"/>
+            <BuilderButton className="'fa fa-fw fa-align-right'" title.translate="Right" classAction="'text-end'"/>
+        </BuilderButtonGroup>
+    </BuilderRow>
+</t>
+</templates>

addons/html_builder/static/src/plugins/embed_code_option_dialog.js

@@ -0,0 +1,32 @@
+import { Dialog } from "@web/core/dialog/dialog";
+import { CodeEditor } from "@web/core/code_editor/code_editor";
+import { useService } from "@web/core/utils/hooks";
+import { EditHeadBodyDialog } from "@website/components/edit_head_body_dialog/edit_head_body_dialog";
+import { Component, useState } from "@odoo/owl";
+
+export class EmbedCodeOptionDialog extends Component {
+    static template = "html_builder.EmbedCodeOptionDialog";
+    static components = { Dialog, CodeEditor };
+    static props = {
+        title: String,
+        value: String,
+        mode: String,
+        confirm: Function,
+        close: Function,
+    };
+    setup() {
+        this.dialog = useService("dialog");
+        this.state = useState({ value: this.props.value });
+    }
+    onCodeChange(newValue) {
+        this.state.value = newValue;
+    }
+    onConfirm() {
+        this.props.confirm(this.state.value);
+        this.props.close();
+    }
+    onInjectHeadOrBody() {
+        this.dialog.add(EditHeadBodyDialog);
+        this.props.close();
+    }
+}

addons/html_builder/static/src/plugins/embed_code_option_dialog.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-name="html_builder.EmbedCodeOptionDialog">
+        <Dialog title="props.title">
+            <p class="h5">Do not copy/paste code you do not understand, this could put your data at risk.</p>
+            <p>
+                <button class="btn btn-link ps-0" t-on-click="onInjectHeadOrBody">
+                    If you need to add analytics or marketing tags, inject code in your &lt;head&gt; or &lt;body&gt; instead.
+                </button>
+            </p>
+            <CodeEditor mode="props.mode"
+                        class="'o_website_code_editor_field'"
+                        theme="'monokai'"
+                        onChange.bind="onCodeChange"
+                        value="this.state.value"/>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="onConfirm">Save</button>
+                <button class="btn" t-on-click="this.props.close">Discard</button>
+            </t>
+        </Dialog>
+    </t>
+</templates>