DraftJs

Question

我的目标：让我的编辑器预填充一些默认文本和不可变实体。将成为实体的文本部分将是与列表匹配的字符串（{{ immutable1 }}、{{ immutable2 }} 等）。如果有人在编辑器中键入与预定义标记列表匹配的字符串，那么他们刚刚键入的字符串会立即被修饰并设置为不可变实体。

问题：当预填充到编辑器中的默认文本在多个块中包含标记时然后它会中断并且似乎将最后一个块中的代币添加到第一个块中。

我正在用这种方式填充编辑器的初始状态：

const blocksFromHTML = convertFromHTML(DEFAULT_TEXT)
  const state = ContentState.createFromBlockArray(
    blocksFromHTML.contentBlocks,
    blocksFromHTML.entityMap
  )
  const [editorState, setEditorState] = React.useState(
    EditorState.createWithContent(
      state,
      compositeDecorator
    )
  )

...

<Editor
 editorState={editorState}
 onChange={handleChange}
/>

这个DEFAULT_TEXT工作正常：

DEFAULT_TEXT = 'This is the first block {{ immutable1 }} with some tokens {{ immutable2 }}
This is 2nd block with no tokens. This works fine.
The tokens are immutable and if you type more then they will become immutable too'

这个DEFAULT_TEXT打破了它：

DEFAULT_TEXT = 'This is the first block {{ immutable1 }} with some tokens {{ immutable2 }}
This 2nd block has a token {{ immutable3 }}. Apparently having a token in more than one block causes this issue.
Click anywhere in the editor and it will act erratically and add tokens.'

如何重现：进入我下面的codesandbox link并点击编辑器中的任意位置。由于某种原因，您会看到它向第一个块添加了标记 {{ immutable1 }} 和 {{ immutable3 }}。如果您想看到它正常工作，只需注释掉第 33 行即可。

代码在这里：https://codesandbox.io/s/distracted-lewin-quwcr?file=/src/App.tsx

Answer 1

尝试替换以下行...

const currentSelectionState = nextState.getSelection()

有了这个...

const currentSelectionState = SelectionState.createEmpty(contentBlock.getKey())

这样一来，您始终可以保证在当前块中创建选择。此外，您可能希望将 setEditorState(nextState) 移出两个循环。不用每次都更新

DraftJs - 当从 EditorState.createWithContent() 添加实体时，编辑器将实体添加到错误的块

DraftJs - Editor is adding entities to the wrong block when entities are added from EditorState.createWithContent()

typescript

reactjs