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-07-02 15:24:09 +09:00
parent 3dd30d7f76
commit 00cb4a293d
12 changed files with 182 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/content/ContentMarkdownCalloutEditor.vue
View File

@@ -109,7 +109,6 @@ const onBodyInput = (payload) => {
<ContentMarkdownEditableInline
block-class="content-markdown-callout-editor__body min-w-0 text-[15px] leading-8 text-[var(--site-text)]"
enter-mode="multiline"
plain-text
arrow-exit-creates-line
preserve-empty-line-on-full-delete
:source-line="bodySourceLine"

32
components/content/ContentMarkdownInlineSegments.vue
View File

@@ -43,10 +43,18 @@ const getInlineColorClass = (color) => `content-markdown-inline-segments__color-
:key="`inline-segment-0-${segmentIndex}`"
class="content-markdown-inline-segments__segment"
>
<strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
<em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
<sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
<sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
<strong v-if="segment.type === 'strong'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</strong>
<em v-else-if="segment.type === 'em'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</em>
<sub v-else-if="segment.type === 'subscript'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</sub>
<sup v-else-if="segment.type === 'superscript'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</sup>
<code v-else-if="segment.type === 'code'" class="content-markdown-inline-segments__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
<a v-else-if="segment.type === 'link'" :class="linkClass" :href="segment.href" target="_blank" rel="noreferrer">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
@@ -72,10 +80,18 @@ const getInlineColorClass = (color) => `content-markdown-inline-segments__color-
:key="`inline-segment-${offsetIndex + 1}-${segmentIndex}`"
class="content-markdown-inline-segments__segment"
>
<strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
<em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
<sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
<sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
<strong v-if="segment.type === 'strong'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</strong>
<em v-else-if="segment.type === 'em'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</em>
<sub v-else-if="segment.type === 'subscript'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</sub>
<sup v-else-if="segment.type === 'superscript'">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />
</sup>
<code v-else-if="segment.type === 'code'" class="content-markdown-inline-segments__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
<a v-else-if="segment.type === 'link'" :class="linkClass" :href="segment.href" target="_blank" rel="noreferrer">
<ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" :multiline="multiline" />

2
components/content/ContentMarkdownRenderer.vue
View File

@@ -3343,7 +3343,7 @@ onBeforeUnmount(() => {
:title="block.title"
:background="block.calloutBackground"
>
<ContentMarkdownInlineSegments :text="block.text" link-class="underline underline-offset-4" />
<ContentMarkdownInlineSegments :text="block.text" multiline />
</ProseCallout>
<ContentMarkdownToggleEditor
v-else-if="block.type === 'toggle' && interactive"