Ionic 4 - Customize context menu

Question

I'm building an Ionic app that has heavy text editing, and I would like to customize the context menu that appears when making a text selection (shown below).

How can I add buttons to this menu? Can it be customized even further? Is it possible to switch this menu out entirely for some custom HTML menu else that appears when the user makes a text selection?

I've seen the plugin cordova-plugin-context-menu but it does not seem to be what I need (although it's hard to say because it doesn't have any screenshots and I'm not sure if it's the same "context menu" that I'm talking about).

Answer 1

There is a solution available on Angular from Ben Nadel (kudos to his solution https://www.bennadel.com/blog/3439-creating-a-medium-inspired-text-selection-directive-in-angular-5-2-10.htm), this works only on tags not on Input elements (https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange) , To work this on Ionic > V4 do the following tweaks,

Step 1: In general when we create directive using ionic cli it pushes ref to app.module.ts, In case if you are using directive on a different page, remove the directive from app.module.ts and include on your component.module.ts

Step 2:

On text-select.directive.ts replace mousedown with touchend and mouseup with touchstart events.

You are done here is the screenshot

UPDATE

Unfortunately this text selection works on tags but not on the Input elements, check https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange Browser compatibility Section