How to generate the customized key in slatejs? - reactjs

Question

I'm trying to make WYSIWYG editor that it is possible to annotate about selected text.
Firstly, I used Draft.js. However, it was not suitable for pointing the annotated text using key because entity key of Draft.js was initiated when selections were duplicated.
So, I found the slatejs while I searched other libraries related this stuff.
The slatejs had 'setKeyGenerator' utils. However, I couldn't find any information about 'setKeyGenerator' of slatejs. This util is just setting function like below.
function setKeyGenerator(func) {
generate = func;
}
And I didn't know how to generate key using this function.
Then, Anyone know how to use this function or have any idea for annotation selected text?

Answer 1

If you're trying to generate a key to reference an element (block) by, here's what you can do:
// 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();
That will allow you to set a unique key on an insert block, and then get the block's actual SlateJs key and update the block with it.

Answer 2

Slate provides a KeyUtils.setGenerator(myKeygenFunction) to pass our own key generator. This gives us the opportunity to create truly unique keys across Editor instances.
In the parent that imports this component, pass a different idFromParentIteration prop for each instance of PlainText component and you should be good.
Like so:
['first-editor', 'second-editor'].map((name, idx) => <PlainText idFromParentIteration={name + idx} />)
And here's a complete example with a custom key generator.
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;