DraftJS - не разрешить выбор, копирование или изменение объекта? - PullRequest
Новая
       19

DraftJS - не разрешить выбор, копирование или изменение объекта?

0 голосов
/ 05 мая 2019

У меня есть компонент React Dropzone, который берет изображение, загружает его и затем ссылается на это изображение как

Я могу отлично настроить пользовательский элемент в DraftJS, но моя проблема в том, что пользователь может выбрать и удалить эту сущность, я хочу, чтобы сущность всегда существовала и была неподвижной и не удаляемой.

Это мой компонент: 

export const ContentItemInlineTextImage = (props: IContentItemTextProps) => {
    const { onChange } = props
    const imageUrl = props.value && !strIsNullOrEmpty(props.value.imageUrl) ? props.value.imageUrl : "https://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/1200px-025Pikachu.png"

    const blockRenderMap = Immutable.Map<DraftBlockType, DraftBlockRenderConfig>({
        'header-two': {
            element: 'h2'
        },
        'unstyled': {
            element: 'div'
        }
    } as any);

    const rawContent = {
        blocks: [
            {
                text: (
                    '1Enter Text Here'
                ),
                type: 'unstyled',
                entityRanges: [{ offset: 0, length: 1, key: 'first' }],
            },
        ],

        entityMap: {
            first: {
                type: 'TOKEN',
                mutability: 'IMMUTABLE',
            }
        },
    };

    const ImageArea = (props:any) => {
        return (
            <div style={{float: 'right'}}>
            <ContentItemImage imageUrl={imageUrl} onChange={(url)=> {
                onChange({
                    imageUrl: url,
                    text: ""
                })
            }} />
            </div>
        );
    };


    function getEntityStrategy(mutability: any) {
        return function (contentBlock: any, callback: any, contentState: any) {
            contentBlock.findEntityRanges(
                (character: any) => {
                    const entityKey = character.getEntity();
                    if (entityKey === null) {
                        return false;
                    }
                    return contentState.getEntity(entityKey).getMutability() === mutability;
                },
                callback
            );
        };
    }

    const decorator = new CompositeDecorator([
        {
            strategy: getEntityStrategy('IMMUTABLE'),
            component: ImageArea,
        },
        {
            strategy: getEntityStrategy('MUTABLE'),
            component: ImageArea,
        },
        {
            strategy: getEntityStrategy('SEGMENTED'),
            component: ImageArea,
        },
    ]);

    const blocks = convertFromRaw(rawContent as any);


    const [editorState, setEditorState] = React.useState<EditorState>(EditorState.createWithContent(blocks, decorator))


    return <>
        <Editor
            blockRenderMap={blockRenderMap as any}
            blockRendererFn={(block) => {
                console.log(block)
            }}
            editorState={editorState} onChange={(state) => {
                setEditorState(state)
            }} />
    </>
}

редактирование:

Я исследую это в onChange: 

 onChange={(state) => {
                const raw = convertToRaw(state.getCurrentContent())
                onChange({
                    imageUrl: imageUrl,
                    text: raw.blocks[0].text
                })

// как-то мутируем состояние ... setEditorState (состояние) }} />

Так что я могу перехватывать изменения, когда меняются диапазоны сущностей - что я хотел бы сделать, это удалить все диапазоны сущностей из raw.blocks [0] .text - есть ли способ, которым я могу легко сделать это с помощью API draftjs или мне нужно вручную удалить диапазоны сущностей, используя строковые утилиты javascript?

Я также не уверен, как можно предотвратить выбор или удаление диапазона сущностей, делая это ..

...