javascript - Draft.js でテキストを揃える方法

Question

下の図のように、Draft.jsでテキストを揃える方法を考えています。

これを数日間検索しましたが、解決策が見つかりませんでした。

Answer 1

ソースコードを読んだ後、その方法を見つけました。を使用するblockRenderMapと、次のようなカスタム ブロック タイプを追加できます。

const blockRenderMap: Record<string, DraftBlockRenderConfig> = {
'header-one-right': {
    element: 'h1',
    wrapper: <StyleHOC style={{ ...blockStylesMap['header-one'], display: 'flex', justifyContent: 'flex-end' }} />,
  },
  'header-two-right': {
    element: 'h2',
    wrapper: <StyleHOC style={{ ...blockStylesMap['header-two'], display: 'flex', justifyContent: 'flex-end' }} />,
  },
  'header-three-right': {
    element: 'h3',
    wrapper: <StyleHOC style={{ ...blockStylesMap['header-three'], display: 'flex', justifyContent: 'flex-end' }} />,
  },
  'unstyled-right': {
    element: 'div',
    wrapper: <StyleHOC style={{ ...blockStylesMap['unstyled'], display: 'flex', justifyContent: 'flex-end' }} />,
  },
};

flex内部の style をオーバーライドするための away を見つけるのに時間を浪費するのを避けるために使用します.public-DraftStyleDefault-ltr。

StyleHOC は非常に単純です。

const StyleHOC: React.FC<Props> = ({ style, children }) => {
  const childrenWithStyle = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { style });
    }
    return child;
  });
  
  return <>{childrenWithStyle}</>;
};

そして、blockType使用を切り替えることができますRichUtils.toggleBlockType(editorState, blockType)。

Answer 2

ほぼ同じものを作ってみました。しかし、私の問題は、ブロックスパンに正しく設定されていた text-align プロパティにありましたが、それに.public-DraftStyleDefault-ltr反応しません。

したがって、最初の div 子を取得し、そのパラメーターをコピーする次の決定を下しました。

const paragraphs: any = document.querySelectorAll(".public-DraftStyleDefault-ltr");

for (let i = 0; i < paragraphs.length; i++) {
    const paragraph = paragraphs.item(i);
    if (paragraph) {
        const firstItem = paragraph.querySelectorAll('*').item(0);
        // Apply to the parent the first child style
        paragraph.style.textAlign = firstItem.style.textAlign;
    }
}