Compare commits

...

5 Commits

Author SHA1 Message Date
Harrison Healey
4a5da8d625 Switch to Commonmark fork 2022-05-06 11:14:57 -04:00
Elias Nahum
70d5cb068c Render markdown checkbox 2022-05-06 10:46:28 -04:00
Harrison Healey
c6af59b388 Add initial task list support 2022-05-06 10:44:48 -04:00
Harrison Healey
97cdac1d40 Remove fonts from highlighted text so that it can be bolded 2022-05-06 10:42:17 -04:00
Harrison Healey
b9376ad429 Initial attempt at search highlighting for Markdown 2022-05-06 10:42:15 -04:00
9 changed files with 238 additions and 85 deletions

View File

@@ -6,10 +6,11 @@ import Renderer from 'commonmark-react-renderer';
import React, {ReactElement, useRef} from 'react';
import {Dimensions, GestureResponderEvent, Platform, StyleProp, Text, TextStyle, View} from 'react-native';
import CompassIcon from '@components/compass_icon';
import Emoji from '@components/emoji';
import FormattedText from '@components/formatted_text';
import Hashtag from '@components/markdown/hashtag';
import {blendColors, concatStyles, makeStyleSheetFromTheme} from '@utils/theme';
import {blendColors, changeOpacity, concatStyles, makeStyleSheetFromTheme} from '@utils/theme';
import {getScheme} from '@utils/url';
import AtMention from './at_mention';
@@ -26,11 +27,11 @@ import MarkdownTable from './markdown_table';
import MarkdownTableCell, {MarkdownTableCellProps} from './markdown_table_cell';
import MarkdownTableImage from './markdown_table_image';
import MarkdownTableRow, {MarkdownTableRowProps} from './markdown_table_row';
import {addListItemIndices, combineTextNodes, highlightMentions, pullOutImages} from './transform';
import {addListItemIndices, combineTextNodes, highlightMentions, highlightSearchPatterns, parseTaskLists, pullOutImages} from './transform';
import type {
MarkdownAtMentionRenderer, MarkdownBaseRenderer, MarkdownBlockStyles, MarkdownChannelMentionRenderer,
MarkdownEmojiRenderer, MarkdownImageRenderer, MarkdownLatexRenderer, MarkdownTextStyles, UserMentionKey,
MarkdownEmojiRenderer, MarkdownImageRenderer, MarkdownLatexRenderer, MarkdownTextStyles, SearchPattern, UserMentionKey,
} from '@typings/global/markdown';
type MarkdownProps = {
@@ -55,6 +56,7 @@ type MarkdownProps = {
minimumHashtagLength?: number;
onPostPress?: (event: GestureResponderEvent) => void;
postId?: string;
searchPatterns?: SearchPattern[];
textStyles?: MarkdownTextStyles;
theme: Theme;
value?: string | number;
@@ -100,6 +102,10 @@ const getExtraPropsForNode = (node: any) => {
extraProps.size = node.size;
}
if (node.type === 'checkbox') {
extraProps.isChecked = node.isChecked;
}
return extraProps;
};
@@ -114,7 +120,7 @@ const Markdown = ({
disableAtChannelMentionHighlight = false, disableAtMentions = false, disableChannelLink = false,
disableGallery = false, disableHashtags = false, enableInlineLatex, enableLatex,
imagesMetadata, isEdited, isReplyPost, isSearchResult, layoutWidth,
location, mentionKeys, minimumHashtagLength = 3, onPostPress, postId,
location, mentionKeys, minimumHashtagLength = 3, onPostPress, postId, searchPatterns,
textStyles = {}, theme, value = '',
}: MarkdownProps) => {
const style = getStyleSheet(theme);
@@ -172,6 +178,19 @@ const Markdown = ({
);
};
const renderCheckbox = ({isChecked}: {isChecked: boolean}) => {
return (
<Text>
<CompassIcon
name={isChecked ? 'checkbox-marked' : 'checkbox-blank-outline'}
size={16}
color={changeOpacity(theme.centerChannelColor, 0.56)}
/>
{' '}
</Text>
);
};
const renderCodeBlock = (props: any) => {
// These sometimes include a trailing newline
const content = props.literal.replace(/\n$/, '');
@@ -464,6 +483,8 @@ const Markdown = ({
table_cell: renderTableCell,
mention_highlight: Renderer.forwardChildren,
search_highlight: Renderer.forwardChildren,
checkbox: renderCheckbox,
editedIndicator: renderEditedIndicator,
};
@@ -472,6 +493,7 @@ const Markdown = ({
renderers,
renderParagraphsInLists: true,
getExtraPropsForNode,
allowedTypes: Object.keys(renderers),
});
};
@@ -482,9 +504,13 @@ const Markdown = ({
ast = combineTextNodes(ast);
ast = addListItemIndices(ast);
ast = pullOutImages(ast);
ast = parseTaskLists(ast);
if (mentionKeys) {
ast = highlightMentions(ast, mentionKeys);
}
if (searchPatterns) {
ast = highlightSearchPatterns(ast, searchPatterns);
}
if (isEdited) {
const editIndicatorNode = new Node('edited_indicator');

View File

@@ -8,12 +8,15 @@ import {Node, Parser} from 'commonmark';
import {
addListItemIndices,
combineTextNodes,
getFirstMention,
getFirstMatch,
highlightMentions,
highlightTextNode,
mentionKeysToPatterns,
pullOutImages,
} from '@components/markdown/transform';
import type {UserMentionKey} from '@typings/global/markdown';
/* eslint-disable max-lines, no-console, no-underscore-dangle */
describe('Components.Markdown.transform', () => {
@@ -2623,64 +2626,69 @@ describe('Components.Markdown.transform', () => {
name: 'no mention keys',
input: 'apple banana orange',
mentionKeys: [],
expected: {index: -1, mention: null},
expected: {index: -1, length: -1},
}, {
name: 'single mention',
input: 'apple banana orange',
mentionKeys: [{key: 'banana'}],
expected: {index: 6, mention: {key: 'banana'}},
expected: {index: 6, length: 6},
}, {
name: 'multiple mentions',
input: 'apple banana orange',
mentionKeys: [{key: 'apple'}, {key: 'orange'}],
expected: {index: 0, mention: {key: 'apple'}},
expected: {index: 0, length: 5},
}, {
name: 'case sensitive',
input: 'apple APPLE Apple aPPle',
mentionKeys: [{key: 'Apple', caseSensitive: true}],
expected: {index: 12, mention: {key: 'Apple', caseSensitive: true}},
expected: {index: 12, length: 5},
}, {
name: 'followed by period',
input: 'banana.',
mentionKeys: [{key: 'banana'}],
expected: {index: 0, mention: {key: 'banana'}},
expected: {index: 0, length: 6},
}, {
name: 'followed by underscores',
input: 'banana__',
mentionKeys: [{key: 'banana'}],
expected: {index: 0, mention: {key: 'banana'}},
expected: {index: 0, length: 6},
}, {
name: 'in brackets',
input: '(banana)',
mentionKeys: [{key: 'banana'}],
expected: {index: 1, mention: {key: 'banana'}},
expected: {index: 1, length: 6},
}, {
name: 'following punctuation',
input: ':banana',
mentionKeys: [{key: 'banana'}],
expected: {index: 1, mention: {key: 'banana'}},
expected: {index: 1, length: 6},
}, {
name: 'not part of another word',
input: 'pineapple',
mentionKeys: [{key: 'apple'}],
expected: {index: -1, mention: null},
expected: {index: -1, length: -1},
}, {
name: 'no error from weird mention keys',
input: 'apple banana orange',
mentionKeys: [{key: '*\\3_.'}],
expected: {index: -1, mention: null},
expected: {index: -1, length: -1},
}, {
name: 'no blank mention keys',
input: 'apple banana orange',
mentionKeys: [{key: ''}],
expected: {index: -1, mention: null},
expected: {index: -1, length: -1},
}, {
name: 'multibyte key',
input: '좋은 하루 되세요.',
mentionKeys: [{key: '하루'}],
expected: {index: 3, mention: {key: '하루'}},
expected: {index: 3, length: 2},
}];
function getFirstMention(str: string, mentionKeys: UserMentionKey[]) {
const patterns = mentionKeysToPatterns(mentionKeys);
return getFirstMatch(str, patterns);
}
for (const test of tests) {
it(test.name, () => {
const actual = getFirstMention(test.input, test.mentionKeys);

View File

@@ -5,7 +5,7 @@ import {Node, NodeType} from 'commonmark';
import {escapeRegex} from '@utils/markdown';
import type {UserMentionKey} from '@typings/global/markdown';
import type {SearchPattern, UserMentionKey} from '@typings/global/markdown';
/* eslint-disable no-underscore-dangle */
@@ -114,6 +114,8 @@ function pullOutImage(image: any) {
export function highlightMentions(ast: Node, mentionKeys: UserMentionKey[]) {
const walker = ast.walker();
const patterns = mentionKeysToPatterns(mentionKeys);
let e;
while ((e = walker.next())) {
if (!e.entering) {
@@ -123,13 +125,13 @@ export function highlightMentions(ast: Node, mentionKeys: UserMentionKey[]) {
const node = e.node;
if (node.type === 'text' && node.literal) {
const {index, mention} = getFirstMention(node.literal, mentionKeys);
const {index, length} = getFirstMatch(node.literal, patterns);
if (index === -1 || !mention) {
if (index === -1) {
continue;
}
const mentionNode = highlightTextNode(node, index, index + mention.key.length, 'mention_highlight');
const mentionNode = highlightTextNode(node, index, index + length, 'mention_highlight');
// Resume processing on the next node after the mention node which may include any remaining text
// that was part of this one
@@ -158,38 +160,71 @@ export function highlightMentions(ast: Node, mentionKeys: UserMentionKey[]) {
return ast;
}
// Given a string and an array of mention keys, returns the first mention that appears and its index.
export function getFirstMention(str: string, mentionKeys: UserMentionKey[]) {
let firstMention = null;
let firstMentionIndex = -1;
for (const mention of mentionKeys) {
if (mention.key.trim() === '') {
continue;
}
export function mentionKeysToPatterns(mentionKeys: UserMentionKey[]) {
return mentionKeys.filter((mention) => mention.key.trim() !== '').map((mention) => {
const flags = mention.caseSensitive ? '' : 'i';
let pattern;
if (cjkPattern.test(mention.key)) {
pattern = new RegExp(`${escapeRegex(mention.key)}`, flags);
} else {
pattern = new RegExp(`\\b${escapeRegex(mention.key)}_*\\b`, flags);
pattern = new RegExp(`\\b${escapeRegex(mention.key)}(?=_*\\b)`, flags);
}
return pattern;
});
}
export function highlightSearchPatterns(ast: Node, searchPatterns: SearchPattern[]) {
const walker = ast.walker();
let e;
while ((e = walker.next())) {
if (!e.entering) {
continue;
}
const node = e.node;
if (node.type === 'text' && node.literal) {
const {index, length} = getFirstMatch(node.literal, searchPatterns.map((pattern) => pattern.pattern));
// TODO we might need special handling here for if the search term is part of a hashtag
if (index === -1) {
continue;
}
const matchNode = highlightTextNode(node, index, index + length, 'search_highlight');
// Resume processing on the next node after the match node which may include any remaining text
// that was part of this one
walker.resumeAt(matchNode, false);
}
}
return ast;
}
// Given a string and an array of regexess, returns the index and length of the first match.
export function getFirstMatch(str: string, patterns: RegExp[]) {
let firstMatchIndex = -1;
let firstMatchLength = -1;
for (const pattern of patterns) {
const match = pattern.exec(str);
if (!match || match[0] === '') {
continue;
}
if (firstMentionIndex === -1 || match.index < firstMentionIndex) {
firstMentionIndex = match.index;
firstMention = mention;
if (firstMatchIndex === -1 || match.index < firstMatchIndex) {
firstMatchIndex = match.index;
firstMatchLength = match[0].length;
}
}
return {
index: firstMentionIndex,
mention: firstMention,
index: firstMatchIndex,
length: firstMatchLength,
};
}
@@ -252,3 +287,39 @@ function wrapNode(wrapper: any, node: any) {
wrapper._lastChild = node;
node._parent = wrapper;
}
export function parseTaskLists(ast: Node) {
const walker = ast.walker();
let e;
while ((e = walker.next())) {
if (!e.entering) {
continue;
}
const node = e.node;
if (node.type !== 'item') {
continue;
}
if (node.firstChild?.type === 'paragraph' && node.firstChild?.firstChild?.type === 'text') {
const paragraphNode = node.firstChild;
const textNode = node.firstChild.firstChild;
const literal = textNode.literal ?? '';
const match = (/^ {0,3}\[( |x)\]\s/).exec(literal);
if (match) {
const checkbox = new Node('checkbox');
checkbox.isChecked = match[1] === 'x';
paragraphNode.prependChild(checkbox);
textNode.literal = literal.substring(match[0].length);
}
}
}
return ast;
}

View File

@@ -50,6 +50,21 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
};
});
const searchPatterns = [
{
pattern: /\bMattermost\b/,
term: 'Mattermost',
},
{
pattern: /\bbug\b/i,
term: 'bug',
},
{
pattern: /\bboat/,
term: 'boat',
},
];
const Message = ({currentUser, highlight, isEdited, isPendingOrFailed, isReplyPost, layoutWidth, location, post, theme}: MessageProps) => {
const [open, setOpen] = useState(false);
const [height, setHeight] = useState<number|undefined>();
@@ -94,6 +109,7 @@ const Message = ({currentUser, highlight, isEdited, isPendingOrFailed, isReplyPo
textStyles={textStyles}
value={post.message}
mentionKeys={mentionKeys}
searchPatterns={searchPatterns}
theme={theme}
/>
</View>

View File

@@ -104,7 +104,10 @@ export const getMarkdownTextStyles = makeStyleSheetFromTheme((theme: Theme) => {
fontFamily: 'OpenSans-Bold',
},
mention_highlight: {
fontFamily: 'OpenSans',
backgroundColor: theme.mentionHighlightBg,
color: theme.mentionHighlightLink,
},
search_highlight: {
backgroundColor: theme.mentionHighlightBg,
color: theme.mentionHighlightLink,
},

79
package-lock.json generated
View File

@@ -33,8 +33,8 @@
"@sentry/react-native": "3.4.0",
"@stream-io/flat-list-mvcp": "0.10.1",
"base-64": "1.0.0",
"commonmark": "github:mattermost/commonmark.js#d1003be97d15414af6c21894125623c45e3f5096",
"commonmark-react-renderer": "github:mattermost/commonmark-react-renderer#4e52e1725c0ef5b1e2ecfe9883220ec36c2eb67d",
"commonmark": "npm:@mattermost/commonmark@0.30.1-0",
"commonmark-react-renderer": "github:mattermost/commonmark-react-renderer#2c660491041f7595f6ce5a05f6dc2e30ca769d3a",
"deep-equal": "2.0.5",
"deepmerge": "4.2.2",
"emoji-regex": "10.1.0",
@@ -3009,6 +3009,37 @@
"@jridgewell/sourcemap-codec": "^1.4.10"
}
},
"node_modules/@mattermost/commonmark": {
"version": "0.30.1-0",
"resolved": "https://registry.npmjs.org/@mattermost/commonmark/-/commonmark-0.30.1-0.tgz",
"integrity": "sha512-0+qW22COfd/BA81TQ05nQMfhmnuRAkv/vwCbs3iFVTEj7mTunYRwWUyb5M8K849V2VXdLdrS8htsBtIHDb2H7g==",
"peer": true,
"dependencies": {
"entities": "~3.0.1",
"mdurl": "~1.0.1",
"minimist": "~1.2.5",
"string.prototype.repeat": "^1.0.0",
"xregexp": "5.1.0"
},
"bin": {
"commonmark": "bin/commonmark"
},
"engines": {
"node": "*"
}
},
"node_modules/@mattermost/commonmark/node_modules/entities": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
"integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
"peer": true,
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/@mattermost/compass-icons": {
"version": "0.1.22",
"resolved": "https://registry.npmjs.org/@mattermost/compass-icons/-/compass-icons-0.1.22.tgz",
@@ -8519,9 +8550,10 @@
"integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
},
"node_modules/commonmark": {
"version": "0.30.0",
"resolved": "git+ssh://git@github.com/mattermost/commonmark.js.git#d1003be97d15414af6c21894125623c45e3f5096",
"license": "BSD-2-Clause",
"name": "@mattermost/commonmark",
"version": "0.30.1-0",
"resolved": "https://registry.npmjs.org/@mattermost/commonmark/-/commonmark-0.30.1-0.tgz",
"integrity": "sha512-0+qW22COfd/BA81TQ05nQMfhmnuRAkv/vwCbs3iFVTEj7mTunYRwWUyb5M8K849V2VXdLdrS8htsBtIHDb2H7g==",
"dependencies": {
"entities": "~3.0.1",
"mdurl": "~1.0.1",
@@ -8538,7 +8570,9 @@
},
"node_modules/commonmark-react-renderer": {
"version": "4.3.5",
"resolved": "git+ssh://git@github.com/mattermost/commonmark-react-renderer.git#4e52e1725c0ef5b1e2ecfe9883220ec36c2eb67d",
"resolved": "git+ssh://git@github.com/mattermost/commonmark-react-renderer.git#2c660491041f7595f6ce5a05f6dc2e30ca769d3a",
"integrity": "sha512-D++d6UFNLyu4fAAZg6blRb3rkiG+bFWKJ8fSLOJwzBit3Hm/sPZbx2QQeKfx+IHoMg7cCvHlesAT1+kB/+kBLQ==",
"license": "MIT",
"dependencies": {
"lodash.assign": "^4.2.0",
"lodash.isplainobject": "^4.0.6",
@@ -8546,7 +8580,7 @@
"xss-filters": "^1.2.6"
},
"peerDependencies": {
"commonmark": "^0.30.0",
"@mattermost/commonmark": "*",
"react": ">=0.14.0"
}
},
@@ -25685,6 +25719,27 @@
"@jridgewell/sourcemap-codec": "^1.4.10"
}
},
"@mattermost/commonmark": {
"version": "0.30.1-0",
"resolved": "https://registry.npmjs.org/@mattermost/commonmark/-/commonmark-0.30.1-0.tgz",
"integrity": "sha512-0+qW22COfd/BA81TQ05nQMfhmnuRAkv/vwCbs3iFVTEj7mTunYRwWUyb5M8K849V2VXdLdrS8htsBtIHDb2H7g==",
"peer": true,
"requires": {
"entities": "~3.0.1",
"mdurl": "~1.0.1",
"minimist": "~1.2.5",
"string.prototype.repeat": "^1.0.0",
"xregexp": "5.1.0"
},
"dependencies": {
"entities": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
"integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
"peer": true
}
}
},
"@mattermost/compass-icons": {
"version": "0.1.22",
"resolved": "https://registry.npmjs.org/@mattermost/compass-icons/-/compass-icons-0.1.22.tgz",
@@ -29934,8 +29989,9 @@
"integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
},
"commonmark": {
"version": "git+ssh://git@github.com/mattermost/commonmark.js.git#d1003be97d15414af6c21894125623c45e3f5096",
"from": "commonmark@github:mattermost/commonmark.js#d1003be97d15414af6c21894125623c45e3f5096",
"version": "npm:@mattermost/commonmark@0.30.1-0",
"resolved": "https://registry.npmjs.org/@mattermost/commonmark/-/commonmark-0.30.1-0.tgz",
"integrity": "sha512-0+qW22COfd/BA81TQ05nQMfhmnuRAkv/vwCbs3iFVTEj7mTunYRwWUyb5M8K849V2VXdLdrS8htsBtIHDb2H7g==",
"requires": {
"entities": "~3.0.1",
"mdurl": "~1.0.1",
@@ -29952,8 +30008,9 @@
}
},
"commonmark-react-renderer": {
"version": "git+ssh://git@github.com/mattermost/commonmark-react-renderer.git#4e52e1725c0ef5b1e2ecfe9883220ec36c2eb67d",
"from": "commonmark-react-renderer@github:mattermost/commonmark-react-renderer#4e52e1725c0ef5b1e2ecfe9883220ec36c2eb67d",
"version": "git+ssh://git@github.com/mattermost/commonmark-react-renderer.git#2c660491041f7595f6ce5a05f6dc2e30ca769d3a",
"integrity": "sha512-D++d6UFNLyu4fAAZg6blRb3rkiG+bFWKJ8fSLOJwzBit3Hm/sPZbx2QQeKfx+IHoMg7cCvHlesAT1+kB/+kBLQ==",
"from": "commonmark-react-renderer@github:mattermost/commonmark-react-renderer#2c660491041f7595f6ce5a05f6dc2e30ca769d3a",
"requires": {
"lodash.assign": "^4.2.0",
"lodash.isplainobject": "^4.0.6",

View File

@@ -31,8 +31,8 @@
"@sentry/react-native": "3.4.0",
"@stream-io/flat-list-mvcp": "0.10.1",
"base-64": "1.0.0",
"commonmark": "github:mattermost/commonmark.js#d1003be97d15414af6c21894125623c45e3f5096",
"commonmark-react-renderer": "github:mattermost/commonmark-react-renderer#4e52e1725c0ef5b1e2ecfe9883220ec36c2eb67d",
"commonmark": "npm:@mattermost/commonmark@0.30.1-0",
"commonmark-react-renderer": "github:mattermost/commonmark-react-renderer#2c660491041f7595f6ce5a05f6dc2e30ca769d3a",
"deep-equal": "2.0.5",
"deepmerge": "4.2.2",
"emoji-regex": "10.1.0",

View File

@@ -1,33 +0,0 @@
diff --git a/node_modules/@types/commonmark/index.d.ts b/node_modules/@types/commonmark/index.d.ts
index 35e9ed6..382cf98 100755
--- a/node_modules/@types/commonmark/index.d.ts
+++ b/node_modules/@types/commonmark/index.d.ts
@@ -5,8 +5,8 @@
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
export type NodeType =
- 'text' |'softbreak' | 'linebreak' | 'emph' | 'strong' | 'html_inline' | 'link' | 'image' | 'code' | 'document' | 'paragraph' |
- 'block_quote' | 'item' | 'list' | 'heading' | 'code_block' | 'html_block' | 'thematic_break' | 'custom_inline' | 'custom_block';
+ 'text' |'softbreak' | 'linebreak' | 'emph' | 'strong' | 'html_inline' | 'link' | 'image' | 'code' | 'document' | 'paragraph' | 'mention_highlight' | 'at_mention' |
+ 'block_quote' | 'item' | 'list' | 'heading' | 'code_block' | 'html_block' | 'thematic_break' | 'custom_inline' | 'custom_block' | 'table' | 'edited_indicator';
export class Node {
constructor(nodeType: NodeType, sourcepos?: Position);
@@ -125,6 +125,8 @@ export class Node {
* https://github.com/jgm/commonmark.js/issues/74
*/
_listData: ListData;
+
+ mentionName?: string;
}
/**
@@ -200,6 +202,8 @@ export interface ParserOptions {
*/
smart?: boolean | undefined;
time?: boolean | undefined;
+ urlFilter?: (url: string) => boolean;
+ minimumHashtagLength?: number;
}
export interface HtmlRenderingOptions extends XmlRenderingOptions {

View File

@@ -3,7 +3,12 @@
import {TextStyle, ViewStyle} from 'react-native';
export type UserMentionKey= {
export type SearchPattern = {
pattern: RegExp;
term: string;
};
export type UserMentionKey = {
key: string;
caseSensitive?: boolean;
};