Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
cleanup, better comments, markdown hotkeys
Browse files Browse the repository at this point in the history
  • Loading branch information
@aviraldg
aviraldg committed Jun 11, 2016
1 parent e4217c3 commit b960d22
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 49 deletions.
72 changes: 51 additions & 21 deletions src/RichText.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle, CompositeDecorator} from 'draft-js';
import {
Editor,
Modifier,
ContentState,
convertFromHTML,
DefaultDraftBlockRenderMap,
DefaultDraftInlineStyle,
CompositeDecorator
} from 'draft-js';
import * as sdk from './index';

const BLOCK_RENDER_MAP = DefaultDraftBlockRenderMap.set('unstyled', {
element: 'p' // draft uses <div> by default which we don't really like, so we're using <p>
});

const styles = {
const STYLES = {
BOLD: 'strong',
CODE: 'code',
ITALIC: 'em',
Expand All @@ -17,18 +25,24 @@ export function contentStateToHTML(contentState: ContentState): string {
return contentState.getBlockMap().map((block) => {
let elem = BLOCK_RENDER_MAP.get(block.getType()).element;
let content = [];
block.findStyleRanges(() => true, (start, end) => {
const tags = block.getInlineStyleAt(start).map(style => styles[style]);
const open = tags.map(tag => `<${tag}>`).join('');
const close = tags.map(tag => `</${tag}>`).reverse().join('');
content.push(`${open}${block.getText().substring(start, end)}${close}`);
});
block.findStyleRanges(
() => true, // always return true => don't filter any ranges out
(start, end) => {
// map style names to elements
let tags = block.getInlineStyleAt(start).map(style => STYLES[style]);
// combine them to get well-nested HTML
let open = tags.map(tag => `<${tag}>`).join('');
let close = tags.map(tag => `</${tag}>`).reverse().join('');
// and get the HTML representation of this styled range (this .substring() should never fail)
content.push(`${open}${block.getText().substring(start, end)}${close}`);
}
);

return (`<${elem}>${content.join('')}</${elem}>`);
}).join('');
}

export function HTMLtoContentState(html:String): ContentState {
export function HTMLtoContentState(html: string): ContentState {
return ContentState.createFromBlockArray(convertFromHTML(html));
}

Expand All @@ -37,29 +51,25 @@ const ROOM_REGEX = /#\S+:\S+/g;

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

const usernameDecorator = {
let usernameDecorator = {
strategy: (contentBlock, callback) => {
findWithRegex(USERNAME_REGEX, contentBlock, callback);
},
component: (props) => {
let member = scope.room.getMember(props.children[0].props.text);
let name = null;
if(!!member) {
name = member.name;
if (!!member) {
name = member.name; // unused until we make these decorators immutable (autocomplete needed)
}
console.log(member);
let avatar = member ? <MemberAvatar member={member} width={16} height={16} /> : null;
let avatar = member ? <MemberAvatar member={member} width={16} height={16}/> : null;
return <span className="mx_UserPill">{avatar} {props.children}</span>;
}
};
const roomDecorator = {
let roomDecorator = {
strategy: (contentBlock, callback) => {
findWithRegex(ROOM_REGEX, contentBlock, callback);
},
Expand All @@ -71,11 +81,31 @@ export function getScopedDecorator(scope) {
return new CompositeDecorator([usernameDecorator, roomDecorator]);
}

function findWithRegex(regex, contentBlock, callback) {
/**
* Utility function that looks for regex matches within a ContentBlock and invokes {callback} with (start, end)
* From https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html
*/
function findWithRegex(regex, contentBlock: ContentBlock, callback: (start: number, end: number) => any) {
const text = contentBlock.getText();
let matchArr, start;
while ((matchArr = regex.exec(text)) !== null) {
start = matchArr.index;
callback(start, start + matchArr[0].length);
}
}

/**
* 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()),
text = "";

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

return Modifier.replaceText(contentState, rangeToReplace, modifyFn(text), ...rest);
}
86 changes: 58 additions & 28 deletions src/components/views/rooms/MessageComposerInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ var sdk = require('../../../index');
var dis = require("../../../dispatcher");
var KeyCode = require("../../../KeyCode");

import {contentStateToHTML, HTMLtoContentState, getScopedDecorator} from '../../../RichText';
import * as RichText from '../../../RichText';

const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000;

Expand All @@ -69,7 +69,7 @@ export default class MessageComposerInput extends React.Component {
this.onInputClick = this.onInputClick.bind(this);

this.state = {
isRichtextEnabled: true,
isRichtextEnabled: false,
editorState: null
};

Expand All @@ -95,7 +95,7 @@ export default class MessageComposerInput extends React.Component {
let func = contentState ? EditorState.createWithContent : EditorState.createEmpty;
let args = contentState ? [contentState] : [];
if(this.state.isRichtextEnabled) {
args.push(getScopedDecorator(this.props));
args.push(RichText.getScopedDecorator(this.props));
}
return func.apply(null, args);
}
Expand All @@ -114,7 +114,7 @@ export default class MessageComposerInput extends React.Component {
// The textarea element to set text to.
element: null,

init: function (element, roomId) {
init: function(element, roomId) {
this.roomId = roomId;
this.element = element;
this.position = -1;
Expand All @@ -129,7 +129,7 @@ export default class MessageComposerInput extends React.Component {
}
},

push: function (text) {
push: function(text) {
// store a message in the sent history
this.data.unshift(text);
window.sessionStorage.setItem(
Expand All @@ -142,7 +142,7 @@ export default class MessageComposerInput extends React.Component {
},

// move in the history. Returns true if we managed to move.
next: function (offset) {
next: function(offset) {
if (this.position === -1) {
// user is going into the history, save the current line.
this.originalText = this.element.value;
Expand Down Expand Up @@ -175,15 +175,15 @@ export default class MessageComposerInput extends React.Component {
return true;
},

saveLastTextEntry: function () {
saveLastTextEntry: function() {
// save the currently entered text in order to restore it later.
// NB: This isn't 'originalText' because we want to restore
// sent history items too!
let contentJSON = JSON.stringify(convertToRaw(component.state.editorState.getCurrentContent()));
window.sessionStorage.setItem("input_" + this.roomId, contentJSON);
},

setLastTextEntry: function () {
setLastTextEntry: function() {
let contentJSON = window.sessionStorage.getItem("input_" + this.roomId);
if (contentJSON) {
let content = convertFromRaw(JSON.parse(contentJSON));
Expand Down Expand Up @@ -404,7 +404,7 @@ export default class MessageComposerInput extends React.Component {
this.refs.editor.focus();
}

onChange(editorState) {
onChange(editorState: EditorState) {
this.setState({editorState});

if(editorState.getCurrentContent().hasText()) {
Expand All @@ -414,30 +414,60 @@ export default class MessageComposerInput extends React.Component {
}
}

handleKeyCommand(command) {
if(command === 'toggle-mode') {
enableRichtext(enabled: boolean) {
this.setState({
isRichtextEnabled: enabled
});

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

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

handleKeyCommand(command: string): boolean {
if(command === 'toggle-mode') {
this.enableRichtext(!this.state.isRichtextEnabled);
return true;
}

let newState = RichUtils.handleKeyCommand(this.state.editorState, command);
if (newState) {
let newState: ?EditorState = null;

// Draft handles rich text mode commands by default but we need to do it ourselves for Markdown.
if(!this.state.isRichtextEnabled) {
let contentState = this.state.editorState.getCurrentContent(),
selection = this.state.editorState.getSelection();

let modifyFn = {
bold: text => `**${text}**`,
italic: text => `*${text}*`,
underline: text => `_${text}_`, // there's actually no valid underline in Markdown, but *shrug*
code: text => `\`${text}\``
}[command];

if(modifyFn) {
newState = EditorState.push(
this.state.editorState,
RichText.modifyText(contentState, selection, modifyFn),
'insert-characters'
);
}
console.log(modifyFn);
console.log(newState);
}

if(newState == null)
newState = RichUtils.handleKeyCommand(this.state.editorState, command);

if (newState != null) {
this.onChange(newState);
return true;
}
Expand All @@ -455,7 +485,7 @@ export default class MessageComposerInput extends React.Component {
let contentText = contentState.getPlainText(), contentHTML;

if(this.state.isRichtextEnabled) {
contentHTML = contentStateToHTML(contentState);
contentHTML = RichText.contentStateToHTML(contentState);
} else {
contentHTML = mdownToHtml(contentText);
}
Expand Down

0 comments on commit b960d22

Please sign in to comment.