Advanced edit doesn't show JSON strings correctly in TablesDB UI (upd - any strings with commas)

[algusarov]

👟 Reproduction steps

After migrating self-hosted from 1.7.* to 1.8.0 and so new UI for TablesDB in the Console, I see a bug for when a column contains a JSON string.

UPD: confirmed that the bug is also present in current Cloud version (and no need to have complicated JSON like below - just create new string array, then input "hello" as first item and "world1, world2" as 2nd item of the array - after reopening advanced edit from spreadsheet view, there will be 3 array items in the UI).

I have a table with a Array of String type:

Each string represent a JSON which nests an array of objects, see an example of one value from the field (one item of the Array):

{"items":[{"type":"image", "bucketId":"media_prod", "fileId":"694a5f8b658134a2ddcb", "thumbId":"ebd27ce5-066a-4860-a191-71dcf7556bf4"}]}, {"items":[{"type":"image", "bucketId":"media_prod", "fileId":"694abae824651d505806", "thumbId":"afdd2fad-8f76-4f1d-b8d1-ddb3cef72ea8"}, {"type":"image", "bucketId":"media_prod", "fileId":"694abae8246866fb58cc", "thumbId":"0889a3b5-ba33-4cfc-bf1c-dd82c8d51fe2"}, {"type":"image", "bucketId":"media_prod", "fileId":"694abae8246a8681cb07", "thumbId":"256a0550-3c8d-4a4d-8c06-cd77bda46ff4"}, {"type":"image", "bucketId":"media_prod", "fileId":"694abae8246b5ed7c869", "thumbId":"fbfa2a25-aa1f-4adb-bdd6-5bbd88d6940c"}, {"type":"image", "bucketId":"media_prod", "fileId":"694abae8246c14d27146", "thumbId":"b48b64f3-c7f2-4aa1-816d-6746d02f7d28"}]}, {"items":[{"type":"image", "bucketId":"media_prod", "fileId":"694ad94728cef2cf10ce", "thumbId":"67fa0a29-ba1e-4046-9baf-33fd9f542cea"}]}

(I do this to keep links of media files in Storage and their relationship with database entries)

Now, when I use console's advanced edit functionality, by clicking Advanced edit here:

It looks like it tries to parse the JSON string stored in the field to the effect below:

Before introducing new Console with TablesUI, the values have been displayed normally (as a full JSON string per item of an array).

👍 Expected behavior

It should show items of the array (as Column is of array type), each showing full JSON string stored in the DB.

👎 Actual Behavior

It splits the JSON strings and displays it as separate fields, which doesn't allow to edit the values or to copy the full value from the Console.

🎲 Appwrite version

Version 1.8.x

💻 Operating system

Linux

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

[algusarov]

After looking around in the repo, and then working together with my BFF Claude for a bit on it, please see below the analysis and I tried a PR, hopefully this works or helps to prepare a definitive fix.

#2741

Root Cause Analysis

Summary

The bug is caused by comma-based serialization logic in string.svelte that corrupts array data containing strings with internal commas (JSON, CSV, plain text, etc.).

Affected Files

• src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/string.svelte (lines 79-96)
• src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/columnItem.svelte (lines 93-103)
• src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/cell/edit.svelte (line 69)

The Corruption Flow

1. User clicks a cell in the spreadsheet view to edit an array column

2. cell/edit.svelte renders ColumnItem with fromSpreadsheet prop

3. columnItem.svelte (line 94) passes array prop to Column with the entire array as value

4. string.svelte receives array = true and the full array value

5. Effect 1 (lines 79-80) joins the array with commas:

   stringValue = value.map(String).join(', ');
   // Input:  ['{"a":1,"b":2}', '{"c":3}']
   // Output: '{"a":1,"b":2}, {"c":3}'

6. Effect 2 (lines 90-91) splits by ALL commas:

   const newArray = stringValue.split(',').map((item) => parseValue(item))...
   // Input:  '{"a":1,"b":2}, {"c":3}'
   // Output: ['{"a":1', '"b":2}', ' {"c":3}']  // CORRUPTED!

7. The corrupted array is bound back through value and propagates to the parent component

8. When opening the advanced edit panel, it correctly displays each corrupted fragment as a separate array item

Key Insight

The bug is that simply opening a spreadsheet cell for editing corrupts the in-memory data, even without explicitly saving. The two-way binding propagates the corrupted value back up the component tree.

Visual Example

Original data (3 array items):

[
  "{\"items\":[{\"type\":\"image\",\"bucketId\":\"media_prod\",\"fileId\":\"694a5f8b658134a2ddcb\"}]}",
  "{\"items\":[{\"type\":\"image\",\"bucketId\":\"media_prod\",\"fileId\":\"694abae824651d505806\"}]}",
  "{\"items\":[{\"type\":\"image\",\"bucketId\":\"media_prod\",\"fileId\":\"694ad94728cef2cf10ce\"}]}"
]

After corruption (many fragments):

[
  "{\"items\":[{\"type\":\"image\"",
  "\"bucketId\":\"media_prod\"",
  "\"fileId\":\"694a5f8b658134a2ddcb\"}]}",
  " {\"items\":[{\"type\":\"image\"",
  "\"bucketId\":\"media_prod\"",
  // ... etc
]

---

Proposed Solution

Replace the comma-based serialization with JSON serialization in string.svelte:

// Effect 1: Array -> String (for display)
$effect(() => {
    if (isSpatialType(column) && Array.isArray(value)) {
        stringValue = JSON.stringify(value);
    } else if (array && Array.isArray(value)) {
        stringValue = JSON.stringify(value, null, 2);  // Pretty-printed JSON
    } else if (value !== null && value !== undefined) {
        stringValue = String(value);
    } else {
        stringValue = '';
    }
});

// Effect 2: String -> Array (for saving)
$effect(() => {
    if (array) {
        try {
            const parsed = JSON.parse(stringValue);
            if (Array.isArray(parsed) && JSON.stringify(parsed) !== JSON.stringify(value)) {
                value = parsed;
            }
        } catch {
            // Invalid JSON - don't update value, let user fix the syntax
        }
    } else {
        // ... existing non-array logic unchanged
    }
});

Why JSON Serialization is Universal

Content Type	Comma-Split Result	JSON.stringify/parse Result
JSON strings	Corrupted	Preserved
XML strings	Corrupted if contains commas	Preserved
CSV data	Corrupted	Preserved
Plain text with commas	Corrupted	Preserved
Any Unicode content	Potentially corrupted	Preserved

JSON serialization properly escapes all special characters, making it safe for any string content.

UX Change

• Before: value1, value2, value3 (ambiguous comma-separated)
• After: ["value1", "value2", "value3"] (explicit JSON array format)

This is actually more intuitive for developers working with array fields, as it shows the actual data structure and eliminates ambiguity about what constitutes a separator vs. content.

Additional Changes

Update the placeholder text (lines 128-130) to reflect the new format:

case 'string':
default:
    return 'Enter JSON array, e.g. ["item1", "item2"]';