feat: integrate editoria11y web component into pdc & vth frontends

Author: AliKdhim87

apps/pdc-frontend/package.json

@@ -26,6 +26,7 @@
     "watch:e2e": "playwright --help test test/e2e/"
   },
   "dependencies": {
+    "@frameless/editoria11y": "0.1.0",
     "@frameless/ui": "0.1.2",
     "@frameless/utils": "0.1.0",
     "@nl-design-system-unstable/documentation": "1.1.0",

apps/pdc-frontend/src/app/[locale]/(openFormsLayout)/layout.tsx

@@ -31,6 +31,7 @@ import '@utrecht/design-tokens/dist/index.css';
 import { Main } from '@/components/Main';
 import { SearchBar } from '@/components/SearchBar';
 import 'react-loading-skeleton/dist/skeleton.css';
+import { Editoria11yWrapper } from '@/lib/stencil-client';
 import { GET_OPEN_FORMS_TEMPLATE } from '@/query';
 import { buildAlternateLinks, config, fetchData, getStrapiGraphqlURL } from '@/util';
 import { ComponentComponentsUtrechtNavigation, GetTemplateDataQuery } from '../../../../gql/graphql';
@@ -56,6 +57,7 @@ type Params = {
 export async function generateMetadata({ params: { locale } }: Params): Promise<Metadata> {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = await useTranslation(locale, 'common');
+  const nonce = headers().get('x-nonce') || '';
   const url = buildURL({
     env: process.env,
     key: 'FRONTEND_PUBLIC_URL',
@@ -110,6 +112,9 @@ export async function generateMetadata({ params: { locale } }: Params): Promise<
         ...buildAlternateLinks({ languages, segment: '/' }),
       },
     },
+    other: {
+      'csp-nonce': nonce,
+    },
   };
 }
 
@@ -183,6 +188,7 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
         )}
         <QueryClientProvider>
           <Surface>
+            {isEnabled && <Editoria11yWrapper />}
             <Page className="utrecht-custom-page">
               <PageHeader className="utrecht-custom-header">
                 <SkipLink href="#main">{t('components.skip-link.main')}</SkipLink>

apps/pdc-frontend/src/app/[locale]/(rootLayout)/layout.tsx

@@ -29,6 +29,7 @@ import {
 import { GoogleTranslate } from '@/components/GoogleTranslate';
 import { Main } from '@/components/Main';
 import { SearchBar } from '@/components/SearchBar';
+import { Editoria11yWrapper } from '@/lib/stencil-client';
 import { GET_TEMPLATE } from '@/query';
 import { buildAlternateLinks, config, fetchData, getStrapiGraphqlURL } from '@/util';
 import {
@@ -61,6 +62,7 @@ type Params = {
 export async function generateMetadata({ params: { locale } }: Params): Promise<Metadata> {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const { t } = await useTranslation(locale, 'common');
+  const nonce = headers().get('x-nonce') || '';
   const url = buildURL({
     env: process.env,
     key: 'FRONTEND_PUBLIC_URL',
@@ -115,6 +117,9 @@ export async function generateMetadata({ params: { locale } }: Params): Promise<
         ...buildAlternateLinks({ languages, segment: '/' }),
       },
     },
+    other: {
+      'csp-nonce': nonce,
+    },
   };
 }
 
@@ -164,6 +169,8 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
         <QueryClientProvider>
           <GoogleTranslate />
           <Surface>
+            {isEnabled && <Editoria11yWrapper />}
+
             <Page className="utrecht-custom-page">
               <PageHeader className="utrecht-custom-header">
                 <SkipLink href="#main">{t('components.skip-link.main')}</SkipLink>

apps/pdc-frontend/src/lib/stencil-client.tsx

@@ -0,0 +1,20 @@
+'use client';
+import { defineCustomElements } from '@frameless/editoria11y/loader';
+import { createElement, useEffect, useState } from 'react';
+
+export const Editoria11yWrapper = () => {
+  const [nonce, setNonce] = useState<string>('');
+
+  useEffect(() => {
+    defineCustomElements(window);
+    // Get nonce from meta tag or document
+    const nonceValue = document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content') || '';
+    setNonce(nonceValue);
+  }, []);
+
+  return createElement('frameless-editoria11y', {
+    theme: 'darkTheme',
+    language: 'nl',
+    nonce: nonce,
+  });
+};

apps/vth-frontend/package.json

@@ -16,6 +16,7 @@
     "lint-build": "tsc --noEmit --project tsconfig.json"
   },
   "dependencies": {
+    "@frameless/editoria11y": "0.1.0",
     "@frameless/ui": "0.1.2",
     "@tanstack/react-query": "4.29.25",
     "@utrecht/component-library-css": "4.2.0",
@@ -34,8 +35,7 @@
     "react-dom": "18.3.1",
     "react-i18next": "12.3.1",
     "react-loading-skeleton": "3.3.1",
-    "sharp": "0.32.6",
-    "editoria11y": "github:itmaybejj/editoria11y#2.2.4"
+    "sharp": "0.32.6"
   },
   "devDependencies": {
     "eslint": "8.35.0",

apps/vth-frontend/src/app/[locale]/(nestedNavLayout)/layout.tsx

@@ -10,9 +10,9 @@ import { Footer, FooterData, Page, PreviewAlert, Surface } from '@/components';
 import '@utrecht/component-library-css';
 import '@utrecht/design-tokens/dist/index.css';
 import 'react-loading-skeleton/dist/skeleton.css';
-import { Editoria11y } from '@/components/Editoria11y';
 import '@frameless/ui/dist/bundle.css';
 import '../../../styles/globals.css';
+import { Editoria11yWrapper } from '@/lib/stencil-client';
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -124,7 +124,7 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
         <QueryClientProvider>
           <Surface>
             <Page className="utrecht-page--full-width">
-              {isEnabled && <Editoria11y />}
+              {isEnabled && <Editoria11yWrapper />}
               {children}
             </Page>
           </Surface>

apps/vth-frontend/src/app/[locale]/(rootLayout)/layout.tsx

@@ -10,8 +10,8 @@ import { Footer, FooterData, Header, Page, PreviewAlert, Surface } from '@/compo
 import '@utrecht/component-library-css';
 import '@utrecht/design-tokens/dist/index.css';
 import 'react-loading-skeleton/dist/skeleton.css';
-import { Editoria11y } from '@/components/Editoria11y';
 import { Main } from '@/components/Main';
+import { Editoria11yWrapper } from '@/lib/stencil-client';
 import { config } from '@/util';
 import { getNavData } from '@/util/getNavData';
 import '@frameless/ui/dist/bundle.css';
@@ -138,7 +138,7 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
                     }) || '',
                 }}
               />
-              {isEnabled && <Editoria11y />}
+              {isEnabled && <Editoria11yWrapper />}
               <Main id="main">{children}</Main>
             </Page>
           </Surface>

apps/vth-frontend/src/components/Editoria11y/index.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { defineCustomElements } from '@frameless/editoria11y/loader';
+import { createElement, useEffect } from 'react';
+
+export const Editoria11yWrapper = () => {
+  useEffect(() => {
+    defineCustomElements(window);
+  }, []);
+  return createElement('frameless-editoria11y', {
+    theme: 'darkTheme',
+    language: 'nl',
+  });
+};