@brainfish-ai/devdoc 0.1.42 → 0.1.44

package/renderer/components/docs-viewer/playground/auth-editor.js

@@ -0,0 +1,418 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ShieldCheck, Key, Lock, User, Hash, WarningCircle } from '@phosphor-icons/react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { usePlaygroundNavigation } from '@/lib/api-docs/playground/navigation-context';
+const AUTH_TYPES = [
+    {
+        value: 'none',
+        label: 'No Auth',
+        icon: ShieldCheck
+    },
+    {
+        value: 'basic',
+        label: 'Basic Auth',
+        icon: User
+    },
+    {
+        value: 'bearer',
+        label: 'Bearer Token',
+        icon: Key
+    },
+    {
+        value: 'api-key',
+        label: 'API Key',
+        icon: Lock
+    }
+];
+export function AuthEditor({ auth, onChange, showError = false }) {
+    const { state: navState } = usePlaygroundNavigation();
+    // Check if auth field should be highlighted (from either prop or context)
+    const isHighlighted = showError || navState.highlightField?.type === 'auth' && navState.showError;
+    const handleTypeChange = (type)=>{
+        switch(type){
+            case 'none':
+                onChange({
+                    authType: 'none',
+                    authActive: true
+                });
+                break;
+            case 'basic':
+                onChange({
+                    authType: 'basic',
+                    authActive: true,
+                    username: '',
+                    password: ''
+                });
+                break;
+            case 'bearer':
+                onChange({
+                    authType: 'bearer',
+                    authActive: true,
+                    token: ''
+                });
+                break;
+            case 'api-key':
+                onChange({
+                    authType: 'api-key',
+                    authActive: true,
+                    addTo: 'HEADERS',
+                    key: 'X-API-Key',
+                    value: ''
+                });
+                break;
+        }
+    };
+    const currentType = AUTH_TYPES.find((t)=>t.value === auth.authType) || AUTH_TYPES[0];
+    const CurrentIcon = currentType.icon;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col h-full",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: cn("flex items-center border-b bg-muted/30 px-4 py-2", isHighlighted ? "border-red-500 bg-red-500/5" : "border-border"),
+                children: [
+                    isHighlighted && /*#__PURE__*/ _jsx(WarningCircle, {
+                        className: "h-4 w-4 text-red-500 animate-pulse mr-2",
+                        weight: "fill"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: cn("text-xs font-medium mr-3", isHighlighted ? "text-red-500" : "text-muted-foreground"),
+                        children: isHighlighted ? "Auth required" : "Type"
+                    }),
+                    /*#__PURE__*/ _jsxs(Select, {
+                        value: auth.authType,
+                        onValueChange: handleTypeChange,
+                        children: [
+                            /*#__PURE__*/ _jsx(SelectTrigger, {
+                                className: "h-8 w-auto min-w-[140px] text-sm border-0 bg-transparent hover:bg-muted/50",
+                                children: /*#__PURE__*/ _jsx(SelectValue, {
+                                    children: /*#__PURE__*/ _jsxs("span", {
+                                        className: "flex items-center gap-2",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(CurrentIcon, {
+                                                className: "h-3.5 w-3.5",
+                                                weight: "bold"
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                children: currentType.label
+                                            })
+                                        ]
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(SelectContent, {
+                                children: AUTH_TYPES.map((type)=>/*#__PURE__*/ _jsx(SelectItem, {
+                                        value: type.value,
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center gap-2",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(type.icon, {
+                                                    className: "h-3.5 w-3.5",
+                                                    weight: "bold"
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    children: type.label
+                                                })
+                                            ]
+                                        })
+                                    }, type.value))
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex-1 overflow-auto",
+                children: [
+                    auth.authType === 'none' && /*#__PURE__*/ _jsx("div", {
+                        className: cn("flex flex-col items-center justify-center py-12 px-6 text-center", isHighlighted && "bg-red-500/5 border-2 border-red-500/30 rounded-lg m-4 animate-pulse"),
+                        children: isHighlighted ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(WarningCircle, {
+                                    className: "h-10 w-10 text-red-500 mb-3",
+                                    weight: "fill"
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: "text-sm font-medium text-red-600 dark:text-red-400 mb-1",
+                                    children: "Authentication Required"
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: "text-xs text-muted-foreground",
+                                    children: "Select an auth type above to configure credentials"
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(ShieldCheck, {
+                                    className: "h-10 w-10 text-muted-foreground/50 mb-3",
+                                    weight: "duotone"
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: "text-sm text-muted-foreground",
+                                    children: "No authentication required"
+                                })
+                            ]
+                        })
+                    }),
+                    auth.authType === 'basic' && /*#__PURE__*/ _jsxs("table", {
+                        className: "w-full text-sm",
+                        children: [
+                            /*#__PURE__*/ _jsx("thead", {
+                                className: "bg-muted/20 text-xs text-muted-foreground",
+                                children: /*#__PURE__*/ _jsxs("tr", {
+                                    children: [
+                                        /*#__PURE__*/ _jsx("th", {
+                                            className: "text-left font-medium px-4 py-2 w-32",
+                                            children: "Field"
+                                        }),
+                                        /*#__PURE__*/ _jsx("th", {
+                                            className: "text-left font-medium px-4 py-2",
+                                            children: "Value"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs("tbody", {
+                                children: [
+                                    /*#__PURE__*/ _jsxs("tr", {
+                                        className: "border-b border-border/50",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("td", {
+                                                className: "px-4 py-1",
+                                                children: /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex items-center gap-2 text-sm font-medium",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(User, {
+                                                            className: "h-3.5 w-3.5 text-muted-foreground"
+                                                        }),
+                                                        "username"
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx("td", {
+                                                className: "px-2 py-1",
+                                                children: /*#__PURE__*/ _jsx(Input, {
+                                                    type: "text",
+                                                    value: auth.username,
+                                                    onChange: (e)=>onChange({
+                                                            ...auth,
+                                                            username: e.target.value
+                                                        }),
+                                                    placeholder: "Enter username...",
+                                                    className: "h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring"
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("tr", {
+                                        className: "border-b border-border/50",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("td", {
+                                                className: "px-4 py-1",
+                                                children: /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex items-center gap-2 text-sm font-medium",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Lock, {
+                                                            className: "h-3.5 w-3.5 text-muted-foreground"
+                                                        }),
+                                                        "password"
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx("td", {
+                                                className: "px-2 py-1",
+                                                children: /*#__PURE__*/ _jsx(Input, {
+                                                    type: "password",
+                                                    value: auth.password,
+                                                    onChange: (e)=>onChange({
+                                                            ...auth,
+                                                            password: e.target.value
+                                                        }),
+                                                    placeholder: "Enter password...",
+                                                    className: "h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring"
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    auth.authType === 'bearer' && /*#__PURE__*/ _jsxs("table", {
+                        className: "w-full text-sm",
+                        children: [
+                            /*#__PURE__*/ _jsx("thead", {
+                                className: "bg-muted/20 text-xs text-muted-foreground",
+                                children: /*#__PURE__*/ _jsxs("tr", {
+                                    children: [
+                                        /*#__PURE__*/ _jsx("th", {
+                                            className: "text-left font-medium px-4 py-2 w-32",
+                                            children: "Field"
+                                        }),
+                                        /*#__PURE__*/ _jsx("th", {
+                                            className: "text-left font-medium px-4 py-2",
+                                            children: "Value"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("tbody", {
+                                children: /*#__PURE__*/ _jsxs("tr", {
+                                    className: "border-b border-border/50",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("td", {
+                                            className: "px-4 py-1 align-top pt-3",
+                                            children: /*#__PURE__*/ _jsxs("div", {
+                                                className: "flex items-center gap-2 text-sm font-medium",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Key, {
+                                                        className: "h-3.5 w-3.5 text-muted-foreground"
+                                                    }),
+                                                    "token"
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx("td", {
+                                            className: "px-2 py-1",
+                                            children: /*#__PURE__*/ _jsx("textarea", {
+                                                value: auth.token,
+                                                onChange: (e)=>onChange({
+                                                        ...auth,
+                                                        token: e.target.value
+                                                    }),
+                                                placeholder: "Paste your bearer token...",
+                                                className: "w-full min-h-[80px] px-3 py-2 rounded-md border border-border/50 bg-transparent font-mono text-sm resize-none focus:outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
+                                            })
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    auth.authType === 'api-key' && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-3 px-4 py-3 border-b border-border/50 bg-muted/10",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-xs text-muted-foreground font-medium",
+                                        children: "Add to"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex p-0.5 bg-muted rounded-sm",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: ()=>onChange({
+                                                        ...auth,
+                                                        addTo: 'HEADERS'
+                                                    }),
+                                                className: cn("px-3 py-1 rounded text-xs font-medium transition-all", auth.addTo === 'HEADERS' ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+                                                children: "Header"
+                                            }),
+                                            /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: ()=>onChange({
+                                                        ...auth,
+                                                        addTo: 'QUERY_PARAMS'
+                                                    }),
+                                                className: cn("px-3 py-1 rounded text-xs font-medium transition-all", auth.addTo === 'QUERY_PARAMS' ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+                                                children: "Query"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("table", {
+                                className: "w-full text-sm",
+                                children: [
+                                    /*#__PURE__*/ _jsx("thead", {
+                                        className: "bg-muted/20 text-xs text-muted-foreground",
+                                        children: /*#__PURE__*/ _jsxs("tr", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    className: "text-left font-medium px-4 py-2 w-32",
+                                                    children: "Field"
+                                                }),
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    className: "text-left font-medium px-4 py-2",
+                                                    children: "Value"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs("tbody", {
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("tr", {
+                                                className: "border-b border-border/50",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "px-4 py-1",
+                                                        children: /*#__PURE__*/ _jsxs("div", {
+                                                            className: "flex items-center gap-2 text-sm font-medium",
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(Hash, {
+                                                                    className: "h-3.5 w-3.5 text-muted-foreground"
+                                                                }),
+                                                                "key"
+                                                            ]
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "px-2 py-1",
+                                                        children: /*#__PURE__*/ _jsx(Input, {
+                                                            type: "text",
+                                                            value: auth.key,
+                                                            onChange: (e)=>onChange({
+                                                                    ...auth,
+                                                                    key: e.target.value
+                                                                }),
+                                                            placeholder: "X-API-Key",
+                                                            className: "h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring font-mono"
+                                                        })
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("tr", {
+                                                className: "border-b border-border/50",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "px-4 py-1",
+                                                        children: /*#__PURE__*/ _jsxs("div", {
+                                                            className: "flex items-center gap-2 text-sm font-medium",
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(Key, {
+                                                                    className: "h-3.5 w-3.5 text-muted-foreground"
+                                                                }),
+                                                                "value"
+                                                            ]
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        className: "px-2 py-1",
+                                                        children: /*#__PURE__*/ _jsx(Input, {
+                                                            type: "password",
+                                                            value: auth.value,
+                                                            onChange: (e)=>onChange({
+                                                                    ...auth,
+                                                                    value: e.target.value
+                                                                }),
+                                                            placeholder: "Enter API key...",
+                                                            className: "h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring font-mono"
+                                                        })
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}

package/renderer/components/docs-viewer/playground/body-editor.js

@@ -0,0 +1,240 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { FileText, WarningCircle } from '@phosphor-icons/react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { KeyValueEditor } from './key-value-editor';
+import { CodeEditor } from './code-editor';
+import { cn } from '@/lib/utils';
+const CONTENT_TYPES = [
+    {
+        label: 'None',
+        value: 'none'
+    },
+    {
+        label: 'JSON',
+        value: 'application/json',
+        language: 'json'
+    },
+    {
+        label: 'XML',
+        value: 'application/xml',
+        language: 'xml'
+    },
+    {
+        label: 'Plain Text',
+        value: 'text/plain',
+        language: 'plaintext'
+    },
+    {
+        label: 'HTML',
+        value: 'text/html',
+        language: 'html'
+    },
+    {
+        label: 'Form URL Encoded',
+        value: 'application/x-www-form-urlencoded'
+    },
+    {
+        label: 'Multipart Form',
+        value: 'multipart/form-data'
+    },
+    {
+        label: 'Binary',
+        value: 'application/octet-stream'
+    }
+];
+export function BodyEditor({ body, contentType, onBodyChange, onContentTypeChange, showError = false }) {
+    const [formData, setFormData] = useState([]);
+    // Parse form data from body when content type changes
+    useEffect(()=>{
+        if (contentType === 'application/x-www-form-urlencoded' || contentType === 'multipart/form-data') {
+            try {
+                if (body) {
+                    const parsed = JSON.parse(body);
+                    if (Array.isArray(parsed)) {
+                        setFormData(parsed.map((item, i)=>({
+                                id: `form_${i}`,
+                                key: item.key || '',
+                                value: item.value || '',
+                                active: true
+                            })));
+                    }
+                }
+            } catch  {
+                setFormData([]);
+            }
+        }
+    }, [
+        contentType,
+        body
+    ]);
+    // Default templates for each content type
+    const DEFAULT_TEMPLATES = {
+        'application/json': '{\n  \n}',
+        'application/xml': '<?xml version="1.0" encoding="UTF-8"?>\n<root>\n  \n</root>',
+        'text/html': '<!DOCTYPE html>\n<html>\n<head>\n  <title></title>\n</head>\n<body>\n  \n</body>\n</html>',
+        'text/plain': ''
+    };
+    // Check if current body is a default template or invalid (should be replaced when switching types)
+    const isDefaultTemplate = (currentBody)=>{
+        if (!currentBody || currentBody.trim() === '' || currentBody.trim() === 'null') return true;
+        return Object.values(DEFAULT_TEMPLATES).some((template)=>currentBody.trim() === template.trim());
+    };
+    // Normalize body value - convert "null" string to empty
+    const normalizedBody = body === 'null' || body === null ? '' : body;
+    const handleContentTypeChange = (value)=>{
+        console.log('[BodyEditor] Content type changed to:', value);
+        const newType = value === 'none' ? null : value;
+        onContentTypeChange(newType);
+        // Set default body content based on type
+        if (newType === null) {
+            onBodyChange(null);
+        } else if (isDefaultTemplate(body)) {
+            // Replace with new template if current body is empty or a default template
+            const template = DEFAULT_TEMPLATES[newType] ?? '';
+            onBodyChange(template);
+        }
+    // If body has custom content, keep it when switching types
+    };
+    const handleFormDataChange = (items)=>{
+        setFormData(items);
+        onBodyChange(JSON.stringify(items.map(({ key, value })=>({
+                key,
+                value
+            }))));
+    };
+    const currentValue = contentType || 'none';
+    const currentTypeInfo = CONTENT_TYPES.find((t)=>t.value === currentValue);
+    const editorLanguage = currentTypeInfo?.language || 'plaintext';
+    // Content type selector header component
+    const ContentTypeHeader = ()=>/*#__PURE__*/ _jsxs("div", {
+            className: cn("flex items-center border-b bg-muted/30 px-4 py-2", showError ? "border-red-500 bg-red-500/5" : "border-border"),
+            children: [
+                showError && /*#__PURE__*/ _jsx(WarningCircle, {
+                    className: "h-4 w-4 text-red-500 animate-pulse mr-2",
+                    weight: "fill"
+                }),
+                /*#__PURE__*/ _jsx("span", {
+                    className: cn("text-xs font-medium mr-3", showError ? "text-red-500" : "text-muted-foreground"),
+                    children: showError ? "Body needs attention" : "Type"
+                }),
+                /*#__PURE__*/ _jsxs(Select, {
+                    value: currentValue,
+                    onValueChange: handleContentTypeChange,
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectTrigger, {
+                            className: "h-8 w-auto min-w-[140px] text-sm border-0 bg-transparent hover:bg-muted/50",
+                            children: /*#__PURE__*/ _jsx(SelectValue, {
+                                placeholder: "Select type"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(SelectContent, {
+                            children: CONTENT_TYPES.map((type)=>/*#__PURE__*/ _jsx(SelectItem, {
+                                    value: type.value,
+                                    children: type.label
+                                }, type.value))
+                        })
+                    ]
+                })
+            ]
+        });
+    // Form data editors (URL encoded, multipart)
+    if (contentType === 'application/x-www-form-urlencoded' || contentType === 'multipart/form-data') {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col h-full",
+            children: [
+                /*#__PURE__*/ _jsx(ContentTypeHeader, {}),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "flex-1 overflow-auto",
+                    children: /*#__PURE__*/ _jsx(KeyValueEditor, {
+                        items: formData,
+                        onChange: handleFormDataChange,
+                        title: contentType === 'multipart/form-data' ? 'Form Data' : 'URL Encoded',
+                        keyLabel: "Field",
+                        valueLabel: "Value",
+                        showDescription: false
+                    })
+                })
+            ]
+        });
+    }
+    // Binary file (placeholder)
+    if (contentType === 'application/octet-stream') {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col h-full",
+            children: [
+                /*#__PURE__*/ _jsx(ContentTypeHeader, {}),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex-1 flex flex-col items-center justify-center p-8 text-center",
+                    children: [
+                        /*#__PURE__*/ _jsx(FileText, {
+                            className: "h-10 w-10 text-muted-foreground/50 mb-3",
+                            weight: "duotone"
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-sm text-muted-foreground",
+                            children: "Binary file upload not supported"
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+    // No body
+    if (contentType === null) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col h-full",
+            children: [
+                /*#__PURE__*/ _jsx(ContentTypeHeader, {}),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex-1 flex flex-col items-center justify-center p-8 text-center",
+                    children: [
+                        /*#__PURE__*/ _jsx(FileText, {
+                            className: "h-10 w-10 text-muted-foreground/50 mb-3",
+                            weight: "duotone"
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-sm text-muted-foreground",
+                            children: "No request body"
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-xs text-muted-foreground/70 mt-1",
+                            children: "Select a type to add body"
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+    // Monaco editor for JSON, XML, Text, HTML
+    const editorValue = normalizedBody || '';
+    // Placeholder text based on content type
+    const placeholderMap = {
+        'application/json': 'Enter JSON body...',
+        'application/xml': 'Enter XML body...',
+        'text/html': 'Enter HTML body...',
+        'text/plain': 'Enter text...'
+    };
+    const placeholder = placeholderMap[contentType || ''] || 'Enter request body...';
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col h-full",
+        children: [
+            /*#__PURE__*/ _jsx(ContentTypeHeader, {}),
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex-1 dark-editor h-full",
+                children: /*#__PURE__*/ _jsx(CodeEditor, {
+                    value: editorValue,
+                    onChange: onBodyChange,
+                    language: editorLanguage,
+                    height: "100%",
+                    theme: "dark",
+                    showLineNumbers: false,
+                    showBorder: false,
+                    rounded: false,
+                    placeholder: placeholder
+                }, `editor-${contentType}`)
+            })
+        ]
+    });
+}