Merge pull request #4 from jhoffmann99/develop

Develop

.github

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

pom.xml

@@ -9,7 +9,7 @@
     <!-- Add-on version number. Snapshot is good for development,
     but when publishing, make sure to use semantic version number like '1.0.0'.
     See https://semver.org/ -->
-    <version>1.0.0</version>
+    <version>1.0.1</version>
 
     <!-- Change this. The name is used when you publish to Vaadin Directory.
     Make sure to use a unique name by first searching at https://vaadin.com/directory -->

src/main/java/org/vaadin/addons/jhoffmann99/TrixEditor.java

@@ -14,9 +14,9 @@
 @CssImport("trix/dist/trix.css")
 @CssImport("./custom.css")
 public class TrixEditor extends AbstractField<TrixEditor, String> {
-    Element labelElement = new Element("label");
-    Element hiddenInputElement = new Element("input");
-    Element editorElement = new Element("trix-editor");
+    private final Element labelElement;
+    private final Element hiddenInputElement;
+    private final Element editorElement;
 
     @Override
     protected void setPresentationValue(String s) {
@@ -30,6 +30,10 @@ public  TrixEditor(String initialValue) {
     public TrixEditor(String initialValue, String labelText) {
         super(initialValue);
 
+        labelElement = new Element("label");
+        hiddenInputElement = new Element("input");
+        editorElement = new Element("trix-editor");
+
         hiddenInputElement.setAttribute("type", "hidden");
         String inputid = UUID.randomUUID().toString();
         hiddenInputElement.setAttribute("id", inputid);
@@ -48,12 +52,26 @@ public TrixEditor(String initialValue, String labelText) {
                 .debounce(1000)
         ;
 
+
+
+        editorElement.addEventListener("trix-attachment-add", e-> {
+           editorElement.executeJs("this.attachments = this.editorController.attachmentManager.getAttachments();");
+        });
+
         if(labelText != null){
             labelElement.setText(labelText);
             getElement().appendChild(labelElement);
         }
 
         getElement().appendChild(hiddenInputElement, editorElement);
+
+        // Workaround: as long as file attachments do not work, hide the button
+        disableFileAttachments();
+    }
+
+    public void disableFileAttachments() {
+        getElement().executeJs("document.querySelector('.trix-button-group.trix-button-group--file-tools').style.display = 'none';");
     }
 
+
 }

src/main/resources/META-INF/resources/frontend/custom.css

@@ -13,4 +13,4 @@ trix-editor:hover:not(:focus) {
   color: var(--lumo-secondary-text-color);
   font-size: 14px;
   font-weight: 500;
-}
+}

src/main/resources/META-INF/resources/frontend/js/attachment.js

@@ -0,0 +1,61 @@
+(function() {
+  var HOST = "https://d13txem1unpe48.cloudfront.net/"
+
+  addEventListener("trix-attachment-add", function(event) {
+    if (event.attachment.file) {
+      uploadFileAttachment(event.attachment)
+    }
+  })
+
+  function uploadFileAttachment(attachment) {
+    uploadFile(attachment.file, setProgress, setAttributes)
+
+    function setProgress(progress) {
+      attachment.setUploadProgress(progress)
+    }
+
+    function setAttributes(attributes) {
+      attachment.setAttributes(attributes)
+    }
+  }
+
+  function uploadFile(file, progressCallback, successCallback) {
+    var key = createStorageKey(file)
+    var formData = createFormData(key, file)
+    var xhr = new XMLHttpRequest()
+
+    xhr.open("POST", HOST, true)
+
+    xhr.upload.addEventListener("progress", function(event) {
+      var progress = event.loaded / event.total * 100
+      progressCallback(progress)
+    })
+
+    xhr.addEventListener("load", function(event) {
+      if (xhr.status == 204) {
+        var attributes = {
+          url: HOST + key,
+          href: HOST + key + "?content-disposition=attachment"
+        }
+        successCallback(attributes)
+      }
+    })
+
+    xhr.send(formData)
+  }
+
+  function createStorageKey(file) {
+    var date = new Date()
+    var day = date.toISOString().slice(0,10)
+    var name = date.getTime() + "-" + file.name
+    return [ "tmp", day, name ].join("/")
+  }
+
+  function createFormData(key, file) {
+    var data = new FormData()
+    data.append("key", key)
+    data.append("Content-Type", file.type)
+    data.append("file", file)
+    return data
+  }
+})();