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

Commit e4217c3

Browse files
committed
rte improvements, markdown mode
1 parent bf8e56e commit e4217c3

File tree

3 files changed

+167
-150
lines changed

3 files changed

+167
-150
lines changed

Diff for: package.json

+2
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
"classnames": "^2.1.2",
2626
"draft-js": "^0.7.0",
2727
"draft-js-export-html": "^0.2.2",
28+
"draft-js-export-markdown": "^0.2.0",
29+
"draft-js-import-markdown": "^0.1.6",
2830
"favico.js": "^0.3.10",
2931
"filesize": "^3.1.2",
3032
"flux": "^2.0.3",

Diff for: src/RichText.js

+17-18
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle, CompositeDecorator} from 'draft-js';
2-
const ReactDOM = require('react-dom');
3-
var sdk = require('./index');
2+
import * as sdk from './index';
43

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

98
const styles = {
@@ -14,21 +13,19 @@ const styles = {
1413
UNDERLINE: 'u'
1514
};
1615

17-
export function contentStateToHTML(contentState:ContentState): String {
18-
const elem = contentState.getBlockMap().map((block) => {
19-
const elem = BLOCK_RENDER_MAP.get(block.getType()).element;
20-
const content = [];
21-
block.findStyleRanges(() => true, (s, e) => {
22-
const tags = block.getInlineStyleAt(s).map(style => styles[style]);
16+
export function contentStateToHTML(contentState: ContentState): string {
17+
return contentState.getBlockMap().map((block) => {
18+
let elem = BLOCK_RENDER_MAP.get(block.getType()).element;
19+
let content = [];
20+
block.findStyleRanges(() => true, (start, end) => {
21+
const tags = block.getInlineStyleAt(start).map(style => styles[style]);
2322
const open = tags.map(tag => `<${tag}>`).join('');
2423
const close = tags.map(tag => `</${tag}>`).reverse().join('');
25-
content.push(`${open}${block.getText().substring(s, e)}${close}`);
24+
content.push(`${open}${block.getText().substring(start, end)}${close}`);
2625
});
2726

2827
return (`<${elem}>${content.join('')}</${elem}>`);
2928
}).join('');
30-
31-
return elem;
3229
}
3330

3431
export function HTMLtoContentState(html:String): ContentState {
@@ -38,6 +35,12 @@ export function HTMLtoContentState(html:String): ContentState {
3835
const USERNAME_REGEX = /@\S+:\S+/g;
3936
const ROOM_REGEX = /#\S+:\S+/g;
4037

38+
/**
39+
* Returns a composite decorator which has access to provided scope.
40+
*
41+
* @param scope
42+
* @returns {*}
43+
*/
4144
export function getScopedDecorator(scope) {
4245
const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
4346

@@ -46,17 +49,13 @@ export function getScopedDecorator(scope) {
4649
findWithRegex(USERNAME_REGEX, contentBlock, callback);
4750
},
4851
component: (props) => {
49-
console.log(props.children);
50-
console.log(props.children[0].props.text);
51-
const member = scope.room.getMember(props.children[0].props.text);
52-
console.log(scope);
53-
window.scope = scope;
52+
let member = scope.room.getMember(props.children[0].props.text);
5453
let name = null;
5554
if(!!member) {
5655
name = member.name;
5756
}
5857
console.log(member);
59-
const avatar = member ? <MemberAvatar member={member} width={16} height={16} /> : null;
58+
let avatar = member ? <MemberAvatar member={member} width={16} height={16} /> : null;
6059
return <span className="mx_UserPill">{avatar} {props.children}</span>;
6160
}
6261
};

0 commit comments

Comments
 (0)