From 19ee5f073b92be45a16ca9916584c534c6d71cd7 Mon Sep 17 00:00:00 2001
From: Tuluobo <tuluobo@vip.qq.com>
Date: Tue, 13 Aug 2024 20:51:50 +0800
Subject: [PATCH] feat: add line wrapping for traefik config editor

---
 .../application/advanced/traefik/show-traefik-config.tsx       | 1 +
 .../application/advanced/traefik/update-traefik-config.tsx     | 1 +
 .../components/dashboard/file-system/show-traefik-file.tsx     | 1 +
 .../dashboard/settings/web-server/show-main-traefik-config.tsx | 1 +
 .../settings/web-server/show-server-traefik-config.tsx         | 1 +
 apps/dokploy/components/shared/code-editor.tsx                 | 3 +++
 apps/dokploy/package.json                                      | 1 +
 pnpm-lock.yaml                                                 | 3 +++
 8 files changed, 12 insertions(+)

diff --git a/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx b/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
index 28d44264..bf5fd4f6 100644
--- a/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx
@@ -46,6 +46,7 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
 					<div className="flex flex-col pt-2 relative">
 						<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
 							<CodeEditor
+								lineWrapping
 								value={data || "Empty"}
 								disabled
 								className="font-mono"
diff --git a/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx b/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
index a185082b..2c2437a1 100644
--- a/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
+++ b/apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
@@ -144,6 +144,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
 											<CodeEditor
+												lineWrapping
 												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:
diff --git a/apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx b/apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx
index 34d94e62..d2dc1d78 100644
--- a/apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx
+++ b/apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx
@@ -104,6 +104,7 @@ export const ShowTraefikFile = ({ path }: Props) => {
 									</FormDescription>
 									<FormControl>
 										<CodeEditor
+											lineWrapping
 											wrapperClassName="h-[35rem] font-mono"
 											placeholder={`http:
 routers:
diff --git a/apps/dokploy/components/dashboard/settings/web-server/show-main-traefik-config.tsx b/apps/dokploy/components/dashboard/settings/web-server/show-main-traefik-config.tsx
index e6e4866e..becda3ad 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/show-main-traefik-config.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/show-main-traefik-config.tsx
@@ -106,6 +106,7 @@ export const ShowMainTraefikConfig = ({ children }: Props) => {
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
 											<CodeEditor
+												lineWrapping
 												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`providers:
     docker:
diff --git a/apps/dokploy/components/dashboard/settings/web-server/show-server-traefik-config.tsx b/apps/dokploy/components/dashboard/settings/web-server/show-server-traefik-config.tsx
index 9f102a54..ea160869 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/show-server-traefik-config.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/show-server-traefik-config.tsx
@@ -109,6 +109,7 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
 											<CodeEditor
+												lineWrapping
 												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:
diff --git a/apps/dokploy/components/shared/code-editor.tsx b/apps/dokploy/components/shared/code-editor.tsx
index b20ef60a..c071f542 100644
--- a/apps/dokploy/components/shared/code-editor.tsx
+++ b/apps/dokploy/components/shared/code-editor.tsx
@@ -3,6 +3,7 @@ import { json } from "@codemirror/lang-json";
 import { yaml } from "@codemirror/lang-yaml";
 import { StreamLanguage } from "@codemirror/language";
 import { properties } from "@codemirror/legacy-modes/mode/properties";
+import { EditorView } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import { useTheme } from "next-themes";
@@ -10,6 +11,7 @@ interface Props extends ReactCodeMirrorProps {
 	wrapperClassName?: string;
 	disabled?: boolean;
 	language?: "yaml" | "json" | "properties";
+	lineWrapping?: boolean;
 }
 
 export const CodeEditor = ({
@@ -36,6 +38,7 @@ export const CodeEditor = ({
 						: language === "json"
 							? json()
 							: StreamLanguage.define(properties),
+					props.lineWrapping ? EditorView.lineWrapping : [],
 				]}
 				{...props}
 				editable={!props.disabled}
diff --git a/apps/dokploy/package.json b/apps/dokploy/package.json
index 2fadd0a4..8354fa7a 100644
--- a/apps/dokploy/package.json
+++ b/apps/dokploy/package.json
@@ -39,6 +39,7 @@
 		"@codemirror/lang-yaml": "^6.1.1",
 		"@codemirror/language": "^6.10.1",
 		"@codemirror/legacy-modes": "6.4.0",
+		"@codemirror/view": "6.29.0",
 		"@dokploy/trpc-openapi": "0.0.4",
 		"@faker-js/faker": "^8.4.1",
 		"@hookform/resolvers": "^3.3.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 09c5d103..452a10ca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -114,6 +114,9 @@ importers:
       '@codemirror/legacy-modes':
         specifier: 6.4.0
         version: 6.4.0
+      '@codemirror/view':
+        specifier: 6.29.0
+        version: 6.29.0
       '@dokploy/trpc-openapi':
         specifier: 0.0.4
         version: 0.0.4(@trpc/server@10.45.2)(zod@3.23.8)