2

I am building an extended editor based on draft-js to add a footnote feature. When writing text in the main editor, the user has the option to click "add footnote", which adds a footnotemark (a badge with the number of the note) at the current selection, and opens a secondary editor where to write the text of the note.

It all works well, except that if you add a note at the very end of a content-block, it is impossible to place the cursor after the footnotemark to keep writing after it.

A note consists in an entity with length 1 at the position of the footnotemark, which is a character "N" on which we superpose a Chip which is a CompositeDecorator.

I have reproduced the problem in a Code Sandbox, which is focused only on the markers (there is no problem with the text content of the notes). Try writing some text and adding a footnotemark at the very end, it is impossible to place the selection after the footnotemark and keep writing, which is note the case if you place the footnotemark before the end of the text.

Any help will be greatly appreciated !!

I saw that jorgen posted a thread with a quite similar problem but I could not find a relevant answer there .

Thank you in advance.

Dennis Kozevnikoff
  • 2,078
  • 3
  • 19
  • 29
Lucas David
  • 102
  • 9

1 Answers1

5

Don't ask me why, but when you don't render the children in your decorator component weird things happen

this little change solve your problem

const NoteChip = ({ entityKey, contentState, children }) => (
  <Badge
    contentEditable={false}
    badgeContent={"N"}
    color="primary"
    id={"note-chip-" + entityKey}
    style={{ marginRight: 15, marginLeft: 5, cursor: "pointer", top: 5 }}
  >
    <span>{children}</span>
  </Badge>
);

...
  // insert a blank space instead of the N
  contentState = Modifier.insertText(
    contentState,
    newSelection(blockKey, offset),
    " "
  );

https://codesandbox.io/s/test-selection-decorator-draft-js-forked-dzuxl

diedu
  • 19,277
  • 4
  • 32
  • 49
  • Thanks a lot for that answer, really helped. Just the cursor now goes to the right-end of the editor, any idea why ? – Lucas David Oct 05 '20 at 08:22
  • @LucasDavid I don't understand your new issue, It works fine for me, when clicking the add footnotemark button it puts the badge in the cursor position and then I click back on the input and I'm able to move the cursor to the right end, maybe you can make a gif or video of what you mean – diedu Oct 05 '20 at 14:19
  • If 1. you write some text, 2. add fotenotemark at the end and 3., click in the editor, the cursor goes to the right-end of the editor See example in [this gif](https://drive.google.com/file/d/1VJCb77s25li-a04BcUiwzsYajSZsMtyB/view?usp=sharing) – Lucas David Oct 09 '20 at 08:13
  • @LucasDavid that's weird, it doesn't happen to me, what browser + version are you using? – diedu Oct 09 '20 at 14:57
  • I am using Chrome 85.0.4183.121 but it is the same in Safari 14.0 ... Maybe our codes are still different, I just modified 2 thinks as you suggested : rendering children in `NoteChip` and inserting a blank space instead of "N" in `addFootNoteMark` – Lucas David Oct 11 '20 at 18:44
  • 1
    @LucasDavid I added the link to the codesandbox I used – diedu Oct 11 '20 at 19:42
  • Perfect thanks !! Still don't get why I had this issue but now it seems fixed. – Lucas David Oct 12 '20 at 08:11