chore(image-upload): add few code style changes

StackExchange · Jun 29, 2023 · 97d2a57 · 97d2a57
1 parent f60cfa1
commit 97d2a57
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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);