공개 본문 이미지 드래그 상태 분리

2026-07-27 12:48:10 +09:00
parent 8c4ad90f91
commit 5fb2781d72
10 changed files with 761 additions and 444 deletions
--- a/composables/useContentMarkdownImageDrag.js
+++ b/composables/useContentMarkdownImageDrag.js
@@ -0,0 +1,494 @@
+import { ref, unref } from 'vue'
+
+/** @type {string} 라이브 이미지·갤러리 드래그 payload MIME */
+export const LIVE_IMAGE_DRAG_MIME = 'application/x-sori-live-image'
+
+/**
+ * 블록 앞 삽입 위치(0-based 줄)를 반환한다.
+ * @param {Object} block - 콘텐츠 블록
+ * @returns {number|null} 삽입 줄 번호
+ */
+export const getContentBlockInsertBeforeLine = (block) => {
+  const line = block?.meta?.startLine
+
+  return typeof line === 'number' ? line : null
+}
+
+/**
+ * 이미지 블록을 드래그 payload용 객체로 변환한다.
+ * @param {Object} block - 이미지 블록
+ * @returns {Object} 이미지 데이터
+ */
+export const toContentImageDragPayload = (block) => ({
+  url: block.url,
+  caption: block.caption,
+  width: block.width,
+  useAlt: block.useAlt,
+  legacyBracketLabel: block.legacyBracketLabel
+})
+
+/**
+ * 공개 Markdown 라이브 이미지·갤러리 드래그 상태를 만든다.
+ * @param {Object} options - 드래그 옵션
+ * @param {import('vue').Ref<boolean>|boolean} options.interactive - 라이브 편집 가능 여부
+ * @param {import('vue').Ref<number>|number} options.tailInsertBeforeLine - 문서 하단 삽입 줄
+ * @param {(payload: Object) => void} options.onMergeImagesToGallery - 단일 이미지 병합 처리
+ * @param {(payload: Object) => void} options.onInsertImageToGallery - 단일 이미지 갤러리 삽입 처리
+ * @param {(payload: Object) => void} options.onExtractGalleryImage - 갤러리 이미지 분리 처리
+ * @param {(payload: Object) => void} options.onGalleryReorder - 갤러리 순서 변경 처리
+ * @returns {Object} 드래그 상태와 이벤트 핸들러
+ */
+export const useContentMarkdownImageDrag = (options) => {
+  /** @type {import('vue').Ref<{ kind: 'image'|'gallery', sourceLine?: number, startLine?: number, endLine?: number, blockId: string, imageIndex?: number, image?: Object }|null>} */
+  const liveImageDragState = ref(null)
+  /** @type {import('vue').Ref<{ blockId: string, targetIndex: number }|null>} */
+  const galleryDropTarget = ref(null)
+  /** @type {import('vue').Ref<{ blockId: string }|null>} */
+  const imageBlockDropTarget = ref(null)
+  /** @type {import('vue').Ref<{ insertBeforeLine: number }|null>} */
+  const blockInsertDropTarget = ref(null)
+
+  /**
+   * 라이브 편집 가능 여부를 반환한다.
+   * @returns {boolean} 편집 가능 여부
+   */
+  const isInteractive = () => Boolean(unref(options.interactive))
+
+  /**
+   * 라이브 이미지 드래그 payload를 dataTransfer에 기록한다.
+   * @param {DragEvent|Object} event - 드래그 이벤트
+   * @param {Object} payload - 드래그 payload
+   * @returns {void}
+   */
+  const writeLiveImageDragData = (event, payload) => {
+    if (!event?.dataTransfer) {
+      return
+    }
+
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData(LIVE_IMAGE_DRAG_MIME, JSON.stringify(payload))
+  }
+
+  /**
+   * 드래그 payload를 읽는다.
+   * @param {DragEvent|Object} event - 드래그 이벤트
+   * @returns {Object|null} payload
+   */
+  const readLiveImageDragData = (event) => {
+    try {
+      const raw = event?.dataTransfer?.getData(LIVE_IMAGE_DRAG_MIME)
+
+      return raw ? JSON.parse(raw) : null
+    } catch {
+      return null
+    }
+  }
+
+  /**
+   * 라이브 이미지·갤러리 드래그 상태를 초기화한다.
+   * @returns {void}
+   */
+  const clearLiveImageDragUi = () => {
+    liveImageDragState.value = null
+    galleryDropTarget.value = null
+    imageBlockDropTarget.value = null
+    blockInsertDropTarget.value = null
+  }
+
+  /**
+   * 현재 요소 내부 이동인지 확인한다.
+   * @param {DragEvent|Object} event - 드래그 이벤트
+   * @returns {boolean} 내부 이동 여부
+   */
+  const isLeavingInsideCurrentTarget = (event) => {
+    const related = event?.relatedTarget
+
+    return Boolean(related && event?.currentTarget?.contains?.(related))
+  }
+
+  /**
+   * 라이브 단일 이미지 블록 드래그 시작
+   * @param {DragEvent|Object} event - 드래그 이벤트
+   * @param {Object} block - 이미지 블록
+   * @returns {void}
+   */
+  const onImageBlockDragStart = (event, block) => {
+    if (!isInteractive()) {
+      return
+    }
+
+    if (typeof Element !== 'undefined' && event.target instanceof Element && event.target.closest('button')) {
+      event.preventDefault()
+      return
+    }
+
+    const payload = {
+      kind: 'image',
+      sourceLine: block.meta.startLine,
+      blockId: block.id,
+      image: toContentImageDragPayload(block)
+    }
+
+    liveImageDragState.value = payload
+    writeLiveImageDragData(event, payload)
+  }
+
+  /**
+   * 라이브 이미지 블록 위 드래그 오버(갤러리 병합 대상)
+   * @param {DragEvent|Object} event - 드래그 이벤트
+   * @param {Object} block - 대상 이미지 블록
+   * @returns {void}
+   */
+  const onImageBlockDragOver = (event, block) => {
+    if (!isInteractive() || liveImageDragState.value?.kind !== 'image') {
+      return
+    }
+
+    if (liveImageDragState.value.sourceLine === block.meta.startLine) {
+      imageBlockDropTarget.value = null
+      return
+    }
+
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'move'
+    imageBlockDropTarget.value = { blockId: block.id }
+    blockInsertDropTarget.value = null
+  }
+
+  /**
+   * 라이브 이미지 블록 드래그 이탈
+   * @param {DragEvent|Object} event - 드래그 이벤트
+   * @param {Object} block - 이미지 블록
+   * @returns {void}
+   */
+  const onImageBlockDragLeave = (event, block) => {
+    if (isLeavingInsideCurrentTarget(event)) {
+      return
+    }
+
+    if (imageBlockDropTarget.value?.blockId === block.id) {
+      imageBlockDropTarget.value = null
+    }
+  }
+
+  /**
+   * 라이브 이미지 두 블록 병합 드롭
+   * @param {DragEvent|Object} event - 드롭 이벤트
+   * @param {Object} block - 대상 이미지 블록
+   * @returns {void}
+   */
+  const onImageBlockDrop = (event, block) => {
+    if (!isInteractive()) {
+      return
+    }
+
+    event.preventDefault()
+    const payload = readLiveImageDragData(event) || liveImageDragState.value
+
+    if (payload?.kind !== 'image' || typeof payload.sourceLine !== 'number') {
+      clearLiveImageDragUi()
+      return
+    }
+
+    if (payload.sourceLine === block.meta.startLine) {
+      clearLiveImageDragUi()
+      return
+    }
+
+    options.onMergeImagesToGallery({
+      sourceLine: payload.sourceLine,
+      targetLine: block.meta.startLine
+    })
+    clearLiveImageDragUi()
+  }
+
+  /**
+   * 라이브 이미지 블록 드래그 종료
+   * @returns {void}
+   */
+  const onImageBlockDragEnd = () => {
+    imageBlockDropTarget.value = null
+
+    if (liveImageDragState.value?.kind === 'image') {
+      liveImageDragState.value = null
+    }
+  }
+
+  /**
+   * 블록 사이 삽입선 드래그 오버(갤러리 이미지 분리)
+   * @param {DragEvent|Object} event - 드래그 이벤트
+   * @param {Object} block - 기준 블록
+   * @returns {void}
+   */
+  const onBlockInsertDragOver = (event, block) => {
+    const insertBeforeLine = getContentBlockInsertBeforeLine(block)
+
+    if (!isInteractive() || insertBeforeLine === null) {
+      return
+    }
+
+    const dragKind = liveImageDragState.value?.kind || readLiveImageDragData(event)?.kind
+
+    if (dragKind !== 'gallery') {
+      return
+    }
+
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'move'
+    blockInsertDropTarget.value = { insertBeforeLine }
+    galleryDropTarget.value = null
+    imageBlockDropTarget.value = null
+  }
+
+  /**
+   * 블록 사이 삽입선 드래그 이탈
+   * @param {DragEvent|Object} event - 드래그 이벤트
+   * @returns {void}
+   */
+  const onBlockInsertDragLeave = (event) => {
+    if (isLeavingInsideCurrentTarget(event)) {
+      return
+    }
+
+    blockInsertDropTarget.value = null
+  }
+
+  /**
+   * 블록 사이에 갤러리 이미지를 단일 블록으로 분리해 삽입
+   * @param {DragEvent|Object} event - 드롭 이벤트
+   * @param {Object} block - 기준 블록
+   * @returns {void}
+   */
+  const onBlockInsertDrop = (event, block) => {
+    const insertBeforeLine = getContentBlockInsertBeforeLine(block)
+
+    if (!isInteractive() || insertBeforeLine === null) {
+      return
+    }
+
+    event.preventDefault()
+    const payload = readLiveImageDragData(event) || liveImageDragState.value
+
+    if (payload?.kind !== 'gallery'
+      || typeof payload.startLine !== 'number'
+      || typeof payload.endLine !== 'number'
+      || typeof payload.imageIndex !== 'number') {
+      clearLiveImageDragUi()
+      return
+    }
+
+    options.onExtractGalleryImage({
+      startLine: payload.startLine,
+      endLine: payload.endLine,
+      imageIndex: payload.imageIndex,
+      insertBeforeLine,
+      image: payload.image
+    })
+    clearLiveImageDragUi()
+  }
+
+  /**
+   * 문서 맨 아래 삽입선 드래그 오버
+   * @param {DragEvent|Object} event - 드래그 이벤트
+   * @returns {void}
+   */
+  const onTailInsertDragOver = (event) => {
+    if (!isInteractive() || liveImageDragState.value?.kind !== 'gallery') {
+      return
+    }
+
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'move'
+    blockInsertDropTarget.value = { insertBeforeLine: unref(options.tailInsertBeforeLine) }
+    galleryDropTarget.value = null
+    imageBlockDropTarget.value = null
+  }
+
+  /**
+   * 문서 맨 아래에 갤러리 이미지 분리 삽입
+   * @param {DragEvent|Object} event - 드롭 이벤트
+   * @returns {void}
+   */
+  const onTailInsertDrop = (event) => {
+    if (!isInteractive()) {
+      return
+    }
+
+    event.preventDefault()
+    const payload = readLiveImageDragData(event) || liveImageDragState.value
+    const insertBeforeLine = unref(options.tailInsertBeforeLine)
+
+    if (payload?.kind !== 'gallery'
+      || typeof payload.startLine !== 'number'
+      || typeof payload.endLine !== 'number'
+      || typeof payload.imageIndex !== 'number') {
+      clearLiveImageDragUi()
+      return
+    }
+
+    options.onExtractGalleryImage({
+      startLine: payload.startLine,
+      endLine: payload.endLine,
+      imageIndex: payload.imageIndex,
+      insertBeforeLine,
+      image: payload.image
+    })
+    clearLiveImageDragUi()
+  }
+
+  /**
+   * 갤러리 드래그 시작
+   * @param {DragEvent|Object} event - 드래그 이벤트
+   * @param {Object} block - 갤러리 블록
+   * @param {number} imageIndex - 이미지 인덱스
+   * @returns {void}
+   */
+  const onGalleryDragStart = (event, block, imageIndex) => {
+    if (!isInteractive()) {
+      return
+    }
+
+    const image = block.images[imageIndex]
+    const payload = {
+      kind: 'gallery',
+      startLine: block.meta.startLine,
+      endLine: block.meta.endLine,
+      blockId: block.id,
+      imageIndex,
+      image
+    }
+
+    liveImageDragState.value = payload
+    writeLiveImageDragData(event, payload)
+  }
+
+  /**
+   * 갤러리 드래그 종료
+   * @returns {void}
+   */
+  const onGalleryDragEnd = () => {
+    clearLiveImageDragUi()
+  }
+
+  /**
+   * 갤러리 드래그 중 드롭 대상 셀 표시
+   * @param {DragEvent|Object} event - 드래그 이벤트
+   * @param {Object} block - 갤러리 블록
+   * @param {number} imageIndex - 호버 중인 이미지 인덱스
+   * @returns {void}
+   */
+  const onGalleryDragOverItem = (event, block, imageIndex) => {
+    if (!isInteractive() || !['image', 'gallery'].includes(liveImageDragState.value?.kind)) {
+      return
+    }
+
+    event.preventDefault()
+    blockInsertDropTarget.value = null
+
+    if (liveImageDragState.value.kind === 'image') {
+      event.dataTransfer.dropEffect = 'move'
+      galleryDropTarget.value = { blockId: block.id, targetIndex: imageIndex }
+      imageBlockDropTarget.value = null
+      return
+    }
+
+    if (liveImageDragState.value.blockId !== block.id) {
+      return
+    }
+
+    if (liveImageDragState.value.imageIndex === imageIndex) {
+      galleryDropTarget.value = null
+      return
+    }
+
+    galleryDropTarget.value = { blockId: block.id, targetIndex: imageIndex }
+  }
+
+  /**
+   * 갤러리 영역을 벗어나면 드롭 대상 표시를 해제한다.
+   * @param {DragEvent|Object} event - 드래그 이벤트
+   * @param {Object} block - 갤러리 블록
+   * @returns {void}
+   */
+  const onGalleryDragLeaveGallery = (event, block) => {
+    if (isLeavingInsideCurrentTarget(event)) {
+      return
+    }
+
+    if (galleryDropTarget.value?.blockId === block.id) {
+      galleryDropTarget.value = null
+    }
+  }
+
+  /**
+   * 갤러리 드롭으로 순서 변경
+   * @param {DragEvent|Object} event - 드롭 이벤트
+   * @param {Object} block - 갤러리 블록
+   * @param {number} targetIndex - 대상 인덱스
+   * @returns {void}
+   */
+  const onGalleryDrop = (event, block, targetIndex) => {
+    if (!isInteractive() || !['image', 'gallery'].includes(liveImageDragState.value?.kind)) {
+      return
+    }
+
+    event.preventDefault()
+
+    if (liveImageDragState.value.kind === 'image') {
+      options.onInsertImageToGallery({
+        sourceLine: liveImageDragState.value.sourceLine,
+        startLine: block.meta?.startLine,
+        endLine: block.meta?.endLine,
+        targetIndex: targetIndex + 1,
+        image: liveImageDragState.value.image
+      })
+      clearLiveImageDragUi()
+      return
+    }
+
+    const { blockId, imageIndex: fromIndex } = liveImageDragState.value
+
+    if (blockId !== block.id || fromIndex === targetIndex) {
+      clearLiveImageDragUi()
+      return
+    }
+
+    const reorderedImages = [...block.images]
+    const [moved] = reorderedImages.splice(fromIndex, 1)
+    reorderedImages.splice(targetIndex, 0, moved)
+
+    options.onGalleryReorder({
+      startLine: block.meta.startLine,
+      endLine: block.meta.endLine,
+      images: reorderedImages
+    })
+    clearLiveImageDragUi()
+  }
+
+  return {
+    liveImageDragState,
+    galleryDropTarget,
+    imageBlockDropTarget,
+    blockInsertDropTarget,
+    getBlockInsertBeforeLine: getContentBlockInsertBeforeLine,
+    toImageDragPayload: toContentImageDragPayload,
+    readLiveImageDragData,
+    writeLiveImageDragData,
+    clearLiveImageDragUi,
+    onImageBlockDragStart,
+    onImageBlockDragOver,
+    onImageBlockDragLeave,
+    onImageBlockDrop,
+    onImageBlockDragEnd,
+    onBlockInsertDragOver,
+    onBlockInsertDragLeave,
+    onBlockInsertDrop,
+    onTailInsertDragOver,
+    onTailInsertDrop,
+    onGalleryDragStart,
+    onGalleryDragEnd,
+    onGalleryDragOverItem,
+    onGalleryDragLeaveGallery,
+    onGalleryDrop
+  }
+}