From c8d51d56b2371c22e694f1fac20eba0ff97ada89 Mon Sep 17 00:00:00 2001
From: Yaakov Ellis <yellis@stackoverflow.com>
Date: Tue, 27 Jun 2023 13:19:16 +0300
Subject: [PATCH 1/4] Add image upload warning to image-upload plugin

---
 src/shared/prosemirror-plugins/image-upload.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/shared/prosemirror-plugins/image-upload.ts b/src/shared/prosemirror-plugins/image-upload.ts
index 440aa5e3..14759ab9 100644
--- a/src/shared/prosemirror-plugins/image-upload.ts
+++ b/src/shared/prosemirror-plugins/image-upload.ts
@@ -52,6 +52,10 @@ export interface ImageUploadOptions {
      * If true, allow users to add images via an external url
      */
     allowExternalUrls?: boolean;
+    /*
+     * If provided, will display this warning message at the top of the image upload menu
+     */
+    warningMessage?: string;
 }
 
 /**
@@ -138,6 +142,8 @@ export class ImageUploader extends PluginInterfaceView<
 
         // TODO i18n
         this.uploadContainer.innerHTML = escapeHTML`
+            <div class="s-notice s-notice__warning m16 mb0 js-upload-warning d-none"></div>
+
             <div class="fs-body2 p12 pb0 js-cta-container">
                 <label for="${this.uploadField.id}" class="d-inline-flex f:outline-ring s-link js-browse-button" aria-controls="image-preview-${randomId}">
                     Browse
@@ -234,6 +240,15 @@ export class ImageUploader extends PluginInterfaceView<
                 void this.handleUploadTrigger(e, this.image, view);
             });
 
+        if (this.uploadOptions?.warningMessage) {
+            const warning = this.uploadContainer.querySelector(".js-upload-warning");
+            warning.classList.remove("d-none");
+            
+            // XSS "safe": this html is passed in via the editor options; it is not our job to sanitize it
+            // eslint-disable-next-line no-unsanitized/property
+            warning.innerHTML = this.uploadOptions?.warningMessage;
+        }
+        
         if (this.uploadOptions.allowExternalUrls) {
             this.uploadContainer
                 .querySelector(".js-external-url-trigger-container")

From 862c14dd3ba64ad131855a341ba5109bb644a3f7 Mon Sep 17 00:00:00 2001
From: Yaakov Ellis <yellis@stackoverflow.com>
Date: Tue, 27 Jun 2023 13:19:30 +0300
Subject: [PATCH 2/4] include warning on plugin example page

---
 site/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/index.ts b/site/index.ts
index d1a1b4bb..d74ffba3 100644
--- a/site/index.ts
+++ b/site/index.ts
@@ -200,6 +200,7 @@ domReady(() => {
             "These images are uploaded nowhere, so no content policy applies",
         wrapImagesInLinks: true,
         allowExternalUrls: true,
+        warningMessage: enableSamplePlugin ? "Images are useful in a post, but <strong>make sure the post is still clear without them</strong>.  If you post images of code or error messages, copy and paste or type the actual code or message into the post directly." : null
     };
 
     // TODO should null out entire object, but that currently just defaults back to the original on merge

From f60cfa163e8ebf99053da4cb989c7ca418677193 Mon Sep 17 00:00:00 2001
From: Yaakov Ellis <yellis@stackoverflow.com>
Date: Tue, 27 Jun 2023 13:19:40 +0300
Subject: [PATCH 3/4] tests

---
 .../prosemirror-plugins/image-upload.test.ts  | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/test/shared/prosemirror-plugins/image-upload.test.ts b/test/shared/prosemirror-plugins/image-upload.test.ts
index 6e400dfd..6edf1d7f 100644
--- a/test/shared/prosemirror-plugins/image-upload.test.ts
+++ b/test/shared/prosemirror-plugins/image-upload.test.ts
@@ -45,6 +45,29 @@ describe("image upload plugin", () => {
 
             expect(updatedUploadContainer.parentElement).toBeTruthy();
         });
+        
+        it("should have warning hidden by default", () => {
+            expect(uploader.uploadContainer.parentElement).toBeNull();
+
+            showImageUploader(view.editorView);
+            const warningDiv =
+                pluginContainer.querySelector(".js-upload-warning");
+
+            expect(warningDiv.classList.contains("d-none")).toBeTruthy();
+        });
+
+        it("should have warning shown with proper text when option provided", () => {
+            const warningText = "this is <strong>warning</strong> test";
+            setupTestVariables({warningMessage: warningText});
+
+            expect(uploader.uploadContainer.parentElement).toBeNull();
+            showImageUploader(view.editorView);
+            const warningDiv =
+                pluginContainer.querySelector(".js-upload-warning");
+
+            expect(warningDiv.classList.contains("d-none")).toBeFalsy();
+            expect(warningDiv.innerHTML).toEqual(warningText);
+        });
 
         it("should focus 'browse' button when showing image uploader", () => {
             // we need to add our DOM to the doc's body in order to make jsdom's "focus" handling work
@@ -78,6 +101,7 @@ describe("image upload plugin", () => {
         });
 
         it("should disable 'add image' button without preview", () => {
+            
             showImageUploader(view.editorView);
 
             const addButton = findAddButton(uploader);

From 97d2a57701f8abc1520aeebc7233dea195576a6b Mon Sep 17 00:00:00 2001
From: Giamir Buoncristiani <giamir.buoncristiani@gmail.com>
Date: Thu, 29 Jun 2023 15:43:04 +0200
Subject: [PATCH 4/4] chore(image-upload): add few code style changes

---
 site/index.ts                                 |  4 ++-
 .../prosemirror-plugins/image-upload.ts       | 23 +++++++++-------
 .../prosemirror-plugins/image-upload.test.ts  | 27 ++++++++++---------
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/site/index.ts b/site/index.ts
index d74ffba3..5e09cc45 100644
--- a/site/index.ts
+++ b/site/index.ts
@@ -200,7 +200,9 @@ domReady(() => {
             "These images are uploaded nowhere, so no content policy applies",
         wrapImagesInLinks: true,
         allowExternalUrls: true,
-        warningMessage: enableSamplePlugin ? "Images are useful in a post, but <strong>make sure the post is still clear without them</strong>.  If you post images of code or error messages, copy and paste or type the actual code or message into the post directly." : null
+        warningNoticeHtml: enableSamplePlugin
+            ? "Images are useful in a post, but <strong>make sure the post is still clear without them</strong>.  If you post images of code or error messages, copy and paste or type the actual code or message into the post directly."
+            : null,
     };
 
     // TODO should null out entire object, but that currently just defaults back to the original on merge
diff --git a/src/shared/prosemirror-plugins/image-upload.ts b/src/shared/prosemirror-plugins/image-upload.ts
index 14759ab9..505e5a42 100644
--- a/src/shared/prosemirror-plugins/image-upload.ts
+++ b/src/shared/prosemirror-plugins/image-upload.ts
@@ -39,6 +39,11 @@ export interface ImageUploadOptions {
      * NOTE: this is injected as-is and can potentially be a XSS hazard!
      */
     contentPolicyHtml?: string;
+    /**
+     * If provided, will insert the html into a warning notice at the top of the image uploader
+     * NOTE: this is injected as-is and can potentially be a XSS hazard!
+     */
+    warningNoticeHtml?: string;
     /**
      * If true, wraps all images in links that point to the uploaded image url
      */
@@ -52,10 +57,6 @@ export interface ImageUploadOptions {
      * If true, allow users to add images via an external url
      */
     allowExternalUrls?: boolean;
-    /*
-     * If provided, will display this warning message at the top of the image upload menu
-     */
-    warningMessage?: string;
 }
 
 /**
@@ -142,7 +143,7 @@ export class ImageUploader extends PluginInterfaceView<
 
         // TODO i18n
         this.uploadContainer.innerHTML = escapeHTML`
-            <div class="s-notice s-notice__warning m16 mb0 js-upload-warning d-none"></div>
+            <div class="s-notice s-notice__warning m12 mb0 js-warning-notice-html d-none" role="status"></div>
 
             <div class="fs-body2 p12 pb0 js-cta-container">
                 <label for="${this.uploadField.id}" class="d-inline-flex f:outline-ring s-link js-browse-button" aria-controls="image-preview-${randomId}">
@@ -240,15 +241,17 @@ export class ImageUploader extends PluginInterfaceView<
                 void this.handleUploadTrigger(e, this.image, view);
             });
 
-        if (this.uploadOptions?.warningMessage) {
-            const warning = this.uploadContainer.querySelector(".js-upload-warning");
+        if (this.uploadOptions?.warningNoticeHtml) {
+            const warning = this.uploadContainer.querySelector(
+                ".js-warning-notice-html"
+            );
             warning.classList.remove("d-none");
-            
+
             // XSS "safe": this html is passed in via the editor options; it is not our job to sanitize it
             // eslint-disable-next-line no-unsanitized/property
-            warning.innerHTML = this.uploadOptions?.warningMessage;
+            warning.innerHTML = this.uploadOptions?.warningNoticeHtml;
         }
-        
+
         if (this.uploadOptions.allowExternalUrls) {
             this.uploadContainer
                 .querySelector(".js-external-url-trigger-container")
diff --git a/test/shared/prosemirror-plugins/image-upload.test.ts b/test/shared/prosemirror-plugins/image-upload.test.ts
index 6edf1d7f..bfd2b635 100644
--- a/test/shared/prosemirror-plugins/image-upload.test.ts
+++ b/test/shared/prosemirror-plugins/image-upload.test.ts
@@ -45,28 +45,30 @@ describe("image upload plugin", () => {
 
             expect(updatedUploadContainer.parentElement).toBeTruthy();
         });
-        
-        it("should have warning hidden by default", () => {
+
+        it("should have the warning notice hidden by default", () => {
             expect(uploader.uploadContainer.parentElement).toBeNull();
 
             showImageUploader(view.editorView);
-            const warningDiv =
-                pluginContainer.querySelector(".js-upload-warning");
+            const warningNoticeContainer = pluginContainer.querySelector(
+                ".js-warning-notice-html"
+            );
 
-            expect(warningDiv.classList.contains("d-none")).toBeTruthy();
+            expect(warningNoticeContainer.classList).toContain("d-none");
         });
 
-        it("should have warning shown with proper text when option provided", () => {
-            const warningText = "this is <strong>warning</strong> test";
-            setupTestVariables({warningMessage: warningText});
+        it("should show the warning notice with the related html when option is provided", () => {
+            const warningNoticeHtml = "this is <strong>warning</strong> test";
+            setupTestVariables({ warningNoticeHtml });
 
             expect(uploader.uploadContainer.parentElement).toBeNull();
             showImageUploader(view.editorView);
-            const warningDiv =
-                pluginContainer.querySelector(".js-upload-warning");
+            const warningNoticeContainer = pluginContainer.querySelector(
+                ".js-warning-notice-html"
+            );
 
-            expect(warningDiv.classList.contains("d-none")).toBeFalsy();
-            expect(warningDiv.innerHTML).toEqual(warningText);
+            expect(warningNoticeContainer.classList).not.toContain("d-none");
+            expect(warningNoticeContainer.innerHTML).toBe(warningNoticeHtml);
         });
 
         it("should focus 'browse' button when showing image uploader", () => {
@@ -101,7 +103,6 @@ describe("image upload plugin", () => {
         });
 
         it("should disable 'add image' button without preview", () => {
-            
             showImageUploader(view.editorView);
 
             const addButton = findAddButton(uploader);