React renderer doesn't handle arabic right to left in tables

[yulius-take2]

When the React renderer draws a table, it doesn't draw the table right to left properly based on the content.

Example can be seen at the bottom of the page.
https://www.take2games.com/data-request/ar

[yulius-take2]

Here's the workaround. The css to handle this should really be in the renderer I think.

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import { css } from '@emotion/core';

const cssRichTextMarkdown = css`
  :dir(rtl) {
    th,
    td {
      text-align: right;
      direction: rtl;
    }
  }
`;

function ReactRichText({richText}) {
  return <div css={cssRichTextMarkdown}>{documentToReactComponents(richText)}</div>;
}