feat: Add quill editor support (#7755)

app/Domains/Vault/ManageJournals/Web/ViewHelpers/JournalShowViewHelper.php

@@ -79,7 +79,7 @@ public static function postsInYear(Journal $journal, int $year, User $user): Col
                 ->map(fn (Post $post) => [
                     'id' => $post->id,
                     'title' => $post->title,
-                    'excerpt' => $post->excerpt,
+                    'excerpt' => Str::of($post->excerpt)->stripTags(),
                     'written_at_day' => Str::upper(DateHelper::formatShortDay($post->written_at)),
                     'written_at_day_number' => DateHelper::formatDayNumber($post->written_at),
                     'photo' => optional(optional($post)->files)->first() ? [

app/Domains/Vault/ManageJournals/Web/ViewHelpers/PostShowViewHelper.php

@@ -123,12 +123,9 @@ private static function getSections(Post $post): Collection
             ->whereNotNull('content')
             ->get()
             ->map(fn (PostSection $section) => [
-                'id' => $section->id,
-                'label' => $section->label,
-                'content' => (string) Str::of($section->content)->markdown([
-                    'html_input' => 'strip',
-                    'allow_unsafe_links' => false,
-                ]),
+                'id'      => $section->id,
+                'label'   => $section->label,
+                'content' => $section->content
             ]);
     }
 

package.json

@@ -64,5 +64,8 @@
       "vendor/bin/pint"
     ]
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "quill": "^2.0.3"
+  }
 }

resources/js/Components/QuillEditor.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { ref, onMounted, watch, nextTick } from 'vue';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  maxLength: { type: Number, default: 255 },
+  toolbar: { type: Array, default: () => [
+    ['bold', 'italic', 'underline', 'strike'],    
+    ['blockquote', 'link', 'image'],                                 
+    [{ list: 'ordered' }, { list: 'bullet' }],                             
+    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+    [{ color: [] }, { background: [] }],          
+    [{ font: [] }],
+    [{ align: [] }],  
+  ] },
+  editorHeight: { type: String, default: '200px' },
+label: { type: String, default: '' }, 
+});
+
+const emit = defineEmits(['update:modelValue']);
+const editorRef = ref(null);
+const charCount = ref(0);
+let quill;
+
+onMounted(() => {
+  nextTick().then(() => {
+    quill = new Quill(editorRef.value, {
+      theme: 'snow',
+      placeholder: props.placeholder,
+      modules: { toolbar: props.toolbar },
+    });
+
+    quill.root.innerHTML = props.modelValue || '';
+    charCount.value = quill.getText().trim().length;
+
+    quill.on('text-change', () => {
+      let text = quill.getText().trim();
+
+      if (text.length > props.maxLength) {
+        const truncated = text.substring(0, props.maxLength);
+        quill.deleteText(0, quill.getLength());
+        quill.insertText(0, truncated);
+      }
+
+      charCount.value = quill.getText().trim().length;
+      emit('update:modelValue', quill.root.innerHTML);
+    });
+  });
+});
+
+watch(() => props.modelValue, (val) => {
+  if (quill && quill.root.innerHTML !== val) {
+    quill.root.innerHTML = val || '';
+    charCount.value = quill.getText().trim().length;
+  }
+});
+</script>
+
+<template>
+  <div>
+
+    <!-- Optional label -->
+    <label v-if="label" class="mb-2 block text-sm dark:text-gray-100">
+      {{ label }}
+    </label>
+
+    <div ref="editorRef" :style="{ minHeight: editorHeight }" class="bg-white dark:bg-gray-800"></div>
+    <p class="text-sm text-gray-500 mt-1 text-right">
+      {{ charCount }}/{{ maxLength }}
+    </p>
+  </div>
+</template>

resources/js/Pages/Vault/Journal/Post/Edit.vue

@@ -17,6 +17,7 @@ import ContactSelector from '@/Shared/Form/ContactSelector.vue';
 import JetConfirmationModal from '@/Components/Jetstream/ConfirmationModal.vue';
 import JetDangerButton from '@/Components/Jetstream/DangerButton.vue';
 import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
+import QuillEditor from '@/Components/QuillEditor.vue';
 
 const props = defineProps({
   layoutData: Object,
@@ -318,16 +319,15 @@ const destroy = () => {
                   :maxlength="255"
                   @esc-key-pressed="createNoteModalShown = false" />
 
-                <div v-for="section in form.sections" :key="section.id" class="mb-8">
-                  <text-area
+                <div v-for="(section, index) in form.sections" :key="section.id" class="mb-8">
+                  <QuillEditor
                     v-model="section.content"
-                    :label="section.label"
-                    :rows="10"
-                    :required="true"
-                    :maxlength="65535"
-                    :markdown="true"
-                    :textarea-class="'block w-full'" />
+                    :label="`${section.label}`"
+                    :max-length="65535"
+                    :editor-height="'200px'"
+                  />
                 </div>
+
               </div>
             </div>
           </div>

resources/js/Pages/Vault/Journal/Post/Show.vue

@@ -7,6 +7,7 @@ defineProps({
   layoutData: Object,
   data: Object,
 });
+
 </script>
 
 <template>
@@ -138,7 +139,7 @@ defineProps({
                     {{ section.label }}
                   </div>
 
-                  <div class="mb-6" v-html="section.content"></div>
+                  <div v-if="section.content" class="mb-6" v-html="section.content"></div>
                 </div>
               </div>