feat(code-viewer): animated transition from plain to highlighted (#193)

* feat(code-viewer): animate syntax highlighting

When first rendering the CodeViewer it does not perform syntax highlighting.

To optimize performance highlighting happens after rendering in a `useEffect` hook. This causes a flicker when the coloring is finally applied to the text.

This fix smoothens out the process using a short (0.3s) animation to introduce the color.

* fix: remove invalid cast

* fix: only animate CodeViewer

CodeEditor is probably missing some keys, which makes every token remounted on change (which happens quite often) in an editor

Author: Marcell Toth

src/CodeViewer/components/BlockCodeViewer/SingleCodeBlock.tsx

@@ -84,7 +84,7 @@ export const SingleCodeBlock: React.FC<IBlockProps> = ({
   }, [isVisible, lineNumber, value, language, showLineNumbers]);
 
   if (markup !== void 0) {
-    return markup as any;
+    return <>{markup}</>;
   }
 
   return <div ref={nodeRef}>{value}</div>;

src/styles/components/Code/_base.scss

@@ -5,6 +5,13 @@
 $line-number-char-width: 10px;
 $line-padding-left: 10px;
 
+@keyframes set-color {
+  0% {
+    color: inherit;
+  }
+}
+
+
 .CodeEditor,
 .CodeViewer {
   @include lightCodeTheme;
@@ -216,6 +223,10 @@ $line-padding-left: 10px;
 }
 
 .CodeViewer {
+  .token {
+    animation: set-color 0.3s ease-out;
+  }
+
   &--line-numbers {
     @for $i from 1 through 6 {
       &--#{$i} {