如何在slatejs中生成自定义密钥？

Question

我试图使WYSIWYG编辑器能够对选定的文本进行注释。

首先，我使用了Draft.js。但是，它不适合使用键指向带注释的文本，因为Draft.js的实体键是在重复选择时启动的。

所以，当我搜索其他与此相关的库时，我发现了slatejs。

slatejs有“setKeyGenerator”功能。然而，我找不到任何关于slatejs的“setKeyGenerator”的信息。这个util只是像下面这样设置函数。

function setKeyGenerator(func) {
  generate = func;
}

我不知道如何使用这个函数生成密钥。

那么，有人知道如何使用这个函数或者对注释所选的文本有什么想法吗？

Answer 1

如果您试图通过以下方法生成引用元素(块)的键，那么您可以这样做：

// A key to reference to block by (you should make it more unique than `Math.random()`)
var uniqueKey = Math.random();

// Insert a block with a unique key
var newState = this.state
    .transform()
    .insertBlock({
        type: 'some-block-type',
        data: {
            uniqueKey: uniqueKey
        },
    })
    .apply();

// Get the block's unique Slate key (used internally)
var blockKey;
var { document } = self.state;
document.nodes.some(function(node) {
    if (node.data.get('uniqueKey') == uniqueKey) {
        blockKey = node.key;
    }
});

// Update data on the block, using it's key to find it.
newState = newState
    .transform()
    .setNodeByKey(blockKey, {
        data: {
            // Define any data parameters you want attached to the block.
            someNewKey: 'some new value!'
        },
    })
    .apply();

这将允许您在insert块上设置一个唯一的键，然后获取该块的实际SlateJs key并使用它更新该块。

Answer 2

Slate提供了一个KeyUtils.setGenerator(myKeygenFunction)来传递我们自己的密钥生成器。这使我们有机会在编辑器实例中创建真正独特的键。

在导入此组件的父级中，为PlainText组件的每个实例传递一个不同的PlainText支柱，您应该很好。就像这样：

['first-editor', 'second-editor'].map((name, idx) => <PlainText idFromParentIteration={name + idx} />)

下面是一个使用自定义密钥生成器的完整示例。

import React from "react";
import Plain from "slate-plain-serializer";
import { KeyUtils } from 'slate';
import { Editor } from "slate-react";

const initialValue = Plain.deserialize(
  "This is editable plain text, just like a <textarea>!"
);

class PlainText extends React.Component {
  constructor(props) {
    super(props);
    let key = 0;
    const keygen = () => {
      key += 1;
      return props.idFromParentIteration + key; // custom keys
    };
    KeyUtils.setGenerator(keygen);
  }
  render() {
    return (
      <Editor
        placeholder="Enter some plain text..."
        defaultValue={initialValue}
      />
    );
  }
}

export default PlainText;