+md

package-lock.json

@@ -7609,6 +7609,10 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "mdast": {
+      "version": "git+ssh://git@gitlab.a-level.com.ua:gitgod/mdast.git#bb0380a9055d889f5b185f804e8f8469d9cdf995",
+      "from": "git+ssh://git@gitlab.a-level.com.ua:gitgod/mdast.git"
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "graphql-request": "^1.8.2",
+    "mdast": "git+ssh://git@gitlab.a-level.com.ua:gitgod/mdast.git",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-dropzone": "^11.0.1",

src/App.js

@@ -4,6 +4,7 @@ import './App.css';
 import Select from 'react-select/async'
 import {sortableContainer, sortableElement} from 'react-sortable-hoc';
 import Dropzone from 'react-dropzone'
+import {buildAST, toReact} from 'mdast';
 
 import { GraphQLClient } from 'graphql-request';
 
@@ -427,7 +428,14 @@ const defaultAdminOptions =
             fields:{
                 createdAt: ({children}) => <input value={new Date(+children).toISOString()} />,
                 url: ({children}) => <a href={children}>{children}</a>,
-                color:({children, ...props}) => <input type='color' value={children} {...props}/>
+                color:({children, ...props}) => <input type='color' value={children} {...props}/>,
+                md:({children, field, ...props}) => 
+                    <div style={{display: 'flex'}}>
+                        <textarea style={{maxWidth: '50%', height: '400px'}} placeholder={field.name} value={children} {...props}/>
+                        <div style={{maxWidth: '50%', height: '400px', overflow: 'auto'}}>
+                            {toReact(buildAST(children), React)}
+                        </div>
+                    </div>
             },
             
             models: {