Bug: When focussing the editor a <br /> is inserted in the beginning.

[q2apro]

I am focussing the editor, when the user clicks on a button:

window.sceditorInstance_c20_content = $('textarea[name="c20_content"]').sceditor('instance');
window.sceditorInstance_c20_content.focus();

This works, the focus is set to the scedtior field and the cursor blinks at first position. If the users starts to type now, the typing appears in the second line, not in the first as expected.

Checking the HTML source of the editor, it shows:

 <p>
    <br />test
 </p>

Test it:

1. open http://www.q2apro.com/forum/94/test-question-to-insert-image
2. click button "comment"
3. start to type
4. Result: Typing starts in line 2 not line 1.

~ Firefox 30.0, Win7 64bit

[brunoais]

In which browser(s) did you test that?
In which browser(s) did you successfully replicated that?

[q2apro]

Firefox 30.0 and 31.0. It does not happen with Internet Explorer 11. Chrome not tested.

Test it live at: http://www.klaustukai.lt/7856/upiniu-zuvu-auginimas-namie - click on "komentuoti" and start to type something.

[brunoais]

Sheesh... Sorry, my bad.

Anyway, that you are pointing out, is caused by a change you made to the original contents. Just ask firefox and you can see what it says.
It is neither the same as this:
https://github.com/samclarke/SCEditor/blob/1.4.5-dev/minified/jquery.sceditor.default.min.css
or this:
https://github.com/samclarke/SCEditor/blob/master/minified/jquery.sceditor.default.min.css

So it's your changes to the original that made that.

[q2apro]

Wait, a change to the CSS is leading to an insert of a <br />. How weird would that be.

Indeed I added to the original CSS:

  p {padding:10px 0 !important;}

However, removing this line and using the original does not help. It is still a bug.

[brunoais]

Do it and I'll try again and reevaluate it.

[q2apro]

Well, I did it already. Tested the file without the css change, same problem.

For you I have set the original css file. Feel free to test it here: http://www.q2apro.com/forum/61/windows-desktop-blue-background-default-color-code (click on comment, type...)

This is the CSS file: http://www.q2apro.com/forum/qa-plugin/q2apro-sceditor/minified/jquery.sceditor.default.min.css

[brunoais]

Cannot reproduce.
After removing the changes you had made, it is displaying correctly.

[q2apro]

Problem still exists. Win 7 64 bit, Firefox 31.0. Cursor blinks in the first line, starting to type, it jumps into the second:

Test page: http://www.q2apro.com/forum/61/windows-desktop-blue-background-default-color-code

[brunoais]

Cannot reproduce. Check your browser's cache. Make sure you cleared it.

[q2apro]

I have just tested it on two other computers running windows 7 and the latest firefox. All give the same bug. The "cannot-reproduce" label should be assigned for your setup not for my PC nor the PCs of my friends here :)

[brunoais]

Then wait for Sam clarke. If I cannot reproduce, I can't understand how to fix it.

[samclarke]

Took a few attempts but I've managed to reproduce it. The problem is caused by Firefox inserting a <br> and then focusing after it which has no effect until you type something which then causes the <br> to show.

As a temporary solution you could use the autofocus option which should work correctly.

[q2apro]

autofocus: true did not help either. Maybe the reason is that there are multiple instances of the sceditor. Check the q2apro.com/forum link from above. Button Answer reveals one instance, button Comment reveals the other one.

[samclarke]

I've been looking into this and the cause is the fact it's hidden which for some reason causes Firefox to place the cursor in the wrong place. I'm not sure why Firefox places the cursor in a different position compared to normal but it is doing. I've got a fix that works now I just need to do some more testing.

[samclarke]

As a temporary solution calling clear on the rangeHelper and then calling focus should cause Firefox to create a new range in the right place:

instance.getRangeHelper().clear();
instance.focus();

I'm still trying to create a proper fix for this. My original fix won't work as the first time focus() is called it will remove any manually set ranges.

[samclarke]

Now fixed in the 1.4.6-dev branch.

[q2apro]

Hi Sam, thanks, but it seems not solved yet. Try the steps from the first post above. The site http://www.q2apro.com/forum/94/test-question-to-insert-image holds the latest SCEditor.js code, see file http://www.q2apro.com/forum/qa-plugin/q2apro-sceditor/minified/jquery.sceditor.min.js - but still the same issue.

[samclarke]

You can't use the raw source code without either using an AMD module loader or building it first.

It can be built by running the commands:

# Intstall grunt if not already installed
npm install -g grunt-cli

# Install dependencies
npm install

# Concatenate and minify the source
grunt build

I've just quickly built the current dev branch and uploaded it here if you want to test it out.

[q2apro]

@samclarke Thanks for your reply. I don't know /yet/ the "AMD module loader" and these commands above. Guess it is Linux.

Could you built the file SCEditor.js please, you have built the jquery.sceditor.xhtml.min.js above. The issue above targets SCEditor.js.

Thanks!

PS: Why can I not use the code directly? Are there dependencies? It's kind of new to me.

[samclarke]

The jquery.sceditor.xhtml.min.js includes the main SCEditor.js file along with the XHTML plugin. If you swap the current jquery.sceditor.xhtml.min.js with the one above it should work correctly.

[q2apro]

Fix confirmed

Working now at http://www.q2apro.com/forum/94/test-question-to-insert-image

PS: I see, I have to learn something new (grunt, amd). Thanks for pointing out.