Как я могу сделать настраиваемый визуализированный блок доступным только для чтения в редакторе Draft.js, когда его реквизит readOnly имеет значение true?

Я использую компонент Draft.js Editor. У меня есть пользовательский рендерер блоков, указанный правильно через blockRendererFn prop. Компонент отображает EditorBlock, импортированный из draft-js, как указано в Черновик документации. В реквизитах, которые я получаю в своем средстве визуализации пользовательского блока, у меня нет информации о том, доступен ли блок только для чтения или нет. По крайней мере, не по умолчанию. Я мог бы получить его через blockProps, однако я чувствую, что что-то упускаю. Вроде должно естественно работать при использовании EditorBlock. Как будто он может получить значение readOnly из контекста или что-то в этом роде.

Я обязан отображать свой блок без EditorBlock, когда readOnly равен true? И я обязан передать значение readOnly моему пользовательскому блоку рендеринга через blockProps?


reactjs javascript draftjs
person Vilém Jeniš    schedule 03.05.2016    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Ну, я получил ответ от команды slack draftjs, поэтому я подытожу его здесь:

Достаточно установить для readOnly значение true, чтобы предотвратить любые обратные вызовы onChange во всем редакторе. Моя проблема была своего рода ошибкой, когда я установил editable в true в пользовательском рендерере блоков, который я вернул из blockRendererFn. Это привело к тому, что флаг readOnly был переопределен, что позволило внести изменения в мой пользовательский блок. Исаак назвал это потенциально нежелательным поведением.

Решение в моем случае состояло в том, чтобы не указывать, доступен ли мой блок для редактирования или нет в средстве визуализации пользовательских блоков. Таким образом, readOnly правильно учитывается, и мне больше нечего делать.

person Vilém Jeniš    schedule 04.05.2016

arrow_upward
4
arrow_downward

Передача readOnly={readOnly} в редактор устраняет проблему.

<Editor
  readOnly={readOnly}
/>
person A.Veryga    schedule 23.07.2018