Пробелы неправильно распознаются в редакторе TipTap

Question

В нашем проекте мы используем редактор форматированного текста TipTap.
Но у нас есть проблема, что пробелы не распознаются правильно и только после каждых 2 щелчков создается пробел. В качестве фреймворка мы используем Vue.JS.

import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import {
  HardBreak,
  Heading,
  OrderedList,
  BulletList,
  ListItem,
  Bold,
  Italic,
  History
} from 'tiptap-extensions'
import EditorMenuButton from './EditorMenuButton.vue'
export default {
  name: 'editor',
  components: {
    EditorMenuButton,
    EditorMenuBar,
    EditorContent
  },
  props: {
    value: {
      type: null,
      default: ' '
    }
  },
  data () {
    return {
      innerValue: ' ',
      editor: new Editor({
        extensions: [
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new BulletList(),
          new OrderedList(),
          new ListItem(),
          new Bold(),
          new Italic(),
          new History()
        ],
        content: `${this.innerValue}`,
        onUpdate: ({ getHTML }) => {
          this.innerValue = getHTML()
        }
      })
    }
  },
  watch: {
    // Handles internal model changes.
    innerValue (newVal) {
      this.$emit('input', newVal)
    },
    // Handles external model changes.
    value (newVal) {
      this.innerValue = newVal
      this.editor.setContent(this.innerValue)
    }
  },
  mounted () {
    if (this.value) {
      this.innerValue = this.value
      this.editor.setContent(this.innerValue)
    }
  },
  beforeDestroy () {
    this.editor.destroy()
  }
}
</script>

Кто-нибудь знает, в чем может быть причина использования только каждых двух пробелов?

Answer 1

У нас была такая же проблема, мы сохранили onUpdate триггер, но изменил часы так, чтобы они вызывали только editor.setContent когда значение действительно было другим.

        watch: {
    value() {
      let html = this.editor.getHTML();
      if (html !== this.value) {
        this.editor.setContent(this.value);
      }
    },
  },

Answer 2

Удалите раздел onUpdate, и ошибка исчезнет. Не знаю почему, но интересно узнать, как воспроизвести ошибку.

Это действительно помогает. Следуя этому совету, я сейчас используюonBlur событие вместо onUpdate, при получении HTML содержимого с помощью экземпляра редактора и getHTML() функция, как таковая: this.editor.getHTML().

(В моем случае я $emit это значение, чтобы он реагировал на мой родительский компонент, но это может не иметь отношения к исходному вопросу).

Answer 3

«Хорошо, проблема в том, что наблюдатель запускается, когда вы вводите текст в редакторе. Таким образом, это проверяет, находится ли редактор в фокусе, и обновляет только содержимое редактора, если это не так».

       watch: {
    value(val) {
      if (!this.editor.focused) {
        this.editor.setContent(val, false);
      }
    }
  },

проблема: https://github.com/ueberdosis/tiptap/issues/776#issuecomment-667077233

Answer 4

Может быть, вам стоит попробовать это.

      watch: {
    // Handles external model changes.
    value (newVal) {
        // convert whitespace into \u00a0 ->  
        let content = newVal.replace(/\s/g, "\u00a0");
        this.editor.setContent(content)
    }
},

Кажется, что обычное пустое пространство было удалено html автоматически. Поэтому я конвертирую пробелы в 'nbsp;' и это сработало.

Answer 5

Эта ошибка для меня была вызвана чем-то вроде этого:

  watch: {
    value: {
      immediate: true,
      handler(newValue) {
        this.editor.setContent(newValue)
      },
    },
  },

Это полностью удалено, и ошибка исчезла. Может быть, это кому-то поможет в будущем.

Answer 6

Удалите раздел onUpdate, и ошибка исчезнет. Не знаю почему, но интересно узнать, как воспроизвести ошибку. Однако, если вы создадите "минимальный воспроизводимый пример", ошибка не появится. И что? Я не знаю.

Я нашел обходной путь - использовать vuex.

Вместо того, чтобы присваивать значение, возвращаемое getHTML() в переменной innerValue, а затем выдавать событие input, я помещаю это значение в хранилище.

Answer 7

Код, который вы предоставили, похоже, работает нормально. Таким образом, проблема, скорее всего, вызвана побочным эффектом в вашем коде или какой-либо зависимостью.

Чтобы отладить эту проблему, вы можете искать прослушиватели событий, особенно в отношении событий нажатия или нажатия клавиши, и смотреть, проверяете ли вы пробел специально где-то (event.keyCode === 32 или event.key === " "). В сочетании сevent.preventDefault это могло бы объяснить такую ​​проблему.

Еще один более широкий способ отладки - убирать части из кода до тех пор, пока ошибка не исчезнет, ​​или добавлять к минимальному примеру, пока ошибка не появится.