feat: support code editor (#105)

* feat: support code editor

* Update codeblock

* refactor: remove unused class

---------

Co-authored-by: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
This commit is contained in:
木头981
2024-05-27 05:32:24 +08:00
committed by GitHub
parent ed6e4e8e73
commit 4d3e3426ca
12 changed files with 349 additions and 48 deletions

View File

@@ -9,6 +9,7 @@ import {
import { api } from "@/utils/api";
import { File } from "lucide-react";
import { UpdateTraefikConfig } from "./update-traefik-config";
import { CodeEditor } from "@/components/shared/code-editor";
interface Props {
applicationId: string;
}
@@ -43,11 +44,13 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
</div>
) : (
<div className="flex flex-col pt-2 relative">
<div className="flex flex-col gap-6 bg-input p-4 rounded-md max-h-[35rem] min-h-[10rem] overflow-y-auto">
<div>
<pre className="font-sans">{data || "Empty"}</pre>
</div>
<div className="flex justify-end absolute z-50 right-6">
<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
<CodeEditor
value={data || "Empty"}
disabled
className="font-mono"
/>
<div className="flex justify-end absolute z-50 right-6 top-6">
<UpdateTraefikConfig applicationId={applicationId} />
</div>
</div>

View File

@@ -16,7 +16,6 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { api } from "@/utils/api";
import { AlertBlock } from "@/components/shared/alert-block";
import { zodResolver } from "@hookform/resolvers/zod";
@@ -25,6 +24,7 @@ import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import jsyaml from "js-yaml";
import { CodeEditor } from "@/components/shared/code-editor";
const UpdateTraefikConfigSchema = z.object({
traefikConfig: z.string(),
@@ -122,7 +122,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
<form
id="hook-form-update-traefik-config"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full py-4"
className="grid w-full py-4 overflow-auto"
>
<div className="flex flex-col">
<FormField
@@ -132,8 +132,8 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
<FormItem>
<FormLabel>Traefik config</FormLabel>
<FormControl>
<Textarea
className="h-[35rem] font-mono"
<CodeEditor
wrapperClassName="h-[35rem] font-mono"
placeholder={`http:
routers:
router-name: