Mokybrow
@Mokybrow
Студент

Как изменить содержание блока програмно со свойством contentEditable?

появилась такая проблема, реализовываю сейчас функционал упоминаний пользователей и вот когда пользователь вводит ключевой символ например # и появляется список пользователей. После выбора одного из пользователей вставляется ссылка на него в поле div со свойством contentEditable. но и при этом остаётся старый текст, например я начал набирать в поле #mok выбрал пользователя с именем Дмитрий и получилось #mokДмитрий. Знатоки, внимание, вопрос. Как удалить последние n символов до решётки в поле, пишу на react, фрагменты кода прилагаю ниже.

Это сам контейнер
<div
  id="conten"
    className={styles.input}
    onInput={InputHandler}
    data-placeholder="Введите текст..."
    contentEditable
  >
  </div>


Ниже функции обработчики

const handleInsertGame = (name: string, link: string) => {
   var el = document.getElementById("conten")
   console.log(el?.innerText.replace(/\s+/g, ' ').split(' ').pop())
   const selection = window.getSelection();
   const range = selection?.getRangeAt(0);
   range?.deleteContents()
   const newElement = document.createElement('span');
   newElement.innerHTML = `<a href="games/${link}">${name}</a>`;
   range?.insertNode(newElement);
};

const InputHandler = (e: any) => {
const text = e.target.innerHTML
const textw = e.target.innerText
console.log('Текст из поля', textw)
// console.log(text)

setCommentText(text)
if (textw && textw.includes('#')) {
  const lastWord = textw.replace(/\s+/g, ' ').split(' ').pop()

  if (lastWord[0] === '#') {
    setSearchQuery(lastWord.trim().substring(1))
    setFilter(lastWord.trim().substring(1));
    if (games_store.searchedGames.length > 0) {
      setIsShow(true)
    }
    // console.log(filter)
    return;
  }
}
}
  • Вопрос задан
  • 117 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы