replace button link block with a separate button link tool inside draftail

web/src/components/blocks/Blocks.tsx

@@ -11,7 +11,6 @@ import { AccordionBlock } from "./AccordionBlock";
 import { EmbedBlock } from "./EmbedBlock";
 import { FactBoxBlock } from "./FactBoxBlock";
 import { ScheduleBlock } from "./ScheduleBlock";
-import { ButtonLinkBlock } from "./ButtonLinkBlock";
 import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
 import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
 import { ContactListBlock } from "./ContactListBlock";
@@ -53,9 +52,6 @@ export const Blocks = ({ blocks, pageContent }: { blocks: any, pageContent?: boo
       case "ScheduleBlock":
         return <ScheduleBlock key={block.id} block={block} />;
         break;
-      case "ButtonLinkBlock":
-        return <ButtonLinkBlock key={block.id} block={block} />;
-        break;
       case "PageSectionBlock":
         return <PageSectionBlock key={block.id} block={block} />;
         break;

web/src/components/blocks/ButtonLinkBlock.tsx

@@ -1,57 +0,0 @@
-import { graphql } from "@/gql";
-import { type ButtonLinkBlockFragment } from "@/gql/graphql";
-import Link from "next/link";
-import { Icon } from "@/components/general/Icon";
-
-export const ButtonLinkBlockFragmentDefinition = graphql(`
-  fragment ButtonLinkBlock on ButtonLinkBlock {
-    buttonText: text
-    buttonAnchor: anchor
-    buttonExternalUrl: externalUrl
-    buttonPage: page {
-      url
-    }
-  }
-`);
-
-export const ButtonLinkBlock = ({
-  block,
-}: {
-  block: ButtonLinkBlockFragment;
-}) => {
-  const anchor = block.buttonAnchor ? `#${block.buttonAnchor}` : "";
-  const pageUrl = block.buttonPage?.url;
-  const externalUrl = block.buttonExternalUrl;
-
-  let href = "#";
-  let isExternal = false;
-  if (pageUrl) {
-    href = `${pageUrl}${anchor}`;
-  } else if (externalUrl) {
-    href = `${externalUrl}${anchor}`;
-    isExternal = true;
-  } else if (anchor) {
-    href = anchor;
-  }
-
-  if (isExternal) {
-    return (
-      <a
-        href={href}
-        className="button"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <span>{block.buttonText}</span>
-        <Icon type="externalLink" />
-      </a>
-    );
-  }
-
-  return (
-    <Link href={href} className="button">
-      <span>{block.buttonText}</span>
-      <Icon type="arrowRight" />
-    </Link>
-  );
-};

web/src/components/blocks/RichTextBlock.tsx

@@ -1,5 +1,6 @@
 import { graphql } from "@/gql";
 import { type RichTextBlockFragment } from "@/gql/graphql";
+import { RichText } from "@/components/general/RichText";
 import styles from "./richTextBlock.module.scss";
 
 const RichTextBlockFragmentDefinition = graphql(`
@@ -11,9 +12,8 @@ const RichTextBlockFragmentDefinition = graphql(`
 
 export const RichTextBlock = ({ block }: { block: RichTextBlockFragment }) => {
   return (
-    <div
-      className={styles.richTextBlock}
-      dangerouslySetInnerHTML={{ __html: block.value }}
-    ></div>
+    <div className={styles.richTextBlock}>
+      <RichText content={block.value} />
+    </div>
   );
 };

web/src/components/blocks/richTextBlock.module.scss

@@ -92,7 +92,7 @@
     font-style: italic;
   }
 
-  a {
+  a:not(:global(.button)) {
     text-decoration-thickness: .1rem;
     text-decoration-color: var(--color-goldenOrange);
     font-weight: 500;
@@ -131,7 +131,7 @@
     max-width: var(--size-width-p);
     border-collapse: collapse;
     margin: 0 auto;
-  
+
     tr {
       border-top: var(--border);
 
@@ -139,16 +139,16 @@
         border-bottom: var(--border);
       }
     }
-  
+
     th {
       text-align: left;
       width: 11rem;
       font-weight: 600;
     }
-  
+
     th,
     td {
       padding: var(--spacing-xs) 0;
     }
   }
-}
+}