Wasting $14K Building Editors? Use Odoo 18 WYSIWYG in OWL Components

/** @odoo-module **/
import { Component, useState, markup } from "@odoo/owl";
import { Wysiwyg } from "@html_editor/wysiwyg";
import { MAIN_PLUGINS, EMBEDDED_COMPONENT_PLUGINS } from "@html_editor/plugin_sets";
import { MAIN_EMBEDDINGS } from "@html_editor/others/embedded_components/embedding_sets";
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { _t } from "@web/core/l10n/translation";

export class HtmlFieldDemo extends Component {
    setup() {
        // State management
        this.state = useState({
            content: '
Welcome to your custom dashboard!
',
            isEditing: false,
            editorKey: 0  // Force re-render trick
        });
        
        // Odoo services
        this.orm = useService("orm");
        this.notification = useService("notification");
        this.editor = null;
        
        // Editor configuration
        this.editorConfig = {
            content: this.state.content,
            Plugins: [
                ...MAIN_PLUGINS,
                ...EMBEDDED_COMPONENT_PLUGINS,
            ],
            onChange: this.onEditorChange.bind(this),
            placeholder: _t("Start typing..."),
            height: "400px",
            toolbar: true,
            embeddedComponents: true,
            resources: {
                embedded_components: [...MAIN_EMBEDDINGS],
            },
            disableVideo: false,
            disableImage: false,
            disableFile: false,
        };
    }
    
    onEditorLoad(editor) {
        this.editor = editor;
        console.log("Editor loaded");
    }
    
    onEditorChange() {
        if (this.editor) {
            this.state.content = this.editor.getContent();
        }
    }
    
    toggleEdit() {
        this.state.isEditing = !this.state.isEditing;
        if (this.state.isEditing) {
            this.state.editorKey++;  // Force editor refresh
        }
    }
    
    get content() {
        return markup(this.state.content);  // Safe HTML rendering
    }
    
    async saveContent() {
        if (!this.editor) {
            this.notification.add(_t("Editor not initialized"), { type: "warning" });
            return;
        }
        
        try {
            const content = this.editor.getContent();
            
            // Save to database (example)
            // await this.orm.call("your.model", "write", [recordId, { content }]);
            
            this.state.content = content;
            this.state.isEditing = false;
            this.notification.add(_t("Content saved!"), { type: "success" });
        } catch (error) {
            console.error("Save error:", error);
            this.notification.add(_t("Error saving"), { type: "danger" });
        }
    }
    
    cancelEdit() {
        this.state.isEditing = false;
        this.state.editorKey++;  // Reset to original content
    }
    
    get wysiwygConfig() {
        return {
            ...this.editorConfig,
            content: this.state.content,
        };
    }
}

HtmlFieldDemo.template = 'custom_dashboard.HtmlField';
HtmlFieldDemo.components = { Wysiwyg };

registry.category("actions").add("custom_dashboard.HtmlField", HtmlFieldDemo);

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="custom_dashboard.HtmlField" owl="1">
        <div class="o_dashboard_editor h-100 d-flex flex-column">
            
            <!-- Header with controls -->
            <div class="o_dashboard_header p-3 border-bottom bg-light">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="mb-0">Custom Dashboard</h3>
                    <div class="btn-group">
                        <button t-if="!state.isEditing"
                                class="btn btn-primary"
                                t-on-click="toggleEdit">
                            <i class="fa fa-edit me-2"></i>Edit
                        </button>
                        <t t-if="state.isEditing">
                            <button class="btn btn-success me-2"
                                    t-on-click="saveContent">
                                <i class="fa fa-save me-2"></i>Save
                            </button>
                            <button class="btn btn-secondary"
                                    t-on-click="cancelEdit">
                                <i class="fa fa-times me-2"></i>Cancel
                            </button>
                        </t>
                    </div>
                </div>
            </div>
            
            <!-- Content area -->
            <div class="o_dashboard_content flex-grow-1 p-3">
                
                <!-- Edit Mode: WYSIWYG Editor -->
                <div t-if="state.isEditing" class="h-100">
                    <Wysiwyg
                        config="wysiwygConfig"
                        onLoad.bind="onEditorLoad"
                        onBlur.bind="onEditorBlur"
                        class="'h-100'"
                        toolbar="true"
                        t-key="state.editorKey"
                    />
                </div>
                
                <!-- View Mode: Read-only content -->
                <div t-else="" class="o_dashboard_view">
                    <div class="card">
                        <div class="card-body">
                            <t t-out="content"/>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </t>
</templates>

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <record id="action_html_dashboard" model="ir.actions.client">
        <field name="name">HTML Dashboard</field>
        <field name="tag">custom_dashboard.HtmlField</field>
    </record>
    
    <menuitem id="menu_html_dashboard"
              name="HTML Dashboard"
              action="action_html_dashboard"
              sequence="10"/>
</odoo>

{
    'name': 'Custom HTML Dashboard',
    'version': '18.0.1.0.0',
    'category': 'Tools',
    'author': 'Your Company',
    'depends': ['base', 'web'],
    'data': [
        'views/client_action.xml',
    ],
    'assets': {
        'web.assets_backend': [
            'custom_dashboard/static/src/**/*',
        ],
    },
    'application': True,
    'installable': True,
    'license': 'LGPL-3',
}

<!-- Show editor when editing -->
<div t-if="state.isEditing">
    <Wysiwyg ... />
</div>

<!-- Show read-only content when NOT editing -->
<div t-else="">
    <t t-out="content"/>
</div>

# models/dashboard_content.py
from odoo import models, fields, api

class DashboardContent(models.Model):
    _name = 'dashboard.content'
    _description = 'Dashboard HTML Content'
    
    name = fields.Char('Title', required=True)
    content = fields.Html('HTML Content')
    user_id = fields.Many2one('res.users', 'Owner', default=lambda self: self.env.user)

async setup() {
    super.setup();
    
    // Load content from database
    const recordId = 1;  // Or get from props
    const record = await this.orm.call(
        "dashboard.content",
        "read",
        [recordId, ['content']]
    );
    
    this.state.content = record[0].content || '
Empty dashboard
';
    this.recordId = recordId;
}

async saveContent() {
    const content = this.editor.getContent();
    
    await this.orm.call(
        "dashboard.content",
        "write",
        [this.recordId, { content: content }]
    );
    
    this.state.content = content;
    this.state.isEditing = false;
    this.notification.add("Saved!", { type: "success" });
}