Add image support

src/Card.svelte

@@ -75,6 +75,10 @@
   :global(img.activity) {
     max-height: 8pt;
   }
+  .description :global(img) {
+    display: block;
+    margin: auto;
+  }
 </style>
 
 

src/CardInput.svelte

@@ -5,10 +5,41 @@
   let apiKey = "xoifjvd46mymq6y2ev6wyaj7utyykb3tz9pf9v8m98oeiqip";
 
   let conf = {
-    "height": 500,
+    height: 500,
-    "plugins": [ 'autoresize', 'code' ],
+    plugins: [ 'autoresize', 'code', 'hr', 'image' ],
-    "toolbar": "undo redo | bold italic | code ",
+    toolbar: "undo redo | bold italic | hr image | code ",
-    "menubar": false
+    menubar: false,
+    file_picker_types: 'image',
+    /* and here's our custom image picker*/
+    file_picker_callback: function (cb, value, meta) {
+      var input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      input.setAttribute('accept', 'image/*');
+
+      input.onchange = function () {
+	var file = this.files[0];
+
+	var reader = new FileReader();
+	reader.onload = function () {
+          /*
+            Note: Now we need to register the blob in TinyMCEs image blob
+            registry. In the next release this part hopefully won't be
+            necessary, as we are looking to handle it internally.
+          */
+          var id = 'blobid' + (new Date()).getTime();
+          var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
+          var base64 = reader.result.split(',')[1];
+          var blobInfo = blobCache.create(id, file, base64);
+          blobCache.add(blobInfo);
+
+          /* call the callback and populate the Title field with the file name */
+          cb(blobInfo.blobUri(), { title: file.name });
+	};
+	reader.readAsDataURL(file);
+      };
+
+      input.click();
+    },
   };
   
   export let name, type, tags, attributes, description;
@@ -27,7 +58,6 @@
     });
   }
 </script>
-
 <style>
   div.cardInput {
     width: 5in;