Wie erstellt, style und definiert Datenattribute zu einem Block in Draft-js?

Question

Derzeit Ich habe einen DraftJS Editor wie folgt aus:

<Editor 
    editorState={this.state.editorState} 
    handleKeyCommand={this.handleKeyCommand} 
    onChange={this.onChange} 
    placeholder="Write a tweet..." 
    ref="editor" 
    spellCheck={true} 
/> 

Die construcor mit Zustand:

constructor(props) { 
    super(props); 
    const compositeDecorator = new CompositeDecorator([{ 
    strategy: mentionStrategy, 
    component: MentionSpan, 
    }, { 
    strategy: hashtagStrategy, 
    component: HashtagSpan, 
    }, { 
    strategy: emojiStrategy, 
    component: EmojiSpan, 
    }]); 

    this.state = { 
    conversationActive: null, 
    editorState: EditorState.createEmpty(compositeDecorator), 
    }; 

    this.focus =() => this.refs.editor.focus(); 
    this.onChange = (editorState) => this.setState({editorState}); 
    this.logState =() => console.log(this.state.editorState.toJS()); 
    this.handleKeyCommand =() => 'not-handled'; 
} 

ich so weit ging eine Dekorateur Strategie machen, die eine Reihe von Regex passt ein, um herauszufinden, ob Block ist ein Emojis wie :D, :(, :| usw.

Das Problem ist, dass ich nicht herausfinden kann, wie man auf das Element in der Strategie „mehr Requisiten passieren“, oder wie t o eine Einheit aus dem Spiel erstellen ...

Hier ist die Strategie:

const findWithRegex = (regex, contentBlock, callback) => { 
    const text = contentBlock.getText(); 
    let matchArr, start; 
    while ((matchArr = regex.exec(text)) !== null) { 
    start = matchArr.index; 
    callback(start, start + matchArr[0].length); 
    } 
} 

const emojiRegexes = [...]; 

export const emojiStrategy = (contentBlock, callback, contentState) => { 
    for (let i = 0; i < emojiRegexes.length; i++) { 
    findWithRegex(emojiRegexes[i].regex, contentBlock, callback); 
    } 
} 

export const EmojiSpan = (props) => { 
    return (
    <span 
     className={styles.emoji} 
     data-offset-key={props.offsetKey} 
    > 
     {props.children} 
    </span> 
); 
}; 

Kann mir jemand helfen? Vielen Dank!

PS: Ich kann nicht scheinen, eine wirklich eingehende Dokumentation von draft-js zu finden, der auf github hat nur flache Beschreibungen und Dummy-Beispiele.

Answer 1

Verwaltet, um zu tun, was ich auf eine andere Weise wollte, zuerst, indem Sie den Text durch Unicode-Zeichen ersetzen, die in der Zukunft Entitäten mit Metadaten sein werden. Der Code lautet wie folgt:

onChange(editorState) { 
    const contentState = editorState.getCurrentContent(); 
    let currentText = contentState.getBlockForKey(editorState.getSelection().getAnchorKey()).getText(); 

    for (let i = 0; i < emojiRegexes.length; i++) { 
    currentText = currentText.replace(emojiRegexes[i].regex,() => emojiRegexes[i].unicode) 
    } 

    if (currentText === contentState.getBlockForKey(editorState.getSelection().getAnchorKey()).getText()) { 
    this.setState({ editorState }); 
    return; 
    } 

    const updatedSelection = editorState.getSelection().merge({ 
    anchorOffset: 0, 
    }); 

    const edited = EditorState.push(
    editorState, 
    Modifier.replaceText(
     contentState, 
     updatedSelection, 
     currentText 
    ), 
    'change-block-data' 
); 

    this.setState({ editorState: edited }); 
}