Field type Codeeditor wordWrap not working

Need Help
#1

Im trying to display json values inside a repeater using the codeeditor field type, but I can only see one long line when I was expecting to see a word wrapping as per the doc is mentioning.

am I mising some parameters somehow ?

    response_data:
        tab: API Response Data
        label: Response Data
        type: repeater
        span: full
        titleFrom: "endpoint"
        style: collapsed
        form:
            fields:
                endpoint:
                    label: "API Endpoint Called"
                    type: text
                response:
                    label: "API Response"
                    type: codeeditor
                    size: huge
                    language: json
                    wordWrap: 40
#2

Your config looks correct and wordWrap: 40 should be taking effect… but Ace’s word wrap breaks at whitespace boundaries, not arbitrary characters. If your response field contains minified single-line JSON like {"foo":"bar","baz":[1,2,3]}, there are no spaces for Ace to break on, so it keeps the whole token on one line and you get horizontal scroll instead of a wrapped view.

Try pretty-printing the JSON before saving: json_encode($data, JSON_PRETTY_PRINT) on the way in, or run it through JSON.stringify(obj, null, 2) on the client. Once there’s whitespace in the content, you’ll see the wrapping kick in at column 40 as expected.

Side note: if you’re loading data from a model attribute, you can also add a getter on the model to pretty-print on the fly for display only (keeps your stored DB value compact and the editor view readable).

We’re planning to switch the codeeditor form widget over to Monaco soon so it’s aligned with the editor used elsewhere in the backend. That should bring better wrap behaviour out of the box, among other improvements.

#3

Hi @daftspunk

thanks for the explanation and tip.
Indeed, I am displaying the repeater value in a backend form.
but can’t seem to make it work with the attribute getter:

public function getResponseDataAttribute()
    {
        $response = [];
        $json = $this->attributes['response_data'] ? json_decode($this->attributes['response_data'], true) : [];

        foreach ($json as $key => $data) {
            $response['endpoint'] = $data['endpoint'];
            $response['response'] = json_encode($data['response'], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
        }

        $result = json_encode(array_wrap(json_encode($response)));
        return $result;
    }

it show empty row values in the form.

1 Like