Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
rte improvements, markdown mode
  • Loading branch information
aviraldg committed Jun 11, 2016
1 parent bf8e56e commit e4217c3
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 150 deletions.
2 changes: 2 additions & 0 deletions package.json
Expand Up @@ -25,6 +25,8 @@
"classnames": "^2.1.2",
"draft-js": "^0.7.0",
"draft-js-export-html": "^0.2.2",
"draft-js-export-markdown": "^0.2.0",
"draft-js-import-markdown": "^0.1.6",
"favico.js": "^0.3.10",
"filesize": "^3.1.2",
"flux": "^2.0.3",
Expand Down
35 changes: 17 additions & 18 deletions src/RichText.js
@@ -1,9 +1,8 @@
import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle, CompositeDecorator} from 'draft-js';
const ReactDOM = require('react-dom');
var sdk = require('./index');
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
element: 'p' // draft uses <div> by default which we don't really like, so we're using <p>
});

const styles = {
Expand All @@ -14,21 +13,19 @@ const styles = {
UNDERLINE: 'u'
};

export function contentStateToHTML(contentState:ContentState): String {
const elem = contentState.getBlockMap().map((block) => {
const elem = BLOCK_RENDER_MAP.get(block.getType()).element;
const content = [];
block.findStyleRanges(() => true, (s, e) => {
const tags = block.getInlineStyleAt(s).map(style => styles[style]);
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(s, e)}${close}`);
content.push(`${open}${block.getText().substring(start, end)}${close}`);
});

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

return elem;
}

export function HTMLtoContentState(html:String): ContentState {
Expand All @@ -38,6 +35,12 @@ export function HTMLtoContentState(html:String): ContentState {
const USERNAME_REGEX = /@\S+:\S+/g;
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');

Expand All @@ -46,17 +49,13 @@ export function getScopedDecorator(scope) {
findWithRegex(USERNAME_REGEX, contentBlock, callback);
},
component: (props) => {
console.log(props.children);
console.log(props.children[0].props.text);
const member = scope.room.getMember(props.children[0].props.text);
console.log(scope);
window.scope = scope;
let member = scope.room.getMember(props.children[0].props.text);
let name = null;
if(!!member) {
name = member.name;
}
console.log(member);
const 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>;
}
};
Expand Down

0 comments on commit e4217c3

Please sign in to comment.