WIP: HtmlPurifierService.php: allow iframe from 3mdeb domain

backend/app/Services/Infrastructure/HtmlPurifier/HtmlPurifierService.php

@@ -18,6 +18,14 @@ public function __construct(private readonly HTMLPurifier $htmlPurifier)
         File::ensureDirectoryExists($cachePath, 0755);
 
         $this->config->set('Cache.SerializerPath', $cachePath);
+
+        // For testing I'm allowing all iframe sources, it's safer to lock it down to expected URLs
+        $this->config->set('HTML.AllowedElements', 'p,b,i,u,s,strong,em,li,ul,ol,br,span,img,a,iframe');
+        $this->config->set('HTML.SafeIframe', true);
+        $this->config->set('URI.SafeIframeRegexp', '/.*/');
+        // For later to safe-lock the iframe source
+        #$this->config->set('URI.SafeIframeRegexp', '#^https://cfp\.3mdeb\.com#');
+        #$this->config->set('HTML.Allowed', implode(',', ['iframe[src|width|height|style]',]));
     }
 
     public function purify(?string $html): string

frontend/src/components/common/Editor/Controls/InsertIframeControl/index.tsx

@@ -0,0 +1,112 @@
+import {RichTextEditor, useRichTextEditorContext} from "@mantine/tiptap";
+import {useCallback, useState} from "react";
+import {t} from "@lingui/macro";
+import {IconBrandYoutube} from "@tabler/icons-react";
+import {Button, Group, Modal, Portal, TextInput} from "@mantine/core";
+
+export const InsertIframeControl = () => {
+    const editor = useRichTextEditorContext();
+    const [isModalOpen, setModalOpen] = useState(false);
+    const [iframeUrl, setIframeUrl] = useState('');
+    const [iframeWidth, setIframeWidth] = useState('100%');
+    const [iframeHeight, setIframeHeight] = useState('315');
+    const [iframeTitle, setIframeTitle] = useState('');
+    const [urlError, setUrlError] = useState<string | null>(null);
+
+    const validateUrl = (url: string) => {
+        // Basic URL validation
+        try {
+            new URL(url);
+            return true;
+        } catch (e) {
+            return false;
+        }
+    };
+
+    const handleIframeInsert = useCallback(() => {
+        if (!iframeUrl || !validateUrl(iframeUrl)) {
+            setUrlError(t`Please enter a valid URL`);
+            return;
+        }
+
+        if (editor && editor.editor) {
+            editor.editor.commands.setIframe({
+                src: iframeUrl,
+                width: iframeWidth,
+                height: `${iframeHeight}px`,
+                title: iframeTitle || undefined
+            });
+
+            // Reset and close modal
+            setModalOpen(false);
+            setIframeUrl('');
+            setIframeWidth('100%');
+            setIframeHeight('315');
+            setIframeTitle('');
+            setUrlError(null);
+        }
+    }, [editor, iframeUrl, iframeWidth, iframeHeight, iframeTitle]);
+
+    return (
+        <>
+            <RichTextEditor.Control
+                onClick={() => setModalOpen(true)}
+                aria-label="Insert iframe"
+                title="Insert iframe"
+            >
+                <IconBrandYoutube stroke={1.5} size="1rem"/>
+            </RichTextEditor.Control>
+
+            <Portal>
+                <Modal
+                    opened={isModalOpen}
+                    onClose={() => setModalOpen(false)}
+                    title={t`Insert Iframe`}
+                >
+                    <TextInput
+                        label={t`Iframe URL`}
+                        placeholder="https://www.youtube.com/embed/dQw4w9WgXcQ"
+                        value={iframeUrl}
+                        onChange={(event) => {
+                            setIframeUrl(event.currentTarget.value);
+                            setUrlError(null);
+                        }}
+                        error={urlError}
+                        required
+                        mb="md"
+                    />
+
+                    <TextInput
+                        label={t`Width`}
+                        placeholder="100%"
+                        value={iframeWidth}
+                        onChange={(event) => setIframeWidth(event.currentTarget.value)}
+                        mb="md"
+                    />
+
+                    <TextInput
+                        label={t`Height (px)`}
+                        placeholder="315"
+                        value={iframeHeight}
+                        onChange={(event) => setIframeHeight(event.currentTarget.value)}
+                        mb="md"
+                    />
+
+                    <TextInput
+                        label={t`Title (for accessibility)`}
+                        placeholder="Video title"
+                        value={iframeTitle}
+                        onChange={(event) => setIframeTitle(event.currentTarget.value)}
+                        mb="md"
+                    />
+
+                    <Group mt="md">
+                        <Button onClick={handleIframeInsert}>
+                            {t`Insert Iframe`}
+                        </Button>
+                    </Group>
+                </Modal>
+            </Portal>
+        </>
+    );
+};

frontend/src/components/common/Editor/Extensions/IframeExtension/index.ts

@@ -0,0 +1,84 @@
+import {mergeAttributes, Node} from '@tiptap/core';
+
+export interface IframeOptions {
+    allowFullscreen: boolean;
+    HTMLAttributes: {
+        [key: string]: any;
+    };
+}
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        iframe: {
+            setIframe: (options: { src: string; width?: string; height?: string; title?: string }) => ReturnType;
+        };
+    }
+}
+
+export const Iframe = Node.create<IframeOptions>({
+    name: 'iframe',
+
+    group: 'block',
+
+    atom: true,
+
+    addOptions() {
+        return {
+            allowFullscreen: true,
+            HTMLAttributes: {
+                class: 'iframe-wrapper',
+            },
+        };
+    },
+
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+            },
+            width: {
+                default: '100%',
+            },
+            height: {
+                default: '315px',
+            },
+            frameborder: {
+                default: '0',
+            },
+            title: {
+                default: null,
+            },
+            allow: {
+                default: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
+            },
+            style: {
+                default: 'width: 100%; height: 315px; border: 1px solid #ccc;',
+            },
+        };
+    },
+
+    parseHTML() {
+        return [
+            {
+                tag: 'iframe',
+            },
+        ];
+    },
+
+    renderHTML({HTMLAttributes}) {
+        return ['div', this.options.HTMLAttributes, ['iframe', mergeAttributes(HTMLAttributes)]];
+    },
+
+    addCommands() {
+        return {
+            setIframe:
+                (options) =>
+                    ({commands}) => {
+                        return commands.insertContent({
+                            type: this.name,
+                            attrs: options,
+                        });
+                    },
+        };
+    },
+});

frontend/src/components/common/Editor/index.tsx

@@ -12,7 +12,9 @@ import classes from "./Editor.module.scss";
 import classNames from "classnames";
 import {Trans} from "@lingui/macro";
 import {InsertImageControl} from "./Controls/InsertImageControl";
+import {InsertIframeControl} from "./Controls/InsertIframeControl";
 import {ImageResize} from "./Extensions/ImageResizeExtension";
+import {Iframe} from "./Extensions/IframeExtension";
 
 interface EditorProps {
     onChange: (value: string) => void;
@@ -48,7 +50,13 @@ export const Editor = ({
             Image,
             ImageResize,
             TextStyle,
-            Color
+            Color,
+            Iframe.configure({
+                allowFullscreen: true,
+                HTMLAttributes: {
+                    class: 'iframe-wrapper',
+                },
+            }),
         ],
         onUpdate: ({editor}) => {
             const html = editor.getHTML();
@@ -141,6 +149,7 @@ export const Editor = ({
                             </RichTextEditor.ControlsGroup>
                             <RichTextEditor.ControlsGroup>
                                 <InsertImageControl/>
+                                <InsertIframeControl/>
                             </RichTextEditor.ControlsGroup>
                         </>
                     )}
@@ -187,6 +196,10 @@ export const Editor = ({
                                 <RichTextEditor.BulletList/>
                                 <RichTextEditor.OrderedList/>
                             </RichTextEditor.ControlsGroup>
+
+                            <RichTextEditor.ControlsGroup>
+                                <InsertIframeControl/>
+                            </RichTextEditor.ControlsGroup>
                         </>
                     )}
                 </RichTextEditor.Toolbar>

frontend/src/components/layouts/EventHomepage/EventHomepage.module.scss

@@ -68,7 +68,8 @@
     }
 
     a {
-      color: var(--homepage-primary-text-color, var(--tk-primary)) !important;
+      color: #007bff !important;
+      text-decoration: none;
     }
 
     .eventInfo {