TextContent: handle linebreaks before feeding parsing
Handling linebreaks outside of the parser allows us to preserve
linebreaks, which goes against the markdown spec and is poorly
supported by the parser library.
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import ReactMarkdown from 'react-markdown';
import RemarkDisableTokenizers from 'remark-disable-tokenizers';
-import RemarkBreaks from 'remark-breaks';
import urbitOb from 'urbit-ob';
import { Text } from '@tlon/indigo-react';
@@ -48,14 +47,27 @@ const renderers = {
}
};
-const MessageMarkdown = React.memo(props => (
+const MessageMarkdown = React.memo(props => {
+ const { source, ...rest } = props;
+ const blockCode = source.split('```');
+ const codeLines = blockCode.map(codes => codes.split("\n"));
+ const lines = codeLines.reduce((acc, val, i) => {
+ if((i % 2) === 1) {
+ return [...acc, `\`\`\`${val.join('\n')}\`\`\``];
+ } else {
+ return [...acc, ...val];
+ }
+ }, []);
+
+
+ return lines.map((line, i) => (
+ <>
+ { i !== 0 && <br />}
<ReactMarkdown
- {...props}
+ {...rest}
+ source={line}
unwrapDisallowed={true}
renderers={renderers}
- // shim until we uncover why RemarkBreaks and
- // RemarkDisableTokenizers can't be loaded simultaneously
- disallowedTypes={['heading', 'list', 'listItem', 'link']}
allowNode={(node, index, parent) => {
if (
node.type === 'blockquote'
@@ -70,8 +82,14 @@ const MessageMarkdown = React.memo(props => (
return true;
}}
- plugins={[RemarkBreaks]} />
-));
+ plugins={[[RemarkDisableTokenizers, {
+ block: DISABLED_BLOCK_TOKENS,
+ inline: DISABLED_INLINE_TOKENS
+ }]]}
+ />
+ </>
+ ))
+});
export default class TextContent extends Component {
