Hanging panel after user Click

I'm working on a small language learning app, in which the user can:

  1. save text and audio to read and listen later

  2. click on a word to add notes and example sentences

  3. get some stats per language + other features

I'm not sure how I handle the 'click on a word' event. After clicking a word, The user should be able to:

a) Add a definition if the clicked word is not yet defined.

b) Add example sentences (as many as he wants)

Somehow, the user should also be able to edit the definitions and example sentences.

The available space is the right panel. The user focus is on the text, so I don't want to change screens or distract them of the main task: quickly define/edit words and sentences.

My current design is this (the 'Add sentence' part is not yet implemented):

a) before any word click

enter image description here

b) after click on a word which is not defined yet. Clicking 'Save' will show item c) below:

enter image description here

c) after Saving a word. Clicking 'Edit' will show item b) above, with the text-area filled and focused:

enter image description here

Clicking 'Cancel' or 'Close' will show the Instruction message. Notice that the current word is underlined in black on the text panel.

Edit

Based on some answers, maybe a single popup on click would solve all these problems? This popup would bring fields to add a word definition and a sentence. Then I could list everything on the right panel, allowing edition there.

What do you people think? Any other suggestions? Thank you!

NOTES:

1- By right clicking on a word, the user can evaluate how much he knows this word, via a popup. The blue words are "new" (meaning not yet in this language database). Then from red to green it covers "started learning" to "almost known". No color with a green underline means "well known word". No color with red underline means "ignored word".

2- The text is inside a scrolling div, so the right panel is always visible, no matter the text position.

Tags: