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-05 10:38:00 +09:00
parent 264f551cb4
commit 09b6c51048
14 changed files with 306 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/content/ProseBlockquote.vue
View File

@@ -41,12 +41,12 @@ const backgroundClass = computed(() => {
<template>
<blockquote
class="prose-blockquote mb-2.5 text-[15px] leading-8"
class="prose-blockquote mb-5 text-[15px] leading-8"
:class="variant === 'alt'
? 'rounded-[14px] border border-[var(--site-line)] bg-[var(--site-panel)] px-6 py-5 italic text-[var(--site-text)]'
: ['rounded-[10px] border-l-2 px-5 py-4 font-medium text-[#15171a]', backgroundClass]"
: ['border-l-[3px] bg-transparent py-1 pl-5 pr-0 font-normal text-[#15171a]', backgroundClass]"
>
<span class="whitespace-pre-line">
<span class="block whitespace-pre-line">
<slot />
</span>
</blockquote>
@@ -55,31 +55,25 @@ const backgroundClass = computed(() => {
<style scoped>
.prose-blockquote--gray {
border-color: #050505;
background: color-mix(in srgb, #050505 10%, #ffffff);
}
.prose-blockquote--blue {
border-color: #0055ff;
background: color-mix(in srgb, #0055ff 10%, #ffffff);
}
.prose-blockquote--green {
border-color: #16ae68;
background: color-mix(in srgb, #16ae68 10%, #ffffff);
}
.prose-blockquote--yellow {
border-color: #ffff00;
background: color-mix(in srgb, #ffff00 10%, #ffffff);
}
.prose-blockquote--red {
border-color: #ff0000;
background: color-mix(in srgb, #ff0000 10%, #ffffff);
}
.prose-blockquote--purple {
border-color: #8800ff;
background: color-mix(in srgb, #8800ff 10%, #ffffff);
}
</style>