v-model for contentEditable

yyx990803 commented 10 years ago

9ec0259df6b129ae2271ca8cf179fe6ecb07e572

yjkogan commented 10 years ago

Hey @yyx990803,

Is there a follow-up PR for this? Having an element with contenteditable="true" and the v-model directive doesn't work well with filters. (Here's a js fiddle).

For work I made a directive v-editable-text that both applies the contenteditable attribute and does all the v-model stuff (it's modeled after v-model). I'd be happy to roll that into this code base, or just fix v-model to work with filters.

For what it's worth, my solution is largely just incorporating the solution presented in this stack overflow post: http://stackoverflow.com/questions/13949059/persisting-the-changes-of-range-objects-after-selection-in-html/13950376#13950376.

yyx990803 commented 10 years ago

Thanks @yjkogan ! I'm about to get to the directives part for 0.11, and v-model is one of the directives that need some major refactoring. Would love to take a look at your v-editable-text directive to incorporate your fix.

yjkogan commented 10 years ago

Sounds good! What's the best way for me to get that to you? I can send you the three relevant files (directive, helper utility, tests for the utility) whenever but to open a PR I'd need to set aside part of my work day next week. Happy to do that though!

yyx990803 commented 10 years ago

You can just put them in a gist. No pressure about the PR if you don't have time for it.

yjkogan commented 10 years ago

I'm having a hard time making sure the gist has the right amount of context, so I'll probably put in the time to make a PR early next week :).

yjkogan commented 10 years ago

Hey!

So, I opened a half-baked PR into our fork which you can see here. As I mention there, I'm having trouble with the unit tests and don't have time yet to dig in and figure out what's going wrong. I'd also like to add more tests and write some casperJS integration tests. We use casper as well so when I write them internally I'll port them over.

yyx990803 commented 10 years ago

Just curious, what filters are you guys using on contenteditables? Are they mostly for input validation? If you don't need to modify the contents, you can use write-only filters which will be available in 0.11.

I feel that we shouldn't put this amount of extra code into Vue core for the specific use-case of contenteditable + filters, maybe it should be a separate plugin. Thanks for working on the PR though!

yjkogan commented 10 years ago

We're not using any filters at the moment, I just wanted the implementation to be "correct." It felt weird to have a directive so close to v-model that you couldn't use a filter on. If you accept that it contenteditable wont work with filters, then this is pretty much just v-model with a couple UX changes (escape to reset value and enter to blur()).

Definitely makes sense to not add so much code for something so specific. Makes me wish getting the cursor was easier for contenteditable elements, haha. When I have more time I'll look into making this a plugin :). Hope this was helpful!

robertleeplummerjr commented 10 years ago

Just thought I'd chime in, it would be VERY easy to do this with: https://github.com/jakiestfu/Medium.js/ In fact, I'm working on a project right now with Knockout that uses Medium.js. Thoughts?

yyx990803 commented 10 years ago

@robertleeplummerjr definitely, if you want full control over a contenteditable it's very simple to wrap medium.js in a custom directive.