95 lines
2.4 KiB
Vue
95 lines
2.4 KiB
Vue
<script setup>
|
|
import { buildCalloutOpenerLine } from '../../lib/markdown-callout.js'
|
|
import ProseCallout from './ProseCallout.vue'
|
|
import ContentMarkdownEditableInline from './ContentMarkdownEditableInline.vue'
|
|
|
|
const props = defineProps({
|
|
/** 콜아웃 본문 */
|
|
modelValue: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
calloutEmojiEnabled: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
calloutEmoji: {
|
|
type: String,
|
|
default: '💡'
|
|
},
|
|
calloutBackground: {
|
|
type: String,
|
|
default: 'blue'
|
|
},
|
|
/** 본문 첫 줄 source-line(0-based) */
|
|
bodySourceLine: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
/** 콜아웃 선언 줄 source-line(0-based) */
|
|
blockSourceLine: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['commit'])
|
|
|
|
/**
|
|
* 콜아웃 마크다운 줄을 반영한다.
|
|
* @param {string} body - 본문
|
|
* @returns {void}
|
|
*/
|
|
const commitCallout = (body) => {
|
|
const contentLines = String(body ?? '').replace(/\r/g, '').split('\n')
|
|
|
|
emit('commit', [
|
|
buildCalloutOpenerLine({
|
|
calloutEmojiEnabled: props.calloutEmojiEnabled,
|
|
calloutEmoji: props.calloutEmoji,
|
|
calloutBackground: props.calloutBackground
|
|
}),
|
|
...contentLines,
|
|
':::'
|
|
])
|
|
}
|
|
|
|
/**
|
|
* 본문 편집 반영
|
|
* @param {string} body - 본문
|
|
* @returns {void}
|
|
*/
|
|
const onBodyCommit = (body) => {
|
|
commitCallout(body)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="content-markdown-callout-editor relative"
|
|
:data-source-line="blockSourceLine"
|
|
>
|
|
<ProseCallout
|
|
:emoji-enabled="false"
|
|
:background="calloutBackground"
|
|
>
|
|
<div class="content-markdown-callout-editor__inner flex items-start gap-2">
|
|
<span
|
|
class="content-markdown-callout-editor__emoji inline-flex size-9 shrink-0 items-center justify-center rounded-md text-xl text-[var(--site-text)]"
|
|
aria-hidden="true"
|
|
>
|
|
<span v-if="calloutEmojiEnabled">{{ calloutEmoji || '💡' }}</span>
|
|
<span v-else class="text-base text-[#8e9cac]">+</span>
|
|
</span>
|
|
<ContentMarkdownEditableInline
|
|
block-class="content-markdown-callout-editor__body min-w-0 flex-1 text-[15px] leading-8 text-[var(--site-text)]"
|
|
enter-mode="multiline"
|
|
:source-line="bodySourceLine"
|
|
:model-value="modelValue"
|
|
@commit="onBodyCommit"
|
|
/>
|
|
</div>
|
|
</ProseCallout>
|
|
</div>
|
|
</template>
|