From 6f5bdf5f0de6a77e31344f3b4fbcfb087b310257 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 21 Aug 2025 23:45:46 +0700
Subject: [PATCH] Fix PHP serialization and add Long Text type to Visual Editor

- Fixed PHP serialization byte length calculation for escaped strings
- Added Long Text type with textarea for multiline strings in StructuredEditor
- Auto-detects strings with newlines and displays them as textarea
- Improvements apply to both SerializeTool and JsonTool visual editors
- Resolves parse errors with quoted strings and multiline content
---
 src/components/StructuredEditor.js | 40 +++++++++++++++++++++---------
 src/pages/SerializeTool.js         |  6 ++++-
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/components/StructuredEditor.js b/src/components/StructuredEditor.js
index 20b1f1cb..ca81eee8 100644
--- a/src/components/StructuredEditor.js
+++ b/src/components/StructuredEditor.js
@@ -144,6 +144,7 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
     // Try to preserve value when changing types if possible
     switch (newType) {
       case 'string':
+      case 'longtext':
         current[key] = currentValue === null ? '' : currentValue.toString();
         break;
       case 'number':
@@ -314,17 +315,31 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
                   </span>
                 </div>
               ) : (
-                <input
-                  type="text"
-                  value={
-                    value === null ? 'null' : 
-                    value === undefined ? '' : 
-                    value.toString()
-                  }
-                  onChange={(e) => updateValue(e.target.value, path)}
-                  className="flex-1 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 min-w-0"
-                  placeholder="Value"
-                />
+                typeof value === 'string' && value.includes('\n') ? (
+                  <textarea
+                    value={
+                      value === null ? 'null' : 
+                      value === undefined ? '' : 
+                      value.toString()
+                    }
+                    onChange={(e) => updateValue(e.target.value, path)}
+                    className="flex-1 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 min-w-0 resize-y"
+                    placeholder="Long text value"
+                    rows={3}
+                  />
+                ) : (
+                  <input
+                    type="text"
+                    value={
+                      value === null ? 'null' : 
+                      value === undefined ? '' : 
+                      value.toString()
+                    }
+                    onChange={(e) => updateValue(e.target.value, path)}
+                    className="flex-1 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 min-w-0"
+                    placeholder="Value"
+                  />
+                )
               )
             ) : (
               <span className="flex-1 text-sm text-gray-600 dark:text-gray-400">
@@ -337,7 +352,7 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
                 value={
                   value === null ? 'null' :
                   value === undefined ? 'string' :
-                  typeof value === 'string' ? 'string' :
+                  typeof value === 'string' ? (value.includes('\n') ? 'longtext' : 'string') :
                   typeof value === 'number' ? 'number' :
                   typeof value === 'boolean' ? 'boolean' :
                   Array.isArray(value) ? 'array' : 'object'
@@ -346,6 +361,7 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
                 className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 min-w-0"
               >
                 <option value="string">String</option>
+                <option value="longtext">Long Text</option>
                 <option value="number">Number</option>
                 <option value="boolean">Boolean</option>
                 <option value="array">Array</option>
diff --git a/src/pages/SerializeTool.js b/src/pages/SerializeTool.js
index 2d34d38b..fe770a4e 100644
--- a/src/pages/SerializeTool.js
+++ b/src/pages/SerializeTool.js
@@ -21,7 +21,11 @@ const SerializeTool = () => {
       return Number.isInteger(data) ? `i:${data};` : `d:${data};`;
     }
     if (typeof data === 'string') {
-      return `s:${data.length}:"${data}";`;
+      // Escape quotes and backslashes in the string first
+      const escapedData = data.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+      // PHP serialize requires UTF-8 byte length of the ESCAPED string
+      const byteLength = new TextEncoder().encode(escapedData).length;
+      return `s:${byteLength}:"${escapedData}";`;
     }
     if (Array.isArray(data)) {
       let result = `a:${data.length}:{`;