Unexpected end of JSON with html query parameter

Hi, I have some shortcode in the widget I would like to use, however I get „Unexpected end of JSON“ error when trying for HTML output. It seems like the HTML is not escaped and thus some of the parts of it (brackets, double quotes etc) are interpreted as an part of JSON.

My shortcode:

`<?php

function ms_languages( $atts ) { $regions = array( 'europe' => ( 'Europe', 'ms' ), 'asia' => ( 'Asia', 'ms' ), 'mideast' => ( 'Middle East', 'ms' ), 'america' => ( 'America', 'ms' ), );

$atts = shortcode_atts(
    array(
        'europe_from'  => '0',
        'europe_to'    => '8',
        'asia_from'    => '0',
        'asia_to'      => '0',
        'mideast_from' => '0',
        'mideast_to'   => '0',
        'america_from' => '8',
        'america_to'   => '10',
    ),
    $atts,
    'languages'
);

$languages = icl_get_languages();
foreach ( $languages as $lang ) {
        $lang_codes[]      = $lang['language_code'];
        $lang_flags[]      =
        get_template_directory_uri() . '/assets/images/flags/' . strtolower(
            preg_replace( '/.+?_/', '', $lang['default_locale'] )
        ) . '.svg';
            $lang_urls[]   = $lang['url'];
            $lang_names[]  = $lang['native_name'];
            $lang_active[] = $lang['active'];
}
function create_menu( $region, $atts, $lang_urls, $lang_flags, $lang_codes, $lang_names, $lang_active ) {
    ?>
    <ul>
        <?php
        for ( $i = $atts[ $region . '_from' ]; $i < $atts[ $region . '_to' ]; $i++ ) {
            ?>
        <li class="Header__flags--item Header__flags--item-<?= esc_html( $lang_codes[ $i ] ) ?>" data-region="<?= esc_attr( $region ) ?>" lang="<?= esc_attr( $lang_codes[ $i ] ) ?>">
            <?php
            if ( ! $lang_active[ $i ] ) {
                ?>
            <a class="Header__flags--item-link" href="<?= esc_url( $lang_urls[ $i ] ); ?>">
                <img class="Header__flags--item-flag" src="<?= esc_url( $lang_flags[ $i ] ) ?>" alt="<?= esc_attr( $lang_codes[ $i ] ) ?>" />
                <?= esc_html( $lang_names[ $i ] ) ?>
            </a>
                <?php
            } else {
                ?>
            <span class="Header__flags--item-link active">
                <img class="Header__flags--item-flag" src="<?= esc_url( $lang_flags[ $i ] ) ?>" alt="<?= esc_attr( $lang_codes[ $i ] ) ?>" />
                <?= esc_html( $lang_names[ $i ] ) ?>
            </span>
                <?php
            }
            ?>
        </li>
            <?php
        }
        ?>
    </ul>
    <?php
}
ob_start();
?>

' . esc_attr( $lang['language_code'] ) . '

$name ) { if ( ! empty( $atts[ $region . '_from' ] || $atts[ $region . '_to' ] ) ) { ?>

<?php
    return ob_get_clean();

} add_shortcode( 'languages', 'ms_languages' ); `

Error: Screenshot 2022-05-25 at 08 53 06

WPGraphQL version: 1.8.2

benada002 / wp-graphql-widgets

Unexpected end of JSON with html query parameter #6