Dynamically Update Placeholder

[RivaanRanawat]

How can i dynamically update the placeholder to reflect different things (I'm using Next and Blocknote with mantine library)?
What I want to do is in every 10 seconds, change the placeholder being shown. I tried doing the following but it had no effect:
editor.dictionary.placeholders.default = 'New Value'

In createBlockNote, I had put the following too:

 dictionary: {
      ...locale,
      placeholders: {
        ...locale.placeholders,
        default: selectedPage
          ? selectedPage!.init_questions[questionIndex]
          : "Enter text or type '/' for commands",
      },
    },

It didn't work but when I saved the file by changing something else in the file, the placeholder does update so the issue is probably with the re-render. How can i force re-render on the blocknote?

[sb8244]

I am tagging onto this as a bug with the placeholders. Here is my code:

    dictionary: {
      ...locales.en,
      placeholders: {
        ...locales.en.placeholders,
        default: placeholder || locales.en.placeholders.default
      }
    }

This does work for me, but it seems to be a global dictionary. So if all of the editors on the page have the same placeholder, then it will reflect correctly. Otherwise, the most recently initialized editor will overwrite the placeholder value.

So I don't think it's possible to have conditional dictionary entries?

[sb8244]

I see now, it's a stylesheet

BlockNote/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts

Line 65 in 4a168cb

`${getSelector(blockType, true)} { content: ${JSON.stringify(

I think you'd need to have static CSS with a wrapper class to update the placeholder. (using !important)

So the solution is like this for me:

.bn-placeholder--mentions
  .bn-block-content[data-is-empty-and-focused]
  .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
  content: "Enter text or type @ to mention others" !important;
}

Then I put .bn-placeholder--mentions on the wrapping element

[YousefED]

@sb8244 this (multiple editors and placeholders) will be addressed in #1376

As for dynamically updating, you should be able to add a deps array to useCreateBlockNote to reinitialize the editor with different placeholders

[sb8244]

Oooo very cool. Thanks @YousefED!

I'm still loving BlockNote! 😎