imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cleanup, better comments, markdown hotkeys

Browse source
This commit is contained in:
Aviral Dasgupta 2016-06-11 22:24:09 +05:30
parent e4217c3fb7
commit b960d220d2
2 changed files with 109 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/RichText.js
View file

@ -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',
@ -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));
}
@ -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);
},
@ -71,7 +81,11 @@ 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) {
@ -79,3 +93,19 @@ function findWithRegex(regex, contentBlock, callback) {
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);
}