How to generate the customized key in slatejs?

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.