default to <p> tag about medium-editor

[Charuru]

Same here please reopen.

[hduchesn]

Hi Guys,

I am using FF and medium editor 5.22.1 and I still have the issue... When I click an empty editable and type my first character the text move out the

wrapper and this break my design.
So first I have <p><br/></p> and then I have <br/><p></p>. It happens only with FF (current version 54) on linux and windows.
I read a lots of thing here about this but it seems there is no real solution...
I tried to disable the placeholder but I get the same behavior...

Is there a solution in the pipe?

[chanon]

This issue has come back in the latest version. I think it should be re-opened, or I could open a new issue for it.

[domarty]

Yes, I'm running into this issue now. I've been trying to think of a workaround to no avail.

[dmitric]

How would you go about fixing this? It's quite annoying for me, as I have a margin bottom set on my p element and everything looks great except for the first raw text segment.

[jwahdatehagh]

This is worse than i thought... -when it's not a p element you can't change it to another block element like h1/h2

[CTres]

I too am seeing this behavior.

On Thursday, October 3, 2013, jwahdatehagh wrote:

This is worse than i thought... -when it's not a p element you can't
change it to another block element like h1/h2

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/34#issuecomment-25601138
.

Colin Treseler
[phone]
Twitter: @CTres
http://ctres.github.io
www.linkedin.com/in/ctres

[daviferreira]

Not sure if we need to do somehting about raw text, without elements, on a blank state.

The h1/h2 behavior was fixed with #44

[jsphpl]

I think it's fine then. It should only be addressed if there is a "clean" way to fix this.

[daviferreira]

@dmitric you could just start your contenteditable area with a <p> instead of being empty, no? But I will try to take a look at this soon.

[jarlg]

I just updated from c4fd023 to latest, and checked out this issue before and after. Actually on c4fd023 it seemed to be the correct behaviour. Using a div for .editable, the first text entered (before enter/newline!) would be wrapped in a

tag. This is the correct behaviour in my opinion.

After updating to latest, the initial text is "raw", not in a

tag. As stated in the issue.

Starting the contenteditable with a

tag is not a solution, as this would wrap the entire written text in that

tag, and not just the first paragraph, no?

UPDATE

@daviferreira, @dmitric Reverting f963783 seems to solve this issue.

[daviferreira]

Hmmm, I don't think it has something to do with those commits. It was always like that. I tried anyway reverting and checking out, still the same.

I'm still deciding which approach to take. We could use a paragraph as placeholder, like Medium. But then there is issue #50. We could also insert a paragraph to empty contenteditables, but then we have to focus on the paragraph when the user enters the editable area. Another approach is to wrap the first character typed into a paragraph, or something like that.

[jarlg]

@daviferreira, are you sure? I've compared the behaviour of reverted and latest two-three times now, and it works when reverted.

Given an empty .editable: <div class='editable'></div>, writing "hello", enter and then "hello2" gives

for latest:

<div class='editable' ... >
    hello
    <br ></br>
    <p> hello2 </p>
</div>

for revert:

<div class='editable' ... >
    <p> hello </p>
    <p> hello2 </p>
</div>

The latter seems to be the desired behaviour, I think.

[daviferreira]

Odd! Which browser are you using, @jarlg?

[jarlg]

@daviferreira, I am using Firefox 24.0! I didn't think to check other browsers, so sorry for that.

[daviferreira]

Nah, my bad, got it now. You were right all along, it was because I've changed the keypress event to keyup. Cheers, man, thanks.

[jarlg]

@daviferreira, glad to be of help!

[daviferreira]

Could you guys try it out please, it's on master.

[dmitric]

Looks great except for now the placeholder is shifted down. In order to fix it, I set the .medium-editor-placeholder:after pseudo element to be

position:absolute;
top: 0;

and then it was perfect! Great work.

EDIT: Sorry I see you've done the same, I use my own CSS file so missed that.

[jwahdatehagh]

works perfectly! Thanks so much, guys!