prosemirror-slash-menu-react

Made by Emergence-Engineering

A UI package used together with prosemirror-slash-menu to display the menu with react.

By Horváth Áron & Viktor Váczi at Emergence Engineering

Try it out at https://emergence-engineering.com/blog/prosemirror-slash-menu

Features

• Displaying prosemirror-slash-menu with react
• Menu positioning at the cursor position
• Displaying the menu upwards in case of overflow
• Default styling
• Custom styling with css classnames
• Optional popper reference element, placement and offset
• Outside click handling

Behavior

You can open the menu with the / key in an empty paragraph or after a space and you can filter the elements just by typing, or you can navigate with the keyboard. For exact behaviour description checkout prosemirror-slash-menu.

Installation and Usage

Install from npm with:

npm install prosemirror-slash-menu-react

Usage in the app:

1import React, { useEffect, useRef, useState } from "react";
2import { exampleSetup } from "prosemirror-example-setup";
3import { EditorState } from "prosemirror-state";
4import { EditorView } from "prosemirror-view";
5import schema from "./schema";
6import { SlashMenuPlugin } from "prosemirror-slash-menu";
7import {
8  defaultElements,
9  defaultIcons,
10  Icons,
11  SlashMenuReact,
12} from "prosemirror-slash-menu-react";
13
14const ProseMirrorSlashMenuDemo = () => {
15  const [pmState, setPmState] = useState<EditorState>();
16  const [editorView, setEditorView] = useState<EditorView>();
17  const editorRef = useRef<HTMLDivElement>(null);
18  useEffect(() => {
19    if (!editorRef.current) return;
20    const state = EditorState.create({
21      doc: schema.nodeFromJSON({
22        content: [
23          {
24            content: [
25              {
26                text: "Type '/' after a space to open the menu. ",
27                type: "text",
28              },
29            ],
30            type: "paragraph",
31          },
32        ],
33        type: "doc",
34      }),
35      plugins: [
36        SlashMenuPlugin(defaultElements),
37        ...exampleSetup({
38          schema,
39        }),
40      ],
41    });
42    const view: EditorView = new EditorView(editorRef.current, {
43      state,
44      dispatchTransaction: (tr) => {
45        try {
46          const newState = view.state.apply(tr);
47          view.updateState(newState);
48          setPmState(newState);
49        } catch (e) {}
50      },
51    });
52    setEditorView(view);
53    return () => {
54      view && view.destroy();
55    };
56  }, [editorRef]);
57  return (
58    <>
59      <div ref={editorRef} id="editor" />
60      {pmState && editorView && (
61        <SlashMenuReact
62          icons={{
63            [Icons.HeaderMenu]: defaultIcons.H1Icon,
64            [Icons.Level1]: defaultIcons.H1Icon,
65            [Icons.Level2]: defaultIcons.H2Icon,
66            [Icons.Level3]: defaultIcons.H3Icon,
67            [Icons.Bold]: defaultIcons.BoldIcon,
68            [Icons.Italic]: defaultIcons.ItalicIcon,
69            [Icons.Code]: defaultIcons.CodeIcon,
70            [Icons.Link]: defaultIcons.LinkIcon,
71          }}
72          editorState={pmState}
73          editorView={editorView}
74        />
75      )}
76    </>
77  );
78};

Styling

To use the basic styling you can import menu-style.css into your project. If you want to use your own styling you can override the following classnames.

• menu-display-root root div for the menu
• menu-element-wrapper root of menu elements
• menu-element-wrapper-clickable root of menu elements when the menu items are set to be clickable
• menu-element-selected classname that is added alongside menu-element-wrapper when an element is selected
• menu-element-icon if icon is provided for the element it's rendered in this div
• menu-element-right-icon if right icon is provided its rendered in this div
• menu-element-label label of the menu element
• menu-placeholder when there is no matching items for the filter, this is displayed with the text "No matching items"
• menu-filter-wrapper root of the filter display, positioned above the menu by default
• menu-filter the filter text
• menu-filter-placeholder placeholder text for the filter field
• menu-filter-icon if icon is provided for the filter field it's rendered in this div
• submenu-label The label of the submenu is shown above the menu elements when its opened
• group-wrapper wrapper around the menu elements, if there are multiple groups of elements
• group-label label/title of the group

Props

• editorState prosemirrors editor state
• editorView prosemirror editor view
• icons Optional, if you want to provide icons for your menu elements. Type of {[key: string]: FC} where the key is the id of the menu element and the value is a FunctionComponent that renders the icon
• rightIcons Same as icons but these appear on the right on the menu element, most commonly used for indicating a submenu with an arrow
• subMenuIcon Optional icon for submenu label. By default, when a submenu is open an arrow is displayed indicating that the user is in a subMenu, it can be replaced with a react node of your choice
• filterFieldIcon Optional icon in the filter field.
• filterPlaceHolder Optional placeholder text for the filter field.
• mainMenuLabel Optional label for the main menu. By default, there is none.
• popperReference Optional popper reference HTMLElement, for displaying the menu next to whatever element you want
• popperOptions You can pass in placement and offset to position your menu around the reference Element
• clickable Optional boolean, if true the menu items are clickable, by default they are used only with keyboard