can't edit link while using tinymce-react npm package

[liesislukas]

Using TinyMCE react npm package and can't edit link.

https://www.npmjs.com/package/@tinymce/tinymce-react

  <Editor
            initialValue={this.state.text || '<p></p>'}
            init={{
              height: '200',
              auto_focus: true,
              menubar: false,
              statusbar: false,
              plugins: 'hr lists table textcolor code link',
              toolbar: 'bold italic forecolor link | alignleft aligncenter alignright | hr bullist numlist table | subscript superscript | removeformat code',

              // allow custom url in link? nah just disabled useless dropdown..
              anchor_top: false,
              anchor_bottom: false,

              table_default_attributes: {
                border: '0',
              },
            }}
            onChange={this.handleChange}
          />

[SimonFc]

Hi Lukas, I tried replicating this with the same config as you have but everything seems to work fine. What browser/version are you using etc.? I'll need more info in order to replicate it. Thanks!

[liesislukas]

newest chrome on macos, everything up to date.

I think I also tried with safari, firefox on macos. chrome & firefox for Android and chrome/safari on iOS.

I wonder, but does it have requirement for any reactjs env packages?

[SimonFc]

So that I'm understanding you right, the problem is that you can't edit the input fields in the "Insert link" dialog at all? What version of Tiny are you making available?

If by reactjs env packages you mean presets for babel transpilation(if that's what you're doing) then no, not more than what would be required for normal reactjs development, or are you perhaps thinking of something else?

[liesislukas]

I see in package file: "@tinymce/tinymce-react": "2.2.4", check this short video:

All I need to do is to select text, add URL to an external page and would be great if the preselected value would be to open link in new tab. Now it allows selecting couple anchors on the page that even not exist.

I have no errors in the console or in webpack/babel.

[SimonFc]

Okay this seems strange. The {{hostname}} text you're selecting is just a simple paragraph? And it works just fine when you're inserting a link without having any text selected beforehand?

See if it's possible to replicate the issue here: https://codesandbox.io/s/nk234016wl

When using tinymce-react you got the option to provide TinyMCE (for the react component) yourself instead of using the cloud version, which is default. I'll assume that you're loading the cloud version which currently resolves to 4.7.13. https://www.npmjs.com/package/@tinymce/tinymce-react#loading-tinymce

[liesislukas]

What is the option exactly to load script from my source? Haven't found it back in a day and tried to make some dirty having around it. Will try to work on this issue coming days/weeks to get more details.

Yes, text in {{ is just normal paragraph. These are placeholders for variables in final render of the text, not related to tinyMCE

[Mohammad-Eslahi-Sani]

Hello, same issue here. It happens on all input fields e.g. image inputs. Isn't this problem related to focus problems on dialogs? something like the solution suggested for bootstrap here: https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog

[liesislukas]

@Mohammad-Eslahi-Sani i fixed this. It was issue on my side. on the screenshot you can see that i used dialog from another dependency and it grabbed the focus. You may experience same thing. Something is taking the focus from tinymce. Or added css pointer-events rule and skips pointer events.

[javier-rivera-deel]

Hey @liesislukas would you describe how did you actually fix this? I'm facing the same issue but haven't found a way to overcome it. Thanks in advanced!

[mstosio]

@havebeeair

I faced issue where link plugin didnt work in dialogs/modals. Try adding this code into your React components.

`

const editorRef = React.useRef(null);
React.useEffect(() => {
    if (editorRef.current) {
        const focusinHandler = (e: FocusEvent) => {
            if (e.target instanceof Element && e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
                e.stopImmediatePropagation();
            }
        };

        document.addEventListener('focusin', focusinHandler);

        return () => {
            document.removeEventListener('focusin', focusinHandler);
        };
    }
}, [editorRef]);

return (
    <>
        <Editor
            ref={editorRef}`
    />

[Danilo-Guedes]

If you're encountering issues with TinyMCE-React not allowing source code editing within an MUI Dialog component, the problem likely stems from focus propagation and behavior. To resolve this, you can modify a single prop in the Dialog component:

    <Dialog
      open={open}
      onClose={(_, reason) => {
        if (reason === 'backdropClick') return;
        handleClose();
      }}
      aria-labelledby="send-email-modal"
      disableEnforceFocus   //<<<< SET THIS TO TRUE
    >

By setting disableEnforceFocus to true, you should be able to edit the source code without any problems.

[veerendravg]

I have tried many things here but none of them didn't work. can anyone please suggest the solution to enable the link form fields on click of link