feature request: Adding new menu item in reader context menu

[vkiranmaniya]

I have added the context menu item for the reader window. There already one Inspect Element menu entry for dev, I want another entry for a production build. What I'm trying to do is I want context menu item Add to Bookmark and in the click, handler passes the IPC call to renderer process to call the add to bookmark action. But the menu item Add to bookmark won't appear.
I' using the latest develop branch.

[panaC]

i don't understand precisely what do you looking for.

But if you want to create a new menu in the top bar, our codebase is here :

thorium-reader/src/main/redux/sagas/win/browserWindow/createReaderWindow.ts

Line 49 in 694b9c6

wc.on("context-menu", (_ev, params) => {

and then you can dispatch a main redux action on click.

it should work in prod env.

[vkiranmaniya]

Here is the code, The issue is when i right click on the middle of window, Add to bookmark button doesn't appear and it's showing else where. when i right click on setting icon, it's visible in context menu.

const wc = readerWindow.webContents;
    wc.on("context-menu", (_ev, params) => {
        const { x, y } = params;
        const openDevToolsAndInspect = () => {
            const devToolsOpened = () => {
                wc.off("devtools-opened", devToolsOpened);
                wc.inspectElement(x, y);

                setTimeout(() => {
                    if (wc.isDevToolsOpened() && wc.devToolsWebContents) {
                        wc.devToolsWebContents.focus();
                    }
                }, 500);
            };
            wc.on("devtools-opened", devToolsOpened);
            wc.openDevTools({ activate: true, mode: "detach" });
        };
        Menu.buildFromTemplate([{
            label: "Add to Bookmark",
            click: () => {
                console.log("Add to Bookmark Option Clicked");
                // TODO implement the add bookmark function by PRC call
            },
        }, IS_DEV ? {
            click: () => {
                const wasOpened = wc.isDevToolsOpened();
                if (!wasOpened) {
                    openDevToolsAndInspect();
                } else {
                    if (!wc.isDevToolsFocused()) {
                        // wc.toggleDevTools();
                        wc.closeDevTools();

                        setImmediate(() => {
                            openDevToolsAndInspect();
                        });
                    } else {
                        wc.inspectElement(x, y);
                    }
                }
            },
            label: "Inspect element",
        } : undefined]).popup({window: readerWindow});
    });

Also, How to pass the RPC call to add to bookmark? Here is what i decided to go with.
onclick of context menu item, main process sends RPC event to the reader window and from the renderer process we can call add to bookmark function. If there is better way, please suggest.

[danielweck]

Hello, the "central" part of the reader window is not managed by Thorium's code, it is implemented by the "navigator" component which handles the complex layout and rendering logic of publication resources (in other words, the application user interface is the "chrome" that surrounds this central area).

Application developers are not expected to modify / tweak code in the "navigator" component, so ideally / ultimately this component should provide hooks / extension points so that additional context menus / etc. can be plugged in. Right now, this service / API does not exist, I am afraid.

Could you please explain what your use case is? What feature do you need the menu items to expose? How much interaction with the rendered DOM of publication HTML documents do you need? (this last question is the main issue, because publication resources are embedded in a strict sandbox, because of security considerations when loading foreign / untrusted content)

[danielweck]

PS: the "add bookmark" feature that already exists in Thorium takes into account the "current reading location" and even the currently-selected text in the webview that hosts publication HTML documents. Users can currently click on the bookmark icon-button (top toolbar), of use the CTRL-B keyboard shortcut (see https://github.com/edrlab/thorium-reader/wiki/Keyboard-shortcuts ).
I can see how a context menu may provide an additional useful way to invoke the "add bookmark" command, but as explained above, there is currently no API in the "navigator" component to expose this kind of service.

[vkiranmaniya]

@danielweck Yeh your answer makes sense, I also figured that out because the context menu item doesn't appear over the reader view only. My use case is when user selects text and right clicks, I want to provide add to bookmark action in context menu.

[vkiranmaniya]

Will the readium.js support that hook in the near future? I'm heavily relying upon that.

[danielweck]

There are no concrete plans, I am afraid. We have several other high development priorities at the moment, and only a small engineering team with finite time.
The open-source r2-navigator-js component contains code that displays the debug (“inspect element”) pop up context menu, perhaps you could take a look there, and figure out how to add an IPC event to communicate Thorium’s reader BrowserWindow (i.e. IPC messaging between the web view process of the publication HTML document, and the Electron renderer process of the main BowserWindow)

[vkiranmaniya]

Thanks for the hint. It helps a lot.

[panaC]

thorium-reader/src/renderer/reader/components/Reader.tsx

Line 827 in 233283e

await apiAction("reader/addBookmark", this.props.pubId, locator, name);

thorium-reader/src/renderer/common/redux/api/api.ts

Lines 19 to 29 in 321c18b

	export function apiDispatch(dispatch: Dispatch) {
	return (requestId: string = uuidv4()) =>
	<T extends TApiMethodName>(apiPath: T) => {
	const splitPath = apiPath.split("/");
	const moduleId = splitPath[0] as TModuleApi;
	const methodId = splitPath[1] as TMethodApi;
	return (...requestData: Parameters<TApiMethod[T]>) =>
	dispatch(apiActions.request.build(requestId, moduleId, methodId, requestData));
	};
	}

put this on the click function : apiDispatch(store.dispatch)()("reader/addBookmark")(pubId, locator, name)

[panaC]

to access to the reader reduxState follow the 'session' key in the main reduxState.

thorium-reader/src/main/redux/reducers/win/session/reader.ts

Line 83 in 233283e

case winActions.session.setReduxState.ID: {

[danielweck]

Moving this to a developer discussion