diff --git a/src/Card.svelte b/src/Card.svelte index 4e4afe1..1079515 100644 --- a/src/Card.svelte +++ b/src/Card.svelte @@ -75,6 +75,10 @@ :global(img.activity) { max-height: 8pt; } + .description :global(img) { + display: block; + margin: auto; + } diff --git a/src/CardInput.svelte b/src/CardInput.svelte index d73a6d8..89a41ee 100644 --- a/src/CardInput.svelte +++ b/src/CardInput.svelte @@ -5,10 +5,41 @@ let apiKey = "xoifjvd46mymq6y2ev6wyaj7utyykb3tz9pf9v8m98oeiqip"; let conf = { - "height": 500, - "plugins": [ 'autoresize', 'code' ], - "toolbar": "undo redo | bold italic | code ", - "menubar": false + height: 500, + plugins: [ 'autoresize', 'code', 'hr', 'image' ], + toolbar: "undo redo | bold italic | hr image | code ", + 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 @@ }); } -