search

TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
6.65k stars 457 forks source link

Can I set the default "center" alignment for image captions? #1098

Open lamtuanamc opened 1 month ago

lamtuanamc commented 1 month ago

When inserting an image block, I want to set the caption text alignment to "center" by default.

In the previous version of BlockNote (0.14.x), I was able to do this with the following code:

defaultBlockSpecs.image.config.propSchema.textAlignment = {
  default: 'center',
  values: ['left', 'center', 'right', 'justify'],
};

However, in newest version, I can't seem to set it this way anymore, as the default value is now 'left', and it's no longer a string type.

matthewlipski commented 1 month ago

This should work:

editor.schema.blockSchema.image.propSchema.textAlignment.default =
    "center" as any;
  editor.schema.blockSpecs.image.config.propSchema.textAlignment.default =
    "center" as any;

Also make sure to add this CSS:

.bn-block-content[data-content-type="image"]:not([data-text-alignment]) {
  justify-content: center;
  text-align: center;
}
Racionalistas commented 4 weeks ago

doesnt work with editor.blocksToHTMLLossy