github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

add new code editor menu

Browse Source
This commit is contained in:
Simon Larsen
2023-02-20 10:15:04 +00:00
parent b20cc217df
commit 87f18774da
4 changed files with 136 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Common/Types/Code/CodeType.ts
View File

@@ -1,7 +1,7 @@
enum CodeType {
JavaScript = 'JavaScript',
CSS = 'CSS',
HTML = 'HTML',
JavaScript = 'javascript',
CSS = 'css',
HTML = 'html',
// TODO add more mime types.
}

65
CommonUI/package-lock.json generated
View File

@@ -15,6 +15,7 @@
"@fortawesome/react-fontawesome": "^0.1.18",
"@headlessui/react": "^1.7.7",
"@heroicons/react": "^2.0.13",
"@monaco-editor/react": "^4.4.6",
"@nivo/bar": "^0.79.1",
"@nivo/core": "^0.79.0",
"@tippyjs/react": "^4.2.6",
@@ -1295,6 +1296,31 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"node_modules/@monaco-editor/loader": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz",
"integrity": "sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==",
"dependencies": {
"state-local": "^1.0.6"
},
"peerDependencies": {
"monaco-editor": ">= 0.21.0 < 1"
}
},
"node_modules/@monaco-editor/react": {
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.4.6.tgz",
"integrity": "sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==",
"dependencies": {
"@monaco-editor/loader": "^1.3.2",
"prop-types": "^15.7.2"
},
"peerDependencies": {
"monaco-editor": ">= 0.25.0 < 1",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@nivo/bar": {
"version": "0.79.1",
"resolved": "https://registry.npmjs.org/@nivo/bar/-/bar-0.79.1.tgz",
@@ -7166,6 +7192,12 @@
"resolved": "../Model",
"link": true
},
"node_modules/monaco-editor": {
"version": "0.35.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.35.0.tgz",
"integrity": "sha512-BJfkAZ0EJ7JgrgWzqjfBNP9hPSS8NlfECEDMEIIiozV2UaPq22yeuOjgbd3TwMh3anH0krWZirXZfn8KUSxiOA==",
"peer": true
},
"node_modules/mri": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -11154,6 +11186,11 @@
"node": ">=8"
}
},
"node_modules/state-local": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
"integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
},
"node_modules/string-length": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -13124,6 +13161,23 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"@monaco-editor/loader": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz",
"integrity": "sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==",
"requires": {
"state-local": "^1.0.6"
}
},
"@monaco-editor/react": {
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.4.6.tgz",
"integrity": "sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==",
"requires": {
"@monaco-editor/loader": "^1.3.2",
"prop-types": "^15.7.2"
}
},
"@nivo/bar": {
"version": "0.79.1",
"resolved": "https://registry.npmjs.org/@nivo/bar/-/bar-0.79.1.tgz",
@@ -17558,6 +17612,12 @@
"typeorm": "^0.3.7"
}
},
"monaco-editor": {
"version": "0.35.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.35.0.tgz",
"integrity": "sha512-BJfkAZ0EJ7JgrgWzqjfBNP9hPSS8NlfECEDMEIIiozV2UaPq22yeuOjgbd3TwMh3anH0krWZirXZfn8KUSxiOA==",
"peer": true
},
"mri": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -20303,6 +20363,11 @@
}
}
},
"state-local": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
"integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
},
"string-length": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",

1
CommonUI/package.json
View File

@@ -17,6 +17,7 @@
"@fortawesome/react-fontawesome": "^0.1.18",
"@headlessui/react": "^1.7.7",
"@heroicons/react": "^2.0.13",
"@monaco-editor/react": "^4.4.6",
"@nivo/bar": "^0.79.1",
"@nivo/core": "^0.79.0",
"@tippyjs/react": "^4.2.6",

113
CommonUI/src/Components/CodeEditor/CodeEditor.tsx
View File

@@ -1,8 +1,4 @@
import Editor from 'react-simple-code-editor';
import PrismJS, { highlight, Grammar } from 'prismjs';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism.css';
import CodeType from 'Common/Types/Code/CodeType';
import React, {
@@ -12,6 +8,8 @@ import React, {
useState,
} from 'react';
import Editor from "@monaco-editor/react";
export interface ComponentProps {
initialValue?: undefined | string;
onClick?: undefined | (() => void);
@@ -71,23 +69,6 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
}
}, [props.initialValue]);
let grammar: Grammar = (PrismJS.languages as any).markup as any;
let language: string = 'markup';
if (props.type === CodeType.JavaScript) {
grammar = (PrismJS.languages as any).javascript as any;
language = 'javascript';
}
if (props.type === CodeType.HTML) {
grammar = (PrismJS.languages as any).html as any;
language = 'html';
}
if (props.type === CodeType.CSS) {
grammar = (PrismJS.languages as any).css as any;
language = 'css';
}
return (
<div
@@ -98,33 +79,73 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
}}
>
<Editor
tabIndex={props.tabIndex}
id={props.dataTestId}
defaultLanguage={props.type}
height="25vh"
value={value}
onValueChange={(code: string) => {
return setValue(code);
}}
className={className}
highlight={(code: string) => {
return highlight(code, grammar, language);
}}
padding={10}
style={{
fontFamily: '"Fira code", "Fira Mono", monospace',
fontSize: 12,
maxHeight: '100px',
overflowX: 'hidden',
overflowY: 'scroll',
width: '100%',
minHeight: '200px',
}}
placeholder={props.placeholder || ''}
onBlur={() => {
if (props.onBlur) {
props.onBlur();
onChange={(code: string | undefined) => {
if (code === undefined) {
code = ""
}
return setValue(code);
}}
defaultValue={props.initialValue || ''}
className={className}
options={{
"acceptSuggestionOnCommitCharacter": true,
"acceptSuggestionOnEnter": "on",
"accessibilitySupport": "auto",
"automaticLayout": true,
"codeLens": false,
"colorDecorators": true,
"contextmenu": false,
"cursorBlinking": "blink",
"cursorStyle": "line",
"disableLayerHinting": false,
"disableMonospaceOptimizations": false,
"dragAndDrop": false,
"fixedOverflowWidgets": false,
"folding": true,
"foldingStrategy": "auto",
"fontLigatures": false,
"formatOnPaste": false,
"formatOnType": false,
"hideCursorInOverviewRuler": false,
"links": true,
"mouseWheelZoom": false,
"multiCursorMergeOverlapping": true,
"multiCursorModifier": "alt",
"overviewRulerBorder": true,
"overviewRulerLanes": 2,
"quickSuggestions": true,
"quickSuggestionsDelay": 100,
"readOnly": props.readOnly || false,
"renderControlCharacters": false,
"renderLineHighlight": "all",
"renderWhitespace": "none",
"revealHorizontalRightPadding": 30,
"roundedSelection": true,
"rulers": [],
"scrollBeyondLastColumn": 5,
"scrollBeyondLastLine": true,
"selectOnLineNumbers": true,
"selectionClipboard": true,
"selectionHighlight": true,
"showFoldingControls": "mouseover",
"smoothScrolling": false,
"suggestOnTriggerCharacters": true,
"wordBasedSuggestions": true,
"wordSeparators": "~!@#$%^&*()-=+[{]}|;:'\",.<>/?",
"wordWrap": "off",
"wordWrapBreakAfterCharacters": "\t})]?|&,;",
"wordWrapBreakBeforeCharacters": "{([+",
"wordWrapColumn": 80,
"wrappingIndent": "none"
}}
disabled={props.readOnly || false}
/>
{props.error && (
<p className="mt-1 text-sm text-red-400">{props.error}</p>