fix: Replace homemade sanitize functions with stegaClean from sanity

apps/designmanual-frontend/app/features/portable-text/PortableText.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable simple-import-sort/imports */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ButtonProps } from "@chakra-ui/react";
-import { vercelStegaClean } from "@vercel/stega";
 import {
   PortableTextReactComponents,
   PortableText as SanityPortableText,
@@ -48,6 +47,7 @@ import { LinkButtonSerializer } from "./serializers/LinkButtonSerializer";
 import { NonClickableBoxListSerializer } from "./serializers/NonClickableBoxesSerializer";
 import { TextBlockSerializer } from "./serializers/TextBlockSerializer";
 import { TextBlocksSerializer } from "./serializers/TextBlocksSerializer";
+import { stegaClean } from "@sanity/client/stega";
 
 const components: Partial<PortableTextReactComponents> = {
   marks: {
@@ -435,7 +435,7 @@ export const PortableText = ({
 }) => {
   return (
     <SanityPortableText
-      value={vercelStegaClean(value)}
+      value={stegaClean(value)}
       components={deepmerge(components, componentsOverrides)}
     />
   );

apps/designmanual-frontend/app/features/portable-text/code-block/CodeBlock.tsx

@@ -1,3 +1,4 @@
+import { stegaClean } from "@sanity/client/stega";
 import {
   Box,
   BoxProps,
@@ -8,7 +9,6 @@ import { Highlight } from "prism-react-renderer";
 import { Key, useRef } from "react";
 
 import { theme } from "./codeTheme";
-import { sanitizeCode } from "./codeUtils";
 
 type CodeBlockProps = Omit<BoxProps, "children"> & {
   /** The code to highlight */
@@ -26,7 +26,7 @@ export const CodeBlock = ({
     <CodeBlockContainer
       maxWidth="calc(100vw - var(--spor-space-6))"
       {...props}
-      code={sanitizeCode(code)}
+      code={stegaClean(code)}
       marginTop={2}
     >
       <Highlight theme={theme} code={code} language={language}>

apps/designmanual-frontend/app/features/portable-text/components/Accordion.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable simple-import-sort/imports */
 import type { PortableTextBlock } from "@portabletext/types";
+import { stegaClean } from "@sanity/client/stega";
 import {
   AccordionItem,
   AccordionItemContent,
@@ -14,7 +15,6 @@ import { useLocation } from "react-router";
 import { BlockHeading } from "~/features/portable-text/components/BlockHeading";
 import { PortableText } from "~/features/portable-text/PortableText";
 import { getIcon } from "~/utils/getIcon";
-import { stripHiddenChars } from "~/utils/sanitize";
 
 const headingLevelToVariantMap = {
   h2: "lg",
@@ -84,12 +84,12 @@ export const Accordion = ({
   };
 
   // sanitize heading inputs and fall back to safe defaults
-  const rawTitleLevel = stripHiddenChars(titleHeadingLevel);
+  const rawTitleLevel = stegaClean(titleHeadingLevel);
   const safeTitleLevel = /^h[2-5]$/.test(rawTitleLevel)
     ? (rawTitleLevel as "h2" | "h3" | "h4" | "h5")
     : "h2";
 
-  const rawItemLevel = stripHiddenChars(accordionItemHeadingLevel);
+  const rawItemLevel = stegaClean(accordionItemHeadingLevel);
   const safeItemLevel = /^h[3-6]$/.test(rawItemLevel)
     ? (rawItemLevel as "h3" | "h4" | "h5" | "h6")
     : "h3";

apps/designmanual-frontend/app/features/portable-text/components/ImageCardList.tsx

@@ -1,3 +1,4 @@
+import { stegaClean } from "@sanity/client/stega";
 import { LinkOutOutline24Icon } from "@vygruppen/spor-icon-react";
 import {
   Box,
@@ -21,7 +22,6 @@ import {
   getGridImageSize,
 } from "~/features/site/grid/BoxAndCardGrid";
 import { useLinkProps } from "~/utils/link";
-import { sanitizeInternalHref } from "~/utils/sanitize";
 
 export type ImageCardList = {
   heading?: string;
@@ -92,8 +92,7 @@ export const ImageCard = ({
   imageSize,
   aspectRatio,
 }: ImageCardProps) => {
-  const cleandedHref =
-    href && href.includes("http") ? href : sanitizeInternalHref(href);
+  const cleandedHref = href && href.includes("http") ? href : stegaClean(href);
   const { linkProps, isExternal } = useLinkProps(cleandedHref, anchor);
 
   return (

apps/designmanual-frontend/app/features/portable-text/components/LinkButton.tsx

@@ -1,3 +1,4 @@
+import { stegaClean } from "@sanity/client/stega";
 import {
   ArrowRightOutline24Icon,
   LinkOutOutline24Icon,
@@ -6,7 +7,6 @@ import { Button } from "@vygruppen/spor-react";
 
 import { getIcon } from "~/utils/getIcon";
 import { useLinkProps } from "~/utils/link";
-import { sanitizeInternalHref } from "~/utils/sanitize";
 
 export type LinkButtonProps = {
   href: string;
@@ -24,7 +24,7 @@ export const LinkButton = ({
   linkType = "internal",
 }: LinkButtonProps) => {
   const isExternalLink = linkType === "external";
-  const cleanedHref = isExternalLink ? href : sanitizeInternalHref(href);
+  const cleanedHref = isExternalLink ? href : stegaClean(href);
   const { linkProps, isExternal } = useLinkProps(cleanedHref, anchor);
   const { as, ...restLinkProps } = linkProps;
   const iconProps = resolveIcon({ icon, isExternal });

apps/designmanual-frontend/app/features/portable-text/interactive-code/InteractiveCode.tsx

@@ -1,6 +1,6 @@
+import { stegaClean } from "@sanity/client/stega";
 import { Box, BoxProps, Stack } from "@vygruppen/spor-react";
 
-import { sanitizeCode } from "../code-block/codeUtils";
 import { LiveEditor } from "./LiveEditor";
 import { LiveError } from "./LiveError";
 import { LivePreview } from "./LivePreview";
@@ -18,7 +18,7 @@ export const InteractiveCode = ({
 }: InteractiveCodeProps) => {
   return (
     <Box {...rest}>
-      <LiveProvider code={sanitizeCode(code)}>
+      <LiveProvider code={stegaClean(code)}>
         <Stack gap={2} aria-live="polite">
           {layout === "simple" && (
             <>

apps/designmanual-frontend/package.json

@@ -29,7 +29,6 @@
     "@sanity/preview-url-secret": "^2.0.4",
     "@sanity/react-loader": "^1.11.22",
     "@sanity/visual-editing": "^3.2.3",
-    "@vercel/stega": "^1.0.0",
     "@vygruppen/sidespor-config": "workspace:*",
     "@vygruppen/spor-design-tokens": "workspace:*",
     "@vygruppen/spor-icon": "workspace:*",