Add an indicator to attachments that have been inserted (#6577)

* Add an indicator to attachments that have been inserted

See https://www.woltlab.com/community/thread/307691/

* Remove the check for the indicator

This was a left-over from an earlier approach.

Author: dtdesign

com.woltlab.wcf/templates/shared_messageFormAttachments.tpl

@@ -19,6 +19,7 @@
 
 	<script data-relocate="true">
 		{jsphrase name='wcf.attachment.insert'}
+		{jsphrase name='wcf.attachment.inserted'}
 		{jsphrase name='wcf.attachment.insertFull'}
 		{jsphrase name='wcf.attachment.moreOptions'}
 

ts/WoltLabSuite/Core/Component/Attachment/Entry.ts

@@ -12,7 +12,7 @@ import {
   updateFileInformation,
 } from "WoltLabSuite/Core/Component/File/Helper";
 
-type FileProcessorData = {
+export type FileProcessorData = {
   attachmentID: number;
   messageObjectID: number | null;
 };

ts/WoltLabSuite/Core/Component/Attachment/List.ts

@@ -1,11 +1,13 @@
 import WoltlabCoreFileElement from "../File/woltlab-core-file";
 import { CkeditorDropEvent } from "../File/Upload";
-import { createAttachmentFromFile } from "./Entry";
+import { createAttachmentFromFile, FileProcessorData } from "./Entry";
 import { listenToCkeditor } from "../Ckeditor/Event";
 import { getTabMenu } from "../Message/MessageTabMenu";
 import Sortable from "sortablejs";
 import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
 import { postObject } from "WoltLabSuite/Core/Api/PostObject";
+import { debounce } from "WoltLabSuite/Core/Core";
+import { getCkeditor } from "../Ckeditor";
 
 function fileToAttachment(fileList: HTMLElement, file: WoltlabCoreFileElement, editor: HTMLElement): void {
   fileList.append(createAttachmentFromFile(file, editor));
@@ -146,4 +148,51 @@ export function setup(editorId: string): void {
     childList: true,
     subtree: true,
   });
+
+  listenToCkeditor(editor)
+    .changeData(
+      debounce(() => {
+        observeInsertedAttachments(editor, files);
+      }, 500),
+    )
+    .ready(() => {
+      observeInsertedAttachments(editor, files);
+    });
+}
+
+function observeInsertedAttachments(element: HTMLElement, files: HTMLCollectionOf<WoltlabCoreFileElement>): void {
+  const editor = getCkeditor(element);
+  if (editor === undefined) {
+    throw new Error(`Could not find the CKEditor for element '${element.id}'.`);
+  }
+
+  const embeddedAttachments: Set<number> = new Set();
+  editor.element.querySelectorAll(".woltlabAttachment[data-attachment-id]").forEach((img: HTMLImageElement) => {
+    const attachmentId = parseInt(img.dataset.attachmentId!);
+    embeddedAttachments.add(attachmentId);
+  });
+
+  const bbcodeMatches = editor.element.innerText.matchAll(/\[attach=('\d+'|"\d+"|\d+)(?:,[^]]+?)?\]\[\/attach\]/g);
+  for (const match of bbcodeMatches) {
+    const attachmentId = parseInt(match[1]);
+    embeddedAttachments.add(attachmentId);
+  }
+
+  for (const file of files) {
+    if (file.isFailedUpload()) {
+      continue;
+    }
+
+    const wrapper = file.closest(".fileList__item");
+    if (wrapper === null) {
+      continue;
+    }
+
+    const { attachmentID } = file.data as FileProcessorData;
+    if (embeddedAttachments.has(attachmentID)) {
+      wrapper.classList.add("fileList__item--inserted");
+    } else {
+      wrapper.classList.remove("fileList__item--inserted");
+    }
+  }
 }

ts/WoltLabSuite/Core/Component/File/Helper.ts

@@ -97,11 +97,19 @@ export function insertFileInformation(container: HTMLElement, file: WoltlabCoreF
   filename.classList.add("fileList__item__filename");
   filename.textContent = file.filename || file.dataset.filename!;
 
+  const indicatorIcon = document.createElement("fa-icon");
+  indicatorIcon.setIcon("circle-check");
+  const fileIndicator = document.createElement("div");
+  fileIndicator.classList.add("fileList__item__indicator", "green", "jsTooltip");
+  fileIndicator.setAttribute("aria-hidden", "true");
+  fileIndicator.title = getPhrase("wcf.attachment.inserted");
+  fileIndicator.append(indicatorIcon);
+
   const fileSize = document.createElement("div");
   fileSize.classList.add("fileList__item__fileSize");
   fileSize.textContent = formatFilesize(file.fileSize || parseInt(file.dataset.fileSize!));
 
-  container.append(fileWrapper, filename, fileSize);
+  container.append(fileWrapper, filename, fileIndicator, fileSize);
 }
 
 export function updateFileInformation(container: HTMLElement, file: WoltlabCoreFileElement): void {

wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js

@@ -23,13 +23,16 @@
 	box-shadow: var(--wcfBoxShadowCard);
 	display: grid;
 	grid-template-areas:
-		"file filename"
-		"file fileSize"
-		"file buttons"
-		"file error";
-	grid-template-columns: 80px auto;
+		"file filename  indicator"
+		"file fileSize 	fileSize"
+		"file buttons 	buttons"
+		"file error 	error";
+	grid-template-columns: 80px auto 0;
 	padding: 10px;
 }
+.fileList__item--inserted {
+	grid-template-columns: 80px auto 20px;
+}
 
 .fileList__item--error {
 	border-color: var(--wcfStatusErrorBorder);
@@ -58,7 +61,18 @@
 	margin-right: 10px;
 }
 
+.fileList__item__indicator {
+	grid-area: indicator;
+	margin-left: 5px;
+	visibility: hidden;
+}
+
+.fileList__item--inserted .fileList__item__indicator {
+	visibility: visible;
+}
+
 .fileList__item__filename {
+	align-self: center;
 	font-size: 12px;
 	grid-area: filename;
 	overflow: hidden;

wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/Helper.js

@@ -3369,6 +3369,7 @@ freigeschaltet. {if LANGUAGE_USE_INFORMAL_VARIANT}Du kannst{else}Sie können{/if
 Maximale Dateigröße: {@$attachmentHandler->getMaxSize()|filesize}<br>
 Erlaubte Dateiendungen: {', '|implode:$attachmentHandler->getFormattedAllowedExtensions()}]]></item>
 		<item name="wcf.attachment.insert"><![CDATA[In Text einfügen]]></item>
+		<item name="wcf.attachment.inserted"><![CDATA[Eingefügt]]></item>
 		<item name="wcf.attachment.insertAll"><![CDATA[Alle einfügen]]></item>
 		<item name="wcf.attachment.insertFull"><![CDATA[Original einfügen]]></item>
 		<item name="wcf.attachment.insertThumbnail"><![CDATA[Vorschau einfügen]]></item>

wcfsetup/install/files/style/ui/fileList.scss

@@ -3292,6 +3292,7 @@ Your account on {@PAGE_TITLE|phrase} [URL:{link isEmail=true}{/link}] has been a
 Maximum file size: {@$attachmentHandler->getMaxSize()|filesize}<br>
 Allowed extensions: {', '|implode:$attachmentHandler->getFormattedAllowedExtensions()}]]></item>
 		<item name="wcf.attachment.insert"><![CDATA[Insert into message]]></item>
+		<item name="wcf.attachment.inserted"><![CDATA[Inserted]]></item>
 		<item name="wcf.attachment.insertAll"><![CDATA[Insert All]]></item>
 		<item name="wcf.attachment.insertFull"><![CDATA[Full Image]]></item>
 		<item name="wcf.attachment.insertThumbnail"><![CDATA[Thumbnail]]></item>