Inserting a table causes extra line breaks, that can not be deleted

[rav88]

Jodit-React Version: 1.3.11

Browser: Chrome OS: Windows 10 Is React App: True

Code

import JoditEditor from 'jodit-react'
import React, {useMemo, useRef} from 'react'

const toolbarButtonsLargeScreenConfig = [
  'bold', 'italic', 'underline', 'strikethrough', '|', 'ul', 'ol', '|', 'font', 'fontsize', 'paragraph', 'lineHeight', '---', 'superscript', 'subscript', '|', 'image', 'video', '\n',
  'cut', 'copy', 'paste', 'selectall', '|', 'hr', 'table', 'link', 'symbol', '|', 'indent', 'outdent', 'left', '|', 'brush', '---', 'undo', 'redo', '|', 'preview'
]

const toolbarButtonsCompactConfig = [
  'bold', 'italic', 'underline', 'strikethrough', '|', 'ul', 'ol', '|', 'font', 'fontsize', 'paragraph', 'lineHeight', '|', 'superscript', 'subscript', '|', 'image', 'video', '\n',
  'cut', 'copy', 'paste', 'selectall', '|', 'hr', 'table', 'link', 'symbol', '|', 'indent', 'outdent', 'left', '|', 'brush', '|', 'undo', 'redo', '|', 'preview'  
]

export function DPRichTextInput({ name }: { name: string }) {
  const editor = useRef(null)

  const getConfig = () => {
    const cfg = {
      uploader: {
        insertImageAsBase64URI: true
      },
      readonly: false,
      toolbarButtonSize: 'large',
      minHeight: '500px',
      askBeforePasteHTML: false,
      defaultActionOnPaste: 'insert_only_text',
      buttons: [ ... toolbarButtonsLargeScreenConfig ],
      buttonsMD: [ ...toolbarButtonsCompactConfig ],
      buttonsSM: [ ...toolbarButtonsCompactConfig ]
    }
    return cfg
  }

  const handleBlur = (value: string) => {
    // not relevent
  }

  const config = useMemo(getConfig, [])

  return (
    <JoditEditor
      ref={editor}
      value={field.value}
      config={config}
      onBlur={handleBlur}
    />
  )
}

Expected behavior: When i use the configuration of "new line" feature, when a new line is represented by a paragraph <p>, I want to have a table rendered directly below the text. When i use the configuration of "new line" feature, when a new line is represented by <br /> or <div></div> i want for the cursor to not return back / act normally

Actual behavior: When i use the configuration of "new line" feature, when a new line is represented by a paragraph (P), I want to have a table rendered below the text. Now it is rendering an extra <p><br /><p> entry, that can not be easily deleted. When i use the configuration of "new line" feature, when a new line is represented by a BR or DIV tag, I want for the cursor to behave normaly, but for now it goes back, leaving one of the letters behind.

[Nandini913]

Seems that you are using React and so do I currently so while I had created one custom button to insert table, adding this to the configuration helped me deal with the problem
const config = { cleanHTML: { replaceNBSP : false, fillEmptyParagraph : false, }, ....other}

    this is where config is used 
     <JoditEditor
            value={tinyMceStore.editorContent}
            config={config}
            ref={editorRef}
            onBlur={newContent => tinyMceStore.setEditorContent(newContent,page)}
            onChange={newContent => {}}
        />

        and function to insert a table using custom button is as 

    insertTable = (editorRef: any, rows: number, cols: number) => {
        const editorInstance = editorRef.current?.component;
        if (!editorInstance) {
            return;
        }
        const newTable = this.generateHtmlTable(rows, cols, editorInstance);
        editorInstance.selection.insertNode(newTable);
        editorInstance.selection.setCursorAfter(newTable)
    }

    generateHtmlTable = (rows: number, columns: number, editor: any) => {
        const table = editor.createInside.element('table');
        table.style.width = '100%'
        table.style.borderCollapse = 'collapse'
        const cellWidth = `${100 / columns}%`
        for (let i = 0; i < rows; i++) {
            const tr = editor.createInside.element('tr')
            for (let j = 0; j < columns; j++) {
                const td = editor.createInside.element('td')
                td.style.width = cellWidth
                td.innerHTML = '&nbsp'
                tr.appendChild(td)
            }
            table.appendChild(tr)
        }
        return table;
    }

Hope this helps