add: template editor

src/components/Markdowns/MarkdownView.js

@@ -8,18 +8,68 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
 import "katex/dist/katex.min.css";
 import "./MarkdownView.css";
-import {useLinks} from "../../utils/markdown-queries";
+import {useLinks} from "../../utils/queries/markdown-queries";
 
-const MarkdownView = ({ content, height="auto" }) => {
+const Translate = ({variable, value}) => {
+    if (variable.type.base_type === "markdown" || variable.type.base_type === "string" || variable.type.base_type === "enum") {
+        return value;
+    }
+    if(variable.type.base_type === "list"){
+        if (!variable.type.extend_type)
+            return [];
+
+        return value.map((item, index) => Translate({
+            variable: {name: index, type: variable.type.extend_type},
+            value: item,
+        })).map((item) => variable.type.definition.iter_layout.replaceAll('<item/>', item));
+    }
+    if(variable.type.base_type === "template"){
+        return ParseTemplate({
+            template: variable.type.definition.template,
+            variables: value
+        });
+    }
+};
+
+
+const ParseTemplate = ({template, variables}) => {
+    let res = template.layout;
+    for (const parameter of template.parameters) {
+        res = res.replaceAll(`<${parameter.name}/>`, Translate({
+            variable: parameter,
+            value: variables[parameter.name]
+        }));
+    }
+    return res;
+};
+
+
+const MarkdownView = ({ content, template, height="auto" }) => {
     const {data: links, isLoading} = useLinks();
 
     if (isLoading)
-        return <p>Loading...</p>
-    const definitions = "\n<!-- Definitions -->\n" + links.join("\n");
+        return (<p>Loading...</p>);
+    const linkDefinitions = "\n<!-- Definitions -->\n" + links.join("\n");
+    const _template = template || {
+        parameters: [
+            {
+                name: "markdown",
+                type: {
+                    base_type: "markdown",
+                    definition: {}
+                }
+            }
+        ],
+        layout: "<markdown/>",
+        title: "default"
+    };
     return (
         <div className="markdown-preview" style={{height}}>
             <ReactMarkdown
-                children={content + "\n" + definitions}
+                children={ParseTemplate({
+                    template: _template,
+                    variables: content
+                }) + "\n" + linkDefinitions}
                 remarkPlugins={[remarkMath, remarkGfm]}
                 rehypePlugins={[rehypeKatex, rehypeRaw]}
                 components={{