Page MenuHomePhabricator
Files F3345746

D4999.id16392.diff
No OneTemporary
Actions

D4999.id16392.diff
View Options

diff --git a/web/chat/text-message.react.js b/web/chat/text-message.react.js
--- a/web/chat/text-message.react.js
+++ b/web/chat/text-message.react.js
@@ -73,7 +73,13 @@
canReply={canReply}
>
<div className={messageClassName} style={messageStyle}>
- <Markdown rules={rules}>{text}</Markdown>
+ <Markdown
+ threadColor={props.threadInfo.color}
+ rules={rules}
+ isViewer={isViewer}
+ >
+ {text}
+ </Markdown>
</div>
</ComposedMessage>
);
diff --git a/web/markdown/markdown.css b/web/markdown/markdown.css
--- a/web/markdown/markdown.css
+++ b/web/markdown/markdown.css
@@ -11,20 +11,13 @@
display: inline;
}
-div.markdown blockquote {
+div.blockquote {
display: inline-block;
padding: 0.5em 10px;
box-sizing: border-box;
width: 100%;
margin: 6px 0;
-}
-div.darkBackground blockquote {
- background: #a9a9a9;
- border-left: 5px solid #808080;
-}
-div.lightBackground blockquote {
- background: #d3d3d3;
- border-left: 5px solid #c0c0c0;
+ border-radius: 8px;
}
div.markdown code {
diff --git a/web/markdown/markdown.react.js b/web/markdown/markdown.react.js
--- a/web/markdown/markdown.react.js
+++ b/web/markdown/markdown.react.js
@@ -3,6 +3,7 @@
import classNames from 'classnames';
import * as React from 'react';
import * as SimpleMarkdown from 'simple-markdown';
+import tinycolor from 'tinycolor2';
import css from './markdown.css';
import type { MarkdownRules } from './rules.react';
@@ -10,19 +11,19 @@
type Props = {
+children: string,
+rules: MarkdownRules,
+ +threadColor?: string,
+ +isViewer?: boolean,
};
function Markdown(props: Props): React.Node {
- const { children, rules } = props;
- const { simpleMarkdownRules, useDarkStyle } = rules;
+ const { children, rules, threadColor, isViewer } = props;
+ const { simpleMarkdownRules } = rules;
const markdownClassName = React.useMemo(
() =>
classNames({
[css.markdown]: true,
- [css.darkBackground]: useDarkStyle,
- [css.lightBackground]: !useDarkStyle,
}),
- [useDarkStyle],
+ [],
);
const parser = React.useMemo(
@@ -38,7 +39,15 @@
() => SimpleMarkdown.outputFor(simpleMarkdownRules, 'react'),
[simpleMarkdownRules],
);
- const renderedOutput = React.useMemo(() => output(ast), [ast, output]);
+ const renderedOutput = React.useMemo(
+ () =>
+ output(ast, {
+ color: isViewer
+ ? tinycolor(threadColor).darken(20).toString()
+ : `#${String(threadColor)}`,
+ }),
+ [ast, output, threadColor, isViewer],
+ );
return <div className={markdownClassName}>{renderedOutput}</div>;
}
diff --git a/web/markdown/rules.react.js b/web/markdown/rules.react.js
--- a/web/markdown/rules.react.js
+++ b/web/markdown/rules.react.js
@@ -9,6 +9,7 @@
import type { RelativeMemberInfo } from 'lib/types/thread-types';
import { useSelector } from '../redux/redux-utils';
+import css from './markdown.css';
export type MarkdownRules = {
+simpleMarkdownRules: SharedMarkdown.ParserRules,
@@ -89,6 +90,22 @@
content: parse(content, state),
};
},
+ // eslint-disable-next-line react/display-name
+ react: (
+ node: SharedMarkdown.SingleASTNode,
+ output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
+ state: SharedMarkdown.State,
+ ) => {
+ return (
+ <div
+ key={state.key}
+ className={css.blockquote}
+ style={{ backgroundColor: state.color }}
+ >
+ {output(node.content, state)}
+ </div>
+ );
+ },
},
inlineCode: SimpleMarkdown.defaultRules.inlineCode,
em: SimpleMarkdown.defaultRules.em,

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 23, 6:49 AM (18 h, 22 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2569513
Default Alt Text
D4999.id16392.diff (3 KB)

Event Timeline