From 0cac048dff1864b45d52950ea98d3a8281e3c0b4 Mon Sep 17 00:00:00 2001
From: Michal Kunc <michkunc@gmail.com>
Date: Wed, 6 Apr 2022 16:47:18 +0200
Subject: [PATCH] Add TinyMCE editor

---
 package-lock.json    | 13 +++++++++++++
 package.json         |  1 +
 src/CardInput.svelte | 24 +++++++++++++++++++++---
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6ed035c..3f99d1f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -119,6 +119,14 @@
         }
       }
     },
+    "@tinymce/tinymce-svelte": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@tinymce/tinymce-svelte/-/tinymce-svelte-0.1.2.tgz",
+      "integrity": "sha512-QA5furKBoloH/fIVNtvNDB/AQfE1YFpPCRI5sRNjKL5rc0Sj0YCYXNGDVh7dIfoX8kd1Ivr9jg53igXGu1xIuw==",
+      "requires": {
+        "rollup-plugin-execute": "^1.1.1"
+      }
+    },
     "@tsconfig/svelte": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-2.0.1.tgz",
@@ -804,6 +812,11 @@
         }
       }
     },
+    "rollup-plugin-execute": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-execute/-/rollup-plugin-execute-1.1.1.tgz",
+      "integrity": "sha512-isCNR/VrwlEfWJMwsnmt5TBRod8dW1IjVRxcXCBrxDmVTeA1IXjzeLSS3inFBmRD7KDPlo38KSb2mh5v5BoWgA=="
+    },
     "rollup-plugin-livereload": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.5.tgz",
diff --git a/package.json b/package.json
index 6356c44..587f742 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@tsconfig/svelte": "^2.0.0"
   },
   "dependencies": {
+    "@tinymce/tinymce-svelte": "^0.1.2",
     "dompurify": "^2.3.6",
     "lz-string": "^1.4.4",
     "sirv-cli": "^2.0.0"
diff --git a/src/CardInput.svelte b/src/CardInput.svelte
index 894985c..d73a6d8 100644
--- a/src/CardInput.svelte
+++ b/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>