Converte títulos colados em parágrafos no editor de dispositivos (#3863)

Texto colado de estilos de título do Word ou de páginas web chega ao
TinyMCE como h1-h6: fica em negrito e não pode ser desfeito, porque o
botão de negrito apenas acrescenta um strong e "remover formatação"
mantém o título. A barra também não oferecia como trocar o bloco, pois
"styleselect" não existe mais no TinyMCE 7 e era ignorado.

- initTextRichEditor ganha o parâmetro paste_titulos_como_paragrafo,
  que converte h1-h6 colados em p, mantendo o alinhamento
- Parâmetro ativado nos editores de dispositivos da compilação
- "styleselect" substituído por "blocks" na barra de ferramentas

Co-authored-by: Edward <9326037+edwardoliveira@users.noreply.github.com>

frontend/src/__global/js/tinymce/index.js

@@ -14,7 +14,23 @@ import 'tinymce/plugins/table'
 import './langs/pt_BR.js'
 
 window.tinymce = tinymce
-window.initTextRichEditor = function (elements, readonly = false, paste_as_text = false) {
+// Títulos (h1-h6) vindos de estilos de título do Word ou de páginas web
+// chegam em negrito e não podem ser desfeitos pelo botão de negrito nem
+// por "remover formatação". Converte-os em parágrafos, mantendo o alinhamento.
+function colarTitulosComoParagrafo (editor, args) {
+  args.node.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(function (titulo) {
+    const paragrafo = document.createElement('p')
+    if (titulo.style.textAlign) {
+      paragrafo.style.textAlign = titulo.style.textAlign
+    }
+    while (titulo.firstChild) {
+      paragrafo.appendChild(titulo.firstChild)
+    }
+    titulo.replaceWith(paragrafo)
+  })
+}
+
+window.initTextRichEditor = function (elements, readonly = false, paste_as_text = false, paste_titulos_como_paragrafo = false) {
   const configTinymce = {
     selector: elements === null || elements === undefined ? 'textarea' : elements,
     language: 'pt_BR',
@@ -22,10 +38,13 @@ window.initTextRichEditor = function (elements, readonly = false, paste_as_text
     forced_root_block: 'p',
     paste_as_text,
     plugins: 'table lists advlist link code',
-    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | code | removeformat ',
+    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | code | removeformat ',
     menubar: 'file edit view insert format table',
     license_key: 'gpl'
   }
+  if (paste_titulos_como_paragrafo) {
+    configTinymce.paste_postprocess = colarTitulosComoParagrafo
+  }
   if (readonly) {
     configTinymce.readonly = 1
     configTinymce.menubar = false

sapl/templates/compilacao/dispositivo_form_alteracao.html

@@ -7,6 +7,6 @@
       'url_form': '{% url 'sapl.compilacao:dispositivo_search_form'%}',
       'text_button': '{% trans 'Definir Dispositivo'%}'
     });    
-     initTextRichEditor();
+     initTextRichEditor(null, false, false, true);
   </script>
 {% endblock %}

sapl/templates/compilacao/dispositivo_form_edicao_basica.html

@@ -31,6 +31,6 @@
         });
     }
 
-     initTextRichEditor();
+     initTextRichEditor(null, false, false, true);
   </script>
 {% endblock %}