jakiestfu / Medium.js

A tiny JavaScript library for making contenteditable beautiful (Like Medium's editor)

Home Page:http://jakiestfu.github.io/Medium.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Pasting text with newline

tcunnington opened this issue · comments

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.

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
#174.

Robert Plummer

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

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:

When the content is initially pasted (before keyup)

The cow jumps over
the moon

Once the key is let up

The cow jumps overthe moon


Reply to this email directly or view it on GitHub
#174 (comment)
.

Robert Plummer

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.

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
#174 (comment)
.

Robert Plummer

@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