- MarkdownEditor: IME 조합(compositionstart~end) 중에는 getMarkdown/emit 보류,
조합 완료 시 한 번만 반영 → 조합 중 직렬화로 자음이 중복되던('ㅅ사') 문제 해소
- 조합 중에는 watch 의 setMarkdown 도 건너뜀
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -18,6 +18,21 @@ const el = ref(null)
|
|||||||
let editor = null
|
let editor = null
|
||||||
// 에디터가 마지막으로 emit 한 값. 부모가 되돌려준 echo 를 구분해 한글 조합(IME)이 깨지지 않게 한다.
|
// 에디터가 마지막으로 emit 한 값. 부모가 되돌려준 echo 를 구분해 한글 조합(IME)이 깨지지 않게 한다.
|
||||||
let lastEmitted = props.modelValue || ''
|
let lastEmitted = props.modelValue || ''
|
||||||
|
// IME(한글 등) 조합 중 여부. 조합 중에는 getMarkdown/emit 을 보류해 첫 자음이 중복되는 문제를 막는다.
|
||||||
|
let composing = false
|
||||||
|
|
||||||
|
function emitValue() {
|
||||||
|
if (!editor) return
|
||||||
|
lastEmitted = editor.getMarkdown()
|
||||||
|
emit('update:modelValue', lastEmitted)
|
||||||
|
}
|
||||||
|
function onCompStart() {
|
||||||
|
composing = true
|
||||||
|
}
|
||||||
|
function onCompEnd() {
|
||||||
|
composing = false
|
||||||
|
emitValue() // 조합 완료 시 한 번만 반영
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
editor = new Editor({
|
editor = new Editor({
|
||||||
@@ -32,20 +47,24 @@ onMounted(() => {
|
|||||||
autofocus: false,
|
autofocus: false,
|
||||||
events: {
|
events: {
|
||||||
change: () => {
|
change: () => {
|
||||||
lastEmitted = editor.getMarkdown()
|
// 조합 중에는 보류 — 조합 중 getMarkdown 호출이 IME 를 끊어 자음 중복을 유발한다.
|
||||||
emit('update:modelValue', lastEmitted)
|
if (composing) return
|
||||||
|
emitValue()
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
// 조합 이벤트는 contenteditable 에서 버블링되어 래퍼(el)에서 잡힌다.
|
||||||
|
el.value.addEventListener('compositionstart', onCompStart)
|
||||||
|
el.value.addEventListener('compositionend', onCompEnd)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 외부 값 변경(수정 로드, 제출 후 초기화 등)만 에디터에 반영.
|
// 외부 값 변경(수정 로드, 제출 후 초기화 등)만 에디터에 반영.
|
||||||
// 에디터 자신이 방금 emit 한 값(echo)이면 무시 → 입력 중 setMarkdown 으로 IME(한글) 조합이 끊기지 않게 한다.
|
// 에디터 자신이 방금 emit 한 값(echo)이거나 조합 중이면 무시 → 입력 중 setMarkdown 으로 IME 조합이 끊기지 않게 한다.
|
||||||
watch(
|
watch(
|
||||||
() => props.modelValue,
|
() => props.modelValue,
|
||||||
(val) => {
|
(val) => {
|
||||||
const v = val || ''
|
const v = val || ''
|
||||||
if (v === lastEmitted) return
|
if (composing || v === lastEmitted) return
|
||||||
if (editor && v !== editor.getMarkdown()) {
|
if (editor && v !== editor.getMarkdown()) {
|
||||||
lastEmitted = v
|
lastEmitted = v
|
||||||
editor.setMarkdown(v)
|
editor.setMarkdown(v)
|
||||||
@@ -54,6 +73,10 @@ watch(
|
|||||||
)
|
)
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
|
if (el.value) {
|
||||||
|
el.value.removeEventListener('compositionstart', onCompStart)
|
||||||
|
el.value.removeEventListener('compositionend', onCompEnd)
|
||||||
|
}
|
||||||
editor?.destroy()
|
editor?.destroy()
|
||||||
editor = null
|
editor = null
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user