Как сгенерировать индивидуальный ключ в slatejs?

Question

Я пытаюсь сделать WYSIWYG-редактор, чтобы можно было комментировать выделенный текст.

Во-первых, я использовал Draft.js. Однако он не был пригоден для указания аннотированного текста с использованием ключа, поскольку ключ сущности Draft.js был инициирован, когда выборки дублировались.

Итак, я нашел slatejs, пока искал другие библиотеки, связанные с этим материалом.

У slatejs были утилиты setKeyGenerator. Тем не менее, я не смог найти никакой информации о setKeyGenerator slatejs. Эта утилита просто устанавливает функцию, как показано ниже.

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();

Это позволит вам установить уникальный ключ на блок вставки, а затем получить фактические SlateJs блока key и обновить блок с ним.

Answer 2

Шифер обеспечивает KeyUtils.setGenerator(myKeygenFunction) передать наш собственный генератор ключей. Это дает нам возможность создавать действительно уникальные ключи в экземплярах редактора.

В родительском объекте, который импортирует этот компонент, передайте другой idFromParentIteration опора для каждого случая 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;