forked from alibaba/lowcode-plugins
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy patheditor.tsx
More file actions
104 lines (93 loc) · 3.14 KB
/
editor.tsx
File metadata and controls
104 lines (93 loc) · 3.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import * as React from 'react';
import { useState, useRef, useCallback, useEffect } from 'react';
import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor';
import { Dialog, Message, Button } from '@alifd/next';
import { common } from '@alilc/lowcode-engine'
import { Project, Skeleton, Event } from '@alilc/lowcode-shell';
import { IEditorInstance } from '@alilc/lowcode-plugin-base-monaco-editor/lib/helper';
interface PluginCodeDiffProps {
project: Project;
skeleton: Skeleton;
event: Event;
}
export default function PluginSchema({ project, skeleton, event }: PluginCodeDiffProps) {
const [editorSize, setEditorSize] = useState({ width: 0, height: 0 });
const [schemaValue, setSchemaValue] = useState(() => {
const schema = project.exportSchema(common.designerCabin.TransformStage.Save)
return schema?.componentsTree?.[0] ? JSON.stringify(schema.componentsTree[0], null, 2) : ''
});
const monacoEditorRef = useRef<IEditorInstance>();
const resize = useCallback(() => {
setEditorSize({
width: document.documentElement.clientWidth - 60,
height: document.documentElement.clientHeight - 100,
});
}, []);
useEffect(() => {
event.on('skeleton.panel-dock.active', (pluginName) => {
if (pluginName == 'LowcodePluginAliLowcodePluginSchema') {
const schema = project.exportSchema(common.designerCabin.TransformStage.Save)
const str = schema?.componentsTree?.[0] ? JSON.stringify(schema.componentsTree[0], null, 2) : ''
setSchemaValue(str);
}
});
}, []);
useEffect(() => {
resize();
window.addEventListener('resize', resize);
return () => {
window.removeEventListener('resize', resize);
}
}, [resize]);
const onSave = () => {
Dialog.alert({
content: 'Are you 100% sure? Lowcode editor may crash.',
footerActions: ['cancel', 'ok'],
onOk: () => {
let json
try {
json = JSON.parse(monacoEditorRef.current?.getValue() ?? schemaValue)
} catch (err) {
Message.error('Cannot save schema. Schema Parse Error.' + err.message)
return;
}
project.importSchema({
...project.exportSchema(common.designerCabin.TransformStage.Save),
componentsTree: [json],
});
Message.success('Schema Saved!');
skeleton.hidePanel('LowcodePluginAliLowcodePluginSchema');
}
});
}
return (
<>
<Button
onClick={onSave}
style={{ position: 'absolute', right: 68, zIndex: 100, top: -38 }}
>
保存 Schema
</Button>
<MonacoEditor
height={editorSize.height}
language="json"
theme="vs-light"
value={schemaValue}
onChange={(input) => {
setSchemaValue(input);
}}
editorDidMount={(_, monacoEditor) => {
monacoEditorRef.current = monacoEditor
monacoEditor.addAction({
id: 'my-unique-id',
label: 'Save Schema',
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run: onSave,
});
}}
/>
</>
)
}