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.

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

selection.insertHTML causes infinite blur loop when Jodit editor not active #819

Closed
ahurlburt opened this issue Apr 1, 2022 · 0 comments

Comments

@ahurlburt
Copy link

ahurlburt commented Apr 1, 2022

Issue:

I have a custom toolbar item which I am using to launch a modal where the user may select some property from a list, some related text to the property is then intended to be inserted into the editor at the last cursor location. However, what is happening instead is that an infinite loop occurs, maybe related to onblur since i see the onblur callback being called continuously. I verified that if I just use a button outside the editor to insert some test text at the last cursor location this works, so issue is potentially related to the fact a popup dialog is present? I've spent hours trying to figure out what's going on and seems like it is likely a bug and not something I am doing incorrectly, though I'd be happy if the latter was the case.

Jodit Version: 3.16.6

Browser: Chrome
OS: Mac
Is React App: True

Code

// editor ref passed to Jodit like example, the Jodit ref is used to store actual editor instance
const editorRef = useRef(null)
const jodit = useRef(null);

// custom launcher added to config in toolbar, displays a modal window where user can select something, this modal has a callback onPropertySelect()
  const propertySelectLauncher = {
    iconURL: '/outline_add_black_24dp.png',
    exec: function (editor) {
      // store the editor ref since the ref passed to Jodit is just for text area.
      jodit.current = editor;
      setDisplayPropertySelect(true);
    }
  }

const onPropertySelected = (textToInsert) => {
      // THIS IS WHERE INFINITE LOOP OCCURS
      jodit.current.selection.insertHTML("TESTING");
 } 

const onBlurCallback = (newContent) => {
    console.log("on blur");
    setContent(newContent);
  }

return (
<Box>
<JoditEditor
          ref={editorRef}
          value={content}
          // @ts-ignore
          config={config}
          tabIndex={1} // tabIndex of textarea
          onBlur={onBlurCallback} // preferred to use only this option to update the content for performance reasons
          onChange={contentParser}
        />
{isPropertySelectDisplayed && <DialogForPropertySelect callBack={onPropertySelected} ... />}
<Box>
)

Expected behavior:
Jodit would insert the html at the last cursor location (since onblur should be saving the cursor)

Actual behavior:
Infinite loop occurs, onBlurCallback function is called continuously and app is frozen

xdan added a commit that referenced this issue Apr 12, 2022
…active

Added `insertCursorAfter` argument.

Issue: #819
@xdan xdan closed this as completed Jun 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants