@finos/legend-studio
Version:
94 lines • 4.25 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
/**
* Copyright (c) 2020-present, Goldman Sachs
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useEffect, useState, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { editor as monacoEditorAPI, KeyCode } from 'monaco-editor';
import { useResizeDetector } from 'react-resize-detector';
import { EDITOR_THEME, EDITOR_LANGUAGE, TAB_SIZE, useApplicationStore, } from '@finos/legend-application';
import { disposeDiffEditor, disableEditorHotKeys, baseTextEditorSettings, } from '@finos/legend-art';
import { isString, losslessStringify, tryToFormatJSONString, tryToFormatLosslessJSONString, } from '@finos/legend-shared';
import { flowResult } from 'mobx';
import { useEditorStore } from '../editor/EditorStoreProvider.js';
export const TextDiffView = observer((props) => {
const { from, to, language } = props;
const editorStore = useEditorStore();
const applicationStore = useApplicationStore();
const [editor, setEditor] = useState();
const editorRef = useRef(null);
const originalText = from ?? '';
const modifiedText = to ?? '';
const { ref, width, height } = useResizeDetector();
useEffect(() => {
if (width !== undefined && height !== undefined) {
editor?.layout({ width, height });
}
}, [editor, width, height]);
useEffect(() => {
if (!editor && editorRef.current) {
const element = editorRef.current;
const _editor = monacoEditorAPI.createDiffEditor(element, {
...baseTextEditorSettings,
theme: EDITOR_THEME.LEGEND,
readOnly: true,
});
_editor.getOriginalEditor().onKeyDown((event) => {
if (event.keyCode === KeyCode.F8) {
event.preventDefault();
event.stopPropagation();
flowResult(editorStore.toggleTextMode()).catch(applicationStore.alertUnhandledError);
}
});
_editor.getModifiedEditor().onKeyDown((event) => {
if (event.keyCode === KeyCode.F8) {
event.preventDefault();
event.stopPropagation();
flowResult(editorStore.toggleTextMode()).catch(applicationStore.alertUnhandledError);
}
});
disableEditorHotKeys(_editor);
setEditor(_editor);
}
}, [applicationStore, editorStore, editor]);
if (editor) {
const originalModel = monacoEditorAPI.createModel(originalText, language);
const modifiedModel = monacoEditorAPI.createModel(modifiedText, language);
editor.setModel({
original: originalModel,
modified: modifiedModel,
});
}
useEffect(() => () => {
if (editor) {
disposeDiffEditor(editor);
}
}, [editor]); // dispose editor
return (_jsx("div", { ref: ref, className: "text-editor__container", children: _jsx("div", { className: "text-editor__body", ref: editorRef }) }));
});
const formatJSONLikeValue = (value, lossless) => value
? isString(value)
? lossless
? tryToFormatLosslessJSONString(value)
: tryToFormatJSONString(value)
: lossless
? losslessStringify(value, undefined, TAB_SIZE)
: JSON.stringify(value, undefined, TAB_SIZE)
: '';
export const JsonDiffView = observer((props) => {
const { from, to, lossless } = props;
return (_jsx(TextDiffView, { language: EDITOR_LANGUAGE.JSON, from: formatJSONLikeValue(from, Boolean(lossless)), to: formatJSONLikeValue(to, Boolean(lossless)) }));
});
//# sourceMappingURL=DiffView.js.map