feat(docz-theme-default): add auto close tags on playground editor

packages/docz-theme-default/src/components/ui/Editor/index.tsx

@@ -19,6 +19,8 @@ import 'codemirror/mode/javascript/javascript'
 import 'codemirror/mode/jsx/jsx'
 import 'codemirror/mode/css/css'
 import 'codemirror/addon/edit/matchbrackets'
+import 'codemirror/addon/edit/closetag'
+import 'codemirror/addon/fold/xml-fold'
 
 const getLanguage = (children: any) => {
   const defaultLanguage = 'jsx'
@@ -157,6 +159,7 @@ export const Editor: SFC<PreProps> = ({
     mode: language || mode,
     lineNumbers: true,
     lineWrapping: true,
+    autoCloseTags: true,
     theme: 'docz-light',
   }
 
@@ -169,7 +172,6 @@ export const Editor: SFC<PreProps> = ({
               <EditorStyled
                 value={value}
                 className={editorClassName}
-                onViewportChange={() => console.log('helo')}
                 editorDidMount={(editor: any) => {
                   if (editor && !withLastLine && props.readOnly) {
                     const lastLine = editor.lastLine()

packages/docz-theme-default/src/types.d.ts

@@ -5,6 +5,8 @@ declare module 'codemirror/mode/javascript/javascript'
 declare module 'codemirror/mode/jsx/jsx'
 declare module 'codemirror/mode/css/css'
 declare module 'codemirror/addon/edit/matchbrackets'
+declare module 'codemirror/addon/edit/closetag'
+declare module 'codemirror/addon/fold/xml-fold'
 declare module 'react-codemirror2'
 declare module 'react-feather/dist/icons/edit-2'
 declare module 'react-feather/dist/icons/chevron-down'

packages/docz-theme-default/webpack.config.js

@@ -16,6 +16,8 @@ const externalList = [
   'codemirror/mode/jsx/jsx',
   'codemirror/mode/css/css',
   'codemirror/addon/edit/matchbrackets',
+  'codemirror/addon/edit/closetag',
+  'codemirror/addon/fold/xml-fold',
   'polished/lib/color/rgba',
   'polished/lib/color/lighten',
   'polished/lib/color/darken',