0

I'm using react-rte but am willing to extend it so let's talk about Draft-js.

I need to be able to "inline-style" a selection. Then on subsequent renders re-access that selection's dom.

So let's say I highlight a selection. Then I persist the document. Then I come back, reload the document, I need to be able get access to that highlighted section, but in the dom.

Basically on the side of the document I'm applying markers, outside of draft-js, and those markers need to line up with the highlighted part. So when I do the initial highlighting I can get the dom position from window.getSelection(), and i can place my marker. But the dom may change later and I won't be able to place my marker.

--edit--

So another use case is that I highlight a selection, and even in the same session, I need to change the color of the selection programatically so again I need to access the section of the document even if the cursor is not on that section.

--end edit--

So what I really need is something like an unique classname, id or even better a react ref for the new spans that are created when you do an inline style.

Please let me know if you need a better explanation.

Trenton
  • 11,678
  • 10
  • 56
  • 60
Raif
  • 8,641
  • 13
  • 45
  • 56

1 Answers1

0

The SelectionState records the selection, including start block, start offset, end block and end offset. It's not problem to save the selection in you code and apply to the editor later.

So what I really need is something like an unique classname, id or even better a react ref for the new spans that are created when you do an inline style.

So the id you want is a SelectionState, tell where the span is in draft-js editor.

UPDATE

You can find the block key which your inline styled text belongs to, in data-offset-key={blockkey}-xx-xx node attribute. The block key helps you find the node from SelectionState.getStartKey()/getEndKey(). Then find the span node by SelectionState.getStartOffset()/getEndOffset().

Jiang YD
  • 3,205
  • 1
  • 14
  • 20
  • Thanks, I think i understad, but on the second part can you explain how I can get the dom location of the span from the SelectionState? – Raif Nov 28 '16 at 15:14
  • what you mean location? – Jiang YD Nov 29 '16 at 02:17
  • Well, I need the top left, or the position, sorry I can't think in css right now, but I need to align something with the top of the selection outside of the editor. I can do it when I have the window.getSelection() cuz that tells me the top,left,right,bottom, but if I load the page later those coordinates may no longer be correct, I need to recalculate them. – Raif Nov 29 '16 at 14:35
  • I think you're on the wrong way. React and Draft operate the virtual DOM other than real DOM, you should follow the rule if you use the framework. Back to your question, check my update in answer. – Jiang YD Nov 30 '16 at 02:00
  • Hi, thanks and i fully intend to mark you as correct answer. but I have an other question, I agree, that one should stay with in the paradigm. But how can I align a dive that is outside of the Editor to a span inside the editor without finding the DOM position of the span and entering that as a style in the outside div? I'd much prefer to stay inside react if I can. thanks – Raif Nov 30 '16 at 15:53
  • that's true if you need do align in complete different div. I just thinking maybe you could dig more draftjs source then do the alignment by adding node to the span in same div. – Jiang YD Dec 01 '16 at 02:15
  • 3
    but how can we get the '-xx-xx' value for certain span node? – Eason PI Mar 16 '18 at 09:54
  • @EasonPI were you able to find a solution for getting the '-xx-xx' value? – Kyle Fong Oct 07 '21 at 09:34
  • @EasonPI KyleFong after render the draftjs dom(not html dom, but the draftjs's document model) to html, you can find '-xx-xx' by block key. And the block key can be found be block index(blocks in draftjs dom always has order) – Jiang YD Oct 08 '21 at 02:55