Block factory with blocks

Kirby 3
1

Hi,

I play with this code :

And I think it would be powerful (and useful in my case) if the text field was of type blocks (from the card source page to the current page).

Can I find a template: (like the end of this JS /site/plugins/block-factory/index.js) for blocks ?

2

For now my best code is like this :

panel.plugin("cookbook/block-factory", {
  blocks: {
   card: {
      data() {
        return {
        };
      },
      computed: {

        image() {
            return this.page.image || {}
        },
        pageId() {
          return this.page ? this.page.id : '';
        },
        page() {
            return this.content.page[0] || {};
        },
        headingField() {
          return this.field("heading");
        },
        textField() {
          return this.field("text");
        },
        testField() {
          return this.field("test");
        }
      },

      watch: {
        "page": {
          handler (value) {
            if(typeof value.id === 'undefined') {
              this.content.text = '';
              this.content.heading = '';
            }
            if(this.pageId) {
              this.$api.get('pages/' + this.pageId.replace('/', '+')).then(page => {
                if (value.id === page.id && this.content.text !== '') {
                  this.content.text = this.content.text;
                  this.content.test = this.content.test;
                  this.content.heading = this.content.heading;
                } else {
                  this.content.text = page.content.text.replace(/(<([^>]+)>)/gi, "") || '';
                  this.content.test = page.content.test || '';
                  this.content.heading = page.content.title.replace(/(<([^>]+)>)/gi, "") || '';
                }
            });
           }
          },
          immediate: true
        }
      },

      template: `
        <div @dblclick="open">
          <k-aspect-ratio
            class="k-block-type-card-image"
            cover="true"
            ratio="1/1"
          >
            <img
              v-if="image.url"
              :src="image.url"
              alt=""
            >
          </k-aspect-ratio>
          <h2 class="k-block-type-card-heading"">
            <k-writer
              ref="heading"
              :inline="headingField.inline"
              :marks="headingField.marks"
              :placeholder="headingField.placeholder || 'Add a heading'"
              :value="content.heading"
              @input="update({ heading: $event })"
            />
        </h2>
          <div class="k-block-type-card-text">
            <k-writer
            ref="text"
            :inline="textField.inline"
            :marks="textField.marks"
            :placeholder="textField.placeholder || 'Add some text'"
            :value="content.text"
            @input="update({ text: $event })"
          />
          </div>
          <div class="k-block-type-card-test">
            <k-blocks
            ref="blocks"
            :inline="testField.inline"
            :marks="testField.marks"
            :placeholder="testField.placeholder || 'Add some text'"
            :value="content.test"
            @input="update({ test: $event })"
          />
        </div>
        </div>
      `
    },
  }
});

I can load a page and his “blocks” field in the right panel, but not in the page.
And of course my <div class="k-block-type-card-test"> is not good (errors).