arnog / mathlive

A web component for easy math input
https://cortexjs.io/mathlive
MIT License
1.56k stars 277 forks source link

Disable menu button #2180

Closed AllyMarthaJ closed 10 months ago

AllyMarthaJ commented 10 months ago

Description

We use mathlive in an inline context (embedded within another text editor). The menu button is convenient, but we already have something similar in the menu of the parent editor; is there a way to hide it, and allow the user to use the context menu + parent editor instead?

...I could just grab a reference to the div and delete it, but that seems fragile...

Steps to Reproduce

Create a mathfield by any means (even visiting the demo site) - observe there is no property for disabling the menu button.

Actual Behavior

There is no property for disabling the menu button.

Expected Behavior

Like the keyboard button, there should be a property for toggling the menu button.

Environment

Is this a regression: did it use to work in a previous version?

MathLive version If using the cortexjs.io site, the version is displayed at the bottom of the page. If using the library, the version is available as MathfieldElement.version 0.97.0

I believe the code is L323 of mathfield-private.ts, where the keyboard has an option above.

Operating System macOS, Windows, iOS. Include the version

Browser Safari, Chrome, Edge, Firefox, etc... Try several browsers and note if there are differences between browsers. macOS, Chrome 119.0.6045.123

AllyMarthaJ commented 10 months ago

P.S. This context menu is game-changing. Thank you so much!!! πŸ’–πŸ’–πŸ’–πŸ’–πŸ’–πŸ’–πŸ’–πŸ’–

arnog commented 10 months ago

You can hide the menu toggle with:

math-field::part(menu-toggle) {
    display: none;
}

and you can set the menu to be empty with

mf.menuItems = [];

The later is needed since the menu would otherwise still be accessible by right-clicking.

Let me know if this works for you. Depending on how you intercept the context menu, this may still "hide" your editor menu, though.

arnog commented 10 months ago

OK, after looking into this some more, setting mf.menuItems = [] would not have been sufficient: the context menu would not be displayed, but the right click would have been intercepted.

I have checked in a fix. Now, setting mf.menuItems = [] will turn off the menu item. it will also automatically hide the menu toggle button, so you don't have to tweak the CSS.

arnog commented 10 months ago

This fix is now available in MathLive 0.97.1 Also, the documentation has been updated: https://cortexjs.io/mathlive/guides/menus/#controling-the-visibility-ot-the-menu

AllyMarthaJ commented 10 months ago

Thanks a bunch!