WYSIWG: Improved handling of cross-block code block creation

- Updated code content to get specific text selection instead of using
  node-based handling which could return the whole document when
  multiple top-level nodes were in selection.
- Simplified how code gets applied into the page to not be node based
  but use native editor methods to replace the selection. Allows
  creation from half-way through a block.

Tested on chrome+Firefox on Fedora 35.
Builds upon changes in #3246.
For #3200.

diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js
index 789317a24694526e68291df98d017cab894dcb8f..2dd5da410873829a36060659892138597d47fec1 100644 (file)
--- a/resources/js/components/wysiwyg-editor.js
+++ b/resources/js/components/wysiwyg-editor.js
@@ -136,18 +136,14 @@ function codePlugin() {
         const selectedNode = editor.selection.getNode();
 
         if (!elemIsCodeBlock(selectedNode)) {
-            const providedCode = editor.selection.getNode().innerText;
+            const providedCode = editor.selection.getContent({format: 'text'});
             window.components.first('code-editor').open(providedCode, '', (code, lang) => {
                 const wrap = document.createElement('div');
                 wrap.innerHTML = `<pre><code class="language-${lang}"></code></pre>`;
                 wrap.querySelector('code').innerText = code;
 
-                editor.formatter.toggle('pre');
-                const node = editor.selection.getNode();
-                editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML);
-                editor.fire('SetContent');
-
-                editor.focus()
+                editor.insertContent(wrap.innerHTML);
+                editor.focus();
             });
             return;
         }