@stackoverflow/stacks-editor - npm Package Compare versions

Comparing version 0.10.5 to 0.10.6

dist/shared/localization.d.ts

 import type { PartialDeep } from "./utils";
-/** Curried helper method that wraps a i18n method for menu entries w/ shortcuts */
-declare function shortcut(text: string): (args: {
-    shortcut: string;
-}) => string;
 /** The default set of localizable strings */
@@ -122,3 +118,5 @@ export declare const defaultStrings: {
         readonly upload_error_generic: string;
-        readonly upload_error_unsupported_format: string;
+        readonly upload_error_unsupported_format: ({ supportedFormats, }: {
+            supportedFormats: string;
+        }) => string;
         readonly uploaded_image_preview_alt: string;
@@ -135,2 +133,1 @@ };
 export declare function _t(key: string, params?: Record<string, unknown>): string;
-export {};

dist/shared/localization.js

@@ -77,3 +77,3 @@ /** Curried helper method that wraps a i18n method for menu entries w/ shortcuts */
         upload_error_generic: "Image upload failed. Please try again.",
-        upload_error_unsupported_format: "Please select an image (jpeg, png, gif) to upload",
+        upload_error_unsupported_format: ({ supportedFormats, }) => `Please select an image (${supportedFormats}) to upload`,
         uploaded_image_preview_alt: "uploaded image preview",
@@ -80,0 +80,0 @@ },

dist/shared/prosemirror-plugins/image-upload.d.ts

@@ -49,2 +49,8 @@ import { Plugin, EditorState, Transaction } from "prosemirror-state";
     allowExternalUrls?: boolean;
+    /**
+     * An array of strings containing the accepted file types for the image uploader.
+     * See https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types for appropriate image
+     * file types.
+     */
+    acceptedFileTypes?: string[];
 }
@@ -82,2 +88,3 @@ /**
     unhighlightDropArea(event: DragEvent): void;
+    getCaptionElement(text: string): HTMLElement;
     handleFileSelection(view: EditorView): void;
@@ -84,0 +91,0 @@ handleDrop(event: DragEvent, view: EditorView): void;

dist/shared/prosemirror-plugins/image-upload.js

@@ -38,2 +38,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 }
+const defaultAcceptedFileTypes = ["image/jpeg", "image/png", "image/gif"];
 var ValidationResult;
@@ -51,2 +52,3 @@ (function (ValidationResult) {
         const randomId = generateRandomId();
+        const acceptedFileTypes = uploadOptions.acceptedFileTypes || defaultAcceptedFileTypes;
         this.isVisible = false;
@@ -62,3 +64,3 @@ this.uploadOptions = uploadOptions;
         this.uploadField.className = "js-image-uploader-input v-visible-sr";
-        this.uploadField.accept = "image/*";
+        this.uploadField.accept = acceptedFileTypes.join(", ");
         this.uploadField.multiple = false;
@@ -73,3 +75,3 @@ this.uploadField.id = "fileUpload" + randomId;
                     Browse
-                </label>, drag & drop<span class="js-external-url-trigger-container d-none">, <button type="button" class="s-btn s-btn__link js-external-url-trigger">enter a link</button></span>, or paste an image <span class="fc-light fs-caption">Max size 2 MiB</span>
+                </label>, drag & drop<span class="js-external-url-trigger-container d-none">, <button type="button" class="s-btn s-btn__link js-external-url-trigger">enter a link</button></span>, or paste an image.
             </div>
@@ -94,3 +96,3 @@
                 </div>
-                <div class="d-flex fd-column fs-caption fc-black-350 s-anchors s-anchors__muted">
+                <div class="d-flex fd-column fs-caption fc-black-400 s-anchors s-anchors__muted">
                     <div class="js-branding-html"></div>
@@ -101,2 +103,12 @@ <div class="js-content-policy-html"></div>
         `;
+        // add the caption element to the cta container
+        const ctaContainer = this.uploadContainer.querySelector(".js-cta-container");
+        const acceptedFileTypesString = acceptedFileTypes.length
+            ? acceptedFileTypes.join(", ").replace(/image\//g, "")
+            : "";
+        if (acceptedFileTypesString) {
+            const breakEl = document.createElement("br");
+            ctaContainer.appendChild(breakEl);
+        }
+        ctaContainer.appendChild(this.getCaptionElement(acceptedFileTypesString));
         // add in the uploadField right after the first child element
@@ -178,2 +190,12 @@ this.uploadContainer
     }
+    getCaptionElement(text) {
+        const uploadCaptionEl = document.createElement("span");
+        uploadCaptionEl.className = "fc-light fs-caption";
+        let captionText = "(Max size 2 MiB)";
+        if (text) {
+            captionText = `Supported file types: ${text} ${captionText}`;
+        }
+        uploadCaptionEl.innerText = captionText;
+        return uploadCaptionEl;
+    }
     handleFileSelection(view) {
@@ -201,3 +223,4 @@ this.resetImagePreview();
     validateImage(image) {
-        const validTypes = ["image/jpeg", "image/png", "image/gif"];
+        var _a;
+        const validTypes = (_a = this.uploadOptions.acceptedFileTypes) !== null && _a !== void 0 ? _a : defaultAcceptedFileTypes;
         const sizeLimit = 0x200000; // 2 MiB
@@ -248,3 +271,8 @@ if (validTypes.indexOf(image.type) === -1) {
             case ValidationResult.InvalidFileType:
-                this.showValidationError(_t("image_upload.upload_error_unsupported_format"));
+                this.showValidationError(_t("image_upload.upload_error_unsupported_format", {
+                    supportedFormats: (this.uploadOptions.acceptedFileTypes ||
+                        defaultAcceptedFileTypes)
+                        .join(", ")
+                        .replace(/image\//g, ""),
+                }));
                 reject("invalid filetype");
@@ -251,0 +279,0 @@ return;

package.json

 {
     "name": "@stackoverflow/stacks-editor",
-    "version": "0.10.5",
+    "version": "0.10.6",
     "description": "",
@@ -58,7 +58,7 @@ "repository": {
         "clean-webpack-plugin": "^4.0.0",
-        "css-loader": "^6.10.0",
+        "css-loader": "^7.1.1",
         "cssnano": "^6.1.2",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-jest": "^27.9.0",
+        "eslint-plugin-jest": "^28.2.0",
         "eslint-plugin-no-unsanitized": "^4.0.2",
@@ -65,0 +65,0 @@ "highlight.js": "^11.9.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1200957

increased by0.18%

Lines of code

13674

increased by0.25%

No dependency changes