Possible to customize the placeholder text?

[steven-tey]

Incredible work on BlockNote, Yousef!

For Platforms Starter Kit 2.0, I'm planning to integrate OpenAI text completions to the text editor.

Therefore, I was wondering if there's any way we can customize the placeholder text in BlockNote? My idea is to have a debounced callback to OpenAI's ChatGPT API to do text completions in the style of a placeholder text 😄

LMK what you think! I'm happy to contribute to the source code as well if this feature is not available yet!

[YousefED]

Thanks @steven-tey! Happily running BlockNote on Vercel ❤️

Making it easy to build AI powered text editors is an important part of our vision. So your use-case fits right in, would be excited to work on this.

I'll see how easy we can expose placeholders and keep you posted.

Thinking along; to make this work with ok performance, it'd be best to fetch multiple completions from the API at the same time, right? So that when the user types something slightly different than the "main suggestion", there's still a chance we can show a different suggestion without having to wait for a new API call. I think this is how Codex suggestions work for example.

We'd also need to figure out at what level we want to expose the API; e.g. low-level block.setPlaceholderText, a bit higher level block.setSuggestions() or callback-style editor.registerSuggestionProvider(). I'll give this some thought as well

[steven-tey]

Thanks for responding Yousef! I'm currently blocked by #132 so I'll get back to your questions above once I figure that out! 😄

[steven-tey]

@YousefED Update on this – I tried building this out in TipTap but it didn't seem like the most logical move from a UX standpoint 😅 I'm planning to just rely on Slash commands / Formatting toolbar to integrate AI features so I'm closing this for now! (feel free to reopen it if you think it's appropriate though)

[YousefED]

@YousefED Update on this – I tried building this out in TipTap but it didn't seem like the most logical move from a UX standpoint 😅 I'm planning to just rely on Slash commands / Formatting toolbar to integrate AI features so I'm closing this for now! (feel free to reopen it if you think it's appropriate though)

@steven-tey could you tell me more about this? What's not ideal from UX perspective? I think allowing for something like Codex in VS Code would be pretty interesting - so was still planning to put this on the roadmap. Would be nice to hear your learnings so we can reconsider!

[simon-lund]

@YousefED Hello, I'm trying to do a similar thing. However, I don't think it is a good idea to utilize placeholder for this.

I'd like to have something like Github Copilot, where the AI suggests texts to the editor at the current position. I have looked through the docs and I could do this with insertInlineContent and use "gray" as text color.

However, this immediately insert the text into the block. So, if the user doesn't want it there, I wold have to remove the text somehow. So 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.
    }
  });
});

[YousefED]

@simon-lund makes sense, maybe we should open a separate issue for this - and maybe we can use that to brainstorm further requirements for an AI enabled editor there?