chore: introduce editorProps on Canvas

Author: hilhorstt

docs/richtlijnen/content/tekstopmaak/headings.md

@@ -86,7 +86,7 @@ Gebruik koppen in volgorde. Begin bijvoorbeeld met een kopniveau 2 onder de hoof
 Van boven naar beneden mag je geen niveaus overslaan. Van beneden naar boven wel. Het is prima om na een kopniveau 4 weer een nieuwe sectie te beginnen met een kopniveau 2.
 
 <Guideline appearance="do" title="Gebruik kopniveaus in de de goede volgorde.">
-  <Canvas language="html">
+  <Canvas language="html" editorProps={{ topHeadingLevel: 1 }}>
     {() => (
       <>
           <h1>Kop met niveau 1</h1>
@@ -116,7 +116,7 @@ Van boven naar beneden mag je geen niveaus overslaan. Van beneden naar boven wel
 </Guideline>
 
 <Guideline appearance="dont" title="Van boven naar beneden een kopniveau overslaan.">
-  <Canvas language="html">
+  <Canvas language="html" editorProps={{ topHeadingLevel: 1 }}>
     {() => (
       <>
           <h1>Dit is een kop met niveau 1</h1>

src/components/Canvas/Canvas.tsx

@@ -10,6 +10,9 @@ interface CanvasProps {
   language: string;
   copy?: boolean;
   designTokens?: CSSProperties;
+  editorProps?: {
+    topHeadingLevel: number | undefined;
+  };
 }
 
 const CanvasClient = lazy(() => import('./CanvasClient').then(({ CanvasClient }) => ({ default: CanvasClient })));

src/components/Canvas/CanvasClient.tsx

@@ -28,6 +28,9 @@ interface CanvasProps {
   language: string;
   copy?: boolean;
   designTokens?: CSSProperties;
+  editorProps?: {
+    topHeadingLevel: number | undefined;
+  };
 }
 
 export const CanvasClient = ({
@@ -38,6 +41,7 @@ export const CanvasClient = ({
   children,
   language,
   designTokens,
+  editorProps = { topHeadingLevel: 2 },
 }: CanvasProps) => {
   // By default the `children` argument is converted to code.
   const jsxTree = typeof children === 'function' ? children() : children;
@@ -75,7 +79,7 @@ export const CanvasClient = ({
   };
 
   return (
-    <ClippyContext id={codeBlockId} topHeadingLevel={2}>
+    <ClippyContext id={codeBlockId} {...editorProps}>
       <div slot="value" hidden dangerouslySetInnerHTML={{ __html: contentHtml }} />
       <div className={clsx('nlds-canvas')}>
         {jsxTree && (