Playground: Add option for Formatter maxLineLength (#1101)

<img width="1692" height="816" alt="CleanShot 2026-01-23 at 15 59 00@2x"
src="https://github.com/user-attachments/assets/f04765e4-f35a-4d59-9505-e845356998c8"
/>

Author: marcoroth

playground/index.html

@@ -419,6 +419,19 @@
                     <span class="text-sm text-gray-300 mr-2">Document Status:</span>
                     <span data-playground-target="formatVerification" class="px-2 py-1 text-xs rounded font-medium"></span>
                   </div>
+                  <div class="flex items-center gap-2">
+                    <label class="flex items-center gap-2 text-gray-300 text-sm">
+                      <span class="select-none">Max line length:</span>
+                      <input
+                        type="number"
+                        min="1"
+                        value="80"
+                        data-playground-target="formatterMaxLineLength"
+                        data-action="change->playground#onFormatterOptionChange"
+                        class="w-16 px-2 py-1 text-sm rounded border-gray-600 bg-gray-700 text-gray-200 focus:ring-green-500 focus:border-green-500"
+                      />
+                    </label>
+                  </div>
                 </div>
 
                 <div class="w-full h-full overflow-auto">

playground/src/analyze.ts

@@ -5,6 +5,7 @@ import { Linter } from "@herb-tools/linter"
 import { IdentityPrinter } from "@herb-tools/printer"
 
 import type { LintResult } from "@herb-tools/linter"
+import type { FormatOptions } from "@herb-tools/formatter"
 
 async function safeExecute<T>(promise: Promise<T>): Promise<T> {
   try {
@@ -15,7 +16,7 @@ async function safeExecute<T>(promise: Promise<T>): Promise<T> {
   }
 }
 
-export async function analyze(herb: HerbBackend, source: string, options: ParserOptions = {}, printerOptions: { ignoreErrors?: boolean } = {}) {
+export async function analyze(herb: HerbBackend, source: string, options: ParserOptions = {}, printerOptions: { ignoreErrors?: boolean } = {}, formatterOptions: FormatOptions = {}) {
   const startTime = performance.now()
 
   const parseResult = await safeExecute<ParseResult>(
@@ -53,7 +54,7 @@ export async function analyze(herb: HerbBackend, source: string, options: Parser
   )
 
   const formatted = await safeExecute<string>(
-    new Promise((resolve) => resolve((new Formatter(herb, {})).format(source))),
+    new Promise((resolve) => resolve((new Formatter(herb, formatterOptions)).format(source))),
   )
 
   const printed = await safeExecute<string>(

playground/src/controllers/playground_controller.js

@@ -69,6 +69,7 @@ export default class extends Controller {
     "printerVerification",
     "printerIgnoreErrors",
     "printerDiff",
+    "formatterMaxLineLength",
     "printerDiffContent",
     "printerLegend",
     "shareButton",
@@ -114,6 +115,7 @@ export default class extends Controller {
     this.restoreActiveTab()
     this.restoreParserOptions()
     this.restorePrinterOptions()
+    this.restoreFormatterOptions()
     this.inputTarget.focus()
     this.load()
 
@@ -220,8 +222,10 @@ export default class extends Controller {
 
     const options = this.getParserOptions()
     const printerOptions = this.getPrinterOptions()
+    const formatterOptions = this.getFormatterOptions()
     this.setOptionsInURL(options)
     this.setPrinterOptionsInURL(printerOptions)
+    this.setFormatterOptionsInURL(formatterOptions)
   }
 
   async insert(event) {
@@ -432,12 +436,26 @@ export default class extends Controller {
     }
   }
 
+  restoreFormatterOptions() {
+    const formatterOptionsFromURL = this.getFormatterOptionsFromURL()
+
+    if (Object.keys(formatterOptionsFromURL).length > 0) {
+      this.setFormatterOptions(formatterOptionsFromURL)
+    }
+  }
+
   setPrinterOptions(printerOptions) {
     if (this.hasPrinterIgnoreErrorsTarget && printerOptions.hasOwnProperty('ignoreErrors')) {
       this.printerIgnoreErrorsTarget.checked = Boolean(printerOptions.ignoreErrors)
     }
   }
 
+  setFormatterOptions(formatterOptions) {
+    if (this.hasFormatterMaxLineLengthTarget && formatterOptions.hasOwnProperty('maxLineLength')) {
+      this.formatterMaxLineLengthTarget.value = formatterOptions.maxLineLength
+    }
+  }
+
   isValidTab(tab) {
     const validTabs = ['parse', 'lex', 'ruby', 'html', 'format', 'printer', 'diagnostics', 'full']
     return validTabs.includes(tab)
@@ -603,7 +621,8 @@ export default class extends Controller {
 
     try {
       const value = this.editor ? this.editor.getValue() : this.inputTarget.value
-      const result = await analyze(Herb, value)
+      const formatterOptions = this.getFormatterOptions()
+      const result = await analyze(Herb, value, {}, {}, formatterOptions)
 
       if (result.formatted) {
         if (this.editor) {
@@ -684,7 +703,8 @@ export default class extends Controller {
     const value = this.editor ? this.editor.getValue() : this.inputTarget.value
     const options = this.getParserOptions()
     const printerOptions = this.getPrinterOptions()
-    const result = await analyze(Herb, value, options, printerOptions)
+    const formatterOptions = this.getFormatterOptions()
+    const result = await analyze(Herb, value, options, printerOptions, formatterOptions)
 
     this.updatePosition(1, 0, value.length)
 
@@ -1021,6 +1041,11 @@ export default class extends Controller {
     this.analyze()
   }
 
+  onFormatterOptionChange(event) {
+    this.updateURL()
+    this.analyze()
+  }
+
   getPrinterOptions() {
     const options = {}
     if (this.hasPrinterIgnoreErrorsTarget) {
@@ -1029,6 +1054,20 @@ export default class extends Controller {
     return options
   }
 
+  getFormatterOptions() {
+    const options = {}
+
+    if (this.hasFormatterMaxLineLengthTarget) {
+      const value = parseInt(this.formatterMaxLineLengthTarget.value, 10)
+
+      if (!isNaN(value) && value > 0) {
+        options.maxLineLength = value
+      }
+    }
+
+    return options
+  }
+
   getOptionsFromURL() {
     const urlParams = new URLSearchParams(window.parent.location.search)
     const optionsString = urlParams.get('options')
@@ -1099,6 +1138,41 @@ export default class extends Controller {
     return {}
   }
 
+  setFormatterOptionsInURL(formatterOptions) {
+    const url = new URL(window.parent.location)
+
+    const nonDefaultFormatterOptions = {}
+
+    Object.keys(formatterOptions).forEach(key => {
+      if (key === 'maxLineLength' && formatterOptions[key] !== 80) {
+        nonDefaultFormatterOptions[key] = formatterOptions[key]
+      }
+    })
+
+    if (Object.keys(nonDefaultFormatterOptions).length > 0) {
+      url.searchParams.set('formatterOptions', JSON.stringify(nonDefaultFormatterOptions))
+    } else {
+      url.searchParams.delete('formatterOptions')
+    }
+
+    window.parent.history.replaceState({}, '', url)
+  }
+
+  getFormatterOptionsFromURL() {
+    const urlParams = new URLSearchParams(window.parent.location.search)
+    const formatterOptionsString = urlParams.get('formatterOptions')
+
+    if (formatterOptionsString) {
+      try {
+        return JSON.parse(decodeURIComponent(formatterOptionsString))
+      } catch (e) {
+        console.warn('Failed to parse formatter options from URL:', e)
+      }
+    }
+
+    return {}
+  }
+
   restoreDiagnosticsFilter() {
     const urlParams = new URLSearchParams(window.parent.location.search)
     const filterParam = urlParams.get('diagnosticsFilter')