Yoopta-Editor icon indicating copy to clipboard operation
Yoopta-Editor copied to clipboard

[Example Request]: Toggle Action Menu programmatically

Open niraj-khatiwada opened this issue 9 months ago • 0 comments

What's the example?

Is there a way to programmatically open the action menu? My requirement is when user presses the "Enter" key on a new block and if the block is empty, I need to prompt user to select the block type for which I need to trigger the action menu. I figured out the keyboarding handling part but couldn't figure out how to open action menu programmatically. I also tried setting the block content to "/" hoping that it'll trigger the menu via shortcut but doesn't seem to work. Thanks for the awesome library.

import { PluginEvents } from '@yoopta/editor/dist/plugins/types'

export const events: Partial<PluginEvents> = {
  onKeyDown: (editor, _, options) => {
    return evt => {
      // Block entering new line when text is empty and trigger the action list.
      if (options.hotkeys.isEnter(evt)) {
        if (
          'children' in options?.currentBlock?.value?.[0] &&
          'text' in options?.currentBlock?.value?.[0]?.children?.[0]
        ) {
          const text = options?.currentBlock?.value?.[0]?.children?.[0]?.text as string
          if (text?.length === 0) {
            evt.preventDefault()
            // TODO: Need to trigger the action menu.
          }
        }
      }
    }
  },
}

Code of Conduct

  • [x] I agree to follow this project's Code of Conduct

niraj-khatiwada avatar Feb 06 '25 10:02 niraj-khatiwada