Пользовательский блок с сущностью черновика JS не может проходить через stateToHTML - PullRequest
Новая
       25

Пользовательский блок с сущностью черновика JS не может проходить через stateToHTML

0 голосов
/ 29 января 2020

Недавно я создал блок Atomi c для чернового редактора. Там, где я создал Блок с сущностью

Атоми c Блок с сущностью 

let contentState = editorState.getCurrentContent();
let contentStateWithEntity = contentState.createEntity(
    'ATTACHMENT',
    'MUTABLE',
    {url: response.link, value: response.filename},
);
let entityKey = contentStateWithEntity.getLastCreatedEntityKey();

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

onChange(AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));

Рендеринг блока с помощью функции blockRenderer ,

Функция блочного рендеринга 

blockRenderer = (block) => {
    const { editorState } = this.state;
    console.log('block type', block.getType());
    if (block.getType() === 'atomic') {
        const contentState = editorState.getCurrentContent();
        const entityKey = block.getEntityAt(0);
        const entity = contentState.getEntity(entityKey);

        if (entity && entity.type === 'ATTACHMENT') {
            return {
                component: RenderFile,
                editable: true,
            };
        }
    }
}

Это компонент RenderFile

Компонент RederFile 

import React, { Component } from 'react'

export default class RenderFile extends Component {
    render() {
        const { block, contentState } = this.props;
        const entity = contentState.getEntity(block.getEntityAt(0));
        const { url, value: text } = entity.getData();

        return (
            <div className="rdw-file-wrapper">
                <a href={url} className="link" download target="_blank">
                    {text}
                </a>
            </div>
        )
    }
}

Мне нужно преобразовать editorState в HTML содержимое. Для этого я использовал функцию stateToHTML из draft-js-export-html.

entityStyleFn для stateTo HTML options 

entityStyleFn: (entity) => {
    const entityType = entity.get('type').toLowerCase();
    if (entityType === 'attachment') {
        const data = entity.getData();
        return {
            element: 'a',
            attributes: {
                href: data.url,
                target:'_blank'
            }
        };
    } 
}

Все работает нормально, но проблема в том, stateToHTML возвращает ссылку ATTACHMENT как <a href='somehref' target='_blank'>&nbsp;</a>. Он опускает якорный тег innerHTML и добавляет только &nbsp;, поскольку он является внутренним HTML. Как я могу получить ссылку как <a href='somehref' target='_blank'>some inner text</a>? Есть ли какая-либо опция в функции entityStyleFn, где я могу передать текстовое значение ссылки?

...