Editor de texto sem usar exeCommand com getSelection() onde tenho um loop sem sentido

[Jazara 3]

Sei que existem vários editores de texto online, mas pelo que percebi quase todos usam a função exeCommad que está declarada como descontinuada. Tenho um editor funcuina e bonito que fiz usando o comando anterior, mas já começou a deixar de funcionar em alguns dispositivos e seus navegadores.

Com isto em vista comecei o trabalho de formiga de recriar o editor, já tive avanços interessantes e uns bugs de loop que não fazem sentido.

 

Meu nível de javascrit é muito principiante e aprendi muita coisa com a necessidade e aplicação. Estou com dificuldades em entender todas as possibilidades da função

getSelection()

e talvez isso esteja me dando mais trabalho. Apesar disto o meu problema atual é um loop que não faz o menor sentido para mim na função PASTE (colar).

 

Quando executo a colagem pela primeira vez ele cola certinho, mas puxa o ponteiro para o início do texto, mas o problema vem quando faço a segunda colagem que ele cria um loop postando duas vezes, se fizer uma terceira vez ele faz o loop 3 vezes e assim por diante...

 

https://jsfiddle.net/alexandrejazara/v4s21gof/223/
Acima o código em desenvolvimento no momento.

Abaixo a parte onde pega o texto para ser colado e que realizo um tratamento para eliminar qualquer tag vinda do WOrd ou de outra página de internet.

window.addEventListener("keydown", function(e) {

/* colar -> BUG!!! */
if (e.keyCode == 86 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
alert("Colar?");
    document.querySelector('[contenteditable]').addEventListener('paste', (e) => {
    e.preventDefault();
      const text = (e.originalEvent || e).clipboardData.getData('text/plain');
      //      alert('PASTE!!! '+text);
      cp(class_limpa[1],text);
    });
  }

  
});

 

Aparentemente até a leitura da parte AZUL ele não faz o loop, mas quando habilito o segundo alert para verificar ele é executado pelo número de colagens que faço, se fizer uma ve ele roda uma  vez, se precisar fazer uma segunda vez ele roda duas vezes e duplica o material colado e assim por diante.

Alguém sabe me dizer o que pode ser ou me dizer o termo que devo estudar para aprender a resolver isso?

Obrigado.

 

[Jazara 3]

Eu acabei descobrir.

querySelector('[contenteditable]')

quando uso querySelector ele gera o loop não entendi o motivo, mas parece que ele conta algo "talvez o número de colagens feitas"

Agradeço se alguém sobre explicar melhor.

 

Ao ler sobre este contador

lembrei que tem outras forma de identificar o local de destino então troquei querySelector por getElementsByClassName(), já que estou usando uma classe única para cada caixa de edição, ao fazer isso o loop parou. O problema é entender corretamente o erro.

 

[Omar~ 87]

Não é o queryselector que está executando um loop porque essa função nativa não se reexecuta nem devolve múltiplos dados apenas o primeiro elemento encontrado.

É a própria biblioteca jQuey que está fazendo esses loops.

É esse trecho mesmo identifiquei um loop sendo gerado, que vai executar 2 ou mais voltas:

$('.editor_' + class_limpa + '').focus(function (e) {
    $(this).on("keyup", function () {
        $('#' + class_limpa + '').html($(this).html());
        $('.status_' + class_limpa + ' span').show().html("Digitando...");
    });
});

2 voltas é certo pois .editor_ ..... possui 2 no seu exemplo

São dois elementos, mas daí para cada tecla pressionada/segurada aumenta em 2 voltas o loop.

 

Deixo um a dica para você:

Ao invés de ficar usando alert( .... )

Use console.log( o que você que ver )

Abra o inspetor do navegador e vá na aba console, com o uso do console mesmo, poderá ver onde seu código está sendo executado novamente.

[Jazara 3]

Valeu Omar pela dica... eu ainda não me acostumei com o console...

Quando a sua observação... eu não entendi... pois eu carrego o nome da class_limpa para filtrar o nome do editor_ por completo.

E quando fiz a substituição que indiquei ele funcionou de boa, fiz vários testes, fiz nas duas caixas de teste para ver se não interferiria na outra e ficou redondo...

Meu foco agora é entender o código que usei para poder saber onde eu pego para saber se já tenho a tag criada ou se não.
Se tiver ao clicar em por exemplo B quero que ela seja removida, mas e não tiver quero que ela seja criada...

já sei que vou usar o unwarp(); e que tenho que usar o parent() para identificar a tag... mas ainda estou juntando as peças...

 

Já avancei bem nas melhorias que fiz.

Quem quiser usar
https://jsfiddle.net/alexandrejazara/v4s21gof/251/