body-prettier

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "publy-panel",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "publy-panel",
-      "version": "0.7.8",
+      "version": "0.7.9",
       "dependencies": {
         "@solidjs/router": "^0.15.3"
       },
@@ -18,10 +18,12 @@
         "@graphql-codegen/typescript-operations": "^4.6.1",
         "@graphql-codegen/typescript-resolvers": "^4.5.1",
         "@types/node": "^24.1.0",
+        "@types/prettier": "^2.7.3",
         "@types/prismjs": "^1.26.5",
         "graphql": "^16.11.0",
         "graphql-tag": "^2.12.6",
         "lightningcss": "^1.30.1",
+        "prettier": "^3.6.2",
         "prismjs": "^1.30.0",
         "solid-js": "^1.9.7",
         "terser": "^5.43.0",
@@ -2415,6 +2417,13 @@
         "undici-types": "~7.8.0"
       }
     },
+    "node_modules/@types/prettier": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
+      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/prismjs": {
       "version": "1.26.5",
       "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
@@ -5035,6 +5044,22 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.30.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",

package.json

@@ -19,10 +19,12 @@
     "@graphql-codegen/typescript-operations": "^4.6.1",
     "@graphql-codegen/typescript-resolvers": "^4.5.1",
     "@types/node": "^24.1.0",
+    "@types/prettier": "^2.7.3",
     "@types/prismjs": "^1.26.5",
     "graphql": "^16.11.0",
     "graphql-tag": "^2.12.6",
     "lightningcss": "^1.30.1",
+    "prettier": "^3.6.2",
     "prismjs": "^1.30.0",
     "solid-js": "^1.9.7",
     "terser": "^5.43.0",

panel/routes/shouts.tsx

@@ -429,7 +429,6 @@ const ShoutsRoute = (props: ShoutsRouteProps) => {
       >
         <div style="padding: 1rem;">
           <HTMLEditor value={selectedMediaBody()} onInput={(value) => setSelectedMediaBody(value)} />
-          gjl
         </div>
       </Modal>
     </div>

panel/ui/HTMLEditor.tsx

@@ -127,8 +127,11 @@ const HTMLEditor = (props: HTMLEditorProps) => {
     }
 
     if (value.trim()) {
+      // Форматируем HTML перед экранированием
+      const formattedValue = formatHTML(value)
+
       // Экранируем HTML для безопасности
-      const escapedValue = value
+      const escapedValue = formattedValue
         .replace(/&/g, '&')
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;')
@@ -329,6 +332,24 @@ const HTMLEditor = (props: HTMLEditorProps) => {
     }, 10)
   }
 
+  const formatHTML = (html: string): string => {
+    try {
+      // Простое форматирование с отступами
+      const lines = html.split(/\n/)
+      const formattedLines = lines.map((line, index) => {
+        const trimmedLine = line.trim()
+        if (trimmedLine.startsWith('<') && !trimmedLine.startsWith('</')) {
+          return '  '.repeat(index > 0 ? 1 : 0) + trimmedLine
+        }
+        return trimmedLine
+      })
+      return formattedLines.join('\n')
+    } catch (error) {
+      console.warn('HTML formatting error:', error)
+      return html
+    }
+  }
+
   return (
     <div
       ref={editorElement}