feat: format editor content on paste (#199)

Author: smeijer

src/components/Editor.js

@@ -11,7 +11,7 @@ import { queries } from '@testing-library/dom';
 
 import CodeMirror from 'codemirror';
 import debounce from 'lodash/debounce';
-import beautifier from '../lib/beautify';
+import beautify from '../lib/beautify';
 
 const baseOptions = {
   autoCloseBrackets: true,
@@ -201,17 +201,22 @@ 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());
+    const format = () => {
+      const value = editor.current.getValue();
+      const formatted = beautify.format(mode, value);
+      editor.current.setValue(formatted);
+    };
+
+    editor.current.on('change', (_, change) => {
+      if (change.origin !== 'paste') {
+        return;
       }
-      editor.current.setValue(formattedText);
-      onChange(formattedText);
+
+      format();
     });
 
+    editor.current.on('blur', format);
+
     onLoad(editor.current);
   }, [editor.current, onChange]);
 

src/lib/beautify.js

@@ -6,15 +6,28 @@ const beautifyOptions = {
   wrap_attributes: 'force-expand-multiline',
 };
 
-function beautifyHtml(html) {
+function html(html) {
   return beautify.html(html, beautifyOptions);
 }
 
-function beautifyJs(js) {
+function js(js) {
   return beautify.js(js, beautifyOptions);
 }
 
+function format(mode, content) {
+  if (mode === 'htmlmixed' || mode === 'html') {
+    return html(content);
+  }
+
+  if (mode === 'javascript') {
+    return js(content);
+  }
+
+  return content;
+}
+
 export default {
-  beautifyHtml,
-  beautifyJs,
+  html,
+  js,
+  format,
 };

src/lib/state.js

@@ -4,7 +4,7 @@ import {
 } from 'lz-string';
 import queryString from 'query-string';
 
-import beautifier from '../lib/beautify';
+import beautify from '../lib/beautify';
 
 function unindent(string) {
   return (string || '').replace(/[ \t]*[\n][ \t]*/g, '\n');
@@ -21,12 +21,8 @@ export function compress({ markup, query }) {
 
 export function decompress({ markup, query }) {
   const result = {
-    markup: beautifier.beautifyHtml(
-      decompressFromEncodedURIComponent(markup || ''),
-    ),
-    query: beautifier.beautifyJs(
-      decompressFromEncodedURIComponent(query || ''),
-    ),
+    markup: beautify.html(decompressFromEncodedURIComponent(markup || '')),
+    query: beautify.js(decompressFromEncodedURIComponent(query || '')),
   };
 
   return result;