CLASSROOMIO-T-21: Course landing page + editor

src/components/TextEditor/index.svelte

@@ -1,89 +1,77 @@
 <script>
-  import marked from 'marked';
-  import PrimaryButton from '../PrimaryButton/index.svelte';
+  import { onMount } from 'svelte';
 
-  let isWriteMode = true;
-  export let value = ``;
-  export let placeholder = ``;
-  const activeClassName = 'border-b-2 border-blue-700';
+  export let onChange;
+  export let content;
+  export let disable;
+  export let docId;
+  export let placeholder = 'Type something...';
 
-  const handleTabClick = (tab) => (event) => {
-    isWriteMode = tab === 1;
+  const settings = {
+    modules: {
+      toolbar: {
+        modules: {
+          syntax: true,
+          toolbar: [
+            [{ header: [1, 2, 3, false] }],
+            ['bold', 'italic', 'underline', 'strike'],
+            ['link', 'code-block'],
+          ],
+        },
+        placeholder: 'Type something...',
+        theme: 'snow',
+      },
+    },
+    theme: 'snow',
+    placeholder,
   };
+
+  let quill = null;
+  let container = null;
+
+  function resetContent(docId) {
+    if (quill && quill.setText) {
+      if (content) {
+        quill.setContents(JSON.parse(content));
+      } else {
+        quill.setText('');
+      }
+    }
+  }
+
+  onMount(async () => {
+    const { default: Quill } = await import('quill');
+
+    Quill.prototype.getHTML = function () {
+      return this.container.querySelector('.ql-editor').innerHTML;
+    };
+
+    Quill.prototype.setHTML = function (html) {
+      this.container.querySelector('.ql-editor').innerHTML = html;
+    };
+
+    quill = new Quill(container, settings);
+
+    quill.setHTML(content || '');
+
+    quill.on('text-change', function () {
+      onChange(quill.getHTML());
+    });
+  });
+
+  $: {
+    if (quill && quill.setText) {
+      if (disable) {
+        quill.disable(disable);
+      } else {
+        quill.enable(true);
+      }
+    }
+  }
+
+  $: resetContent(docId);
 </script>
 
-<div class="root mt-5 border border-gray rounded-md">
-  <div class="p-2 pb-0">
-    <button
-      on:click={handleTabClick(1)}
-      class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
-    >
-      Write
-    </button>
-    <button
-      on:click={handleTabClick(2)}
-      class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}"
-    >
-      Preview
-    </button>
-  </div>
-
-  <div class="m-2 mb-0 p-0">
-    {#if isWriteMode}
-      <textarea
-        bind:value
-        {placeholder}
-        class="border border-gray rounded-md p-2"
-      />
-    {:else}
-      <article class="m-auto preview prose prose-sm sm:prose p-2">
-        {@html marked(value)}
-      </article>
-    {/if}
-  </div>
-  {#if !isWriteMode}
-    <hr />
-  {/if}
-  <div class="flex justify-between items-center px-2 pb-1">
-    <div class="flex items-center text-sm">
-      <svg
-        class="octicon mr-2"
-        height="16"
-        viewBox="0 0 16 16"
-        version="1.1"
-        width="16"
-        aria-hidden="true"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"
-        />
-      </svg>
-      <span>Styling with Markdown is supported</span>
-    </div>
-
-    <PrimaryButton label="Answer" />
-  </div>
+<div class="p-2 w-full h-full">
+  <div bind:this={container} />
 </div>
-
-<style>
-  .root {
-    width: 100%;
-    min-height: 200px;
-  }
-
-  textarea {
-    width: 100%;
-    height: 150px;
-  }
-
-  .preview {
-    min-height: 150px;
-  }
-
-  .octicon {
-    display: inline-block;
-    vertical-align: text-top;
-    fill: currentColor;
-  }
-</style>