added rich text editor

package-lock.json

@@ -480,16 +480,6 @@
       "dev": true,
       "optional": true
     },
-    "bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
     "bl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-2.2.0.tgz",
@@ -859,6 +849,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "cl-editor": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cl-editor/-/cl-editor-2.0.0.tgz",
+      "integrity": "sha512-AwrUILNTM2rB1qqjsNga0PCdf7UHtUNSa0eUgvVnMWURool0n0muoZCJGh9HCvItGb9a7PsKiOh9MrgmFVXH4A==",
+      "requires": {
+        "svelte": "^3.18.2",
+        "svelte-ts-preprocess": "^1.1.3"
+      }
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -1660,13 +1659,6 @@
       "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
       "dev": true
     },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "dev": true,
-      "optional": true
-    },
     "fill-range": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -2716,13 +2708,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
-    "nan": {
-      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
-      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
-      "dev": true,
-      "optional": true
-    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -4194,8 +4179,7 @@
     "svelte": {
       "version": "3.23.0",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.23.0.tgz",
-      "integrity": "sha512-cnyd96bK/Nw5DnYuB1hzm5cl6+I1fpmdKOteA7KLzU9KGLsLmvWsSkSKbcntzODCLmSySN3HjcgTHRo6/rJNTw==",
+      "integrity": "sha512-cnyd96bK/Nw5DnYuB1hzm5cl6+I1fpmdKOteA7KLzU9KGLsLmvWsSkSKbcntzODCLmSySN3HjcgTHRo6/rJNTw=="
-      "dev": true
     },
     "svelte-dev-helper": {
       "version": "1.1.9",
@@ -4213,6 +4197,14 @@
         "svelte-dev-helper": "^1.1.9"
       }
     },
+    "svelte-ts-preprocess": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/svelte-ts-preprocess/-/svelte-ts-preprocess-1.1.3.tgz",
+      "integrity": "sha512-wu4PYCM1H2M2/yZQxJBGLs74HWiusT2Lz/G1Q3WpKpvJNLYuP52zELDA5oT8UaHUTBg4IDvd0lHqzCd3gXIDyQ==",
+      "requires": {
+        "typescript": "^3.4.4"
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -4360,6 +4352,11 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typescript": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz",
+      "integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ=="
+    },
     "uglify-js": {
       "version": "3.9.4",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.9.4.tgz",
@@ -4635,11 +4632,7 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true,
+          "optional": true
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
         },
         "glob-parent": {
           "version": "3.1.0",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "bcrypt": "^4.0.1",
     "body-parser": "^1.19.0",
+    "cl-editor": "^2.0.0",
     "compression": "^1.7.1",
     "cookie-parser": "^1.4.5",
     "dotenv": "^8.2.0",

src/routes/cms/index.svelte

@@ -8,11 +8,27 @@
     }
 </script>
 
+<script>
+    import { onMount } from 'svelte';
+    import Editor from 'cl-editor/src/Editor.svelte';
+
+    let editor;
+
+    function preview()
+    {
+        alert(editor.getHtml(true));
+    }
+</script>
+
+<svelte:head>
+    <title>Publish | HOWFEED.BIZ</title>
+</svelte:head>
+
 <div class="content">
     <h1>HowFeed Publisher</h1>
     <form method="POST" action="/cms/article">
-        
+        <Editor bind:this={editor} />
-        <textarea name="content"></textarea>
+        <button on:click|preventDefault={preview}>Preview</button>
         <button type="submit">Submit</button>
     </form>
 </div>