feat: add option closing-bracket-newline for html

This option allow you put closing bracket to seperate line
beautifier · Sep 28, 2024 · 54f20bd · 54f20bd
1 parent b91d6b8
commit 54f20bd
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -391,6 +391,7 @@ HTML Beautifier Options:
   --unformatted_content_delimiter    Keep text content together between this string [""]
   --indent-empty-lines               Keep indentation on empty lines
   --templating                       List of templating languages (auto,none,django,erb,handlebars,php,smarty,angular) ["auto"] auto = none in JavaScript, all in html
+  --closing-bracket-newline          Add a newline before tag closing brackets
 ```
 
 ## Directives

diff --git a/js/src/cli.js b/js/src/cli.js
@@ -136,7 +136,8 @@ var path = require('path'),
         "quiet": Boolean,
         "type": ["js", "css", "html"],
         "config": path,
-        "editorconfig": Boolean
+        "editorconfig": Boolean,
+        "closing_bracket_newline": Boolean
     },
     // dasherizeShorthands provides { "indent-size": ["--indent_size"] }
     // translation, allowing more convenient dashes in CLI arguments
@@ -411,6 +412,7 @@ function usage(err) {
             msg.push('  -T, --content_unformatted         List of tags (defaults to pre) whose content should not be reformatted');
             msg.push('  -E, --extra_liners                List of tags (defaults to [head,body,/html] that should have an extra newline');
             msg.push('  --unformatted_content_delimiter   Keep text content together between this string [""]');
+            msg.push('  --closing-bracket-newline          Add a newline before tag closing brackets');
             break;
         case "css":
             msg.push('  -b, --brace-style                       [collapse|expand] ["collapse"]');

diff --git a/js/src/html/beautifier.js b/js/src/html/beautifier.js
@@ -376,7 +376,10 @@ Beautifier.prototype._handle_tag_close = function(printer, raw_token, last_tag_t
   } else {
     if (last_tag_token.tag_start_char === '<') {
       printer.set_space_before_token(raw_token.text[0] === '/', true); // space before />, no space before >
-      if (this._is_wrap_attributes_force_expand_multiline && last_tag_token.has_wrapped_attrs) {
+      // Add newline before tag closing bracket:
+      // 1. add newline only if 'force-expand-multipand' or 'closing-bracket-newline' is specified
+      // 2. add newline only if tag has wrapped_attrs
+      if ((this._is_wrap_attributes_force_expand_multiline || this._options.closing_bracket_newline) && last_tag_token.has_wrapped_attrs) {
         printer.print_newline(false);
       }
     }

diff --git a/js/src/html/options.js b/js/src/html/options.js
@@ -84,7 +84,7 @@ function Options(options) {
   ]);
   this.unformatted_content_delimiter = this._get_characters('unformatted_content_delimiter');
   this.indent_scripts = this._get_selection('indent_scripts', ['normal', 'keep', 'separate']);
-
+  this.closing_bracket_newline = this._get_boolean('closing_bracket_newline');
 }
 Options.prototype = new BaseOptions();
 

diff --git a/test/data/html/tests.js b/test/data/html/tests.js
@@ -4401,6 +4401,50 @@ exports.test_data = {
         '</style>'
       ]
     }]
+  }, {
+    name: "Add newline before tag closing bracket when tag has wrapped attributes",
+    description: "Add newline before tag closing bracket when tag has wrapped attributes",
+    template: "^^^ $$$",
+    matrix: [{
+      options: [
+        { name: "wrap_attributes", value: "'auto'" },
+        { name: "closing_bracket_newline", value: "true" }
+      ],
+      closing_bracket_newline: ''
+    }, {
+      options: [
+        { name: "wrap_attributes", value: "'preserve'" },
+        { name: "closing_bracket_newline", value: "true" }
+      ],
+      fill_indent: '   ', // fill missing indent space
+      closing_bracket_newline: '\n'
+    }, {
+      options: [
+        { name: "closing_bracket_newline", value: "false" }
+      ],
+      closing_bracket_newline: ''
+    }],
+    tests: [{
+      fragment: true,
+      unchanged: [
+        '<div style="display: block;" width="100" height="200">',
+        '    <p>test content</p>',
+        '</div>'
+      ]
+    }, {
+      fragment: true,
+      input: [
+        '<div',
+        '    style="display: block;" width="100" height="200">',
+        '    <p>test content</p>',
+        '</div>'
+      ],
+      output: [
+        '<div^^^closing_bracket_newline$$$^^^fill_indent$$$ style="display: block;" width="100" height="200"^^^closing_bracket_newline$$$>',
+        '    <p>test content</p>',
+        '</div>'
+      ]
+    }]
   }, {
     name: "New Test Suite"
   }]