👔 Disabled preserve empty lines on the article posts

app/components/Post/PostItem.vue

@@ -65,7 +65,11 @@ const emit = defineEmits<{
   react: [symbol: string, attitude: number, delta: number]
 }>()
 
-const { render } = useMarkdownProcessor()
+const preserveEmptyLinesRef = ref(true) // New ref for the option
+
+const { render } = useMarkdownProcessor({
+  preserveEmptyLines: preserveEmptyLinesRef
+})
 
 const htmlContent = ref<string>("")
 
@@ -74,8 +78,9 @@ function handleReaction(symbol: string, attitude: number, delta: number) {
 }
 
 watch(
-  props.item,
+  () => props.item, // Watch the item prop directly
   (value) => {
+    preserveEmptyLinesRef.value = value.type !== 1 // Update the ref
     if (value.content) htmlContent.value = render(value.content)
   },
   { immediate: true, deep: true }

app/composables/useMarkdownProcessor.ts

@@ -1,3 +1,4 @@
+import { computed, unref, type Ref } from "vue"
 import {
   createMarkdownExit,
   type PluginSimple,
@@ -12,13 +13,16 @@ import katex from "katex"
 import "highlight.js/styles/a11y-dark.min.css"
 
 export function useMarkdownProcessor(
-  { preserveEmptyLines }: { preserveEmptyLines?: boolean } = {
+  options: { preserveEmptyLines?: boolean | Ref<boolean> } = {
     preserveEmptyLines: true
   }
 ) {
   const serverUrl = useSolarNetworkUrl()
 
-  const processor = createMarkdownExit({
+  const processor = computed(() => {
+    const currentPreserveEmptyLines = unref(options.preserveEmptyLines)
+
+    const md = createMarkdownExit({
       breaks: true,
       html: true,
       linkify: true,
@@ -33,12 +37,14 @@ export function useMarkdownProcessor(
       .use(hljsMarkdown, { hljs })
       .use(imgSolarNetworkPlugin, { serverUrl: serverUrl })
 
-  if (preserveEmptyLines) {
-    processor.use(preserveEmptyLinesPlugin)
+    if (currentPreserveEmptyLines) {
+      md.use(preserveEmptyLinesPlugin)
     }
+    return md
+  })
 
   return {
-    render: (content: string) => processor.render(content)
+    render: (content: string) => processor.value.render(content)
   }
 }
 

app/pages/posts/[...slug].vue

@@ -139,7 +139,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, ref } from "vue" // Added ref
 import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
 import type { SnPost } from "~/types/api"
 
@@ -147,10 +147,14 @@ const route = useRoute()
 const slugParts = route.params.slug as string[]
 const id = slugParts.join("/")
 
-const { render } = useMarkdownProcessor()
-
 const apiServer = useSolarNetwork()
 
+const preserveEmptyLinesRef = ref(true) // New ref for the option
+
+const { render } = useMarkdownProcessor({
+  preserveEmptyLines: preserveEmptyLinesRef
+})
+
 const {
   data: postData,
   error,
@@ -159,6 +163,10 @@ const {
   try {
     const resp = await apiServer(`/sphere/posts/${id}`)
     const post = resp as SnPost
+
+    // Update the ref based on post.type
+    preserveEmptyLinesRef.value = post.type !== 1
+
     let html = ""
     if (post.content) {
       html = render(post.content)