@moda-editor/vue 0.3.1 → 0.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/EditorView.vue
CHANGED
|
@@ -30,6 +30,14 @@ const props = defineProps({
|
|
|
30
30
|
|
|
31
31
|
const { state } = useEditorState(props.editor);
|
|
32
32
|
|
|
33
|
+
// editor의 비-state 크롬(editable/ariaLabel/placeholder)은 state 참조를
|
|
34
|
+
// 바꾸지 않는 notify로만 갱신 신호가 온다 — state.value를 먼저 읽어
|
|
35
|
+
// notify마다 재평가되도록 의존을 등록하고 실제 프로퍼티 값을 반환한다.
|
|
36
|
+
// 값이 같으면 computed가 downstream 트리거를 스킵해 비용이 없다
|
|
37
|
+
const editable = computed(() => (state.value, props.editor.editable));
|
|
38
|
+
const ariaLabel = computed(() => (state.value, props.editor.ariaLabel));
|
|
39
|
+
const placeholder = computed(() => (state.value, props.editor.placeholder));
|
|
40
|
+
|
|
33
41
|
// doc 참조가 바뀔 때만 RenderNode 배열을 재생성 — selection-only
|
|
34
42
|
// 변경이면 같은 배열이라 자식 vnode가 그대로 스킵된다
|
|
35
43
|
let cachedDoc: DocNode | null = null;
|
|
@@ -56,7 +64,12 @@ let binding: EditorInputBinding | null = null;
|
|
|
56
64
|
// 브라우저가 변경한 DOM과 vnode가 어긋난 채 diff하면 크래시/유실이 난다
|
|
57
65
|
const dirtyKeys = new DirtyKeyMap();
|
|
58
66
|
const keyOf = (n: RenderNode): string =>
|
|
59
|
-
|
|
67
|
+
// 흡수 창에는 브라우저가 DOM을 소유 — 리마운트를 미루고 더티 표시는
|
|
68
|
+
// 흡수 뒤 렌더가 소비한다. 조합 중에는 미루지 않는다 — 그 창의 마크는
|
|
69
|
+
// compositionstart 선삭제 마크뿐이고 리마운트가 설계된 복구 경로다
|
|
70
|
+
binding?.ime.absorbing
|
|
71
|
+
? n.path.join(",")
|
|
72
|
+
: dirtyKeys.key(n.path.join(","), binding?.dirtyPaths);
|
|
60
73
|
|
|
61
74
|
onMounted(() => {
|
|
62
75
|
if (editableEl.value) {
|
|
@@ -74,17 +87,17 @@ onBeforeUnmount(() => binding?.unbind());
|
|
|
74
87
|
</script>
|
|
75
88
|
|
|
76
89
|
<template>
|
|
77
|
-
<div class="me-root" :data-me-readonly="
|
|
90
|
+
<div class="me-root" :data-me-readonly="editable ? undefined : ''">
|
|
78
91
|
<div
|
|
79
92
|
ref="editableEl"
|
|
80
93
|
class="me-editor"
|
|
81
94
|
data-me-path=""
|
|
82
95
|
role="textbox"
|
|
83
96
|
aria-multiline="true"
|
|
84
|
-
:aria-label="
|
|
85
|
-
:data-me-placeholder="
|
|
86
|
-
:aria-readonly="
|
|
87
|
-
:contenteditable="
|
|
97
|
+
:aria-label="ariaLabel"
|
|
98
|
+
:data-me-placeholder="placeholder"
|
|
99
|
+
:aria-readonly="editable ? undefined : true"
|
|
100
|
+
:contenteditable="editable"
|
|
88
101
|
>
|
|
89
102
|
<EditorNode
|
|
90
103
|
v-for="n in nodes"
|
package/dist/conformance.test.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createApp, defineComponent, h, nextTick } from "vue";
|
|
2
|
-
import { runEditorConformance, runWidgetConformance, } from "@moda-editor/
|
|
2
|
+
import { runEditorConformance, runWidgetConformance, } from "@moda-editor/testkit";
|
|
3
3
|
import { WidgetCore } from "@moda-editor/core";
|
|
4
4
|
import WidgetView from "./WidgetView.vue";
|
|
5
5
|
import EditorView from "./EditorView.vue";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"conformance.test.js","sourceRoot":"","sources":["../src/conformance.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM
|
|
1
|
+
{"version":3,"file":"conformance.test.js","sourceRoot":"","sources":["../src/conformance.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAE1C,uDAAuD;AACvD,MAAM,YAAY,GAAG,eAAe,CAAC;IACnC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE;IACjD,MAAM;QACJ,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE;YAC3C,MAAM,CACH,IAAI,CAAC,IAAyC,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,CACvE;YACD,sCAAsC;YACtC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC;SACtC,CAAC,CAAC;IACL,CAAC;CACF,CAAC,CAAC;AAEH,uDAAuD;AACvD,oBAAoB,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAC1C,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC9B,MAAM,MAAM,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,GAAG,GAAG,SAAS,CAAC,UAAU,EAAE;QAChC,MAAM;QACN,WAAW,EAAE,IAAI,CAAC,WAAW;KACrB,CAAC,CAAC;IACZ,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACd,OAAO;QACL,EAAE;QACF,KAAK,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;QACvB,OAAO,EAAE,GAAG,EAAE;YACZ,GAAG,CAAC,OAAO,EAAE,CAAC;YACd,EAAE,CAAC,MAAM,EAAE,CAAC;QACd,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oDAAoD;AACpD,oBAAoB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;IAC3D,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,SAAS;QACrB,CAAC,CAAC,MAAM,CAAC,WAAW,CAChB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;aACnB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aAC3B,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CACjC;QACH,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,GAAG,GAAG,SAAS,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAW,CAAC,CAAC;IACzE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACd,OAAO;QACL,EAAE;QACF,KAAK,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;QACvB,OAAO,EAAE,GAAG,EAAE;YACZ,GAAG,CAAC,OAAO,EAAE,CAAC;YACd,EAAE,CAAC,MAAM,EAAE,CAAC;QACd,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
package/dist/useEditor.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEtC,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE5E,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,WAAW,IAAI,IAAI,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,aAAkB,GAAG,eAAe,CAsBtE;AAED,kCAAkC;AAClC,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG;IAC9C,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,
|
|
1
|
+
{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEtC,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE5E,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,WAAW,IAAI,IAAI,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,aAAkB,GAAG,eAAe,CAsBtE;AAED,kCAAkC;AAClC,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG;IAC9C,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAWA"}
|
package/dist/useEditor.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { onScopeDispose, shallowRef, toValue, watch } from "vue";
|
|
1
|
+
import { onScopeDispose, shallowRef, toValue, triggerRef, watch } from "vue";
|
|
2
2
|
import { createEditor, normalizeDoc } from "@moda-editor/core";
|
|
3
3
|
/**
|
|
4
4
|
* Vue 3 어댑터 composable — Editor 생성 + 불변 state를 ShallowRef로 구독.
|
|
@@ -35,6 +35,10 @@ export function useEditorState(editor) {
|
|
|
35
35
|
const state = shallowRef(editor.state);
|
|
36
36
|
const unsubscribe = editor.subscribe(() => {
|
|
37
37
|
state.value = editor.state;
|
|
38
|
+
// shallowRef는 같은 참조면 트리거를 스킵 — editor.setEditable처럼
|
|
39
|
+
// state를 바꾸지 않는 notify도 크롬(contenteditable/aria) 갱신이
|
|
40
|
+
// 필요하므로 강제 트리거해 computed/렌더를 다시 평가한다
|
|
41
|
+
triggerRef(state);
|
|
38
42
|
});
|
|
39
43
|
onScopeDispose(unsubscribe, true);
|
|
40
44
|
return { state: state, unsubscribe };
|
package/dist/useEditor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEditor.js","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"useEditor.js","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAW/D;;;;;;;;;GASG;AACH,MAAM,UAAU,SAAS,CAAC,UAAyB,EAAE;IACnD,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IACtD,iDAAiD;IACjD,kDAAkD;IAClD,cAAc,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC;IAE7C,4CAA4C;IAC5C,oCAAoC;IACpC,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACjD,KAAK,CACH,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAC1B,CAAC,GAAG,EAAE,EAAE;QACN,IAAI,CAAC,GAAG;YAAE,OAAO;QACjB,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;QAC9D,IAAI,IAAI,KAAK,SAAS;YAAE,OAAO;QAC/B,SAAS,GAAG,IAAI,CAAC;QACjB,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC;IAC9C,CAAC,CACF,CAAC;IAEF,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;AACxC,CAAC;AAED,kCAAkC;AAClC,MAAM,UAAU,cAAc,CAAC,MAAc;IAI3C,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE;QACxC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC3B,oDAAoD;QACpD,qDAAqD;QACrD,qCAAqC;QACrC,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IACH,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAClC,OAAO,EAAE,KAAK,EAAE,KAAgC,EAAE,WAAW,EAAE,CAAC;AAClE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moda-editor/vue",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.3",
|
|
4
4
|
"description": "Vue 3 adapter for @moda-editor — useWidget + WidgetView",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"library"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@moda-editor/core": "0.3.
|
|
37
|
+
"@moda-editor/core": "0.3.3"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"vue": ">=3.3.0"
|
|
@@ -44,7 +44,8 @@
|
|
|
44
44
|
"happy-dom": "^20.14.5",
|
|
45
45
|
"typescript": "~5.9.2",
|
|
46
46
|
"vitest": "^3.2.7",
|
|
47
|
-
"vue": "^3.5.0"
|
|
47
|
+
"vue": "^3.5.0",
|
|
48
|
+
"@moda-editor/testkit": "0.3.3"
|
|
48
49
|
},
|
|
49
50
|
"scripts": {
|
|
50
51
|
"build": "tsc -p tsconfig.json && cp src/styles.css src/*.vue dist/",
|