mirror of
https://github.com/Dokploy/templates
synced 2025-06-26 18:16:07 +00:00
feat: Integrate CodeMirror for enhanced code viewing with syntax highlighting
This commit is contained in:
Mauricio Siu
@@ -12,6 +12,7 @@ import { Button } from './ui/button';
|
||||
import { toast } from 'sonner';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import { ModeToggle } from '../mode-toggle';
|
||||
import { CodeEditor } from './ui/code-editor';
|
||||
interface Template {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -223,7 +224,7 @@ const TemplateGrid: React.FC = () => {
|
||||
<div>
|
||||
<DialogTitle className="text-2xl">{selectedTemplate?.name}</DialogTitle>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-sm text-gray-500">v{selectedTemplate?.version}</span>
|
||||
<span className="text-sm text-gray-500">{selectedTemplate?.version}</span>
|
||||
<div className="flex gap-2">
|
||||
{selectedTemplate?.links.github && (
|
||||
<a
|
||||
@@ -245,6 +246,15 @@ const TemplateGrid: React.FC = () => {
|
||||
Docs
|
||||
</a>
|
||||
)}
|
||||
|
||||
<a
|
||||
href={`https://github.com/Dokploy/templates/tree/main/blueprints/${selectedTemplate?.id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
Edit Template
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -277,9 +287,11 @@ const TemplateGrid: React.FC = () => {
|
||||
Docker Compose
|
||||
<span className="text-xs font-normal text-gray-500">docker-compose.yml</span>
|
||||
</h3>
|
||||
<pre className="bg-card border border-border p-6 rounded-lg overflow-x-auto text-sm">
|
||||
<code className="font-mono">{templateFiles.dockerCompose}</code>
|
||||
</pre>
|
||||
<CodeEditor
|
||||
value={templateFiles.dockerCompose || ''}
|
||||
language="yaml"
|
||||
className='font-mono'
|
||||
/>
|
||||
<Button
|
||||
onClick={() => {
|
||||
toast.success('Copied to clipboard')
|
||||
@@ -297,9 +309,11 @@ const TemplateGrid: React.FC = () => {
|
||||
Configuration
|
||||
<span className="text-xs font-normal text-gray-500">template.yml</span>
|
||||
</h3>
|
||||
<pre className="bg-card border border-border p-6 rounded-lg overflow-x-auto text-sm">
|
||||
<code className="font-mono">{templateFiles.config}</code>
|
||||
</pre>
|
||||
<CodeEditor
|
||||
value={templateFiles.config || ''}
|
||||
language="yaml"
|
||||
className='font-mono'
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
@@ -319,10 +333,10 @@ const TemplateGrid: React.FC = () => {
|
||||
<span className="text-xs font-normal text-gray-500">Encoded template files</span>
|
||||
</h3>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
readOnly
|
||||
className="w-full h-32 p-4 bg-card border border-border rounded-lg font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
<CodeEditor
|
||||
value={getBase64Config()}
|
||||
language="properties"
|
||||
className='font-mono'
|
||||
/>
|
||||
<Button
|
||||
onClick={() => {
|
||||
|
||||
176
app/src/components/ui/code-editor.tsx
Normal file
176
app/src/components/ui/code-editor.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
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 { shell } from "@codemirror/legacy-modes/mode/shell";
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
|
||||
import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
|
||||
import {
|
||||
autocompletion,
|
||||
type CompletionContext,
|
||||
type CompletionResult,
|
||||
type Completion,
|
||||
} from "@codemirror/autocomplete";
|
||||
import { useTheme } from "@/theme-provider";
|
||||
// Docker Compose completion options
|
||||
const dockerComposeServices = [
|
||||
{ label: "services", type: "keyword", info: "Define services" },
|
||||
{ label: "version", type: "keyword", info: "Specify compose file version" },
|
||||
{ label: "volumes", type: "keyword", info: "Define volumes" },
|
||||
{ label: "networks", type: "keyword", info: "Define networks" },
|
||||
{ label: "configs", type: "keyword", info: "Define configuration files" },
|
||||
{ label: "secrets", type: "keyword", info: "Define secrets" },
|
||||
].map((opt) => ({
|
||||
...opt,
|
||||
apply: (view: EditorView, completion: Completion) => {
|
||||
const insert = `${completion.label}:`;
|
||||
view.dispatch({
|
||||
changes: {
|
||||
from: view.state.selection.main.from,
|
||||
to: view.state.selection.main.to,
|
||||
insert,
|
||||
},
|
||||
selection: { anchor: view.state.selection.main.from + insert.length },
|
||||
});
|
||||
},
|
||||
}));
|
||||
|
||||
const dockerComposeServiceOptions = [
|
||||
{
|
||||
label: "image",
|
||||
type: "keyword",
|
||||
info: "Specify the image to start the container from",
|
||||
},
|
||||
{ label: "build", type: "keyword", info: "Build configuration" },
|
||||
{ label: "command", type: "keyword", info: "Override the default command" },
|
||||
{ label: "container_name", type: "keyword", info: "Custom container name" },
|
||||
{
|
||||
label: "depends_on",
|
||||
type: "keyword",
|
||||
info: "Express dependency between services",
|
||||
},
|
||||
{ label: "environment", type: "keyword", info: "Add environment variables" },
|
||||
{
|
||||
label: "env_file",
|
||||
type: "keyword",
|
||||
info: "Add environment variables from a file",
|
||||
},
|
||||
{
|
||||
label: "expose",
|
||||
type: "keyword",
|
||||
info: "Expose ports without publishing them",
|
||||
},
|
||||
{ label: "ports", type: "keyword", info: "Expose ports" },
|
||||
{
|
||||
label: "volumes",
|
||||
type: "keyword",
|
||||
info: "Mount host paths or named volumes",
|
||||
},
|
||||
{ label: "restart", type: "keyword", info: "Restart policy" },
|
||||
{ label: "networks", type: "keyword", info: "Networks to join" },
|
||||
].map((opt) => ({
|
||||
...opt,
|
||||
apply: (view: EditorView, completion: Completion) => {
|
||||
const insert = `${completion.label}: `;
|
||||
view.dispatch({
|
||||
changes: {
|
||||
from: view.state.selection.main.from,
|
||||
to: view.state.selection.main.to,
|
||||
insert,
|
||||
},
|
||||
selection: { anchor: view.state.selection.main.from + insert.length },
|
||||
});
|
||||
},
|
||||
}));
|
||||
|
||||
function dockerComposeComplete(
|
||||
context: CompletionContext,
|
||||
): CompletionResult | null {
|
||||
const word = context.matchBefore(/\w*/);
|
||||
if (!word) return null;
|
||||
|
||||
if (!word.text && !context.explicit) return null;
|
||||
|
||||
// Check if we're at the root level
|
||||
const line = context.state.doc.lineAt(context.pos);
|
||||
const indentation = /^\s*/.exec(line.text)?.[0].length || 0;
|
||||
|
||||
if (indentation === 0) {
|
||||
return {
|
||||
from: word.from,
|
||||
options: dockerComposeServices,
|
||||
validFor: /^\w*$/,
|
||||
};
|
||||
}
|
||||
|
||||
// If we're inside a service definition
|
||||
if (indentation === 4) {
|
||||
return {
|
||||
from: word.from,
|
||||
options: dockerComposeServiceOptions,
|
||||
validFor: /^\w*$/,
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
interface Props extends ReactCodeMirrorProps {
|
||||
wrapperClassName?: string;
|
||||
disabled?: boolean;
|
||||
language?: "yaml" | "json" | "properties" | "shell";
|
||||
lineWrapping?: boolean;
|
||||
lineNumbers?: boolean;
|
||||
}
|
||||
|
||||
export const CodeEditor = ({
|
||||
className,
|
||||
wrapperClassName,
|
||||
language = "yaml",
|
||||
lineNumbers = true,
|
||||
...props
|
||||
}: Props) => {
|
||||
const { theme } = useTheme();
|
||||
return (
|
||||
<div className={cn("relative overflow-auto", wrapperClassName)}>
|
||||
<CodeMirror
|
||||
basicSetup={{
|
||||
lineNumbers,
|
||||
foldGutter: true,
|
||||
highlightSelectionMatches: true,
|
||||
highlightActiveLine: !props.disabled,
|
||||
allowMultipleSelections: true,
|
||||
}}
|
||||
theme={theme === "dark" ? githubDark : githubLight}
|
||||
extensions={[
|
||||
language === "yaml"
|
||||
? yaml()
|
||||
: language === "json"
|
||||
? json()
|
||||
: language === "shell"
|
||||
? StreamLanguage.define(shell)
|
||||
: StreamLanguage.define(properties),
|
||||
props.lineWrapping ? EditorView.lineWrapping : [],
|
||||
language === "yaml"
|
||||
? autocompletion({
|
||||
override: [dockerComposeComplete],
|
||||
})
|
||||
: [],
|
||||
]}
|
||||
{...props}
|
||||
editable={!props.disabled}
|
||||
className={cn(
|
||||
"w-full h-full text-sm leading-relaxed",
|
||||
`cm-theme-${theme}`,
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
{props.disabled && (
|
||||
<div className="absolute top-0 rounded-md left-0 w-full h-full flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user