'A-Child'✔ added xml autocomplete

Author: archiesbhoir

src/components/XML.js

@@ -8,6 +8,11 @@ import 'codemirror/addon/edit/matchtags'
 import 'codemirror/addon/edit/matchbrackets'
 import 'codemirror/addon/edit/closebrackets'
 import 'codemirror/theme/dracula.css'
+
+import 'codemirror/addon/hint/xml-hint'
+import 'codemirror/addon/hint/show-hint'
+import 'codemirror/addon/hint/show-hint.css'
+
 import Hello from './Hello'
 
 
@@ -16,10 +21,54 @@ export default class XML extends Component {
         super(props);
         this.state = {
           name: 'CodeMirror',
-          code: '🌹💕🐱‍🚀 <MODE>: </XML>',
+          code: '🌹💕🐱‍🚀 <MODE>: </XML> \n<USE Ctrl+Space>',
           viewOpToggle : false,
         };
     }
+    autoComplete = cm => {
+        const codeMirror = this.refs['CodeMirror'].getCodeMirrorInstance();
+        const tags = {
+            '!top': ['add','hello'],
+            '!attrs': {},
+            'add': {
+              attrs: {
+                'id': null
+              },
+              children: ['Student', 'hello']
+            },
+            'hello': {
+              attrs: {
+                'id': null
+              },
+              children: ['A-Child']
+            },
+            'Student': {
+              attrs: {
+                name: null
+              },
+              children: ['A-Child']
+            },
+            'A-Child': {
+              attrs: {
+                roll_no: null
+              },
+              children: ['marks']
+            },
+            'marks': {
+              children: [],
+            },
+          };
+          
+        const hintOptions = {
+          schemaInfo: tags,
+          completeSingle: false,
+          completeOnSingleClick: true,
+          matchInMiddle: true
+        };
+        codeMirror.showHint(cm, codeMirror.hint.auto, hintOptions); 
+      };
+
+      
 
     updateCode = (newCode) => {
 		this.setState({
@@ -37,16 +86,19 @@ export default class XML extends Component {
     render() {
         const options = {
             lineNumbers: true,
+            tabSize: 2,
             matchBrackets: true,
             mode: 'xml',
             theme: 'dracula',
             autoCloseTags: true,
             matchTags: true,
-            autoCloseBrackets: true
+            extraKeys: { "Ctrl-Space": this.autoComplete},
+            autoCloseBrackets: true,
         };
         return (
             <div>
                 <CodeMirror
+                ref="CodeMirror"           
                   value={this.state.code}
                   options={options}
                   onChange={this.updateCode}