@moda-editor/vue2 0.2.0 → 0.2.2

package/dist/EditorView.vue

@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, onUpdated, ref } from "vue";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  watch,
+} from "vue";
 import type { Component, PropType } from "vue";
 import {
   bindEditorInput,
@@ -55,8 +63,17 @@ onMounted(() => {
   if (editableEl.value)
     binding = bindEditorInput(props.editor, editableEl.value);
 });
-// 리렌더 후 DOM에 doc 셀렉션 복원
+// 리렌더 후 DOM에 doc 셀렉션 복원.
+// 셀렉션만 바뀐 디스패치(Tab 셀 이동 등)는 nodes가 같은 배열이라
+// computed가 리렌더를 생략하고 onUpdated도 안 뜬다 — state watcher로
+// 리렌더 유무와 무관하게 복원한다. 단 Vue 2.7의 post watcher는 플러시
+// 안에서 컴포넌트 렌더보다 먼저 뜨는 경우가 있어 stale DOM에 복원하면
+// selectionchange가 클램프된 위치를 doc에 역기록한다 — nextTick으로
+// 한 틱 뒤, 커밋된 DOM에 복원한다 (Vue 3의 flush:post와 같은 의도)
 onUpdated(() => binding?.restoreSelection());
+watch(state, () => {
+  void nextTick(() => binding?.restoreSelection());
+});
 onBeforeUnmount(() => binding?.unbind());
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda-editor/vue2",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Vue 2.7 adapter for @moda-editor — useWidget + WidgetView",
   "license": "MIT",
   "type": "module",
@@ -28,7 +28,7 @@
     "library"
   ],
   "dependencies": {
-    "@moda-editor/core": "0.2.0"
+    "@moda-editor/core": "0.2.2"
   },
   "peerDependencies": {
     "vue": "^2.7.0"