From 240d5bd0fcd56fd0c7a2de73c0e64629e5eb6797 Mon Sep 17 00:00:00 2001
From: Nico Schett <nicoschett@icloud.com>
Date: Tue, 21 May 2024 18:15:50 +0200
Subject: [PATCH 1/5] save

---
 cache.patch                                   | 27 ++++++++
 my-gatsby-site/src/pages/mdx.tsx              | 14 +++-
 my-gatsby-site/src/pages/wholesale.tsx        |  2 +-
 .../gatsby-plugin-jaen/gatsby/gatsby-node.ts  |  9 +--
 packages/gatsby-plugin-jaen/package.json      |  2 +-
 .../src/components/shared/Link/Link.tsx       |  2 +-
 .../src/pages/cms/index.tsx                   |  2 +-
 .../src/pages/cms/pages/index.tsx             |  2 -
 .../src/slices/jaen-frame.tsx                 |  8 +--
 packages/jaen-fields-mdx/package.json         |  2 +-
 .../src/MdxField/components/Editor.tsx        |  7 +-
 packages/jaen/package.json                    |  2 +-
 packages/jaen/src/contexts/auth.tsx           | 20 ++++--
 packages/jaen/src/contexts/cms-management.tsx | 68 ++++---------------
 packages/jaen/src/contexts/page.tsx           | 20 +++++-
 packages/jaen/src/hooks/use-page.ts           | 49 ++++++++++---
 packages/jaen/src/utils/diff-objects.ts       | 42 ++++++++++++
 17 files changed, 187 insertions(+), 91 deletions(-)
 create mode 100644 cache.patch
 create mode 100644 packages/jaen/src/utils/diff-objects.ts

diff --git a/cache.patch b/cache.patch
new file mode 100644
index 00000000..73b6b78c
--- /dev/null
+++ b/cache.patch
@@ -0,0 +1,27 @@
+diff --git a/node_modules/gatsby/cache-dir/create-content-digest-browser-shim.js b/node_modules/gatsby/cache-dir/create-content-digest-browser-shim.js
+index edc673f..cbd390c 100644
+--- a/node_modules/gatsby/cache-dir/create-content-digest-browser-shim.js
++++ b/node_modules/gatsby/cache-dir/create-content-digest-browser-shim.js
+@@ -1 +1 @@
+-exports.createContentDigest = () => ``
++export const createContentDigest = () => ``
+diff --git a/node_modules/gatsby/cache-dir/public-page-renderer.js b/node_modules/gatsby/cache-dir/public-page-renderer.js
+index 6a91ada..e2ee03a 100644
+--- a/node_modules/gatsby/cache-dir/public-page-renderer.js
++++ b/node_modules/gatsby/cache-dir/public-page-renderer.js
+@@ -1,9 +1,11 @@
+ const preferDefault = m => (m && m.default) || m
+ 
++let renderer = () => null;
++
+ if (process.env.BUILD_STAGE === `develop`) {
+-  module.exports = preferDefault(require(`./public-page-renderer-dev`))
++  renderer = preferDefault(require(`./public-page-renderer-dev`))
+ } else if (process.env.BUILD_STAGE === `build-javascript`) {
+-  module.exports = preferDefault(require(`./public-page-renderer-prod`))
+-} else {
+-  module.exports = () => null
++  renderer = preferDefault(require(`./public-page-renderer-prod`))
+ }
++
++export default renderer;
diff --git a/my-gatsby-site/src/pages/mdx.tsx b/my-gatsby-site/src/pages/mdx.tsx
index 041289ad..0258f494 100644
--- a/my-gatsby-site/src/pages/mdx.tsx
+++ b/my-gatsby-site/src/pages/mdx.tsx
@@ -1,8 +1,9 @@
 import {Field, PageConfig, PageProps} from '@atsnek/jaen'
 import {Box} from '@chakra-ui/react'
-import {MdxField} from '@atsnek/jaen-fields-mdx'
+import {MdxField, UncontrolledMdxField} from '@atsnek/jaen-fields-mdx'
 import {Link} from 'gatsby-plugin-jaen'
 import {usePage} from '@atsnek/jaen'
+import {useState} from 'react'
 
 const QASMPlayground: React.FC<{
   playground?: boolean
@@ -26,6 +27,17 @@ const Page: React.FC<PageProps> = ({location, pageContext}) => {
 
   console.log('page:', page)
 
+  const [value, setValue] = useState<any>()
+
+  return (
+    <UncontrolledMdxField
+      components={{QASMPlayground}}
+      value={value}
+      onUpdateValue={setValue}
+      isEditing={true}
+    />
+  )
+
   return (
     <>
       <Link
diff --git a/my-gatsby-site/src/pages/wholesale.tsx b/my-gatsby-site/src/pages/wholesale.tsx
index a8c80c41..7d47d5f1 100644
--- a/my-gatsby-site/src/pages/wholesale.tsx
+++ b/my-gatsby-site/src/pages/wholesale.tsx
@@ -15,6 +15,6 @@ export const pageConfig: PageConfig = {
   icon: 'FaWarehouse',
   auth: {
     isRequired: true,
-    roles: ['4d84a68f-7b18-4efe-ae73-d6d3dd226110']
+    roles: ['260237544631828483:kassabuch:admin']
   }
 }
diff --git a/packages/gatsby-plugin-jaen/gatsby/gatsby-node.ts b/packages/gatsby-plugin-jaen/gatsby/gatsby-node.ts
index 9b7ac7b0..a66b41c9 100644
--- a/packages/gatsby-plugin-jaen/gatsby/gatsby-node.ts
+++ b/packages/gatsby-plugin-jaen/gatsby/gatsby-node.ts
@@ -168,11 +168,12 @@ export const onPreInit: GatsbyNode['onPreInit'] = async (
 
     if (sentryPlugin) {
       sentryPlugin.pluginOptions.dsn = pluginOptions.sentry.dsn
-    }
 
-    // Write sentry.org and sentry.project to process.env
-    process.env.SENTRY_ORG = pluginOptions.sentry.org
-    process.env.SENTRY_PROJECT = pluginOptions.sentry.project
+      // Write sentry.org and sentry.project to process.env
+      process.env.SENTRY_ORG = pluginOptions.sentry.org
+      process.env.SENTRY_PROJECT = pluginOptions.sentry.project
+      process.env.SENTRY_URL = new URL(pluginOptions.sentry.dsn).origin
+    }
   }
 
   // state.flattenedPlugins[state.flattenedPlugins.indexOf(manifestPlugin)] =
diff --git a/packages/gatsby-plugin-jaen/package.json b/packages/gatsby-plugin-jaen/package.json
index 70aa5a52..ed7666a6 100644
--- a/packages/gatsby-plugin-jaen/package.json
+++ b/packages/gatsby-plugin-jaen/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-jaen",
-  "version": "1.0.0-rc.96",
+  "version": "1.0.0-rc.99",
   "main": "index.js",
   "types": "./src/index.ts",
   "files": [
diff --git a/packages/gatsby-plugin-jaen/src/components/shared/Link/Link.tsx b/packages/gatsby-plugin-jaen/src/components/shared/Link/Link.tsx
index abe735f8..79dea9f8 100644
--- a/packages/gatsby-plugin-jaen/src/components/shared/Link/Link.tsx
+++ b/packages/gatsby-plugin-jaen/src/components/shared/Link/Link.tsx
@@ -24,7 +24,7 @@ const Link = <T extends As>(
       return <Wrapper as={GatsbyLink} to={to} {...props} ref={ref} />
     }
 
-    return <Wrapper as="a" href={to} {...props} ref={ref} />
+    return <Wrapper as="a" isExternal href={to} {...props} ref={ref} />
   }
 
   return <Wrapper {...props} ref={ref} />
diff --git a/packages/gatsby-plugin-jaen/src/pages/cms/index.tsx b/packages/gatsby-plugin-jaen/src/pages/cms/index.tsx
index e0c2c2eb..1fc04e40 100644
--- a/packages/gatsby-plugin-jaen/src/pages/cms/index.tsx
+++ b/packages/gatsby-plugin-jaen/src/pages/cms/index.tsx
@@ -33,7 +33,7 @@ const DashboardPage: React.FC<PageProps> = () => {
 
   return (
     <Dashboard
-      user={auth.user?.profile.given_name || auth.user?.profile.sub}
+      user={auth.user?.profile?.given_name || auth.user?.profile?.sub}
       isPublishing={manager.isPublishing}
       patches={patches}
     />
diff --git a/packages/gatsby-plugin-jaen/src/pages/cms/pages/index.tsx b/packages/gatsby-plugin-jaen/src/pages/cms/pages/index.tsx
index 067e3caf..20809eaf 100644
--- a/packages/gatsby-plugin-jaen/src/pages/cms/pages/index.tsx
+++ b/packages/gatsby-plugin-jaen/src/pages/cms/pages/index.tsx
@@ -201,8 +201,6 @@ const PagesPage: React.FC = () => {
         },
         parentPages,
         onSubmit: data => {
-          alert('submit')
-          console.log('manager.updatePage', manager.updatePage)
           manager.updatePage(currentPage.id, {
             slug: data.slug,
             template: data.template,
diff --git a/packages/gatsby-plugin-jaen/src/slices/jaen-frame.tsx b/packages/gatsby-plugin-jaen/src/slices/jaen-frame.tsx
index d2ce0656..2b12ce6b 100644
--- a/packages/gatsby-plugin-jaen/src/slices/jaen-frame.tsx
+++ b/packages/gatsby-plugin-jaen/src/slices/jaen-frame.tsx
@@ -244,16 +244,16 @@ const Slice: React.FC<SliceProps> = props => {
           logo: <Logo />
         },
         user: {
-          user: auth.user
+          user: auth.user?.profile
             ? {
                 username:
                   auth.user.profile.preferred_username?.replace(
                     `@${auth.user.profile['urn:zitadel:iam:user:resourceowner:primary_domain']}`,
                     ''
                   ) || auth.user.profile.sub,
-                firstName: auth.user?.profile?.given_name,
-                lastName: auth.user?.profile?.family_name,
-                avatarURL: auth.user?.profile?.picture
+                firstName: auth.user.profile.given_name,
+                lastName: auth.user.profile.family_name,
+                avatarURL: auth.user.profile.picture
               }
             : {
                 username: 'Guest'
diff --git a/packages/jaen-fields-mdx/package.json b/packages/jaen-fields-mdx/package.json
index 5799ae7c..678821b6 100644
--- a/packages/jaen-fields-mdx/package.json
+++ b/packages/jaen-fields-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@atsnek/jaen-fields-mdx",
-  "version": "1.0.0-rc.18",
+  "version": "1.0.0-rc.19",
   "description": "Markdown field for Jaen",
   "type": "module",
   "source": "src/index.ts",
diff --git a/packages/jaen-fields-mdx/src/MdxField/components/Editor.tsx b/packages/jaen-fields-mdx/src/MdxField/components/Editor.tsx
index 740f0eea..cd20a661 100644
--- a/packages/jaen-fields-mdx/src/MdxField/components/Editor.tsx
+++ b/packages/jaen-fields-mdx/src/MdxField/components/Editor.tsx
@@ -8,7 +8,7 @@ import CodeMirror, {
   EditorView
 } from '@uiw/react-codemirror'
 
-import React, {useCallback, useEffect, useMemo, useState} from 'react'
+import React, {useCallback, useEffect, useMemo} from 'react'
 import {ErrorBoundary} from 'react-error-boundary'
 import {statistics, Statistics} from 'vfile-statistics'
 
@@ -30,16 +30,13 @@ const MemoizedCodeMirror = React.memo<ReactCodeMirrorProps>(props => {
 export interface EditorProps extends BaseEditorProps {}
 
 export const Editor: React.FC<EditorProps> = props => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [defaultValue, _] = useState(props.mdast)
-
   const [state, setConfig] = useMdx(
     {
       gfm: true,
       frontmatter: true,
       math: true,
       directive: true,
-      mdast: defaultValue
+      mdast: props.mdast
     },
     false,
     props.components
diff --git a/packages/jaen/package.json b/packages/jaen/package.json
index 6fa1b721..166ae93b 100644
--- a/packages/jaen/package.json
+++ b/packages/jaen/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@atsnek/jaen",
-  "version": "1.0.0-rc.74",
+  "version": "1.0.0-rc.83",
   "description": "The Webapps framework for creating scalable and dynamic applications with ease.",
   "type": "module",
   "source": "src/index.ts",
diff --git a/packages/jaen/src/contexts/auth.tsx b/packages/jaen/src/contexts/auth.tsx
index a29b9d34..154cf5d2 100644
--- a/packages/jaen/src/contexts/auth.tsx
+++ b/packages/jaen/src/contexts/auth.tsx
@@ -29,11 +29,11 @@ export const useAuth = () => {
 
       const data = await response.json()
 
-      const userRoles = data.result.map((grant: any) => {
+      const userRoles = (data.result?.map((grant: any) => {
         return (grant.roles || []).map((role: any) => {
           return `${grant.projectId}:${role}`
         })
-      })
+      }) || []) as string[][]
 
       const projectScopedRoles = userRoles.flat()
 
@@ -136,6 +136,8 @@ export const withAuthSecurity = <
     const pageConfigAuth = props.pageContext.pageConfig?.auth
     const auth = useAuth()
 
+    console.log('auth', auth)
+
     const loadingText = useMemo(() => {
       switch (auth.activeNavigator) {
         case 'signinRedirect':
@@ -151,8 +153,6 @@ export const withAuthSecurity = <
       }
     }, [auth.activeNavigator])
 
-    const isAuthRequired = pageConfigAuth?.isRequired
-
     if (loadingText) {
       return (
         <Center height="100vh">
@@ -183,8 +183,16 @@ export const withAuthSecurity = <
       )
     }
 
-    if (isAuthRequired) {
-      const roles = pageConfigAuth?.roles
+    if (pageConfigAuth?.isRequired) {
+      let roles = pageConfigAuth?.roles
+
+      if (pageConfigAuth.isAdminRequired) {
+        if (!roles) {
+          roles = ['jaen:admin']
+        } else {
+          roles.push('jaen:admin')
+        }
+      }
 
       if (roles) {
         const hasRoles = checkUserRoles(auth.user, roles)
diff --git a/packages/jaen/src/contexts/cms-management.tsx b/packages/jaen/src/contexts/cms-management.tsx
index 0af8415f..09021374 100644
--- a/packages/jaen/src/contexts/cms-management.tsx
+++ b/packages/jaen/src/contexts/cms-management.tsx
@@ -22,6 +22,7 @@ import {useSiteMetadataContext} from './site-metadata'
 import {uploadFile} from '../utils/open-storage-gateway'
 import {useNotificationsContext} from './notifications'
 import {sqJaen} from '../clients/jaen/src'
+// import {diffObjects} from '../utils/diff-objects'
 
 // Errors
 
@@ -213,6 +214,12 @@ export const CMSManagementProvider = withRedux(
                 return 5
               }
 
+              console.log(
+                'parentPage.childPagesOrder',
+                parentPage.childPagesOrder,
+                parentPage
+              )
+
               const aIndex = parentPage.childPagesOrder?.indexOf(a.id)
               const bIndex = parentPage.childPagesOrder?.indexOf(b.id)
 
@@ -286,56 +293,9 @@ export const CMSManagementProvider = withRedux(
       pageId: string,
       updatedPage: Partial<JaenPage>
     ): void => {
-      console.log('updatedPage', updatedPage, 'pageId', pageId)
-
       const page = pagesDict[pageId]
 
-      function deepObjectDiff(
-        obj1: Partial<JaenPage>,
-        obj2: Partial<JaenPage>
-      ) {
-        function compareObjects(
-          o1: {[x: string]: any},
-          o2: {[x: string]: any; hasOwnProperty: (arg0: string) => any}
-        ) {
-          for (const key in o2) {
-            if (o2.hasOwnProperty(key)) {
-              if (
-                o1[key] &&
-                typeof o1[key] === 'object' &&
-                o2[key] &&
-                typeof o2[key] === 'object'
-              ) {
-                if (!compareObjects(o1[key], o2[key])) {
-                  return false
-                }
-              } else if (o1[key] !== o2[key]) {
-                return false
-              }
-            }
-          }
-          return true
-        }
-
-        const diff: Partial<JaenPage> = {}
-
-        for (const key in obj2) {
-          if (
-            !obj1.hasOwnProperty(key) ||
-            (typeof obj2[key] === 'object' &&
-              !compareObjects(obj1[key], obj2[key])) ||
-            (typeof obj2[key] !== 'object' && obj1[key] !== obj2[key])
-          ) {
-            diff[key] = obj2[key]
-          }
-        }
-
-        return diff
-      }
-
-      updatedPage = deepObjectDiff(page || {}, updatedPage)
-
-      console.log('updatedPage', updatedPage, 'page', page)
+      // updatedPage = diffObjects<Partial<JaenPage>>(page || {}, updatedPage)
 
       // check if slug is unique when updating slug
       const slug = updatedPage.slug || 'new-page'
@@ -350,15 +310,17 @@ export const CMSManagementProvider = withRedux(
         throw new DuplicateSlugError(slug)
       }
 
+      const fromId =
+        updatedPage?.parentPage?.id !== undefined &&
+        page?.parentPage?.id !== updatedPage?.parentPage?.id
+          ? page?.parentPage?.id
+          : undefined
+
       dispatch(
         pageActions.page_updateOrCreate({
           id: pageId,
           ...updatedPage,
-          fromId:
-            // Only set the fromId if the parentPage has changed
-            updatedPage?.parentPage?.id || updatedPage?.parentPage === null
-              ? page?.parentPage?.id
-              : undefined
+          fromId: fromId
         })
       )
     }
diff --git a/packages/jaen/src/contexts/page.tsx b/packages/jaen/src/contexts/page.tsx
index 0f434d28..9aee3424 100644
--- a/packages/jaen/src/contexts/page.tsx
+++ b/packages/jaen/src/contexts/page.tsx
@@ -5,6 +5,7 @@ import {RootState, store} from '../redux'
 import {JaenPage} from '../types'
 import {deepmergeArrayIdMerge} from '../utils/deepmerge'
 import {useDynamicPaths} from '../hooks/use-dynamic-paths'
+import {usePage} from '../hooks/use-page'
 
 export interface PageProviderProps {
   jaenPage: {
@@ -73,6 +74,11 @@ export interface UsePageIndexProps {
    * Include excluded pages in the index.
    */
   includeExcluded?: boolean
+
+  /**
+   * Sort the pages based on the `sortOrder` field.
+   */
+  sortByPageOrder?: boolean
 }
 
 export const useJaenPageIndex = (
@@ -83,8 +89,6 @@ export const useJaenPageIndex = (
 } => {
   const {jaenPage, jaenPages} = usePageContext()
 
-  console.log('jaenPage', jaenPage, 'jaenPages', jaenPages)
-
   const paths = useDynamicPaths({
     staticPages: (jaenPages || []) as any
   })
@@ -111,6 +115,8 @@ export const useJaenPageIndex = (
     return jaenPage.id
   }, [jaenPage, jaenPages, props, paths])
 
+  const {childPagesOrder = []} = usePage({id: id})
+
   const staticChildren = useMemo(() => {
     let children: Array<{id: string} & Partial<JaenPage>> = []
 
@@ -185,6 +191,16 @@ export const useJaenPageIndex = (
       return !c.excludedFromIndex && !c.deleted
     })
 
+    if (props?.sortByPageOrder) {
+      // sort based on childPagesOrder
+      mergedChildren = mergedChildren.sort((a, b) => {
+        const aIndex = childPagesOrder.indexOf(a.id)
+        const bIndex = childPagesOrder.indexOf(b.id)
+
+        return aIndex - bIndex
+      })
+    }
+
     if (props) {
       const {filter, sort} = props
 
diff --git a/packages/jaen/src/hooks/use-page.ts b/packages/jaen/src/hooks/use-page.ts
index e5f684a5..16560076 100644
--- a/packages/jaen/src/hooks/use-page.ts
+++ b/packages/jaen/src/hooks/use-page.ts
@@ -4,36 +4,69 @@ import {useEffect, useMemo, useState} from 'react'
 import {usePageContext} from '../contexts/page'
 import {RootState, store} from '../redux'
 import {JaenPage} from '../types'
+import {useDynamicPaths} from './use-dynamic-paths'
 
-export interface UsePageProps {}
+export interface UsePageProps {
+  id?: string
+  path?: string
+}
+
+export const usePage = (props: UsePageProps): JaenPage => {
+  const {jaenPage, jaenPages} = usePageContext()
+
+  const paths = useDynamicPaths({
+    staticPages: (jaenPages || []) as any
+  })
+
+  const id = useMemo(() => {
+    if (props?.id) {
+      return props.id
+    } else if (props?.path) {
+      if (jaenPages == null) {
+        throw new Error('Unable to resolve page by path. No pages provided.')
+      }
+
+      const path = props?.path
 
-export const usePage = (_: UsePageProps): JaenPage => {
-  const {jaenPage} = usePageContext()
+      const newId = paths[path]?.jaenPageId
+
+      if (!newId) {
+        throw new Error(`Could not resolve page by path: ${path}`)
+      }
+
+      return newId
+    }
+
+    return jaenPage.id
+  }, [jaenPage, jaenPages, props, paths])
 
   const [dynamicPage, setDynamicPage] = useState<Partial<JaenPage> | undefined>(
     undefined
   )
 
   useEffect(() => {
-    const dynamicPage = store.getState().page.pages.nodes[jaenPage.id]
+    const dynamicPage = store.getState().page.pages.nodes[id]
 
     setDynamicPage(dynamicPage)
 
     const unsubscribe = store.subscribe(() => {
       const state = store.getState() as RootState
 
-      const dynamicPage = state.page.pages.nodes[jaenPage.id]
+      const dynamicPage = state.page.pages.nodes[id]
       setDynamicPage(dynamicPage)
     })
 
     return () => {
       unsubscribe()
     }
-  }, [jaenPage])
+  }, [id])
 
   const page = useMemo(() => {
-    return deepmerge(jaenPage, dynamicPage || {})
-  }, [jaenPage, dynamicPage])
+    const staticPage =
+      jaenPage.id === id ? jaenPage : jaenPages?.find(page => page.id === id)
+
+    return deepmerge(staticPage || {}, dynamicPage || {})
+  }, [id, dynamicPage])
 
   return page
 }
diff --git a/packages/jaen/src/utils/diff-objects.ts b/packages/jaen/src/utils/diff-objects.ts
new file mode 100644
index 00000000..657977a7
--- /dev/null
+++ b/packages/jaen/src/utils/diff-objects.ts
@@ -0,0 +1,42 @@
+type Diff<T> = {
+  [K in keyof T]?: T[K] extends object ? Diff<T[K]> : T[K]
+}
+
+export function diffObjects<T extends object>(obj1: T, obj2: T): Diff<T> {
+  const diff: Partial<T> = {}
+
+  const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]) as Set<
+    keyof T
+  >
+
+  keys.forEach(key => {
+    const value1 = obj1[key]
+    const value2 = obj2[key]
+
+    console.log(key, value1, value2)
+
+    if (value2 !== null && typeof value2 === 'object') {
+      diff[key] = diffObjects(value1 || {}, value2) as any
+    } else if (
+      !value1 ||
+      !value2 ||
+      typeof value1 !== 'object' ||
+      typeof value2 !== 'object'
+    ) {
+      console.log(obj2, value2)
+
+      // Check if obj2 contains the key
+      if (obj2.hasOwnProperty(key)) {
+        console.log('key not in obj2', key, value1, value2)
+
+        // Check if the value is different
+        if (value1 !== value2) {
+          console.log('assign', value1, value2)
+          diff[key] = value2
+        }
+      }
+    }
+  })
+
+  return diff
+}

From 0ee604b55e22df101b3b54a0104a812800c2b380 Mon Sep 17 00:00:00 2001
From: Nico Schett <nicoschett@icloud.com>
Date: Wed, 22 May 2024 11:09:42 +0200
Subject: [PATCH 2/5] feat: add notification popup

---
 packages/gatsby-plugin-jaen/components.json   |   2 +-
 packages/gatsby-plugin-jaen/package.json      |  21 +-
 .../src/components/Popup.tsx                  |  93 +++
 .../src/components/ui/calendar.tsx            |  64 ++
 .../src/components/ui/card.tsx                |  79 +++
 .../src/components/ui/checkbox.tsx            |  26 +
 .../src/components/ui/dialog.tsx              | 119 ++++
 .../src/components/ui/form.tsx                | 175 +++++
 .../src/components/ui/input.tsx               |  25 +
 .../src/components/ui/label.tsx               |  24 +
 .../src/components/ui/popover.tsx             |  29 +
 .../src/components/ui/textarea.tsx            |  24 +
 .../src/components/ui/toast.tsx               | 126 ++++
 .../src/components/ui/toaster.tsx             |  33 +
 .../src/components/ui/toggle.tsx              |  43 ++
 .../src/components/ui/use-toast.ts            | 189 ++++++
 .../src/gatsby/wrap-root-element.tsx          |   9 +-
 .../hooks/use-notification-popup-widget.ts    |  12 +
 .../src/pages/cms/notification/popup.tsx      | 501 ++++++++++++++
 .../gatsby-plugin-jaen/tailwind.config.js     |   2 +-
 yarn.lock                                     | 638 +++++++++++++++++-
 21 files changed, 2207 insertions(+), 27 deletions(-)
 create mode 100644 packages/gatsby-plugin-jaen/src/components/Popup.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/calendar.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/card.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/checkbox.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/dialog.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/form.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/input.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/label.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/popover.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/textarea.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/toast.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/toaster.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/toggle.tsx
 create mode 100644 packages/gatsby-plugin-jaen/src/components/ui/use-toast.ts
 create mode 100644 packages/gatsby-plugin-jaen/src/hooks/use-notification-popup-widget.ts
 create mode 100644 packages/gatsby-plugin-jaen/src/pages/cms/notification/popup.tsx

diff --git a/packages/gatsby-plugin-jaen/components.json b/packages/gatsby-plugin-jaen/components.json
index 4a4616c5..776ca83e 100644
--- a/packages/gatsby-plugin-jaen/components.json
+++ b/packages/gatsby-plugin-jaen/components.json
@@ -12,6 +12,6 @@
   },
   "aliases": {
     "components": "components",
-    "utils": "../../lib/utils"
+    "utils": "utils"
   }
 }
diff --git a/packages/gatsby-plugin-jaen/package.json b/packages/gatsby-plugin-jaen/package.json
index ed7666a6..b66147eb 100644
--- a/packages/gatsby-plugin-jaen/package.json
+++ b/packages/gatsby-plugin-jaen/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-jaen",
-  "version": "1.0.0-rc.99",
+  "version": "1.0.0-rc.100",
   "main": "index.js",
   "types": "./src/index.ts",
   "files": [
@@ -25,14 +25,26 @@
     "@chakra-ui/react": "^2.8.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.4.2",
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.0.3",
     "@sentry/gatsby": "^7.106.0",
+    "@tiptap/extension-link": "^2.4.0",
+    "@tiptap/extension-underline": "^2.4.0",
+    "@tiptap/pm": "^2.4.0",
+    "@tiptap/react": "^2.4.0",
+    "@tiptap/starter-kit": "^2.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "date-fns": "^3.6.0",
     "framer-motion": "^10.13.0",
     "gatsby-plugin-google-gtag": "^5.12.0",
     "gatsby-plugin-image": "^3.13.1",
@@ -47,9 +59,10 @@
     "lucide-react": "^0.358.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-complex-tree": "^2.2.0",
+    "react-day-picker": "^8.10.1",
     "react-dropzone": "^14.2.3",
     "react-filerobot-image-editor": "^4.5.1",
-    "react-hook-form": "^7.45.2",
+    "react-hook-form": "^7.51.5",
     "react-konva": "^18.2.10",
     "react-photo-view": "^1.2.3",
     "react-zoom-pan-pinch": "^3.1.0",
@@ -58,9 +71,11 @@
     "styled-components": "^6.0.5",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "use-debounce": "^9.0.4"
+    "use-debounce": "^9.0.4",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.13",
     "@types/lodash.throttle": "^4.1.7",
     "@types/react-beautiful-dnd": "^13.1.8",
     "gatsby": "^5.11.0",
diff --git a/packages/gatsby-plugin-jaen/src/components/Popup.tsx b/packages/gatsby-plugin-jaen/src/components/Popup.tsx
new file mode 100644
index 00000000..3d13103d
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/Popup.tsx
@@ -0,0 +1,93 @@
+import React, {useEffect} from 'react'
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from './ui/dialog'
+import {Button} from './ui/button'
+import {useNotificationPopupWidget} from '../hooks/use-notification-popup-widget'
+
+export const Popup: React.FC<{}> = () => {
+  const [{data}] = useNotificationPopupWidget()
+
+  const [consent, setConsent] = React.useState(true)
+
+  useEffect(() => {
+    // The local storage contains the notification popup data so we can check if the user has already seen the notification
+    // When the data is missing or the data is outdated we show the notification
+    const localStorageData = localStorage.getItem('notification-popup')
+
+    if (!localStorageData) {
+      setConsent(false)
+    }
+
+    // String comparison to check if the data is outdated
+    else if (data && localStorageData !== JSON.stringify(data)) {
+      setConsent(false)
+    } else {
+      setConsent(true)
+    }
+  }, [data])
+
+  const handleConsent = () => {
+    localStorage.setItem('notification-popup', JSON.stringify(data))
+    setConsent(true)
+  }
+
+  useEffect(() => {
+    // Skip if the user has already seen the notification
+    if (consent) {
+      return
+    }
+
+    const popup = document.getElementById('notification-popup')
+    if (popup) {
+      // Check if the notification is enabled
+      const isEnabled = data?.isEnabled ?? false
+      const from = data?.from ? new Date(data?.from) : null
+      const to = data?.to ? new Date(data?.to) : null
+
+      if (isEnabled) {
+        const now = new Date()
+
+        let isInTimeRange = true
+        if (from && to) {
+          isInTimeRange = now >= from && now <= to
+        } else if (from) {
+          isInTimeRange = now >= from
+        } else if (to) {
+          isInTimeRange = now <= to
+        }
+
+        if (isInTimeRange) {
+          popup.click()
+        }
+      }
+    }
+  }, [consent, data])
+
+  return (
+    <Dialog>
+      <DialogTrigger id="notification-popup" className="hidden" />
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="text-2xl">{data?.title}</DialogTitle>
+        </DialogHeader>
+        <p
+          className="prose"
+          dangerouslySetInnerHTML={{__html: data?.message || ''}}></p>
+
+        <DialogFooter>
+          <DialogClose>
+            <Button onClick={handleConsent}>Gelesen / Read</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/calendar.tsx b/packages/gatsby-plugin-jaen/src/components/ui/calendar.tsx
new file mode 100644
index 00000000..602098aa
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/calendar.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react'
+import {ChevronLeft, ChevronRight} from 'lucide-react'
+import {DayPicker} from 'react-day-picker'
+
+import {cn} from '../../lib/utils'
+import {buttonVariants} from './button'
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({variant: 'outline'}),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell:
+          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day: cn(
+          buttonVariants({variant: 'ghost'}),
+          'h-9 w-9 p-0 font-normal aria-selected:opacity-100'
+        ),
+        day_range_end: 'day-range-end',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside:
+          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames
+      }}
+      components={{
+        IconLeft: ({...props}) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({...props}) => <ChevronRight className="h-4 w-4" />
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = 'Calendar'
+
+export {Calendar}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/card.tsx b/packages/gatsby-plugin-jaen/src/components/ui/card.tsx
new file mode 100644
index 00000000..5ff854d6
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react'
+
+import {cn} from '../../lib/utils'
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({className, ...props}, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({className, ...props}, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({className, ...props}, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({className, ...props}, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({className, ...props}, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({className, ...props}, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+))
+CardFooter.displayName = 'CardFooter'
+
+export {Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/checkbox.tsx b/packages/gatsby-plugin-jaen/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..a4dbef42
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/checkbox.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import {Check} from 'lucide-react'
+
+import {cn} from '../../lib/utils'
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({className, ...props}, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className
+    )}
+    {...props}>
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export {Checkbox}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/dialog.tsx b/packages/gatsby-plugin-jaen/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..574af07e
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/dialog.tsx
@@ -0,0 +1,119 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import {X} from 'lucide-react'
+
+import {cn} from '../../lib/utils'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({className, ...props}, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({className, children, ...props}, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props}>
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({className, ...props}, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({className, ...props}, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription
+}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/form.tsx b/packages/gatsby-plugin-jaen/src/components/ui/form.tsx
new file mode 100644
index 00000000..132fe18d
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/form.tsx
@@ -0,0 +1,175 @@
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import {Slot} from '@radix-ui/react-slot'
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext
+} from 'react-hook-form'
+
+import {cn} from '../../lib/utils'
+import {Label} from '../ui/label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{name: props.name}}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const {getFieldState, formState} = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const {id} = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({className, ...props}, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{id}}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({className, ...props}, ref) => {
+  const {error, formItemId} = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({...props}, ref) => {
+  const {error, formItemId, formDescriptionId, formMessageId} = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({className, ...props}, ref) => {
+  const {formDescriptionId} = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({className, children, ...props}, ref) => {
+  const {error, formMessageId} = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-sm font-medium text-destructive', className)}
+      {...props}>
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = 'FormMessage'
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField
+}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/input.tsx b/packages/gatsby-plugin-jaen/src/components/ui/input.tsx
new file mode 100644
index 00000000..e179ee70
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+import {cn} from '../../lib/utils'
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({className, type, ...props}, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = 'Input'
+
+export {Input}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/label.tsx b/packages/gatsby-plugin-jaen/src/components/ui/label.tsx
new file mode 100644
index 00000000..53eff44b
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import {cva, type VariantProps} from 'class-variance-authority'
+
+import {cn} from '../../lib/utils'
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({className, ...props}, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export {Label}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/popover.tsx b/packages/gatsby-plugin-jaen/src/components/ui/popover.tsx
new file mode 100644
index 00000000..39a4fda2
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import {cn} from '../../lib/utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({className, align = 'center', sideOffset = 4, ...props}, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export {Popover, PopoverTrigger, PopoverContent}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/textarea.tsx b/packages/gatsby-plugin-jaen/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..7026c920
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import {cn} from '../../lib/utils'
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({className, ...props}, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = 'Textarea'
+
+export {Textarea}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/toast.tsx b/packages/gatsby-plugin-jaen/src/components/ui/toast.tsx
new file mode 100644
index 00000000..be4af5d3
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/toast.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react'
+import * as ToastPrimitives from '@radix-ui/react-toast'
+import {cva, type VariantProps} from 'class-variance-authority'
+import {X} from 'lucide-react'
+
+import {cn} from '../../lib/utils'
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({className, ...props}, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({className, variant, ...props}, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({variant}), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({className, ...props}, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({className, ...props}, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      className
+    )}
+    toast-close=""
+    {...props}>
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({className, ...props}, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold', className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({className, ...props}, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-sm opacity-90', className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction
+}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/toaster.tsx b/packages/gatsby-plugin-jaen/src/components/ui/toaster.tsx
new file mode 100644
index 00000000..e36d1b64
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/toaster.tsx
@@ -0,0 +1,33 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport
+} from './toast'
+import {useToast} from './use-toast'
+
+export function Toaster() {
+  const {toasts} = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({id, title, description, action, ...props}) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/toggle.tsx b/packages/gatsby-plugin-jaen/src/components/ui/toggle.tsx
new file mode 100644
index 00000000..91b62ee3
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/toggle.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react'
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+import {cva, type VariantProps} from 'class-variance-authority'
+
+import {cn} from '../../lib/utils'
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground'
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({className, variant, size, ...props}, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({variant, size, className}))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export {Toggle, toggleVariants}
diff --git a/packages/gatsby-plugin-jaen/src/components/ui/use-toast.ts b/packages/gatsby-plugin-jaen/src/components/ui/use-toast.ts
new file mode 100644
index 00000000..768b0f42
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/components/ui/use-toast.ts
@@ -0,0 +1,189 @@
+// Inspired by react-hot-toast library
+import * as React from 'react'
+
+import type {ToastActionElement, ToastProps} from './toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST'
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
+  | {
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+      }
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map(t =>
+          t.id === action.toast.id ? {...t, ...action.toast} : t
+        )
+      }
+
+    case 'DISMISS_TOAST': {
+      const {toastId} = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach(toast => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map(t =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false
+              }
+            : t
+        )
+      }
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: []
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter(t => t.id !== action.toastId)
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = {toasts: []}
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach(listener => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({...props}: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: {...props, id}
+    })
+  const dismiss = () => dispatch({type: 'DISMISS_TOAST', toastId: id})
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: open => {
+        if (!open) dismiss()
+      }
+    }
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({type: 'DISMISS_TOAST', toastId})
+  }
+}
+
+export {useToast, toast}
diff --git a/packages/gatsby-plugin-jaen/src/gatsby/wrap-root-element.tsx b/packages/gatsby-plugin-jaen/src/gatsby/wrap-root-element.tsx
index 984bb49f..077d7170 100644
--- a/packages/gatsby-plugin-jaen/src/gatsby/wrap-root-element.tsx
+++ b/packages/gatsby-plugin-jaen/src/gatsby/wrap-root-element.tsx
@@ -13,6 +13,8 @@ import {JaenWidgetProvider} from '../contexts/jaen-widget'
 import {SiteMetadataProvider} from '../connectors/site-metadata'
 import {theme} from '../theme/jaen-theme/index'
 import {JaenFrameMenuProvider} from '../contexts/jaen-frame-menu'
+import {Toaster} from '../components/ui/toaster'
+import {Popup} from '../components/Popup'
 
 const MediaModalComponent = lazy(
   async () => await import('../containers/media-modal')
@@ -28,6 +30,8 @@ export const wrapRootElement: GatsbyBrowser['wrapRootElement'] = (
 
   return (
     <ChakraProvider theme={theme} cssVarsRoot="#coco">
+      <Toaster />
+
       <CookieConsentProvider>
         <NotificationsProvider>
           <JaenUpdateModalProvider>
@@ -35,7 +39,10 @@ export const wrapRootElement: GatsbyBrowser['wrapRootElement'] = (
               <AuthenticationProvider>
                 <JaenFrameMenuProvider>
                   <MediaModalProvider MediaModalComponent={MediaModalComponent}>
-                    <JaenWidgetProvider>{element}</JaenWidgetProvider>
+                    <JaenWidgetProvider>
+                      <Popup />
+                      {element}
+                    </JaenWidgetProvider>
                   </MediaModalProvider>
                 </JaenFrameMenuProvider>
               </AuthenticationProvider>
diff --git a/packages/gatsby-plugin-jaen/src/hooks/use-notification-popup-widget.ts b/packages/gatsby-plugin-jaen/src/hooks/use-notification-popup-widget.ts
new file mode 100644
index 00000000..d1983112
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/hooks/use-notification-popup-widget.ts
@@ -0,0 +1,12 @@
+import {useWidget} from '@atsnek/jaen'
+
+export const useNotificationPopupWidget = () => {
+  return useWidget<{
+    id: string
+    isEnabled: boolean
+    title: string
+    message: string
+    from: string
+    to: string
+  }>('notification:popup')
+}
diff --git a/packages/gatsby-plugin-jaen/src/pages/cms/notification/popup.tsx b/packages/gatsby-plugin-jaen/src/pages/cms/notification/popup.tsx
new file mode 100644
index 00000000..be350661
--- /dev/null
+++ b/packages/gatsby-plugin-jaen/src/pages/cms/notification/popup.tsx
@@ -0,0 +1,501 @@
+import {PageConfig} from '@atsnek/jaen'
+import {graphql} from 'gatsby'
+import React, {useMemo} from 'react'
+import {useForm} from 'react-hook-form'
+import Link from '@tiptap/extension-link'
+import Underline from '@tiptap/extension-underline'
+import {EditorContent, useEditor} from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+
+import {
+  Bold,
+  Heading1,
+  Heading2,
+  Heading3,
+  Italic,
+  Link as LinkIcon,
+  List,
+  ListOrdered,
+  Quote,
+  Underline as UnderlineIcon,
+  Unlink
+} from 'lucide-react'
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '../../../components/ui/form'
+
+import {CalendarIcon} from '@radix-ui/react-icons'
+import {format} from 'date-fns'
+import {z} from 'zod'
+import {Button} from '../../../components/ui/button'
+import {Calendar} from '../../../components/ui/calendar'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '../../../components/ui/card'
+import {Checkbox} from '../../../components/ui/checkbox'
+import {Input} from '../../../components/ui/input'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '../../../components/ui/popover'
+import {toast} from '../../../components/ui/use-toast'
+import {cn} from '../../../lib/utils'
+
+import {Toggle} from '../../../components/ui/toggle'
+import {useNotificationPopupWidget} from '../../../hooks/use-notification-popup-widget'
+
+const extensions = [StarterKit, Link, Underline]
+
+const NotificationPopupSchema = z.object({
+  isEnabled: z.boolean(),
+  title: z.string(),
+  message: z.string(),
+  from: z.string(),
+  to: z.string()
+})
+
+const Page: React.FC = () => {
+  const [{data}, write] = useNotificationPopupWidget()
+
+  const id = useMemo(() => {
+    // data.id or random id
+    return data?.id ?? Math.random().toString(36).substring(7)
+  }, [data])
+
+  const form = useForm<z.infer<typeof NotificationPopupSchema>>({
+    defaultValues: {
+      isEnabled: data?.isEnabled,
+      title: data?.title,
+      message: data?.message,
+      from: data?.from,
+      to: data?.to
+    }
+  })
+
+  const onSubmit = (values: z.infer<typeof NotificationPopupSchema>) => {
+    write({
+      id: id,
+      isEnabled: values.isEnabled,
+      title: values.title,
+      message: values.message,
+      from: values.from,
+      to: values.to
+    })
+
+    toast({
+      title: 'Notification updated',
+      description: 'The notification has been updated'
+    })
+  }
+
+  const editor = useEditor({
+    extensions,
+    content: form.getValues().message ?? '<p>This is a example message</p>',
+    editorProps: {
+      attributes: {
+        // prose dark:prose-invert prose-sm sm:prose-base lg:prose-lg xl:prose-2xl m-5 focus:outline-none
+        class:
+          'focus:outline-none min-h-96 rounded-md border border-input bg-background px-3 py-2 prose max-w-full max-h-full'
+      }
+    },
+    onUpdate: ({editor}) => {
+      form.setValue('message', editor.getHTML())
+    }
+  })
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex justify-between">
+          <div className="space-y-4">
+            <CardTitle>Notification Popup</CardTitle>
+            <CardDescription>
+              Configure the notification popup. The notification will be shown
+              when the user visits the page.
+            </CardDescription>
+          </div>
+
+          <Button
+            variant="outline"
+            onClick={() => {
+              const popup = document.getElementById('notification-popup')
+              if (popup) {
+                popup.click()
+              }
+            }}>
+            Preview
+          </Button>
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+              control={form.control}
+              name="title"
+              render={({field}) => (
+                <FormItem>
+                  <FormLabel>Title</FormLabel>
+                  <FormControl>
+                    <Input placeholder="News" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    The title of the notification
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="message"
+              render={({field}) => (
+                <FormItem>
+                  <FormLabel>Message</FormLabel>
+
+                  {editor && (
+                    <div className="flex flex-row space-x-1">
+                      <Toggle
+                        type="button"
+                        variant="outline"
+                        onClick={() =>
+                          editor.chain().focus().toggleBold().run()
+                        }
+                        disabled={
+                          !editor.can().chain().focus().toggleBold().run()
+                        }
+                        pressed={editor.isActive('bold')}>
+                        <Bold className="h-4 w-4" />
+                      </Toggle>
+                      <Toggle
+                        type="button"
+                        variant="outline"
+                        onClick={() =>
+                          editor.chain().focus().toggleItalic().run()
+                        }
+                        disabled={
+                          !editor.can().chain().focus().toggleItalic().run()
+                        }
+                        pressed={editor.isActive('italic')}>
+                        <Italic className="h-4 w-4" />
+                      </Toggle>
+                      <Toggle
+                        type="button"
+                        variant="outline"
+                        onClick={() =>
+                          editor.chain().focus().toggleUnderline().run()
+                        }
+                        disabled={
+                          !editor.can().chain().focus().toggleUnderline().run()
+                        }
+                        pressed={editor.isActive('underline')}>
+                        <UnderlineIcon className="h-4 w-4" />
+                      </Toggle>
+                      <Toggle
+                        type="button"
+                        variant="outline"
+                        onClick={() =>
+                          editor.chain().focus().toggleHeading({level: 1}).run()
+                        }
+                        disabled={
+                          !editor
+                            .can()
+                            .chain()
+                            .focus()
+                            .toggleHeading({level: 1})
+                            .run()
+                        }
+                        pressed={editor.isActive('heading', {level: 1})}>
+                        <Heading1 className="h-4 w-4" />
+                      </Toggle>
+                      <Toggle
+                        type="button"
+                        variant="outline"
+                        onClick={() =>
+                          editor.chain().focus().toggleHeading({level: 2}).run()
+                        }
+                        disabled={
+                          !editor
+                            .can()
+                            .chain()
+                            .focus()
+                            .toggleHeading({level: 2})
+                            .run()
+                        }
+                        pressed={editor.isActive('heading', {level: 2})}>
+                        <Heading2 className="h-4 w-4" />
+                      </Toggle>
+                      <Toggle
+                        type="button"
+                        variant="outline"
+                        onClick={() =>
+                          editor.chain().focus().toggleHeading({level: 3}).run()
+                        }
+                        disabled={
+                          !editor
+                            .can()
+                            .chain()
+                            .focus()
+                            .toggleHeading({level: 3})
+                            .run()
+                        }
+                        pressed={editor.isActive('heading', {level: 3})}>
+                        <Heading3 className="h-4 w-4" />
+                      </Toggle>
+                      <Toggle
+                        type="button"
+                        variant="outline"
+                        onClick={() =>
+                          editor.chain().focus().toggleBulletList().run()
+                        }
+                        disabled={
+                          !editor.can().chain().focus().toggleBulletList().run()
+                        }
+                        pressed={editor.isActive('bulletList')}>
+                        <List className="h-4 w-4" />
+                      </Toggle>
+                      <Toggle
+                        type="button"
+                        variant="outline"
+                        onClick={() =>
+                          editor.chain().focus().toggleOrderedList().run()
+                        }
+                        disabled={
+                          !editor
+                            .can()
+                            .chain()
+                            .focus()
+                            .toggleOrderedList()
+                            .run()
+                        }
+                        pressed={editor.isActive('orderedList')}>
+                        <ListOrdered className="h-4 w-4" />
+                      </Toggle>
+                      <Toggle
+                        type="button"
+                        variant="outline"
+                        onClick={() =>
+                          editor.chain().focus().toggleBlockquote().run()
+                        }
+                        disabled={
+                          !editor.can().chain().focus().toggleBlockquote().run()
+                        }
+                        pressed={editor.isActive('blockquote')}>
+                        <Quote className="h-4 w-4" />
+                      </Toggle>
+                      <Toggle
+                        type="button"
+                        variant="outline"
+                        onClick={() => {
+                          const url = prompt('Enter the URL')
+                          if (url) {
+                            editor.chain().focus().setLink({href: url}).run()
+                          }
+                        }}
+                        disabled={
+                          !editor
+                            .can()
+                            .chain()
+                            .focus()
+                            .setLink({href: ''})
+                            .run()
+                        }
+                        pressed={editor.isActive('link')}>
+                        <LinkIcon className="h-4 w-4" />
+                      </Toggle>
+                      <Toggle
+                        type="button"
+                        variant="outline"
+                        onClick={() => editor.chain().focus().unsetLink().run()}
+                        disabled={
+                          !editor.can().chain().focus().unsetLink().run()
+                        }>
+                        <Unlink className="h-4 w-4" />
+                      </Toggle>
+                    </div>
+                  )}
+
+                  <FormControl>
+                    <EditorContent editor={editor} className="" />
+                  </FormControl>
+                  <FormDescription>
+                    The message of the notification
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="from"
+              render={({field}) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>From</FormLabel>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant={'outline'}
+                          className={cn(
+                            'w-[240px] pl-3 text-left font-normal',
+                            !field.value && 'text-muted-foreground'
+                          )}>
+                          {field.value ? (
+                            format(field.value, 'PPP')
+                          ) : (
+                            <span>Pick a date</span>
+                          )}
+                          <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        mode="single"
+                        selected={field.value}
+                        onSelect={field.onChange}
+                        disabled={date =>
+                          form.getValues().to
+                            ? date > new Date(form.getValues().to)
+                            : false
+                        }
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+                  <FormDescription>
+                    The notification will be shown <b>after</b> this date
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="to"
+              render={({field}) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>To</FormLabel>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant={'outline'}
+                          className={cn(
+                            'w-[240px] pl-3 text-left font-normal',
+                            !field.value && 'text-muted-foreground'
+                          )}>
+                          {field.value ? (
+                            format(field.value, 'PPP')
+                          ) : (
+                            <span>Pick a date</span>
+                          )}
+                          <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        mode="single"
+                        selected={field.value}
+                        onSelect={field.onChange}
+                        disabled={date =>
+                          form.getValues().from
+                            ? date < new Date(form.getValues().from)
+                            : false
+                        }
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+                  <FormDescription>
+                    The notification will be shown <b>until</b> this date
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="isEnabled"
+              render={({field}) => (
+                <FormItem className="flex flex-row items-start space-x-3 space-y-0 p-4">
+                  <FormControl>
+                    <Checkbox
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                  <div className="space-y-1 leading-none">
+                    <FormLabel>
+                      Show notification popup when the user visits the page
+                    </FormLabel>
+                    {/* <FormDescription>
+                      You can manage your mobile notifications in the{' '}
+                      <Link href="/examples/forms">mobile settings</Link> page.
+                    </FormDescription> */}
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            <Button type="submit">Submit</Button>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default Page
+
+export {Head} from '@atsnek/jaen'
+
+export const pageConfig: PageConfig = {
+  label: 'Jaen CMS | Notification',
+  icon: 'FaBell',
+  layout: {
+    name: 'jaen'
+  },
+  menu: {
+    type: 'app',
+    group: 'cms',
+    label: 'Popup',
+    groupLabel: 'Jaen CMS',
+
+    order: 450
+  },
+  breadcrumbs: [
+    {
+      label: 'Popup',
+      path: '/notification/popup/'
+    }
+  ],
+  auth: {
+    isRequired: true,
+    isAdminRequired: true
+  }
+}
+
+export const query = graphql`
+  query ($jaenPageId: String!) {
+    ...JaenPageQuery
+  }
+`
diff --git a/packages/gatsby-plugin-jaen/tailwind.config.js b/packages/gatsby-plugin-jaen/tailwind.config.js
index 5d2082fe..f6319d0b 100644
--- a/packages/gatsby-plugin-jaen/tailwind.config.js
+++ b/packages/gatsby-plugin-jaen/tailwind.config.js
@@ -68,5 +68,5 @@ module.exports = {
       }
     }
   },
-  plugins: [require('tailwindcss-animate')]
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')]
 }
diff --git a/yarn.lock b/yarn.lock
index dc8d50c3..0407b26e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2521,6 +2521,33 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
+"@floating-ui/core@^1.0.0":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.2.tgz#d37f3e0ac1f1c756c7de45db13303a266226851a"
+  integrity sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==
+  dependencies:
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/dom@^1.0.0":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.5.tgz#323f065c003f1d3ecf0ff16d2c2c4d38979f4cb9"
+  integrity sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/react-dom@^2.0.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.0.tgz#4f0e5e9920137874b2405f7d6c862873baf4beff"
+  integrity sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/utils@^0.2.0":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
+  integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
+
 "@gatsbyjs/parcel-namer-relative-to-cwd@^2.13.1":
   version "2.13.1"
   resolved "https://registry.yarnpkg.com/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-2.13.1.tgz#79d2692330a942394200c9bf3e820a4e55075ffb"
@@ -2736,6 +2763,11 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@hookform/resolvers@^3.4.2":
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.4.2.tgz#b69525248c2a9a1b2546411251ea25029915841a"
+  integrity sha512-1m9uAVIO8wVf7VCDAGsuGA0t6Z3m6jVGAN50HkV9vYLl0yixKK/Z1lr01vaRvYCkIKGoy1noVRxMzQYb4y/j1Q==
+
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -3574,6 +3606,14 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-arrow@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
+  integrity sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/react-avatar@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz#de9a5349d9e3de7bbe990334c4d2011acbbb9623"
@@ -3585,6 +3625,32 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-checkbox@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz#98f22c38d5010dd6df4c5744cac74087e3275f4b"
+  integrity sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
+"@radix-ui/react-collection@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159"
+  integrity sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+
 "@radix-ui/react-compose-refs@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
@@ -3662,6 +3728,53 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-label@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.0.2.tgz#9c72f1d334aac996fdc27b48a8bdddd82108fb6d"
+  integrity sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-popover@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
+  integrity sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
+"@radix-ui/react-popper@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"
+  integrity sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-rect" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+    "@radix-ui/rect" "1.0.1"
+
 "@radix-ui/react-portal@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
@@ -3703,6 +3816,35 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/react-toast@^1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toast/-/react-toast-1.1.5.tgz#f5788761c0142a5ae9eb97f0051fd3c48106d9e6"
+  integrity sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-visually-hidden" "1.0.3"
+
+"@radix-ui/react-toggle@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz#aecb2945630d1dc5c512997556c57aba894e539e"
+  integrity sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
 "@radix-ui/react-use-callback-ref@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
@@ -3733,6 +3875,44 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-previous@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz#b595c087b07317a4f143696c6a01de43b0d0ec66"
+  integrity sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
+  integrity sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/rect" "1.0.1"
+
+"@radix-ui/react-use-size@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz#1c5f5fea940a7d7ade77694bb98116fb49f870b2"
+  integrity sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-visually-hidden@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac"
+  integrity sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
+  integrity sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@react-icons/all-files@https://github.com/react-icons/react-icons/releases/download/v4.11.0/react-icons-all-files-4.11.0.tgz":
   version "4.11.0"
   resolved "https://github.com/react-icons/react-icons/releases/download/v4.11.0/react-icons-all-files-4.11.0.tgz#b35b5cee9f19e62d4e1551d63fe91375d04feb9f"
@@ -3807,6 +3987,11 @@
     redux-thunk "^2.4.2"
     reselect "^4.1.8"
 
+"@remirror/core-constants@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@remirror/core-constants/-/core-constants-2.0.2.tgz#f05eccdc69e3a65e7d524b52548f567904a11a1a"
+  integrity sha512-dyHY+sMF0ihPus3O27ODd4+agdHMEmuRdyiZJ2CCWjPV5UFmn17ZbElvk6WOGVE4rdCJKZQCrPV2BcikOMLUGQ==
+
 "@rollup/plugin-alias@^3.1.1":
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz#a5d267548fe48441f34be8323fb64d1d4a1b3fdf"
@@ -4099,6 +4284,16 @@
   dependencies:
     defer-to-connect "^2.0.1"
 
+"@tailwindcss/typography@^0.5.13":
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.13.tgz#cd788a4fa4d0ca2506e242d512f377b22c1f7932"
+  integrity sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
 "@tanstack/react-table@^8.10.7":
   version "8.16.0"
   resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.16.0.tgz#92151210ff99d6925353d7a2205735d9c31af48c"
@@ -4118,6 +4313,184 @@
   dependencies:
     tippy.js "^6.3.1"
 
+"@tiptap/core@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.4.0.tgz#6f8eee8beb5b89363582366b201ccc4798ac98a9"
+  integrity sha512-YJSahk8pkxpCs8SflCZfTnJpE7IPyUWIylfgXM2DefjRQa5DZ+c6sNY0s/zbxKYFQ6AuHVX40r9pCfcqHChGxQ==
+
+"@tiptap/extension-blockquote@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.4.0.tgz#0179076ea2fa12e41a198dad087b81d368653b8d"
+  integrity sha512-nJJy4KsPgQqWTTDOWzFRdjCfG5+QExfZj44dulgDFNh+E66xhamnbM70PklllXJgEcge7xmT5oKM0gKls5XgFw==
+
+"@tiptap/extension-bold@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.4.0.tgz#b5ced2c3bf51f304890137dbdf394d58c01eb208"
+  integrity sha512-csnW6hMDEHoRfxcPRLSqeJn+j35Lgtt1YRiOwn7DlS66sAECGRuoGfCvQSPij0TCDp4VCR9if5Sf8EymhnQumQ==
+
+"@tiptap/extension-bubble-menu@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.4.0.tgz#a079329318fc21407f9a3c9c3da6ef72cb0b4ab6"
+  integrity sha512-s99HmttUtpW3rScWq8rqk4+CGCwergNZbHLTkF6Rp6TSboMwfp+rwL5Q/JkcAG9KGLso1vGyXKbt1xHOvm8zMw==
+  dependencies:
+    tippy.js "^6.3.7"
+
+"@tiptap/extension-bullet-list@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.4.0.tgz#60eea05b5ac8c8e8d615c057559fddb95033abeb"
+  integrity sha512-9S5DLIvFRBoExvmZ+/ErpTvs4Wf1yOEs8WXlKYUCcZssK7brTFj99XDwpHFA29HKDwma5q9UHhr2OB2o0JYAdw==
+
+"@tiptap/extension-code-block@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.4.0.tgz#b7f1da4825677a2ea6b8e970a1197877551e5dc8"
+  integrity sha512-QWGdv1D56TBGbbJSj2cIiXGJEKguPiAl9ONzJ/Ql1ZksiQsYwx0YHriXX6TOC//T4VIf6NSClHEtwtxWBQ/Csg==
+
+"@tiptap/extension-code@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.4.0.tgz#3a9fed3585bf49f445505c2e9ad71fd66e117304"
+  integrity sha512-wjhBukuiyJMq4cTcK3RBTzUPV24k5n1eEPlpmzku6ThwwkMdwynnMGMAmSF3fErh3AOyOUPoTTjgMYN2d10SJA==
+
+"@tiptap/extension-document@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.4.0.tgz#a396b2cbcc8708aa2a0a41d0be481fda4b61c77b"
+  integrity sha512-3jRodQJZDGbXlRPERaloS+IERg/VwzpC1IO6YSJR9jVIsBO6xC29P3cKTQlg1XO7p6ZH/0ksK73VC5BzzTwoHg==
+
+"@tiptap/extension-dropcursor@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.4.0.tgz#8f54908f84a4ab7d2d7de7fc0197511138445740"
+  integrity sha512-c46HoG2PEEpSZv5rmS5UX/lJ6/kP1iVO0Ax+6JrNfLEIiDULUoi20NqdjolEa38La2VhWvs+o20OviiTOKEE9g==
+
+"@tiptap/extension-floating-menu@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.4.0.tgz#75c48b98d0f833251eab70f269ed186f48fc398e"
+  integrity sha512-vLb9v+htbHhXyty0oaXjT3VC8St4xuGSHWUB9GuAJAQ+NajIO6rBPbLUmm9qM0Eh2zico5mpSD1Qtn5FM6xYzg==
+  dependencies:
+    tippy.js "^6.3.7"
+
+"@tiptap/extension-gapcursor@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.4.0.tgz#2a738509d40f5f856492c11e32b10e4462f71216"
+  integrity sha512-F4y/0J2lseohkFUw9P2OpKhrJ6dHz69ZScABUvcHxjznJLd6+0Zt7014Lw5PA8/m2d/w0fX8LZQ88pZr4quZPQ==
+
+"@tiptap/extension-hard-break@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.4.0.tgz#b5bf5b065827280e450fba8f53d137654509d836"
+  integrity sha512-3+Z6zxevtHza5IsDBZ4lZqvNR3Kvdqwxq/QKCKu9UhJN1DUjsg/l1Jn2NilSQ3NYkBYh2yJjT8CMo9pQIu776g==
+
+"@tiptap/extension-heading@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.4.0.tgz#16302ce691714244c3d3fa92d2db86a5c895a025"
+  integrity sha512-fYkyP/VMo7YHO76YVrUjd95Qeo0cubWn/Spavmwm1gLTHH/q7xMtbod2Z/F0wd6QHnc7+HGhO7XAjjKWDjldaw==
+
+"@tiptap/extension-history@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.4.0.tgz#1dbf8410c091175627414d48a0d857232a8f4094"
+  integrity sha512-gr5qsKAXEVGr1Lyk1598F7drTaEtAxqZiuuSwTCzZzkiwgEQsWMWTWc9F8FlneCEaqe1aIYg6WKWlmYPaFwr0w==
+
+"@tiptap/extension-horizontal-rule@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.4.0.tgz#7f27c0778004602686251af7e2f7a8461a3d77ba"
+  integrity sha512-yDgxy+YxagcEsBbdWvbQiXYxsv3noS1VTuGwc9G7ZK9xPmBHJ5y0agOkB7HskwsZvJHoaSqNRsh7oZTkf0VR3g==
+
+"@tiptap/extension-italic@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.4.0.tgz#42ab003e04e1e8d825f698914c0e80ac849144f1"
+  integrity sha512-aaW/L9q+KNHHK+X73MPloHeIsT191n3VLd3xm6uUcFDnUNvzYJ/q65/1ZicdtCaOLvTutxdrEvhbkrVREX6a8g==
+
+"@tiptap/extension-link@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.4.0.tgz#e44edfe2f8d878959bd3ad64fda1b9e232f1f011"
+  integrity sha512-r3PjT0bjSKAorHAEBPA0icSMOlqALbxVlWU9vAc+Q3ndzt7ht0CTPNewzFF9kjzARABVt1cblXP/2+c0qGzcsg==
+  dependencies:
+    linkifyjs "^4.1.0"
+
+"@tiptap/extension-list-item@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.4.0.tgz#a97a48850b81e94b9a60cc2aa16e515aa5311456"
+  integrity sha512-reUVUx+2cI2NIAqMZhlJ9uK/+zvRzm1GTmlU2Wvzwc7AwLN4yemj6mBDsmBLEXAKPvitfLh6EkeHaruOGymQtg==
+
+"@tiptap/extension-ordered-list@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.4.0.tgz#6cf82e10d7e7f7cc44156d29b0b71a22dec31612"
+  integrity sha512-Zo0c9M0aowv+2+jExZiAvhCB83GZMjZsxywmuOrdUbq5EGYKb7q8hDyN3hkrktVHr9UPXdPAYTmLAHztTOHYRA==
+
+"@tiptap/extension-paragraph@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.4.0.tgz#5b9aea8775937b327bbe6754be12ae3144fb09ff"
+  integrity sha512-+yse0Ow67IRwcACd9K/CzBcxlpr9OFnmf0x9uqpaWt1eHck1sJnti6jrw5DVVkyEBHDh/cnkkV49gvctT/NyCw==
+
+"@tiptap/extension-strike@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.4.0.tgz#f09c4f51f7fed01c356026d7e8d8a1d1f2ac8f18"
+  integrity sha512-pE1uN/fQPOMS3i+zxPYMmPmI3keubnR6ivwM+KdXWOMnBiHl9N4cNpJgq1n2eUUGKLurC2qrQHpnVyGAwBS6Vg==
+
+"@tiptap/extension-text@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.4.0.tgz#a3a5f45a9856d513e574f24e2c9b6028273f8eb3"
+  integrity sha512-LV0bvE+VowE8IgLca7pM8ll7quNH+AgEHRbSrsI3SHKDCYB9gTHMjWaAkgkUVaO1u0IfCrjnCLym/PqFKa+vvg==
+
+"@tiptap/extension-underline@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.4.0.tgz#fb554333aed8a9ac1400b94f362a774c650f5a90"
+  integrity sha512-guWojb7JxUwLz4OKzwNExJwOkhZjgw/ttkXCMBT0PVe55k998MMYe1nvN0m2SeTW9IxurEPtScH4kYJ0XuSm8Q==
+
+"@tiptap/pm@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.4.0.tgz#f6fe81d24569da584658d2e8a3a378aea3619fb3"
+  integrity sha512-B1HMEqGS4MzIVXnpgRZDLm30mxDWj51LkBT/if1XD+hj5gm8B9Q0c84bhvODX6KIs+c6z+zsY9VkVu8w9Yfgxg==
+  dependencies:
+    prosemirror-changeset "^2.2.1"
+    prosemirror-collab "^1.3.1"
+    prosemirror-commands "^1.5.2"
+    prosemirror-dropcursor "^1.8.1"
+    prosemirror-gapcursor "^1.3.2"
+    prosemirror-history "^1.3.2"
+    prosemirror-inputrules "^1.3.0"
+    prosemirror-keymap "^1.2.2"
+    prosemirror-markdown "^1.12.0"
+    prosemirror-menu "^1.2.4"
+    prosemirror-model "^1.19.4"
+    prosemirror-schema-basic "^1.2.2"
+    prosemirror-schema-list "^1.3.0"
+    prosemirror-state "^1.4.3"
+    prosemirror-tables "^1.3.5"
+    prosemirror-trailing-node "^2.0.7"
+    prosemirror-transform "^1.8.0"
+    prosemirror-view "^1.32.7"
+
+"@tiptap/react@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/react/-/react-2.4.0.tgz#3d28944e10affa7aaf01bf291196dd9e27850e51"
+  integrity sha512-baxnIr6Dy+5iGagOEIKFeHzdl1ZRa6Cg+SJ3GDL/BVLpO6KiCM3Mm5ymB726UKP1w7icrBiQD2fGY3Bx8KaiSA==
+  dependencies:
+    "@tiptap/extension-bubble-menu" "^2.4.0"
+    "@tiptap/extension-floating-menu" "^2.4.0"
+
+"@tiptap/starter-kit@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.4.0.tgz#ad2c2d900af41e55eaaccafa92fd6b2acaebd97e"
+  integrity sha512-DYYzMZdTEnRn9oZhKOeRCcB+TjhNz5icLlvJKoHoOGL9kCbuUyEf8WRR2OSPckI0+KUIPJL3oHRqO4SqSdTjfg==
+  dependencies:
+    "@tiptap/core" "^2.4.0"
+    "@tiptap/extension-blockquote" "^2.4.0"
+    "@tiptap/extension-bold" "^2.4.0"
+    "@tiptap/extension-bullet-list" "^2.4.0"
+    "@tiptap/extension-code" "^2.4.0"
+    "@tiptap/extension-code-block" "^2.4.0"
+    "@tiptap/extension-document" "^2.4.0"
+    "@tiptap/extension-dropcursor" "^2.4.0"
+    "@tiptap/extension-gapcursor" "^2.4.0"
+    "@tiptap/extension-hard-break" "^2.4.0"
+    "@tiptap/extension-heading" "^2.4.0"
+    "@tiptap/extension-history" "^2.4.0"
+    "@tiptap/extension-horizontal-rule" "^2.4.0"
+    "@tiptap/extension-italic" "^2.4.0"
+    "@tiptap/extension-list-item" "^2.4.0"
+    "@tiptap/extension-ordered-list" "^2.4.0"
+    "@tiptap/extension-paragraph" "^2.4.0"
+    "@tiptap/extension-strike" "^2.4.0"
+    "@tiptap/extension-text" "^2.4.0"
+
 "@tokenizer/token@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.3.0.tgz#fe98a93fe789247e998c75e74e9c7c63217aa276"
@@ -6461,7 +6834,7 @@ create-require@^1.1.0:
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
-crelt@^1.0.5:
+crelt@^1.0.0, crelt@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
   integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
@@ -6821,6 +7194,11 @@ date-fns@^2.30.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+date-fns@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
+
 dateformat@^4.6.3:
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-4.6.3.tgz#556fa6497e5217fedb78821424f8a1c22fa3f4b5"
@@ -9597,15 +9975,6 @@ hast-util-raw@^9.0.0:
     web-namespaces "^2.0.0"
     zwitch "^2.0.0"
 
-hast-util-sanitize@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-5.0.1.tgz#8e90068cd68e651c569960b77a1b25076579b4cf"
-  integrity sha512-IGrgWLuip4O2nq5CugXy4GI2V8kx4sFVy5Hd4vF7AR2gxS0N9s7nEAVUyeMtZKZvzrxVsHt73XdTsno1tClIkQ==
-  dependencies:
-    "@types/hast" "^3.0.0"
-    "@ungap/structured-clone" "^1.2.0"
-    unist-util-position "^5.0.0"
-
 hast-util-to-estree@^2.0.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/hast-util-to-estree/-/hast-util-to-estree-2.3.3.tgz#da60142ffe19a6296923ec222aba73339c8bf470"
@@ -10853,6 +11222,18 @@ linkfs@^2.1.0:
   resolved "https://registry.yarnpkg.com/linkfs/-/linkfs-2.1.0.tgz#5cc774ad8ed6b0aae5a858bd67e3334cc300a917"
   integrity sha512-kmsGcmpvjStZ0ATjuHycBujtNnXiZR28BTivEu0gAMDTT7GEyodcK6zSRtu6xsrdorrPZEIN380x7BD7xEYkew==
 
+linkify-it@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
+  integrity sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==
+  dependencies:
+    uc.micro "^2.0.0"
+
+linkifyjs@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.1.3.tgz#0edbc346428a7390a23ea2e5939f76112c9ae07f"
+  integrity sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg==
+
 lmdb@2.5.2:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-2.5.2.tgz#37e28a9fb43405f4dc48c44cec0e13a14c4a6ff1"
@@ -10940,6 +11321,11 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
 lodash.clonedeep@4.5.0, lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
@@ -10970,6 +11356,11 @@ lodash.foreach@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
   integrity sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==
 
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
+
 lodash.map@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
@@ -11147,6 +11538,18 @@ markdown-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/markdown-extensions/-/markdown-extensions-2.0.0.tgz#34bebc83e9938cae16e0e017e4a9814a8330d3c4"
   integrity sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==
 
+markdown-it@^14.0.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
+  integrity sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==
+  dependencies:
+    argparse "^2.0.1"
+    entities "^4.4.0"
+    linkify-it "^5.0.0"
+    mdurl "^2.0.0"
+    punycode.js "^2.3.1"
+    uc.micro "^2.1.0"
+
 markdown-table@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.3.tgz#e6331d30e493127e031dd385488b5bd326e4a6bd"
@@ -11481,6 +11884,11 @@ mdn-data@2.0.30:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
   integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
 
+mdurl@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
+  integrity sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==
+
 meant@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/meant/-/meant-1.0.3.tgz#67769af9de1d158773e928ae82c456114903554c"
@@ -12768,6 +13176,11 @@ ordered-binary@^1.2.4:
   resolved "https://registry.yarnpkg.com/ordered-binary/-/ordered-binary-1.5.1.tgz#94ccbf14181711081ee23931db0dc3f58aaa0df6"
   integrity sha512-5VyHfHY3cd0iza71JepYG50My+YUbrFtGoUz2ooEydPyPM7Aai/JW098juLr+RG6+rDJuzNNTsEQu2DZa1A41A==
 
+orderedmap@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.1.1.tgz#61481269c44031c449915497bf5a4ad273c512d2"
+  integrity sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==
+
 os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
@@ -13454,6 +13867,14 @@ postcss-reduce-transforms@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
+postcss-selector-parser@6.0.10:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
   version "6.0.16"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"
@@ -13658,6 +14079,159 @@ property-information@^6.0.0:
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.5.0.tgz#6212fbb52ba757e92ef4fb9d657563b933b7ffec"
   integrity sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==
 
+prosemirror-changeset@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-changeset/-/prosemirror-changeset-2.2.1.tgz#dae94b63aec618fac7bb9061648e6e2a79988383"
+  integrity sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==
+  dependencies:
+    prosemirror-transform "^1.0.0"
+
+prosemirror-collab@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz#0e8c91e76e009b53457eb3b3051fb68dad029a33"
+  integrity sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==
+  dependencies:
+    prosemirror-state "^1.0.0"
+
+prosemirror-commands@^1.0.0, prosemirror-commands@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.5.2.tgz#e94aeea52286f658cd984270de9b4c3fff580852"
+  integrity sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-dropcursor@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.1.tgz#49b9fb2f583e0d0f4021ff87db825faa2be2832d"
+  integrity sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+    prosemirror-view "^1.1.0"
+
+prosemirror-gapcursor@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz#5fa336b83789c6199a7341c9493587e249215cb4"
+  integrity sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==
+  dependencies:
+    prosemirror-keymap "^1.0.0"
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-view "^1.0.0"
+
+prosemirror-history@^1.0.0, prosemirror-history@^1.3.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.4.0.tgz#1edbce630aaf21b808e5a5cd798a09976ecb1827"
+  integrity sha512-UUiGzDVcqo1lovOPdi9YxxUps3oBFWAIYkXLu3Ot+JPv1qzVogRbcizxK3LhHmtaUxclohgiOVesRw5QSlMnbQ==
+  dependencies:
+    prosemirror-state "^1.2.2"
+    prosemirror-transform "^1.0.0"
+    prosemirror-view "^1.31.0"
+    rope-sequence "^1.3.0"
+
+prosemirror-inputrules@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.4.0.tgz#ef1519bb2cb0d1e0cec74bad1a97f1c1555068bb"
+  integrity sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.2, prosemirror-keymap@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz#14a54763a29c7b2704f561088ccf3384d14eb77e"
+  integrity sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    w3c-keyname "^2.2.0"
+
+prosemirror-markdown@^1.12.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-markdown/-/prosemirror-markdown-1.13.0.tgz#67ebfa40af48a22d1e4ed6cad2e29851eb61e649"
+  integrity sha512-UziddX3ZYSYibgx8042hfGKmukq5Aljp2qoBiJRejD/8MH70siQNz5RB1TrdTPheqLMy4aCe4GYNF10/3lQS5g==
+  dependencies:
+    markdown-it "^14.0.0"
+    prosemirror-model "^1.20.0"
+
+prosemirror-menu@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz#3cfdc7c06d10f9fbd1bce29082c498bd11a0a79a"
+  integrity sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==
+  dependencies:
+    crelt "^1.0.0"
+    prosemirror-commands "^1.0.0"
+    prosemirror-history "^1.0.0"
+    prosemirror-state "^1.0.0"
+
+prosemirror-model@^1.0.0, prosemirror-model@^1.19.0, prosemirror-model@^1.19.4, prosemirror-model@^1.20.0, prosemirror-model@^1.21.0, prosemirror-model@^1.8.1:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.21.0.tgz#2d69ed04b4e7c441c3eb87c1c964fab4f9b217df"
+  integrity sha512-zLpS1mVCZLA7VTp82P+BfMiYVPcX1/z0Mf3gsjKZtzMWubwn2pN7CceMV0DycjlgE5JeXPR7UF4hJPbBV98oWA==
+  dependencies:
+    orderedmap "^2.0.0"
+
+prosemirror-schema-basic@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.2.tgz#6695f5175e4628aab179bf62e5568628b9cfe6c7"
+  integrity sha512-/dT4JFEGyO7QnNTe9UaKUhjDXbTNkiWTq/N4VpKaF79bBjSExVV2NXmJpcM7z/gD7mbqNjxbmWW5nf1iNSSGnw==
+  dependencies:
+    prosemirror-model "^1.19.0"
+
+prosemirror-schema-list@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.3.0.tgz#05374702cf35a3ba5e7ec31079e355a488d52519"
+  integrity sha512-Hz/7gM4skaaYfRPNgr421CU4GSwotmEwBVvJh5ltGiffUJwm7C8GfN/Bc6DR1EKEp5pDKhODmdXXyi9uIsZl5A==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.7.3"
+
+prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.1, prosemirror-state@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.3.tgz#94aecf3ffd54ec37e87aa7179d13508da181a080"
+  integrity sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+    prosemirror-view "^1.27.0"
+
+prosemirror-tables@^1.3.5:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-1.3.7.tgz#9d296bd432d2bc7dca90f14e5c3b5c5f61277f7a"
+  integrity sha512-oEwX1wrziuxMtwFvdDWSFHVUWrFJWt929kVVfHvtTi8yvw+5ppxjXZkMG/fuTdFo+3DXyIPSKfid+Be1npKXDA==
+  dependencies:
+    prosemirror-keymap "^1.1.2"
+    prosemirror-model "^1.8.1"
+    prosemirror-state "^1.3.1"
+    prosemirror-transform "^1.2.1"
+    prosemirror-view "^1.13.3"
+
+prosemirror-trailing-node@^2.0.7:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.8.tgz#233ddcbda72de06f9b5d758d2a65a8cac482ea10"
+  integrity sha512-ujRYhSuhQb1Jsarh1IHqb2KoSnRiD7wAMDGucP35DN7j5af6X7B18PfdPIrbwsPTqIAj0fyOvxbuPsWhNvylmA==
+  dependencies:
+    "@remirror/core-constants" "^2.0.2"
+    escape-string-regexp "^4.0.0"
+
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1, prosemirror-transform@^1.7.3, prosemirror-transform@^1.8.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.9.0.tgz#81fd1fbd887929a95369e6dd3d240c23c19313f8"
+  integrity sha512-5UXkr1LIRx3jmpXXNKDhv8OyAOeLTGuXNwdVfg8x27uASna/wQkr9p6fD3eupGOi4PLJfbezxTyi/7fSJypXHg==
+  dependencies:
+    prosemirror-model "^1.21.0"
+
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.32.7:
+  version "1.33.6"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.33.6.tgz#85804eb922411af8e300a07f4f376722b15900b9"
+  integrity sha512-zRLUNgLIQfd8IfGprsXxWTjdA8xEAFJe8cDNrOptj6Mop9sj+BMeVbJvceyAYCm5G2dOdT2prctH7K9dfnpIMw==
+  dependencies:
+    prosemirror-model "^1.20.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
@@ -13699,6 +14273,11 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
+punycode.js@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
+  integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
+
 punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
@@ -13833,6 +14412,11 @@ react-composer@^5.0.3:
   dependencies:
     prop-types "^15.6.0"
 
+react-day-picker@^8.10.1:
+  version "8.10.1"
+  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.10.1.tgz#4762ec298865919b93ec09ba69621580835b8e80"
+  integrity sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -13920,11 +14504,16 @@ react-focus-lock@^2.4.1, react-focus-lock@^2.9.4:
     use-callback-ref "^1.3.2"
     use-sidecar "^1.1.2"
 
-react-hook-form@^7.45.2, react-hook-form@^7.46.1:
+react-hook-form@^7.46.1:
   version "7.51.3"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.3.tgz#7486dd2d52280b6b28048c099a98d2545931cab3"
   integrity sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==
 
+react-hook-form@^7.51.5:
+  version "7.51.5"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.5.tgz#4afbfb819312db9fea23e8237a3a0d097e128b43"
+  integrity sha512-J2ILT5gWx1XUIJRETiA7M19iXHlG74+6O3KApzvqB/w8S5NQR7AbU8HVZrMALdmDgWpRPYiZJl0zx8Z4L2mP6Q==
+
 react-icons@*:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.1.0.tgz#9e7533cc256571a610c2a1ec8a7a143fb1222943"
@@ -14370,14 +14959,6 @@ rehype-parse@^9.0.0:
     hast-util-from-html "^2.0.0"
     unified "^11.0.0"
 
-rehype-sanitize@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/rehype-sanitize/-/rehype-sanitize-6.0.0.tgz#16e95f4a67a69cbf0f79e113c8e0df48203db73c"
-  integrity sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg==
-  dependencies:
-    "@types/hast" "^3.0.0"
-    hast-util-sanitize "^5.0.0"
-
 rehype-slug-custom-id@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/rehype-slug-custom-id/-/rehype-slug-custom-id-1.1.0.tgz#56fe346244da033cbf33efa764b1351c993b6960"
@@ -14716,6 +15297,11 @@ rollup@^2.35.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
+rope-sequence@^1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.3.4.tgz#df85711aaecd32f1e756f76e43a415171235d425"
+  integrity sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==
+
 rrweb-cssom@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1"
@@ -15862,7 +16448,7 @@ tiny-invariant@^1.0.6:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
   integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
 
-tippy.js@^6.3.1:
+tippy.js@^6.3.1, tippy.js@^6.3.7:
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
   integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
@@ -16183,6 +16769,11 @@ ua-parser-js@^1.0.35:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f"
   integrity sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==
 
+uc.micro@^2.0.0, uc.micro@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
+  integrity sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
@@ -16584,7 +17175,7 @@ vfile@^6.0.0:
     unist-util-stringify-position "^4.0.0"
     vfile-message "^4.0.0"
 
-w3c-keyname@^2.2.4:
+w3c-keyname@^2.2.0, w3c-keyname@^2.2.4:
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
   integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
@@ -17052,6 +17643,11 @@ yurnalist@^2.1.0:
     read "^1.0.7"
     strip-ansi "^5.2.0"
 
+zod@^3.23.8:
+  version "3.23.8"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
+  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==
+
 zustand@4.3.9:
   version "4.3.9"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.9.tgz#a7d4332bbd75dfd25c6848180b3df1407217f2ad"

From 5b825b04003bd44e9c9e3bc1221f85fdfd898206 Mon Sep 17 00:00:00 2001
From: Nico Schett <nicoschett@icloud.com>
Date: Thu, 23 May 2024 08:24:46 +0200
Subject: [PATCH 3/5] fix: jaen update only for jaen:admin

---
 .../src/gatsby/wrap-root-element.tsx                | 12 ++++++------
 packages/jaen/src/hooks/use-jaen-update.tsx         | 13 ++++++++-----
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/gatsby-plugin-jaen/src/gatsby/wrap-root-element.tsx b/packages/gatsby-plugin-jaen/src/gatsby/wrap-root-element.tsx
index 077d7170..b8b627b5 100644
--- a/packages/gatsby-plugin-jaen/src/gatsby/wrap-root-element.tsx
+++ b/packages/gatsby-plugin-jaen/src/gatsby/wrap-root-element.tsx
@@ -34,9 +34,9 @@ export const wrapRootElement: GatsbyBrowser['wrapRootElement'] = (
 
       <CookieConsentProvider>
         <NotificationsProvider>
-          <JaenUpdateModalProvider>
-            <SiteMetadataProvider>
-              <AuthenticationProvider>
+          <AuthenticationProvider>
+            <JaenUpdateModalProvider>
+              <SiteMetadataProvider>
                 <JaenFrameMenuProvider>
                   <MediaModalProvider MediaModalComponent={MediaModalComponent}>
                     <JaenWidgetProvider>
@@ -45,9 +45,9 @@ export const wrapRootElement: GatsbyBrowser['wrapRootElement'] = (
                     </JaenWidgetProvider>
                   </MediaModalProvider>
                 </JaenFrameMenuProvider>
-              </AuthenticationProvider>
-            </SiteMetadataProvider>
-          </JaenUpdateModalProvider>
+              </SiteMetadataProvider>
+            </JaenUpdateModalProvider>
+          </AuthenticationProvider>
         </NotificationsProvider>
       </CookieConsentProvider>
     </ChakraProvider>
diff --git a/packages/jaen/src/hooks/use-jaen-update.tsx b/packages/jaen/src/hooks/use-jaen-update.tsx
index f09a94ef..22fc2ba1 100644
--- a/packages/jaen/src/hooks/use-jaen-update.tsx
+++ b/packages/jaen/src/hooks/use-jaen-update.tsx
@@ -1,4 +1,5 @@
-import {persistKey, resetState} from '../redux'
+import {checkUserRoles, useAuth} from '../contexts/auth'
+import {resetState} from '../redux'
 
 declare global {
   interface Window {
@@ -7,6 +8,8 @@ declare global {
 }
 
 export const useJaenUpdate = () => {
+  const auth = useAuth()
+
   const key = 'ljch'
   // @ts-ignore
   const latestWebpackCompilationHash = __JAEN_DATA_CONTENT_DIGEST__
@@ -33,13 +36,13 @@ export const useJaenUpdate = () => {
     }
 
     // set the latestJaenCompilationHash to the latest webpack compilation hash if
-    // the `jaen-state` key is set in localStorage. This is to ensure that there is only
-    // a incoming build when the user has logged in to jaen.
+    // the user has the 'jaen-admin' role. This is to ensure that only jaen-admins
+    // see the update modal.
 
     if (latestWebpackCompilationHash) {
-      const isJaenStateKeySet = localStorage.getItem(persistKey) !== null
+      const isJaenAdmin = checkUserRoles(auth.user, ['jaen:admin'])
 
-      if (isJaenStateKeySet) {
+      if (isJaenAdmin) {
         localStorage.setItem(key, latestWebpackCompilationHash)
       }
     }

From 811f9c076d270dd4c7f922441692346b2933df52 Mon Sep 17 00:00:00 2001
From: Nico Schett <nicoschett@icloud.com>
Date: Mon, 27 May 2024 10:13:44 +0200
Subject: [PATCH 4/5] chore: remove console logs

---
 packages/gatsby-plugin-jaen/package.json                    | 2 +-
 .../gatsby-plugin-jaen/src/components/Settings/Settings.tsx | 2 --
 .../src/components/cms/Settings/Settings.tsx                | 2 --
 .../gatsby-plugin-jaen/src/gatsby/DynamicPageRenderer.tsx   | 2 --
 packages/gatsby-plugin-jaen/src/pages/settings.tsx          | 2 --
 packages/jaen/src/contexts/auth.tsx                         | 2 --
 packages/jaen/src/contexts/cms-management.tsx               | 6 ------
 7 files changed, 1 insertion(+), 17 deletions(-)

diff --git a/packages/gatsby-plugin-jaen/package.json b/packages/gatsby-plugin-jaen/package.json
index b66147eb..b4795d99 100644
--- a/packages/gatsby-plugin-jaen/package.json
+++ b/packages/gatsby-plugin-jaen/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-jaen",
-  "version": "1.0.0-rc.100",
+  "version": "1.0.0-rc.102",
   "main": "index.js",
   "types": "./src/index.ts",
   "files": [
diff --git a/packages/gatsby-plugin-jaen/src/components/Settings/Settings.tsx b/packages/gatsby-plugin-jaen/src/components/Settings/Settings.tsx
index 58af1296..42133ff9 100644
--- a/packages/gatsby-plugin-jaen/src/components/Settings/Settings.tsx
+++ b/packages/gatsby-plugin-jaen/src/components/Settings/Settings.tsx
@@ -91,8 +91,6 @@ export const Settings: React.FC<SettingsProps> = props => {
   const query = new URLSearchParams(window.location.search)
   const initialTab = query.get('activeTab') || 'GENERAL' // replace 'GENERAL' with your default tab value
 
-  console.log('settings', props)
-
   const notify = useNotificationsContext()
 
   const [user, setUser] = useState(props.user)
diff --git a/packages/gatsby-plugin-jaen/src/components/cms/Settings/Settings.tsx b/packages/gatsby-plugin-jaen/src/components/cms/Settings/Settings.tsx
index a352be4f..45d4e7b9 100644
--- a/packages/gatsby-plugin-jaen/src/components/cms/Settings/Settings.tsx
+++ b/packages/gatsby-plugin-jaen/src/components/cms/Settings/Settings.tsx
@@ -71,8 +71,6 @@ export const Settings: React.FC<SettingsProps> = ({data, onUpdate}) => {
     })
   }, [data])
 
-  console.log('values', getValues())
-
   return (
     <Box id="coco">
       <form
diff --git a/packages/gatsby-plugin-jaen/src/gatsby/DynamicPageRenderer.tsx b/packages/gatsby-plugin-jaen/src/gatsby/DynamicPageRenderer.tsx
index 79ae1665..82316032 100644
--- a/packages/gatsby-plugin-jaen/src/gatsby/DynamicPageRenderer.tsx
+++ b/packages/gatsby-plugin-jaen/src/gatsby/DynamicPageRenderer.tsx
@@ -46,8 +46,6 @@ export const DynamicPageRenderer: React.FC<DynamicPageRendererProps> =
     }
 
     if (dynamic) {
-      console.log('dynamic', dynamic)
-
       return (
         <PageProvider jaenPage={{id: dynamic.jaenPageId}}>
           <React.Suspense fallback={<div>Loading...</div>}>
diff --git a/packages/gatsby-plugin-jaen/src/pages/settings.tsx b/packages/gatsby-plugin-jaen/src/pages/settings.tsx
index 0907a2d8..9b345eee 100644
--- a/packages/gatsby-plugin-jaen/src/pages/settings.tsx
+++ b/packages/gatsby-plugin-jaen/src/pages/settings.tsx
@@ -7,8 +7,6 @@ import {Settings} from '../components/Settings'
 const SettingsPage: React.FC<PageProps> = () => {
   const authUser = useAuthUser()
 
-  console.log('AUTH USER', authUser)
-
   return (
     <Settings
       user={authUser.user}
diff --git a/packages/jaen/src/contexts/auth.tsx b/packages/jaen/src/contexts/auth.tsx
index 154cf5d2..ab4cfd3c 100644
--- a/packages/jaen/src/contexts/auth.tsx
+++ b/packages/jaen/src/contexts/auth.tsx
@@ -136,8 +136,6 @@ export const withAuthSecurity = <
     const pageConfigAuth = props.pageContext.pageConfig?.auth
     const auth = useAuth()
 
-    console.log('auth', auth)
-
     const loadingText = useMemo(() => {
       switch (auth.activeNavigator) {
         case 'signinRedirect':
diff --git a/packages/jaen/src/contexts/cms-management.tsx b/packages/jaen/src/contexts/cms-management.tsx
index 09021374..befac4d2 100644
--- a/packages/jaen/src/contexts/cms-management.tsx
+++ b/packages/jaen/src/contexts/cms-management.tsx
@@ -214,12 +214,6 @@ export const CMSManagementProvider = withRedux(
                 return 5
               }
 
-              console.log(
-                'parentPage.childPagesOrder',
-                parentPage.childPagesOrder,
-                parentPage
-              )
-
               const aIndex = parentPage.childPagesOrder?.indexOf(a.id)
               const bIndex = parentPage.childPagesOrder?.indexOf(b.id)
 

From 24b88358ffebdfac8f0e4bbc3dcfcdf53e9fb2d1 Mon Sep 17 00:00:00 2001
From: Nico Schett <nicoschett@icloud.com>
Date: Mon, 27 May 2024 10:14:15 +0200
Subject: [PATCH 5/5] fix: useJaenPageIndex handle deleted child pages

Added handling of deleted child pages in useJaenPageIndex function.
---
 packages/jaen/package.json          | 2 +-
 packages/jaen/src/contexts/page.tsx | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/jaen/package.json b/packages/jaen/package.json
index 166ae93b..aeaf943b 100644
--- a/packages/jaen/package.json
+++ b/packages/jaen/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@atsnek/jaen",
-  "version": "1.0.0-rc.83",
+  "version": "1.0.0-rc.87",
   "description": "The Webapps framework for creating scalable and dynamic applications with ease.",
   "type": "module",
   "source": "src/index.ts",
diff --git a/packages/jaen/src/contexts/page.tsx b/packages/jaen/src/contexts/page.tsx
index 9aee3424..7824e616 100644
--- a/packages/jaen/src/contexts/page.tsx
+++ b/packages/jaen/src/contexts/page.tsx
@@ -142,13 +142,10 @@ export const useJaenPageIndex = (
       const actualPages = []
 
       for (const {id, deleted} of page.childPages) {
-        if (deleted) {
-          continue
-        }
-
         const actualChild = {
           ...state.page.pages.nodes[id],
-          id
+          id,
+          deleted
         }
         if (actualChild) {
           actualPages.push(actualChild)