How to place text cursor in specific location within input field?

[brylie]

We have some editable text on our screen (without wysiwyg). On the first click event, the text becomes editable by inserting an input field, with all text selected. When I click a second time, with the expectation of placing a text cursor in a specific location within the text, the input field is removed.

E.g. I have the text 'editble' displayed in a paragraph on the page, which needs an "a" between "t" and "b". When I click the 'editable' paragraph, the input field appears, with all text selected. I then click between "t" and "b", so that I can add the correct letter "a" within the string. The result of the click removes the editable text area.

How can users place a text cursor in a specific location within an editable input field?

[brylie]

Meteorpad.com takes an interesting approach to editable text by using the hover event to trigger the input field. Then, a click simply places the cursor in the text area at the point of click. Would a similar strategy work for meteor-editable-text?

[JackAdams]

In meteorpad.com, no events are triggered on the hover event -- that's just a cleverly styled input tag with some css-hover effects. But, yes, I've thought a lot about making the editable text widget work this way. I just haven't got around to implementing it yet.

As for the scenario you describe above, that absolutely shouldn't be happening. When you click on the selected text, there should be a cursor placed and you can edit as necessary. If you could put a repro on meteorpad, I'd be more than happy to look into what's going on. You're not using IE by any chance, are you?

[brylie]

I will try to reproduce on Meteorpad. In the meantime, for reproduction, please consider checking the wysiwyg bootstrap 3 feature branch on our open-source project, called Crowducate. When editing a course, all inline editors on sidebar exhibit this behavior on Firefox 38. This may be related to the size of the input as a click click target, as the larger page elements such as titles behave as expected.

[brylie]

It seems like this is related to our inline editable text being wrapped in anchor tags. On Firefox, the inline edit input doesn't behave as expected when rendered within an tag.

[JackAdams]

Wrapping the editable text in anchor tags could certainly lead to some unwelcome side effects. I took a quick look at your repo for crowducate:

<template name="lessonText">
   {{# if editingThisCourse }}
     {{> editableText
       collection="lessons"
       field="text"
       textarea=true
       wysiwyg=true
       context=activeLesson
       substitute='<i class="fa fa-pencil"></i>' }}
   {{ else }}
     {{{ text }}}
   {{/ if }}
</template>

could be re-written as:

<template name="lessonText">
   {{> editableText
       collection="lessons"
       field="text"
       userCanEdit=editingThisCourse
       wysiwyg=true
       substitute='<i class="fa fa-pencil"></i>' 
    }}
</template>

(Assuming that activeLesson is the data context here.)

Could simplify the lessonName template in a similar way.

By the way, I really like where you're going with crowducate. Wish I had time to make some contributions.