Add TinyMCE editor

src/CardInput.svelte

@@ -1,5 +1,15 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
+  import Editor from '@tinymce/tinymce-svelte';
+
+  let apiKey = "xoifjvd46mymq6y2ev6wyaj7utyykb3tz9pf9v8m98oeiqip";
+
+  let conf = {
+    "height": 500,
+    "plugins": [ 'autoresize', 'code' ],
+    "toolbar": "undo redo | bold italic | code ",
+    "menubar": false
+  };
   
   export let name, type, tags, attributes, description;
   
@@ -8,6 +18,14 @@
   function change_tags(e) {
     dispatch("change_tags", {tags: e.target.value});
   }
+
+  let tiny;
+  
+  const tinymceloaded = () => {
+    tiny = window.tinymce.init({
+      selector: "textarea.attributes"
+    });
+  }
 </script>
 
 <style>
@@ -23,11 +41,11 @@
   <div class="row">Type: <input name="type" bind:value={type}/></div>
   <div class="row">Tags: <input name="tags" on:change={change_tags} value={tags}/></div>
   <div class="row">Attributes:
-    <textarea bind:value={attributes}></textarea>
+    <Editor {apiKey} {conf} bind:value={attributes}/>
   </div>
   <div class="row">Description:
-    <textarea bind:value={description}></textarea>
-    </div>
+    <Editor {apiKey} {conf} bind:value={description}/>
+  </div>
   <div class="row">
     <button on:click={e => dispatch('add_card')}>+</button>
     <button on:click={e => dispatch('remove_card')}>-</button>