fix: ShadCN: inherit <a> styling for inline content (#1228)

* fix: ShadCN: inherit <a> styling for inline content

By default, links are not styled when using ShadCN (and therefore hard to recognise). This patch makes them inherit the browser default, matching the Mantine behaviour.

* Overwrote link styles instead of removing them

* Added comment

* Updated comment

* Updated screenshots

* Updated screenshots

---------

Co-authored-by: matthewlipski <[email protected]>

Author: serpent213

packages/shadcn/src/style.css

@@ -74,6 +74,11 @@
   @apply bn-bg-background bn-text-foreground;
 }
 
+.bn-shadcn .bn-editor a {
+  color: revert;
+  text-decoration: revert;
+}
+
 .bn-shadcn [data-radix-popper-content-wrapper] {
   z-index: 99999 !important;
 }

packages/shadcn/src/tailwindStyles.css

@@ -1,4 +1,5 @@
-/* Based on https://stackoverflow.com/questions/63761312/how-to-scope-tailwind-css/69999793#69999793*/
+/* Based on https://stackoverflow.com/questions/63761312/how-to-scope-tailwind-css/69999793#69999793 */
+/* Should not be modified as the styles are taken directly from TailwindCSS */
 .bn-shadcn {
   /*
     1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -36,22 +37,22 @@
     -moz-tab-size: 4; /* 3 */
     tab-size: 4; /* 3 */
     font-family: theme(
-      "fontFamily.sans",
-      ui-sans-serif,
-      system-ui,
-      sans-serif,
-      "Apple Color Emoji",
-      "Segoe UI Emoji",
-      "Segoe UI Symbol",
-      "Noto Color Emoji"
+            "fontFamily.sans",
+            ui-sans-serif,
+            system-ui,
+            sans-serif,
+            "Apple Color Emoji",
+            "Segoe UI Emoji",
+            "Segoe UI Symbol",
+            "Noto Color Emoji"
     ); /* 4 */
     font-feature-settings: theme(
-      "fontFamily.sans[1].fontFeatureSettings",
-      normal
+            "fontFamily.sans[1].fontFeatureSettings",
+            normal
     ); /* 5 */
     font-variation-settings: theme(
-      "fontFamily.sans[1].fontVariationSettings",
-      normal
+            "fontFamily.sans[1].fontVariationSettings",
+            normal
     ); /* 6 */
     -webkit-tap-highlight-color: transparent; /* 7 */
   }
@@ -130,23 +131,23 @@
   samp,
   pre {
     font-family: theme(
-      "fontFamily.mono",
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      Consolas,
-      "Liberation Mono",
-      "Courier New",
-      monospace
+            "fontFamily.mono",
+            ui-monospace,
+            SFMono-Regular,
+            Menlo,
+            Monaco,
+            Consolas,
+            "Liberation Mono",
+            "Courier New",
+            monospace
     ); /* 1 */
     font-feature-settings: theme(
-      "fontFamily.mono[1].fontFeatureSettings",
-      normal
+            "fontFamily.mono[1].fontFeatureSettings",
+            normal
     ); /* 2 */
     font-variation-settings: theme(
-      "fontFamily.mono[1].fontVariationSettings",
-      normal
+            "fontFamily.mono[1].fontVariationSettings",
+            normal
     ); /* 3 */
     font-size: 1em; /* 4 */
   }