Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cursor positioned at the end of the line when last blot on the line is an embed. #1181

Closed
emanuelbsilva opened this issue Dec 12, 2016 · 3 comments

Comments

@emanuelbsilva
Copy link

Hi,

When an embed (formula for instance) is the last blot in a line, the cursor is positioned in the end of the line (in the edge of the editor), instead of just to the right of the embed.

Steps for Reproduction

  1. Go to: http://codepen.io/emanuelbsilva/pen/WogXvB
  2. Click with the mouse after the formula (as you were to write something after). When clicking with the mouse after the formula the cursor is in the edge of the editor.

Expected behavior:
It should put the cursor just after the embed (formula).

Platforms:
Chrome 55.0.2883.75 (OSX)
Safari 10.0 (OSX)

Version:
Quill 1.1.6

@emanuelbsilva emanuelbsilva changed the title Cursor positioned at the end of line when last blot on line is an embed. Cursor positioned at the end of line when last blot on the line is an embed. Dec 12, 2016
@emanuelbsilva emanuelbsilva changed the title Cursor positioned at the end of line when last blot on the line is an embed. Cursor positioned at the end of the line when last blot on the line is an embed. Dec 12, 2016
@jhchen jhchen added the triage label Dec 22, 2016
@bsunderhus
Copy link

Same happening with me. I got a custom embeded and the cursor goes to the end of the line
img1

img2

don't mind the react render

class Placeholder extends Embed {
  static blotName = 'chip'
  static tagName = 'span'
  static className = 'placeholder'
  static create (value) {
    const node = super.create(value)
    node.setAttribute('contentEditable', false)
    render(<Chip label={value}/>, node)
    return node
  }
  static value (node) {
    const chip = node.querySelector('.md-chip-text')
    if (!chip) return null
    return chip.innerHTML
  }
}

I actually "solved" by inserting a blank space everytime the embeded is inserted

handleChipClick = (text) => {
    const {index} = quill.getSelection() || {index: 0}
    quill.insertEmbed(index, 'chip', text, Quill.sources.USER)
    quill.insertText(index + 1, ' ', Quill.sources.SILENT)
  }

@jostang
Copy link

jostang commented Jun 15, 2017

+1

@jhchen
Copy link
Member

jhchen commented Jul 17, 2017

This has been fixed in 1.3.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants