Introduction

Over the past few years, we've been heavily focused on ProseMirror, releasing a variety of open-source plugins . With the rising popularity of Meta's Lexical, we've received a wave of interest for Lexical-based projects. To test the waters, we ported our popular slash-menu-plugin from ProseMirror to Lexical. We picked this plugin because it's already production tested with three clients and closely resembles Notion's slash menu. We're still loyal to ProseMirror but are excited about the potential of expanding into more Lexical projects.

The plugin is a port of following two ProseMirror plugins:

• prosemirror-slash-menu
• prosemirror-slash-menu-react

Features

• Notion like slash menu
• Custom options and commands
• Submenus
• Custom rules for opening the slash menu
• Control the slash menu with keyboard or mouse
• Extendable styling and placement options using floating-ui
• Icons
• Options filtering

How it works

Installation

npm i @emergence-engineering/lexical-slash-menu-plugin

Usage

Use the SlashMenuPlugin component as any other lexical plugins.

1  import { SlashMenuPlugin } from "@emergence-engineering/lexical-slash-menu-plugin";
2  import "@emergence-engineering/lexical-slash-menu-plugin/dist/styles/style.css";
3
4  export const Editor = () => {
5    return (
6      <LexicalComposer initialConfig={initialConfig}>
7            <SlashMenuPlugin
8              clickable
9              menuElements={[
10                {
11                  id: "1",
12                  label: "First",
13                  type: "command",
14                  command: (editor: LexicalEditor) => {
15                    editor.update(() => {
16                      insertText("First");
17                    });
18                  },
19                },
20                {
21                  id: "2",
22                  label: "Second",
23                  type: "command",
24                  command: (editor: LexicalEditor) => {
25                    editor.update(() => {
26                      insertText("Second");
27                    });
28                  },
29                },
30                {
31                  id: "3",
32                  label: "Submenu",
33                  type: "submenu",
34                  elements: [
35                    {
36                      id: "4",
37                      label: "Third",
38                      type: "command",
39                      command: (editor: LexicalEditor) => {
40                        editor.update(() => {
41                          insertText("Third");
42                        });
43                      },
44                    },
45                    {
46                      id: "5",
47                      label: "Fourth",
48                      type: "command",
49                      command: (editor: LexicalEditor) => {
50                        editor.update(() => {
51                          insertText("Fourth");
52                        });
53                      },
54                    },
55                  ],
56                },
57              ]}
58            />
59      </LexicalComposer>
60    )
61}

More detailed documentation can be found on the GitHub page

…and the product which you can try below:

The plugin requires only one parameter

• menuElements - an array of MenuElements - which describes the menu's structure and commands.

How to customize the look and feel

You can target any specific element inside Take a look at our default the slash manu CSS classes. Take a look at our default CSS file , feel free to copy it or override any classes.

That's it!

If you have any questions or want to leave feedback, please feel free to contact us!

You can check out the code and find some more info about the usability at https://github.com/emergence-engineering/lexical-slash-menu-plugin