Custom context menus

[viktor-yakubiv]

Good enhancement for the Reader we may already implement is context-driven help. When a user selects the text during reading, the context menu below is shown in a second above the selected text (or below the text if there is not enough free space).

The menu design includes the annotation colors and primarily was designed for annotating. Although, the first line of the menu is useful even without annotation functionality and may include:

• copying the text
• searching in web
• searching in Wikipedia (see below 👇)

Also, where is possible we can append the menu by contextual wikification. For example, when there exists a corresponding Wikipedia page for the selected text (when a couple of words selected only) we show a term description above the menu.

It would be nice to add 'Search in CORE option too. However, this should be investigated more deeply because people would not like to change the context when they are reading the paper.

Inspiration

The context menu feature is borrowed from Google Play Books app for Android. You may find how it works if install the app and in the reading mode select the text.

The wiki-notification may be explored on any Wikipedia page when you hover on any link. You will see the brief description of the term you are pointing at.

Open questions

1. How triggering a menu can be implemented in the React flow?
2. How the menu look can be customized?
3. Where the menu actions should be stored and how the data should update?
4. How actions should be performed?

More sketches

Let me know if you need more sketches. I will append these below.

[Joozty]

1. How triggering a menu can be implemented in the React flow?

I prepared some proof of concept here #34. Any feedback is welcomed. Basically every page has its own context menu. And these menus are rendered via React Portal. Menu is shared within annotations on the same page.

2. How the menu look can be customized?

Simple answer: However we want to. 😃

3. Where the menu actions should be stored and how the data should update?

Currently, the annotations are stored in global context. Every annotation contains - selected text, normalized coordinates of every rectangle when PDF is not scaled (as one annotation can be on multiple lines), color

4. How actions should be performed?

New annotation triggers updating of the global context. And every affected component is re-rendered.

@viktor-yakubiv What is that button in top left corner with + sign in the middle good for? Is it for adding a new annotation? I thought annotation would be added when one of the color buttons is clicked.

[viktor-yakubiv]

The annotation would be added if any color button is clicked. However, the + button is for adding an annotation with a comment. That is why you may note a tiny border around the yellow circle. There is kind of selected color which will be used when + button is clicked.

The button itself add a highlight and opens a commenting window. Based on this we need to extend annotation object with a comment field.

Although, we were looking into storing annotations on hypothes.is. We decided that this is not a priority now and stopped all research in this area. Currently if you are developing this, I will take a closer look into it.

[viktor-yakubiv]

React Portals sound good! I meant more how to design the component flexible enough to fit different count of buttons with different actions along with menu items and input fields.