feat: add manual template editor with view/edit modes

src/componets/content/Content.tsx

@@ -4,9 +4,10 @@ import Highlight from 'react-highlight'
 import 'highlight.js/styles/far.css'
 import { Builder } from "../../builders";
 import { Config } from "../../models/Config";
+import { ConfigTemplate } from "./ConfigTemplate";
 
 
-export function Content(props: { config: Config, env: Env }) {
+export function Content(props: { config: Config, env: Env, onTemplateSaved: (newContent: string) => void }) {
     const [selectTab, setTab] = useState(ContentType.Env);
 
     return (
@@ -14,7 +15,7 @@ export function Content(props: { config: Config, env: Env }) {
             <ContentTabs onSelected={(id) => setTab(id)} />
             <div className="">
                 {selectTab == ContentType.Env ? (<ContentParams env={props.env} />) : ""}
-                {selectTab == ContentType.Json ? (<ContentTemplate env={props.env} config={props.config} />) : ""}
+                {selectTab == ContentType.Json ? (<ConfigTemplate config={props.config} onSaved={props.onTemplateSaved} />) : ""}
                 {selectTab == ContentType.Raw ? (<ContentRaw config={props.config} env={props.env} />) : ""}
                 {selectTab == ContentType.Test ? (<ContentTest config={props.config} env={props.env} />) : ""}
             </div>
@@ -139,18 +140,6 @@ function fillTemplate(config: Config, env: Env): string {
     return filledTemplate;
 }
 
-function ContentTemplate(props: { config: Config, env: Env }) {
-    
-    let text = props.config.getTemplateAsJson() ?? "{//no content. at all. tottaly empty!!!\n}";
-    return (
-        <>
-            <Highlight className="language-json" >
-                {text ?? ""}
-            </Highlight>
-        </>
-    )
-}
-
 function ContentParams(props: { env: Env }) {
     const bldr = Builder.getEnv(props.env);