feat(image-upload): add option to show a warning in the upload panel (#…

…251) Co-authored-by: Giamir Buoncristiani <giamir.buoncristiani@gmail.com>
StackExchange · Jun 29, 2023 · 220f5e7 · 220f5e7
1 parent a0d83c9
commit 220f5e7
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 0 deletions.
diff --git a/site/index.ts b/site/index.ts
@@ -200,6 +200,9 @@ domReady(() => {
             "These images are uploaded nowhere, so no content policy applies",
         wrapImagesInLinks: true,
         allowExternalUrls: true,
+        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
@@ -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
      */
@@ -138,6 +143,8 @@ export class ImageUploader extends PluginInterfaceView<
 
         // TODO i18n
         this.uploadContainer.innerHTML = escapeHTML`
+            <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}">
                     Browse
@@ -234,6 +241,17 @@ export class ImageUploader extends PluginInterfaceView<
                 void this.handleUploadTrigger(e, this.image, view);
             });
 
+        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?.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
@@ -46,6 +46,31 @@ describe("image upload plugin", () => {
             expect(updatedUploadContainer.parentElement).toBeTruthy();
         });
 
+        it("should have the warning notice hidden by default", () => {
+            expect(uploader.uploadContainer.parentElement).toBeNull();
+
+            showImageUploader(view.editorView);
+            const warningNoticeContainer = pluginContainer.querySelector(
+                ".js-warning-notice-html"
+            );
+
+            expect(warningNoticeContainer.classList).toContain("d-none");
+        });
+
+        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 warningNoticeContainer = pluginContainer.querySelector(
+                ".js-warning-notice-html"
+            );
+
+            expect(warningNoticeContainer.classList).not.toContain("d-none");
+            expect(warningNoticeContainer.innerHTML).toBe(warningNoticeHtml);
+        });
+
         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
             // see https://github.com/jsdom/jsdom/issues/2586#issuecomment-742593116