diff --git a/components/admin/AdminEditorBlockPanel.vue b/components/admin/AdminEditorBlockPanel.vue index 824b1a1..c90c5c4 100644 --- a/components/admin/AdminEditorBlockPanel.vue +++ b/components/admin/AdminEditorBlockPanel.vue @@ -80,6 +80,11 @@ const inlineColorSwatches = { const languageOptions = ['', 'javascript', 'html', 'css', 'vue', 'json', 'bash', 'markdown', 'sql'] +/** @type {number|null} 패널 내부 포인터 조작 상태 해제 타이머 */ +let panelPointerInsideTimer = null +/** @type {boolean} 패널 내부 포인터 조작 중 여부 */ +let isPanelPointerInside = false + /** * 배경 라벨을 반환한다. * @param {string} background - 배경 키 @@ -395,6 +400,19 @@ const commitImagePixelWidthChange = (imageIndex, image, event) => { }) } +/** + * 패널 내부 포인터 조작 중에는 포커스 이탈로 패널이 닫히지 않게 유지한다. + * @returns {void} + */ +const markPanelPointerInside = () => { + window.clearTimeout(panelPointerInsideTimer) + isPanelPointerInside = true + emit('panel-focus-in') + panelPointerInsideTimer = window.setTimeout(() => { + isPanelPointerInside = false + }, 300) +} + /** * 포커스가 패널 밖으로 나갔을 때만 이탈 이벤트를 보낸다. * @param {FocusEvent} event - focusout 이벤트 @@ -408,8 +426,16 @@ const onPanelFocusOut = (event) => { return } + if (isPanelPointerInside) { + return + } + emit('panel-focus-out') } + +onBeforeUnmount(() => { + window.clearTimeout(panelPointerInsideTimer) +})