Creating a custom field in the panel that can display formatted code

I’ve built an email template generator and would like to allow the marketing manager to copy the code directly from the panel. I’ve gotten as far as to place the code snippet in an Info field but it currently doesn’t wrap so I figured I would need to make my own field but I’m struggling to get it working.

In the blueprint, I query for a custom page method I created:

title: Newsletter
fields:
  info:
    label: Info
    type: info
    text: "{{ page.newsletter }}"

This just spits out the HTML, but in the plugin that I am trying to build, the query just shows up on the Panel as a string.

Try

text: |
   "{{ page.newsletter }}"

I get an error.

app.js:1 DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
    at qo (http://localhost:3000/media/panel/9f851fb3203c740b13d66b2369b3636d/js/vendor.js:23:51101)
    at Yo (http://localhost:3000/media/panel/9f851fb3203c740b13d66b2369b3636d/js/vendor.js:23:50838)
    at Array.Vo (http://localhost:3000/media/panel/9f851fb3203c740b13d66b2369b3636d/js/vendor.js:23:50428)
    at _ (http://localhost:3000/media/panel/9f851fb3203c740b13d66b2369b3636d/js/vendor.js:23:45211)
    at v (http://localhost:3000/media/panel/9f851fb3203c740b13d66b2369b3636d/js/vendor.js:23:44574)
    at h (http://localhost:3000/media/panel/9f851fb3203c740b13d66b2369b3636d/js/vendor.js:23:44391)
    at p (http://localhost:3000/media/panel/9f851fb3203c740b13d66b2369b3636d/js/vendor.js:23:43982)
    at a.__patch__ (http://localhost:3000/media/panel/9f851fb3203c740b13d66b2369b3636d/js/vendor.js:23:48463)
    at a.In.t._update (http://localhost:3000/media/panel/9f851fb3203c740b13d66b2369b3636d/js/vendor.js:23:27125)
    at a.r (http://localhost:3000/media/panel/9f851fb3203c740b13d66b2369b3636d/js/vendor.js:23:27931)

That query evaluation doesn’t come automatically for free, you have to actually do it.
Take the info field as an example: https://github.com/getkirby/kirby/blob/master/config/fields/info.php

Line 17:

 $text = $this->model()->toString($text);

Is what evaluates the query. You would have to do something similar.

But, if you’re already doing a custom field for this, you don’t even need to go through the query parser; just call your function :slight_smile:

[
    'computed' => [
        'text' => function () {
            return $this->model()->newsletter();
        }
    ],
    'save' => false,
];

Nevertheless, it should work without the quotes. But depends on what your method returns.

I was able to get this to work, thanks! I wonder now is there’s a PHP helper that could format the code, maybe do syntax highlighting too?