Deleting text mixes it up (sometimes) in Safari 4

Issue #30 open
created an issue

Create four paragraphs in the normal way, so they look like:

<p id="p_1">1</p><p id="p_2">2</p><p id="p_3">3</p><p id="p_4">4</p>

At the end of paragraph 2, backspace to delete the 2. The result is:

<p id="p_1">1</p><p id="p_3"><br />43</p>

It doesn't seem to happen in Firefox, or after the plugin has been saved, or if the text has been pasted in.

Comments (3)

  1. Luke Plant repo owner
    • changed status to open

    I can confirm the bug with Safari 4, and also with Chrome 4. This points to it being a WebKit bug.

    It doesn't happen with the vanilla WYMeditor that comes with django-cms, so I trimmed our one down until I found the essential difference.

    Bizarrely, it's the CSS file i.e. semanticeditor/media/semanticeditor/wymeditor/iframe/default/wymiframe.css

    In particular, it's putting "position: relative;" on the block elements that does it.

    We need this in order to establish a "containing" block for the ":before" elements. Without this, the small grey text that should appear above the paragraphs etc appears inline at the beginning.

    This is fairly unbelievable, and I don't know what to do about it, because it is central to our editor. It might just be possible to find some hack that won't trigger the bug in Safari. I'm also going to file a bug with WebKit, to see if this can be sorted out from that end.

  2. Luke Plant repo owner

    I filed a bug about this:

    Now that we have the toggle buttons showing which styles are selected for the current element, it is not so vital to have that information displayed in the editor window itself, so one possible workaround is that for affected browsers we disable the "position:relative" CSS and we don't show the style info in the editor itself.

  3. Luke Plant repo owner

    I have thought of some work-arounds for this. Essentially we need to avoid setting 'position: relative' on block elements in the editor. This means we can't use ':before' elements and the 'content' property for displaying the small text that indicates CSS class.

    However, there are other ways to add this text - use an image of the text, and use a background-image property.

    The difficulty then is creating the custom images containing the text we want. I can think of two solutions:

    1. Generate the images server side, setting the background-image URL to a URL that contains the text to be generated in the query string.

    2. Generate the images client side, by drawing onto a canvas, turning this into an image, and setting the background-image URL to a 'data' URL that contains this image.

    The disadvantage with 1 is that it will be slow because it requires a server round trip. The disadvantage with 2 is that I don't know if it will actually work, though I'm fairly confident it should (there is even a toDataURL method - which should make life easy). It may also be slow, but I don't know.

  4. Log in to comment