feat: format editor content on blur (#197)

Author: marcosvega91

src/components/Editor.js

@@ -11,6 +11,7 @@ import { queries } from '@testing-library/dom';
 
 import CodeMirror from 'codemirror';
 import debounce from 'lodash/debounce';
+import beautifier from '../lib/beautify';
 
 const baseOptions = {
   autoCloseBrackets: true,
@@ -200,6 +201,17 @@ function Editor({ onLoad, onChange, mode, initialValue }) {
       }
     });
 
+    editor.current.on('blur', () => {
+      let formattedText = editor.current.getValue();
+      if (mode === 'htmlmixed') {
+        formattedText = beautifier.beautifyHtml(editor.current.getValue());
+      } else if (mode === 'javascript') {
+        formattedText = beautifier.beautifyJs(editor.current.getValue());
+      }
+      editor.current.setValue(formattedText);
+      onChange(formattedText);
+    });
+
     onLoad(editor.current);
   }, [editor.current, onChange]);
 

src/lib/beautify.js

@@ -0,0 +1,20 @@
+import beautify from 'js-beautify';
+
+const beautifyOptions = {
+  indent_size: 2,
+  wrap_line_length: 72,
+  wrap_attributes: 'force-expand-multiline',
+};
+
+function beautifyHtml(html) {
+  return beautify.html(html, beautifyOptions);
+}
+
+function beautifyJs(js) {
+  return beautify.js(js, beautifyOptions);
+}
+
+export default {
+  beautifyHtml,
+  beautifyJs,
+};

src/lib/state.js

@@ -4,7 +4,7 @@ import {
 } from 'lz-string';
 import queryString from 'query-string';
 
-import beautify from 'js-beautify';
+import beautifier from '../lib/beautify';
 
 function unindent(string) {
   return (string || '').replace(/[ \t]*[\n][ \t]*/g, '\n');
@@ -21,13 +21,11 @@ export function compress({ markup, query }) {
 
 export function decompress({ markup, query }) {
   const result = {
-    markup: beautify.html(
+    markup: beautifier.beautifyHtml(
       decompressFromEncodedURIComponent(markup || ''),
-      beautifyOptions,
     ),
-    query: beautify.js(
+    query: beautifier.beautifyJs(
       decompressFromEncodedURIComponent(query || ''),
-      beautifyOptions,
     ),
   };
 
@@ -46,12 +44,6 @@ function save({ markup, query }) {
   history.replaceState(null, '', window.location.pathname + '?' + search);
 }
 
-const beautifyOptions = {
-  indent_size: 2,
-  wrap_line_length: 72,
-  wrap_attributes: 'force-expand-multiline',
-};
-
 function load() {
   const { hash, search } = window.location;