draft-js-mathjax-plugin question - need help

Created on 16 Mar 2019  路  4Comments  路  Source: facebook/draft-js

Hello!
I'm in an impasse and I would like to ask for your help, because I'm not very experienced with draft-js library.

I use the draft-js-mathjax-plugin to create a math editor. As you can see in screenshot 1, I have a button with an integral symbol inside it. When I press this button, I want to insert an integral inside the draft-js editor (using the draft-js-mathjax-plugin). From what I noticed, the draft-js-mathjax-plugin do not have a method for adding dynamically (from code - when button is clicked) math symbols inside the editor (the symbols can be added only manually by typing them).

Screenshot1 (I have an integral button):
screenshot1

So, I tried to find a solution. I wrote an insertMath function which is called when the integral button is pressed (see screenshot 2). It works, it really inserts the integral symbol I need inside the draft-js editor, but after it is inserted I have a problem: the cursor is not working anymore as it should. Sometimes the cursor is jumping to the end of the line and sometimes it disappear (and I keep staying focused on the editor). See screenshot 3. I don't know exactly what causes this behavior, but it's strange and I don't know how to solve it. I hope that you can help me with this.

Screenshot2 (the insertMath function I wrote):
insertMath

Screenshot3 (cursor is at end of line, but it shouldn't be there):
cursor

I appreciate any suggestion/help.
Thanks in advance!

"react" version: 16.2.0
"draft-js" version: 0.10.5
"draft-js-plugins-editor" version: 2.1.1
"draft-js-mathjax-plugin" version: 1.3.4

bug

Most helpful comment

I can reproduce with both [email protected] [1] and 0.11.0-beta2 [2]. I'll take a look tomorrow to understand where among the three packages involved the issue occurs.

[1] https://codesandbox.io/s/0y4komx4ll
[2] https://codesandbox.io/s/0mq5pmx3lv

All 4 comments

I can reproduce with both [email protected] [1] and 0.11.0-beta2 [2]. I'll take a look tomorrow to understand where among the three packages involved the issue occurs.

[1] https://codesandbox.io/s/0y4komx4ll
[2] https://codesandbox.io/s/0mq5pmx3lv

Thank you, I'm waiting for your response

@claudiopro you reproduced my problem perfectly at https://codesandbox.io/s/0y4komx4ll
Did you find something that could solve this or there is no too much chance? I'm still trying to figure out a solution, but without success until now.

Hi
While checking the problem I noticed the following regarding the issue with the cursor going to the end of the line:

  1. The issue is present on Chrome but not in Safari so maybe it is browser specific?
  2. The cursor shows up at the end of the line if there is no text after the integral but shows up at the right place if there is any data after the integral.

Also, I found the following issue : Backspace does not remove integral symbol inserted into the editor. It works intermittently in Chrome but not in Safari.

I am new here and I was just going through issues to better my understanding. Hope this might help in someway..

Was this page helpful?
0 / 5 - 0 ratings