starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-23 00:58:32 +02: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

15
src-tauri/src/commands.rs
View File

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

6
src-web/App.tsx
View File

@@ -15,6 +15,7 @@ interface Response {
status: string; status: string;
elapsed: number; elapsed: number;
elapsed2: number; elapsed2: number;
headers: Record<string, string>;
} }
function App() { function App() {
@@ -27,6 +28,7 @@ function App() {
e.preventDefault(); e.preventDefault();
setLoading(true); setLoading(true);
const resp = (await invoke('send_request', { method, url })) as Response; const resp = (await invoke('send_request', { method, url })) as Response;
console.log('RESP', resp);
if (resp.body.includes('<head>')) { if (resp.body.includes('<head>')) {
resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`); resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`);
} }
@@ -34,6 +36,8 @@ function App() {
setResponseBody(resp); setResponseBody(resp);
} }
const contentType = responseBody?.headers['content-type']?.split(';')[0] ?? 'text/plain';
return ( return (
<> <>
<Helmet> <Helmet>
@@ -79,7 +83,7 @@ function App() {
{responseBody?.elapsed2}ms {responseBody?.elapsed2}ms
</div> </div>
<Grid cols={2} rows={2} gap={1}> <Grid cols={2} rows={2} gap={1}>
<Editor value={responseBody?.body} language="application/json" /> <Editor value={responseBody?.body} contentType={contentType} />
<div className="iframe-wrapper"> <div className="iframe-wrapper">
<iframe <iframe
title="Response preview" 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'; import './Editor.css';
interface Props { interface Props {
language: EditorLanguage; contentType: string;
value: string; value: string;
} }
export default function Editor(props: Props) { 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" />; 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 { html } from '@codemirror/lang-html';
import { EditorState } from '@codemirror/state'; import { EditorState } from '@codemirror/state';
import { tags } from '@lezer/highlight'; import { tags } from '@lezer/highlight';
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'; import { HighlightStyle, LanguageSupport, syntaxHighlighting } from '@codemirror/language';
const myHighlightStyle = HighlightStyle.define([ const myHighlightStyle = HighlightStyle.define([
{ {
@@ -20,7 +20,7 @@ const myHighlightStyle = HighlightStyle.define([
{ tag: tags.comment, color: '#f5d', fontStyle: 'italic' }, { tag: tags.comment, color: '#f5d', fontStyle: 'italic' },
]); ]);
const syntaxExtensions = { const syntaxExtensions: Record<string, LanguageSupport> = {
'application/json': json(), 'application/json': json(),
'application/javascript': javascript(), 'application/javascript': javascript(),
'text/html': html(), 'text/html': html(),
@@ -31,10 +31,10 @@ export type EditorLanguage = keyof typeof syntaxExtensions;
export default function useCodeMirror({ export default function useCodeMirror({
value, value,
language, contentType,
}: { }: {
value: string; value: string;
language: EditorLanguage; contentType: string;
}) { }) {
const [cm, setCm] = useState<EditorView | null>(null); const [cm, setCm] = useState<EditorView | null>(null);
const ref = useRef(null); const ref = useRef(null);
@@ -42,7 +42,7 @@ export default function useCodeMirror({
if (ref.current === null) return; if (ref.current === null) return;
const view = new EditorView({ const view = new EditorView({
extensions: [...extensions, syntaxExtensions[language]], extensions: getExtensions(contentType),
parent: ref.current, parent: ref.current,
}); });
@@ -56,10 +56,15 @@ export default function useCodeMirror({
const newState = EditorState.create({ const newState = EditorState.create({
doc: value, doc: value,
extensions: [...extensions, syntaxExtensions[language]], extensions: getExtensions(contentType),
}); });
cm.setState(newState); cm.setState(newState);
}, [cm, value]); }, [cm, value]);
return { ref, cm }; return { ref, cm };
} }
function getExtensions(contentType: string) {
const ext = syntaxExtensions[contentType];
return ext ? [...extensions, ext] : extensions;
}