@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
118 lines (117 loc) • 4.68 kB
JavaScript
/* eslint-disable @typescript-eslint/no-explicit-any */
import * as React from "react";
import { useMonacoEditorStyles } from "./useMonacoEditorStyles";
import { EStatus, useMonaco } from "./useMonaco";
import { Shimmer } from "@fluentui/react/lib/Shimmer";
// import { ThemeProvider } from "@fluentui/react/lib/ThemeProvider";
// import { ThemeProvider, } from '@microsoft/sp-component-base';
import { mergeStyles } from "@fluentui/react/lib/Styling";
import { MessageBar, MessageBarType } from "@fluentui/react/lib/MessageBar";
/**
* Special thanks to the person who created this simple implimentation!
* https://github.com/ynot3363/monaco-editor/blob/main/MonacoEditor.tsx
*
* For some reason, this may not be able to be loaded directly from this package.
* However, you can copy the folder to your project, install the dependancy and use this import:
*
* This MAY not be required since it's in fps-library-v2
1. npm install @monaco-editor/loader@^1.3.1; NOTE: I tried ^1.4.1 and it did not work.
*
2. import MonacoEditor from '../MonacoYnot/MonacoEditor';
2. import MonacoEditor from "@mikezimm/fps-library-v2/lib/components/atoms/MonacoYnot/MonacoEditor";
*
3. Usage:
<MonacoEditor
jsonString={codeLines.join('\n')}
wrapText={ true }
readOnly={ true }
onChange={ null }
// language="typescript"
// onValueChange={onValueChange}
// theme="vs-dark"
// showLineNumbers={true}
// showMiniMap={true}
/>
*
*/
const MonacoEditor = function MonacoEditor(props) {
const containerRef = React.useRef(null);
const editorRef = React.useRef(null);
const { controlClasses } = useMonacoEditorStyles();
const { monaco, status, error } = useMonaco();
const { jsonString, readOnly, wrapText, onChange } = props;
const onDidChangeModelContent = React.useCallback((e) => {
if (editorRef.current) {
const currentValue = editorRef.current.getValue();
if (currentValue !== jsonString) {
const validationErrors = [];
try {
onChange(currentValue);
}
catch (e) {
validationErrors.push(e.message);
}
}
}
}, []);
React.useEffect(() => {
if (status !== EStatus.LOADED)
return;
monaco.editor.onDidCreateModel((m) => {
m.updateOptions({
tabSize: 2,
});
});
editorRef.current = monaco.editor.create(containerRef.current, {
value: jsonString,
scrollBeyondLastLine: false,
theme: "vs-dark",
language: "typescript",
folding: true,
readOnly: readOnly,
lineNumbersMinChars: 4,
lineNumbers: "on",
formatOnPaste: true,
minimap: {
enabled: false,
},
wordWrap: wrapText ? "on" : "off",
});
editorRef.current.onDidChangeModelContent(onDidChangeModelContent);
return () => {
editorRef === null || editorRef === void 0 ? void 0 : editorRef.current.dispose();
};
}, [monaco]);
React.useEffect(() => {
if (status !== EStatus.LOADED)
return;
editorRef.current.updateOptions({ wordWrap: wrapText ? "on" : "off" });
}, [wrapText]);
if (status === EStatus.LOADING) {
const wrapperClass = mergeStyles({
padding: 2,
width: "50vw",
selectors: {
"& > .ms-Shimmer-container": {
margin: "10px 0px",
},
},
});
return (
// <div>Waiting to load</div>
// <ThemeProvider className={wrapperClass}>
// <Shimmer />
// <Shimmer width="75%" />
// <Shimmer width="50%" />
// </ThemeProvider>
React.createElement(Shimmer, { width: '75%' }));
}
if (status === EStatus.ERROR) {
return (React.createElement(MessageBar, { isMultiline: true, messageBarType: MessageBarType.error }, (error === null || error === void 0 ? void 0 : error.message) ||
"An error occured trying to fetch the monaco editor code."));
}
return (React.createElement(React.Fragment, null,
React.createElement("div", { ref: containerRef, className: controlClasses.containerStyles })));
};
export default MonacoEditor;
//# sourceMappingURL=MonacoEditor.js.map