Merge branch 'dev'
Deploy / deploy (push) Failing after 13m38s
CI / build (push) Failing after 15m4s

This commit is contained in:
ByungCheol
2026-06-07 17:56:20 +09:00
+50 -8
View File
@@ -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>