Desktop: Fixes #5626: When web clipper clipping code blocks, keep cod…

…e in multiline and delete code number lines (#10126) Co-authored-by: Laurent Cozic <laurent22@users.noreply.github.com> Co-authored-by: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
laurent22 · Apr 20, 2024 · 294cc4a · 294cc4a
1 parent ae1347b
commit 294cc4a
Show file tree

Hide file tree

Showing 14 changed files with 320 additions and 37 deletions.
diff --git a/packages/app-cli/tests/html_to_md/code_multiline_1.html b/packages/app-cli/tests/html_to_md/code_multiline_1.html
@@ -0,0 +1,24 @@
+<!-- this is from: https://flaviocopes.com/bubble-sort-javascript/ -->
+<div><pre class="astro-code github-dark" style="background-color: rgb(36, 41, 46); color: rgb(225, 228, 232); overflow-x: auto; --darkreader-inline-bgcolor: #1d2125; --darkreader-inline-color: #d7d4cf; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;" tabindex="0" data-darkreader-inline-bgcolor="" data-darkreader-inline-color=""><code><span class="line"><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">const</span><span style="color: rgb(179, 146, 240); --darkreader-inline-color: #ab86ee;" data-darkreader-inline-color=""> bubbleSort</span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color=""> =</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> (</span><span style="color: rgb(255, 171, 112); --darkreader-inline-color: #ffa668;" data-darkreader-inline-color="">originalArray</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">) </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">=&gt;</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> {</span></span>
+	<span class="line"><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">  let</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> swapped </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">=</span><span style="color: rgb(121, 184, 255); --darkreader-inline-color: #6ebdff;" data-darkreader-inline-color=""> false</span></span>
+	<span class="line"></span>
+	<span class="line"><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">  const</span><span style="color: rgb(121, 184, 255); --darkreader-inline-color: #6ebdff;" data-darkreader-inline-color=""> a</span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color=""> =</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> [</span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">...</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">originalArray]</span></span>
+	<span class="line"></span>
+	<span class="line"><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">  for</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> (</span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">let</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> i </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">=</span><span style="color: rgb(121, 184, 255); --darkreader-inline-color: #6ebdff;" data-darkreader-inline-color=""> 1</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">; i </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">&lt;</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> a.</span><span style="color: rgb(121, 184, 255); --darkreader-inline-color: #6ebdff;" data-darkreader-inline-color="">length</span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color=""> -</span><span style="color: rgb(121, 184, 255); --darkreader-inline-color: #6ebdff;" data-darkreader-inline-color=""> 1</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">; i</span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">++</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">) {</span></span>
+	<span class="line"><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">    swapped </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">=</span><span style="color: rgb(121, 184, 255); --darkreader-inline-color: #6ebdff;" data-darkreader-inline-color=""> false</span></span>
+	<span class="line"></span>
+	<span class="line"><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">    for</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> (</span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">let</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> j </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">=</span><span style="color: rgb(121, 184, 255); --darkreader-inline-color: #6ebdff;" data-darkreader-inline-color=""> 0</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">; j </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">&lt;</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> a.</span><span style="color: rgb(121, 184, 255); --darkreader-inline-color: #6ebdff;" data-darkreader-inline-color="">length</span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color=""> -</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> i; j</span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">++</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">) {</span></span>
+	<span class="line"><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">      if</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> (a[j </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">+</span><span style="color: rgb(121, 184, 255); --darkreader-inline-color: #6ebdff;" data-darkreader-inline-color=""> 1</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">] </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">&lt;</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> a[j]) {</span></span>
+	<span class="line"><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">        ;[a[j], a[j </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">+</span><span style="color: rgb(121, 184, 255); --darkreader-inline-color: #6ebdff;" data-darkreader-inline-color=""> 1</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">]] </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">=</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> [a[j </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">+</span><span style="color: rgb(121, 184, 255); --darkreader-inline-color: #6ebdff;" data-darkreader-inline-color=""> 1</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">], a[j]]</span></span>
+	<span class="line"><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">        swapped </span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">=</span><span style="color: rgb(121, 184, 255); --darkreader-inline-color: #6ebdff;" data-darkreader-inline-color=""> true</span></span>
+	<span class="line"><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">      }</span></span>
+	<span class="line"><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">    }</span></span>
+	<span class="line"></span>
+	<span class="line"><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">    if</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> (</span><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">!</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">swapped) {</span></span>
+	<span class="line"><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">      return</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> a</span></span>
+	<span class="line"><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">    }</span></span>
+	<span class="line"><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">  }</span></span>
+	<span class="line"></span>
+	<span class="line"><span style="color: rgb(249, 117, 131); --darkreader-inline-color: #f96e7c;" data-darkreader-inline-color="">  return</span><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color=""> a</span></span>
+	<span class="line"><span style="color: rgb(225, 228, 232); --darkreader-inline-color: #d7d4cf;" data-darkreader-inline-color="">}</span></span></code></pre>
+	<p></p></div>
diff --git a/packages/app-cli/tests/html_to_md/code_multiline_1.md b/packages/app-cli/tests/html_to_md/code_multiline_1.md
@@ -0,0 +1,24 @@
+```
+const bubbleSort = (originalArray) => {
+	  let swapped = false
+	
+	  const a = [...originalArray]
+	
+	  for (let i = 1; i < a.length - 1; i++) {
+	    swapped = false
+	
+	    for (let j = 0; j < a.length - i; j++) {
+	      if (a[j + 1] < a[j]) {
+	        ;[a[j], a[j + 1]] = [a[j + 1], a[j]]
+	        swapped = true
+	      }
+	    }
+	
+	    if (!swapped) {
+	      return a
+	    }
+	  }
+	
+	  return a
+	}
+```
diff --git a/packages/app-cli/tests/html_to_md/code_multiline_2.html b/packages/app-cli/tests/html_to_md/code_multiline_2.html
@@ -0,0 +1,21 @@
+<!-- this is from: https://blog.csdn.net/qq_42025798/article/details/121727781  -->
+<div><pre data-index="6" class="prettyprint set-code-show" style="font-family: &quot;Source Code Pro&quot;, &quot;DejaVu Sans Mono&quot;, &quot;Ubuntu Mono&quot;, &quot;Anonymous Pro&quot;, &quot;Droid Sans Mono&quot;, Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, sans-serif;"><code class="prism language-java has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;"><span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token punctuation">{</span>
+		<span class="token keyword">private</span> <span class="token class-name">String</span> name<span class="token punctuation">;</span>
+
+		<span class="token keyword">public</span> <span class="token class-name">String</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+			<span class="token keyword">return</span> name<span class="token punctuation">;</span>
+		<span class="token punctuation">}</span>
+
+		<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setName</span><span class="token punctuation">(</span><span class="token class-name">String</span> name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+			<span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
+		<span class="token punctuation">}</span>
+
+		<span class="token annotation punctuation">@Override</span>
+		<span class="token keyword">public</span> <span class="token class-name">String</span> <span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+			<span class="token keyword">return</span> <span class="token string">"User{"</span> <span class="token operator">+</span>
+					<span class="token string">"name='"</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">'\''</span> <span class="token operator">+</span>
+					<span class="token string">'}'</span><span class="token punctuation">;</span>
+		<span class="token punctuation">}</span>
+	<span class="token punctuation">}</span>
+	</code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">1</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">2</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">3</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">4</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">5</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">6</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">7</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">8</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">9</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">10</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">11</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">12</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">13</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">14</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">15</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">16</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">17</li><li style="color: rgb(153, 153, 153); --darkreader-inline-color: #a8a095;" data-darkreader-inline-color="">18</li></ul></pre> 
+	<h4></h4></div>
diff --git a/packages/app-cli/tests/html_to_md/code_multiline_2.md b/packages/app-cli/tests/html_to_md/code_multiline_2.md
@@ -0,0 +1,20 @@
+```
+public class User {
+		private String name;
+	
+		public String getName() {
+			return name;
+		}
+	
+		public void setName(String name) {
+			this.name = name;
+		}
+	
+		@Override
+		public String toString() {
+			return "User{" +
+					"name='" + name + '\'' +
+					'}';
+		}
+	}
+```