[pull] main from tldraw:main

apps/docs/app/(docs)/[...slug]/page.tsx

@@ -15,6 +15,13 @@ import { cn } from '@/utils/cn'
 import { db } from '@/utils/ContentDatabase'
 import { parseMarkdown } from '@/utils/parse-markdown'
 
+export async function generateStaticParams() {
+	const paths = await db.getAllPaths()
+	return paths.map((path) => ({ slug: path.replace(/^\//, '').split('/') }))
+}
+
+export const dynamicParams = false
+
 export async function generateMetadata(props: {
 	params: Promise<{ slug: string | string[] }>
 }): Promise<Metadata> {
@@ -32,7 +39,6 @@ export async function generateMetadata(props: {
 	}
 	return metadata
 }
-export const dynamicParams = true
 
 export default async function Page(props: { params: Promise<{ slug: string | string[] }> }) {
 	const params = await props.params

apps/examples/e2e/tests/test-paste-text-measurement.spec.ts

@@ -0,0 +1,57 @@
+import test, { expect, Page } from '@playwright/test'
+import { Editor, TLTextShape } from 'tldraw'
+import { setup } from '../shared-e2e'
+
+declare const editor: Editor
+
+test.describe('paste text measurement', () => {
+	test.beforeEach(setup)
+
+	async function pasteTextAndGetShape(page: Page, text: string, html?: string) {
+		return await page.evaluate(
+			async ({ text, html }) => {
+				await editor.putExternalContent({
+					type: 'text',
+					text,
+					html,
+					point: editor.getViewportPageBounds().center,
+				})
+				const shapes = editor
+					.getCurrentPageShapes()
+					.filter((s): s is TLTextShape => s.type === 'text')
+				const shape = shapes[shapes.length - 1]
+
+				return {
+					x: shape.x,
+					y: shape.y,
+					w: shape.props.w,
+				}
+			},
+			{ text, html }
+		)
+	}
+
+	test('pasting the same text as plain text or html produces the same shape', async ({ page }) => {
+		const plainText = await pasteTextAndGetShape(page, 'Hello world')
+
+		const withInlineStyles = await pasteTextAndGetShape(
+			page,
+			'Hello world',
+			`<p class="p1" style="margin: 0px; font: 400 12px Helvetica; color: rgb(0, 0, 0);">Hello world</p>`
+		)
+
+		const withProsemirrorMeta = await pasteTextAndGetShape(
+			page,
+			'Hello world',
+			`<meta charset="utf-8"><p dir="auto" data-pm-slice="0 0 []">Hello world</p>`
+		)
+
+		expect(plainText.x).toBe(withInlineStyles.x)
+		expect(plainText.y).toBe(withInlineStyles.y)
+		expect(plainText.w).toBe(withInlineStyles.w)
+
+		expect(plainText.x).toBe(withProsemirrorMeta.x)
+		expect(plainText.y).toBe(withProsemirrorMeta.y)
+		expect(plainText.w).toBe(withProsemirrorMeta.w)
+	})
+})

packages/tldraw/src/lib/defaultExternalContentHandlers.ts

@@ -38,7 +38,7 @@ import { TLUiToastsContextType } from './ui/context/toasts'
 import { useTranslation } from './ui/hooks/useTranslation/useTranslation'
 import { containBoxSize } from './utils/assets/assets'
 import { putExcalidrawContent } from './utils/excalidraw/putExcalidrawContent'
-import { renderRichTextFromHTML } from './utils/text/richText'
+import { renderHtmlFromRichTextForMeasurement, renderRichTextFromHTML } from './utils/text/richText'
 import { cleanupText, isRightToLeftLanguage } from './utils/text/text'
 
 /**
@@ -499,10 +499,8 @@ export async function defaultHandleExternalTextContent(
 	let autoSize: boolean
 	let align = 'middle' as TLTextShapeProps['textAlign']
 
-	const htmlToMeasure = html ?? cleanedUpPlaintext.replace(/\n/g, '<br>')
-	const isMultiLine = html
-		? richTextToPaste.content.length > 1
-		: cleanedUpPlaintext.split('\n').length > 1
+	const htmlToMeasure = renderHtmlFromRichTextForMeasurement(editor, richTextToPaste)
+	const isMultiLine = richTextToPaste.content.length > 1
 
 	// check whether the text contains the most common characters in RTL languages
 	const isRtl = isRightToLeftLanguage(cleanedUpPlaintext)