Version 3

.gitignore

@@ -17,4 +17,6 @@ wiki/www/wiki.html
 wiki/public/css/tailwind.css
 playwright-report/
 test-results/
-e2e/.auth/
+e2e/.auth/
+.env
+screenshots/

e2e/tests/callout-rich-text.spec.ts

@@ -0,0 +1,173 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Callout Rich Text Editing', () => {
+	/**
+	 * Helper: navigate to a space and create a new page, returning the editor locator.
+	 */
+	async function createPageAndOpenEditor(
+		page: import('@playwright/test').Page,
+		pageTitle: string,
+	) {
+		await page.goto('/wiki');
+		await page.waitForLoadState('networkidle');
+
+		const spaceLink = page.locator('a[href*="/wiki/spaces/"]').first();
+		await expect(spaceLink).toBeVisible({ timeout: 5000 });
+		await spaceLink.click();
+		await page.waitForLoadState('networkidle');
+
+		const createFirstPage = page.locator(
+			'button:has-text("Create First Page")',
+		);
+		const newPageButton = page.locator('button[title="New Page"]');
+
+		if (await createFirstPage.isVisible({ timeout: 2000 }).catch(() => false)) {
+			await createFirstPage.click();
+		} else {
+			await newPageButton.click();
+		}
+
+		await page.getByLabel('Title').fill(pageTitle);
+		await page
+			.getByRole('dialog')
+			.getByRole('button', { name: 'Save Draft' })
+			.click();
+		await page.waitForLoadState('networkidle');
+
+		await page.locator('aside').getByText(pageTitle, { exact: true }).click();
+
+		const editor = page.locator('.ProseMirror, [contenteditable="true"]');
+		await expect(editor).toBeVisible({ timeout: 10000 });
+		return editor;
+	}
+
+	test('callout should round-trip inline markdown (bold, italic, links)', async ({
+		page,
+	}) => {
+		const pageTitle = `callout-rt-${Date.now()}`;
+		await createPageAndOpenEditor(page, pageTitle);
+
+		const result = await page.evaluate(() => {
+			const ed = document.querySelector('.ProseMirror') as HTMLElement & {
+				editor?: {
+					commands: {
+						setContent: (c: string, o?: object) => void;
+					};
+					getMarkdown: () => string;
+					getHTML: () => string;
+					getJSON: () => {
+						type: string;
+						content: { type: string; attrs?: Record<string, unknown> }[];
+					};
+				};
+			};
+			const editor = ed?.editor;
+			if (!editor) return { error: 'editor not found' };
+
+			// Set content with a callout using markdown syntax
+			const calloutContent =
+				'This has **bold** and *italic* and [a link](https://example.com)';
+			editor.commands.setContent(`:::note[Test]\n${calloutContent}\n:::`, {
+				contentType: 'markdown',
+			});
+
+			const md1 = editor.getMarkdown();
+
+			// Round-trip: parse the output back
+			editor.commands.setContent(md1, { contentType: 'markdown' });
+			const md2 = editor.getMarkdown();
+			const json = editor.getJSON();
+
+			// Find the callout block in the JSON
+			const calloutNode = json.content?.find(
+				(n: { type: string }) => n.type === 'calloutBlock',
+			);
+
+			return {
+				md1,
+				md2,
+				roundTrip: md1 === md2,
+				calloutContent: calloutNode?.attrs?.content,
+				hasCallout: !!calloutNode,
+			};
+		});
+
+		expect(result).not.toHaveProperty('error');
+		expect(result.hasCallout).toBe(true);
+
+		// Content should preserve inline markdown
+		expect(result.calloutContent).toContain('**bold**');
+		expect(result.calloutContent).toContain('*italic*');
+		expect(result.calloutContent).toContain('[a link](https://example.com)');
+
+		// Round-trip should be stable
+		expect(result.roundTrip).toBe(true);
+	});
+
+	test('callout view mode should render formatted HTML preview', async ({
+		page,
+	}) => {
+		const pageTitle = `callout-preview-${Date.now()}`;
+		await createPageAndOpenEditor(page, pageTitle);
+
+		// Set content with a callout using markdown syntax
+		await page.evaluate(() => {
+			const ed = document.querySelector('.ProseMirror') as HTMLElement & {
+				editor?: {
+					commands: { setContent: (c: string, o?: object) => void };
+				};
+			};
+			ed?.editor?.commands.setContent(
+				':::tip\nUse **bold** for emphasis and *italic* for style\n:::',
+				{ contentType: 'markdown' },
+			);
+		});
+
+		// The callout should render in view mode (not editing) with formatted text
+		const calloutContent = page.locator(
+			'.callout-block-wrapper .callout-content-text',
+		);
+		await expect(calloutContent).toBeVisible({ timeout: 5000 });
+
+		// Check that bold and italic are rendered as HTML
+		const html = await calloutContent.innerHTML();
+		expect(html).toContain('<strong>bold</strong>');
+		expect(html).toContain('<em>italic</em>');
+	});
+
+	test('callout sub-editor should appear on double-click', async ({ page }) => {
+		const pageTitle = `callout-edit-${Date.now()}`;
+		await createPageAndOpenEditor(page, pageTitle);
+
+		// Set content with a callout using markdown syntax
+		await page.evaluate(() => {
+			const ed = document.querySelector('.ProseMirror') as HTMLElement & {
+				editor?: {
+					commands: { setContent: (c: string, o?: object) => void };
+				};
+			};
+			ed?.editor?.commands.setContent(':::note\nSome content here\n:::', {
+				contentType: 'markdown',
+			});
+		});
+
+		// Double-click the callout content area to enter edit mode
+		const calloutContent = page
+			.locator('.callout-block-wrapper .callout-content-text')
+			.first();
+		await expect(calloutContent).toBeVisible({ timeout: 5000 });
+		await calloutContent.dblclick();
+
+		// The sub-editor (a nested ProseMirror instance) and toolbar should appear
+		const subEditor = page.locator(
+			'.callout-block-wrapper .callout-sub-editor-content',
+		);
+		await expect(subEditor).toBeVisible({ timeout: 5000 });
+
+		// Toolbar buttons (B, I, Link) should be visible
+		const toolbar = page.locator(
+			'.callout-block-wrapper .flex.items-center.gap-0\\.5',
+		);
+		await expect(toolbar).toBeVisible();
+	});
+});

e2e/tests/iframe-embed.spec.ts

@@ -0,0 +1,186 @@
+import { expect, test } from '@playwright/test';
+
+/**
+ * Covers the iframe embed extension added for frappe/wiki#599.
+ *
+ * The fixture below is exactly the iframe YouTube's Share → Embed dialog
+ * produces today — full attribute set (width, height, allow, referrerpolicy,
+ * allowfullscreen). That's the realistic paste we need to support.
+ */
+const IFRAME_FIXTURE =
+	'<iframe width="560" height="315" ' +
+	'src="https://www.youtube.com/embed/QDia3e12czc?si=8or3Lz5IEeelsdcF" ' +
+	'title="YouTube video player" frameborder="0" ' +
+	'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" ' +
+	'referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>';
+
+const IFRAME_SRC =
+	'https://www.youtube.com/embed/QDia3e12czc?si=8or3Lz5IEeelsdcF';
+
+declare global {
+	interface Window {
+		wikiEditor: {
+			commands: {
+				setContent: (
+					content: string,
+					options?: { contentType?: string },
+				) => void;
+				setIframe?: (attrs: Record<string, unknown>) => boolean;
+			};
+			getMarkdown: () => string;
+			getJSON: () => {
+				type: string;
+				content: { type: string; attrs?: Record<string, unknown> }[];
+			};
+		};
+	}
+}
+
+/**
+ * Create a draft page and open the editor. Mirrors the helper in
+ * image-viewer.spec.ts — duplicated here rather than exported so changes
+ * to one test don't ripple into others.
+ */
+async function createDraftAndOpenEditor(
+	page: import('@playwright/test').Page,
+	title: string,
+) {
+	await page.goto('/wiki');
+	await page.waitForLoadState('networkidle');
+
+	const spaceLink = page.locator('a[href*="/wiki/spaces/"]').first();
+	await expect(spaceLink).toBeVisible({ timeout: 5000 });
+	await spaceLink.click();
+	await page.waitForLoadState('networkidle');
+
+	const createFirstPage = page.locator('button:has-text("Create First Page")');
+	const newPageButton = page.locator('button[title="New Page"]');
+
+	if (await createFirstPage.isVisible({ timeout: 2000 }).catch(() => false)) {
+		await createFirstPage.click();
+	} else {
+		await newPageButton.click();
+	}
+
+	await page.getByLabel('Title').fill(title);
+	await page
+		.getByRole('dialog')
+		.getByRole('button', { name: 'Save Draft' })
+		.click();
+	await page.waitForLoadState('networkidle');
+
+	await page.locator('aside').getByText(title, { exact: true }).click();
+
+	const editor = page.locator('.ProseMirror, [contenteditable="true"]');
+	await expect(editor).toBeVisible({ timeout: 10000 });
+
+	await page.waitForFunction(() => window.wikiEditor !== undefined, {
+		timeout: 10000,
+	});
+	return editor;
+}
+
+test.describe('Iframe embed extension', () => {
+	test('parses a YouTube iframe HTML block from markdown into a node', async ({
+		page,
+	}) => {
+		await createDraftAndOpenEditor(page, `iframe-parse-${Date.now()}`);
+
+		const result = await page.evaluate((html) => {
+			window.wikiEditor.commands.setContent(html, { contentType: 'markdown' });
+			const json = window.wikiEditor.getJSON();
+			const block = json.content?.find((n) => n.type === 'iframeBlock');
+			return {
+				hasBlock: !!block,
+				src: block?.attrs?.src as string | undefined,
+				allowfullscreen: block?.attrs?.allowfullscreen as boolean | undefined,
+				title: block?.attrs?.title as string | undefined,
+				width: block?.attrs?.width as string | undefined,
+				height: block?.attrs?.height as string | undefined,
+			};
+		}, IFRAME_FIXTURE);
+
+		expect(result.hasBlock).toBe(true);
+		expect(result.src).toBe(IFRAME_SRC);
+		expect(result.allowfullscreen).toBe(true);
+		expect(result.title).toBe('YouTube video player');
+		expect(result.width).toBe('560');
+		expect(result.height).toBe('315');
+	});
+
+	test('renders the iframe preview inside the editor', async ({ page }) => {
+		await createDraftAndOpenEditor(page, `iframe-preview-${Date.now()}`);
+
+		await page.evaluate((html) => {
+			window.wikiEditor.commands.setContent(html, { contentType: 'markdown' });
+		}, IFRAME_FIXTURE);
+
+		const preview = page.locator(
+			'.iframe-block-wrapper iframe[src*="youtube.com/embed"]',
+		);
+		await expect(preview).toBeVisible({ timeout: 5000 });
+		await expect(preview).toHaveAttribute('src', IFRAME_SRC);
+	});
+
+	test('round-trips iframe markdown without mutating the src', async ({
+		page,
+	}) => {
+		await createDraftAndOpenEditor(page, `iframe-roundtrip-${Date.now()}`);
+
+		const { md1, md2 } = await page.evaluate((html) => {
+			window.wikiEditor.commands.setContent(html, { contentType: 'markdown' });
+			const md1 = window.wikiEditor.getMarkdown();
+			// Second pass: re-parse the serialized markdown and re-serialize.
+			// This is the cycle that used to compound-escape before the extension.
+			window.wikiEditor.commands.setContent(md1, { contentType: 'markdown' });
+			const md2 = window.wikiEditor.getMarkdown();
+			return { md1, md2 };
+		}, IFRAME_FIXTURE);
+
+		// Both passes preserve the raw src — no &lt;, no &amp;lt; leaking in.
+		expect(md1).toContain(`src="${IFRAME_SRC}"`);
+		expect(md1).not.toMatch(/&lt;iframe|&amp;lt;/);
+		expect(md2).toContain(`src="${IFRAME_SRC}"`);
+		expect(md2).not.toMatch(/&lt;iframe|&amp;lt;/);
+
+		// Serialization must be idempotent — a second round-trip shouldn't drift.
+		expect(md2).toBe(md1);
+	});
+
+	test('accepts the full iframe tag in the /embed URL input', async ({
+		page,
+	}) => {
+		await createDraftAndOpenEditor(page, `iframe-slash-${Date.now()}`);
+
+		// Insert an empty placeholder via the extension command (skips the
+		// slash-menu fuzzy-find noise and tests the URL input directly).
+		await page.evaluate(() => {
+			const editor = window.wikiEditor as unknown as {
+				commands: { insertIframePlaceholder: () => boolean };
+			};
+			editor.commands.insertIframePlaceholder();
+		});
+
+		const placeholderInput = page
+			.locator('.iframe-block-wrapper')
+			.getByPlaceholder('https://');
+		await expect(placeholderInput).toBeVisible({ timeout: 5000 });
+
+		await placeholderInput.fill(IFRAME_FIXTURE);
+		await page
+			.locator('.iframe-block-wrapper')
+			.getByRole('button', { name: 'Embed' })
+			.click();
+
+		const preview = page.locator(
+			'.iframe-block-wrapper iframe[src*="youtube.com/embed"]',
+		);
+		await expect(preview).toBeVisible({ timeout: 5000 });
+		await expect(preview).toHaveAttribute('src', IFRAME_SRC);
+
+		// Saved markdown reflects the attrs pulled from the pasted iframe HTML.
+		const md = await page.evaluate(() => window.wikiEditor.getMarkdown());
+		expect(md).toContain(`src="${IFRAME_SRC}"`);
+		expect(md).toContain('title="YouTube video player"');
+	});
+});