Facebook内のデコレータでリンクエンティティを作成する方法Draft.js

Question

Facebook Draft.jsを使用しています。テキストに有効なURLが検出されたときにLINKエンティティを作成する必要があります。

現在、draft-js-linkify-pluginのようなテキストにリンクがあるかどうかを検出する戦略を実装していますが、そのテキストを不変のLINKエンティティに変更する際に問題があります。

実際、エディターの小道具で飾るのですが、私はエディターの状態を変更することができませんので、この新しいLINKエンティティを適用してください。

デコレータ：

const decorator = new CompositeDecorator([{ 
    strategy: findLinks, 
    component: decorateComponentWithProps(Link, { 
     getEditorState: this.getEditorState.bind(this), 
     setEditorState: this.onChange.bind(this) 
    }), 
}]); 

戦略：

function findLinks(contentBlock, callback) { 
    const links = linkify.match(contentBlock.getText()); 
    if (links) { 
     links.map(link => callback(link.index, link.lastIndex)) 
    } 
} 

コンポーネント：私はそこに問題がslectionStateであるか、テキストブロックを取得する知っている

const Link = (props) => { 
    const editorState = props.getEditorState(); 
    const contentState = editorState.getCurrentContent(); 
    const selectionState = editorState.getSelection(); 

    const contentStateWithEntity = contentState.createEntity(
     'LINK', 
     'IMMUTABLE', 
     { url: props.decoratedText } 
    ); 
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey(); 

    const contentStateWithLink = Modifier.applyEntity(
     contentStateWithEntity, 
     selectionState, 
     entityKey 
    ); 

    const entity = contentStateWithLink.getEntity(entityKey); 
    const { url } = entity.getData(); 
    const type = entity.getType(); 

    const newEditorState = EditorState.set(editorState, { 
     currentContent: contentStateWithEntity 
    }); 
    props.setEditorState(newEditorState); 

    return <a href={url} target="_blank">{url}</a>; 
}; 

cの代わりにそれを修正する新しいエンティティをリベートするが、私は少し失われている。私はこれを作るのに正しい論理を使っていますか？あなたの助けのための

おかげで、

Answer 1

私はドラフトに反応し、まだ競合がなくても、それらを編集する可能性を持っているにデコレータと<a>タグを構築して、この特定の問題に対する解決策を見ていないてきました。しかし、ここでは2つの選択肢だ

：あなたがテキストを選択し、それがで詳述されるリンクボタン をクリックすると

1. がリンクエンティティを作成しますが、ドラフトの例を反応させます。エディタ内のリンクを表示するための

2. 使用デコレータは、その後、上のリンクを取得し、<a>タグによってそれらを交換することにより 編集、あなたのコンテンツを提出します。 いずれの場合でも、私はまだセキュリティ上の理由からコンテンツサーバー側を浄化する必要があると思います。それを利用して、おそらくあなたのリンクを短縮してください。

---

最初のソリューションを使用すると、記事やブログのコンテンツを作成するときに適しています。 メッセージングシステムのドラフトを使用しているときは、2番目の方が便利です。