'toPreview' is not rendered

[olegfedak]

I have created a widget as editor component, but it's not rendered in CMS preview. What thoughts?

2023-11-10.15.03.32.mov

Widget code:

CMS.registerEditorComponent({
    id: 'quote',
    label: 'Quote',
    collapsed: true,
    fields: [
        {
            name: 'text',
            label: 'Text',
            widget: 'string',
        },
        {
            name: 'author',
            label: 'Author',
            widget: 'string',
        },
        {
            name: 'image',
            label: 'Image',
            widget: 'image',
        },
    ],
    pattern: /{%\s+include\s+'partials\/quote'\s+text:'(.*?)'\s+author:'(.*?)'\s+img:'(.*?)'\s+%}/ms,
    fromBlock: function (match) {
        return {
            text: match[1],
            author: match[2],
            image: match[3]
        };
    },
    toBlock: function (data) {
        return `{% include 'partials/quote' text:'${data.text}' author:'${data.author}' img:'${data.image}' %}`;
    },
    toPreview: function (data) {
        return `
<blockquote class="quote">
    <div class="quote_top">
        <div class="photo">
            <img src="${data.image}" alt="">
        </div>
        <div class="text">
            ${data.text}
        </div>
    </div>
    <div class="quote_bottom">
        <div class="name">- ${data.author}</div>
    </div>
</blockquote>
`;
    }

});

[olegfedak]

If anyone comes across the same issue, here is the answer.

I just rebuilt my preview template from a string template to React.
Before:

var Post = createClass({
    render: function () {
        var entry = this.props.entry;
        var title = entry.getIn(['data', 'title']);
        var image = entry.getIn(['data', 'image']);
        var description = entry.getIn(['data', 'description']);
        var body = entry.getIn(['data', 'body']);
        var date = entry.getIn(['data', 'date']);
        var categories = entry.getIn(['data', 'categories']);
        var bg = this.props.getAsset(image);

        var template = `
        <div class="image_bg--single" style="background-image: url(${bg.toString()});"></div>
        <div class="page_content single-page blog-single">
            <div class="content-head">
                <div class="wrap">
                    <div class="wrap_float">
                        <div class="main">
                            <div class="title">
                                ${title}
                            </div>
                            <div class="date">
                                ${date} | ${categories.join(', ')}
                            </div>
                            <div class="description">
                                ${description}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content-body">
                <div class="wrap">
                    <div class="wrap_float">
                        <div class="page--content">
                            ${marked.parse(body)}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        `;

        return h('div', { dangerouslySetInnerHTML: { __html: template } });
    }
});

export default Post;

After:

var Post = createClass({
    render: function () {
        var entry = this.props.entry;
        var title = entry.getIn(['data', 'title']);
        var image = entry.getIn(['data', 'image']);
        var description = entry.getIn(['data', 'description']);
        var date = entry.getIn(['data', 'date']);
        var categories = entry.getIn(['data', 'categories']);
        var bg = this.props.getAsset(image);

        return h('div', {},
            h('div', { className: 'image_bg--single', style: { backgroundImage: `url(${bg.toString()})` } }),
            h('div', { className: 'page_content single-page blog-single' },
                h('div', { className: 'content-head' },
                    h('div', { className: 'wrap' },
                        h('div', { className: 'wrap_float' },
                            h('div', { className: 'main' },
                                h('div', { className: 'title' }, title),
                                h('div', { className: 'date' }, `${date} | ${categories.join(', ')}`),
                                h('div', { className: 'description' }, description)
                            )
                        )
                    )
                ),
                h('div', { className: 'content-body' },
                    h('div', { className: 'wrap' },
                        h('div', { className: 'wrap_float' },
                            h('div', { className: 'page--content' },
                                // Рендеринг вмісту віджета з річ тексту
                                this.props.widgetFor('body')
                            )
                        )
                    )
                )
            )
        );
    }
});

export default Post;