jakiestfu / Medium.js

A tiny JavaScript library for making contenteditable beautiful (Like Medium's editor)
http://jakiestfu.github.io/Medium.js/
4.39k stars 403 forks source link

Pasting text with newline #174

Open tcunnington opened 9 years ago

tcunnington commented 9 years ago

I am trying out medium.js in hopes of using it for a simple contenteditable section of my site. Pasting seems to work as expected except when it comes to pasting text content with newlines. When I paste (using ctrl+v) the content pastes correctly with the newlines at first, but when I remove my finger from the keyboard the newlines are stripped from the pasted content. I saw that the paste handler is adding
tags where there were newlines, but they are gone upon inspection after the pasting is complete.

I issue can be reproduced on the medium.js homepage.

robertleeplummerjr commented 9 years ago

Lets do a unit test of it, shall we? what you are pasting, what is expected, and lets work out how to get it right.

On Wed, Sep 9, 2015 at 5:49 PM, Taylor notifications@github.com wrote:

I am trying out medium.js in hopes of using it for a simple contenteditable section of my site. Pasting seems to work as expected except when it comes to pasting text content with newlines. When I paste (using ctrl+v) the content pastes correctly with the newlines at first, but when I remove my finger from the keyboard the newlines are stripped from the pasted content. I saw that the paste handler is adding tags where there were newlines, but they are gone upon inspection after the pasting is complete.

I issue can be reproduced on the medium.js homepage.

— Reply to this email directly or view it on GitHub https://github.com/jakiestfu/Medium.js/issues/174.

Robert Plummer

tcunnington commented 9 years ago

So for instance you might paste the following from a text editor:

The cow jumps over

the moon

What I expect is to get the same arrangement within the Medium.js editable area. Three lines with the first part of the sentence on the first line, nothing on the second line, and the last part of the sentence on the third line.

What I get:

  1. When the content is initially pasted (before keyup)

    The cow jumps over the moon

  2. Once the key is let up

    The cow jumps overthe moon

robertleeplummerjr commented 9 years ago

Very good. I think what is happening is some of the text is being cleaned. Are you in a position to build a unit test?

On Thu, Sep 10, 2015 at 5:04 PM, Taylor notifications@github.com wrote:

So for instance you might paste the following from a text editor:

The cow jumps over

the moon

What I expect is to get the same arrangement within the Medium.js editable area. Three lines with the first part of the sentence on the first line, nothing on the second line, and the last part of the sentence on the third line.

What I get:

1.

When the content is initially pasted (before keyup)

The cow jumps over the moon

2.

Once the key is let up

The cow jumps overthe moon

— Reply to this email directly or view it on GitHub https://github.com/jakiestfu/Medium.js/issues/174#issuecomment-139378314 .

Robert Plummer

pixeline commented 9 years ago

With what options are you instantiating medium.js ? For instance, if you set the tags options.

tags: {
        'break': 'br',
        'horizontalRule': 'hr',
        'paragraph': 'li',
        'outerLevel': ['ol'],
        'innerLevel': ['li', 'b', 'span','u', 'i', 'strong', 'a']
    },

medium.js will clean the html on keyup, thus producing the unintended behaviour.

robertleeplummerjr commented 9 years ago

Thanks Alex for chiming in!

On Mon, Sep 14, 2015 at 4:15 AM, Alexandre Plennevaux < notifications@github.com> wrote:

With what options are you instantiating medium.js ? For instance, if you set `````` tags: { 'break': 'br', 'horizontalRule': 'hr', 'paragraph': 'li', 'outerLevel': ['ol'], 'innerLevel': ['li', 'b', 'span','u', 'i', 'strong', 'a'] },

mediumjs will clean the html on keyup, thus producing the unintended behaviour.

— Reply to this email directly or view it on GitHub https://github.com/jakiestfu/Medium.js/issues/174#issuecomment-139993333 .

Robert Plummer

tcunnington commented 9 years ago

@pixeline I was not setting any tag options, so I must be using the defaults:

    tags: {
        'break': 'br',
        'horizontalRule': 'hr',
        'paragraph': 'p',
        'outerLevel': ['pre', 'blockquote', 'figure'],
        'innerLevel': ['a', 'b', 'u', 'i', 'img', 'strong']
    },

The only other options I was using don't look to be at all related:

     autofocus: true,
     autoHR: false,

I watched the markup in dev tools while this issue was happening and saw that it initially added
tags where there were newlines in the pasted content. Then, after letting up on the keys, the
tags were stripped. So it does seem like the content was cleaned.

As you can probably tell from the slowness of my response @robertleeplummerjr , I don't really have any time right now to create a unit test. I just wanted to bring it up since I didn't see the issue documented