Placeholder for custom block types

[sunillarsson]

I've tried using custom placeholders for custom block types without any luck. Is it possible at this point of time?

[YousefED]

I haven't tried this myself, but you could experiment with adding your blocktype to the dictionary.placeholders (https://github.com/TypeCellOS/BlockNote/blob/bea361e39846c26d9729a777a5cd3de1f48e8c3e/packages/core/src/i18n/locales/en.ts#L108). Also see https://www.blocknotejs.org/examples/basic/localization

Let me know how this goes!

[GersonDantas]

I added the blocks to the dictionary and it didn't work

//.. Imports and types

export const useCustomEditorConfig = ({ editorOptions, }: Props): CustomBlockNoteEditor => {
  // ... My code

  if (editorOptions) {
    const { pt } = locales
    const customLocalePt: Dictionary = {
      ...pt,
      placeholders: {
        ...pt.placeholders,
        default: "Digite ’/’ para criar blocos ou '@' para mencionar perguntas e respostas",
        'labeled-multi-question': 'Digite sua pergunta.',
        'labeled-single-question': 'Digite sua pergunta.',
        'labeled-number-question': 'Digite sua pergunta.',
        'multi-option-block': 'Insira sua resposta.',
        'single-option-block': 'Insira sua resposta.',
        'labeled-short-question': 'Digite sua pergunta.',
        'single-question': 'Digite sua pergunta.',
        'multi-question': 'Digite sua pergunta.',
        'short-question': 'Digite sua pergunta.',
        'number-question': 'Digite sua pergunta.',
      } as CustomPlaceholders & Dictionary['placeholders']
    }

    const customEditorOptions: Partial<BlockNoteEditorOptions<CustomBlockSchema, InlineContentSchema, StyleSchema>> =
      Object.assign({}, editorOptions, {
        schema,
        dictionary: customLocalePt,
        initialContent: blocksToFormBuilder?.length ? blocksToFormBuilder : [{ type: 'page', content: 'Nova página' }, { type: 'paragraph' }],
        extensions: [
          History.configure({
            depth: 5,
          })
        ],
      })
    const editor = useCreateBlockNote(customEditorOptions, [editorOptions])

    useAdaptedDragFunctions(editor)
    
    return editor
  }

  return null
}

So I solved it by using the global.scss file to configure content for each custom type, but I think using javascript would be better. The global.scss file:

.node-labeled-single-question {
  &[data-is-empty-and-focused] {
    .bn-block-content {
      div {
        margin: 0;
        padding: 0;
        font-size: inherit;
        min-width: 2px !important;

        &:has(> .ProseMirror-trailingBreak) {
          &::before {
            pointer-events: none;
            height: 0;
            position: absolute;
            font-style: italic;
            color: var(--bn-colors-side-menu);
            text-align: left;
            caret-color: auto;
          }
        }
      }

      &[data-content-type=labeled-single-question] {
        .input-label > div {
          &:has(> .ProseMirror-trailingBreak) {
            &::before {
              content: "Digite sua pergunta.";
            }
          }
        }
      }
    }
  }
}

This way it is working perfectly, like in blockNote, but when you have updates on this, it would be great

[GersonDantas]

I turned the styling into a mixin so it would be reusable. I put it in a _mixins.scss file:

@mixin customPlaceholder($placeholder, $typesToApply) {
  @each $type in $typesToApply {
    .node-#{$type} {
      &[data-is-empty-and-focused] {
        .bn-block-content[data-content-type=#{$type}] {
          div[data-node-view-content-react] {
            margin: 0;
            padding: 0;
            font-size: inherit;
            min-width: 2px !important;

            &:has(> .ProseMirror-trailingBreak) {
              &::before {
                pointer-events: none;
                height: 0;
                position: absolute;
                font-style: italic;
                color: var(--bn-colors-side-menu);
                text-align: left;
                caret-color: auto;
                content: $placeholder;
              }
            }
          }
        }
      }
    }
  }
}

then I import it into the global.scss file:

@use './_mixins.scss' as mixins;

@include mixins.customPlaceholder($placeholder: 'Digite sua pergunta.',
  $typesToApply: (labeled-single-question, labeled-multi-question, labeled-number-question, labeled-short-question));

@include mixins.customPlaceholder($placeholder: 'Insira sua resposta.',
  $typesToApply: (single-option-block, multi-option-block, short-option-block, number-option-block));

https://github.com/user-attachments/assets/24ec4a4e-0d56-49c2-a81e-e50fd85cf893