Triple backticks are crashing the text editor

Fixes #640

Author: Rajat Saxena

apps/web/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 /// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited

packages/components-library/src/styles.css

@@ -73,11 +73,6 @@
             @apply list-decimal ml-6;
         }
 
-        /* Remove duplicate rule */
-        /* :is(ol) {
-            @apply list-decimal;
-        } */
-
         /* Remove margin from last paragraph in divs */
         :is(div) > p:last-of-type {
             @apply mb-0;
@@ -114,7 +109,7 @@
 
         /* Link styling */
         :is(a) {
-            @apply underline decoration-dotted decoration-2 underline-offset-2 transition-all duration-200 hover:decoration-solid;
+            @apply underline decoration-2 underline-offset-2 transition-all duration-200 hover:decoration-dotted;
         }
 
         /* Better spacing for content sections */

packages/text-editor/package.json

@@ -41,7 +41,7 @@
     },
     "dependencies": {
         "@codemirror/language-data": "^6.5.1",
-        "@codemirror/state": "6.4.1",
+        "@codemirror/state": "^6.5.2",
         "@codemirror/theme-one-dark": "^6.1.2",
         "@courselit/common-models": "workspace:^",
         "@courselit/utils": "workspace:^",

packages/text-editor/src/Renderer/index.tsx

@@ -53,8 +53,9 @@ const markMap: MarkMap = {
     italic: "em",
     bold: "strong",
     code: "code",
-    link: createLinkHandler({ target: "_blank" }),
+    link: createLinkHandler({ target: "_blank", rel: "noopener noreferrer" }),
     underline: "u",
+    strike: "strike",
 };
 
 interface RendererProps {

packages/text-editor/src/Toolbar.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from "react";
-import { WysiwygToolbar } from "@remirror/react-ui";
+import { Toolbar as RemirrorToolbar } from "@remirror/react-ui";
 
 const Toolbar: FC = () => {
-    return <WysiwygToolbar />;
+    return <RemirrorToolbar></RemirrorToolbar>;
 };
 
 export default Toolbar;