Hello fellow Odoo users,
I wrote a snippet for my website that highlights code, but sometimes whenever I try to paste some code inside my snippet that needs highlighting it adds https://
and a trailing /
to some parts of the pasted content. I reckon this is due to the standard Odoo behaviour for a paste event. For this reason, I want to overwrite the default paste event with that of my own so that this no longer happens.
My template looks like this:
<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
<template id="website_snippets_s_code_highlight" name="Code Highlight">
<section class="s_code_highlight">
<div class="container py-2">
<pre><code class="language-python" data-prismjs-copy="copy" contenteditable="true">def test():
pass</code></pre>
</div>
</section>
</template>
</odoo>
My snippet javascript file (i.e., 000.js):
odoo.define('website_snippets.s_code_highlight', function (require) {
'use strict';
const publicWidget = require('web.public.widget');
const CodeHighlightWidget = publicWidget.Widget.extend({
selector: '.s_code_highlight',
events: {
'paste pre': '_onPaste',
'paste code': '_onPaste',
},
jsLibs: [
'/website_snippets/static/src/lib/prism/prism.js',
],
start: function () {
// other parts of my code
this._render();
Prism.highlightAll();
return this._super.apply(this, arguments);
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
_render: function () {
// where the magic happens
},
/**
* @private
*/
_onPaste: function (ev) {
ev.preventDefault();
console.log("Paste event triggered on", ev.target.tagName);
},
})
publicWidget.registry.code_highlight = CodeHighlightWidget;
return CodeHighlightWidget;
})
The snippet works fine, except for the pasting issue. My paste event handler also works on the website, but not inside the website editor. How can I capture the paste event inside the website editor and overwrite the default event handler?
Many thanks for your help!