라이브 작성 블록 렌더링과 발행 시각 보정

components/content/ContentMarkdownEditableInline.vue

@@ -2,6 +2,7 @@
 import {
   getEditableCaretOffset,
   markdownInlineToHtml,
+  markdownMultilineBlockToHtml,
   markdownMultilineInlineToHtml,
   readEditableTextFromElement,
   setEditableCaretOffset
@@ -96,6 +97,11 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  /** true면 멀티라인 본문 안의 목록 같은 블록 문법도 라이브 표시한다. */
+  blockMarkdown: {
+    type: Boolean,
+    default: false
+  },
   /** 전체 선택 삭제 시 비어 있는 원본 줄을 보존할지 여부 */
   preserveEmptyLineOnFullDelete: {
     type: Boolean,
@@ -167,6 +173,12 @@ const toEditorHtml = () => markdownInlineToHtml(props.modelValue.replace(/\n/g,
  */
 const toMultilineEditorHtml = () => markdownMultilineInlineToHtml(props.modelValue)
 
+/**
+ * modelValue를 블록 마크다운 포함 멀티라인 편집용 HTML로 변환한다.
+ * @returns {string} HTML
+ */
+const toMultilineBlockEditorHtml = () => markdownMultilineBlockToHtml(props.modelValue)
+
 /**
  * plainText 모드용 편집 텍스트를 만든다.
  * @param {string} value - 본문
@@ -197,7 +209,7 @@ const syncEditorHtml = (options = {}) => {
   }
 
   rootRef.value.innerHTML = resolvedEnterMode.value === 'multiline'
-    ? toMultilineEditorHtml()
+    ? (props.blockMarkdown ? toMultilineBlockEditorHtml() : toMultilineEditorHtml())
     : toEditorHtml()
 }
 
@@ -1551,6 +1563,22 @@ defineExpose({ focusEditor, readEditorValue })
   color: #fff;
 }
 
+.content-markdown-editable-inline :deep(ul),
+.content-markdown-editable-inline :deep(ol) {
+  margin: 0.35rem 0;
+  padding-left: 1.25rem;
+}
+
+.content-markdown-editable-inline :deep(li) {
+  margin: 0.15rem 0;
+  padding-left: 0.15rem;
+}
+
+.content-markdown-editable-inline :deep(li::marker) {
+  color: #2eb6ea;
+  font-weight: 700;
+}
+
 .content-markdown-editable-inline :deep([data-inline-color='gray']) {
   color: var(--site-muted);
 }