How to use the '/' command like notion to get a dropdown menu?

[akshatg5]

have figure out almost everything that I require for my project except for the / dropdown thing, can someone please guide me for doing this. Thankyou so much for the time, tried searching for this in docs but not able to find it, if you can redirect me to docs then that'll be great and if someone has already done it then can you please help me. Thnakyou for giving the time!

import React, { useEffect, useRef, useState } from "react";
// import EditorJS, { OutputData } from "@editorjs/editorjs";
// // @ts-ignore
// import Header from "@editorjs/header";
// // @ts-ignore
// import List from "@editorjs/list";
// // @ts-ignore
// import Table from "@editorjs/table";
// // @ts-ignore
// import Checklist from "@editorjs/checklist";
// // @ts-ignore
// import Quote from "@editorjs/quote";
import axios from "axios";
import { withProps } from "@udecode/cn";
import {
createPlugins,
Plate,
RenderAfterEditable,
PlateLeaf,
} from "@udecode/plate-common";
import {
createParagraphPlugin,
ELEMENT_PARAGRAPH,
} from "@udecode/plate-paragraph";
import {
createHeadingPlugin,
ELEMENT_H1,
ELEMENT_H2,
ELEMENT_H3,
ELEMENT_H4,
} from "@udecode/plate-heading";
import {
createBlockquotePlugin,
ELEMENT_BLOCKQUOTE,
} from "@udecode/plate-block-quote";
import {
createCodeBlockPlugin,
ELEMENT_CODE_BLOCK,
ELEMENT_CODE_LINE,
ELEMENT_CODE_SYNTAX,
} from "@udecode/plate-code-block";
import { createLinkPlugin, ELEMENT_LINK } from "@udecode/plate-link";
import {
createImagePlugin,
ELEMENT_IMAGE,
createMediaEmbedPlugin,
ELEMENT_MEDIA_EMBED,
} from "@udecode/plate-media";
import { createCaptionPlugin } from "@udecode/plate-caption";
import {
createMentionPlugin,
ELEMENT_MENTION,
ELEMENT_MENTION_INPUT,
} from "@udecode/plate-mention";
import { createTodoListPlugin, ELEMENT_TODO_LI } from "@udecode/plate-list";
import {
createBoldPlugin,
MARK_BOLD,
createItalicPlugin,
MARK_ITALIC,
createUnderlinePlugin,
MARK_UNDERLINE,
createStrikethroughPlugin,
MARK_STRIKETHROUGH,
createCodePlugin,
MARK_CODE,
createSubscriptPlugin,
MARK_SUBSCRIPT,
createSuperscriptPlugin,
MARK_SUPERSCRIPT,
} from "@udecode/plate-basic-marks";
import {
createFontColorPlugin,
createFontBackgroundColorPlugin,
createFontSizePlugin,
} from "@udecode/plate-font";
import {
createHighlightPlugin,
MARK_HIGHLIGHT,
} from "@udecode/plate-highlight";
import { createKbdPlugin, MARK_KBD } from "@udecode/plate-kbd";
import { createAlignPlugin } from "@udecode/plate-alignment";
import { createIndentPlugin } from "@udecode/plate-indent";
import { createIndentListPlugin } from "@udecode/plate-indent-list";
import { createLineHeightPlugin } from "@udecode/plate-line-height";
import { createAutoformatPlugin } from "@udecode/plate-autoformat";
import { createBlockSelectionPlugin } from "@udecode/plate-selection";
import { createEmojiPlugin } from "@udecode/plate-emoji";
import {
createExitBreakPlugin,
createSoftBreakPlugin,
} from "@udecode/plate-break";
import { createNodeIdPlugin } from "@udecode/plate-node-id";
import { createResetNodePlugin } from "@udecode/plate-reset-node";
import { createDeletePlugin } from "@udecode/plate-select";
import { createTabbablePlugin } from "@udecode/plate-tabbable";
import { createTrailingBlockPlugin } from "@udecode/plate-trailing-block";
import { createDeserializeMdPlugin } from "@udecode/plate-serializer-md";
//@ts-ignore
import { BlockquoteElement } from "components/plate-ui/blockquote-element";
//@ts-ignore
import { CodeBlockElement } from "components/plate-ui/code-block-element";
//@ts-ignore
import { CodeLineElement } from "components/plate-ui/code-line-element";
//@ts-ignore
import { CodeSyntaxLeaf } from "components/plate-ui/code-syntax-leaf";
//@ts-ignore
import { ImageElement } from "components/plate-ui/image-element";
//@ts-ignore
import { LinkElement } from "components/plate-ui/link-element";
//@ts-ignore
import { LinkFloatingToolbar } from "components/plate-ui/link-floating-toolbar";
//@ts-ignore
import { HeadingElement } from "components/plate-ui/heading-element";
//@ts-ignore
import { MediaEmbedElement } from "components/plate-ui/media-embed-element";
//@ts-ignore
import { MentionElement } from "components/plate-ui/mention-element";
//@ts-ignore
import { MentionInputElement } from "components/plate-ui/mention-input-element";
//@ts-ignore
import { ParagraphElement } from "components/plate-ui/paragraph-element";
//@ts-ignore
import { TodoListElement } from "components/plate-ui/todo-list-element";
//@ts-ignore
import { CodeLeaf } from "components/plate-ui/code-leaf";
//@ts-ignore
import { HighlightLeaf } from "components/plate-ui/highlight-leaf";
//@ts-ignore
import { KbdLeaf } from "components/plate-ui/kbd-leaf";
//@ts-ignore
import { Editor } from "components/plate-ui/editor";
//@ts-ignore
import { FixedToolbar } from "components/plate-ui/fixed-toolbar";
//@ts-ignore
import { FixedToolbarButtons } from "components/plate-ui/fixed-toolbar-buttons";
//@ts-ignore
import { FloatingToolbar } from "components/plate-ui/floating-toolbar";
//@ts-ignore
import { FloatingToolbarButtons } from "components/plate-ui/floating-toolbar-buttons";
//@ts-ignore
import { withPlaceholders } from "components/plate-ui/placeholder";
//@ts-ignore
import { EmojiInputElement } from "components/plate-ui/emoji-input-element";

const plugins = createPlugins(
[
createParagraphPlugin(),
createHeadingPlugin(),
createBlockquotePlugin(),
createCodeBlockPlugin(),
createLinkPlugin({
renderAfterEditable: LinkFloatingToolbar as RenderAfterEditable,
}),
createImagePlugin(),
createMediaEmbedPlugin(),
createCaptionPlugin({
options: {
pluginKeys: [
// ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED
],
},
}),
createMentionPlugin(),
createTodoListPlugin(),
createBoldPlugin(),
createItalicPlugin(),
createUnderlinePlugin(),
createStrikethroughPlugin(),
createCodePlugin(),
createSubscriptPlugin(),
createSuperscriptPlugin(),
createFontColorPlugin(),
createFontBackgroundColorPlugin(),
createFontSizePlugin(),
createHighlightPlugin(),
createKbdPlugin(),
createAlignPlugin({
inject: {
props: {
validTypes: [
ELEMENT_PARAGRAPH,
// ELEMENT_H1, ELEMENT_H2, ELEMENT_H3
],
},
},
}),
createIndentPlugin({
inject: {
props: {
validTypes: [
ELEMENT_PARAGRAPH,
// ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_BLOCKQUOTE, ELEMENT_CODE_BLOCK
],
},
},
}),
createIndentListPlugin({
inject: {
props: {
validTypes: [
ELEMENT_PARAGRAPH,
// ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_BLOCKQUOTE, ELEMENT_CODE_BLOCK
],
},
},
}),
createLineHeightPlugin({
inject: {
props: {
defaultNodeValue: 1.5,
validNodeValues: [1, 1.2, 1.5, 2, 3],
validTypes: [
ELEMENT_PARAGRAPH,
// ELEMENT_H1, ELEMENT_H2, ELEMENT_H3
],
},
},
}),
createAutoformatPlugin({
options: {
rules: [
// Usage: https://platejs.org/docs/autoformat
],
enableUndoOnDelete: true,
},
}),
createBlockSelectionPlugin({
options: {
sizes: {
top: 0,
bottom: 0,
},
},
}),
createEmojiPlugin(),
createExitBreakPlugin({
options: {
rules: [
{
hotkey: "mod+enter",
},
{
hotkey: "mod+shift+enter",
before: true,
},
{
hotkey: "enter",
query: {
start: true,
end: true,
// allow: KEYS_HEADING,
},
relative: true,
level: 1,
},
],
},
}),
createNodeIdPlugin(),
createResetNodePlugin({
options: {
rules: [
// Usage: https://platejs.org/docs/reset-node
],
},
}),
createDeletePlugin(),
createSoftBreakPlugin({
options: {
rules: [
{ hotkey: "shift+enter" },
{
hotkey: "enter",
query: {
allow: [
// ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_TD
],
},
},
],
},
}),
createTabbablePlugin(),
createTrailingBlockPlugin({
options: { type: ELEMENT_PARAGRAPH },
}),
createDeserializeMdPlugin(),
],
{
components: withPlaceholders({
[ELEMENT_BLOCKQUOTE]: BlockquoteElement,
[ELEMENT_CODE_BLOCK]: CodeBlockElement,
[ELEMENT_CODE_LINE]: CodeLineElement,
[ELEMENT_CODE_SYNTAX]: CodeSyntaxLeaf,
[ELEMENT_IMAGE]: ImageElement,
[ELEMENT_LINK]: LinkElement,
[ELEMENT_H1]: withProps(HeadingElement, { variant: "h1" }),
[ELEMENT_H2]: withProps(HeadingElement, { variant: "h2" }),
[ELEMENT_H3]: withProps(HeadingElement, { variant: "h3" }),
[ELEMENT_H4]: withProps(HeadingElement, { variant: "h4" }),
[ELEMENT_MEDIA_EMBED]: MediaEmbedElement,
[ELEMENT_MENTION]: MentionElement,
[ELEMENT_MENTION_INPUT]: MentionInputElement,
[ELEMENT_PARAGRAPH]: ParagraphElement,
[ELEMENT_TODO_LI]: TodoListElement,
[MARK_BOLD]: withProps(PlateLeaf, { as: "strong" }),
[MARK_CODE]: CodeLeaf,
[MARK_HIGHLIGHT]: HighlightLeaf,
[MARK_ITALIC]: withProps(PlateLeaf, { as: "em" }),
[MARK_KBD]: KbdLeaf,
[MARK_STRIKETHROUGH]: withProps(PlateLeaf, { as: "s" }),
[MARK_SUBSCRIPT]: withProps(PlateLeaf, { as: "sub" }),
[MARK_SUPERSCRIPT]: withProps(PlateLeaf, { as: "sup" }),
[MARK_UNDERLINE]: withProps(PlateLeaf, { as: "u" }),
}),
}
);

const initialValue = [
{
id: "1",
type: "p",
children: [{ text: "Hello, World!" }],
},
];

const TextEditor: React.FC = () => {
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [grade, setGrade] = useState<number | null>(null);
const [section, setSection] = useState("");
const [collegeSemester, setCollegeSemester] = useState<number | null>(null);
const [subject, setSubject] = useState("");
const [isPublic, setIsPublic] = useState(false);

return (

    <FloatingToolbar>
      <FloatingToolbarButtons />
    </FloatingToolbar>
  </Plate>
    <input
      type="text"
      placeholder="Title"
      required
      value={title}
      onChange={(e) => setTitle(e.target.value)}
      className="w-full px-3 py-2 border my-2 border-gray-300 rounded-md focus:outline-none focus:border-indigo-800"
    />
     
    <textarea
      placeholder="Description"
      value={description}
      required
      onChange={(e) => setDescription(e.target.value)}
      className="w-full px-3 py-2 border my-2 border-gray-300 rounded-md focus:outline-none focus:border-indigo-800"
    />
           
    <input
      type="number"
      max={12}
      required
      placeholder="Grade"
      value={grade || ""}
      onChange={(e) => setGrade(Number(e.target.value))}
      className="w-full px-3 py-2 border my-2 border-gray-300 rounded-md focus:outline-none focus:border-indigo-800"
    />
           
    <input
      type="text"
      placeholder="Section"
      value={section}
      onChange={(e) => setSection(e.target.value)}
      className="w-full px-3 py-2 border my-2 border-gray-300 rounded-md focus:outline-none focus:border-indigo-800"
    />
           
    <input
      type="number"
      placeholder="College Semester"
      max={8}
      value={collegeSemester || ""}
      onChange={(e) => setCollegeSemester(Number(e.target.value))}
      className="w-full px-3 py-2 border my-2 border-gray-300 rounded-md focus:outline-none focus:border-indigo-800"
    />
           
    <input
      type="text"
      placeholder="Subject"
      value={subject}
      onChange={(e) => setSubject(e.target.value)}
      className="w-full px-3 py-2 border my-2 border-gray-300 rounded-md focus:outline-none focus:border-indigo-800"
    />
           
    <label className="px-2 py-2">
                Is public?          
      <input
        type="checkbox"
        checked={isPublic}
        onChange={(e) => setIsPublic(e.target.checked)}
      />
             
    </label>
         
  </div>
       {" "}
  
       
  <button
    // onClick={handleSave}
    className="mt-4 p-2 bg-blue-500 text-white items-center align-middle justify-center"
  >
    Save Content
  </button>
     
</div>

);
};

export default TextEditor;

[sewellstephens]

Hi, heres the code that worked for me:

slash-element.tsx:

import React from 'react';

import { cn, withRef } from '@udecode/cn';
import { PlateElement, getHandler } from '@udecode/plate-common';
import { useFocused, useSelected } from 'slate-react';

export const SlashInputElement = withRef<
  typeof PlateElement,
  {
    onClick?: (slashNode: any) => void;
  }
>(({ className, onClick, ...props }, ref) => {
  const { children, element } = props;

  const selected = useSelected();
  const focused = useFocused();

  return (
    <PlateElement
    asChild
      className={cn(
        'inline-block rounded-md px-1.5 py-0.5 align-baseline text-sm',
        selected && focused && 'ring-2 ring-ring',
        className
      )}
      data-slate-value={element.value}
      onClick={getHandler(onClick, element)}
      ref={ref}
      {...props}
    > 
      <span>/{children}</span>
    </PlateElement>
  );
});

slash-combobox.tsx

import React from 'react';

import type { ComboboxProps } from '@udecode/plate-combobox';

import { getPluginOptions, useEditorRef } from '@udecode/plate-common';
import {
  KEY_SLASH_COMMAND,
  type SlashPlugin,
  getSlashOnSelectItem,
} from '@udecode/plate-slash-command';

import { Combobox } from './combobox';

export function SlashCombobox({
  pluginKey = KEY_SLASH_COMMAND,
  id = pluginKey,
  ...props
}: {
  pluginKey?: string;
} & Partial<ComboboxProps>) {
  const editor = useEditorRef();

  const { trigger } = getPluginOptions<SlashPlugin>(editor, pluginKey);

  return (
    <div onMouseDown={(e) => e.preventDefault()}>
      <Combobox
        controlled
        id={id}
        onSelectItem={getSlashOnSelectItem({
          key: pluginKey,
        })}
        trigger={trigger!}
        {...props}
      />
    </div>
  );
}

lib/slash-commands.tsx:

import type { SlashRule } from '@udecode/plate-slash-command';

import { type PlateEditor, toggleNodeType } from '@udecode/plate-core';
import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading';
import { ELEMENT_LINK } from '@udecode/plate-link';
import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
import { ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED } from '@udecode/plate-media';
import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';
import { ELEMENT_CODE_BLOCK } from '@udecode/plate-code-block';
import { toolbarToggle } from '../custom-plugins/ai/toggleToolbar';
import {
  ELEMENT_TABLE,
  deleteColumn,
  deleteRow,
  deleteTable,
  insertTable,
  insertTableColumn,
  insertTableRow,
} from '@udecode/plate-table';

import { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';
import { focusEditor } from '@udecode/slate-react';

export const SLASH_RULES: SlashRule[] = [
  {
    key: 'AI',
    onTrigger(editor: PlateEditor) {
      toolbarToggle(false);
      focusEditor(editor);
    },
    text: 'Ask AI',
  },
  {
    key: ELEMENT_H1,
    onTrigger(editor: PlateEditor) {
      toggleNodeType(editor, { activeType: ELEMENT_H1 });
      focusEditor(editor);
    },
    text: 'Heading 1',
  },
  {
    key: ELEMENT_H2,
    onTrigger(editor: PlateEditor) {
      toggleNodeType(editor, { activeType: ELEMENT_H2 });
      focusEditor(editor);
    },
    text: 'Heading 2',
  },
  {
    key: ELEMENT_H3,
    onTrigger(editor: PlateEditor) {
      toggleNodeType(editor, { activeType: ELEMENT_H3 });
      focusEditor(editor);
    },
    text: 'Heading 3',
  },
  {
    key: ListStyleType.Disc,
    onTrigger(editor: PlateEditor) {
      toggleIndentList(editor, {
        listStyleType: ListStyleType.Disc,
      });
      focusEditor(editor);
    },
    text: 'Bulleted list',
  },
  {
    key: ListStyleType.Decimal,
    onTrigger(editor: PlateEditor) {
      toggleIndentList(editor, {
        listStyleType: ListStyleType.Decimal,
      });
      focusEditor(editor);
    },
    text: 'Numbered list',
  },
  {
    key: ELEMENT_PARAGRAPH,
    onTrigger(editor: PlateEditor) {
      toggleNodeType(editor, { activeType: ELEMENT_PARAGRAPH });
      focusEditor(editor);
    },
    text: 'Paragraph',
  },
  {
    key: ELEMENT_BLOCKQUOTE,
    onTrigger(editor: PlateEditor) {
      toggleNodeType(editor, { activeType: ELEMENT_BLOCKQUOTE });
      focusEditor(editor);
    },
    text: 'Blockquote',
  },
  {
    key: ELEMENT_CODE_BLOCK,
    onTrigger(editor: PlateEditor) {
      toggleNodeType(editor, { activeType: ELEMENT_CODE_BLOCK });
      focusEditor(editor);
    },
    text: 'Code block',
  },
  {
    key: ELEMENT_TABLE,
    onTrigger(editor: PlateEditor) {
      toggleNodeType(editor, { activeType: ELEMENT_TABLE });
      insertTable(editor);
      focusEditor(editor);
    },
    text: 'Table',
  },
  {
    key: ELEMENT_LINK,
    onTrigger(editor: PlateEditor) {
      toggleNodeType(editor, { activeType: ELEMENT_LINK });
      focusEditor(editor);
    },
    text: 'Link',
  },
  {
    key: ELEMENT_IMAGE,
    onTrigger(editor: PlateEditor) {
      toggleNodeType(editor, { activeType: ELEMENT_IMAGE });
      focusEditor(editor);
    },
    text: 'Image',
  },
  {
    key: ELEMENT_MEDIA_EMBED,
    onTrigger(editor: PlateEditor) {
      toggleNodeType(editor, { activeType: ELEMENT_MEDIA_EMBED });
      focusEditor(editor);
    },
    text: 'Embed',
  }
];

Mine combobox has additional options including a custom AI plugin I created for PlateJS for a SaaS im developing called https://krastie.ai. If you are interested in AI plugin, feel free to comment me back.

[remusris]

Can you share your code for

import { Combobox } from './combobox';

in the

slash-combobox.tsx?

[remusris]

I found a fix, peep the comment below

#3306 (reply in thread)

[sewellstephens]

sorry about that, one of the maintainers just told me this is old code. i dont currently seem to have a solution with new updates combobox, but heres what it look like for those interested:

[sewellstephens]

but it seems you found a solution which is what matter