Skip to content
Permalink
Browse files

Add basic Markdown highlighting

Add basic Markdown highlighting
  • Loading branch information
aviraldg committed Jun 11, 2016
2 parents c0d7629 + e75a28b commit df69d1de44810d2c6d8a338be33b73ee8829d177
Showing with 75 additions and 27 deletions.
  1. +56 −11 src/RichText.js
  2. +19 −16 src/components/views/rooms/MessageComposerInput.js
@@ -21,6 +21,15 @@ const STYLES = {
UNDERLINE: 'u'
};

const MARKDOWN_REGEX = {
LINK: /(?:\[([^\]]+)\]\(([^\)]+)\))|\<(\w+:\/\/[^\>]+)\>/g,
ITALIC: /([\*_])([\w\s]+?)\1/g,
BOLD: /([\*_])\1([\w\s]+?)\1\1/g
};

const USERNAME_REGEX = /@\S+:\S+/g;
const ROOM_REGEX = /#\S+:\S+/g;

export function contentStateToHTML(contentState: ContentState): string {
return contentState.getBlockMap().map((block) => {
let elem = BLOCK_RENDER_MAP.get(block.getType()).element;
@@ -46,13 +55,10 @@ export function HTMLtoContentState(html: string): ContentState {
return ContentState.createFromBlockArray(convertFromHTML(html));
}

const USERNAME_REGEX = /@\S+:\S+/g;
const ROOM_REGEX = /#\S+:\S+/g;

/**
* Returns a composite decorator which has access to provided scope.
*/
export function getScopedDecorator(scope: any): CompositeDecorator {
export function getScopedRTDecorators(scope: any): CompositeDecorator {
let MemberAvatar = sdk.getComponent('avatars.MemberAvatar');

let usernameDecorator = {
@@ -78,7 +84,34 @@ export function getScopedDecorator(scope: any): CompositeDecorator {
}
};

return new CompositeDecorator([usernameDecorator, roomDecorator]);
return [usernameDecorator, roomDecorator];
}

export function getScopedMDDecorators(scope: any): CompositeDecorator {
let markdownDecorators = ['BOLD', 'ITALIC'].map(
(style) => ({
strategy: (contentBlock, callback) => {
return findWithRegex(MARKDOWN_REGEX[style], contentBlock, callback);
},
component: (props) => (
<span className={"mx_MarkdownElement mx_Markdown_" + style}>
{props.children}
</span>
)
}));

markdownDecorators.push({
strategy: (contentBlock, callback) => {
return findWithRegex(MARKDOWN_REGEX.LINK, contentBlock, callback);
},
component: (props) => (
<a href="#" className="mx_MarkdownElement mx_Markdown_LINK">
{props.children}
</a>
)
});

return markdownDecorators;
}

/**
@@ -97,15 +130,27 @@ function findWithRegex(regex, contentBlock: ContentBlock, callback: (start: numb
/**
* Passes rangeToReplace to modifyFn and replaces it in contentState with the result.
*/
export function modifyText(contentState: ContentState, rangeToReplace: SelectionState, modifyFn: (text: string) => string, ...rest): ContentState {
let startKey = rangeToReplace.getStartKey(),
endKey = contentState.getKeyAfter(rangeToReplace.getEndKey()),
export function modifyText(contentState: ContentState, rangeToReplace: SelectionState,
modifyFn: (text: string) => string, ...rest): ContentState {
let getText = (key) => contentState.getBlockForKey(key).getText(),
startKey = rangeToReplace.getStartKey(),
startOffset = rangeToReplace.getStartOffset(),
endKey = rangeToReplace.getEndKey(),
endOffset = rangeToReplace.getEndOffset(),
text = "";

for(let currentKey = startKey; currentKey && currentKey !== endKey; currentKey = contentState.getKeyAfter(currentKey)) {
let currentBlock = contentState.getBlockForKey(currentKey);
text += currentBlock.getText();

for(let currentKey = startKey;
currentKey && currentKey !== endKey;
currentKey = contentState.getKeyAfter(currentKey)) {
text += getText(currentKey).substring(startOffset, blockText.length);

// from now on, we'll take whole blocks
startOffset = 0;
}

// add remaining part of last block
text += getText(endKey).substring(startOffset, endOffset);

return Modifier.replaceText(contentState, rangeToReplace, modifyFn(text), ...rest);
}
@@ -97,13 +97,16 @@ export default class MessageComposerInput extends React.Component {
* - whether we've got rich text mode enabled
* - contentState was passed in
*/
createEditorState(contentState: ?ContentState): EditorState {
let func = contentState ? EditorState.createWithContent : EditorState.createEmpty;
let args = contentState ? [contentState] : [];
if(this.state.isRichtextEnabled) {
args.push(RichText.getScopedDecorator(this.props));
createEditorState(richText: boolean, contentState: ?ContentState): EditorState {
let decorators = richText ? RichText.getScopedRTDecorators(this.props) :
RichText.getScopedMDDecorators(this.props),
compositeDecorator = new CompositeDecorator(decorators);

if (contentState) {
return EditorState.createWithContent(contentState, compositeDecorator);
} else {
return EditorState.createEmpty(compositeDecorator);
}
return func(...args);
}

componentWillMount() {
@@ -194,7 +197,7 @@ export default class MessageComposerInput extends React.Component {
if (contentJSON) {
let content = convertFromRaw(JSON.parse(contentJSON));
component.setState({
editorState: component.createEditorState(content)
editorState: component.createEditorState(this.state.isRichtextEnabled, content)
});
}
}
@@ -341,22 +344,22 @@ export default class MessageComposerInput extends React.Component {
}

enableRichtext(enabled: boolean) {
this.setState({
isRichtextEnabled: enabled
});

if(!this.state.isRichtextEnabled) {
if (enabled) {
let html = mdownToHtml(this.state.editorState.getCurrentContent().getPlainText());
this.setState({
editorState: this.createEditorState(RichText.HTMLtoContentState(html))
editorState: this.createEditorState(enabled, RichText.HTMLtoContentState(html))
});
} else {
let markdown = stateToMarkdown(this.state.editorState.getCurrentContent());
let contentState = ContentState.createFromText(markdown);
let markdown = stateToMarkdown(this.state.editorState.getCurrentContent()),
contentState = ContentState.createFromText(markdown);
this.setState({
editorState: this.createEditorState(contentState)
editorState: this.createEditorState(enabled, contentState)
});
}

this.setState({
isRichtextEnabled: enabled
});
}

handleKeyCommand(command: string): boolean {

0 comments on commit df69d1d

Please sign in to comment.
You can’t perform that action at this time.