#339 - Update DiploPanel.vue _ copying-empty-lines-in-panel-4-should-insert-cr

An update of DiploPanel.vue allowing to paste some text including empty line, with several points:

• paste text at a cursor position or in replacement onto a range selection (also works after selection of whole page/ctrl+a)
• taking account of empty lines from copied transcription (from panel 4) and from plain text

added feature request label

Ok this works well and I see that you added the capability to paste html which is nice, the only regression I found is when you paste in the middle of a line a new line is added automatically whether or not there is one in the pasted text - this behavior was being made possible by document.execCommand('insertText', false, content); but honestly I don't really mind too much so if it's too hard to fix we can just merge as is.

Ok thank you Robin I can try to fix it but I am not sure. I keep you informed if I manage

Hello Robin, the issue you mentioned will be hard to fix for me because :

• as I do not know if the paste is done into a div itself (within some middle of a line) or at the beginning of a line div.. and I had to tell the script that any paste had to be sepecified as a new line to get it work safetely... So, I think I could resolve this but I dont know how long this will take (making several checks in what context text is to be pasted etc.).. So for now maybe you could merge this because I think this is will be "touchy" .. but I will keep on thinking about it.

While reviewing your code line by line it made me understand that e.clipboardData.getData('text/plain'); was the root of the problem and so I managed to remove a lot of code in the solution, in the end the diff just boils down to:

         onPaste(e) {
-            let pastedData = e.clipboardData.getData('text/plain');
-            let pasted_data_split = pastedData.split('\n');
+            let pastedData;
+            if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.getData) {
+                let types = e.clipboardData.types;
+                if (((types instanceof DOMStringList) && types.contains("text/html")) || (types.indexOf && types.indexOf('text/html') !== -1)) {
+                    let content = e.clipboardData.getData('text/html');
+                    let tmpDiv = document.createElement('div');
+                    tmpDiv.innerHTML = content;
+                    pastedData = [ ...tmpDiv.childNodes].map(e=>e.textContent).join('\n');
+                } else {
+                    pastedData = e.clipboardData.getData('text/plain');
+                }
+            } else {
+                // not sure if this can actually happen in firefox/chrome?!
+                pastedData = "";
+            }
 
+            let pasted_data_split = pastedData.split('\n');
             if (pasted_data_split.length == 1) {

I don't want to make a new branch or commit on top of your code since it's only a cleanup of your solution, so can you try it and commit if it works for you, so that you can keep the merit of it? Added benefit is I think there is no regression.

OK Robin, thank you I try it

I am cleaning it up thanks to your code but I found another main issue; not regarding your code but of my solution. I am working on it

added 1 commit

• a5eda613 - Update DiploPanel.vue

Compare with previous version

Hi Robin, I finished to work on it. This is based on your cleanup code . Thanks to this, this was more clear and I found some issues I forgot. So I added some other controls to fix it. For example, paste several lines just does not mean to create several nodes and paste it. In some selection configuration, the resulting caret position can be outside a line div (but between 2 divs). This occurs after a select all or when we select whole lines and does not occur for example when we select parts of a (several) line(s). So in this case only we have to create a new node. That is for that issue I could write a "line 0" after a ctrl+a selection the last time I shew it.

Also, to avoid new lines/CR on each part of the pasted content, we have to merge the previous and next line contents to it - if these contents are empty lines, these will be preserved as well.

Finally I added a cursor/caret position management after the paste done.

I tested my code with these crossed cases: paste a single/several lines on a punctual/range selection. In the case of a range selection, I tried on a range within a single line, and a range through several lines.

I just committed the new version in the branch.

merged

mentioned in commit 1433a92a