Combine editor, frequency, and pronunciation

donkirkby / pinyincushion

Chinese learning tool for editing simple texts with pronunciation guide

https://donkirkby.github.io/pinyincushion/

1 stars 0 forks source link

Combine editor, frequency, and pronunciation #10

Closed zyxue closed 8 years ago

zyxue commented 8 years ago

Seems ace cannot be used directly with webpack or browserify, need to use brace instead

zyxue commented 8 years ago

simpleeditor uses a customized simple mode for ace editor, http://xkcd.com/simplewriter/ace/src-min/mode-upwriter.js in order to do the highlighting.

zyxue commented 8 years ago

It looks Ace only supports highlighting. Inserting tags could be difficult. I am looking at an promising alternative solution now, https://facebook.github.io/draft-js/

donkirkby commented 8 years ago

I'm not sure whether putting the pinyin in with the editor will be helpful or not. I'm trying to imagine what it would be like to edit Chinese text with the pinyin mixed in. On the other hand, I really like the simplicity of a "one box" interface.

If you can find an easy way to do it with the highlighted Chinese text in one box and the pinyin in a separate box as it is now, that might be a good way to start.

zyxue commented 8 years ago

If you can find an easy way to do it with the highlighted Chinese text in one box and the pinyin in a separate box as it is now, that might be a good way to start.

Pinyin in a separate box? I am not sure what that would be like. I think draftjs is quite promising. Let dig a little deeper.

donkirkby commented 8 years ago

I just meant the way we have it now: one box where you type Chinese text and a second box where you display the Chinese text with pinyin. The only change would be to put the frequency colouring on the box where you type. If draftjs looks promising, then carry on.

zyxue commented 8 years ago

I have put a prototype with three elements all together at the draftjs branch. Most of the code in PinyinCushionEditor.js are removed. There is also conflicts with the master branch, so I haven't merged them yet. Overall, it looks neat.

[ ] fix cursor selection. cursor shouldn't go into <rt> tags
[ ] better design

donkirkby commented 8 years ago

It looks way simpler that way, nice work! The cursor selection problem also seems to affect the home and end keys. Also, I can't override the pronunciation. It looks promising, though.

zyxue commented 8 years ago

Thanks. I am still not sure if I used the right feature for of Draftjs for our purpose. Currently, I am using Decorators, but it seems that [Custom Block Components](maybe https://facebook.github.io/draft-js/docs/advanced-topics-block-components.html#content) can also do the job, I am experimenting.

zyxue commented 8 years ago

BTW, it's good to know it affects home and end keys, I don't have those two keys on my laptop.

zyxue commented 8 years ago

It looks that Custom Block Components may not be appropriate as it's mainly for block-like content, Ruby text may not fit very well. so will focus on Decorators and try to fix the selection problem.

zyxue commented 8 years ago

Haven't found a solution yet, filed an issue on https://github.com/facebook/draft-js/issues/717

zyxue commented 8 years ago

Will put Pinyin in the display for now.

donkirkby commented 8 years ago

I tried out the version on the colorbg branch, and it looks nice. Here are a couple of suggestions before we close this issue:

[x] There's a bug: the display is one key stroke behind. That often happens when you trigger on the wrong key event. I haven't checked which event you're using.
[x] Remove the colour from the display on the right, I don't think we need it in both places.
[x] Merge into master branch.

zyxue commented 8 years ago

Hi @donkirkby, I have fixed the two problem, you could take a look and see if it's good to merge now.

donkirkby commented 8 years ago

Looks great, merge that baby!