게시글 상세 목차 사이드바 추가 v1.5.12

components/content/ContentMarkdownRenderer.vue

@@ -21,6 +21,7 @@ import {
 import { buildCodeBlockLines, parseCodeFenceLine } from '../../lib/markdown-code-block.js'
 import { buildToggleBlockLines } from '../../lib/markdown-toggle.js'
 import { CALLOUT_BACKGROUND_OPTIONS, parseCalloutOptions } from '../../lib/markdown-callout.js'
+import { createHeadingIdFactory } from '../../lib/markdown-toc.js'
 import ContentMarkdownCodeBlockEditor from './ContentMarkdownCodeBlockEditor.vue'
 import ProseCodeBlock from './ProseCodeBlock.vue'
 import ContentMarkdownCalloutEditor from './ContentMarkdownCalloutEditor.vue'
@@ -731,6 +732,18 @@ const parseMarkdownBlocks = (markdown) => {
 }
 
 const blocks = computed(() => parseMarkdownBlocks(props.content))
+const headingIdsByBlock = computed(() => {
+  const createHeadingId = createHeadingIdFactory()
+  const ids = {}
+
+  for (const block of blocks.value) {
+    if (block.type === 'heading' && block.level >= 1 && block.level <= 3) {
+      ids[block.id] = createHeadingId(block.text)
+    }
+  }
+
+  return ids
+})
 
 /** @type {import('vue').ComputedRef<number>} 문서 맨 아래 단일 이미지 삽입 줄 */
 const tailInsertBeforeLine = computed(() => {
@@ -2323,7 +2336,7 @@ onBeforeUnmount(() => {
         @delete-line="onDeleteLine"
         @merge-with-previous="onMergeWithPreviousLine(block.meta.startLine, $event)"
       />
-      <ProseHeading v-else-if="block.type === 'heading'" :level="block.level">
+      <ProseHeading v-else-if="block.type === 'heading'" :id="headingIdsByBlock[block.id]" :level="block.level">
         <template v-for="(segment, segmentIndex) in parseInlineSegments(block.text)" :key="`${block.id}-heading-${segmentIndex}`">
           <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
           <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>

components/content/ProseHeading.vue

@@ -3,6 +3,10 @@ const props = defineProps({
   level: {
     type: Number,
     default: 2
+  },
+  id: {
+    type: String,
+    default: ''
   }
 })
 
@@ -12,7 +16,8 @@ const tagName = computed(() => `h${Math.min(Math.max(props.level, 1), 6)}`)
 <template>
   <component
     :is="tagName"
-    class="prose-heading mb-2.5 font-semibold leading-[1.25] tracking-normal first:mt-0"
+    :id="id || undefined"
+    class="prose-heading mb-2.5 scroll-mt-20 font-semibold leading-[1.25] tracking-normal first:mt-0"
     :class="{
       'text-[clamp(1.35rem,1.25rem+0.35vw,1.6rem)] leading-[1.15]': level === 1,
       'text-[clamp(1.2rem,1.15rem+0.3vw,1.4rem)]': level === 2,