Report image attachments to the editor

See https://www.woltlab.com/community/thread/300722-broken-image-icon-when-editing-a-post-with-a-video-file-attached/

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Attachment.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Attachment.ts
index d63ca1c5309ca0723e99b68af04be443ed38ff33..12add01a88480e371fbda77a8d3de094f72d9c31 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Ckeditor/Attachment.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Attachment.ts
@@ -75,14 +75,33 @@ function setupRemoveAttachment(ckeditor: CKEditor): void {
   });
 }
 
+function getInlineImageIds(element: HTMLElement): number[] {
+  const messageTabMenu = element.nextElementSibling;
+  if (!messageTabMenu || !messageTabMenu.classList.contains("messageTabMenu")) {
+    return [];
+  }
+
+  const attachmentList = messageTabMenu.querySelector<HTMLElement>(".formAttachmentContent > .formAttachmentList");
+  if (!attachmentList) {
+    return [];
+  }
+
+  return Array.from(attachmentList.querySelectorAll<HTMLElement>('.formAttachmentListItem[data-is-image="1"]')).map(
+    (listItem) => parseInt(listItem.dataset.objectId!),
+  );
+}
+
 export function setup(element: HTMLElement): void {
   listenToCkeditor(element).setupConfiguration(({ configuration, features }) => {
     if (!features.attachment) {
       return;
     }
 
+    const inlineImageIds = getInlineImageIds(element);
+
     // TODO: The typings do not include our custom plugins yet.
     (configuration as any).woltlabAttachment = {
+      inlineImageIds,
       resolveAttachmentUrl(attachmentId: number, isThumbnail: boolean) {
         let thumbnail = "";
         if (isThumbnail) {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Attachment.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Attachment.js
index 65baf634ce56ea801636a4e8e61eac0292b51694..689c48165c927a6f0310884ed42b65c6c9a85e17 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Attachment.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Attachment.js
@@ -41,13 +41,26 @@ define(["require", "exports", "./Event"], function (require, exports, Event_1) {
             ckeditor.removeAll("imageInline", { attachmentId });
         });
     }
+    function getInlineImageIds(element) {
+        const messageTabMenu = element.nextElementSibling;
+        if (!messageTabMenu || !messageTabMenu.classList.contains("messageTabMenu")) {
+            return [];
+        }
+        const attachmentList = messageTabMenu.querySelector(".formAttachmentContent > .formAttachmentList");
+        if (!attachmentList) {
+            return [];
+        }
+        return Array.from(attachmentList.querySelectorAll('.formAttachmentListItem[data-is-image="1"]')).map((listItem) => parseInt(listItem.dataset.objectId));
+    }
     function setup(element) {
         (0, Event_1.listenToCkeditor)(element).setupConfiguration(({ configuration, features }) => {
             if (!features.attachment) {
                 return;
             }
+            const inlineImageIds = getInlineImageIds(element);
             // TODO: The typings do not include our custom plugins yet.
             configuration.woltlabAttachment = {
+                inlineImageIds,
                 resolveAttachmentUrl(attachmentId, isThumbnail) {
                     let thumbnail = "";
                     if (isThumbnail) {