4

Using a contenteditable div area, I am having issues (currently only tested in Chrome) where the cursor cannot be placed before the first letter of an inline styling element, when the CSS psuedo-selector ::before is used to add content before the "tag".

The use-case is this technique is used to display/style custom tags within a content editor. Each tag is indexed and this index is displayed to the left of the tag text.

Standalone example: http://codepen.io/TheFoot/pen/pydqQb

Thanks in advance..

EDIT: As @Sonny pointed out, if the embedded tag is display: block the problem goes away, but this breaks the need to highlight/style inline sections of text.

General Grievance
  • 4,555
  • 31
  • 31
  • 45
TheFoot
  • 126
  • 1
  • 9

2 Answers2

4

Sounds like a little green bug drives you crazy eh? Anyway. I reckon you insert the TAG via javascript, so you must have some sort of function in place? One quick and dirty solution could be to ad an invisible character into that function before the tag opening. So e.g 

<div class="tag" data-idx="6">&#x2063;maturity...</div>

Or you can just copy and paste the actual character (you can find between these arrows here:

--->⁣<---

As it's invisible it simulates exactly what you need.

[EDIT:]

If you want to reappend the invisible character in case the user deletes it. :)

$('.editor').keyup(function (e) { 
    if( e.which == 8 ) {
         $('.tag')
            .filter( (i,v) => { return $(v).text().match(/^⁣/) == null })
            .prepend("⁣")
    }
})

http://codepen.io/anon/pen/wddoBN

ShQ
  • 756
  • 7
  • 10
  • 1
    Thanks for your answer. I had considered forcing a character in front, but I'll use it as a last resort if I can't find a CSS solution. There is a lot of parsing back and forwards into a document format that would require finding and stripping this character out. – TheFoot Apr 06 '16 at 12:21
  • Also - I just tried the character you mentioned and it only works when the embedded tag is `display: block`? Have you got it working for `display: inline-block`? – TheFoot Apr 06 '16 at 12:22
  • I used your codepen example which seems to be inline block. – ShQ Apr 06 '16 at 12:39
  • Ah yes I have it working now.. Thanks for this - if I can't find a CSS solution, I'll use this. – TheFoot Apr 06 '16 at 12:56
  • Gave up on a CSS solution.. :) This works a treat @ShQ - cheers! – TheFoot Apr 06 '16 at 16:41
  • 1
    the only problem with the invisible character solution is that it only works until the user deletes it, then we're back to square one.. – Lloyd Apr 28 '17 at 14:14
1

I think the issue here is that the div that is contenteditable is inline-block. contenteditable should only be applied to block level elements (excluding headings).

A guideline a couple of people have mentioned is that only block-level elements should be made contenteditable. However, the Mozilla Developer Network lists the heading elements h1 through to h6 as block-level elements, and making a heading element contenteditable is buggy in Firefox4 and can crash the page in Chrome5.

You can read a little more information in this answer here: Which elements can be safely made contenteditable?

Community
  • 1
  • 1
Sonny Prince
  • 1,094
  • 7
  • 15
  • 2
    Thanks for your answer.. The contenteditable `div` *is* `display: block`. Its the embedded tag that is `display: inline-block`. You're right though about `display: block` - when applied to the embedded tag, this works. But of course this doesn't solve my problem - the embedded tag needs to be inline/inline-block. – TheFoot Apr 06 '16 at 09:35
  • Yes I totally agree - I couldn't find a solution are a play around in codepen so i thought i'd post a little info around contenteditable – Sonny Prince Apr 06 '16 at 09:37