게시글 상세 목차 사이드바 추가 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>