Merge pull request nubasedev#315 from ustacryptact/master

Fix new customized paste options

Author: andrerpena

src/commands/command-orchestrator.ts

@@ -143,7 +143,7 @@ export class CommandOrchestrator {
       return this.executeCommand(
         this.pasteOptions.command || getDefaultSaveImageCommandName(),
         {
-          saveImage: this.pasteOptions.saveImage,
+          pasteOptions: this.pasteOptions,
           event: event
         } as PasteCommandContext
       );
@@ -158,7 +158,7 @@ export class CommandOrchestrator {
       return this.executeCommand(
         this.pasteOptions.command || getDefaultSaveImageCommandName(),
         {
-          saveImage: this.pasteOptions.saveImage,
+          pasteOptions: this.pasteOptions,
           event: event
         } as PasteCommandContext
       );
@@ -173,7 +173,7 @@ export class CommandOrchestrator {
       return this.executeCommand(
         this.pasteOptions.command || getDefaultSaveImageCommandName(),
         {
-          saveImage: this.pasteOptions.saveImage,
+          pasteOptions: this.pasteOptions,
           event: event
         } as PasteCommandContext
       );

src/commands/command.ts

@@ -31,7 +31,7 @@ export interface CommandContext {
 export interface PasteCommandContext extends CommandContext {
   type: "paste";
   event: React.ClipboardEvent | React.DragEvent | React.ChangeEvent;
-  saveImage: SaveImageHandler;
+  pasteOptions: PasteOptions;
 }
 
 export type ToolbarCommands = string[][];

src/commands/default-commands/save-image-command.tsx

@@ -2,7 +2,8 @@ import {
   Command,
   CommandContext,
   ExecuteOptions,
-  PasteCommandContext
+  PasteCommandContext,
+  PasteOptions
 } from "../command";
 import { readFileAsync } from "../../util/files";
 import { getBreaksNeededForEmptyLineBefore } from "../../util/MarkdownUtil";
@@ -26,6 +27,42 @@ function fileListToArray(list: FileList): Array<File> {
   return result;
 }
 
+function filterItems(
+  items: File[],
+  { multiple, accept }: Pick<PasteOptions, "multiple" | "accept">
+): File[] {
+  let filteredItems = items;
+
+  if (!multiple) {
+    filteredItems = filteredItems.slice(0, 1);
+  }
+
+  if (accept) {
+    //https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
+    const acceptedTypes = accept.split(",");
+    const fileExtensions = new Set(
+      acceptedTypes.filter(t => /^\.\w+/.test(t)).map(t => t.split(".")[1])
+    );
+    const mimeTypes = new Set(
+      acceptedTypes.filter(t => /^[-\w.]+\/[-\w.]+$/.test(t))
+    );
+    const anyTypes = new Set(
+      acceptedTypes
+        .filter(t => /(audio|video|image)\/\*/.test(t))
+        .map(t => t.split("/")[0])
+    );
+
+    filteredItems = filteredItems.filter(
+      f =>
+        fileExtensions.has(f.name.split(".")[1]) ||
+        mimeTypes.has(f.type) ||
+        anyTypes.has(f.type.split("/")[0])
+    );
+  }
+
+  return filteredItems;
+}
+
 export const saveImageCommand: Command = {
   async execute({
     initialState,
@@ -37,7 +74,10 @@ export const saveImageCommand: Command = {
       throw new Error("wrong context");
     }
     const pasteContext = context as PasteCommandContext;
-    const { event, saveImage } = pasteContext;
+    const {
+      event,
+      pasteOptions: { saveImage, multiple, accept }
+    } = pasteContext;
 
     const items = isPasteEvent(context)
       ? dataTransferToArray((event as React.ClipboardEvent).clipboardData.items)
@@ -47,7 +87,9 @@ export const saveImageCommand: Command = {
           (event as React.ChangeEvent<HTMLInputElement>).target.files
         );
 
-    for (const index in items) {
+    const filteredItems = filterItems(items, { multiple, accept });
+
+    for (const index in filteredItems) {
       const initialState = textApi.getState();
       const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(
         initialState.text,

src/components/ReactMde.tsx

@@ -73,6 +73,14 @@ export interface ReactMdeState {
   editorHeight: number;
 }
 
+const pasteOptionDefaults: Required<Omit<
+  PasteOptions,
+  "saveImage" | "command"
+>> = {
+  accept: "image/*",
+  multiple: false
+};
+
 export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
   /**
    * "finalRefs" is a clone of "props.refs" except that undefined refs are set to default values
@@ -110,6 +118,8 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
       this.finalRefs.textarea,
       this.props.l18n,
       this.props.paste
+        ? { ...pasteOptionDefaults, ...this.props.paste }
+        : undefined
     );
     const minEditorHeight = Math.min(
       props.maxEditorHeight,
@@ -243,8 +253,10 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
               <input
                 className={classNames("image-input")}
                 type="file"
-                accept={this.props.paste.accept || "image/*"}
-                multiple={this.props.paste.multiple || true}
+                accept={this.props.paste.accept ?? pasteOptionDefaults.accept}
+                multiple={
+                  this.props.paste.multiple ?? pasteOptionDefaults.multiple
+                }
                 onChange={this.handleImageSelection}
               />
               <span>{l18n.pasteDropSelect}</span>