Update codeblock

Dokploy · May 26, 2024 · 08eaea4 · 08eaea4
1 parent eb453fa
commit 08eaea4
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 46 deletions.
diff --git a/components/dashboard/application/advanced/traefik/show-traefik-config.tsx b/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
@@ -9,7 +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";
+import { CodeEditor } from "@/components/shared/code-editor";
 interface Props {
 	applicationId: string;
 }

diff --git a/components/dashboard/application/advanced/traefik/update-traefik-config.tsx b/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
@@ -24,7 +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";
+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

diff --git a/components/dashboard/file-system/show-traefik-file.tsx b/components/dashboard/file-system/show-traefik-file.tsx
@@ -17,7 +17,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { validateAndFormatYAML } from "../application/advanced/traefik/update-traefik-config";
-import CodeEditor from "@/components/shared/code-editor";
+import { CodeEditor } from "@/components/shared/code-editor";
 
 const UpdateServerMiddlewareConfigSchema = z.object({
 	traefikConfig: z.string(),
@@ -87,13 +87,12 @@ export const ShowTraefikFile = ({ path }: Props) => {
 	return (
 		<div>
 			{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-
 			<Form {...form}>
 				<form
 					onSubmit={form.handleSubmit(onSubmit)}
-					className="grid w-full relative"
+					className="grid w-full relative z-[5]"
 				>
-					<div className="flex flex-col">
+					<div className="flex flex-col overflow-auto">
 						<FormField
 							control={form.control}
 							name="traefikConfig"

diff --git a/components/dashboard/file-system/show-traefik-system.tsx b/components/dashboard/file-system/show-traefik-system.tsx
@@ -14,7 +14,7 @@ export const ShowTraefikSystem = () => {
 
 	return (
 		<div className={cn("mt-6 md:grid gap-4")}>
-			<div className="flex flex-col md:flex-row gap-4 md:gap-10 w-full">
+			<div className="flex flex-col lg:flex-row gap-4 md:gap-10 w-full">
 				{directories?.length === 0 && (
 					<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
 						<span className="text-muted-foreground text-lg font-medium">
@@ -27,7 +27,7 @@ export const ShowTraefikSystem = () => {
 					<>
 						<Tree
 							data={directories}
-							className="md:max-w-[19rem] w-full md:h-[660px] border rounded-lg"
+							className="lg:max-w-[19rem] w-full lg:h-[660px] border rounded-lg"
 							onSelectChange={(item) => setFile(item?.id || null)}
 							folderIcon={Folder}
 							itemIcon={Workflow}

diff --git a/components/dashboard/settings/web-server/show-main-traefik-config.tsx b/components/dashboard/settings/web-server/show-main-traefik-config.tsx
@@ -23,7 +23,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import CodeEditor from "@/components/shared/code-editor";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
 
 const UpdateMainTraefikConfigSchema = z.object({

diff --git a/components/dashboard/settings/web-server/show-server-middleware-config.tsx b/components/dashboard/settings/web-server/show-server-middleware-config.tsx
@@ -23,7 +23,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import CodeEditor from "@/components/shared/code-editor";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
 
 const UpdateServerMiddlewareConfigSchema = z.object({
@@ -98,7 +98,7 @@ export const ShowServerMiddlewareConfig = ({ children }: Props) => {
 					<form
 						id="hook-form-update-server-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4 relative"
+						className="grid w-full py-4 relative overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField

diff --git a/components/dashboard/settings/web-server/show-server-traefik-config.tsx b/components/dashboard/settings/web-server/show-server-traefik-config.tsx
@@ -23,7 +23,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import CodeEditor from "@/components/shared/code-editor";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
 
 const UpdateServerTraefikConfigSchema = z.object({
@@ -98,7 +98,7 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 					<form
 						id="hook-form-update-server-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4 relative"
+						className="grid w-full py-4 relative overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField

diff --git a/components/shared/code-editor.tsx b/components/shared/code-editor.tsx
@@ -7,28 +7,39 @@ import { useTheme } from "next-themes";
 
 interface Props extends ReactCodeMirrorProps {
 	wrapperClassName?: string;
-  disabled?: boolean
+	disabled?: boolean;
 }
 
-function CodeEditor({ className, wrapperClassName, ...props }: Props) {
+export const CodeEditor = ({
+	className,
+	wrapperClassName,
+	...props
+}: Props) => {
 	const { resolvedTheme } = useTheme();
 
 	return (
-		<div className={wrapperClassName}>
+		<div className={cn("relative overflow-auto", wrapperClassName)}>
 			<CodeMirror
 				basicSetup={{
-					lineNumbers: false,
-					foldGutter: false,
-          highlightActiveLine: !props.disabled
+					lineNumbers: true,
+					foldGutter: true,
+					highlightSelectionMatches: true,
+					highlightActiveLine: !props.disabled,
+					allowMultipleSelections: true,
 				}}
 				theme={resolvedTheme === "dark" ? githubDark : githubLight}
 				extensions={[yaml(), json()]}
 				{...props}
-        editable={!props.disabled}
-				className={cn("w-full h-full text-sm leading-relaxed", `cm-theme-${resolvedTheme}`, className)}
+				editable={!props.disabled}
+				className={cn(
+					"w-full h-full text-sm leading-relaxed",
+					`cm-theme-${resolvedTheme}`,
+					className,
+				)}
 			/>
+			{props.disabled && (
+				<div className="absolute top-0 left-0 w-full h-full  flex items-center justify-center z-[10] [background:var(--overlay)]" />
+			)}
 		</div>
 	);
-}
-
-export default CodeEditor;
+};
diff --git a/styles/globals.css b/styles/globals.css
@@ -33,6 +33,7 @@
     --ring: 240 10% 3.9%;
 
     --radius: 0.5rem;
+    --overlay: rgba(0, 0, 0, 0.2);
   }
 
   .dark {
@@ -63,6 +64,8 @@
     --border: 240 3.7% 15.9%;
     --input: 240 4% 10%;
     --ring: 240 4.9% 83.9%;
+
+    --overlay:  rgba(0, 0, 0, 0.5);
   }
 }
 
@@ -86,13 +89,7 @@
 .xterm .xterm-screen {
   overflow: hidden;
 }
-/* .no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-.no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none; */
-/* } */
+
 @layer utilities {
   /* Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {
@@ -110,23 +107,10 @@
   font-weight: 500;
   letter-spacing: 0px !important;
 }
-.xterm-rows {
-  /* padding-left: 1rem;
-  padding-right: 1rem; */
-  /* padding-top: 1rem;
-  padding-bottom: 1rem; */
-}
-
-/* .xterm-cursor {
-  background-color: transparent !important;
-  border-color: transparent !important;
-  outline: none !important;
-  outline-offset: 0px !important;
-} */
 
 /* Codemirror */
 .cm-editor {
-  @apply w-full h-full rounded-md p-1 border border-solid border-border outline-none;
+  @apply w-full h-full rounded-md overflow-hidden border border-solid border-border outline-none;
 }
 
 .cm-editor .cm-scroller {
@@ -142,3 +126,18 @@
 .cm-editor .cm-activeLine:has(.cm-placeholder) {
   background-color: transparent;
 }
+
+
+.disabled-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5); /* Fondo opaco */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+