Page break disappear

[Nikhilchandra-Rathod]

Bug 1: Page break disappear when we focus out from editor and its not visible after focus it. It should visible when we click or focus inside editor now its only visible when we update something inside editor.
Bug2: Pagebreaks are not at the place of my cursor.
Demo video: https://www.awesomescreenshot.com/video/35469205?key=41b21d9785f2e5a3574cdc5758fc903e

"jodit-pro-react": "^4.1.27"

Browser: Chrome
OS: Windows
Is React App: True

Code

const preConfig = {
    theme: 'summer',
    readonly: false,
    toolbar: true,
    toolbarButtonSize: 'large',
    extraPlugins: ['pasteCode'],
    showXPathInStatusbar: false,
    buttons: [
      {
        group: 'uptomatic',
        buttons: toolbarButtons,
      },
    ],
    uploader: {
      imagesExtensions: ['jpg', 'png', 'jpeg', 'gif'],
      url: `/Ashx/Handler.ashx?OriginFullPath=${pathToUpload}`,
      isSuccess: function (response: { link: string }) {
        return response.link !== '';
      },
      process: function (response: { link: string }) {
        return {
          files: [response.link],
          isImages: [true],
          messages: ['Successfully uploaded'],
          path: '',
          baseurl: '',
          error: 0,
          msg: '',
        };
      },
      getMessage: function (response: unknown) {
        return 'Successfully uploaded';
      },
    },
    exportDocs: {
      ajax: {
        url: 'https://xdsoft.net/jodit/finder/',
      },
      css: 'body { font-family: "Inter", sans-serif !important; }',
      pdf: {
        allow: true,
        externalFonts: ['https://fonts.googleapis.com/css2?family=Inter&display=swap'],
        options: {
          format: 'A4',
          page_orientation: 'portrait',
        },
      },
    },
    controls: {
      bold: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
          <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
        </svg>
        `,
      },
      italic: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M11 5l6 0" /><path d="M7 19l6 0" />
          <path d="M14 5l-4 14" />
        </svg>
        `,
      },
      strikethrough: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M5 12l14 0" />
          <path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5" />
        </svg>
        `,
      },
      ul: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M9 6l11 0" /><path d="M9 12l11 0" />
          <path d="M9 18l11 0" /><path d="M5 6l0 .01" />
          <path d="M5 12l0 .01" /><path d="M5 18l0 .01" />
        </svg>
        `,
      },
      ol: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M11 6h9" /><path d="M11 12h9" />
          <path d="M12 18h8" />
          <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" />
          <path d="M6 10v-6l-2 2" />
        </svg>
        `,
      },
      link: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M9 15l6 -6" />
          <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
          <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
        </svg>
        `,
      },
      pageBreak: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
          <path d="M19 18v1a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-1" />
          <path d="M3 14h3m4.5 0h3m4.5 0h3" />
          <path d="M5 10v-5a2 2 0 0 1 2 -2h7l5 5v2" />
        </svg>
        `,
      },
      exportDocs: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
          <path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3" />
        </svg>
        `,
      },
      source: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M7 8l-4 4l4 4" />
          <path d="M17 8l4 4l-4 4" />
          <path d="M14 4l-4 16" />
        </svg>
        `,
      },
      print: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" />
          <path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" />
          <path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" />
        </svg>
        `,
      },
      file: {
        icon: `
          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
            <path d="M14 3v4a1 1 0 0 0 1 1h4" />
            <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
          </svg>
        `,
      },
      video: {
        icon: `
          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
            <path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z" />
            <path d="M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
          </svg>
        `,
      },
    },
  } as IJoditEditorProps['config'];


<JoditEditor
        value={value}
        onBlur={onChange}
        config={preConfig}
      />

Expected behavior: Page break should be at cursor position and it will be visible when we focus/click inside editor.

Actual behavior: Page break not added at the position of cursor and also not visible when we focus/click inside editor.