Default placeholder changing problem

[gkhngyk]

Hello,

I don't use the slash menu, but in the placeholder of each block it says Enter text or type '/' for commands. I couldn't change this placeholder no matter what I did.

Is there any way to change it?

[nacho-villanueva]

A hacky way to change the placeholder is like this:

import styles from "./editor.module.css"

 const editor: BlockNoteEditor = useBlockNote({
        domAttributes: {
            blockContent: { class: styles.myBlockContent },
            inlineContent: { class: styles.myInlineContent }
        }
    });

editor.module.css

/* You can replace the data-content-type="heading" to "paragraph" or which ever block type you want to change the placeholder of.*/
.my-block-content[data-content-type="heading"] .my-inline-content:before {
    content: "Custom Placeholder" !important;
}

I don't think there is another way to change it right now.

[nacho-villanueva]

Nevermind. Doesn't work. You need to access the internal css classes.

[matthewlipski]

Yep this is a problem indeed, planning to get rid of CSS modules so that external style sheets can have access to those classes which should at least make it possible to change them.

[achrefBoukhili]

@gkhngyk there is a draft PR for this https://github.com/TypeCellOS/BlockNote/pull/188 but no plan yet to introduce it

[hncheung9]

I would like to fix my placeholder too. When using editor with short width, the default placeholder take 2 rows and will block the content of the next noteblock. In the last noteblock, placeholder would extend out of the editor area. Although it will not affect usability, any customisation would be appreciated!

[dogfootruler-kr]

I managed to change the default placeholder by adding a data attribute to the inline-content then setting the content of the before to the value of this data attribute like this:

const editor: BlockNoteEditor = useBlockNote({
    domAttributes: {
      inlineContent: {
        "data-placeholder": "This is my new placeholder"
      }
    },
});

and adding this to my global.css file:

.bn-editor .bn-block-content[data-content-type=paragraph].bn-is-empty .bn-inline-content::before {
  content: attr(data-placeholder);
}