Link in react ckeditor is not working

[ankit-brijwasi]

Hello all, I am using CKEditor with react and material UI, The issue which I am facing is that the Link plugin is not working.

Whenever I am clicking the Link icon nothing is happening.

For more info here is an attached gif of what's happening.

Any help will be very much appreciated

[Mgsy]

Hi! Do you have any error in the console? Can you check if the issue occurs in React integration without material UI? There might be some conflicting styles.

[ankit-brijwasi]

Hello, @Mgsy thanks for your response, after doing what you said I found out that the Link plugin doesn't work if I use the CKEditor inside a Dialog Box.

Don't have any idea why this is happening

EDIT Found out that the z-index property of the ballon is less than that of the Dialog Box, can you tell me how can I increase the z-index of the ballon?

[Mgsy]

Thanks for the details. I believe there's some styling conflict and your dialog covers a link input. We had a similar problem with Bootstrap modals, could you please check this guide and see if the proposed solution works for you?

[ankit-brijwasi]

@Mgsy thank's for the guide, the issue is now solved, But the --ck-z-default variable is not working for me.

So I override the .ck-rounded-corners .ck.ck-balloon-panel, .ck.ck-balloon-panel.ck-rounded-corners classes in my own css file and then the ballon started to appear, but it was not editable.

For making that editable I have to use the disableEnforceFocus prop of Dialog Box

Thanks for your response😇

[Mgsy]

Great to hear that you managed to solve your issue :+1:

[WilliamZimmermann]

If you're using MUI in React, you can do the follow in the component that you have your CKEditor component (here I'm using React + NextJS + MUI with CKEditor DecoupledEditor). Notice that I imported GlobalStyles to override the Link baloon zIndex.

import React from "react";
import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import { Box } from "@mui/material";
import GlobalStyles from "@mui/material/GlobalStyles";

const inputGlobalStyles = (
  <GlobalStyles
    styles={{
      ".ck.ck-balloon-panel": {
        zIndex: "1400 !important", // Put a higher value that your MUI Dialog (generaly 1300)
      },
    }}
  />
);

export default function TMTextEditor({ value, onChange }) {
  let textEditor = null;

  return (
    <Box
      sx={{
        ".ck-editor__editable_inline": {
          height: "200px",
          border: (theme) =>
            theme.palette.mode === "light"
              ? "1px solid rgba(0, 0, 0, 0.20) !important"
              : "1px solid rgba(200, 200, 200, 0.25) !important",
          borderTop: "1px !important",
        },
      }}
    >
      {inputGlobalStyles}
      <CKEditor
        editor={DecoupledEditor}
        config={{
          toolbar: {
            items: [
              "bold",
              "italic",
              "underline",
              "link",
              "bulletedList",
              "numberedList",
            ],
            shouldNotGroupWhenFull: true,
          },
        }}
        data={value}
        onReady={(editor) => {
          console.log("Editor is ready to use!", editor);

          // Insert the toolbar before the editable area.
          if (editor) {
            editor.ui
              .getEditableElement()
              .parentElement.insertBefore(
                editor.ui.view.toolbar.element,
                editor.ui.getEditableElement()
              );

            textEditor = editor;
          }
        }}
        onError={(error, { willEditorRestart }) => {
          // If the editor is restarted, the toolbar element will be created once again.
          // The `onReady` callback will be called again and the new toolbar will be added.
          // This is why you need to remove the older toolbar.
          if (willEditorRestart) {
            textEditor.ui.view.toolbar.element.remove();
          }
        }}
        onChange={(event, editor) => {
          const data = editor.getData();

          onChange(data);
        }}
      />
    </Box>
  );
}

And, in the component that have the Dialog, don't forget to put the property disableEnforceFocus.

return (
    <Dialog onClose={props.onClose} open={props.open} disableEnforceFocus>...