[FIX] web_editor: properly update the image options on replace image

Prior to this fix, replacing a jpeg image with an svg illustration
didn't properly update its mimetype in its dataset. As an effect, the
jpeg image options still appeared, that were irrelevant for an svg.

This was caused by a premature update of the image in Jabberwock's vdom,
before the mimetype was updated, and by the fact that the current image
was not being passed to the constructor of the media dialog, causing it
to create the image from scratch on save instead of replacing the src
attribute of the current image like it did before introducing
Jabberwock.

closes odoo/odoo#62082

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Antoine Guenet
2020-11-20 12:25:45 +00:00
parent bf242ba1dc
commit 4cedbe173c
3 changed files with 15 additions and 7 deletions
@@ -2214,7 +2214,7 @@ var SnippetsMenu = Widget.extend({
}).parent().addClass('o_default_snippet_text');
},
/**
* Changes the content of the left panel and selects a tab.
* Changes the content of the right panel and selects a tab.
*
* @private
* @param {htmlString | Element | Text | Array | jQuery} [content]
@@ -3408,7 +3408,6 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
await this._rerenderXML();
this._getImg().dataset.resizeWidth = this.optimizedWidth;
await this._applyOptions();
await this.updateUI();
},
/**
* Returns the image that is currently being modified.
@@ -3491,6 +3490,8 @@ registry.ImageOptimize = ImageHandlerOption.extend({
async _onImageChanged(ev) {
this.trigger_up('snippet_edition_request', {exec: async () => {
await this._autoOptimizeImage();
await this.updateChangesInWysiwyg();
await this.updateUI();
this.trigger_up('cover_update');
}});
},
@@ -715,10 +715,12 @@ var Wysiwyg = Widget.extend({
const node = nodes[0];
let $baseNode;
if (nodes.length === 1){
if (nodes.length === 1) {
if (node instanceof JWEditorLib.FontAwesomeNode || node instanceof JWEditorLib.OdooVideoNode) {
const $originalDomNode = this.editorHelpers.getDomNodes(node).filter(dom => dom.nodeType === Node.ELEMENT_NODE);
$baseNode = $($originalDomNode).clone();
const originalDomNode = this.editorHelpers.getDomNodes(node).filter(dom => dom.nodeType === Node.ELEMENT_NODE);
$baseNode = $(originalDomNode).clone();
} else if (node instanceof JWEditorLib.ImageNode) {
$baseNode = $(this.editorHelpers.getDomNodes(node).filter(dom => dom.nodeType === Node.ELEMENT_NODE));
}
if (node instanceof JWEditorLib.FontAwesomeNode) {
params.htmlClass = [...$baseNode[0].classList].filter((className) => {
@@ -733,8 +735,13 @@ var Wysiwyg = Widget.extend({
let mediaDialog = new weWidgets.MediaDialog(this, params, $baseNode);
mediaDialog.open();
mediaDialog.on('save', this, async (element) => {
if (params.htmlClass) element.className += " " + params.htmlClass;
return this.editor.execCommand('insertMedia', { element: element });
// If we're not _replacing_ a media (done by media dialog), insert it.
if (!$baseNode || $baseNode.length !== 1 || !$(element).is($baseNode[0].nodeName)) {
if (params.htmlClass) {
element.className += " " + params.htmlClass;
}
await this.editor.execCommand('insertMedia', { element: element });
}
});
},
async saveContent(context = this.editor) {