Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-02-01 23:21:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

test (#4)

Browse Source 
* test

* language can now be changed

* ready for PR

* ready for PR again
This commit is contained in:
anandamarsh 2023-08-23 20:46:47 -07:00 committed by GitHub
parent c8cae274bc
commit 49e0b7212d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lines.less
View File

@ -158,7 +158,7 @@
position: relative;
top: -8px;
width: min(300px, 50%);
margin-bottom: -3px;
margin-bottom: -4px;
}
.cmd-rtnstate-diff {
@ -217,8 +217,7 @@
&.top-border {
border-top: 1px solid #777;
padding-top: 5px;
margin-top: 5px;
padding: 10px;
}
&:nth-child(2) {

13
src/prompt.less
View File

@ -237,10 +237,23 @@ input[type="checkbox"] {
display: flex;
flex-direction: row;
}
.dropdown {
background: rgb(180, 180, 180);
color: black;
border-radius: 4px 4px 0 0;
font-size: 10px;
font-family: system-ui;
padding: 1px 0 3px 3px;
outline: none;
}
}
.renderer-container.code-renderer {
margin-top: 10px;
.monaco-editor .monaco-editor-background {
background-color: rgba(255, 255, 255, 0.075) !important;
}
}
.renderer-container.json-renderer {

45
src/view/code.tsx
View File

@ -4,21 +4,14 @@ import * as mobxReact from "mobx-react";
import { RendererContext, RendererOpts } from "../types";
import Editor from "@monaco-editor/react";
/**
* Note: As mentioned in https://www.npmjs.com/package/@monaco-editor/react#for-electron-users,
* Monaco gets loaded from CDN. This may be problematic if we are behind a firewall etc. If this happens,
* We need to serve Monaco from node_modules instead
*/
type OV<V> = mobx.IObservableValue<V>;
const MaxJsonSize = 50000;
@mobxReact.observer
class SourceCodeRenderer extends React.Component<
{
data: Blob;
path: String;
cmdstr: String;
cwd: String;
context: RendererContext;
opts: RendererOpts;
savedHeight: number;
@ -33,6 +26,8 @@ class SourceCodeRenderer extends React.Component<
name: "language",
deep: false,
});
languages: OV<string[]> = mobx.observable.box([]);
selectedLanguage: OV<string> = mobx.observable.box("");
editorRef;
constructor(props) {
@ -46,11 +41,15 @@ class SourceCodeRenderer extends React.Component<
}
handleEditorDidMount = (editor, monaco) => {
const extension = this.props.cmdstr.split(".").pop();
// Use a regular expression to match a filename with an extension
const extension = this.props.cmdstr.match(/(?:[^\\\/:*?"<>|\r\n]+\.)([a-zA-Z0-9]+)\b/)?.[1] || "";
const detectedLanguage = monaco.languages
.getLanguages()
.find((lang) => lang.extensions && lang.extensions.includes("." + extension));
const languages = monaco.languages.getLanguages().map((lang) => lang.id);
this.languages.set(languages);
if (detectedLanguage) {
this.selectedLanguage.set(detectedLanguage.id);
this.editorRef.current = editor;
const model = editor.getModel();
if (model) {
@ -60,6 +59,18 @@ class SourceCodeRenderer extends React.Component<
}
};
handleLanguageChange = (event) => {
const selectedLanguage = event.target.value;
this.selectedLanguage.set(selectedLanguage);
if (this.editorRef.current) {
const model = this.editorRef.current.getModel();
if (model) {
monaco.editor.setModelLanguage(model, selectedLanguage);
this.language.set(selectedLanguage);
}
}
};
render() {
let opts = this.props.opts;
let maxWidth = opts.maxSize.width;
@ -85,6 +96,20 @@ class SourceCodeRenderer extends React.Component<
}}
/>
</div>
<div style={{ position: "absolute", bottom: "-3px", right: 0 }}>
<select
className="dropdown"
value={this.selectedLanguage.get()}
onChange={this.handleLanguageChange}
style={{ maxWidth: "5rem", marginRight: "24px" }}
>
{this.languages.get().map((lang, index) => (
<option key={index} value={lang}>
{lang}
</option>
))}
</select>
</div>
</div>
);
}