feat: Wysiwyg editor (#73)

Co-authored-by: amandesai01 <[email protected]>

package.json

@@ -17,9 +17,10 @@
     "@nuxtjs/tailwindcss": "6.12.1",
     "@profilecity/unstorage-s3-driver": "^0.0.3",
     "@tailwindcss/forms": "^0.5.7",
+    "@types/quill": "^2.0.14",
     "@vee-validate/nuxt": "^4.13.1",
     "@vee-validate/zod": "^4.13.1",
-    "@vueuse/core": "^10.11.1",
+    "@vueuse/core": "^10.11.0",
     "drizzle-kit": "^0.22.7",
     "drizzle-orm": "^0.31.2",
     "jsonwebtoken": "^9.0.2",
@@ -28,10 +29,11 @@
     "nuxt-cropper": "^0.0.4",
     "nuxt-icon": "^0.6.10",
     "pg": "^8.12.0",
+    "quill": "^2.0.2",
     "uncrypto": "^0.1.3",
     "unstorage": "^1.10.2",
     "vue": "^3.4.27",
-    "vue-router": "^4.4.3",
+    "vue-router": "^4.3.2",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/assets/css/style.css

@@ -8,8 +8,7 @@
 
 /* Additional Tailwind directives: https://tailwindcss.com/docs/functions-and-directives/#responsive */
 @layer utilities {
-    .rtl {
-        direction: rtl;
-    }
+  .rtl {
+    direction: rtl;
+  }
 }
-

src/components/Editor.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="snow-wrapper">
+    <div id="snow-container">
+      <div class="toolbar bg-white rounded-t-xl mt-2" v-if="!readOnly">
+        <span class="ql-formats">
+          <select class="ql-header" defaultValue="3">
+            <option value="1">Heading</option>
+            <option value="2">Subheading</option>
+            <option value="3">Normal</option>
+          </select>
+        </span>
+        <span class="ql-formats">
+          <button class="ql-bold"></button>
+          <button class="ql-italic"></button>
+          <button class="ql-underline"></button>
+        </span>
+        <span class="ql-formats">
+          <button class="ql-list" value="ordered"></button>
+          <button class="ql-list" value="bullet"></button>
+          <select class="ql-align" defaultValue="false">
+            <option label="left"></option>
+            <option label="center" value="center"></option>
+            <option label="right" value="right"></option>
+            <option label="justify" value="justify"></option>
+          </select>
+        </span>
+        <span class="ql-formats">
+          <button class="ql-link"></button>
+        </span>
+        <span class="ql-formats">
+          <button class="ql-clean"></button>
+        </span>
+      </div>
+      <div class="bg-white rounded-b-xl border p-4" :class="readOnly ? 'ql-e-blank' : ''" :id="editorId"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+import type Quill from 'quill';
+
+const props = withDefaults(defineProps<{
+  modelValue: string;
+  placeholder: string;
+  id?: string;
+  readOnly?: boolean;
+}>(), {
+  id: 'vidur-editor',
+  readOnly: false,
+});
+const emit = defineEmits<{
+  'update:modelValue': [],
+}>();
+
+const editorContent = useVModel(props, 'modelValue', emit);
+const editorId = props.id;
+let editorInstance: Quill | null;
+
+onMounted(async () => {
+  const QuillEditor = (await import('quill')).default;
+
+  editorInstance = new QuillEditor(`#${editorId}`, {
+    bounds: '#snow-container .ql-container',
+    modules: {
+      // syntax: true, TODO: ref: https://quilljs.com/docs/modules/syntax
+      toolbar: props.readOnly ? false : '#snow-container .toolbar',
+    },
+    placeholder: props.placeholder,
+    theme: 'snow',
+    readOnly: props.readOnly,
+  });
+
+  if (editorContent.value) {
+    editorInstance.root.innerHTML = editorContent.value;
+  }
+
+  editorInstance.on('text-change', () => {
+    if (!editorInstance) return;
+    editorContent.value = editorInstance.root.innerHTML;
+  });
+});
+
+onUnmounted(() => {
+  editorInstance = null;
+});
+</script>
+
+<style>
+@import 'quill/dist/quill.snow.css';
+
+.ql-editor {
+  padding: 0% !important;
+  border: 0px !important;
+}
+
+.ql-e-blank {
+  padding: 0% !important;
+  border: 0px !important;
+}
+</style>

src/pages/admin/postings/edit.vue

@@ -155,12 +155,22 @@ const onDelete = async () => {
           </div>
           <div class="mt-4">
             <label class="block text-sm font-medium mb-1" for="jobdescription">Job Description</label>
-            <textarea id="jobdescription" class="form-textarea w-full focus:border-zinc-300" rows="6" v-model="contents"
-              placeholder="We want someone who…" :disabled="isSubmitting"></textarea>
+            <ClientOnly>
+              <Editor placeholder="We are looking for someone who can..." v-model="contents" />
+              <template #fallback>
+                Loading editor...
+              </template>
+            </ClientOnly>
             <div class="text-xs mt-1 text-rose-500">{{ errors.contents }}</div>
           </div>
         </div>
       </div>
     </form>
   </div>
-</template>
+</template>
+
+<style>
+h1 {
+  @apply text-4xl;
+}
+</style>

src/pages/postings/[id].vue

@@ -42,6 +42,7 @@ const apply = async () => {
     isApplying.value = false;
   }
 }
+
 </script>
 
 <template>
@@ -97,11 +98,8 @@ const apply = async () => {
               </div>
             </div>
           </div>
-
           <hr class="my-6 border-t border-zinc-100" />
-
-          <p class="w-full" style="white-space: pre-line;">{{ posting.contents }}</p>
-
+          <Editor :read-only="true" v-model="posting.contents"/>
         </div>
 
         <!-- Sidebar -->
@@ -145,4 +143,8 @@ const apply = async () => {
       </a>
     </div>
   </div>
-</template>
+</template>
+
+<style>
+@import 'quill/dist/quill.snow.css';
+</style>