prosemirror-suggestcat-plugin

Made by Emergence-Engineering

Basic UI for prosemirror-suggestcat-plugin in React.

Features

• A slash menu to select and filter commands, implemented with prosemirror-slash-menu-react
• A button over selection to open the menu
• An overlay to show/cancel/reject suggestions

How to use?

• Import SlashMenuPlugin from prosemirror-slash-menu
• Import ProsemirrorSuggestcatPluginReact and promptCommands from prosemirror-suggestcat-plugin-react
• Add SlashMenuPlugin to your editor with promptCommands
• Create dom reference
• Add component next to your editor div

import { SlashMenuPlugin } from "prosemirror-slash-menu";
import {
  promptCommands,
  ProsemirrorSuggestcatPluginReact,
  slashOpeningCondition,
} from "prosemirror-suggestcat-plugin-react";

const Editor: FC = () => {
  // Needed for re-renders on every tr.
  const [editorState, setEditorState] = useState<EditorState>();
  const [editorView, setEditorView] = useState<EditorView>();
  const editorRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const state = EditorState.create({
      doc: schema.nodeFromJSON(initialDoc),
      plugins: [
        SlashMenuPlugin(promptCommands, undefined, slashOpeningCondition, true),
      ],
    });
    const view = new EditorView(document.querySelector("#editor"), {
      state,
      dispatchTransaction: (tr) => {
        try {
          const newState = view.state.apply(tr);
          view.updateState(newState);
          setEditorState(newState);
        } catch (e) {}
      },
    });
    setEditorView(view);
    setEditorState(view.state);
    return () => {
      view.destroy();
    };
  }, [editorRef]);

  const slashMenuPopperRef = useMemo(() => {
    if (!editorView || !editorView?.state) {
      return;
    }

    const currentNode = editorView.domAtPos(
      editorView.state.selection.to,
    )?.node;

    if (!currentNode) {
      return;
    }

    if (currentNode instanceof Text) {
      return currentNode.parentElement;
    }

    return currentNode instanceof HTMLElement ? currentNode : undefined;
  }, [editorView?.state?.selection, window.scrollY]);

  return (
    <Root>
      <StyledEditor id="editor" ref={editorRef} />
      {editorView && editorView?.state && slashMenuPopperRef && (
        <ProsemirrorSuggestcatPluginReact
          editorView={editorView}
          editorState={editorView?.state}
          domReference={slashMenuPopperRef}
        />
      )}
    </Root>
  );
};

Props

• domReference This is a Popper referenceObject under which the menu and suggestion overlay will appear. In our example it's under the selected paragraph.
• editorView prosemirror EditorView
• editorState prosemirror EditorState

Styles

• Import the styles from the package

import "prosemirror-suggestcat-plugin-react/dist/styles/styles.css";

UI behaviour

Navigation is intuitive with keyboard using arrows, Tab, Enter, Esc etc. and also with clicks. The prompt menu is using prosemirror-slash-menu-react, the exact behaviour is detailed in the Readme.

Customization

This package is not made with customization as a priority, it's intended to be a quick and easy way to use Suggestcat. With that in mind, with providing your own popper reference object and replacing our CSS classes, it is fairly simple to modify it to blend more into your app. You could also pass your own commands into SlashMenuPlugin to replace or delete the icons, change the labels. However, keep in mind that the actual command function needs to be the same to properly work together with prosemirror-suggestcat-plugin