feat: add markdown support to journal entry (monicahq/chandler#444)

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

@@ -13,6 +13,7 @@
 use App\Models\Tag;
 use App\Models\User;
 use Illuminate\Support\Collection;
+use Illuminate\Support\Str;
 
 class PostShowViewHelper
 {
@@ -121,7 +122,10 @@ private static function getSections(Post $post): Collection
             ->map(fn (PostSection $section) => [
                 'id' => $section->id,
                 'label' => $section->label,
-                'content' => $section->content,
+                'content' => (string) Str::of($section->content)->markdown([
+                    'html_input' => 'strip',
+                    'allow_unsafe_links' => false,
+                ]),
             ]);
     }
 

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

@@ -325,14 +325,15 @@ const destroy = () => {
                   :maxlength="255"
                   @esc-key-pressed="createNoteModalShown = false" />
 
-                <div v-for="section in form.sections" :key="section.id">
+                <div v-for="section in form.sections" :key="section.id" class="mb-8">
                   <text-area
                     v-model="section.content"
                     :label="section.label"
                     :rows="10"
                     :required="true"
                     :maxlength="65535"
-                    :textarea-class="'block w-full mb-8'" />
+                    :markdown="true"
+                    :textarea-class="'block w-full'" />
                 </div>
               </div>
             </div>

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

@@ -138,7 +138,7 @@ defineProps({
                     {{ section.label }}
                   </div>
 
-                  <div class="mb-6">{{ section.content }}</div>
+                  <div class="mb-6" v-html="section.content"></div>
                 </div>
               </div>
 

resources/js/Shared/Form/TextArea.vue

@@ -26,6 +26,16 @@
         {{ charactersLeft }}
       </span>
     </div>
+    <p v-if="markdown" class="rounded-b-lg bg-slate-100 px-3 py-2 text-xs">
+      We
+      <a
+        href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
+        target="_blank"
+        class="text-blue-500 hover:underline"
+        >support Markdown</a
+      >
+      to format the text (bold, lists, headings, etc...).
+    </p>
 
     <p v-if="help" class="f7 mb3 lh-title">
       {{ help }}
@@ -83,6 +93,10 @@ export default {
       type: Number,
       default: null,
     },
+    markdown: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: ['esc-key-pressed', 'update:modelValue'],

tests/Unit/Domains/Vault/ManageJournals/Web/ViewHelpers/PostShowViewHelperTest.php

@@ -39,7 +39,7 @@ public function it_gets_the_data_needed_for_the_view(): void
         $section = PostSection::factory()->create([
             'post_id' => $post->id,
             'label' => 'super',
-            'content' => 'this is a content',
+            'content' => '# this is a content',
         ]);
         $tag = Tag::factory()->create([
             'name' => 'super',
@@ -69,14 +69,16 @@ public function it_gets_the_data_needed_for_the_view(): void
             $array['title_exists']
         );
         $this->assertEquals(
-            [
-                0 => [
-                    'id' => $section->id,
-                    'label' => 'super',
-                    'content' => 'this is a content',
-                ],
-            ],
-            $array['sections']->toArray()
+            $section->id,
+            $array['sections']->toArray()[0]['id']
+        );
+        $this->assertEquals(
+            'super',
+            $array['sections']->toArray()[0]['label']
+        );
+        $this->assertEquals(
+            '<h1>this is a content</h1>',
+            trim($array['sections']->toArray()[0]['content'])
         );
         $this->assertEquals(
             [