How to add _setComponentLineBreaker in a custom plugin

[Bakhtawarshahid1]

Version

"suneditor": "^2.47.0",
"suneditor-react": "^3.6.1"

Additional context

In Reactjs I have implemented my suneditor which has a code plugin. The code of plugin is given below I have to add the line breaker component as it is being added with the image and other plugins.

`import hljs from "highlight.js"; import "highlight.js/styles/github.css"; import dialog from 'suneditor/src/plugins/modules/dialog';

var plugin_codeDialog = { name: 'customCode', display: 'dialog', title: 'Code', innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.73 11.8">',

add: function (core) {
    core.addModule([dialog]);

    const context = core.context;
    context.customCode = {
        focusElement: null,
        languageSelect: null,
        codeTextarea: null
    };

    let code_dialog = this.setDialog(core);
    context.customCode.modal = code_dialog;
    context.customCode.languageSelect = code_dialog.querySelector('select');
    context.customCode.codeTextarea = code_dialog.querySelector('textarea');

    code_dialog.querySelector('form').addEventListener('submit', this.submit.bind(core));
    context.dialog.modal.appendChild(code_dialog);
},

setDialog: function (core) {
    const dialog = core.util.createElement('DIV');
    dialog.className = 'se-dialog-content';
    dialog.style.display = 'none';

    let html = '' +
        '<form class="editor_code">' +
            '<div class="se-dialog-header">' +
                '<button type="button" data-command="close" class="se-btn se-dialog-close" aria-label="Close">' +
                    core.icons.cancel +
                '</button>' +
                '<span class="se-modal-title">Insert Code</span>' +
            '</div>' +
            '<div class="se-dialog-body">' +
                '<div class="se-dialog-form">' +
                    '<label style="margin-right:15px">Language</label>' +
                    '<select class="se-input-select">' +
                        '<option value="javascript">JS</option>' +
                        '<option value="html">HTML</option>' +
                        '<option value="sql">SQL</option>' +
                        '<option value="cpp">C++</option>' +
                        '<option value="csharp">C#</option>' +
                        '<option value="vbnet">.Net</option>' +
                    '</select>' +
                '</div>' +
                '<div class="se-dialog-form">' +
                    '<label>Code</label>' +
                    '<textarea class="se-input-form" style="height: 200px;"></textarea>' +
                '</div>' +
            '</div>' +
            '<div class="se-dialog-footer">' +
                '<button type="submit" class="se-btn-primary">Insert</button>' +
            '</div>' +
        '</form>';

    dialog.innerHTML = html;
    return dialog;
},

open: function () {
    this.plugins.dialog.open.call(this, 'customCode', false);
},

submit: function (e) {
    e.preventDefault();
    e.stopPropagation();

    const contextCode = this.context.customCode;
    const language = contextCode.languageSelect.value;
    let code = contextCode.codeTextarea.value.trim();

    if (code.length === 0) return false;

    const pre = this.util.createElement('pre');
    this.util.addClass(pre, "se-code-language");
    const codeElement = this.util.createElement('code');
    this.util.addClass(codeElement, `__se__ language-${language}`);
    
    if(language=="html"){
        code = code
        .replaceAll(/&/g, '&amp;')      
        .replaceAll(/</g, '&lt;')       
        .replaceAll(/>/g, '&gt;')       
        .replaceAll(/"/g, '&quot;')     
        .replaceAll(/'/g, '&#39;')
        .replaceAll(" ", "&nbsp;");

    }
    else{
        code = code.replaceAll(" ", "&nbsp;");
    }
    codeElement.innerHTML = code;

    pre.appendChild(codeElement);        
    hljs.highlightBlock(codeElement);  
    
    const spans = codeElement.querySelectorAll('span');
    spans.forEach(span => {
        const classes = span.className.split(' ').map(cls => `__se__ ${cls}`);
        span.className = classes.join(' ');
    });

    codeElement.innerHTML = codeElement.innerHTML.replaceAll("\n","<br/>");
    pre.setAttribute('contenteditable', 'false');
    
    this.insertNode(pre); 
        
    this.plugins.dialog.close.call(this);
    this.focus();
    return false;
    
},

init: function () {
    const contextCode = this.context.customCode;
    contextCode.languageSelect.selectedIndex = 0;
    contextCode.codeTextarea.value = '';
}

};

export default plugin_codeDialog;`