:sparkles: Editor API for AI Text Suggestion

[simon-lund]

I would like to implment a feature similar to Github Copilot for text editing. That is, the AI can make text suggestions at the current cursor position, which can then be added via press on "Tab".

I have looked through the docs and I could do this with insertInlineContent and use "gray" as text color. This, however, inserts the text into the block immediately. So, if the user doesn't want it there, I wold have to remove the text somehow.

Instead it would be nice to have a insertDiscardableContent function, which displays text at the current text but does not add it to the block right away. It could have a callback function, where the develeoper can implement listeners and what not.

This could look something like this (Written with GPT):

/**
 * Inserts a text suggestion at the current cursor position in the editor.
 * This text is not permanently added to the document and can be accepted or discarded by the user.
 * 
 * @param suggestion The text suggestion to be displayed.
 * @param callback A callback function that handles the user's decision to accept or discard the suggestion.
 */
function insertDiscardableContent(suggestion, callback) {
  // Implementation details for displaying the suggestion go here.
  // This could involve manipulating the DOM to visually present the suggestion near the cursor.

  // Example callback usage
  callback(submit, discard);
}

// Usage
insertDiscardableContent("Here's a suggestion for your text.", (submit, discard) => {
  // Implement listeners for user actions.
  // "submit" and "discard" are functions that can be called to finalize the user's choice.

  // Example: If the user presses "Enter", call submit().
  document.addEventListener('keydown', (event) => {
    if (event.key === "Enter") {
      submit(); // This would finalize the insertion of the suggestion.
    } else if (event.key === "Escape") {
      discard(); // This would remove the suggestion without altering the text.
    }
  });
});

Originally posted by @simon-lund in https://github.com/TypeCellOS/BlockNote/issues/122#issuecomment-1999572089

[YousefED]

Hi @simon-lund !

I think the ideal implementation of this would not rely on InlineContent. Imo, the suggested text should not really be added to the document, but it should only show up in the UX. For this, I think the right implementation would be a combination of Prosemirror decorations and CSS styles. That makes it a bit more low-level at this moment unfortunately

We'll probably look into it in the future, but you're welcome to give it a go as well of course

[pritishmishra703]

Hello @YousefED,

It would be really helpful if BlockNote has in-built "Tab-Accept Feature". I am facing issues while implementing it ourselves.

[shouryan01]

I'd really like to see this too!

[brrock]

Hi it would be good to use a / command to do this as like notion ai the user can choose if they like out put