I could not find any examples on how to customize the context menu plugin

[pokecheater]

Description

Hi there, again :)

Sadly I was not able to find how to customize the context menu plugin with a custom template in your examples. The tutorial only shows on how to add custom elements. As a current workaround I did some css tweaks in my editor.vue file.

  <style>
    .node-editor-container .menu > div:first-child:not(.context-menu-item) {
      display: none;
    }


    .node-editor-container .menu > div {
      background: rgba(255, 255, 255, 0.25);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10.4px);
      -webkit-backdrop-filter: blur(10.4px);
      border: 2px solid rgba(255, 255, 255, 1);   
      border-radius: 10px !important;
    } 

    .node-editor-container .menu > div:hover {
      background: rgba(255, 255, 255, 0.5) !important;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid rgba(255, 255, 255, 1);    }
  </style>

But I would like to know how could I fine tune the contextmenu.

Thx in advance

Suggested Solution

Please provide an example in your docs.

Code of Conduct

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

[pokecheater]

Maybe you can add a example in your customizations section:
https://retejs.org/examples/customization/vue

or inside the context-menu example section.

https://retejs.org/examples/context-menu

Thx