JSON fields cannot be added to Vizy blocks and JSON text cannot be entered into a plain text field in a Vizy block

[rmales]

Describe the bug

It seems like there is no way to add a blob of JSON to field inside a Vizy block. If I try to add a JSON field this throws a JS error Uncaught TypeError: Id.defineSimpleMode is not a function when rendering the Vizy field. If I try to add JSON as text inside a plain text field in a Vizy block this throws a PHP error craft\helpers\StringHelper::shortcodesToEmoji(): Argument #1 ($str) must be of type string, array given when saving/loading the entry.

Steps to reproduce

1. Add a JSON field to Vizy block and try to load the edit entry page
2. Add a plain text field to a Vizy block, enter JSON text into it and try to save the entry

Craft CMS version

5.8.15

Plugin version

3.0.10

Multi-site?

No

Additional context

No response

[engram-design]

Yeah, this'll be very likely due to how Vizy's content is JSON, and it's also trying to handle JSON content for a JSON field. We have handling that needs to decode nested JSON for nested Vizy fields, but we'll need to either introduce some handling for the JSON field, or refactor Vizy's decode/encode handling for JSON.

It's also how we handle some complicated field content, here. So it's basically decoding the JSON in this instance, where it shouldn't be.

As for adding JSON as plain text, that should absolutely be supported. Just if you could clarify - is that in a Plain Text (Craft) field, or just literally as text like you'd add to the WYSIWYG editor? Seems like the former, but just wanted to check.

[rmales]

@engram-design Just a Craft plain text field. Entering JSON text into one works fine normally, but inside a Vizy block, it throws that PHP error.

[rmales]

Can it be as simple as this (seems to work)?

// Normalize nested Vizy field data
if ($field instanceof VizyField) {
    $fieldContent[$field->handle] = Json::encode($field->normalizeValue($fieldValue, $element)->getRawNodes());
} else if (!($field instanceof PlainTextField)) {
    // Otherwise, anything that _looks_ like encoded JSON should be decoded
    // This includes Matrix, Relation fields and Link fields
    if (is_string($fieldValue) && Json::isJsonObject($fieldValue)) {
        $fieldContent[$field->handle] = Json::decode($fieldValue);
    }
}

[engram-design]

So, just looking into this, it's firstly a Codemirror issue due to the JSON field using that library, and Vue also uses it. Vue is basically trying to re-use the already loaded library from the JSON field with Vue, which is pretty incompatible.

Looking into options on this one...