starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-07-05 04:21:50 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Update editor styles

Browse Source
This commit is contained in:
Gregory Schier
2023-02-18 21:12:25 -08:00
parent bfa3418ee5
commit d5649b0925
6 changed files with 45 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src-wasm/hello/Cargo.toml
+1
View File
@@ -23,6 +23,7 @@ console_error_panic_hook = { version = "0.1.6", optional = true }
# compared to the default allocator's ~10K. It is slower than the default # compared to the default allocator's ~10K. It is slower than the default
# allocator, however. # allocator, however.
wee_alloc = { version = "0.4.5", optional = true } wee_alloc = { version = "0.4.5", optional = true }
wasm-bindgen-futures = "0.4.34"
[dev-dependencies] [dev-dependencies]
wasm-bindgen-test = "0.3.13" wasm-bindgen-test = "0.3.13"
src-wasm/hello/src/lib.rs
+3 -3
View File
@@ -1,14 +1,14 @@
mod utils;
use wasm_bindgen::prelude::*; use wasm_bindgen::prelude::*;
mod utils;
// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global allocator. // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global allocator.
#[cfg(feature = "wee_alloc")] #[cfg(feature = "wee_alloc")]
#[global_allocator] #[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT; static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen] #[wasm_bindgen]
extern { extern "C" {
fn alert(s: &str); fn alert(s: &str);
#[wasm_bindgen(js_namespace = console)] #[wasm_bindgen(js_namespace = console)]
src-web/App.tsx
+2 -2
View File
@@ -39,7 +39,7 @@ function App() {
<Helmet> <Helmet>
<body className="bg-background" /> <body className="bg-background" />
</Helmet> </Helmet>
<div className="w-full h-7 bg-gray-100" data-tauri-drag-region="" /> <div className="w-full h-7 bg-gray-50" data-tauri-drag-region="" />
<div className="p-12 h-full w-full overflow-auto"> <div className="p-12 h-full w-full overflow-auto">
<Stacks as="form" className="mt-5 items-end" onSubmit={sendRequest}> <Stacks as="form" className="mt-5 items-end" onSubmit={sendRequest}>
<DropdownMenuRadio <DropdownMenuRadio
@@ -79,7 +79,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} /> <Editor value={responseBody?.body} language="application/json" />
<div className="iframe-wrapper"> <div className="iframe-wrapper">
<iframe <iframe
title="Response preview" title="Response preview"
src-web/components/Editor/Editor.css
+13 -3
View File
@@ -6,15 +6,25 @@
} }
.cm-editor .cm-scroller { .cm-editor .cm-scroller {
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: var(--border-radius-lg); border-radius: var(--border-radius-lg);
background-color: hsl(var(--color-gray-50)); background-color: hsl(var(--color-gray-50) / 0.5);
} }
.cm-editor .cm-line { .cm-editor .cm-line {
padding-left: 1.5em; padding-left: 1.5em;
padding-right: 1.5em; padding-right: 1.5em;
color: hsl(var(--color-gray-900));
}
.cm-editor .cm-gutters {
background-color: transparent;
border-right: 1px solid hsl(var(--color-gray-100));
color: hsl(var(--color-gray-300));
}
.cm-editor .cm-activeLineGutter,
.cm-editor .cm-activeLine {
background-color: hsl(var(--color-gray-100) / 0.5);
} }
.cm-editor * { .cm-editor * {
src-web/components/Editor/Editor.tsx
+3 -2
View File
@@ -1,11 +1,12 @@
import useCodeMirror from '../../hooks/useCodemirror'; import useCodeMirror, { EditorLanguage } from '../../hooks/useCodemirror';
import './Editor.css'; import './Editor.css';
interface Props { interface Props {
language: EditorLanguage;
value: string; value: string;
} }
export default function Editor(props: Props) { export default function Editor(props: Props) {
const { ref } = useCodeMirror({ value: props.value }); const { ref } = useCodeMirror({ value: props.value, language: props.language });
return <div ref={ref} className="m-0 text-sm overflow-hidden" />; return <div ref={ref} className="m-0 text-sm overflow-hidden" />;
} }
src-web/hooks/useCodemirror.ts
+23 -13
View File
@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { EditorView, minimalSetup } from 'codemirror'; import { EditorView, basicSetup } from 'codemirror';
import { javascript } from '@codemirror/lang-javascript'; import { javascript } from '@codemirror/lang-javascript';
import { json } from '@codemirror/lang-json'; import { json } from '@codemirror/lang-json';
import { html } from '@codemirror/lang-html'; import { html } from '@codemirror/lang-html';
@@ -12,30 +12,37 @@ const myHighlightStyle = HighlightStyle.define([
tag: [tags.documentMeta, tags.blockComment, tags.lineComment, tags.docComment, tags.comment], tag: [tags.documentMeta, tags.blockComment, tags.lineComment, tags.docComment, tags.comment],
color: '#757b93', color: '#757b93',
}, },
{ tag: tags.name, color: '#4b92ff' }, { tag: tags.name, color: '#4dafff' },
{ tag: tags.variableName, color: '#4bff4e' }, { tag: tags.variableName, color: '#4bff4e' },
{ tag: tags.attributeName, color: '#b06fff' }, { tag: tags.attributeName, color: '#b06fff' },
{ tag: tags.attributeValue, color: '#ff964b' }, { tag: tags.attributeValue, color: '#ff964b' },
{ tag: tags.keyword, color: '#fc6' }, { tag: [tags.keyword, tags.string], color: '#fc6' },
{ tag: tags.comment, color: '#f5d', fontStyle: 'italic' }, { tag: tags.comment, color: '#f5d', fontStyle: 'italic' },
]); ]);
const extensions = [ const syntaxExtensions = {
minimalSetup, 'application/json': json(),
syntaxHighlighting(myHighlightStyle), 'application/javascript': javascript(),
html(), 'text/html': html(),
javascript(), };
json(),
];
export default function useCodeMirror({ value }: { value: string }) { const extensions = [basicSetup, syntaxHighlighting(myHighlightStyle)];
export type EditorLanguage = keyof typeof syntaxExtensions;
export default function useCodeMirror({
value,
language,
}: {
value: string;
language: EditorLanguage;
}) {
const [cm, setCm] = useState<EditorView | null>(null); const [cm, setCm] = useState<EditorView | null>(null);
const ref = useRef(null); const ref = useRef(null);
useEffect(() => { useEffect(() => {
if (ref.current === null) return; if (ref.current === null) return;
const view = new EditorView({ const view = new EditorView({
extensions, extensions: [...extensions, syntaxExtensions[language]],
parent: ref.current, parent: ref.current,
}); });
@@ -47,7 +54,10 @@ export default function useCodeMirror({ value }: { value: string }) {
useEffect(() => { useEffect(() => {
if (cm === null) return; if (cm === null) return;
const newState = EditorState.create({ doc: value, extensions }); const newState = EditorState.create({
doc: value,
extensions: [...extensions, syntaxExtensions[language]],
});
cm.setState(newState); cm.setState(newState);
}, [cm, value]); }, [cm, value]);