- Toast UI 위지윅·마크다운(CodeMirror) 둘 다 Electron 한글 IME 첫 자음 중복 발생 (제목 등 일반 input 은 정상) → PC 에선 본문을 일반 textarea(v-model, 네이티브 IME)로 입력 - 웹/APK 는 기존 Toast UI 위지윅 유지 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -14,23 +14,36 @@ const props = defineProps({
|
|||||||
})
|
})
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
// PC(Electron)는 위지윅(contenteditable)에서 한글 IME 첫 자음이 중복되는 Chromium 버그가 있어
|
// PC(Electron)는 Toast UI 에디터(위지윅·CodeMirror 모두)에서 한글 IME 첫 자음이 중복되는
|
||||||
// 마크다운(텍스트 기반) 모드로 입력받는다. 웹/모바일(APK)은 위지윅 유지.
|
// Chromium 버그가 있다(제목 등 일반 입력은 정상). → PC 에선 일반 textarea(네이티브 IME)로 입력받는다.
|
||||||
|
// 웹/모바일(APK)은 기존 Toast UI 위지윅 유지.
|
||||||
const isElectron = typeof navigator !== 'undefined' && /electron/i.test(navigator.userAgent)
|
const isElectron = typeof navigator !== 'undefined' && /electron/i.test(navigator.userAgent)
|
||||||
const editType = isElectron ? 'markdown' : props.initialEditType
|
|
||||||
|
|
||||||
|
// ===== PC: 일반 textarea (Vue v-model 이 IME 조합을 올바르게 처리) =====
|
||||||
|
const text = ref(props.modelValue || '')
|
||||||
|
if (isElectron) {
|
||||||
|
watch(text, (v) => emit('update:modelValue', v))
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
(v) => {
|
||||||
|
if ((v || '') !== text.value) text.value = v || ''
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== 웹/APK: Toast UI 위지윅 =====
|
||||||
const el = ref(null)
|
const el = ref(null)
|
||||||
let editor = null
|
let editor = null
|
||||||
// 에디터가 마지막으로 emit 한 값. 부모가 되돌려준 echo 를 구분해 입력 중 setMarkdown 으로 끊기지 않게.
|
|
||||||
let lastEmitted = props.modelValue || ''
|
let lastEmitted = props.modelValue || ''
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
if (isElectron) return
|
||||||
editor = new Editor({
|
editor = new Editor({
|
||||||
el: el.value,
|
el: el.value,
|
||||||
height: props.height,
|
height: props.height,
|
||||||
initialEditType: editType,
|
initialEditType: props.initialEditType,
|
||||||
hideModeSwitch: true,
|
hideModeSwitch: true,
|
||||||
plugins: [codeSyntaxHighlight], // 코드 구문 강조
|
plugins: [codeSyntaxHighlight],
|
||||||
initialValue: props.modelValue || '',
|
initialValue: props.modelValue || '',
|
||||||
placeholder: props.placeholder,
|
placeholder: props.placeholder,
|
||||||
usageStatistics: false,
|
usageStatistics: false,
|
||||||
@@ -44,10 +57,10 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
// 외부 값 변경(수정 로드, 제출 후 초기화 등)만 에디터에 반영. echo 는 무시.
|
|
||||||
watch(
|
watch(
|
||||||
() => props.modelValue,
|
() => props.modelValue,
|
||||||
(val) => {
|
(val) => {
|
||||||
|
if (isElectron) return
|
||||||
const v = val || ''
|
const v = val || ''
|
||||||
if (v === lastEmitted) return
|
if (v === lastEmitted) return
|
||||||
if (editor && v !== editor.getMarkdown()) {
|
if (editor && v !== editor.getMarkdown()) {
|
||||||
@@ -64,5 +77,34 @@ onBeforeUnmount(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div ref="el"></div>
|
<!-- PC(Electron): 일반 textarea — 한글 IME 정상 -->
|
||||||
|
<textarea
|
||||||
|
v-if="isElectron"
|
||||||
|
v-model="text"
|
||||||
|
class="md-textarea"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:style="{ height }"
|
||||||
|
></textarea>
|
||||||
|
<!-- 웹/APK: Toast UI 에디터 -->
|
||||||
|
<div v-else ref="el"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.md-textarea {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0.75rem 0.9rem;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--color-background-soft);
|
||||||
|
color: var(--color-text);
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
.md-textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: hsla(160, 100%, 37%, 1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user