From 244cb5c189c80b0009f13119001300ade04f011f Mon Sep 17 00:00:00 2001 From: Jose Fernando Davila Date: Mon, 19 Feb 2024 14:50:04 -0600 Subject: [PATCH 1/5] Add readme --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 0133f94a3..9229f3b69 100644 --- a/README.md +++ b/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 automatically aceept all file types as an attachment. You can configure it with the `trix-attachment-accept` attribute, which takes a comma-separated list of allowed file extensions or MIME types. + +```html + +``` + +```html + +``` + +```html + +``` + # Editing Text Programmatically You can manipulate a Trix editor programmatically through the `Trix.Editor` interface, available on each `` element through its `editor` property. From 78f4fe93c37962a23c7a2a0672275b20f173d2af Mon Sep 17 00:00:00 2001 From: Jose Fernando Davila Date: Mon, 19 Feb 2024 14:51:47 -0600 Subject: [PATCH 2/5] Fix fileInputId --- src/trix/config/input.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/trix/config/input.js b/src/trix/config/input.js index dadc163a1..fa5be0b87 100644 --- a/src/trix/config/input.js +++ b/src/trix/config/input.js @@ -3,6 +3,7 @@ import { makeElement, removeNode } from "trix/core/helpers/dom" const input = { level2Enabled: true, + fileInputId: `trix-file-input-${Date.now().toString(16)}`, getLevel() { if (this.level2Enabled && browser.supportsInputEvents) { From eb39b1062bc7c0b0028165fbee584720f466b041 Mon Sep 17 00:00:00 2001 From: Jose Fernando Davila Date: Mon, 19 Feb 2024 14:52:49 -0600 Subject: [PATCH 3/5] add options to specify attach file types --- src/trix/config/input.js | 9 ++++++--- src/trix/controllers/editor_controller.js | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/trix/config/input.js b/src/trix/config/input.js index fa5be0b87..81334b908 100644 --- a/src/trix/config/input.js +++ b/src/trix/config/input.js @@ -4,6 +4,7 @@ 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) { @@ -12,11 +13,13 @@ 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) }) diff --git a/src/trix/controllers/editor_controller.js b/src/trix/controllers/editor_controller.js index 6f469db5a..44eb1f740 100644 --- a/src/trix/controllers/editor_controller.js +++ b/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) }, }, } From b29a1d955516885da9172d207f2f7437c12617eb Mon Sep 17 00:00:00 2001 From: Jose Fernando Davila Date: Mon, 19 Feb 2024 14:53:16 -0600 Subject: [PATCH 4/5] Insert file input next to trix editor --- src/trix/config/input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/trix/config/input.js b/src/trix/config/input.js index 81334b908..fd5233667 100644 --- a/src/trix/config/input.js +++ b/src/trix/config/input.js @@ -24,7 +24,7 @@ const input = { }) removeNode(document.getElementById(this.fileInputId)) - document.body.appendChild(input) + editorElement.parentNode.appendChild(input) input.click() } } From d67fe2a17e4d813bcacc2d1cb075117c85a818c3 Mon Sep 17 00:00:00 2001 From: Jose Fernando Davila Date: Mon, 19 Feb 2024 15:16:02 -0600 Subject: [PATCH 5/5] improve readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9229f3b69..de851e70f 100644 --- a/README.md +++ b/README.md @@ -103,7 +103,7 @@ If you don’t want to accept dropped or pasted files, call `preventDefault()` o ## Limiting Accept Attachment File Types -Trix automatically aceept all file types as an attachment. You can configure it with the `trix-attachment-accept` attribute, which takes a comma-separated list of allowed file extensions or MIME 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