How to make <ruby> and <rt> tags editable

[zyxue]

Do you want to request a feature?

Feature

What is the current behavior? Problem 1: <rt> tag inside <ruby> confuses the following variables:

var startKey = selectionState.getStartKey();
var start = selectionState.getStartOffset();
var endKey = selectionState.getEndKey();
var end = selectionState.getEndOffset();

Problem 2: Content of <rt> tag inside <ruby> is not editable.

What is the expected behavior? Left key/right key: navigate character by character Up key: go to <rt> Down key: back to the character in <ruby>

Both ruby annotation and the character itself should be editable. Please try the text "人之初，性本善" at http://zxlab.herokuapp.com/ to see what I meant. I am currently using Decorators, whenever a user type a Chinese character, the app will find its Pinyin annotation and convert the character to a tag, e.g.

<ruby class="bg-primary"><span data-offset-key="3sgb6-0-0"><span data-text="true">人</span></span><rt class="text-success">rén</rt></ruby>

I this is already doable with the current Draft.js, any suggestion is appreciated. Thank you!

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

"draft-js": "^0.9.1"

[davidchang]

for your second problem, do you want the text within the rt tag to be editable? if so, you should be using entities instead of decorators - decorators are not really meant for dynamic metadata like being able to edit the pinyin.

also, could you clarify what you meant in Problem 1, that the selection variables are confused?

[zyxue]

Hi @davidchang, thank you for reply. I meant to edit the Pinyin (within <rt></rt> tag) as well as the character ((within <ruby></ruby> tag) if possible, can you confirm if entity is the way to go please? Your typing after within is lost.

Sure, I have updated the app to log start offset and end offset. Again, you can type a few characters, e.g. '人之初', put your cursor at the end, and keep pushing left arrow key and see how the log looks like at browser console. Here is what I see

PinyinCushionEditor.jsx:177 3 3
PinyinCushionEditor.jsx:177 2 2
PinyinCushionEditor.jsx:177 4 4
PinyinCushionEditor.jsx:177 3 3
PinyinCushionEditor.jsx:177 2 2
PinyinCushionEditor.jsx:177 1 1
PinyinCushionEditor.jsx:177 2 2
PinyinCushionEditor.jsx:177 1 1
PinyinCushionEditor.jsx:177 3 3
PinyinCushionEditor.jsx:177 2 2
PinyinCushionEditor.jsx:177 1 1

The last two columns are just the start offset and end offset. Since I didn't select a range, so they're the same. You could see it gets smaller then it gets larger again, this is because the cursor jumps into the <rt> tag then off to <ruby> tag back and force. You can do a little experiment and easily see what I meant on http://zxlab.herokuapp.com/. I thought this would be a non-trivial problem, but if there is an easy solution, that would be awesome!

[zyxue]

The source code is also available at https://github.com/donkirkby/pinyincushion/tree/draftjs

[aehlke]

I'm also interested in the inverse - disabling selection inside the <rt> ruby text.

@zyxue did you make any progress on this issue?

[zyxue]

We don't really have any progress on this particular issue. Instead, we compromised on separating the editor and display. For example, you can try 妙{miao4} on https://donkirkby.github.io/pinyincushion/ and see what I mean.

[aehlke]

I moved to SlateJS to tackle this - less baked, but similar architecture as this and it's able to deal with inline block elements. Happy to show you if interested.

[zyxue]

Cool! Did you manage to make text inside tags work, as well?

[aehlke]

@zyxue As a workaround, I put a button as the ruby text, containing the reading as its label, and allowing to change it upon click.