Files
sori.studio/components/content/ContentMarkdownBlockGroup.vue

57 lines
1.3 KiB
Vue

<script>
import { h, mergeProps } from 'vue'
export default {
name: 'ContentMarkdownBlockGroup',
inheritAttrs: false,
props: {
/** 라이브 편집 모드 여부 */
interactive: {
type: Boolean,
default: false
},
/** 블록 앞 삽입 영역 표시 여부 */
showInsert: {
type: Boolean,
default: false
},
/** 블록 앞 삽입 영역 활성 상태 */
insertActive: {
type: Boolean,
default: false
}
},
setup(props, { slots, attrs }) {
/**
* 삽입 영역과 블록 본문을 조건부로 묶어 fragment 주석을 줄인다.
* @returns {import('vue').VNode|import('vue').VNode[]} 렌더 노드
*/
return () => {
const children = []
if (props.interactive && props.showInsert) {
children.push(h('div', mergeProps({
class: [
'content-markdown-renderer__block-insert',
props.insertActive ? 'content-markdown-renderer__block-insert--active' : ''
]
}, attrs)))
}
const defaultContent = slots.default?.()
if (defaultContent) {
const normalized = Array.isArray(defaultContent) ? defaultContent : [defaultContent]
children.push(...normalized)
}
if (children.length === 1) {
return children[0]
}
return children
}
}
}
</script>