Show layout setting in panel

The CMS Questions
1

Hi, is there a way to show a layout setting directly in the panel?
I setup the layout to have a title setting. Now I’d like for the editor to see the title directly.
So I’d like to show that title as a heading of the layout directly in the panel.

2

Maybe this helps as a starting point: Working on layout preview - #4 by arnoson

3

Very helpful. Thanks!

I came up with the following:

panel.plugin("my/plugin", {
  components: {
    'k-layout-field': {
      extends: 'k-layout-field',
      watch: {
        value() {
          this.setTitle()
        },
      },

      mounted() {
        // Also set the title on start.
        this.setTitle()
      },

      methods: {
        setTitle() {
          Array.from(this.$el.querySelectorAll('.k-layout')).forEach(
            (layout, index) => {
              // Get the layout settings (attrs) for each layout.
              const layoutAttrs = this.value[index].attrs

              let {title} = layoutAttrs
              let titleDiv = layout.querySelector('.my-layout-title');
              if (title) {
                if (!titleDiv) {
                  titleDiv = document.createElement('div');
                  titleDiv.className = 'my-layout-title';
                  layout.prepend(titleDiv);
                } 
                titleDiv.innerHTML = title;
              } else if (titleDiv) {
                titleDiv.remove();
              }
            }
          )
        },
      },
    },
  },
});

.my-layout-title {
  padding: 0.8rem;
  font-size: 1.2rem;
  background-color: #eee;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.5rem #ccc;
}