@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/lib/utils/export/copyAs.ts

@@ -0,0 +1,139 @@
+import { Editor, TLShapeId, TLSvgOptions } from '@bigbluebutton/editor'
+import { getSvgAsImage } from './export'
+
+/** @public */
+export type TLCopyType = 'svg' | 'png' | 'jpeg' | 'json'
+
+/**
+ * Copy the given shapes to the clipboard.
+ *
+ * @param editor - The editor instance.
+ * @param ids - The ids of the shapes to copy.
+ * @param format - The format to copy as.
+ * @param opts - Options for the copy.
+ *
+ * @public
+ */
+export function copyAs(
+	editor: Editor,
+	ids: TLShapeId[],
+	format: TLCopyType = 'svg',
+	opts = {} as Partial<TLSvgOptions>
+) {
+	// Note:  it's important that this function itself isn't async - we need to create the relevant
+	// `ClipboardItem`s synchronously to make sure safari knows that the user _wants_ to copy
+	// See https://bugs.webkit.org/show_bug.cgi?id=222262
+
+	return editor
+		.getSvg(ids?.length ? ids : [...editor.getCurrentPageShapeIds()], {
+			scale: 1,
+			background: editor.getInstanceState().exportBackground,
+			...opts,
+		})
+		.then((svg) => {
+			if (!svg) {
+				throw new Error('Could not construct SVG.')
+			}
+
+			switch (format) {
+				case 'svg': {
+					if (window.navigator.clipboard) {
+						if (window.navigator.clipboard.write) {
+							window.navigator.clipboard.write([
+								new ClipboardItem({
+									'text/plain': new Blob([getSvgAsString(svg)], { type: 'text/plain' }),
+								}),
+							])
+						} else {
+							fallbackWriteTextAsync(async () => getSvgAsString(svg))
+						}
+					}
+					break
+				}
+
+				case 'jpeg':
+				case 'png': {
+					// Note: This needs to use the promise based approach for safari/ios to not bail on a permissions error.
+					const blobPromise = getSvgAsImage(svg, editor.environment.isSafari, {
+						type: format,
+						quality: 1,
+						scale: 2,
+					}).then((blob) => {
+						if (blob) {
+							if (window.navigator.clipboard) {
+								return blob
+							}
+							throw new Error('Copy not supported')
+						} else {
+							throw new Error('Copy not possible')
+						}
+					})
+
+					const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png'
+					if (window.navigator.clipboard.write) {
+						window.navigator.clipboard
+							.write([
+								new ClipboardItem({
+									[mimeType]: blobPromise,
+								}),
+							])
+							.catch((err: any) => {
+								// Firefox will fail with the above if `dom.events.asyncClipboard.clipboardItem` is enabled.
+								// See <https://github.com/tldraw/tldraw/issues/1325>
+								if (!err.toString().match(/^TypeError: DOMString not supported/)) {
+									console.error(err)
+								}
+
+								blobPromise.then((blob) => {
+									window.navigator.clipboard.write([
+										new ClipboardItem({
+											// Note: This needs to use the promise based approach for safari/ios to not bail on a permissions error.
+											[mimeType]: blob,
+										}),
+									])
+								})
+							})
+					}
+
+					break
+				}
+
+				case 'json': {
+					const data = editor.getContentFromCurrentPage(ids)
+					const jsonStr = JSON.stringify(data)
+
+					if (window.navigator.clipboard.write) {
+						window.navigator.clipboard.write([
+							new ClipboardItem({
+								'text/plain': new Blob([jsonStr], { type: 'text/plain' }),
+							}),
+						])
+					} else {
+						fallbackWriteTextAsync(async () => jsonStr)
+					}
+					break
+				}
+
+				default:
+					throw new Error(`Copy type ${format} not supported.`)
+			}
+		})
+}
+
+async function fallbackWriteTextAsync(getText: () => Promise<string>) {
+	navigator.clipboard?.writeText?.(await getText())
+}
+
+function getSvgAsString(svg: SVGElement) {
+	const clone = svg.cloneNode(true) as SVGGraphicsElement
+
+	svg.setAttribute('width', +svg.getAttribute('width')! + '')
+	svg.setAttribute('height', +svg.getAttribute('height')! + '')
+
+	const out = new XMLSerializer()
+		.serializeToString(clone)
+		.replaceAll('&#10;      ', '')
+		.replaceAll(/((\s|")[0-9]*\.[0-9]{2})([0-9]*)(\b|"|\))/g, '$1')
+
+	return out
+}

package/src/lib/utils/export/export.ts

@@ -0,0 +1,128 @@
+import { PngHelpers, debugFlags } from '@bigbluebutton/editor'
+import { getBrowserCanvasMaxSize } from '../../shapes/shared/getBrowserCanvasMaxSize'
+
+/** @public */
+export async function getSvgAsImage(
+	svg: SVGElement,
+	isSafari: boolean,
+	options: {
+		type: 'svg' | 'png' | 'jpeg' | 'webp'
+		quality: number
+		scale: number
+	}
+) {
+	const { type, quality, scale } = options
+
+	const width = +svg.getAttribute('width')!
+	const height = +svg.getAttribute('height')!
+	let scaledWidth = width * scale
+	let scaledHeight = height * scale
+
+	const dataUrl = await getSvgAsDataUrl(svg)
+
+	const canvasSizes = await getBrowserCanvasMaxSize()
+	if (width > canvasSizes.maxWidth) {
+		scaledWidth = canvasSizes.maxWidth
+		scaledHeight = (scaledWidth / width) * height
+	}
+	if (height > canvasSizes.maxHeight) {
+		scaledHeight = canvasSizes.maxHeight
+		scaledWidth = (scaledHeight / height) * width
+	}
+	if (scaledWidth * scaledHeight > canvasSizes.maxArea) {
+		const ratio = Math.sqrt(canvasSizes.maxArea / (scaledWidth * scaledHeight))
+		scaledWidth *= ratio
+		scaledHeight *= ratio
+	}
+
+	scaledWidth = Math.floor(scaledWidth)
+	scaledHeight = Math.floor(scaledHeight)
+	const effectiveScale = scaledWidth / width
+
+	const canvas = await new Promise<HTMLCanvasElement | null>((resolve) => {
+		const image = new Image()
+		image.crossOrigin = 'anonymous'
+
+		image.onload = async () => {
+			// safari will fire `onLoad` before the fonts in the SVG are
+			// actually loaded. just waiting around a while is brittle, but
+			// there doesn't seem to be any better solution for now :( see
+			// https://bugs.webkit.org/show_bug.cgi?id=219770
+			if (isSafari) {
+				await new Promise((resolve) => setTimeout(resolve, 250))
+			}
+
+			const canvas = document.createElement('canvas') as HTMLCanvasElement
+			const ctx = canvas.getContext('2d')!
+
+			canvas.width = scaledWidth
+			canvas.height = scaledHeight
+
+			ctx.imageSmoothingEnabled = true
+			ctx.imageSmoothingQuality = 'high'
+			ctx.drawImage(image, 0, 0, scaledWidth, scaledHeight)
+
+			URL.revokeObjectURL(dataUrl)
+
+			resolve(canvas)
+		}
+
+		image.onerror = () => {
+			resolve(null)
+		}
+
+		image.src = dataUrl
+	})
+
+	if (!canvas) return null
+
+	const blob = await new Promise<Blob | null>((resolve) =>
+		canvas.toBlob(
+			(blob) => {
+				if (!blob || debugFlags.throwToBlob.get()) {
+					resolve(null)
+				}
+				resolve(blob)
+			},
+			'image/' + type,
+			quality
+		)
+	)
+
+	if (!blob) return null
+
+	const view = new DataView(await blob.arrayBuffer())
+	return PngHelpers.setPhysChunk(view, effectiveScale, {
+		type: 'image/' + type,
+	})
+}
+
+/** @public */
+export async function getSvgAsDataUrl(svg: SVGElement) {
+	const clone = svg.cloneNode(true) as SVGGraphicsElement
+	clone.setAttribute('encoding', 'UTF-8"')
+
+	const fileReader = new FileReader()
+	const imgs = Array.from(clone.querySelectorAll('image')) as SVGImageElement[]
+
+	for (const img of imgs) {
+		const src = img.getAttribute('xlink:href')
+		if (src) {
+			if (!src.startsWith('data:')) {
+				const blob = await (await fetch(src)).blob()
+				const base64 = await new Promise<string>((resolve, reject) => {
+					fileReader.onload = () => resolve(fileReader.result as string)
+					fileReader.onerror = () => reject(fileReader.error)
+					fileReader.readAsDataURL(blob)
+				})
+				img.setAttribute('xlink:href', base64)
+			}
+		}
+	}
+
+	const svgStr = new XMLSerializer().serializeToString(clone)
+	// NOTE: `unescape` works everywhere although deprecated
+	// eslint-disable-next-line deprecation/deprecation
+	const base64SVG = window.btoa(unescape(encodeURIComponent(svgStr)))
+	return `data:image/svg+xml;base64,${base64SVG}`
+}

package/src/lib/utils/export/exportAs.ts

@@ -0,0 +1,94 @@
+import { Editor, TLFrameShape, TLShapeId, TLSvgOptions } from '@bigbluebutton/editor'
+import { getSvgAsDataUrl, getSvgAsImage } from './export'
+
+/** @public */
+export type TLExportType = 'svg' | 'png' | 'jpeg' | 'webp' | 'json'
+
+/**
+ * Export the given shapes as files.
+ *
+ * @param editor - The editor instance.
+ * @param ids - The ids of the shapes to export.
+ * @param format - The format to export as.
+ * @param opts - Options for the export.
+ *
+ * @public
+ */
+export function exportAs(
+	editor: Editor,
+	ids: TLShapeId[],
+	format: TLExportType = 'png',
+	opts = {} as Partial<TLSvgOptions>
+) {
+	return editor
+		.getSvg(ids?.length ? ids : [...editor.getCurrentPageShapeIds()], opts)
+		.then((svg) => {
+			if (!svg) {
+				throw new Error('Could not construct SVG.')
+			}
+
+			let name = 'shapes' + getTimestamp()
+
+			if (ids.length === 1) {
+				const first = editor.getShape(ids[0])!
+				if (editor.isShapeOfType<TLFrameShape>(first, 'frame')) {
+					name = first.props.name ?? 'frame'
+				} else {
+					name = first.id.replace(/:/, '_')
+				}
+			}
+
+			switch (format) {
+				case 'svg': {
+					getSvgAsDataUrl(svg).then((dataURL) => downloadDataURLAsFile(dataURL, `${name}.svg`))
+					return
+				}
+				case 'webp':
+				case 'png': {
+					getSvgAsImage(svg, editor.environment.isSafari, {
+						type: format,
+						quality: 1,
+						scale: 2,
+					}).then((image) => {
+						if (!image) throw Error()
+						const dataURL = URL.createObjectURL(image)
+						downloadDataURLAsFile(dataURL, `${name}.${format}`)
+						URL.revokeObjectURL(dataURL)
+					})
+					return
+				}
+
+				case 'json': {
+					const data = editor.getContentFromCurrentPage(ids)
+					const blob = new Blob([JSON.stringify(data, null, 4)], { type: 'application/json' })
+					const dataURL = URL.createObjectURL(blob)
+					downloadDataURLAsFile(dataURL, `${name || 'shapes'}.json`)
+					URL.revokeObjectURL(dataURL)
+					return
+				}
+
+				default:
+					throw new Error(`Export type ${format} not supported.`)
+			}
+		})
+}
+
+function getTimestamp() {
+	const now = new Date()
+
+	const year = String(now.getFullYear()).slice(2)
+	const month = String(now.getMonth() + 1).padStart(2, '0')
+	const day = String(now.getDate()).padStart(2, '0')
+	const hours = String(now.getHours()).padStart(2, '0')
+	const minutes = String(now.getMinutes()).padStart(2, '0')
+	const seconds = String(now.getSeconds()).padStart(2, '0')
+
+	return ` at ${year}-${month}-${day} ${hours}.${minutes}.${seconds}`
+}
+
+function downloadDataURLAsFile(dataUrl: string, filename: string) {
+	const link = document.createElement('a')
+	link.href = dataUrl
+	link.download = filename
+	link.click()
+}

package/src/lib/utils/frames/frames.ts

@@ -0,0 +1,101 @@
+import {
+	Box2d,
+	Editor,
+	TLFrameShape,
+	TLShapeId,
+	TLShapePartial,
+	Vec2d,
+	compact,
+} from '@bigbluebutton/editor'
+
+/**
+ * Remove a frame.
+ *
+ * @param editor - tlraw editor instance.
+ * @param ids - Ids of the frames you wish to remove.
+ *
+ * @public
+ */
+export function removeFrame(editor: Editor, ids: TLShapeId[]) {
+	const frames = compact(
+		ids
+			.map((id) => editor.getShape<TLFrameShape>(id))
+			.filter((f) => f && editor.isShapeOfType<TLFrameShape>(f, 'frame'))
+	)
+	if (!frames.length) return
+
+	const allChildren: TLShapeId[] = []
+	editor.batch(() => {
+		frames.map((frame) => {
+			const children = editor.getSortedChildIdsForParent(frame.id)
+			if (children.length) {
+				editor.reparentShapes(children, frame.parentId, frame.index)
+				allChildren.push(...children)
+			}
+		})
+		editor.setSelectedShapes(allChildren)
+		editor.deleteShapes(ids)
+	})
+}
+
+/** @internal */
+export const DEFAULT_FRAME_PADDING = 50
+
+/**
+ * Fit a frame to its content.
+ *
+ * @param id - Id of the frame you wish to fit to content.
+ * @param editor - tlraw editor instance.
+ * @param opts - Options for fitting the frame.
+ *
+ * @public
+ */
+export function fitFrameToContent(editor: Editor, id: TLShapeId, opts = {} as { padding: number }) {
+	const frame = editor.getShape<TLFrameShape>(id)
+	if (!frame) return
+
+	const childIds = editor.getSortedChildIdsForParent(frame.id)
+	const children = compact(childIds.map((id) => editor.getShape(id)))
+	if (!children.length) return
+
+	const bounds = Box2d.FromPoints(
+		children.flatMap((shape) => {
+			const geometry = editor.getShapeGeometry(shape.id)
+			return editor.getShapeLocalTransform(shape)!.applyToPoints(geometry.vertices)
+		})
+	)
+
+	const { padding = DEFAULT_FRAME_PADDING } = opts
+	const w = bounds.w + 2 * padding
+	const h = bounds.h + 2 * padding
+	const dx = padding - bounds.minX
+	const dy = padding - bounds.minY
+	// The shapes already perfectly fit the frame.
+	if (dx === 0 && dy === 0 && frame.props.w === w && frame.props.h === h) return
+
+	const diff = new Vec2d(dx, dy).rot(frame.rotation)
+	editor.batch(() => {
+		const changes: TLShapePartial[] = childIds.map((child) => {
+			const shape = editor.getShape(child)!
+			return {
+				id: shape.id,
+				type: shape.type,
+				x: shape.x + dx,
+				y: shape.y + dy,
+			}
+		})
+
+		changes.push({
+			id: frame.id,
+			type: frame.type,
+			x: frame.x - diff.x,
+			y: frame.y - diff.y,
+			props: {
+				w,
+				h,
+			},
+		})
+
+		editor.updateShapes(changes)
+	})
+}

package/src/lib/utils/static-assets/assetUrls.ts

@@ -0,0 +1,41 @@
+import { RecursivePartial } from '@bigbluebutton/editor'
+import { useMemo } from 'react'
+import { version } from '../../ui/version'
+
+/** @public */
+export type TLEditorAssetUrls = {
+	fonts: {
+		monospace: string
+		serif: string
+		sansSerif: string
+		draw: string
+	}
+}
+
+/** @public */
+export let defaultEditorAssetUrls: TLEditorAssetUrls = {
+	fonts: {
+		draw: `https://unpkg.com/@bigbluebutton/assets@${version}/fonts/Shantell_Sans-Normal-SemiBold.woff2`,
+		serif: `https://unpkg.com/@bigbluebutton/assets@${version}/fonts/IBMPlexSerif-Medium.woff2`,
+		sansSerif: `https://unpkg.com/@bigbluebutton/assets@${version}/fonts/IBMPlexSans-Medium.woff2`,
+		monospace: `https://unpkg.com/@bigbluebutton/assets@${version}/fonts/IBMPlexMono-Medium.woff2`,
+	},
+}
+
+/** @public */
+export function setDefaultEditorAssetUrls(assetUrls: TLEditorAssetUrls) {
+	defaultEditorAssetUrls = assetUrls
+}
+
+/** @internal */
+export function useDefaultEditorAssetsWithOverrides(
+	overrides?: RecursivePartial<TLEditorAssetUrls>
+): TLEditorAssetUrls {
+	return useMemo(() => {
+		if (!overrides) return defaultEditorAssetUrls
+
+		return {
+			fonts: { ...defaultEditorAssetUrls.fonts, ...overrides?.fonts },
+		}
+	}, [overrides])
+}

package/src/lib/utils/text/text.test.ts

@@ -0,0 +1,11 @@
+import { cleanupText } from '../text/text'
+
+describe(cleanupText, () => {
+	it('can handle the empty string', () => {
+		expect(cleanupText('')).toBe('')
+	})
+	it('can handle space-only strings', () => {
+		expect(cleanupText(' ')).toBe('')
+		expect(cleanupText('   ')).toBe('')
+	})
+})

package/src/lib/utils/text/text.ts

@@ -0,0 +1,59 @@
+import { INDENT } from '../../shapes/shared/TextHelpers'
+
+const rtlRegex = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/
+export function isRightToLeftLanguage(text: string) {
+	return rtlRegex.test(text)
+}
+
+/**
+ * Replace any tabs with double spaces.
+ * @param text - The text to replace tabs in.
+ * @internal
+ */
+function replaceTabsWithSpaces(text: string) {
+	return text.replace(/\t/g, INDENT)
+}
+
+/**
+ * Strip common minimum indentation from each line.
+ * @param text - The text to strip.
+ * @internal
+ */
+function stripCommonMinimumIndentation(text: string): string {
+	// Split the text into individual lines
+	const lines = text.split('\n')
+
+	// remove any leading lines that are only whitespace or newlines
+	while (lines[0] && lines[0].trim().length === 0) {
+		lines.shift()
+	}
+
+	let minIndentation = Infinity
+	for (const line of lines) {
+		if (line.trim().length > 0) {
+			const indentation = line.length - line.trimStart().length
+			minIndentation = Math.min(minIndentation, indentation)
+		}
+	}
+
+	return lines.map((line) => line.slice(minIndentation)).join('\n')
+}
+
+/**
+ * Strip trailing whitespace from each line and remove any trailing newlines.
+ * @param text - The text to strip.
+ * @internal
+ */
+function stripTrailingWhitespace(text: string): string {
+	return text.replace(/[ \t]+$/gm, '').replace(/\n+$/, '')
+}
+
+/** @internal */
+export function cleanupText(text: string) {
+	return stripTrailingWhitespace(stripCommonMinimumIndentation(replaceTabsWithSpaces(text)))
+}
+
+/** @public */
+export const truncateStringWithEllipsis = (str: string, maxLength: number) => {
+	return str.length <= maxLength ? str : str.substring(0, maxLength - 3) + '...'
+}