Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Link popup automatically close when we click on it #1213

Open
Nikhilchandra-Rathod opened this issue Jan 13, 2025 · 0 comments
Open

Link popup automatically close when we click on it #1213

Nikhilchandra-Rathod opened this issue Jan 13, 2025 · 0 comments

Comments

@Nikhilchandra-Rathod
Copy link

Link popup automatically close when we click on it or try to focus on input.
We using Mantine for components.
Demo video url: https://www.awesomescreenshot.com/video/35468868?key=8c81efba23afd4d8f52794d687ec82d7

"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: Link popup should not close.

Actual behavior: Link popup close when we click or focus on it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Nikhilchandra-Rathod