Могу ли я написать собственный декоратор в Draft.js, который позволяет работать с целым блоком, а не с отдельными объектами одновременно? - PullRequest
0 голосов
/ 18 января 2019

Дайте несколько слов текста, например:

Это какой-то текст

Я хотел бы классифицировать сегменты этого текста, которые могут перекрываться. Это просто указать с помощью Draft.js, так как я могу указать два объекта в объекте диапазонов сущностей следующим образом:

...
entityRanges: [{
    offset: 5,
    length: 7,
    key: 0
}, {
    offset: 0,
    length: 7,
    key: 1
}]
...

Draft.js допускает перекрывающиеся сущности при рендеринге без использования декораторов (по крайней мере, насколько я могу судить, сущности ведут себя разумно). Однако при применении логики рендеринга к сущностям с использованием декораторов:

const decorator = new CompositeDecorator([
  {
    strategy: (contentBlock, callback, contentState) => ... callback(x,y),
    component: SomeFuncComponent
  }
])

Сущности не могут перекрываться, и объекты в entityRanges настраиваются таким образом, что перекрытия НЕТ (т. Е. В этом случае длина второй сущности изменяется на 5)

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

// This function is referenced via CompositeDecorator objects' 'component' key
const SomeFuncComponent = (props) => <...>...</...> 

Результатом вызова SomeFuncComponent будет JSX в соответствии с этим:

<React.Fragment>
  <span data-entity-start="1"/>This <span data-entity-start="0"/>is<span data-entity-end="1"/> some<span data-entity-end="0"/> text
</React.Fragment>

Это то, чего я могу достичь с помощью декораторов в Draft.js?

...