From d2239acbb76e0c6f50415ec8c774d3530227fed4 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Sat, 3 Sep 2022 21:49:51 +0800
Subject: [PATCH] :bug: Fix: typeit shortcode prints consecutive spaces and
 newline errors

---
 CHANGELOG.md                              |  1 +
 assets/css/_page/_single.scss             | 21 ---------------
 assets/css/_partial/_widgets/_index.scss  |  3 ++-
 assets/css/_partial/_widgets/_typeit.scss | 22 ++++++++++++++++
 layouts/shortcodes/typeit.html            | 32 ++++++++++++++---------
 5 files changed, 44 insertions(+), 35 deletions(-)
 create mode 100644 assets/css/_partial/_widgets/_typeit.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d63f72c..b978aa8e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@ All notable changes to this project will be documented in this file.
 - :bug: Fix: menu item invalid params `draft` in submenu
 - :bug: Fix: missing height and weight of img element and lazyload object-fit style
 - :bug: Fix: typeit shortcode invalid config `duration = -1` and fix style
+- :bug: Fix: typeit shortcode prints consecutive spaces and newline errors
 - :art: Style: change the default icons of some social links
 - :globe_with_meridians: Docs(i18n): update pt-br, de in i18n
 - :mag: Perf(SEO): enhance SEO performance
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
index dd892939..b3b9347f 100644
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -376,27 +376,6 @@
   @import '../_partial/_single/comment';
 }
 
-.typeit {
-  .highlight {
-    padding: 0.375rem;
-    font-size: 0.875rem;
-    font-family: $code-font-family;
-    font-weight: bold;
-    word-break: break-all;
-  }
-
-  --ti-cursor-font-family: $global-font-family;
-  --ti-cursor-font-size: $global-font-size;
-  --ti-cursor-font-weight: $global-font-weight;
-  --ti-cursor-line-height: $global-line-height;
-  --ti-cursor-color: $global-font-secondary-color;
-  --ti-cursor-margin-left: 0;
-
-  [theme=dark] & {
-    --ti-cursor-color: $global-font-secondary-color-dark;
-  }
-}
-
 .lg-toolbar .lg-icon::after {
   color: #999;
 }
diff --git a/assets/css/_partial/_widgets/_index.scss b/assets/css/_partial/_widgets/_index.scss
index a7ba7585..bffe374b 100644
--- a/assets/css/_partial/_widgets/_index.scss
+++ b/assets/css/_partial/_widgets/_index.scss
@@ -1,3 +1,4 @@
 @import '_cookieconsent';
 @import '_fixed-button';
-@import '_github-corner';
\ No newline at end of file
+@import '_github-corner';
+@import '_typeit';
\ No newline at end of file
diff --git a/assets/css/_partial/_widgets/_typeit.scss b/assets/css/_partial/_widgets/_typeit.scss
new file mode 100644
index 00000000..1f59a171
--- /dev/null
+++ b/assets/css/_partial/_widgets/_typeit.scss
@@ -0,0 +1,22 @@
+.typeit {
+  .highlight {
+    padding: 0.375rem;
+    font-size: 0.875rem;
+    font-family: $code-font-family;
+    font-weight: bold;
+    word-break: break-all;
+    white-space: pre-wrap;
+  }
+
+  --ti-cursor-font-family: #{$global-font-family};
+  --ti-cursor-font-size: #{$global-font-size};
+  --ti-cursor-font-style: normal;
+  --ti-cursor-font-weight: #{$global-font-weight};
+  --ti-cursor-line-height: #{$global-line-height};
+  --ti-cursor-color: #{$global-font-color};
+  --ti-cursor-transform: translateX(0);
+
+  [data-theme='dark'] & {
+    --ti-cursor-color: #{$global-font-color-dark};
+  }
+}
diff --git a/layouts/shortcodes/typeit.html b/layouts/shortcodes/typeit.html
index b2ef3955..a561c7e8 100644
--- a/layouts/shortcodes/typeit.html
+++ b/layouts/shortcodes/typeit.html
@@ -1,18 +1,21 @@
 {{- $content := trim (partial "function/dos2unix.html" .Inner) "\n" -}}
-{{- $classList := .Get "class" | slice -}}
+{{- $classList := slice -}}
+{{- with .Get "class" -}}
+  {{- $classList = $classList | append . -}}
+{{- end -}}
 {{- $tag := .Get "tag" | default "div" -}}
 
-{{- with .Get "code" -}}
+{{- if .Get "code" -}}
   {{- /* highlight code content without line number */ -}}
-  {{- $content = highlight $content . "linenos=false" -}}
+  {{- $content = highlight $content (.Get "code") "lineNos=false, noClasses=false" -}}
   {{- /* delete outer label */ -}}
-  {{- $content = replaceRE `<div class="highlight"><pre tabindex="0" class="chroma"><code[^<>]*>(?s)(.*)</code></pre></div>` "$1" $content -}}
-  {{- /* parsing markdown links */ -}}
-  {{- $content = replaceRE `(<span[^<>]*>)([^<>]*)\[([^<>]+)\]\(([^<>]+)\)([^<>]*)(</span>)` "$1$2$6<a href=$4>$3</a>$1$5$6" $content -}}
-  {{- /* replace " " to "&nbsp;" and replace "\n" to "<br />" */ -}}
-  {{- $content = replaceRE ` ` "&nbsp;" $content | replaceRE `(<\w+)&nbsp;` "$1 " | replaceRE `\n` "<br />" -}}
-  {{- /* fix "<br />" location error which is a bug of Typeit HTML parser */ -}}
-  {{- $content = replaceRE `<br /></span>` "</span><br />" $content -}}
+  {{- $content = replaceRE `.*<code[^<>]*>(?s)(.*)</code>.*` "$1" $content -}}
+  {{- if .Get "code-link" -}}
+    {{- /* parsing code links */ -}}
+    {{- $content = replaceRE `(<span[^<>]*>)([^<>]*)\[([^<>]+)\]\(([^<>]+)\)([^<>]*)(</span>)` "$1$2$6<a href=\"$4\">$3</a>$1$5$6" $content -}}
+  {{- end -}}
+  {{- /* split multiline string */ -}}
+  {{- $content = split $content "\n" -}}
   {{- $classList = $classList | append "highlight" -}}
 {{- else -}}
   {{- $content = $content | .Page.RenderString -}}
@@ -26,7 +29,10 @@
 {{- $group = $group | default slice | append $id -}}
 {{- dict $key $group | merge $typeitMap | .Page.Scratch.SetInMap "this" "typeitMap" -}}
 
-<div class="typeit">
-  {{- printf `<%v id="%v" class="%v"></%v>` $tag $id (delimit $classList " ") $tag | safeHTML -}}
-</div>
+{{- $attrs := printf `id="%v"` $id -}}
+{{- with $classList -}}
+  {{- $attrs = delimit $classList " " | printf `%v class="%v"` $attrs -}}
+{{- end -}}
+
+<div class="typeit">{{ printf `<%v %v></%v>` $tag $attrs $tag | safeHTML }}</div>
 {{- /* EOF */ -}}