starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-17 23:14:03 +01: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

1
src-wasm/hello/Cargo.toml
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
# allocator, however.
wee_alloc = { version = "0.4.5", optional = true }
wasm-bindgen-futures = "0.4.34"
[dev-dependencies]
wasm-bindgen-test = "0.3.13"

6
src-wasm/hello/src/lib.rs
View File

@@ -1,14 +1,14 @@
mod utils;
use wasm_bindgen::prelude::*;
mod utils;
// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global allocator.
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
extern {
extern "C" {
fn alert(s: &str);
#[wasm_bindgen(js_namespace = console)]

4
src-web/App.tsx
View File

@@ -39,7 +39,7 @@ function App() {
<Helmet>
<body className="bg-background" />
</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">
<Stacks as="form" className="mt-5 items-end" onSubmit={sendRequest}>
<DropdownMenuRadio
@@ -79,7 +79,7 @@ function App() {
{responseBody?.elapsed2}ms
</div>
<Grid cols={2} rows={2} gap={1}>
<Editor value={responseBody?.body} />
<Editor value={responseBody?.body} language="application/json" />
<div className="iframe-wrapper">
<iframe
title="Response preview"

16
src-web/components/Editor/Editor.css
View File

@@ -6,15 +6,25 @@
}
.cm-editor .cm-scroller {
padding-top: 0.5em;
padding-bottom: 0.5em;
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 {
padding-left: 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 * {

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

@@ -1,11 +1,12 @@
import useCodeMirror from '../../hooks/useCodemirror';
import useCodeMirror, { EditorLanguage } from '../../hooks/useCodemirror';
import './Editor.css';
interface Props {
language: EditorLanguage;
value: string;
}
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" />;
}

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

@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from 'react';
import { EditorView, minimalSetup } from 'codemirror';
import { EditorView, basicSetup } from 'codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { json } from '@codemirror/lang-json';
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],
color: '#757b93',
},
{ tag: tags.name, color: '#4b92ff' },
{ tag: tags.name, color: '#4dafff' },
{ tag: tags.variableName, color: '#4bff4e' },
{ tag: tags.attributeName, color: '#b06fff' },
{ tag: tags.attributeValue, color: '#ff964b' },
{ tag: tags.keyword, color: '#fc6' },
{ tag: [tags.keyword, tags.string], color: '#fc6' },
{ tag: tags.comment, color: '#f5d', fontStyle: 'italic' },
]);
const extensions = [
minimalSetup,
syntaxHighlighting(myHighlightStyle),
html(),
javascript(),
json(),
];
const syntaxExtensions = {
'application/json': json(),
'application/javascript': javascript(),
'text/html': html(),
};
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 ref = useRef(null);
useEffect(() => {
if (ref.current === null) return;
const view = new EditorView({
extensions,
extensions: [...extensions, syntaxExtensions[language]],
parent: ref.current,
});
@@ -47,7 +54,10 @@ export default function useCodeMirror({ value }: { value: string }) {
useEffect(() => {
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, value]);