feat: use plaintext for mermaid parsing when clipboard has html+text (tldraw#8344)

Fixes an issue where mermaid code from VS Code, textedit, and live
mermaid editor (among others) wasn't rendering as shapes because the
stripped HTML removed the linebreaks so it was parsing as invalid
mermaid.

This has been kept inside the mermaid handler to make sure it shouldn't
impact any other copy/paste functionality, but still worth testing
pasting of:
1) Pasting in formatted text (eg from google docs)
2) Copying non-mermaid code from VS Code
3) Copying in a webpage link and making sure that turns into an embed

I've tested all of those cases locally and they work fine

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: angrycaptain19

apps/dotcom/client/src/components/SneakyMermaidHandler/SneakyMermaidHandler.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { defaultHandleExternalTextContent, useEditor, useToasts } from 'tldraw'
 import { defineMessages, useMsg } from '../../tla/utils/i18n'
-import { simpleMermaidStringTest } from './simpleMermaidStringTest'
+import { simpleMermaidStringTest, stripMarkdownMermaidFence } from './simpleMermaidStringTest'
 
 const messages = defineMessages({
 	unsupportedTitle: { defaultMessage: 'Unsupported Mermaid diagram' },
@@ -16,10 +16,22 @@ export function SneakyMermaidHandler() {
 
 	useEffect(() => {
 		editor.registerExternalContentHandler('text', async (content) => {
-			if (!simpleMermaidStringTest(content.text)) {
+			// when pasting html, the derived text is stripped and loses line breaks
+			// which make evaluating mermaid diagrams impossible. We look into the
+			// sources and see if there's some plain text alongside the html and if
+			// there are, we can use this to evaluate mermaid diagrams.
+
+			const plainTextSource = content.sources?.find(
+				(s) => s.type === 'text' && s.subtype === 'text'
+			)
+			const plainText = plainTextSource?.data ?? content.text
+			const textToTest = simpleMermaidStringTest(plainText) ? plainText : content.text
+
+			if (!simpleMermaidStringTest(textToTest)) {
 				await defaultHandleExternalTextContent(editor, content)
 				return
 			}
+			const mermaidText = stripMarkdownMermaidFence(textToTest)
 			const { createMermaidDiagram } = await import('@tldraw/mermaid')
 			const shapesBefore = new Set(editor.getCurrentPageShapeIds())
 
@@ -48,7 +60,7 @@ export function SneakyMermaidHandler() {
 					})
 				}
 
-				await createMermaidDiagram(editor, content.text, { onUnsupportedDiagram })
+				await createMermaidDiagram(editor, mermaidText, { onUnsupportedDiagram })
 				selectNewShapes()
 			} catch (e) {
 				console.error(e)

apps/dotcom/client/src/components/SneakyMermaidHandler/simpleMermaidStringTest.test.ts

@@ -1,4 +1,4 @@
-import { simpleMermaidStringTest } from './simpleMermaidStringTest'
+import { simpleMermaidStringTest, stripMarkdownMermaidFence } from './simpleMermaidStringTest'
 
 describe('simpleMermaidStringTest', () => {
 	describe('bare keywords', () => {
@@ -75,6 +75,28 @@ describe('simpleMermaidStringTest', () => {
 		})
 	})
 
+	describe('markdown code fences', () => {
+		it('detects mermaid inside ```mermaid fence', () => {
+			const text = '```mermaid\nflowchart TD\n  A --> B\n```'
+			expect(simpleMermaidStringTest(text)).toBe(true)
+		})
+
+		it('detects mermaid inside fence with extra backticks', () => {
+			const text = '````mermaid\nsequenceDiagram\n  Alice->>Bob: Hi\n````'
+			expect(simpleMermaidStringTest(text)).toBe(true)
+		})
+
+		it('detects mermaid inside fence with leading whitespace', () => {
+			const text = '  ```mermaid\ngantt\n  title Plan\n  ```'
+			expect(simpleMermaidStringTest(text)).toBe(true)
+		})
+
+		it('strips fence and preserves inner boilerplate', () => {
+			const text = '```mermaid\n%%{init: {"theme":"dark"}}%%\nflowchart LR\n  A --> B\n```'
+			expect(simpleMermaidStringTest(text)).toBe(true)
+		})
+	})
+
 	describe('negative cases', () => {
 		it('rejects plain English text', () => {
 			expect(simpleMermaidStringTest('Hello world')).toBe(false)
@@ -101,9 +123,31 @@ describe('simpleMermaidStringTest', () => {
 			expect(simpleMermaidStringTest('<div class="flowchart">content</div>')).toBe(false)
 		})
 
-		it('rejects a markdown code block wrapping mermaid', () => {
-			const text = '```mermaid\nflowchart TD\n  A --> B\n```'
+		it('rejects a non-mermaid markdown code block', () => {
+			const text = '```javascript\nconst x = 1\n```'
 			expect(simpleMermaidStringTest(text)).toBe(false)
 		})
 	})
 })
+
+describe('stripMarkdownMermaidFence', () => {
+	it('extracts content from a mermaid fence', () => {
+		const text = '```mermaid\nflowchart TD\n  A --> B\n```'
+		expect(stripMarkdownMermaidFence(text)).toBe('flowchart TD\n  A --> B')
+	})
+
+	it('returns non-fenced text unchanged', () => {
+		const text = 'flowchart TD\n  A --> B'
+		expect(stripMarkdownMermaidFence(text)).toBe(text)
+	})
+
+	it('returns non-mermaid fenced text unchanged', () => {
+		const text = '```javascript\nconst x = 1\n```'
+		expect(stripMarkdownMermaidFence(text)).toBe(text)
+	})
+
+	it('handles extra backticks', () => {
+		const text = '````mermaid\ngantt\n  title Plan\n````'
+		expect(stripMarkdownMermaidFence(text)).toBe('gantt\n  title Plan')
+	})
+})

apps/dotcom/client/src/components/SneakyMermaidHandler/simpleMermaidStringTest.ts

@@ -15,6 +15,11 @@ const FRONTMATTER_REGEX = /^-{3}\s*[\n\r]([\s\S]*?)[\n\r]-{3}\s*[\n\r]+/
 const DIAGRAM_KEYWORD_REGEX =
 	/^\s*(flowchart|graph|sequenceDiagram|classDiagram|stateDiagram|erDiagram|journey|gantt|pie|gitGraph|mindmap|timeline|sankey|xychart|block|quadrantChart|requirement|C4Context|C4Container|C4Component|C4Dynamic|C4Deployment|packet|kanban|architecture|treemap|radar|info)/
 
+/**
+ * Captures the inner content of a mermaid code blog marked by ```mermaid
+ */
+const MARKDOWN_MERMAID_FENCE_REGEX = /^\s*```+\s*mermaid\s*\n([\s\S]*?)\n\s*```+\s*$/
+
 /**
  * Strip mermaid boilerplate (frontmatter, directives, comments) so only the
  * diagram body remains. The two global regexes are created as fresh literals
@@ -27,6 +32,11 @@ function stripMermaidBoilerplate(text: string): string {
 		.replace(/\s*%%.*\n/gm, '\n')
 }
 
+export function stripMarkdownMermaidFence(text: string): string {
+	const match = text.match(MARKDOWN_MERMAID_FENCE_REGEX)
+	return match ? match[1] : text
+}
+
 export function simpleMermaidStringTest(text: string): boolean {
-	return DIAGRAM_KEYWORD_REGEX.test(stripMermaidBoilerplate(text))
+	return DIAGRAM_KEYWORD_REGEX.test(stripMermaidBoilerplate(stripMarkdownMermaidFence(text)))
 }