Add toolbar button for attaching files

basecamp · Apr 19, 2019 · 32230b4 · 32230b4
1 parent 4879b64
commit 32230b4
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 1 deletion.
diff --git a/assets/trix/stylesheets/icons.scss b/assets/trix/stylesheets/icons.scss
@@ -1,3 +1,4 @@
+$icon-attach: svgo-data-uri('trix/images/attach.svg', $precision: 1);
 $icon-bold: svgo-data-uri('trix/images/bold.svg', $precision: 1);
 $icon-bullets: svgo-data-uri('trix/images/bullets.svg', $precision: 0);
 $icon-code: svgo-data-uri('trix/images/code.svg', $precision: 1);

diff --git a/assets/trix/stylesheets/toolbar.scss b/assets/trix/stylesheets/toolbar.scss
@@ -120,6 +120,7 @@ trix-toolbar {
     }
   }
 
+  .trix-button--icon-attach::before { background-image: $icon-attach; top: 8%; bottom: 4%; }
   .trix-button--icon-bold::before { background-image: $icon-bold; }
   .trix-button--icon-italic::before { background-image: $icon-italic; }
   .trix-button--icon-link::before { background-image: $icon-link; }

diff --git a/src/trix/config/input.coffee b/src/trix/config/input.coffee
@@ -6,3 +6,14 @@ Trix.config.input =
       2
     else
       0
+
+  pickFiles: (callback) ->
+    input = Trix.makeElement("input", type: "file", multiple: true, hidden: true, id: "trix-file-input")
+
+    input.addEventListener "change", ->
+      callback(input.files)
+      Trix.removeNode(input)
+
+    Trix.removeNode(document.getElementById(input.id))
+    document.body.appendChild(input)
+    input.click()
diff --git a/src/trix/config/lang.coffee b/src/trix/config/lang.coffee
@@ -1,4 +1,5 @@
 Trix.config.lang =
+  attachFiles: "Attach Files"
   bold: "Bold"
   bullets: "Bullets"
   byte:  "Byte"

diff --git a/src/trix/config/toolbar.coffee b/src/trix/config/toolbar.coffee
@@ -20,6 +20,10 @@ Trix.config.toolbar =
         <button type="button" class="trix-button trix-button--icon trix-button--icon-increase-nesting-level" data-trix-action="increaseNestingLevel" title="#{lang.indent}" tabindex="-1">#{lang.indent}</button>
       </span>
 
+      <span class="trix-button-group trix-button-group--file-tools" data-trix-button-group="file-tools">
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-attach" data-trix-action="attachFiles" title="#{lang.attachFiles}" tabindex="-1">#{lang.attachFiles}</button>
+      </span>
+
       <span class="trix-button-group-spacer"></span>
 
       <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">

diff --git a/src/trix/controllers/editor_controller.coffee b/src/trix/controllers/editor_controller.coffee
@@ -311,6 +311,9 @@ class Trix.EditorController extends Trix.Controller
     decreaseNestingLevel:
       test: -> @editor.canDecreaseNestingLevel()
       perform: -> @editor.decreaseNestingLevel() and @render()
+    attachFiles:
+      test: -> true
+      perform: -> Trix.config.input.pickFiles(@editor.insertFiles)
 
   canInvokeAction: (actionName) ->
     if @actionIsExternal(actionName)

diff --git a/src/trix/models/editor.coffee b/src/trix/models/editor.coffee
@@ -48,7 +48,7 @@ class Trix.Editor
   insertFile: (file) ->
     @composition.insertFile(file)
 
-  insertFiles: (files) ->
+  insertFiles: (files) =>
     @composition.insertFiles(files)
 
   insertHTML: (html) ->