Attribute down and upcast for data-width (#107)

* Attribute down and upcast for data-width * Set resize media width * Convert the deep imports into proper imports * Remove an incorrect return * Clean up the imports --------- Co-authored-by: Alexander Ebert <[email protected]>
WoltLab · Dec 13, 2023 · aa2a6c9 · aa2a6c9
1 parent 766a24f
commit aa2a6c9
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 21 deletions.
diff --git a/plugins/ckeditor5-woltlab-attachment/src/woltlabattachment.ts b/plugins/ckeditor5-woltlab-attachment/src/woltlabattachment.ts
@@ -188,6 +188,7 @@ export class WoltlabAttachment extends Plugin {
     let attributes: Record<string, unknown> = {
       attachmentId,
       src: resolveAttachUrl(attachmentId, isThumbnail),
+      "data-width": width,
       width,
     };
 

diff --git a/plugins/ckeditor5-woltlab-image/src/woltlabimage.ts b/plugins/ckeditor5-woltlab-image/src/woltlabimage.ts
@@ -12,7 +12,15 @@
  */
 
 import { Plugin } from "@ckeditor/ckeditor5-core";
-import type { DowncastInsertEvent, Element } from "@ckeditor/ckeditor5-engine";
+import type {
+  DocumentSelection,
+  DowncastAttributeEvent,
+  DowncastConversionApi,
+  DowncastInsertEvent,
+  Element,
+  Item,
+  Selection,
+} from "@ckeditor/ckeditor5-engine";
 
 export class WoltlabImage extends Plugin {
   static get pluginName() {
@@ -23,29 +31,32 @@ export class WoltlabImage extends Plugin {
     const { conversion } = this.editor;
 
     const imageTypes = ["imageBlock", "imageInline"] as const;
+
     for (const imageType of imageTypes) {
+      conversion.for("dataDowncast").attributeToAttribute({
+        model: {
+          name: imageType,
+          key: "data-width",
+        },
+        view: "data-width",
+      });
+      conversion.for("upcast").attributeToAttribute({
+        view: {
+          name: imageType === "imageBlock" ? "figure" : "img",
+          key: "data-width",
+        },
+        model: "data-width",
+      });
+
       conversion.for("dataDowncast").add((dispatcher) => {
-        dispatcher.on<DowncastInsertEvent>(
-          `insert:${imageType}`,
+        dispatcher.on<DowncastAttributeEvent>(
+          `attribute:resizedWidth:${imageType}`,
           (_evt, data, conversionApi) => {
-            const { item } = data;
-            if (!item.is("element")) {
-              return;
-            }
-
-            const width = item.getAttribute("width");
-            if (typeof width !== "string") {
-              return;
-            }
-
-            const { mapper, writer } = conversionApi;
-
-            const viewElement = mapper.toViewElement(item);
-            if (viewElement === undefined) {
-              return;
-            }
-
-            writer.setAttribute("data-width", width, viewElement);
+            this.#setResizeWidth(
+              data.item,
+              data.attributeNewValue,
+              conversionApi,
+            );
           },
           { priority: "lowest" },
         );
@@ -88,9 +99,43 @@ export class WoltlabImage extends Plugin {
             }
           },
         );
+
+        dispatcher.on<DowncastAttributeEvent>(
+          `attribute:resizedWidth:${imageType}`,
+          (_evt, data, conversionApi) => {
+            this.#setResizeWidth(
+              data.item,
+              data.attributeNewValue,
+              conversionApi,
+            );
+          },
+          { priority: "lowest" },
+        );
       });
     }
   }
+
+  #setResizeWidth(
+    item: Item | Selection | DocumentSelection,
+    width: unknown,
+    conversionApi: DowncastConversionApi,
+  ) {
+    if (!item.is("element")) {
+      return;
+    }
+    if (typeof width !== "string") {
+      return;
+    }
+
+    const { mapper, writer } = conversionApi;
+
+    const viewElement = mapper.toViewElement(item);
+    if (viewElement === undefined) {
+      return;
+    }
+
+    writer.setAttribute("data-width", width, viewElement);
+  }
 }
 
 export default WoltlabImage;
diff --git a/plugins/ckeditor5-woltlab-media/src/woltlabmedia.ts b/plugins/ckeditor5-woltlab-media/src/woltlabmedia.ts
@@ -125,13 +125,18 @@ export class WoltlabMedia extends Plugin {
             ? (eventData.attributes[2] as MediaAlignment)
             : "none";
 
+          const imageSize = eventData.attributes[3]
+            ? `${eventData.attributes[3].toString()}px`
+            : "auto";
+
           if (
             this.#upcastMedia(
               eventData,
               options.resolveMediaUrl,
               mediaId,
               mediaSize,
               mediaAlignment,
+              imageSize,
             )
           ) {
             eventInfo.stop();
@@ -147,6 +152,7 @@ export class WoltlabMedia extends Plugin {
     mediaId: number,
     mediaSize: string,
     mediaAlignment: MediaAlignment,
+    imageSize: string,
   ): boolean {
     const { conversionApi, data } = eventData;
     const { consumable, writer } = conversionApi;
@@ -160,6 +166,7 @@ export class WoltlabMedia extends Plugin {
       classList: "woltlabSuiteMedia",
       mediaId,
       mediaSize,
+      resizedWidth: imageSize,
     };
     if (mediaAlignment === "left") {
       attributes.imageStyle = "sideLeft";