Blocks preview plugin

[Stefan741]

Hi folks

For the text field of Blocks, I want to add a text align functionality (right, center, left) that also renders correctly in the panel preview.

To do so, I followed the Blocks preview plugin guide at link

And out of the box, this works perfectly:

However, clicking on words in the blocks editor doesn’t show the toolbar anymore (bold, cursive, link, etc). I believe this functionality got lost with my plugin rendering method v-html. Any idea how to get this functionality back?

/site/plugins/block-text/index.js

panel.plugin("endloop/block-text", {
blocks: {
    text: `<div v-if="content.halign=='left'" v-html="content.text" style="text-align: left"></div>
           <div v-else-if="content.halign=='center'" v-html="content.text" style="text-align: center"></div>
           <div v-else-if="content.halign=='right'" v-html="content.text" style="text-align: right"></div>`,
},
});

blueprint:

text:
    name: field.blocks.text.name
    icon: text
    preview: text
    fields:
          text:
                type: writer
                marks: true
                nodes: false
                placeholder: field.blocks.text.placeholder
          halign:
                label:
                     en: Vertical align
                     de: Horizontale Ausrichtung
                type: select
                options:
                     left: Links
                     center: Mitte
                     right: Rechts
                     default: left
                     width: 1/2

Thanks and best regards

Stefan

[thguenther]

The default blocks all have a link to their Default Vue Component on the bottom: https://getkirby.com/docs/reference/panel/blocks/text

Looking at the default text block template you should use the k-writer component.

Untested but you get the idea:

panel.plugin("endloop/block-text", {
blocks: {
    text: `<k-writer
    ref="input"
    :nodes="false"
    :value="content.text"
    class="k-block-type-text-input"
    :style="'text-align: ' + content.halign"
    @input="update({ text: $event })"/>`,
},
});

You should probably also use the default placeholder and focus methods.

[Stefan741]

works perfctly, thanks