React Quill - Как показать различия между двумя текстовыми версиями? - PullRequest
Новая
       71

React Quill - Как показать различия между двумя текстовыми версиями?

0 голосов
/ 14 июля 2020

В настоящее время я разрабатываю веб-сайт на React, где пользователь будет работать с текстовым редактором. В текстовом редакторе уже будет текст. Пользователь внесет некоторые изменения в текст и отправит его. Я хотел бы добавить кнопку, которая будет показывать пользователю различия между исходным текстом и его новым текстом, например Git, но до отдельных символов.

В настоящее время я пытаюсь использовать Quill для этого. Я нашел прекрасное решение моей проблемы, но оно написано простым JavaScript. Я попытался перевести его в React, установив объекты Quill в состояние: 

  const [quill_old, set_quill_old] = React.useState(new Quill('#old', {
    modules: {
      toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['image', 'code-block']
      ]
    },
    placeholder: 'Compose an epic...',
    theme: 'snow'  // or 'bubble'
  }))
  const [quill_new, set_quill_new] = React.useState(new Quill('#new', {
    modules: {
      toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['image', 'code-block']
      ]
    },
    placeholder: 'Compose an epic...',
    theme: 'snow'  // or 'bubble'
  }))
  const [quill_diff, set_quill_diff] = React.useState(new Quill('#diff', {
    modules: {
      toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['image', 'code-block']
      ]
    },
    placeholder: 'Compose an epic...',
    theme: 'snow'  // or 'bubble'
  }))

, но при инициализации кода он застревает в функции «findDiff» в этой строке: 

var oldContent = quill_old.getContents();

и возвращает ошибку: TypeError: Невозможно прочитать свойство 'length', равное undefined

Где «undefined» - «quill_old».

При попытке запустить страница без функции, страница отображается правильно, но я получаю несколько ошибок в консоли, например: quill Неверный контейнер Quill # old

Кто-нибудь знает, как правильно реализовать это решение в Реагировать? Или есть предложение по поводу какой-нибудь другой библиотеки, которую я могу использовать?

Спасибо за ваше время

...