@moda-editor/vue2 0.3.0 → 0.3.2
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
|
@@ -31,6 +31,13 @@ const props = defineProps({
|
|
|
31
31
|
|
|
32
32
|
const { state } = useEditorState(props.editor);
|
|
33
33
|
|
|
34
|
+
// editor의 비-state 크롬(editable/ariaLabel/placeholder)은 state 참조를
|
|
35
|
+
// 바꾸지 않는 notify로만 갱신 신호가 온다 — state.value를 먼저 읽어
|
|
36
|
+
// notify마다 재평가되도록 의존을 등록하고 실제 프로퍼티 값을 반환한다
|
|
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
|
+
|
|
34
41
|
// doc 참조가 바뀔 때만 RenderNode 배열을 재생성 — selection-only
|
|
35
42
|
// 변경이면 같은 배열이라 자식 vnode가 그대로 스킵된다
|
|
36
43
|
let cachedDoc: DocNode | null = null;
|
|
@@ -80,17 +87,17 @@ onBeforeUnmount(() => binding?.unbind());
|
|
|
80
87
|
</script>
|
|
81
88
|
|
|
82
89
|
<template>
|
|
83
|
-
<div class="me-root" :data-me-readonly="
|
|
90
|
+
<div class="me-root" :data-me-readonly="editable ? undefined : ''">
|
|
84
91
|
<div
|
|
85
92
|
ref="editableEl"
|
|
86
93
|
class="me-editor"
|
|
87
94
|
data-me-path=""
|
|
88
95
|
role="textbox"
|
|
89
96
|
aria-multiline="true"
|
|
90
|
-
:aria-label="
|
|
91
|
-
:data-me-placeholder="
|
|
92
|
-
:aria-readonly="
|
|
93
|
-
:contenteditable="
|
|
97
|
+
:aria-label="ariaLabel"
|
|
98
|
+
:data-me-placeholder="placeholder"
|
|
99
|
+
:aria-readonly="editable ? undefined : true"
|
|
100
|
+
:contenteditable="editable"
|
|
94
101
|
>
|
|
95
102
|
<EditorNode
|
|
96
103
|
v-for="n in nodes"
|
package/dist/conformance.test.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import Vue 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,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM
|
|
1
|
+
{"version":3,"file":"conformance.test.js","sourceRoot":"","sources":["../src/conformance.test.ts"],"names":[],"mappings":"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"}
|
package/dist/useEditor.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE/B,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,GAAG,CAAC,WAAW,CAAC,CAAC;IACxB,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,GAAG,CAAC,WAAW,CAAC,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAUA"}
|
package/dist/useEditor.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getCurrentScope, onScopeDispose, shallowRef, unref, watch } from "vue";
|
|
1
|
+
import { getCurrentScope, onScopeDispose, shallowRef, triggerRef, unref, watch, } from "vue";
|
|
2
2
|
import { createEditor, normalizeDoc } from "@moda-editor/core";
|
|
3
3
|
/**
|
|
4
4
|
* Vue 2.7 어댑터 composable — Editor 생성 + 불변 state를 shallowRef로 구독.
|
|
@@ -36,6 +36,9 @@ export function useEditorState(editor) {
|
|
|
36
36
|
const state = shallowRef(editor.state);
|
|
37
37
|
const unsubscribe = editor.subscribe(() => {
|
|
38
38
|
state.value = editor.state;
|
|
39
|
+
// shallowRef는 같은 참조면 트리거를 스킵 — editor.setEditable처럼
|
|
40
|
+
// state를 바꾸지 않는 notify도 크롬 갱신이 필요하므로 강제 트리거한다
|
|
41
|
+
triggerRef(state);
|
|
39
42
|
});
|
|
40
43
|
if (getCurrentScope())
|
|
41
44
|
onScopeDispose(unsubscribe);
|
package/dist/useEditor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEditor.js","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useEditor.js","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,cAAc,EACd,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,GACN,MAAM,KAAK,CAAC;AAEb,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,6CAA6C;IAC7C,oCAAoC;IACpC,IAAI,eAAe,EAAE;QAAE,cAAc,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;IAE9D,4CAA4C;IAC5C,oCAAoC;IACpC,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACjD,KAAK,CACH,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EACxB,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,8CAA8C;QAC9C,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IACH,IAAI,eAAe,EAAE;QAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACnD,OAAO,EAAE,KAAK,EAAE,KAAyB,EAAE,WAAW,EAAE,CAAC;AAC3D,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moda-editor/vue2",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"description": "Vue 2.7 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.2"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"vue": "^2.7.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": "2.7.16"
|
|
47
|
+
"vue": "2.7.16",
|
|
48
|
+
"@moda-editor/testkit": "0.3.2"
|
|
48
49
|
},
|
|
49
50
|
"scripts": {
|
|
50
51
|
"build": "tsc -p tsconfig.json && cp src/styles.css src/*.vue dist/",
|