Skip to content

Commit d1e2130

Browse files
rennzhangrennzhang
committed
fix(merge mode): fix error
1 parent 5e00942 commit d1e2130

File tree

5 files changed

+314
-203
lines changed

5 files changed

+314
-203
lines changed

‎packages/src/components/index.vue

Lines changed: 172 additions & 190 deletions
Original file line numberDiff line numberDiff line change
@@ -28,32 +28,27 @@
2828
</div>
2929
</template>
3030

31-
<script lang="ts">
32-
import type { Ref, PropType } from "vue";
31+
<script lang="ts"></script>
32+
<script lang="ts" setup>
33+
import type { Ref, PropType, Component } from "vue";
3334
import type { Editor, EditorConfiguration } from "codemirror";
3435
import {
35-
defineComponent,
3636
ref,
37+
shallowRef,
3738
getCurrentInstance,
3839
watch,
3940
onBeforeUnmount,
41+
unref,
42+
defineExpose,
4043
} from "vue";
41-
42-
// base style
4344
import "codemirror/lib/codemirror.css";
44-
// component
4545
import Default from "./presetMode/default/index.vue";
4646
import Merge from "./presetMode/Merge/index.vue";
4747
import FcLog from "./presetMode/log/index.vue";
48-
49-
// hooks
5048
import { useEvents } from "../hooks/useEvents";
5149
import { useViewControl } from "../hooks/useViewControl";
52-
53-
// config
5450
import { componentsEvts, getCmEvts, DEFAULT_OPTIONS } from "../config/index";
5551
56-
// pollfill
5752
if (typeof Object.assign !== "function") {
5853
Object.defineProperty(Object, "assign", {
5954
value(target: any, varArgs: any) {
@@ -80,192 +75,179 @@ if (typeof Object.assign !== "function") {
8075
});
8176
}
8277
83-
export default defineComponent({
84-
name: "CodemirrorEditor",
85-
components: {
86-
Default,
87-
Merge,
88-
FcLog,
78+
const props = defineProps({
79+
value: {
80+
type: String as PropType<string>,
81+
default: "",
8982
},
90-
props: {
91-
value: {
92-
type: String as PropType<string>,
93-
default: "",
94-
},
95-
options: {
96-
type: Object as PropType<EditorConfiguration>,
97-
default: () => DEFAULT_OPTIONS,
98-
},
99-
globalOptions: {
100-
type: Object as PropType<EditorConfiguration>,
101-
default: () => DEFAULT_OPTIONS,
102-
},
103-
placeholder: {
104-
type: String as PropType<string>,
105-
default: "",
106-
},
107-
border: {
108-
type: Boolean as PropType<boolean>,
109-
default: false,
110-
},
111-
width: {
112-
type: [String, Number] as PropType<string | number | null>,
113-
default: null,
114-
},
115-
height: {
116-
type: [String, Number] as PropType<string | number | null>,
117-
default: null,
118-
},
119-
keepCursorInEnd: {
120-
type: Boolean as PropType<boolean>,
121-
default: false,
122-
},
123-
merge: {
124-
type: Boolean as PropType<boolean>,
125-
default: false,
126-
},
127-
name: {
128-
type: String as PropType<string>,
129-
default: "",
130-
},
131-
marker: {
132-
type: Function as PropType<() => HTMLElement>,
133-
default: () => null,
134-
},
135-
unseenLines: {
136-
type: Array as PropType<Array<any>>,
137-
default: () => [],
138-
},
83+
options: {
84+
type: Object as PropType<EditorConfiguration>,
85+
default: () => DEFAULT_OPTIONS,
13986
},
140-
emits: { ...componentsEvts, ...getCmEvts() },
141-
142-
setup(props, { emit }) {
143-
const cminstance = ref<Nullable<Editor>>(null);
144-
const content = ref("");
145-
const presetModeName = ref<"Default" | "Merge" | "FcLog">("Default");
146-
const cmOptions = ref<any>({
147-
...DEFAULT_OPTIONS,
148-
...props.globalOptions,
149-
...props.options,
150-
});
151-
152-
const internalInstance = getCurrentInstance();
153-
const presetRef = ref(null);
154-
155-
const { refresh, resize, destroy, containerHeight, reviseStyle } =
156-
useViewControl({
157-
props,
158-
cminstance,
159-
presetRef,
160-
});
161-
162-
const { listenerEvents } = useEvents({
163-
props,
164-
cminstance: cminstance as Ref<Editor>,
165-
emit,
166-
internalInstance,
167-
content,
168-
});
169-
170-
const unseenLineMarkers = () => {
171-
if (props.unseenLines !== undefined && props.marker !== undefined) {
172-
props.unseenLines.forEach((line) => {
173-
const info = cminstance.value?.lineInfo(line);
174-
cminstance.value?.setGutterMarker(
175-
line,
176-
"breakpoints",
177-
info?.gutterMarkers ? null : props.marker()
178-
);
179-
});
180-
}
181-
};
182-
183-
const onCodeChange = (newVal: string) => {
184-
const CM_VALUE = cminstance.value?.getValue();
185-
if (newVal !== CM_VALUE) {
186-
cminstance.value?.setValue(newVal);
187-
content.value = newVal;
188-
reviseStyle();
189-
}
190-
unseenLineMarkers();
191-
};
87+
globalOptions: {
88+
type: Object as PropType<EditorConfiguration>,
89+
default: () => DEFAULT_OPTIONS,
90+
},
91+
placeholder: {
92+
type: String as PropType<string>,
93+
default: "",
94+
},
95+
border: {
96+
type: Boolean as PropType<boolean>,
97+
default: false,
98+
},
99+
width: {
100+
type: [String, Number] as PropType<string | number | null>,
101+
default: null,
102+
},
103+
height: {
104+
type: [String, Number] as PropType<string | number | null>,
105+
default: null,
106+
},
107+
keepCursorInEnd: {
108+
type: Boolean as PropType<boolean>,
109+
default: false,
110+
},
111+
merge: {
112+
type: Boolean as PropType<boolean>,
113+
default: false,
114+
},
115+
name: {
116+
type: String as PropType<string>,
117+
default: "",
118+
},
119+
marker: {
120+
type: Function as PropType<() => HTMLElement>,
121+
default: () => null,
122+
},
123+
unseenLines: {
124+
type: Array as PropType<Array<any>>,
125+
default: () => [],
126+
},
127+
});
128+
const emit = defineEmits({ ...componentsEvts, ...getCmEvts() });
129+
130+
const cminstance = ref<Nullable<Editor>>(null);
131+
const content = ref("");
132+
const presetModeName = shallowRef<Component>(Default);
133+
const cmOptions = ref<any>({
134+
...DEFAULT_OPTIONS,
135+
...props.globalOptions,
136+
...props.options,
137+
});
138+
const internalInstance = getCurrentInstance();
139+
const instanceName =
140+
props.name || internalInstance?.parent?.type?.name || undefined;
141+
const presetRef = ref(null);
142+
143+
const { refresh, resize, destroy, containerHeight, reviseStyle } =
144+
useViewControl({
145+
props,
146+
cminstance,
147+
presetRef,
148+
});
192149
193-
/** @description */
194-
const ready = () => {
195-
listenerEvents();
196-
unseenLineMarkers();
150+
const { listenerEvents } = useEvents({
151+
props,
152+
cminstance: cminstance as Ref<Editor>,
153+
emit,
154+
internalInstance,
155+
content,
156+
});
197157
198-
// prevents funky dynamic rendering
199-
resize();
200-
emit("ready", cminstance.value as Editor);
201-
watch(
202-
[() => props.width, () => props.height],
203-
([width, height]) => {
204-
resize(width, height);
205-
},
206-
{ deep: true }
158+
const unseenLineMarkers = () => {
159+
if (props.unseenLines !== undefined && props.marker !== undefined) {
160+
props.unseenLines.forEach((line) => {
161+
const info = cminstance.value?.lineInfo(line);
162+
cminstance.value?.setGutterMarker(
163+
line,
164+
"breakpoints",
165+
info?.gutterMarkers ? null : props.marker()
207166
);
208-
};
209-
210-
const handlePresetModeName = () => {
211-
if (props.options.mode === "fclog" || props.options.mode === "log") {
212-
presetModeName.value = "FcLog";
213-
return;
214-
}
215-
if (props.merge) {
216-
presetModeName.value = "Merge";
217-
return;
218-
}
219-
presetModeName.value = "Default";
220-
};
221-
222-
watch(
223-
() => props.options,
224-
(val) => {
225-
// eslint-disable-next-line guard-for-in
226-
for (const key in props.options) {
227-
cminstance.value?.setOption(
228-
key as keyof EditorConfiguration,
229-
val[key as keyof EditorConfiguration]
230-
);
231-
}
232-
},
233-
{ deep: true }
234-
);
235-
236-
watch(
237-
() => props.value,
238-
(val) => {
239-
onCodeChange(val);
240-
}
241-
);
242-
243-
watch(
244-
() => props.merge,
245-
(val) => {
246-
handlePresetModeName();
247-
},
248-
{ immediate: true }
249-
);
250-
251-
onBeforeUnmount(() => {
252-
destroy();
253167
});
254-
255-
return {
256-
presetModeName,
257-
cmOptions,
258-
cminstance,
259-
content,
260-
ready,
261-
resize,
262-
refresh,
263-
containerHeight,
264-
instanceName:
265-
props.name || internalInstance?.parent?.type?.name || undefined,
266-
presetRef,
267-
};
168+
}
169+
};
170+
171+
const onCodeChange = (newVal: string) => {
172+
const CM_VALUE = cminstance.value?.getValue();
173+
if (newVal !== CM_VALUE) {
174+
cminstance.value?.setValue(newVal);
175+
content.value = newVal;
176+
reviseStyle();
177+
}
178+
unseenLineMarkers();
179+
};
180+
181+
/** @description */
182+
const ready = () => {
183+
listenerEvents();
184+
unseenLineMarkers();
185+
186+
// prevents funky dynamic rendering
187+
resize();
188+
emit("ready", cminstance.value as Editor);
189+
watch(
190+
[() => props.width, () => props.height],
191+
([width, height]) => {
192+
resize(width, height);
193+
},
194+
{ deep: true }
195+
);
196+
};
197+
198+
const handlePresetModeName = () => {
199+
if (props.options.mode === "fclog" || props.options.mode === "log") {
200+
presetModeName.value = FcLog;
201+
return;
202+
}
203+
if (props.merge) {
204+
presetModeName.value = Merge;
205+
return;
206+
}
207+
presetModeName.value = Default;
208+
};
209+
210+
watch(
211+
() => props.options,
212+
(val) => {
213+
const realCm = props.merge
214+
? (unref(cminstance) as any)?.editor()
215+
: unref(cminstance);
216+
217+
// eslint-disable-next-line guard-for-in
218+
for (const key in props.options) {
219+
realCm.setOption(
220+
key as keyof EditorConfiguration,
221+
unref(val[key as keyof EditorConfiguration])
222+
);
223+
}
268224
},
225+
{ deep: true }
226+
);
227+
228+
watch(
229+
() => props.value,
230+
(val) => {
231+
onCodeChange(val);
232+
}
233+
);
234+
235+
watch(
236+
() => props.merge,
237+
(val) => {
238+
handlePresetModeName();
239+
},
240+
{ immediate: true }
241+
);
242+
243+
onBeforeUnmount(() => {
244+
destroy();
245+
});
246+
defineExpose({
247+
cminstance,
248+
resize,
249+
refresh,
250+
destroy,
269251
});
270252
</script>
271253

0 commit comments

Comments
 (0)