JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 修复直接关闭代码块编辑窗口告警

Browse Source
This commit is contained in:
roymondchen 2024-03-13 19:59:45 +08:00
parent f881b9ea3b
commit 62e7888fcf
1 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/editor/src/components/CodeBlockEditor.vue
View File

@ -9,7 +9,7 @@
<Teleport :to="floatingBoxBody" :disabled="slideType === 'box'" v-if="editVisible"> <Teleport :to="floatingBoxBody" :disabled="slideType === 'box'" v-if="editVisible">
<MFormBox <MFormBox
class="m-editor-code-block-editor" class="m-editor-code-block-editor"
ref="fomDrawer" ref="formBox"
label-width="80px" label-width="80px"
:close-on-press-escape="false" :close-on-press-escape="false"
:title="content.name" :title="content.name"
@ -41,7 +41,7 @@
type="diff" type="diff"
language="json" language="json"
:initValues="content.content" :initValues="content.content"
:modifiedValues="fomDrawer?.form?.values.content" :modifiedValues="formBox?.form?.values.content"
:style="`height: ${height - 200}px`" :style="`height: ${height - 200}px`"
></CodeEditor> ></CodeEditor>
@ -58,7 +58,7 @@
import { computed, inject, nextTick, onBeforeUnmount, ref } from 'vue'; import { computed, inject, nextTick, onBeforeUnmount, ref } from 'vue';
import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design'; import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
import { ColumnConfig, FormConfig, FormState, MFormBox, MFormDrawer } from '@tmagic/form'; import { ColumnConfig, FormConfig, FormState, MFormBox } from '@tmagic/form';
import type { CodeBlockContent } from '@tmagic/schema'; import type { CodeBlockContent } from '@tmagic/schema';
import FloatingBox from '@editor/components/FloatingBox.vue'; import FloatingBox from '@editor/components/FloatingBox.vue';
@ -87,24 +87,24 @@ const services = inject<Services>('services');
const difVisible = ref(false); const difVisible = ref(false);
const height = ref(globalThis.innerHeight); const height = ref(globalThis.innerHeight);
const windowReizehandler = () => { const windowResizeHandler = () => {
height.value = globalThis.innerHeight; height.value = globalThis.innerHeight;
}; };
globalThis.addEventListener('resize', windowReizehandler); globalThis.addEventListener('resize', windowResizeHandler);
onBeforeUnmount(() => { onBeforeUnmount(() => {
globalThis.removeEventListener('resize', windowReizehandler); globalThis.removeEventListener('resize', windowResizeHandler);
}); });
const magicVsEditor = ref<InstanceType<typeof CodeEditor>>(); const magicVsEditor = ref<InstanceType<typeof CodeEditor>>();
const diffChange = () => { const diffChange = () => {
if (!magicVsEditor.value || !fomDrawer.value?.form) { if (!magicVsEditor.value || !formBox.value?.form) {
return; return;
} }
fomDrawer.value.form.values.content = magicVsEditor.value.getEditorValue(); formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
difVisible.value = false; difVisible.value = false;
}; };
@ -216,6 +216,7 @@ const functionConfig = computed<FormConfig>(() => [
]); ]);
const submitForm = (values: CodeBlockContent) => { const submitForm = (values: CodeBlockContent) => {
changedValue.value = undefined;
emit('submit', values); emit('submit', values);
}; };
@ -223,12 +224,12 @@ const errorHandler = (error: any) => {
tMagicMessage.error(error.message); tMagicMessage.error(error.message);
}; };
const fomDrawer = ref<InstanceType<typeof MFormDrawer>>(); const formBox = ref<InstanceType<typeof MFormBox>>();
const openHandler = () => { const openHandler = () => {
setTimeout(() => { setTimeout(() => {
if (fomDrawer.value) { if (formBox.value) {
const height = fomDrawer.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0); const height = formBox.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0);
codeEditorHeight.value = `${height > 100 ? height : 600}px`; codeEditorHeight.value = `${height > 100 ? height : 600}px`;
} }
}); });
@ -241,6 +242,7 @@ const changeHandler = (values: CodeBlockContent) => {
const beforeClose = (done: (cancel?: boolean) => void) => { const beforeClose = (done: (cancel?: boolean) => void) => {
if (!changedValue.value) { if (!changedValue.value) {
editVisible.value = false;
done(); done();
return; return;
} }
@ -253,9 +255,13 @@ const beforeClose = (done: (cancel?: boolean) => void) => {
}) })
.then(() => { .then(() => {
changedValue.value && submitForm(changedValue.value); changedValue.value && submitForm(changedValue.value);
editVisible.value = false;
done(); done();
}) })
.catch((action: string) => { .catch((action: string) => {
if (action === 'cancel') {
editVisible.value = false;
}
done(action === 'cancel'); done(action === 'cancel');
}); });
}; };
@ -281,14 +287,19 @@ defineExpose({
async show() { async show() {
if (props.slideType !== 'box') { if (props.slideType !== 'box') {
boxVisible.value = true; boxVisible.value = true;
await nextTick();
} }
await nextTick();
editVisible.value = true; editVisible.value = true;
fomDrawer.value?.show();
}, },
hide() { async hide() {
fomDrawer.value?.hide(); editVisible.value = false;
if (props.slideType !== 'box') {
await nextTick();
boxVisible.value = false;
}
}, },
}); });
</script> </script>