1
1
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' ;
4
3
5
4
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>
7
6
} ) ;
8
7
9
8
const styles = {
@@ -14,21 +13,19 @@ const styles = {
14
13
UNDERLINE : 'u'
15
14
} ;
16
15
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 ] ) ;
23
22
const open = tags . map ( tag => `<${ tag } >` ) . join ( '' ) ;
24
23
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 } ` ) ;
26
25
} ) ;
27
26
28
27
return ( `<${ elem } >${ content . join ( '' ) } </${ elem } >` ) ;
29
28
} ) . join ( '' ) ;
30
-
31
- return elem ;
32
29
}
33
30
34
31
export function HTMLtoContentState ( html :String ) : ContentState {
@@ -38,6 +35,12 @@ export function HTMLtoContentState(html:String): ContentState {
38
35
const USERNAME_REGEX = / @ \S + : \S + / g;
39
36
const ROOM_REGEX = / # \S + : \S + / g;
40
37
38
+ /**
39
+ * Returns a composite decorator which has access to provided scope.
40
+ *
41
+ * @param scope
42
+ * @returns {* }
43
+ */
41
44
export function getScopedDecorator ( scope ) {
42
45
const MemberAvatar = sdk . getComponent ( 'avatars.MemberAvatar' ) ;
43
46
@@ -46,17 +49,13 @@ export function getScopedDecorator(scope) {
46
49
findWithRegex ( USERNAME_REGEX , contentBlock , callback ) ;
47
50
} ,
48
51
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 ) ;
54
53
let name = null ;
55
54
if ( ! ! member ) {
56
55
name = member . name ;
57
56
}
58
57
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 ;
60
59
return < span className = "mx_UserPill" > { avatar } { props . children } </ span > ;
61
60
}
62
61
} ;
0 commit comments