Align blocks in addition to text

[YaoKaiLun]

Description

Align texts and images at same time, only texts can be aligned.

Recording

Sandbox

https://slate-plugins.udecode.io/docs/playground

Steps

To reproduce the behavior:

1. Select some texts and images (end with image)
2. Click align in toolbar

Expectation

texts and images should all be aligned.

[YaoKaiLun]

Finally, we solved this problem by appending a empty text after image before aligning.

[zbeyens]

Great! A general solution to align blocks is to use flex justify

[davevilela]

hey @YaoKaiLun could you provide an example? I'm trying to solve this issue as well. Thanks in advance !

[zbeyens]

Use overrideProps plugin field to override the props, including style, of any node

[davevilela]

can someone provide me with an example? ):

[YaoKaiLun]

can someone provide me with an example? ):

I am not use plate but slate, my method like this:

const getNodeLastChildFragment = (node, parentNode) => {
  if (node.children) {
    const childLen = node.children.length
    parentNode = getNodeLastChildFragment(node.children[childLen - 1], node)
  }
  return parentNode
};

export const handleAlign = (editor, type) => {
  const selection = editor.selection;
  const node = Node.fragment(editor, selection);
  const nodeLength = node.length;
  const end = Range.end(selection)
  const lastChild = getNodeLastChildFragment(node[nodeLength - 1], node)
  const lastChildrenLen = lastChild.children?.length

  if (lastChild.children[lastChildrenLen - 1]?.text === '' && lastChild.children[lastChildrenLen - 2]?.type === 'image') {
    Transforms.insertText(editor, ' ', { at: end.path })
  }

  Transforms.setNodes(editor, {
    align: type,
  });
};