인용 블록 색상과 라이브 설정 패널 정리

2026-06-04 10:28:43 +09:00
parent 2cb1ff4651
commit b38fc9f154
15 changed files with 222 additions and 221 deletions
--- a/components/admin/AdminEditorBlockPanel.vue
+++ b/components/admin/AdminEditorBlockPanel.vue
@@ -1,6 +1,12 @@
 <script setup>
 import { getImageAltAttribute, getImageDefaultAltLabel } from '../../lib/markdown-image.js'
-import { CALLOUT_BACKGROUND_OPTIONS, CALLOUT_EMOJI_OPTIONS } from '../../lib/markdown-callout.js'
+import {
+  CALLOUT_BACKGROUND_OPTIONS,
+  CALLOUT_EMOJI_OPTIONS,
+  QUOTE_BACKGROUND_LABELS,
+  QUOTE_BACKGROUND_OPTIONS,
+  QUOTE_BACKGROUND_SWATCHES
+} from '../../lib/markdown-callout.js'

 const props = defineProps({
  /** 패널 표시 여부 */
@@ -66,6 +72,20 @@ const getBackgroundLabel = (background) => backgroundLabels[background] || backg
 */
 const getBackgroundSwatch = (background) => backgroundSwatches[background] || 'rgba(100,116,139,0.28)'

+/**
+ * 인용 배경 라벨을 반환한다.
+ * @param {string} background - 배경 키
+ * @returns {string} 배경 라벨
+ */
+const getQuoteBackgroundLabel = (background) => QUOTE_BACKGROUND_LABELS[background] || background
+
+/**
+ * 인용 배경 스와치를 반환한다.
+ * @param {string} background - 배경 키
+ * @returns {string} CSS 배경
+ */
+const getQuoteBackgroundSwatch = (background) => QUOTE_BACKGROUND_SWATCHES[background] || QUOTE_BACKGROUND_SWATCHES.gray
+
 /**
 * 블록 종류 라벨
 * @returns {string}
@@ -212,7 +232,7 @@ const onPanelFocusOut = (event) => {
            </div>
            <div class="grid grid-cols-2 gap-2">
              <button
-                v-for="background in CALLOUT_BACKGROUND_OPTIONS"
+                v-for="background in QUOTE_BACKGROUND_OPTIONS"
                :key="`quote-background-${background}`"
                class="flex items-center gap-2 rounded border px-3 py-2 text-left text-xs font-semibold transition"
                :class="panel.quoteBackground === background ? 'border-[#15171a] bg-white text-[#15171a]' : 'border-[#dce0e5] bg-[#fafafa] text-[#657080] hover:bg-white'"
@@ -221,10 +241,10 @@ const onPanelFocusOut = (event) => {
              >
                <span
                  class="size-5 shrink-0 rounded-full border border-black/5"
-                  :style="{ background: getBackgroundSwatch(background) }"
+                  :style="{ background: getQuoteBackgroundSwatch(background) }"
                  aria-hidden="true"
                />
-                <span>{{ getBackgroundLabel(background) }}</span>
+                <span>{{ getQuoteBackgroundLabel(background) }}</span>
              </button>
            </div>
          </div>
--- a/components/admin/AdminMarkdownEditor.vue
+++ b/components/admin/AdminMarkdownEditor.vue
@@ -14,7 +14,7 @@ import {
  parseSlashInput,
  resolveSlashCommand
 } from '../../lib/markdown-slash-commands.js'
-import { buildCalloutOpenerLine, CALLOUT_BACKGROUND_OPTIONS } from '../../lib/markdown-callout.js'
+import { buildCalloutOpenerLine, CALLOUT_BACKGROUND_OPTIONS, QUOTE_BACKGROUND_OPTIONS } from '../../lib/markdown-callout.js'
 import { buildCodeFenceOpener } from '../../lib/markdown-code-block.js'
 import { buildToggleOpenerLine } from '../../lib/markdown-toggle.js'
 import { getTextareaCaretCoordinates } from '../../lib/textarea-caret-coordinates.js'
@@ -219,6 +219,49 @@ const syncBlockPanelState = () => {
  })
 }

+/**
+ * 라이브 모드 포커스 줄을 기준으로 블록 패널을 동기화한다.
+ * @param {number} sourceLine - 원본 마크다운 줄(0-based)
+ * @returns {void}
+ */
+const handleLiveLineFocus = async (sourceLine) => {
+  const nextLine = Number(sourceLine)
+
+  if (!Number.isInteger(nextLine) || nextLine < 0) {
+    return
+  }
+
+  activeLogicalLineIndex.value = nextLine
+  isTextareaFocused.value = false
+  isTextComposing.value = false
+
+  await nextTick()
+
+  if (activeBlockContext.value) {
+    lastStableBlockContext.value = activeBlockContext.value
+    isBlockPanelEngaged.value = true
+  } else {
+    isBlockPanelEngaged.value = false
+  }
+
+  syncBlockPanelState()
+}
+
+/**
+ * 라이브 모드 포커스가 블록·패널 밖으로 나가면 패널을 닫는다.
+ * @returns {void}
+ */
+const handleLiveLineBlur = () => {
+  blockPanelFocusTimer = window.setTimeout(() => {
+    if (isMediaPickerOpen.value || isFocusInBlockPanel() || isFocusInMediaPicker()) {
+      return
+    }
+
+    isBlockPanelEngaged.value = false
+    syncBlockPanelState()
+  }, 0)
+}
+
 watch(activeBlockContext, (context) => {
  if (context) {
    lastStableBlockContext.value = context
@@ -2136,7 +2179,7 @@ const updateActiveQuoteBackground = (background) => {
  ensureBlockPanelEngaged()
  const value = String(background || '').trim()

-  if (!CALLOUT_BACKGROUND_OPTIONS.includes(value)) {
+  if (!QUOTE_BACKGROUND_OPTIONS.includes(value)) {
    return
  }

@@ -2839,6 +2882,8 @@ const handleKeydown = (event) => {
        @delete-line="onPreviewDeleteLine"
        @merge-with-previous-line="onPreviewMergeWithPreviousLine"
        @edit-image="onPreviewEditImage"
+        @line-focus="handleLiveLineFocus"
+        @line-blur="handleLiveLineBlur"
        @slash-update="onLiveSlashUpdate"
        @slash-end="onLiveSlashEnd"
        @slash-apply="onLiveSlashApply"
--- a/components/content/ContentMarkdownCalloutEditor.vue
+++ b/components/content/ContentMarkdownCalloutEditor.vue
@@ -1,9 +1,5 @@
 <script setup>
-import {
-  buildCalloutOpenerLine,
-  CALLOUT_BACKGROUND_OPTIONS,
-  CALLOUT_EMOJI_OPTIONS
-} from '../../lib/markdown-callout.js'
+import { buildCalloutOpenerLine } from '../../lib/markdown-callout.js'
 import ProseCallout from './ProseCallout.vue'
 import ContentMarkdownEditableInline from './ContentMarkdownEditableInline.vue'

@@ -29,37 +25,16 @@ const props = defineProps({
  bodySourceLine: {
    type: Number,
    required: true
+  },
+  /** 콜아웃 선언 줄 source-line(0-based) */
+  blockSourceLine: {
+    type: Number,
+    required: true
  }
 })

 const emit = defineEmits(['commit'])

-const settingsOpen = ref(false)
-const emojiDraft = ref(props.calloutEmoji)
-const emojiEnabled = ref(props.calloutEmojiEnabled)
-const background = ref(props.calloutBackground)
-
-/** @type {import('vue').ComputedRef<Array<{ value: string, label: string }>>} */
-const backgroundOptions = computed(() => CALLOUT_BACKGROUND_OPTIONS.map((value) => ({
-  value,
-  label: value
-})))
-
-/** @type {import('vue').ComputedRef<string[]>} */
-const emojiOptions = computed(() => CALLOUT_EMOJI_OPTIONS)
-
-watch(() => props.calloutEmoji, (value) => {
-  emojiDraft.value = value
-})
-
-watch(() => props.calloutEmojiEnabled, (value) => {
-  emojiEnabled.value = value
-})
-
-watch(() => props.calloutBackground, (value) => {
-  background.value = value
-})
-
 /**
 * 콜아웃 마크다운 줄을 반영한다.
 * @param {string} body - 본문
@@ -70,9 +45,9 @@ const commitCallout = (body) => {

  emit('commit', [
    buildCalloutOpenerLine({
-      calloutEmojiEnabled: emojiEnabled.value,
-      calloutEmoji: emojiDraft.value,
-      calloutBackground: background.value
+      calloutEmojiEnabled: props.calloutEmojiEnabled,
+      calloutEmoji: props.calloutEmoji,
+      calloutBackground: props.calloutBackground
    }),
    ...contentLines,
    ':::'
@@ -87,71 +62,25 @@ const commitCallout = (body) => {
 const onBodyCommit = (body) => {
  commitCallout(body)
 }
-
-/**
- * 설정 모달을 연다.
- * @returns {void}
- */
-const openSettings = () => {
-  settingsOpen.value = true
-}
-
-/**
- * 설정 모달을 닫는다.
- * @returns {void}
- */
-const closeSettings = () => {
-  settingsOpen.value = false
-}
-
-/**
- * 이모지 표시를 토글한다.
- * @returns {void}
- */
-const toggleEmoji = () => {
-  emojiEnabled.value = !emojiEnabled.value
-  commitCallout(props.modelValue)
-}
-
-/**
- * 배경색을 변경한다.
- * @param {string} value - 배경 키
- * @returns {void}
- */
-const setBackground = (value) => {
-  background.value = value
-  commitCallout(props.modelValue)
-}
-
-/**
- * 프리셋 이모지를 선택한다.
- * @param {string} value - 이모지
- * @returns {void}
- */
-const setEmoji = (value) => {
-  emojiDraft.value = value
-  emojiEnabled.value = true
-  commitCallout(props.modelValue)
-}
 </script>

 <template>
-  <div class="content-markdown-callout-editor relative">
+  <div
+    class="content-markdown-callout-editor relative"
+    :data-source-line="blockSourceLine"
+  >
    <ProseCallout
      :emoji-enabled="false"
-      :background="background"
+      :background="calloutBackground"
    >
      <div class="content-markdown-callout-editor__inner flex items-start gap-2">
-        <button
-          class="content-markdown-callout-editor__emoji-btn inline-flex size-9 shrink-0 items-center justify-center rounded-md text-xl text-[var(--site-text)] transition-colors hover:bg-black/10"
-          type="button"
-          aria-label="콜아웃 아이콘·색상 설정"
-          @mousedown.prevent
-          @click.stop="openSettings"
+        <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="emojiEnabled">{{ emojiDraft || '💡' }}</span>
+          <span v-if="calloutEmojiEnabled">{{ calloutEmoji || '💡' }}</span>
          <span v-else class="text-base text-[#8e9cac]">+</span>
-        </button>
+        </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"
@@ -161,97 +90,5 @@ const setEmoji = (value) => {
        />
      </div>
    </ProseCallout>
-
-    <Teleport to="body">
-      <div
-        v-if="settingsOpen"
-        class="content-markdown-callout-editor__modal fixed inset-0 z-[80] grid place-items-center bg-black/35 px-4"
-        @click.self="closeSettings"
-      >
-        <section
-          class="content-markdown-callout-editor__panel w-full max-w-sm rounded-lg bg-white p-6 shadow-xl"
-          role="dialog"
-          aria-labelledby="callout-settings-title"
-          @click.stop
-        >
-          <header class="content-markdown-callout-editor__panel-header mb-4 flex items-center justify-between gap-3">
-            <h2 id="callout-settings-title" class="text-base font-semibold text-[#15171a]">
-              콜아웃 설정
-            </h2>
-            <button
-              class="content-markdown-callout-editor__close rounded px-2 py-1 text-sm text-[#6b7280] hover:bg-[#f1f3f4]"
-              type="button"
-              @click="closeSettings"
-            >
-              닫기
-            </button>
-          </header>
-
-          <div class="content-markdown-callout-editor__icon-toggle mb-4 flex items-center justify-between gap-3">
-            <span class="text-sm font-medium text-[#15171a]">아이콘</span>
-            <button
-              class="content-markdown-callout-editor__switch relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#8e9cac]"
-              :class="emojiEnabled ? 'bg-[#15171a]' : 'bg-[#d0d7de]'"
-              type="button"
-              role="switch"
-              :aria-checked="emojiEnabled"
-              @click="toggleEmoji"
-            >
-              <span
-                class="content-markdown-callout-editor__switch-knob pointer-events-none inline-block size-5 rounded-full bg-white shadow transition-transform duration-200 ease-out"
-                :class="emojiEnabled ? 'translate-x-[22px]' : 'translate-x-0.5'"
-              />
-              <span class="sr-only">{{ emojiEnabled ? '아이콘 표시' : '아이콘 숨김' }}</span>
-            </button>
-          </div>
-
-          <div
-            v-if="emojiEnabled"
-            class="content-markdown-callout-editor__emoji-presets mb-4"
-          >
-            <ul class="flex flex-wrap gap-2">
-              <li
-                v-for="emoji in emojiOptions"
-                :key="`callout-emoji-${emoji}`"
-              >
-                <button
-                  class="content-markdown-callout-editor__emoji-swatch inline-flex size-9 items-center justify-center rounded-full border-2 text-xl transition-transform"
-                  :class="emojiDraft === emoji ? 'border-[#22c55e] scale-110 bg-[#f6f7f8]' : 'border-transparent hover:bg-[#f1f3f4]'"
-                  type="button"
-                  :aria-label="`이모지 ${emoji}`"
-                  @click="setEmoji(emoji)"
-                >
-                  {{ emoji }}
-                </button>
-              </li>
-            </ul>
-          </div>
-
-          <div class="content-markdown-callout-editor__colors">
-            <p class="mb-2 text-sm font-medium text-[#15171a]">배경색</p>
-            <ul class="flex flex-wrap gap-2">
-              <li v-for="option in backgroundOptions" :key="`callout-bg-${option.value}`">
-                <button
-                  class="content-markdown-callout-editor__color-swatch size-8 rounded-full border-2 transition-transform"
-                  :class="background === option.value ? 'border-[#22c55e] scale-110' : 'border-transparent'"
-                  type="button"
-                  :aria-label="option.label"
-                  :style="{
-                    background: option.value === 'gray' ? 'rgba(100,116,139,0.28)'
-                      : option.value === 'blue' ? 'rgba(59,130,246,0.3)'
-                      : option.value === 'green' ? 'rgba(34,197,94,0.3)'
-                      : option.value === 'yellow' ? 'rgba(245,158,11,0.34)'
-                      : option.value === 'red' ? 'rgba(239,68,68,0.3)'
-                      : option.value === 'purple' ? 'rgba(168,85,247,0.3)'
-                      : 'rgba(236,72,153,0.3)'
-                  }"
-                  @click="setBackground(option.value)"
-                />
-              </li>
-            </ul>
-          </div>
-        </section>
-      </div>
-    </Teleport>
  </div>
 </template>
--- a/components/content/ContentMarkdownRenderer.vue
+++ b/components/content/ContentMarkdownRenderer.vue
@@ -20,7 +20,7 @@ import {
 } from '../../lib/markdown-live-edit.js'
 import { buildCodeBlockLines, parseCodeFenceLine } from '../../lib/markdown-code-block.js'
 import { buildToggleBlockLines, parseToggleOpenerLine } from '../../lib/markdown-toggle.js'
-import { CALLOUT_BACKGROUND_OPTIONS, parseCalloutOptions } from '../../lib/markdown-callout.js'
+import { CALLOUT_BACKGROUND_OPTIONS, QUOTE_BACKGROUND_OPTIONS, parseCalloutOptions } from '../../lib/markdown-callout.js'
 import { createHeadingIdFactory } from '../../lib/markdown-toc.js'
 import ContentMarkdownCodeBlockEditor from './ContentMarkdownCodeBlockEditor.vue'
 import ProseCodeBlock from './ProseCodeBlock.vue'
@@ -61,6 +61,8 @@ const emit = defineEmits([
  'delete-line',
  'merge-with-previous-line',
  'edit-image',
+  'line-focus',
+  'line-blur',
  'slash-update',
  'slash-end',
  'slash-apply'
@@ -141,7 +143,7 @@ const createBlock = (type = 'paragraph', text = '', level = null, id = '', optio
  calloutEmojiEnabled: options.calloutEmojiEnabled ?? true,
  calloutEmoji: options.calloutEmoji || '💡',
  calloutBackground: options.calloutBackground || 'blue',
-  quoteBackground: options.quoteBackground || 'pink',
+  quoteBackground: options.quoteBackground || 'gray',
  codeLanguage: options.codeLanguage || '',
  codeShowLineNumbers: options.codeShowLineNumbers !== false
 })
@@ -192,7 +194,7 @@ const parseQuoteOptions = (value) => {
    const [key, rawOptionValue] = token.split('=')
    const optionValue = String(rawOptionValue || '').trim()

-    if (key?.toLowerCase() === 'bg' && CALLOUT_BACKGROUND_OPTIONS.includes(optionValue)) {
+    if (key?.toLowerCase() === 'bg' && QUOTE_BACKGROUND_OPTIONS.includes(optionValue)) {
      quoteBackground = optionValue
    }
  })
@@ -1181,6 +1183,51 @@ const commitInlineBlockLines = (block, replacementLines) => {
  })
 }

+/**
+ * 라이브 편집 포커스/클릭 위치의 원본 줄을 상위에 알린다.
+ * @param {Event} event - 포커스 또는 포인터 이벤트
+ * @returns {void}
+ */
+const emitLiveLineFocus = (event) => {
+  if (!props.interactive) {
+    return
+  }
+
+  const target = event.target
+
+  if (!(target instanceof Element)) {
+    return
+  }
+
+  const sourceElement = target.closest('[data-source-line]')
+  const sourceLine = Number(sourceElement?.getAttribute('data-source-line'))
+
+  if (!Number.isInteger(sourceLine) || sourceLine < 0) {
+    return
+  }
+
+  emit('line-focus', sourceLine)
+}
+
+/**
+ * 라이브 편집 영역을 벗어난 포커스를 상위에 알린다.
+ * @param {FocusEvent} event - 포커스 이탈 이벤트
+ * @returns {void}
+ */
+const emitLiveLineBlur = (event) => {
+  if (!props.interactive || !rendererRootRef.value) {
+    return
+  }
+
+  const nextTarget = event.relatedTarget
+
+  if (nextTarget instanceof Node && rendererRootRef.value.contains(nextTarget)) {
+    return
+  }
+
+  emit('line-blur')
+}
+
 /**
 * 문단 인라인 편집 반영
 * @param {Object} block - 블록
@@ -2297,7 +2344,13 @@ onBeforeUnmount(() => {
 </script>

 <template>
-  <div ref="rendererRootRef" class="content-markdown-renderer">
+  <div
+    ref="rendererRootRef"
+    class="content-markdown-renderer"
+    @mousedown.capture="emitLiveLineFocus"
+    @focusin.capture="emitLiveLineFocus"
+    @focusout.capture="emitLiveLineBlur"
+  >
    <template v-for="block in blocks" :key="block.id">
      <div
        v-if="interactive && getBlockInsertBeforeLine(block) !== null"
@@ -2350,6 +2403,7 @@ onBeforeUnmount(() => {
        v-else-if="block.type === 'quote' && interactive && block.variant !== 'alt'"
        :variant="block.variant || 'default'"
        :background="block.quoteBackground"
+        :data-source-line="block.meta.startLine"
      >
        <ContentMarkdownEditableInline
          v-for="quoteLine in getQuoteLineEntries(block)"
@@ -2497,6 +2551,7 @@ onBeforeUnmount(() => {
        :callout-emoji-enabled="block.calloutEmojiEnabled"
        :callout-emoji="block.calloutEmoji"
        :callout-background="block.calloutBackground"
+        :block-source-line="block.meta.startLine"
        :body-source-line="block.meta.startLine + 1"
        :model-value="block.text"
        @commit="onCalloutBlockCommit(block, $event)"
--- a/components/content/ProseBlockquote.vue
+++ b/components/content/ProseBlockquote.vue
@@ -6,7 +6,7 @@ const props = defineProps({
  },
  background: {
    type: String,
-    default: 'pink'
+    default: 'gray'
  }
 })

@@ -35,7 +35,7 @@ const backgroundClass = computed(() => {
    return 'prose-blockquote--purple'
  }

-  return 'prose-blockquote--pink'
+  return 'prose-blockquote--gray'
 })
 </script>

@@ -54,37 +54,32 @@ const backgroundClass = computed(() => {

 <style scoped>
 .prose-blockquote--gray {
-  border-color: rgba(100, 116, 139, 0.72);
-  background: rgba(100, 116, 139, 0.12);
+  border-color: #050505;
+  background: color-mix(in srgb, #050505 10%, #ffffff);
 }

 .prose-blockquote--blue {
-  border-color: rgba(59, 130, 246, 0.78);
-  background: rgba(59, 130, 246, 0.14);
+  border-color: #0055ff;
+  background: color-mix(in srgb, #0055ff 10%, #ffffff);
 }

 .prose-blockquote--green {
-  border-color: rgba(34, 197, 94, 0.78);
-  background: rgba(34, 197, 94, 0.14);
+  border-color: #16ae68;
+  background: color-mix(in srgb, #16ae68 10%, #ffffff);
 }

 .prose-blockquote--yellow {
-  border-color: rgba(245, 158, 11, 0.82);
-  background: rgba(245, 158, 11, 0.16);
+  border-color: #ffff00;
+  background: color-mix(in srgb, #ffff00 10%, #ffffff);
 }

 .prose-blockquote--red {
-  border-color: rgba(239, 68, 68, 0.78);
-  background: rgba(239, 68, 68, 0.14);
+  border-color: #ff0000;
+  background: color-mix(in srgb, #ff0000 10%, #ffffff);
 }

 .prose-blockquote--purple {
-  border-color: rgba(168, 85, 247, 0.78);
-  background: rgba(168, 85, 247, 0.14);
-}
-
-.prose-blockquote--pink {
-  border-color: #ff1a75;
-  background: color-mix(in srgb, #ff1a75 10%, #ffffff);
+  border-color: #8800ff;
+  background: color-mix(in srgb, #8800ff 10%, #ffffff);
 }
 </style>