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

Automatically Detect Monaco Syntax Highlighting (#20)

Browse Source 
This change passes the file name to monaco, so it can use its own
detection to determine highlighting of supported files. It also resolves
some of the mimetypes with more common use cases for a terminal.
This commit is contained in:
Sylvie Crowe 2024-06-06 14:52:01 -07:00 committed by GitHub
parent b3b99402b8
commit ba7d2cf061
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/app/view/codeedit.tsx
View File

@ -58,11 +58,13 @@ function defaultEditorOptions(): MonacoTypes.editor.IEditorOptions {
}
interface CodeEditProps {
readonly: boolean;
readonly?: boolean;
text: string;
language?: string;
filename: string;
}
export function CodeEdit({ readonly, text }: CodeEditProps) {
export function CodeEdit({ readonly = false, text, language, filename }: CodeEditProps) {
const divRef = React.useRef<HTMLDivElement>(null);
const monacoRef = React.useRef<MonacoTypes.editor.IStandaloneCodeEditor | null>(null);
const theme = "wave-theme-dark";
@ -81,7 +83,7 @@ export function CodeEdit({ readonly, text }: CodeEditProps) {
function handleEditorMount(editor: MonacoTypes.editor.IStandaloneCodeEditor) {
monacoRef.current = editor;
const monacoModel = editor.getModel();
monaco.editor.setModelLanguage(monacoModel, "text/markdown");
//monaco.editor.setModelLanguage(monacoModel, "text/markdown");
}
function handleEditorChange(newText: string, ev: MonacoTypes.editor.IModelContentChangedEvent) {
@ -97,11 +99,12 @@ export function CodeEdit({ readonly, text }: CodeEditProps) {
<Editor
theme={theme}
height={divDims.height}
defaultLanguage={"text/markdown"}
value={text}
onMount={handleEditorMount}
options={editorOpts}
onChange={handleEditorChange}
path={filename}
language={language}
/>
) : null}
</div>
@ -111,12 +114,14 @@ export function CodeEdit({ readonly, text }: CodeEditProps) {
interface CodeEditViewProps {
readonly?: boolean;
text: string;
language?: string;
filename?: string;
}
export function CodeEditView({ readonly = false, text }: CodeEditViewProps) {
export function CodeEditView({ readonly, text, language, filename }: CodeEditViewProps) {
return (
<div className="view-codeedit">
<CodeEdit readonly={readonly} text={text} />
<CodeEdit readonly={readonly} text={text} language={language} filename={filename} />
</div>
);
}

16
frontend/app/view/preview.tsx
View File

@ -118,8 +118,6 @@ function PreviewView({ blockId }: { blockId: string }) {
}
)
);
let name = jotai.useAtomValue(fileNameAtom);
console.log("file: ", name);
const statFileAtom = useBlockAtom(blockId, "preview:statfile", () =>
jotai.atom<Promise<FileInfo>>(async (get) => {
const fileName = get(fileNameAtom);
@ -156,6 +154,7 @@ function PreviewView({ blockId }: { blockId: string }) {
if (mimeType == null) {
mimeType = "";
}
let fileName = jotai.useAtomValue(fileNameAtom);
const fileInfo = jotai.useAtomValue(statFileAtom);
const fileContent = jotai.useAtomValue(fileContentAtom);
@ -174,17 +173,12 @@ function PreviewView({ blockId }: { blockId: string }) {
specializedView = <CenteredDiv>File Too Large to Preview</CenteredDiv>;
} else if (mimeType === "text/markdown") {
specializedView = <MarkdownPreview contentAtom={fileContentAtom} />;
} else if (mimeType.startsWith("text/")) {
specializedView = (
<div className="view-preview view-preview-text">
<pre>{fileContent}</pre>
</div>
);
} else if (
mimeType.startsWith("application") &&
(mimeType.includes("json") || mimeType.includes("yaml") || mimeType.includes("toml"))
mimeType.startsWith("text/") ||
(mimeType.startsWith("application/") &&
(mimeType.includes("json") || mimeType.includes("yaml") || mimeType.includes("toml")))
) {
specializedView = <CodeEditView readonly={true} text={fileContent} />;
specializedView = specializedView = <CodeEditView readonly={true} text={fileContent} filename={fileName} />;
} else if (mimeType === "directory") {
specializedView = <DirectoryPreview contentAtom={fileContentAtom} fileNameAtom={fileNameAtom} />;
} else {

11
pkg/util/utilfn/mimetypes.go
View File

@ -155,7 +155,6 @@ var StaticMimeTypeMap = map[string]string{
".rl": "application/resource-lists+xml",
".rld": "application/resource-lists-diff+xml",
".rfcxml": "application/rfc+xml",
".rs": "application/rls-services+xml",
".rapd": "application/route-apd+xml",
".sls": "application/route-s-tsid+xml",
".rusd": "application/route-usd+xml",
@ -1094,9 +1093,12 @@ var StaticMimeTypeMap = map[string]string{
".csvs": "text/csv-schema",
".soa": "text/dns",
".gff3": "text/gff3",
".go": "text/golang",
".html": "text/html",
".es": "text/javascript",
".js": "text/javascript",
".cnd": "text/jcr-cnd",
".jsx": "text/jsx",
".less": "text/less",
".md": "text/markdown",
".miz": "text/mizar",
".n3": "text/n3",
@ -1104,6 +1106,9 @@ var StaticMimeTypeMap = map[string]string{
".provn": "text/provenance-notation",
".rst": "text/prs.fallenstein.rst",
".tag": "text/prs.lines.tag",
".rs": "text/rust",
".sass": "text/scss",
".scss": "text/scss",
".sgml": "text/SGML",
".shaclc": "text/shaclc",
".shex": "text/shex",
@ -1112,6 +1117,7 @@ var StaticMimeTypeMap = map[string]string{
".tm": "text/texmacs",
".t": "text/troff",
".ttl": "text/turtle",
".ts": "text/typescript",
".uris": "text/uri-list",
".vcf": "text/vcard",
".a": "text/vnd.a",
@ -1136,7 +1142,6 @@ var StaticMimeTypeMap = map[string]string{
".mc2": "text/vnd.senx.warpscript",
".sos": "text/vnd.sosi",
".jad": "text/vnd.sun.j2me.app-descriptor",
".ts": "text/vnd.trolltech.linguist",
".si": "text/vnd.wap.si",
".sl": "text/vnd.wap.sl",
".wml": "text/vnd.wap.wml",