clean up attributes

callmephilip · Sep 7, 2024 · 599612d · 599612d
1 parent 86d7b7b
commit 599612d
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,4 +12,8 @@ All notable changes to the "html2ft" extension will be documented in this file.
 
 ## 0.3.0
 
-Support extension settings
+Support extension settings
+
+## 0.4.0
+
+New converter
diff --git a/README.md b/README.md
@@ -31,3 +31,7 @@ Run conversion locally
 ### 0.3.0
 
 Support extension settings
+
+### 0.4.0
+
+New converter
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "html2ft",
   "displayName": "html2ft",
   "description": "Convert HTML to FastHTML FT",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "publisher": "PhilipNuzhnyi",
   "repository": "https://github.com/callmephilip/html2ft",
   "license": "MIT",

diff --git a/src/converter.ts b/src/converter.ts
@@ -60,20 +60,24 @@ export function html2ft(html: string, attr1st: boolean = false): string {
 
     for (const key of elmAttrs) {
       const value = el.getAttribute(key);
+
       if (typeof value === "undefined") {
         continue;
       }
 
       const mappedKey = revMap[key] || key;
       const formattedKey = mappedKey.replace(/-/g, "_");
 
+      // clean up value by removing extra spaces and newlines
+      const cleanedValue = value.trim().replace(/\s+/g, " ");
+
       if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(formattedKey)) {
         attrs.push(
-          `${formattedKey}=${JSON.stringify(value).replaceAll('"', "'")}`
+          `${formattedKey}=${JSON.stringify(cleanedValue).replaceAll('"', "'")}`
         );
       } else {
         attrs.push(
-          `**{${JSON.stringify(key)}: ${JSON.stringify(value).replaceAll(
+          `**{${JSON.stringify(key)}: ${JSON.stringify(cleanedValue).replaceAll(
             '"',
             "'"
           )}}`

diff --git a/tests/converter.test.ts b/tests/converter.test.ts
@@ -131,6 +131,43 @@ const testCases = [
 Body(
     H1("This is a Heading"),
     P("This is a paragraph.")
+)`,
+  },
+  {
+    description: "multiline class attribute",
+    input: `<div class="fixed top-0 left-0 h-full w-64 
+                bg-white shadow-lg overflow-y-auto
+                transform -translate-x-full 
+                transition-transform duration-300
+                ease-in-out z-50">
+        <div class="p-6">
+            <div class="text-center mb-4">
+                <img src=
+"https://media.geeksforgeeks.org/wp-content/uploads/20240429130139/employee.png"
+                     alt="Profile Picture" 
+                     class="rounded-full 
+                            mx-auto mb-2">
+                <h3 class="text-lg font-semibold">
+                    Sahil Trivedi
+                </h3>
+                <p class="text-gray-600">
+                    Web Developer
+                </p>
+            </div>
+        </div>
+</div>`,
+    attr1st: false,
+    expected: `Div(
+    Div(
+        Div(
+            Img(src='https://media.geeksforgeeks.org/wp-content/uploads/20240429130139/employee.png', alt='Profile Picture', cls='rounded-full mx-auto mb-2'),
+            H3("Sahil Trivedi", cls='text-lg font-semibold'),
+            P("Web Developer", cls='text-gray-600'),
+            cls='text-center mb-4'
+        ),
+        cls='p-6'
+    ),
+    cls='fixed top-0 left-0 h-full w-64 bg-white shadow-lg overflow-y-auto transform -translate-x-full transition-transform duration-300 ease-in-out z-50'
 )`,
   },
 ];