Lexical: Fixed media resize handling

[bookstack] / resources / js / wysiwyg / lexical / rich-text / LexicalMediaNode.ts

diff --git a/resources/js/wysiwyg/lexical/rich-text/LexicalMediaNode.ts b/resources/js/wysiwyg/lexical/rich-text/LexicalMediaNode.ts
index 1dd159f510ddeec24902e52441fe7572aa18c30d..6e9c24717c3e273a68de3fcce5e2ced0a5084868 100644 (file)
--- a/resources/js/wysiwyg/lexical/rich-text/LexicalMediaNode.ts
+++ b/resources/js/wysiwyg/lexical/rich-text/LexicalMediaNode.ts
@@ -8,7 +8,7 @@ import {
 } from 'lexical';
 import type {EditorConfig} from "lexical/LexicalEditor";
 
-import {el, setOrRemoveAttribute, sizeToPixels} from "../../utils/dom";
+import {el, setOrRemoveAttribute, sizeToPixels, styleMapToStyleString, styleStringToStyleMap} from "../../utils/dom";
 import {
     CommonBlockAlignment, deserializeCommonBlockNode,
     setCommonBlockPropsFromElement,
@@ -46,6 +46,19 @@ function filterAttributes(attributes: Record<string, string>): Record<string, st
     return filtered;
 }
 
+function removeStyleFromAttributes(attributes: Record<string, string>, styleName: string): Record<string, string> {
+    const attrCopy = Object.assign({}, attributes);
+    if (!attributes.style) {
+        return attrCopy;
+    }
+
+    const map = styleStringToStyleMap(attributes.style);
+    map.delete(styleName);
+
+    attrCopy.style = styleMapToStyleString(map);
+    return attrCopy;
+}
+
 function domElementToNode(tag: MediaNodeTag, element: HTMLElement): MediaNode {
     const node = $createMediaNode(tag);
 
@@ -118,7 +131,7 @@ export class MediaNode extends ElementNode {
 
     getAttributes(): Record<string, string> {
         const self = this.getLatest();
-        return self.__attributes;
+        return Object.assign({}, self.__attributes);
     }
 
     setSources(sources: MediaNodeSource[]) {
@@ -132,7 +145,7 @@ export class MediaNode extends ElementNode {
     }
 
     setSrc(src: string): void {
-        const attrs = Object.assign({}, this.getAttributes());
+        const attrs = this.getAttributes();
         if (this.__tag ==='object') {
             attrs.data = src;
         } else {
@@ -142,11 +155,13 @@ export class MediaNode extends ElementNode {
     }
 
     setWidthAndHeight(width: string, height: string): void {
-        const attrs = Object.assign(
-            {},
+        let attrs: Record<string, string> = Object.assign(
             this.getAttributes(),
             {width, height},
         );
+
+        attrs = removeStyleFromAttributes(attrs, 'width');
+        attrs = removeStyleFromAttributes(attrs, 'height');
         this.setAttributes(attrs);
     }
 
@@ -185,8 +200,8 @@ export class MediaNode extends ElementNode {
             return;
         }
 
-        const attrs = Object.assign({}, this.getAttributes(), {height});
-        this.setAttributes(attrs);
+        const attrs = Object.assign(this.getAttributes(), {height});
+        this.setAttributes(removeStyleFromAttributes(attrs, 'height'));
     }
 
     getHeight(): number {
@@ -195,8 +210,9 @@ export class MediaNode extends ElementNode {
     }
 
     setWidth(width: number): void {
-        const attrs = Object.assign({}, this.getAttributes(), {width});
-        this.setAttributes(attrs);
+        const existingAttrs = this.getAttributes();
+        const attrs: Record<string, string> = Object.assign(existingAttrs, {width});
+        this.setAttributes(removeStyleFromAttributes(attrs, 'width'));
     }
 
     getWidth(): number {