Slash commands

[YousefED]

Idea, a pluggable shortcut modal similar to:

Notion:

Atlaskit:

(https://atlaskit.atlassian.com/packages/editor/editor-core/example/kitchen-sink)

If you test those editors, you'll notice some smart logic on when the modal disappears and when it keeps filtering after typing.

Curious what your thoughts are / where you'd start implementing

[YousefED]

I'm implementing this based on the Mention plugin - seems like a good starting point!

[davevilela]

Hey, any breakthroughs on this feature?

[oyeanuj]

@YousefED @davevilela Did any of you figure this out? Curious as I'm looking to do the same..

[davevilela]

Hey @oyeanuj
I just implemented a dead simple Combobox and used the Mention plugin to capture the trigger and the user input to suggest commands.
Then i created a list of available commands as such:

export const TEXT_EDITOR_COMMANDS: TComboboxItem<CommandItemProps>[] = [
  {
    key: 'bullist',
    text: 'Bulleted list',
    data: { icon: BiListUl, value: 'bullist' },
  },
  {
    key: 'mention',
    text: 'Mention person',
    data: { icon: BiAt, value: 'mention' },
  },
  {
    key: 'check',
    text: 'Checklist',
    data: { icon: BiCheckboxChecked, value: 'check' },
  },
  {
    key: 'cod',
    text: 'Code block',
    data: { icon: BiCodeAlt, value: 'cod' },
  },
  {
    key: 'hyp',
    text: 'Hyperlink',
    data: { icon: BiLinkAlt, value: 'hyp' },
  },
];

and a simple handler for when the user selects the command on the combobox\

example:

export const handleSelectCommand: ComboboxOnSelectItem<Data> = (
  editor,
  item
): void => {
  const targetRange = comboboxStore.get.targetRange();

  if (!targetRange) return;

  Transforms.removeNodes(editor as Editor, {
    // TODO: replace any
    match: (node: any) => node.type === ELEMENT_MENTION_INPUT,
  });
  clearBlockFormat(editor as any);
  switch (item.key) {
    case 'mention':
      editor.insertText('@');
      break;
    case 'check':
      toggleNodeType(editor, { activeType: ELEMENT_TODO_LI });

      break;
    case 'cod':
      toggleNodeType(editor, { activeType: ELEMENT_CODE_BLOCK });
    default:
      break;
  }
};

this is still a work in progress. feel free to improve it and share your discoveries :D

[nikrokss]

@davevilela Can I see how you fully implemented such menshens? I've only been working with Plate for a few days and it's still hard for me to figure it out

[reinvanimschoot]

Any updates on this?

[willopez]

@zbeyens In my opinion this feature is a foundational component of providing a first class UX, is there a roadmap anywhere to determine importance/timeline of this kind of features?

[dylans]

The mentions feature is what we use in our product (Living Spec) to prove a subset of slash commands, and it's probably how we would implement a similar feature.

imo, the actual part that plate would need to provide is pretty much what mentions provide today. The real work is coming up with your own preferred way of connecting mentions or command syntax to actions within your app.

[mmailaender]

IMHO, it would be still nice to have a Slash command plugin, that provides basic blocks out of the box (Like the first screenshot at the top). Ideally customizable in a way as you mention. @dylans

[trancethehuman]

Feature is badly needed. +1

[dalebaldwin]

We are working on one over at Calctree that we are thinking we can open source back into the Plate codebase. It's based on the mention plugin and using the command box component from ShadCN.

[trancethehuman]

Would love to see it and I'll contribute to it if you open-source it

[jiaweing]

We need this +1

[abhi-bc]

I feel this can be solved by allowing users to add multiple mention plugins, using different triggers. They can then modify MentionInputElement and MentionElement, which is allowed even now, to create unique experiences. See #2997

[dima-mamaev]

Hi guys! Could anyone share working custom solution ? As mentioned previously feature is badly needed.

[trancethehuman]

Having a slash command (or left-side plus button next to a node) would make it very intuitive for users who are already familiar with Notion to add new block types. Currently they'd have to click the top bar button, which takes a bit to learn.

[dalebaldwin]

I've got a working one I'm looking at contributing back. Probably the biggest issue I have yet to solve is around the inconsistent handling of various elements and how they get added to the editor. I'm not sure it's quite as simple as people thing as there is still a lot of custom work and rules needed for various elements that make it difficult to extend.

[felixfeng33]

could try

[felixfeng33]

Could you to open a PR? I will try to fixes it.

[trancethehuman]

I'll chip in as well @dalebaldwin

[natamox]

me too @dalebaldwin

[trancethehuman]

[felixfeng33]

I have add the usages of slash commands but I don't have time perfect it. #3155

[trancethehuman]

@felixfeng33 just merged slash command: #3165

LFGGG 🔥

[Lawndlwd]

Thanks, that is great, Is there any doc about how to use it ?

[zbeyens]

Not yet but you can start from the example code, it's quite simple

[trancethehuman]

@Lawndlwd check out the PR I linked here. I just followed it and it worked well.

[HOJOON07]

I'm sorry, but no matter how much I look at the PR, I can't find the usage instructions. Where is the sample code?

[christojeffrey]

I know it's been months but hope this helps you @HOJOON07 and everyone else who ended up here. here's the npm package

import {
	SlashInputPlugin,
	SlashPlugin,
} from '@udecode/plate-slash-command/react';

import {
	SlashInputElement
} from './plate-ui/slash-input-element';

const editor = createPlateEditor({
	plugins: [
		// ...
		SlashPlugin,
		SlashInputPlugin,
		// ...
	]
	override: {
		components: withDraggables(
			withPlaceholders({
				[SlashInputPlugin.key]: SlashInputElement,
			}))
	}
});

[trancethehuman]

It'd be great to add a plus button next to the drag-n-drop handle that opens the same combobox as the slash command @felixfeng33

[zbeyens]

A lot, almost a complete rework. Getting the plugins more powerful, better typing and DX. I'll try to write a complete migration guide.

[trancethehuman]

Scary haha. Looking forward to this and the template. When we launch, will give Plate a huge shout on LinkedIn and X. Are you on LI? @zbeyens

[trancethehuman]

How are things fellas? Would love to try your template and migrate to the new version

[zbeyens]

Releasing this month!

[felixfeng33]

Plugins is ready writting docs