[CLOSED] looking for a display:block full line readOnly textMarkers

1

Hi,

I’m facing a problem with automatic text visual replacement.
I’d like to replace automatically some content with readOnly and non removable fulline widgets while keeping the correct line numbers (for backend sync purpose) but it looks like a bit tricky as the textmarker implementation is designed for inline widget purpose only.

I tried to mix empty readonly left and right inclusive textMarkers with line widgets but there is still a problem as the textMarker produce an empty span (Markedspan ?) I’d like to remove because:

keyboard navigation is then strange (you must press two times on the Left key for instance)
content deletion may put the cursor after the marker without any possibilities to go back or put the cursor before it
Could you give me some hints how I can implement this kind of functionality ?

Here is an example of what I’m trying to achieve:

  • Example with inline widget: http://jsfiddle.net/8rhhpsxs/1/ (problem: impossible to set as block without breaking the editor)
  • Example with invisible marker mixed with a full line widget: http://jsfiddle.net/85L2r6yk/1/ (problems with keyboard navigation as the invisible unicode character is present in the marker and futhermore, using the delete key at the end of the first line cause problems as the marked content goes at first line)

By the way in both case deleting content will sometimes put the cursor at a wrong position: the marker is still present but I’m unable to go back with the arrow keys (pressing “left” can’t help here).

I could of course erase the content and use line widgets but I will loose the original number of lines in the code what is also problematic.

Any idea ?

Thanks in advance!

2

The deletion issue can be solved by separating the readOnly marker from the widget marker – having the read-only part include the newlines around the block, so that those lines really can not be touched or combined with other lines. As in http://jsfiddle.net/tptprmrn/

An inline widget can be made display: inline-block; width: 100% to span the width of the line. Does that help?

3

I was aware I could use an “inline-block” mode but didn’t though a width of 100% would work :smile:
About the secondary helper maker I never though it was possible to set several nested markers - but it is actually logical regarding how code folding works. I think I’ll use this technique more often now :smile:

Many thanks! You saved my day!