Column Layout Request

[jiawei686]

Is your feature request related to a problem? Please describe. We think Blocknote is amazing and about to use blocknote to build some part of project. Is it possible for us to add a column layout in blocknote.

[matthewlipski]

Hmm, depending on how you want the columns to work this can be either very easy or very difficult.

If you just want each block to be displayed as e.g. 2 columns, you can just do this:

const editor = useBlockNote({
    domAttributes: {
      blockContent: {
        style: "columns: 2",
      },
    },
  });

Instead of style you can add a CSS class, and use different selectors to only apply the column styling to the blocks you want (e.g. paragraphs).

Alternatively, you can create a custom block (see https://www.blocknotejs.org/docs/block-types#custom-block-types) which has the column styling baked in.

If you want the whole editor to have columns, meaning blocks can be side-by-side, I don't think that's possible atm since it will likely break things like drag and drop.

[jiawei686]

Our product needs notion-like column layout, which means I have to implement side-by-side blocks. This is blowing my mind. I'm figuring out is it possible to implement this by using custom blocks.

[charanjit-singh]

@jiawei686 did you manage to implement it?

[rakesh-eltropy]

@jiawei686 did you manage to implement it? @YousefED Any plan to add this in the core editor?

[YousefED]

Thanks for showing your interest! Unfortunately, this will be quite a significant feature to add and at the moment, it's not a high prio issue for ourselves. We'd love to add it eventually, but it would require either some community members to pick this up or a dedicated sponsor / bounties to be able to allocate time for this.

To implement this properly, we probably need to revisit the core architecture of the block schema (how to we store columns?) and some core concepts such as dragging / dropping blocks.