如何合并多个draft-js ContentState？

Question

我有一个多个draft-js ContentStates的集合，我想将它们合并在一起，以便在一个<Editor />中显示。

为什么要这么做？ 通过我的GUI，您可以单独编辑文本片段，然后稍后将它们拼接在一起。 然后您将得到结果文本，您仍然可以进行编辑。

我如下持久化每个ContentState：

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

这会为我提供一个类似下面的对象:

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

我尝试的是手动合并“blocks”和“entityMap”，得到一个原始的contentState，然后使用“convertFromRaw”进行解析。

然而，每个块都有一个应该是唯一的键，在不同的contentStates中，这些键会重叠并且不是唯一的。

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

是否有人有更简单的方法来实现我正在做的事情？

- Jan Benda

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)

- dehumanizer