[FIX] web_editor: embed video on paste URL

Before this commit, pasting a URL as plain text followed by picking
"Embed Youtube Video" in the command bar failed to embed the video,
inserting the following text instead: "[object Promise]".

This happened because [1], which is the result of a forward-port, failed
to `await` the call to getYoutubeVideoElement, which is an async
function since version 15.2.

[1]: https://github.com/odoo/odoo/commit/c2f0519fec40dcf529218f39829e0a09c0f7af69

task-3611566

closes odoo/odoo#146653

X-original-commit: 4891359210e2f921dbfb6d7c870ec5cf1b60d3f5
Signed-off-by: Nicolas Bayet (nby) <nby@odoo.com>

addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js

@@ -4786,7 +4786,7 @@ export class OdooEditor extends EventTarget {
             if (splitAroundUrl.length === 3 && !splitAroundUrl[0] && !splitAroundUrl[2]) {
                 // Pasted content is a single URL.
                 const url = /^https?:\/\//i.test(text) ? text : 'http://' + text;
-                const youtubeUrl = this.options.allowCommandVideo &&YOUTUBE_URL_GET_VIDEO_ID.exec(url);
+                const youtubeUrl = this.options.allowCommandVideo && YOUTUBE_URL_GET_VIDEO_ID.exec(url);
                 const urlFileExtention = url.split('.').pop();
                 const isImageUrl = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(urlFileExtention.toLowerCase());
                 // A url cannot be transformed inside an existing link.
@@ -4844,11 +4844,11 @@ export class OdooEditor extends EventTarget {
                             name: this.options._t('Embed Youtube Video'),
                             description: this.options._t('Embed the youtube video in the document.'),
                             fontawesome: 'fa-youtube-play',
-                            callback: () => {
+                            callback: async () => {
                                 revertTextInsertion();
                                 let videoElement;
                                 if (this.options.getYoutubeVideoElement) {
-                                    videoElement = this.options.getYoutubeVideoElement(youtubeUrl[0]);
+                                    videoElement = await this.options.getYoutubeVideoElement(youtubeUrl[0]);
                                 } else {
                                     videoElement = document.createElement('iframe');
                                     videoElement.setAttribute('width', '560');

addons/web_editor/static/tests/html_field_tests.js

@@ -841,4 +841,59 @@ QUnit.module("WebEditor.HtmlField", ({ beforeEach }) => {
         assert.equal(editor.editable.children[0].children[1].innerHTML.trim(), '<div class="oe_unremovable"><p class="oe_unremovable">a</p></div>');
         assert.equal(editor.editable.children[0].children[2].innerHTML.trim(), '<div class="oe_unremovable"><p class="oe_unremovable">a</p></div>');
     });
+
+    QUnit.module('Paste');
+
+    QUnit.test("Embed video by pasting video URL", async (assert) => {
+        assert.expect(4);
+
+        serverData.models.partner.records.push({
+            id: 1,
+            txt: "<p><br></p>",
+        });
+
+        const mockRPC = async function (route, args) {
+            if (route === '/web_editor/video_url/data') {
+                return Promise.resolve({
+                    platform: "youtube",
+                    embed_url: "//www.youtube.com/embed/qxb74CMR748?rel=0&autoplay=0",
+                });
+            }
+        };
+
+        await makeView({
+            type: "form",
+            resId: 1,
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="txt" widget="html" options="{'allowCommandVideo': true}"/>
+                </form>`,
+            mockRPC: mockRPC,
+        });
+
+        const editable = document.querySelector(".odoo-editor-editable");
+        const p = editable.firstElementChild;
+        Wysiwyg.setRange(p);
+
+        // Paste a video URL.
+        const clipboardData = new DataTransfer();
+        clipboardData.setData('text/plain', 'https://www.youtube.com/watch?v=qxb74CMR748');
+        p.dispatchEvent(new ClipboardEvent('paste', { clipboardData, bubbles: true }));
+        assert.strictEqual(p.outerHTML, '<p>https://www.youtube.com/watch?v=qxb74CMR748<br></p>',
+            "The URL should be inserted as text");
+        assert.isVisible($('.oe-powerbox-wrapper:contains("Embed Youtube Video")'),
+            "The powerbox should be opened");
+
+        // Press Enter to select first option in the powerbox ("Embed Youtube Video").
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+        await nextTick();
+        assert.strictEqual(p.outerHTML, '<p></p>', "URL insertion should be reverted");
+        assert.containsOnce(
+            editable,
+            'div.media_iframe_video iframe[data-src="//www.youtube.com/embed/qxb74CMR748?rel=0&autoplay=0"]',
+            "The video should be embedded as an iframe"
+        );
+    });
 });