starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-22 01:19:13 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Content type highlighting

Browse Source
This commit is contained in:
Gregory Schier
2023-02-18 21:41:23 -08:00
parent d5649b0925
commit 0a0839cc3c
4 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src-web/App.tsx
View File

@@ -15,6 +15,7 @@ interface Response {
status: string;
elapsed: number;
elapsed2: number;
headers: Record<string, string>;
}
function App() {
@@ -27,6 +28,7 @@ function App() {
e.preventDefault();
setLoading(true);
const resp = (await invoke('send_request', { method, url })) as Response;
console.log('RESP', resp);
if (resp.body.includes('<head>')) {
resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`);
}
@@ -34,6 +36,8 @@ function App() {
setResponseBody(resp);
}
const contentType = responseBody?.headers['content-type']?.split(';')[0] ?? 'text/plain';
return (
<>
<Helmet>
@@ -79,7 +83,7 @@ function App() {
{responseBody?.elapsed2}ms
</div>
<Grid cols={2} rows={2} gap={1}>
<Editor value={responseBody?.body} language="application/json" />
<Editor value={responseBody?.body} contentType={contentType} />
<div className="iframe-wrapper">
<iframe
title="Response preview"

4
src-web/components/Editor/Editor.tsx
View File

@@ -2,11 +2,11 @@ import useCodeMirror, { EditorLanguage } from '../../hooks/useCodemirror';
import './Editor.css';
interface Props {
language: EditorLanguage;
contentType: string;
value: string;
}
export default function Editor(props: Props) {
const { ref } = useCodeMirror({ value: props.value, language: props.language });
const { ref } = useCodeMirror({ value: props.value, contentType: props.contentType });
return <div ref={ref} className="m-0 text-sm overflow-hidden" />;
}

17
src-web/hooks/useCodemirror.ts
View File

@@ -5,7 +5,7 @@ import { json } from '@codemirror/lang-json';
import { html } from '@codemirror/lang-html';
import { EditorState } from '@codemirror/state';
import { tags } from '@lezer/highlight';
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
import { HighlightStyle, LanguageSupport, syntaxHighlighting } from '@codemirror/language';
const myHighlightStyle = HighlightStyle.define([
{
@@ -20,7 +20,7 @@ const myHighlightStyle = HighlightStyle.define([
{ tag: tags.comment, color: '#f5d', fontStyle: 'italic' },
]);
const syntaxExtensions = {
const syntaxExtensions: Record<string, LanguageSupport> = {
'application/json': json(),
'application/javascript': javascript(),
'text/html': html(),
@@ -31,10 +31,10 @@ export type EditorLanguage = keyof typeof syntaxExtensions;
export default function useCodeMirror({
value,
language,
contentType,
}: {
value: string;
language: EditorLanguage;
contentType: string;
}) {
const [cm, setCm] = useState<EditorView | null>(null);
const ref = useRef(null);
@@ -42,7 +42,7 @@ export default function useCodeMirror({
if (ref.current === null) return;
const view = new EditorView({
extensions: [...extensions, syntaxExtensions[language]],
extensions: getExtensions(contentType),
parent: ref.current,
});
@@ -56,10 +56,15 @@ export default function useCodeMirror({
const newState = EditorState.create({
doc: value,
extensions: [...extensions, syntaxExtensions[language]],
extensions: getExtensions(contentType),
});
cm.setState(newState);
}, [cm, value]);
return { ref, cm };
}
function getExtensions(contentType: string) {
const ext = syntaxExtensions[contentType];
return ext ? [...extensions, ext] : extensions;
}