Samelogic Logo
BlogPodcastCompaniesPricing

Slash Commands in TipTap Editor

Slash commands `/` is a powerful way to show many more powerful extensions inside the editor. We will explore adding that behavior on the samelogic platform.
Shawn Mclean

Overview

Project: Samelogic (will link programmatically later)

We would like to trigger a drop-down of commands in the Tiptap editor. Similar to hashnode and substack.

Our commands will be highly specific to our workflows, and we will build as we need them.

Our first command will be to introduce a graphviz editor/viewer.

Audience

The primary user of this feature is me as a software architect and product manager.

Goal

Set a framework in place for building custom slash command extensions.

Story

  1. User types / in the editor and will be presented with a custom react list item.

  2. User can navigate the list item and press enter.

  3. This will fire any behavior for that extension, such as showing a popup to collect more info or connecting accounts.

Resources

https://codesandbox.io/s/e3j3u?file=/src/suggestion/CommandsList.js

https://tiptap.dev/guide/menus#slash-commands