Content type highlighting

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

View File

@@ -1,6 +1,7 @@
use http::header::{HeaderName, USER_AGENT};
use http::{HeaderMap, HeaderValue, Method};
use reqwest::redirect::Policy;
use std::collections::HashMap;
use tauri::{AppHandle, Wry};
#[derive(serde::Serialize)]
@@ -11,6 +12,7 @@ pub struct CustomResponse {
method: String,
elapsed: u128,
elapsed2: u128,
headers: HashMap<String, String>,
}
#[tauri::command]
@@ -59,8 +61,14 @@ pub async fn send_request(
match resp {
Ok(v) => {
let url2 = v.url().to_string();
let url = v.url().to_string();
let status = v.status().to_string();
let method = method.to_string();
let headers = v
.headers()
.iter()
.map(|(k, v)| (k.as_str().to_string(), v.to_str().unwrap().to_string()))
.collect::<HashMap<String, String>>();
let body = v.text().await.unwrap();
let elapsed2 = start.elapsed().as_millis();
Ok(CustomResponse {
@@ -68,8 +76,9 @@ pub async fn send_request(
body,
elapsed,
elapsed2,
method: method.to_string(),
url: url2,
method,
url,
headers,
})
}
Err(e) => {

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"

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" />;
}

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;
}