zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

콜아웃 제목과 기본 아이콘 정리

Browse Source
This commit is contained in:
zenn
2026-06-04 15:40:43 +09:00
parent 67fbba3814
commit 94226423c7
17 changed files with 170 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/admin/AdminBlockEditor.vue
View File

@@ -183,7 +183,7 @@ const createEditorBlock = (type = 'paragraph', text = '', level = null, id = '',
title: options.title || '',
width: options.width || 'regular',
images: options.images || [],
calloutEmojiEnabled: options.calloutEmojiEnabled ?? true,
calloutEmojiEnabled: options.calloutEmojiEnabled === true,
calloutEmoji: options.calloutEmoji || '💡',
calloutBackground: options.calloutBackground || 'blue'
})
@@ -195,7 +195,7 @@ const createEditorBlock = (type = 'paragraph', text = '', level = null, id = '',
*/
const parseCalloutOptions = (line) => {
const options = {
calloutEmojiEnabled: true,
calloutEmojiEnabled: false,
calloutEmoji: '💡',
calloutBackground: 'blue'
}

13
components/admin/AdminEditorBlockPanel.vue
View File

@@ -138,7 +138,7 @@ const panelMeta = computed(() => {
}
if (props.panel.kind === 'callout') {
return '아이콘·배경색'
return '제목·아이콘·배경색'
}
if (props.panel.kind === 'code') {
@@ -246,6 +246,17 @@ const onPanelFocusOut = (event) => {
<template v-else-if="panel.kind === 'callout'">
<div class="admin-editor-block-panel__callout-settings grid gap-5">
<label class="admin-editor-block-panel__field grid gap-2 text-sm">
<span class="font-semibold text-[#394047]">제목</span>
<input
class="rounded border border-[#d7dde2] bg-[#eff1f2] px-3 py-2 text-sm text-[#15171a] outline-none transition-colors focus:border-[#8e9cac]"
:value="panel.title"
type="text"
placeholder="주의사항"
@input="emit('update-callout-options', { title: $event.target.value })"
>
</label>
<label class="flex cursor-pointer items-center justify-between gap-3 rounded border border-[#edf0f2] bg-[#fafafa] px-3 py-3 text-sm font-semibold text-[#394047]">
<span>아이콘 표시</span>
<input

5
components/admin/AdminMarkdownEditor.vue
View File

@@ -2202,7 +2202,7 @@ const updateActiveQuoteBackground = (background) => {
/**
* 현재 콜아웃 블록 옵션을 수정한다.
* @param {Partial<{ calloutEmojiEnabled: boolean, calloutEmoji: string, calloutBackground: string }>} patch - 변경 옵션
* @param {Partial<{ calloutEmojiEnabled: boolean, calloutEmoji: string, calloutBackground: string, title: string }>} patch - 변경 옵션
* @returns {void}
*/
const updateActiveCalloutOptions = (patch = {}) => {
@@ -2219,7 +2219,8 @@ const updateActiveCalloutOptions = (patch = {}) => {
const nextLine = buildCalloutOpenerLine({
calloutEmojiEnabled: patch.calloutEmojiEnabled ?? block.calloutEmojiEnabled,
calloutEmoji: patch.calloutEmoji ?? block.calloutEmoji,
calloutBackground: nextBackground
calloutBackground: nextBackground,
title: patch.title ?? block.title
})
const lines = (markdownValue.value || '').split('\n')
const nextLines = [...lines]

46
components/content/ContentMarkdownCalloutEditor.vue
View File

@@ -17,6 +17,10 @@ const props = defineProps({
type: String,
default: '💡'
},
calloutTitle: {
type: String,
default: ''
},
calloutBackground: {
type: String,
default: 'blue'
@@ -50,7 +54,8 @@ const commitCalloutLines = (contentLines) => {
buildCalloutOpenerLine({
calloutEmojiEnabled: props.calloutEmojiEnabled,
calloutEmoji: props.calloutEmoji,
calloutBackground: props.calloutBackground
calloutBackground: props.calloutBackground,
title: props.calloutTitle
}),
...contentLines,
':::'
@@ -87,31 +92,24 @@ const onBodyCommit = (payload) => {
:data-source-line="blockSourceLine"
>
<ProseCallout
:emoji-enabled="false"
:emoji-enabled="calloutEmojiEnabled"
:emoji="calloutEmoji"
:background="calloutBackground"
:title="calloutTitle"
>
<div class="content-markdown-callout-editor__inner flex items-start gap-2">
<span
v-if="calloutEmojiEnabled"
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"
>
{{ calloutEmoji || '💡' }}
</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"
plain-text
:source-line="bodySourceLine"
:source-line-count="bodyLines.length"
:model-value="modelValue"
@commit="onBodyCommit"
@delete-line="emit('delete-line', $event)"
@insert-below="emit('insert-below', $event)"
@merge-with-previous="emit('merge-with-previous', bodySourceLine, $event)"
@leave-block="emit('leave-block', $event)"
/>
</div>
<ContentMarkdownEditableInline
block-class="content-markdown-callout-editor__body min-w-0 text-[15px] leading-8 text-[var(--site-text)]"
enter-mode="multiline"
plain-text
:source-line="bodySourceLine"
:source-line-count="bodyLines.length"
:model-value="modelValue"
@commit="onBodyCommit"
@delete-line="emit('delete-line', $event)"
@insert-below="emit('insert-below', $event)"
@merge-with-previous="emit('merge-with-previous', bodySourceLine, $event)"
@leave-block="emit('leave-block', $event)"
/>
</ProseCallout>
</div>
</template>

4
components/content/ContentMarkdownRenderer.vue
View File

@@ -139,7 +139,7 @@ const createBlock = (type = 'paragraph', text = '', level = null, id = '', optio
width: options.width || 'regular',
images: options.images || [],
meta: options.meta && typeof options.meta === 'object' ? { ...options.meta } : {},
calloutEmojiEnabled: options.calloutEmojiEnabled ?? true,
calloutEmojiEnabled: options.calloutEmojiEnabled === true,
calloutEmoji: options.calloutEmoji || '💡',
calloutBackground: options.calloutBackground || 'blue',
quoteBackground: options.quoteBackground || 'gray',
@@ -2642,6 +2642,7 @@ onBeforeUnmount(() => {
v-else-if="block.type === 'callout' && interactive"
:callout-emoji-enabled="block.calloutEmojiEnabled"
:callout-emoji="block.calloutEmoji"
:callout-title="block.title"
:callout-background="block.calloutBackground"
:block-source-line="block.meta.startLine"
:body-source-line="block.meta.startLine + 1"
@@ -2656,6 +2657,7 @@ onBeforeUnmount(() => {
v-else-if="block.type === 'callout'"
:emoji-enabled="block.calloutEmojiEnabled"
:emoji="block.calloutEmoji"
:title="block.title"
:background="block.calloutBackground"
>
<template v-for="(segment, segmentIndex) in parseInlineSegments(block.text)" :key="`${block.id}-callout-${segmentIndex}`">

17
components/content/ProseCallout.vue
View File

@@ -8,6 +8,10 @@ const props = defineProps({
type: String,
default: '💡'
},
title: {
type: String,
default: ''
},
background: {
type: String,
default: 'blue'
@@ -44,11 +48,14 @@ const backgroundClass = computed(() => {
class="prose-callout prose-callout-card mb-2.5 rounded-[10px] p-5 text-[15px] leading-8 text-[var(--site-text)]"
:class="backgroundClass"
>
<div class="flex items-start gap-2">
<span v-if="emojiEnabled" class="inline-flex shrink-0 text-[20px] leading-none">{{ emoji || '💡' }}</span>
<div class="min-w-0 flex-1 whitespace-pre-line">
<slot />
</div>
<div v-if="emojiEnabled || title" class="prose-callout-card__header mb-4 flex items-start gap-2">
<span v-if="emojiEnabled" class="prose-callout-card__emoji inline-flex shrink-0 pt-0.5 text-[20px] leading-none">{{ emoji || '💡' }}</span>
<strong v-if="title" class="prose-callout-card__title min-w-0 text-[18px] leading-[1.35] font-bold text-[#050505]">
{{ title }}
</strong>
</div>
<div class="prose-callout-card__body min-w-0 whitespace-pre-line">
<slot />
</div>
</aside>
</template>