Customize styling of context menu

[Keksparade]

Hi,

is it possible to customize the style of the context menu (e.g. width, background)? What is the proper way to do it?

Thanks for the amazing library and support!

[Ni55aN]

There is no ability to change CSS styles (except an !important :smile: ) as its components have scoped styles.

I'll try to add the ability to customize its Vue.js components

[Keksparade]

That would really be awesome. Thanks!

[Ni55aN]

Since v0.3.4 you can define custom Vue.js Menu component.

Example (without single file components):

editor.use(ContextMenuPlugin, {
 vueComponent: {
            template: `<div class="context-menu"
            ref="menu" 
            v-if="visible"
            v-bind:style="style"
            @mouseleave="timeoutHide()" @mouseover="cancelHide()" @contextmenu.prevent="">
            <Item v-for="item in filtered" :key="item.title" :item="item" :args="args" :delay="delay / 2"></Item>
            </div>`,
            extends: { ...ContextMenuPlugin.Menu, _scopeId: null, render: null },
            components: {
                Item: {
                    name: 'Item',
                    template: `<div class="item"
                        @click="onClick($event)"
                        @mouseover="showSubitems()"
                        @mouseleave="timeoutHide()"
                        :class="{ hasSubitems }"
                        > {{item.title}}
                        <div class="subitems" v-show="hasSubitems && this.visibleSubitems">
                            <Item v-for="subitem in item.subitems"
                            :key="subitem.title"
                            :item="subitem"
                            :args="args"
                            :delay="delay"
                            ></Item>
                        </div>
                    </div>`,
                    extends: { ...ContextMenuPlugin.Item, _scopeId: null,  render: null }
                }
            }
        }
});

        .context-menu {
            left: 0;
            top: 0;
            position: fixed;
            padding: 10px;
            width: 140px;
            margin-top: -20px;
            margin-left: -60px;
        }

        .context-menu .item, .context-menu .subitem {
            color: #fff;
            padding: 4px;
            border-bottom: 1px solid grey;
            background-color: grey;
            cursor: pointer;
            width: 100%;
            position: relative;
        }

        .context-menu .search {
            background: red;
        }

        .context-menu .item.hasSubitems:after {
            content: '►';
            position: absolute;
            opacity: 0.6;
            right: 5px;
            top: 5px;
        }
        .context-menu .item .subitems {
            position: absolute;
            top: 0;
            left: 100%;
            width: 120px;
        }

Using single-file components you need to extend the standard components imported from the plugin.

import { Menu, Item, Search } from 'rete-context-menu-plugin';

[Githamza]

No way to include angular components ? like Angular Material library

[Ni55aN]

@Githamza no, it is not provided by this plugin. I think you should use a different context menu solution.

[haris-75]

Is it possible to do Custom styling for React Component when using context-menu-plugin in react ?