[stable24] Improve image attachment management

cypress/integration/images.spec.js

@@ -82,7 +82,7 @@ const checkImage = (documentId, imageName, imageId, index) => {
 	cy.log('Check the image is visible and well formed', { documentId, imageName, imageId, index, encodedName })
 	return new Cypress.Promise((resolve, reject) => {
 		cy.get('#editor [data-component="image-view"]')
-			.filter('[data-src="text://image?imageFileName=' + encodedName + '"]')
+			.filter('[data-src=".attachments.' + documentId + '/' + encodedName + '"]')
 			.find('.image__view') // wait for load finish
 			.within(($el) => {
 				// keep track that we have created this image in the attachment dir

lib/Service/ImageService.php

@@ -156,6 +156,7 @@ public function uploadImage(int $documentId, string $newFileName, $newFileResour
 		$savedFile = $saveDir->newFile($fileName, $newFileResource);
 		return [
 			'name' => $fileName,
+			'dirname' => $saveDir->getName(),
 			'id' => $savedFile->getId(),
 			'documentId' => $textFile->getId(),
 		];
@@ -183,6 +184,7 @@ public function uploadImagePublic(?int $documentId, string $newFileName, $newFil
 		$savedFile = $saveDir->newFile($fileName, $newFileResource);
 		return [
 			'name' => $fileName,
+			'dirname' => $saveDir->getName(),
 			'id' => $savedFile->getId(),
 			'documentId' => $textFile->getId(),
 		];
@@ -227,6 +229,7 @@ private function copyImageFile(File $imageFile, Folder $saveDir, File $textFile)
 			// get file type and name
 			return [
 				'name' => $fileName,
+				'dirname' => $saveDir->getName(),
 				'id' => $targetFile->getId(),
 				'documentId' => $textFile->getId(),
 			];
@@ -457,7 +460,7 @@ public function cleanupAttachments(int $fileId): int {
 					$attachmentsByName[$attNode->getName()] = $attNode;
 				}
 
-				$contentAttachmentNames = $this->getAttachmentNamesFromContent($textFile->getContent());
+				$contentAttachmentNames = $this->getAttachmentNamesFromContent($textFile->getContent(), $fileId);
 
 				$toDelete = array_diff(array_keys($attachmentsByName), $contentAttachmentNames);
 				foreach ($toDelete as $name) {
@@ -476,20 +479,35 @@ public function cleanupAttachments(int $fileId): int {
 	 * @param string $content
 	 * @return array
 	 */
-	public static function getAttachmentNamesFromContent(string $content): array {
-		$matches = [];
+	public static function getAttachmentNamesFromContent(string $content, int $fileId): array {
+		$oldMatches = [];
 		preg_match_all(
 			// simple version with .+ between the brackets
 			// '/\!\[.+\]\(text:\/\/image\?[^)]*imageFileName=([^)&]+)\)/',
 			// complex version of php-markdown
+			// matches ![ANY_CONSIDERED_CORRECT_BY_PHP-MARKDOWN](text://image?ANYTHING&imageFileName=FILE_NAME) and captures FILE_NAME
 			'/\!\[(?>[^\[\]]+|\[(?>[^\[\]]+|\[(?>[^\[\]]+|\[(?>[^\[\]]+|\[(?>[^\[\]]+|\[(?>[^\[\]]+|\[\])*\])*\])*\])*\])*\])*\]\(text:\/\/image\?[^)]*imageFileName=([^)&]+)\)/',
 			$content,
+			$oldMatches,
+			PREG_SET_ORDER
+		);
+		$oldNames = array_map(static function (array $match) {
+			return urldecode($match[1]);
+		}, $oldMatches);
+
+		$matches = [];
+		// matches ![ANY_CONSIDERED_CORRECT_BY_PHP-MARKDOWN](.attachments.DOCUMENT_ID/ANY_FILE_NAME) and captures FILE_NAME
+		preg_match_all(
+			'/\!\[(?>[^\[\]]+|\[(?>[^\[\]]+|\[(?>[^\[\]]+|\[(?>[^\[\]]+|\[(?>[^\[\]]+|\[(?>[^\[\]]+|\[\])*\])*\])*\])*\])*\])*\]\(\.attachments\.'.$fileId.'\/([^)&]+)\)/',
+			$content,
 			$matches,
 			PREG_SET_ORDER
 		);
-		return array_map(static function (array $match) {
+		$names = array_map(static function (array $match) {
 			return urldecode($match[1]);
 		}, $matches);
+
+		return array_merge($names, $oldNames);
 	}
 
 	/**

src/components/EditorWrapper.vue

@@ -616,7 +616,7 @@ export default {
 			}
 
 			return this.$syncService.uploadImage(file).then((response) => {
-				this.insertAttachmentImage(response.data?.name, response.data?.id, position)
+				this.insertAttachmentImage(response.data?.name, response.data?.id, position, response.data?.dirname)
 			}).catch((error) => {
 				console.error(error)
 				showError(error?.response?.data?.error)
@@ -625,18 +625,18 @@ export default {
 		insertImagePath(imagePath) {
 			this.uploadingImages = true
 			this.$syncService.insertImageFile(imagePath).then((response) => {
-				this.insertAttachmentImage(response.data?.name, response.data?.id)
+				this.insertAttachmentImage(response.data?.name, response.data?.id, null, response.data?.dirname)
 			}).catch((error) => {
 				console.error(error)
 				showError(error?.response?.data?.error)
 			}).then(() => {
 				this.uploadingImages = false
 			})
 		},
-		insertAttachmentImage(name, fileId, position = null) {
+		insertAttachmentImage(name, fileId, position = null, dirname = '') {
 			// inspired by the fixedEncodeURIComponent function suggested in
 			// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
-			const src = 'text://image?imageFileName='
+			const src = dirname + '/'
 				+ encodeURIComponent(name).replace(/[!'()*]/g, (c) => {
 					return '%' + c.charCodeAt(0).toString(16).toUpperCase()
 				})