3

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).

enter image description here

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).

parliament
  • 21,544
  • 38
  • 148
  • 238
  • Like this? https://www.npmjs.com/package/ionic-context-menu – Hagai Wild Jan 27 '19 at 17:26
  • No. This, like the other solution, seems to be what I prefer to call a "dropdown menu" not a "context menu". The code seems broken so I couldnt test it, but just from the example, it's clear that the intended use is in the header bar like a dropdown menu, not the native menu I'm referring to. – parliament Jan 27 '19 at 17:38

1 Answers1

2

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 Modified Context Menu

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

kishorekumaru
  • 1,500
  • 2
  • 19
  • 33
  • 1
    Thanks, this is the solution I was looking for. I have another open bounty for a diff Ionic question if you care to give it another go https://stackoverflow.com/questions/54897455/ionic-4-instagram-like-force-touch-popup-modal – parliament Mar 05 '19 at 01:20