javascript - 如何合并多个draft-js ContentState

Question

我收藏了多个 draft-js ContentStates我想将它们合并在一起以将它们显示在一个 <Editor />
为什么？
通过我的 GUI，您可以单独编辑文本片段，然后稍后将它们连接在一起。
然后您会看到结果文本，您仍然可以对其进行编辑。

我坚持个人ContentStates如下:

const contentState = EditorState.getCurrentContent();
const raw = convertToRaw(contentState);

这给了我一个对象:

{
   blocks: [...],
   entityMap: {...}
}

我尝试的是手动合并 blocks和 entityMap , 得到一个结果原始 contentState，然后我可以用 convertFromRaw 解析它

然而，每个块都有一个所谓的唯一键，在不同的 contentState 中，这些键重叠并且不是唯一的。

因此，这种情况下的结果是某些块被其他具有相同 key 的块覆盖。

有没有人有一个更简单的方法来实现我正在做的事情的想法？

Answer 1

Draft.js 中有一个函数可以生成唯一键:

import { genKey } from 'draft-js'

如果您查看它的代码，您会发现它是有状态的(请参阅 seenKeys ？):

const seenKeys = {};
const MULTIPLIER = Math.pow(2, 24);
  
function generateRandomKey(): string {
    let key;
  
    while (key === undefined || seenKeys.hasOwnProperty(key) || !isNaN(+key)) 
    {
       key = Math.floor(Math.random() * MULTIPLIER).toString(32);
    }
  
    seenKeys[key] = true;
    return key;
}
  
module.exports = generateRandomKey;

所以我相信，您可以通过映射块并重新生成它们的键来解决您的问题(我将使用 Ramda 来获得更简洁和富有表现力的代码):

import * as R from 'ramda'

const mergedObjectWithOverlappingKeys = {
   blocks: [...],
   entityMap: {...}
}

const result = R.evolve({
   blocks: R.map(R.assoc('key', genKey())),
})(mergedObjectWithOverlappingKeys)