Как хранить и повторно применять блики из библиотеки TextHighlighter - PullRequest
Новая
       33

Как хранить и повторно применять блики из библиотеки TextHighlighter

0 голосов
/ 01 мая 2020

Я просматривал эту библиотеку TextHighlighter , но, похоже, не могу понять, как сохранить блики (которые будут храниться в моей базе данных), а затем повторно применить блики к тому же тексту в позднее (текст хранится отдельно от основных моментов). Я думаю, что это как-то связано с serialize / deserialize , но я не уверен. Есть демонстрация сериализации / десериализации , но мне все еще не ясно, как ее использовать.

Вот пример кода, который я использую для инициализации TextHighlighter:

. / Highlighter. js

import TextHighlighter from "@perlego/text-highlighter";

function highlighter(pageElement, overrideOptions) {
  const onRemoveHighlight = highlightElement => {
    console.log(highlightElement)
    const proceed = window.confirm(
      "Are you sure you want to remove this highlight?"
    );
    return proceed;
  };

  const preprocessDescriptors = (range, descriptors, timestamp) => {
    // Add an ID to the class list to identify each highlight
    // (A highlight can be represented by a group of elements in the DOM).
    const uniqueId = `hlt-${Math.random()
      .toString(36)
      .substring(2, 15) +
      Math.random()
        .toString(36)
        .substring(2, 15)}`;

    const descriptorsWithIds = descriptors.map(descriptor => {
      const [wrapper, ...rest] = descriptor;
      return [
        wrapper.replace(
          'class="highlighted"',
          `class="highlighted ${uniqueId}"`
        ),
        ...rest
      ];
    });

    return { descriptors: descriptorsWithIds, meta: { id: uniqueId } };
  };

  const onAfterHighlight = (range, descriptors, timestamp, meta) => {
  };

  const defaultOptions = {
    version: "independencia",
    onAfterHighlight,
    preprocessDescriptors,
    onRemoveHighlight
  };

  const updatedOptions = { ...defaultOptions, ...overrideOptions };

  new TextHighlighter(pageElement, updatedOptions);
}

export default highlighter;

. / MyProject. js

    const overridingOptions = {
      onAfterHighlight: (range, descriptors, timestamp, meta) => {
        console.log(range, descriptors, timestamp, meta);
      }
    };

    const target = document.getElementsByClassName("testme")[0];
    highlighter(target, overridingOptions);
...