ui(editor): fix editor child styling

resources/scripts/components/admin/nests/ImportEggButton.tsx

@@ -48,7 +48,7 @@ export default ({ className }: { className?: string }) => {
                 <h2 css={tw`mb-6 text-2xl text-neutral-100`}>Import Egg</h2>
 
                 <Editor
-                    className="h-64 overflow-hidden rounded"
+                    childClassName={tw`h-64 rounded`}
                     initialContent={''}
                     fetchContent={value => {
                         fetchFileContent = value;

resources/scripts/components/admin/nests/NestsContainer.tsx

@@ -33,7 +33,7 @@ const RowCheckbox = ({ id }: { id: number }) => {
         <AdminCheckbox
             name={id.toString()}
             checked={isChecked}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 if (e.currentTarget.checked) {
                     appendSelectedNest(id);
                 } else {

resources/scripts/components/admin/nests/eggs/EggExportButton.tsx

@@ -49,7 +49,7 @@ export default ({ className }: { className?: string }) => {
                 <FlashMessageRender byKey={'egg:export'} css={tw`mb-6`} />
 
                 <Editor
-                    className="h-[32rem] overflow-scroll rounded"
+                    childClassName={tw`h-[32rem] rounded`}
                     initialContent={content ?? ''}
                     language={LanguageDescription.of({ name: 'json', support: json() })}
                 />

resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx

@@ -64,7 +64,8 @@ export default function EggInstallContainer() {
 
                         <Form>
                             <Editor
-                                className="mb-4 h-96 overflow-scroll"
+                                className="mb-4"
+                                childClassName={tw`h-96`}
                                 initialContent={egg.scriptInstall || ''}
                                 fetchContent={value => {
                                     fetchFileContent = value;

resources/scripts/components/admin/nests/eggs/EggRouter.tsx

@@ -19,7 +19,7 @@ const EggRouter = () => {
     const { data: egg, error, isValidating, mutate } = useEggFromRoute();
 
     useEffect(() => {
-        mutate();
+        void mutate();
     }, []);
 
     useEffect(() => {

resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx

@@ -135,7 +135,7 @@ export const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(fun
             <div css={tw`mb-5`}>
                 <Label>Startup Configuration</Label>
                 <Editor
-                    className="h-32 overflow-scroll rounded"
+                    childClassName={tw`h-32 rounded`}
                     initialContent={values.configStartup}
                     fetchContent={value => {
                         fetchStartupConfiguration = value;
@@ -147,7 +147,7 @@ export const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(fun
             <div css={tw`mb-1`}>
                 <Label>Configuration Files</Label>
                 <Editor
-                    className="h-48 overflow-scroll rounded"
+                    childClassName={tw`h-48 rounded`}
                     initialContent={values.configFiles}
                     fetchContent={value => {
                         fetchFilesConfiguration = value;
@@ -185,13 +185,23 @@ export default function EggSettingsContainer() {
     const submit = async (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('egg');
 
-        values.configStartup = (await ref.current?.getStartupConfiguration()) || '';
-        values.configFiles = (await ref.current?.getFilesConfiguration()) || '';
+        values.configStartup = (await ref.current?.getStartupConfiguration()) ?? '';
+        values.configFiles = (await ref.current?.getFilesConfiguration()) ?? '';
+
+        const dockerImages: Record<string, string> = {};
+        for (const v of values.dockerImages.split('\n')) {
+            const parts = v.trim().split('|');
+            const image = parts[0] ?? '';
+            const alias = parts[1] ?? image;
+
+            dockerImages[alias] = image;
+        }
+
+        console.log(dockerImages);
 
         updateEgg(egg.id, {
             ...values,
-            // TODO
-            dockerImages: {},
+            dockerImages,
         })
             .catch(error => {
                 console.error(error);
@@ -207,8 +217,11 @@ export default function EggSettingsContainer() {
                 name: egg.name,
                 description: egg.description || '',
                 startup: egg.startup,
-                // TODO
-                dockerImages: egg.dockerImages.toString(),
+                dockerImages: Object.keys(egg.dockerImages)
+                    .map(key => {
+                        return `${egg.dockerImages[key]}|${key}`;
+                    })
+                    .join('\n'),
                 configStop: egg.configStop || '',
                 configStartup: JSON.stringify(egg.configStartup, null, '\t') || '',
                 configFiles: JSON.stringify(egg.configFiles, null, '\t') || '',

resources/scripts/components/elements/editor/Editor.tsx

@@ -30,6 +30,8 @@ import {
 } from '@codemirror/view';
 import type { CSSProperties } from 'react';
 import { useEffect, useRef, useState } from 'react';
+import type { TwStyle } from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 
 import { ayuMirageHighlightStyle, ayuMirageTheme } from './theme';
 
@@ -78,10 +80,24 @@ const defaultExtensions: Extension = [
     indentUnit.of('\t'),
 ];
 
+const EditorContainer = styled.div<{ overrides?: TwStyle }>`
+    //min-height: 12rem;
+    ${tw`relative`};
+
+    & > div {
+        ${props => props.overrides};
+
+        &.cm-focused {
+            outline: none;
+        }
+    }
+`;
+
 export interface EditorProps {
     // DOM
     className?: string;
     style?: CSSProperties;
+    childClassName?: TwStyle;
 
     // CodeMirror Config
     extensions?: Extension[];
@@ -211,5 +227,7 @@ export function Editor(props: EditorProps) {
         props.fetchContent(async () => view.state.doc.toJSON().join('\n'));
     }, [view, props.fetchContent, props.onContentSaved]);
 
-    return <div ref={ref} className={`relative ${props.className ?? ''}`.trimEnd()} style={props.style} />;
+    return (
+        <EditorContainer ref={ref} className={props.className} style={props.style} overrides={props.childClassName} />
+    );
 }

resources/scripts/components/server/files/FileEditContainer.tsx

@@ -130,6 +130,8 @@ export default () => {
             <div css={tw`relative`}>
                 <SpinnerOverlay visible={loading} />
                 <Editor
+                    style={{ height: 'calc(100vh - 20rem)' }}
+                    childClassName={tw`rounded-md h-full`}
                     filename={filename}
                     initialContent={content}
                     language={language}