Id Added Blocks

[yosefmekkawy]

I am working on a plugin that allows the users to create their own blocks and also reuse it , the issue is that i need to make any block used exported html just a div with that block id and show the preview in the editor normally. the issue i am facing currently is that if any nested component has a custom view it does not render as the custom view but instead it renders the html , it was working fine if i used blocks but i need to handle the case where the view is different from the model , is there a way to make the component render the custom components view normally or use blocks but seperate the model from the view ?

`export function RegisterComponents(editor: Editor, blocks: UserBlock[]) {
blocks.forEach((block: UserBlock) => {
editor.DomComponents.addType(DYNAMIC_COMPONENT_TYPE + -${block.id}, {
isComponent: el => el?.dataset?.blockId == block.id,

        model: {
            defaults: {
                type: ${DYNAMIC_COMPONENT_TYPE}-${block.id},
                attributes: {
                    [BLOCK_ATTR]: block.id,
                    'data-dynamic': 'true'
                },
                editable: false,
                droppable: false,
                stylable: false,
                propagate: ['editable', 'droppable', 'stylable'],
                traits: [],

            },

            init() {
                this.on('change:attributes', () => this.view?.render());
                this.view?.render();
            },

            toHTML() {
                return <div ${BLOCK_ATTR}="${block.id}" data-dynamic="true"></div>;
            }
        },

        view: {
            async onRender() {
                await this.renderPreview();
            },
            async renderPreview() {
                const {el} = this;
                try {
                    // Create content container
                    const content = document.createElement('div');
                    content.innerHTML = block.html;
                    const style = document.createElement('style');
                    style.textContent = block.css || '';
                    content.prepend(style);

                    // Add JavaScript
                    if (block.js) {
                        const script = document.createElement('script');
                        script.textContent = block.js;
                        content.appendChild(script);
                    }

                    el.innerHTML = '';
                    el.appendChild(content);

                } catch (error) {
                    el.innerHTML = <div class="alert alert-danger">Error loading block ${block.id}</div>;
                }
            }
        }
    });
})

`}