Limit accept attachment file types, fix missing id and make Trix compatible with modals

README.md

@@ -101,6 +101,22 @@ To store attachments, listen for the `trix-attachment-add` event. Upload the att
 
 If you don’t want to accept dropped or pasted files, call `preventDefault()` on the `trix-file-accept` event, which Trix dispatches just before the `trix-attachment-add` event.
 
+## Limiting Accept Attachment File Types
+
+Trix accepts all file types as an attachment by default. You can configure it with the `trix-attachment-accept` attribute, which takes a comma-separated list of allowed file extensions or MIME types.
+
+```html
+<trix-editor trix-attachment-accept="image/png, image/jpg, image/jpeg"></trix-editor>
+```
+
+```html
+<trix-editor trix-attachment-accept=".png, .jpg, .jpeg"></trix-editor>
+```
+
+```html
+<trix-editor trix-attachment-accept="image/*"></trix-editor>
+```
+
 # Editing Text Programmatically
 
 You can manipulate a Trix editor programmatically through the `Trix.Editor` interface, available on each `<trix-editor>` element through its `editor` property.

src/trix/config/input.js

@@ -3,6 +3,8 @@ import { makeElement, removeNode } from "trix/core/helpers/dom"
 
 const input = {
   level2Enabled: true,
+  fileInputId: `trix-file-input-${Date.now().toString(16)}`,
+  acceptedFileTypes: "*",
 
   getLevel() {
     if (this.level2Enabled && browser.supportsInputEvents) {
@@ -11,16 +13,18 @@ const input = {
       return 0
     }
   },
-  pickFiles(callback) {
-    const input = makeElement("input", { type: "file", multiple: true, hidden: true, id: this.fileInputId })
+  pickFiles(editorController) {
+    const editorElement = editorController.element
+    const acceptTypes = editorElement.getAttribute("trix-attachment-accept") || this.acceptedFileTypes
+    const input = makeElement("input", { type: "file", multiple: true, hidden: true, id: this.fileInputId, accept: acceptTypes })
 
     input.addEventListener("change", () => {
-      callback(input.files)
+      editorController.insertFiles(input.files)
       removeNode(input)
     })
 
     removeNode(document.getElementById(this.fileInputId))
-    document.body.appendChild(input)
+    editorElement.parentNode.appendChild(input)
     input.click()
   }
 }

src/trix/controllers/editor_controller.js

@@ -64,7 +64,7 @@ export default class EditorController extends Controller {
         return true
       },
       perform() {
-        return config.input.pickFiles(this.editor.insertFiles)
+        return config.input.pickFiles(this.editor)
       },
     },
   }