Add html beautify

Author: hcodes

dist/html-beautify.1.15.4.js

@@ -44,6 +44,9 @@
     "cssnano": "^7.1.1",
     "diff": "^5.2.0",
     "eslint": "^9.37.0",
+    "eyo-kernel": "^3.0.2",
+    "globals": "^16.4.0",
+    "js-beautify": "^1.15.4",
     "lyam": "^3.2.1",
     "postcss": "^8.5.6",
     "postcss-import": "^16.1.1",
@@ -52,19 +55,19 @@
     "rollup": "^4.52.4",
     "rollup-plugin-css-only": "^4.5.5",
     "rollup-plugin-postcss": "^4.0.2",
+    "terser": "^5.44.0",
     "throttle-debounce": "^5.0.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "typograf": "^7.5.0",
     "typescript-eslint": "^8.45.0",
-    "globals": "^16.4.0",
-    "eyo-kernel": "^3.0.2"
+    "typograf": "^7.5.0"
   },
   "scripts": {
     "copy:dict": "cp ./node_modules/eyo-kernel/dictionary/safe.txt ./dist/eyo.txt",
+    "copy:html-beautify": "terser ./node_modules/js-beautify/js/lib/beautify-html.js > ./dist/html-beautify.1.15.4.js",
     "test": "npm run eslint && npm run typecheck",
     "eslint": "eslint .",
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "build": "npm run copy:dict && rollup -c && node tools/index.mjs"
+    "build": "npm run copy:dict && npm run copy:html-beautify && rollup -c && node tools/index.mjs"
   }
 }

index.html

@@ -14,13 +14,20 @@ import { CopyIcon } from '../copyIcon/copyIcon';
 import { SaveFileIcon } from '../saveFileIcon/saveFileIcon';
 import { ShareIcon } from '../shareIcon/shareIcon';
 import { isJSON, typografyJSON } from '../../helpers/json';
+import { isHTML } from '../../helpers/string';
 
 import '../container/container';
 import '../table/table';
 import '../footer/footer';
 
 import './app.css';
 
+declare global {
+    interface Window {
+        html_beautify: (text: string) => string;
+    }
+}
+
 export class App {
     private lastText: { value: string, result: string; } = { value: '', result: ''};
     private isMobile = document.body.classList.contains('page_mobile');
@@ -137,7 +144,13 @@ export class App {
                 return this.typograf.execute(text, this.getTypografSettings())
             });
         } else {
-            return this.typograf.execute(value, this.getTypografSettings())
+            let result = this.typograf.execute(value, this.getTypografSettings());
+
+            if (isHTML(result) && window.html_beautify) {
+                result = window.html_beautify(result);
+            }
+
+            return result;
         }
     }
 

mobile.html

@@ -131,6 +131,7 @@ <h1 class="header__title"><span data-text-id="typograf">Типограф</span><
             </div>
         </div>
     </footer>
+<script src="/dist/html-beautify.1.15.4.js" async></script>
 <script>
 {{TYPOGRAF_SCRIPT}}
 </script>

package-lock.json

@@ -85,6 +85,7 @@ <h1 class="header__title"><span data-text-id="typograf">Типограф</span><
             </div>
         </div>
     </footer>
+<script src="/dist/html-beautify.1.15.4.js" async></script>
 <script>
 {{TYPOGRAF_SCRIPT}}
 </script>

package.json

@@ -0,0 +1,15 @@
+import { setI18nLang, addI18nKeysets, i18nUpdatePage, I18NLanguage } from './i18n';
+import { keysets } from './keysets';
+import { config } from '../components/app/config';
+import { addTypografKeysets } from './typograf';
+import { addTypografRules } from '../rules';
+
+export function initI18n() {
+    setI18nLang(config.language as I18NLanguage);
+
+    addI18nKeysets(keysets);
+    addTypografKeysets();
+    addTypografRules();
+
+    i18nUpdatePage();
+}

src/components/app/app.ts

@@ -1,20 +1,11 @@
 import { startMetrika } from './services/metrika';
-import { setI18nLang, addI18nKeysets, i18nUpdatePage, I18NLanguage } from './i18n/i18n';
-import { keysets } from './i18n/keysets';
 import { withInstallApp } from './helpers/withInstallApp';
 import { App } from './components/app/app';
-import { config } from './components/app/config';
-import { addTypografKeysets } from './i18n/typograf';
-import { addTypografRules } from './rules';
+import { initI18n } from './i18n/init';
 
 startMetrika();
 
-setI18nLang(config.language as I18NLanguage);
-addI18nKeysets(keysets);
-addTypografKeysets();
-addTypografRules();
-
-i18nUpdatePage();
+initI18n();
 
 withInstallApp();