관리자 목록과 이미지 설정 개선

components/content/ContentMarkdownRenderer.vue

@@ -169,6 +169,7 @@ const createBlock = (type = 'paragraph', text = '', level = null, id = '', optio
   ordered: options.ordered || false,
   listNumbers: Array.isArray(options.listNumbers) ? options.listNumbers : [],
   width: options.width || 'regular',
+  pixelWidth: Math.round(Number(options.pixelWidth) || 0) || null,
   images: options.images || [],
   meta: options.meta && typeof options.meta === 'object' ? { ...options.meta } : {},
   calloutEmojiEnabled: options.calloutEmojiEnabled === true,
@@ -712,7 +713,8 @@ const parseMarkdownBlocks = (markdown) => {
       const startLine = index
       blocks.push(attachSourceRange(createBlock('image', '', null, `block-${blocks.length}`, {
         url: trimmedLine,
-        width: 'regular'
+        width: 'regular',
+        pixelWidth: null
       }), startLine, startLine))
       index += 1
       continue
@@ -1729,6 +1731,17 @@ const getQuoteLineEntries = (block) => {
   }))
 }
 
+/**
+ * IME·브라우저 자동 목록 보정으로 생긴 인용 접두를 정리한다.
+ * @param {string} value - 인용 본문
+ * @returns {string} 정리된 본문
+ */
+const normalizeQuoteEditableValue = (value) => {
+  return String(value ?? '').replace(/\r/g, '').split('\n').map((line) => {
+    return line.replace(/^>\.\s?/, '')
+  }).join('\n')
+}
+
 /**
  * 코드 블록 줄 번호 목록을 만든다.
  * @param {Object} block - 코드 블록
@@ -2460,7 +2473,11 @@ const buildQuoteBlockLines = (block, payload) => {
  * @returns {void}
  */
 const onQuoteBlockCommit = (block, payload) => {
-  commitInlineBlockLines(block, buildQuoteBlockLines(block, payload))
+  const normalizedPayload = typeof payload === 'object' && payload !== null
+    ? { ...payload, value: normalizeQuoteEditableValue(payload.value) }
+    : normalizeQuoteEditableValue(payload)
+
+  commitInlineBlockLines(block, buildQuoteBlockLines(block, normalizedPayload))
 }
 
 /**
@@ -2486,7 +2503,7 @@ const onQuoteBlockInsertBelow = (block, payload) => {
  */
 const onQuoteBlockConvertToParagraph = (block, payload) => {
   const { value } = normalizeCommitPayload(payload)
-  const lines = String(value ?? '').replace(/\r/g, '').split('\n')
+  const lines = normalizeQuoteEditableValue(value).split('\n')
   const replacementLines = lines.length ? lines : ['']
 
   pendingFocusLine.value = block.meta.startLine
@@ -3306,6 +3323,7 @@ onBeforeUnmount(() => {
           :alt="getImageAltAttribute(block)"
           :caption="getImageDisplayCaption(block)"
           :variant="block.width"
+          :pixel-width="block.pixelWidth"
           expandable
           @activate="openContentLightbox(block.id)"
         />
@@ -3318,6 +3336,7 @@ onBeforeUnmount(() => {
         :alt="getImageAltAttribute(block)"
         :caption="getImageDisplayCaption(block)"
         :variant="block.width"
+        :pixel-width="block.pixelWidth"
         expandable
         @activate="openContentLightbox(block.id)"
       />

components/content/ProseImage.vue

@@ -31,6 +31,10 @@ const props = defineProps({
     type: String,
     default: 'regular'
   },
+  pixelWidth: {
+    type: Number,
+    default: null
+  },
   expandable: {
     type: Boolean,
     default: false
@@ -44,6 +48,18 @@ const currentSrc = ref(props.src)
 
 const hasRenderableSrc = computed(() => String(currentSrc.value || '').trim().length > 0)
 const currentSrcset = computed(() => currentSrc.value === props.src ? props.srcset : '')
+const figureStyle = computed(() => {
+  const width = Math.round(Number(props.pixelWidth) || 0)
+
+  if (!width) {
+    return undefined
+  }
+
+  return {
+    maxWidth: `${width}px`,
+    width: '100%'
+  }
+})
 
 const errorLabel = computed(() => {
   const trimmed = String(props.fallbackSrc || props.src || '').trim()
@@ -99,6 +115,7 @@ const activateImage = () => {
 <template>
   <figure
     class="prose-image mb-2.5"
+    :style="figureStyle"
     :class="{
       'prose-image--wide lg:-mx-10 lg:max-w-none': variant === 'wide',
       'prose-image--full lg:-mx-20 lg:max-w-none': variant === 'full'