CKEditor Slash (/) contextual command line interface powered by AI Assistant

Created on 29 July 2024, 9 months ago

Problem/Motivation

I'm just posting this to get feedback, my CKEditor API skills at this point are not good enough to create an implementation plan and develop it but I hope more people are excited to collaborate on this and take the CKEditor AI module to the next level.

I consider this feature a great low hanging fruit thanks to LLM's HTML capabilities. I imagine the CKEditor 5 Slash commands premium plugin was a large amount of work to develop, with all these custom plugins for individual elements. With LLM we get all those elements and more out of the box.

The current selectbox implementation is useful but it is not the most efficient UI. Using commands in a text editor is already becoming an accepted UI pattern, for example it is used in:

  • Gutenberg editor
  • Notion
  • Type.ai
  • Coda
  • Slack, IRC, I guess these chat apps are the origin of the concept

Last but not least, it is a great win for accessibility of the module. I think the current implementation is not great for keyboard-only users, and they will surely love this addition.

Proposed resolution

Having slash commands as a secondary interface option that leverages the existing plugin system.

Some example commands:

Summon Elements

  • /bullet list > Empty UL
  • /number list > Empty OL
  • /table > Empty 4x4 table
  • /h2 > H2 header

etc.

Generate Content

  • /continue > Writes a paragraph in context, i.e. continuation of the document flow
  • /write caption > Writes a caption for the image above, based on alt and title attributes
  • /pricing table > Generates some sort of pricing table we can edit
  • /conclusion > Writes a conclusion based on context
  • /faq > Writes FAQ section based on context
  • /CTA > Writes call to action segment and button based on context

Interact with Drupal

  • /link homepage > Creates a (text) link to the homepage
  • /link about us page > Creates a (text) link to the about page
  • /embed view > Embeds a Drupal view based on view name
  • /link contact page > Creates a (text) link to the contact page
  • /user profile > Links to a user profile based on username
  • /taxonomy link > Links to a taxonomy term page based on term ID
  • /embed block > Embeds a block from Drupal based on block ID

Remaining tasks

1. Create the command, we can see how the CKEditor premium plugin manages this and then develop our own connection to the AI ecosystem.
2. The Drupal integration part is going to be complex, that's not low-hanging fruit and needs more refined user stories and implementation plans.

User interface changes

Addition of command interface to the editor

API changes

An additional layer to expose commands that auto-complete. Like typing /link might summon a plugin that autocompletes internal linking commands.

Data model changes

Feature request
Status

Active

Version

1.0

Component

User interface

Created by

🇳🇱Netherlands jurriaanroelofs

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024