@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/index.ts

@@ -0,0 +1,174 @@
+/// <reference types="react" />
+
+// eslint-disable-next-line local/no-export-star
+export * from '@bigbluebutton/editor'
+export { Tldraw, type TldrawProps } from './lib/Tldraw'
+export { TldrawCropHandles, type TldrawCropHandlesProps } from './lib/canvas/TldrawCropHandles'
+export { TldrawHandles } from './lib/canvas/TldrawHandles'
+export { TldrawHoveredShapeIndicator } from './lib/canvas/TldrawHoveredShapeIndicator'
+export { TldrawScribble } from './lib/canvas/TldrawScribble'
+export { TldrawSelectionBackground } from './lib/canvas/TldrawSelectionBackground'
+export { TldrawSelectionForeground } from './lib/canvas/TldrawSelectionForeground'
+export { defaultShapeTools } from './lib/defaultShapeTools'
+export { defaultShapeUtils } from './lib/defaultShapeUtils'
+export { defaultTools } from './lib/defaultTools'
+export { ArrowShapeTool } from './lib/shapes/arrow/ArrowShapeTool'
+export { ArrowShapeUtil } from './lib/shapes/arrow/ArrowShapeUtil'
+export { BookmarkShapeUtil } from './lib/shapes/bookmark/BookmarkShapeUtil'
+export { DrawShapeTool } from './lib/shapes/draw/DrawShapeTool'
+export { DrawShapeUtil } from './lib/shapes/draw/DrawShapeUtil'
+export { EmbedShapeUtil } from './lib/shapes/embed/EmbedShapeUtil'
+export { FrameShapeTool } from './lib/shapes/frame/FrameShapeTool'
+export { FrameShapeUtil } from './lib/shapes/frame/FrameShapeUtil'
+export { GeoShapeTool } from './lib/shapes/geo/GeoShapeTool'
+export { GeoShapeUtil } from './lib/shapes/geo/GeoShapeUtil'
+export { HighlightShapeTool } from './lib/shapes/highlight/HighlightShapeTool'
+export { HighlightShapeUtil } from './lib/shapes/highlight/HighlightShapeUtil'
+export { ImageShapeUtil } from './lib/shapes/image/ImageShapeUtil'
+export { LineShapeTool } from './lib/shapes/line/LineShapeTool'
+export { LineShapeUtil } from './lib/shapes/line/LineShapeUtil'
+export { NoteShapeTool } from './lib/shapes/note/NoteShapeTool'
+export { NoteShapeUtil } from './lib/shapes/note/NoteShapeUtil'
+export { TextShapeTool } from './lib/shapes/text/TextShapeTool'
+export { TextShapeUtil } from './lib/shapes/text/TextShapeUtil'
+export { VideoShapeUtil } from './lib/shapes/video/VideoShapeUtil'
+export { EraserTool } from './lib/tools/EraserTool/EraserTool'
+export { HandTool } from './lib/tools/HandTool/HandTool'
+export { LaserTool } from './lib/tools/LaserTool/LaserTool'
+export { SelectTool } from './lib/tools/SelectTool/SelectTool'
+export { ZoomTool } from './lib/tools/ZoomTool/ZoomTool'
+// UI
+export { TldrawUi, type TldrawUiBaseProps, type TldrawUiProps } from './lib/ui/TldrawUi'
+export {
+	TldrawUiContextProvider,
+	type TldrawUiContextProviderProps,
+} from './lib/ui/TldrawUiContextProvider'
+export { setDefaultUiAssetUrls, type TLUiAssetUrlOverrides } from './lib/ui/assetUrls'
+export { ContextMenu, type TLUiContextMenuProps } from './lib/ui/components/ContextMenu'
+export { OfflineIndicator } from './lib/ui/components/OfflineIndicator/OfflineIndicator'
+export { Spinner } from './lib/ui/components/Spinner'
+export { Button, type TLUiButtonProps } from './lib/ui/components/primitives/Button'
+export { Icon, type TLUiIconProps } from './lib/ui/components/primitives/Icon'
+export { Input, type TLUiInputProps } from './lib/ui/components/primitives/Input'
+export {
+	compactMenuItems,
+	findMenuItem,
+	menuCustom,
+	menuGroup,
+	menuItem,
+	menuSubmenu,
+	type TLUiCustomMenuItem,
+	type TLUiMenuChild,
+	type TLUiMenuGroup,
+	type TLUiMenuItem,
+	type TLUiMenuSchema,
+	type TLUiSubMenu,
+} from './lib/ui/hooks/menuHelpers'
+export {
+	useActions,
+	type TLUiActionItem,
+	type TLUiActionsContextType,
+} from './lib/ui/hooks/useActions'
+export {
+	useActionsMenuSchema,
+	type TLUiActionsMenuSchemaContextType,
+} from './lib/ui/hooks/useActionsMenuSchema'
+export { AssetUrlsProvider, useAssetUrls } from './lib/ui/hooks/useAssetUrls'
+export { BreakPointProvider, useBreakpoint } from './lib/ui/hooks/useBreakpoint'
+export { useCanRedo } from './lib/ui/hooks/useCanRedo'
+export { useCanUndo } from './lib/ui/hooks/useCanUndo'
+export { useMenuClipboardEvents, useNativeClipboardEvents } from './lib/ui/hooks/useClipboardEvents'
+export {
+	useContextMenuSchema,
+	type TLUiContextTTLUiMenuSchemaContextType,
+} from './lib/ui/hooks/useContextMenuSchema'
+export { useCopyAs } from './lib/ui/hooks/useCopyAs'
+export {
+	useDialogs,
+	type TLUiDialog,
+	type TLUiDialogProps,
+	type TLUiDialogsContextType,
+} from './lib/ui/hooks/useDialogsProvider'
+export {
+	UiEventsProvider,
+	useUiEvents,
+	type EventsProviderProps,
+	type TLUiEventContextType,
+	type TLUiEventHandler,
+	type TLUiEventMap,
+	type TLUiEventSource,
+} from './lib/ui/hooks/useEventsProvider'
+export { useExportAs } from './lib/ui/hooks/useExportAs'
+export {
+	useHelpMenuSchema,
+	type TLUiHelpMenuSchemaContextType,
+} from './lib/ui/hooks/useHelpMenuSchema'
+export { useKeyboardShortcuts } from './lib/ui/hooks/useKeyboardShortcuts'
+export {
+	useKeyboardShortcutsSchema,
+	type TLUiKeyboardShortcutsSchemaContextType,
+	type TLUiKeyboardShortcutsSchemaProviderProps,
+} from './lib/ui/hooks/useKeyboardShortcutsSchema'
+export { useLocalStorageState } from './lib/ui/hooks/useLocalStorageState'
+export { useMenuIsOpen } from './lib/ui/hooks/useMenuIsOpen'
+export {
+	useMenuSchema,
+	type TLUiMenuSchemaContextType,
+	type TLUiMenuSchemaProviderProps,
+} from './lib/ui/hooks/useMenuSchema'
+export { useReadonly } from './lib/ui/hooks/useReadonly'
+export {
+	useToasts,
+	type TLUiToast,
+	type TLUiToastAction,
+	type TLUiToastsContextType,
+} from './lib/ui/hooks/useToastsProvider'
+export {
+	toolbarItem,
+	useToolbarSchema,
+	type TLUiToolbarItem,
+	type TLUiToolbarSchemaContextType,
+} from './lib/ui/hooks/useToolbarSchema'
+export {
+	useTools,
+	type TLUiToolItem,
+	type TLUiToolsContextType,
+	type TLUiToolsProviderProps,
+} from './lib/ui/hooks/useTools'
+export { type TLUiTranslationKey } from './lib/ui/hooks/useTranslation/TLUiTranslationKey'
+export { type TLUiTranslation } from './lib/ui/hooks/useTranslation/translations'
+export {
+	useTranslation as useTranslation,
+	type TLUiTranslationContextType,
+} from './lib/ui/hooks/useTranslation/useTranslation'
+export { type TLUiIconType } from './lib/ui/icon-types'
+export { useDefaultHelpers, type TLUiOverrides } from './lib/ui/overrides'
+export {
+	DEFAULT_ACCEPTED_IMG_TYPE,
+	DEFAULT_ACCEPTED_VID_TYPE,
+	containBoxSize,
+	getResizedImageDataUrl,
+	isGifAnimated,
+} from './lib/utils/assets/assets'
+export { getEmbedInfo } from './lib/utils/embeds/embeds'
+export { copyAs } from './lib/utils/export/copyAs'
+export { getSvgAsImage } from './lib/utils/export/export'
+export { exportAs } from './lib/utils/export/exportAs'
+export { fitFrameToContent, removeFrame } from './lib/utils/frames/frames'
+export { setDefaultEditorAssetUrls } from './lib/utils/static-assets/assetUrls'
+export { truncateStringWithEllipsis } from './lib/utils/text/text'
+export {
+	buildFromV1Document,
+	type LegacyTldrawDocument,
+} from './lib/utils/tldr/buildFromV1Document'
+export {
+	TLDRAW_FILE_EXTENSION,
+	parseAndLoadDocument,
+	parseTldrawJsonFile,
+	serializeTldrawJson,
+	serializeTldrawJsonBlob,
+	type TldrawFile,
+} from './lib/utils/tldr/file'
+export { Dialog, DropdownMenu }
+import * as Dialog from './lib/ui/components/primitives/Dialog'
+import * as DropdownMenu from './lib/ui/components/primitives/DropdownMenu'

package/src/lib/Tldraw.test.tsx

@@ -0,0 +1,78 @@
+import { BaseBoxShapeUtil, Editor } from '@bigbluebutton/editor'
+import { act, render, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { Tldraw } from './Tldraw'
+
+describe('<Tldraw />', () => {
+	it('Renders without crashing', async () => {
+		await act(async () =>
+			render(
+				<Tldraw>
+					<div data-testid="canvas-1" />
+				</Tldraw>
+			)
+		)
+
+		await screen.findByTestId('canvas-1')
+	})
+
+	it('Doesnt cause re-render loops with unstable shape utils + tools', async () => {
+		function TestComponent() {
+			const [_, setEditor] = useState<Editor | null>(null)
+
+			return (
+				<Tldraw onMount={setEditor} shapeUtils={[]} tools={[]}>
+					<div data-testid="canvas-1" />
+				</Tldraw>
+			)
+		}
+
+		await act(async () => render(<TestComponent />))
+		await screen.findByTestId('canvas-1')
+	})
+
+	it('Doesnt cause re-render loops when shape utils change', async () => {
+		class FakeShapeUtil1 extends BaseBoxShapeUtil<any> {
+			static override type = 'fake' as const
+			override getDefaultProps() {
+				throw new Error('Method not implemented.')
+			}
+			override component(_: any) {
+				throw new Error('Method not implemented.')
+			}
+			override indicator(_: any) {
+				throw new Error('Method not implemented.')
+			}
+		}
+		class FakeShapeUtil2 extends BaseBoxShapeUtil<any> {
+			static override type = 'fake' as const
+			override getDefaultProps() {
+				throw new Error('Method not implemented.')
+			}
+			override component(_: any) {
+				throw new Error('Method not implemented.')
+			}
+			override indicator(_: any) {
+				throw new Error('Method not implemented.')
+			}
+		}
+
+		const rendered = await act(async () =>
+			render(
+				<Tldraw shapeUtils={[FakeShapeUtil1]}>
+					<div data-testid="canvas-1" />
+				</Tldraw>
+			)
+		)
+		await screen.findByTestId('canvas-1')
+
+		await act(async () => {
+			rendered.rerender(
+				<Tldraw shapeUtils={[FakeShapeUtil2]}>
+					<div data-testid="canvas-2" />
+				</Tldraw>
+			)
+		})
+		await screen.findByTestId('canvas-2')
+	})
+})

package/src/lib/Tldraw.tsx

@@ -0,0 +1,179 @@
+import {
+	Canvas,
+	Editor,
+	ErrorScreen,
+	LoadingScreen,
+	StoreSnapshot,
+	TLOnMountHandler,
+	TLRecord,
+	TLStore,
+	TLStoreWithStatus,
+	TldrawEditor,
+	TldrawEditorBaseProps,
+	TldrawEditorProps,
+	assert,
+	useEditor,
+	useShallowArrayIdentity,
+	useShallowObjectIdentity,
+} from '@bigbluebutton/editor'
+import { useCallback, useDebugValue, useLayoutEffect, useMemo, useRef } from 'react'
+import { TldrawHandles } from './canvas/TldrawHandles'
+import { TldrawHoveredShapeIndicator } from './canvas/TldrawHoveredShapeIndicator'
+import { TldrawScribble } from './canvas/TldrawScribble'
+import { TldrawSelectionBackground } from './canvas/TldrawSelectionBackground'
+import { TldrawSelectionForeground } from './canvas/TldrawSelectionForeground'
+import {
+	TLExternalContentProps,
+	registerDefaultExternalContentHandlers,
+} from './defaultExternalContentHandlers'
+import { defaultShapeTools } from './defaultShapeTools'
+import { defaultShapeUtils } from './defaultShapeUtils'
+import { registerDefaultSideEffects } from './defaultSideEffects'
+import { defaultTools } from './defaultTools'
+import { TldrawUi, TldrawUiProps } from './ui/TldrawUi'
+import { ContextMenu } from './ui/components/ContextMenu'
+import { usePreloadAssets } from './ui/hooks/usePreloadAssets'
+import { useDefaultEditorAssetsWithOverrides } from './utils/static-assets/assetUrls'
+
+/** @public */
+export type TldrawProps = TldrawEditorBaseProps &
+	(
+		| {
+				store: TLStore | TLStoreWithStatus
+		  }
+		| {
+				store?: undefined
+				persistenceKey?: string
+				sessionId?: string
+				defaultName?: string
+				/**
+				 * A snapshot to load for the store's initial data / schema.
+				 */
+				snapshot?: StoreSnapshot<TLRecord>
+		  }
+	) &
+	TldrawUiProps &
+	Partial<TLExternalContentProps>
+
+/** @public */
+export function Tldraw(props: TldrawProps) {
+	const {
+		children,
+		maxImageDimension,
+		maxAssetSize,
+		acceptedImageMimeTypes,
+		acceptedVideoMimeTypes,
+		onMount,
+		...rest
+	} = props
+
+	const components = useShallowObjectIdentity(rest.components ?? {})
+	const shapeUtils = useShallowArrayIdentity(rest.shapeUtils ?? [])
+	const tools = useShallowArrayIdentity(rest.tools ?? [])
+
+	const withDefaults: TldrawEditorProps = {
+		initialState: 'select',
+		...rest,
+		components: useMemo(
+			() => ({
+				Scribble: TldrawScribble,
+				CollaboratorScribble: TldrawScribble,
+				SelectionForeground: TldrawSelectionForeground,
+				SelectionBackground: TldrawSelectionBackground,
+				Handles: TldrawHandles,
+				HoveredShapeIndicator: TldrawHoveredShapeIndicator,
+				...components,
+			}),
+			[components]
+		),
+		shapeUtils: useMemo(() => [...defaultShapeUtils, ...shapeUtils], [shapeUtils]),
+		tools: useMemo(() => [...defaultTools, ...defaultShapeTools, ...tools], [tools]),
+	}
+
+	const assets = useDefaultEditorAssetsWithOverrides(rest.assetUrls)
+
+	const { done: preloadingComplete, error: preloadingError } = usePreloadAssets(assets)
+
+	if (preloadingError) {
+		return <ErrorScreen>Could not load assets. Please refresh the page.</ErrorScreen>
+	}
+
+	if (!preloadingComplete) {
+		return <LoadingScreen>Loading assets...</LoadingScreen>
+	}
+
+	return (
+		<TldrawEditor {...withDefaults}>
+			<TldrawUi {...withDefaults}>
+				<ContextMenu>
+					<Canvas />
+				</ContextMenu>
+				<InsideOfEditorContext
+					maxImageDimension={maxImageDimension}
+					maxAssetSize={maxAssetSize}
+					acceptedImageMimeTypes={acceptedImageMimeTypes}
+					acceptedVideoMimeTypes={acceptedVideoMimeTypes}
+					onMount={onMount}
+				/>
+				{children}
+			</TldrawUi>
+		</TldrawEditor>
+	)
+}
+
+// We put these hooks into a component here so that they can run inside of the context provided by TldrawEditor.
+function InsideOfEditorContext({
+	maxImageDimension = 1000,
+	maxAssetSize = 10 * 1024 * 1024, // 10mb
+	acceptedImageMimeTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'],
+	acceptedVideoMimeTypes = ['video/mp4', 'video/quicktime'],
+	onMount,
+}: Partial<TLExternalContentProps & { onMount: TLOnMountHandler }>) {
+	const editor = useEditor()
+
+	const onMountEvent = useEvent((editor: Editor) => {
+		const unsubs: (void | (() => void) | undefined)[] = []
+
+		unsubs.push(...registerDefaultSideEffects(editor))
+
+		// for content handling, first we register the default handlers...
+		registerDefaultExternalContentHandlers(editor, {
+			maxImageDimension,
+			maxAssetSize,
+			acceptedImageMimeTypes,
+			acceptedVideoMimeTypes,
+		})
+
+		// ...then we run the onMount prop, which may override the above
+		unsubs.push(onMount?.(editor))
+
+		return () => {
+			unsubs.forEach((fn) => fn?.())
+		}
+	})
+
+	useLayoutEffect(() => {
+		if (editor) return onMountEvent?.(editor)
+	}, [editor, onMountEvent])
+
+	return null
+}
+
+// duped from tldraw editor
+function useEvent<Args extends Array<unknown>, Result>(
+	handler: (...args: Args) => Result
+): (...args: Args) => Result {
+	const handlerRef = useRef<(...args: Args) => Result>()
+
+	useLayoutEffect(() => {
+		handlerRef.current = handler
+	})
+
+	useDebugValue(handler)
+
+	return useCallback((...args: Args) => {
+		const fn = handlerRef.current
+		assert(fn, 'fn does not exist')
+		return fn(...args)
+	}, [])
+}

package/src/lib/canvas/TldrawCropHandles.tsx

@@ -0,0 +1,126 @@
+import { toDomPrecision } from '@bigbluebutton/editor'
+import classNames from 'classnames'
+
+/** @public */
+export interface TldrawCropHandlesProps {
+	size: number
+	width: number
+	height: number
+	hideAlternateHandles: boolean
+}
+
+/** @public */
+export function TldrawCropHandles({
+	size,
+	width,
+	height,
+	hideAlternateHandles,
+}: TldrawCropHandlesProps) {
+	const cropStrokeWidth = toDomPrecision(size / 3)
+	const offset = cropStrokeWidth / 2
+
+	return (
+		<svg className="tl-overlays__item">
+			{/* Top left */}
+			<polyline
+				className="tl-corner-crop-handle"
+				points={`
+						${toDomPrecision(0 - offset)},${toDomPrecision(size)} 
+						${toDomPrecision(0 - offset)},${toDomPrecision(0 - offset)} 
+						${toDomPrecision(size)},${toDomPrecision(0 - offset)}`}
+				strokeWidth={cropStrokeWidth}
+				data-testid="selection.crop.top_left"
+				aria-label="top_left handle"
+			/>
+			{/* Top */}
+			<line
+				className={classNames('tl-corner-crop-edge-handle', {
+					'tl-hidden': hideAlternateHandles,
+				})}
+				x1={toDomPrecision(width / 2 - size)}
+				y1={toDomPrecision(0 - offset)}
+				x2={toDomPrecision(width / 2 + size)}
+				y2={toDomPrecision(0 - offset)}
+				strokeWidth={cropStrokeWidth}
+				data-testid="selection.crop.top"
+				aria-label="top handle"
+			/>
+			{/* Top right */}
+			<polyline
+				className={classNames('tl-corner-crop-handle', {
+					'tl-hidden': hideAlternateHandles,
+				})}
+				points={`
+						${toDomPrecision(width - size)},${toDomPrecision(0 - offset)} 
+						${toDomPrecision(width + offset)},${toDomPrecision(0 - offset)} 
+						${toDomPrecision(width + offset)},${toDomPrecision(size)}`}
+				strokeWidth={cropStrokeWidth}
+				data-testid="selection.crop.top_right"
+				aria-label="top_right handle"
+			/>
+			{/* Right */}
+			<line
+				className={classNames('tl-corner-crop-edge-handle', {
+					'tl-hidden': hideAlternateHandles,
+				})}
+				x1={toDomPrecision(width + offset)}
+				y1={toDomPrecision(height / 2 - size)}
+				x2={toDomPrecision(width + offset)}
+				y2={toDomPrecision(height / 2 + size)}
+				strokeWidth={cropStrokeWidth}
+				data-testid="selection.crop.right"
+				aria-label="right handle"
+			/>
+			{/* Bottom right */}
+			<polyline
+				className="tl-corner-crop-handle"
+				points={`
+						${toDomPrecision(width + offset)},${toDomPrecision(height - size)} 
+						${toDomPrecision(width + offset)},${toDomPrecision(height + offset)}
+						${toDomPrecision(width - size)},${toDomPrecision(height + offset)}`}
+				strokeWidth={cropStrokeWidth}
+				data-testid="selection.crop.bottom_right"
+				aria-label="bottom_right handle"
+			/>
+			{/* Bottom */}
+			<line
+				className={classNames('tl-corner-crop-edge-handle', {
+					'tl-hidden': hideAlternateHandles,
+				})}
+				x1={toDomPrecision(width / 2 - size)}
+				y1={toDomPrecision(height + offset)}
+				x2={toDomPrecision(width / 2 + size)}
+				y2={toDomPrecision(height + offset)}
+				strokeWidth={cropStrokeWidth}
+				data-testid="selection.crop.bottom"
+				aria-label="bottom handle"
+			/>
+			{/* Bottom left */}
+			<polyline
+				className={classNames('tl-corner-crop-handle', {
+					'tl-hidden': hideAlternateHandles,
+				})}
+				points={`
+						${toDomPrecision(0 + size)},${toDomPrecision(height + offset)} 
+						${toDomPrecision(0 - offset)},${toDomPrecision(height + offset)}
+						${toDomPrecision(0 - offset)},${toDomPrecision(height - size)}`}
+				strokeWidth={cropStrokeWidth}
+				data-testid="selection.crop.bottom_left"
+				aria-label="bottom_left handle"
+			/>
+			{/* Left */}
+			<line
+				className={classNames('tl-corner-crop-edge-handle', {
+					'tl-hidden': hideAlternateHandles,
+				})}
+				x1={toDomPrecision(0 - offset)}
+				y1={toDomPrecision(height / 2 - size)}
+				x2={toDomPrecision(0 - offset)}
+				y2={toDomPrecision(height / 2 + size)}
+				strokeWidth={cropStrokeWidth}
+				data-testid="selection.crop.left"
+				aria-label="left handle"
+			/>
+		</svg>
+	)
+}

package/src/lib/canvas/TldrawHandles.tsx

@@ -0,0 +1,15 @@
+import { TLHandlesComponent, useEditor, useValue } from '@bigbluebutton/editor'
+
+/** @public */
+export const TldrawHandles: TLHandlesComponent = ({ children }) => {
+	const editor = useEditor()
+	const shouldDisplayHandles = useValue(
+		'shouldDisplayHandles',
+		() => editor.isInAny('select.idle', 'select.pointing_handle'),
+		[editor]
+	)
+
+	if (!shouldDisplayHandles) return null
+
+	return <svg className="tl-user-handles tl-overlays__item">{children}</svg>
+}

package/src/lib/canvas/TldrawHoveredShapeIndicator.tsx

@@ -0,0 +1,30 @@
+import {
+	ShapeIndicator,
+	TLHoveredShapeIndicatorComponent,
+	useEditor,
+	useValue,
+} from '@bigbluebutton/editor'
+
+/** @public */
+export const TldrawHoveredShapeIndicator: TLHoveredShapeIndicatorComponent = ({ shapeId }) => {
+	const editor = useEditor()
+	const showHoveredShapeIndicator = useValue(
+		'show hovered',
+		() => {
+			// When the editor is editing a shape and hovering that shape,
+			// don't show its indicator; but DO show other hover indicators
+			if (editor.isIn('select.editing_shape')) {
+				return editor.getHoveredShapeId() !== editor.getEditingShapeId()
+			}
+
+			// Otherise, only show the hovered indicator when the editor
+			// is in the idle state
+			return editor.isInAny('select.idle')
+		},
+		[editor]
+	)
+	if (!showHoveredShapeIndicator) return null
+	return <ShapeIndicator className="tl-user-indicator__hovered" id={shapeId} />
+}
+
+//

package/src/lib/canvas/TldrawScribble.tsx

@@ -0,0 +1,45 @@
+import { EASINGS, TLScribbleComponent, getSvgPathFromPoints } from '@bigbluebutton/editor'
+import classNames from 'classnames'
+import { getStroke } from '../shapes/shared/freehand/getStroke'
+
+/** @public */
+export const TldrawScribble: TLScribbleComponent = ({
+	scribble,
+	zoom,
+	color,
+	opacity,
+	className,
+}) => {
+	if (!scribble.points.length) return null
+
+	const stroke = getStroke(scribble.points, {
+		size: scribble.size / zoom,
+		start: { taper: scribble.taper, easing: EASINGS.linear },
+		last: scribble.state === 'stopping',
+		simulatePressure: false,
+		streamline: 0.32,
+	})
+
+	let d: string
+
+	if (stroke.length < 4) {
+		// the stroke will be 3 points as a sort of shrugging fail state, so let's draw a dot instead
+		const r = scribble.size / zoom / 2
+		const { x, y } = scribble.points[scribble.points.length - 1]
+		d = `M ${x - r},${y} a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 ${-r * 2},0`
+	} else {
+		// If we do have a stroke, then draw the stroke path
+		d = getSvgPathFromPoints(stroke)
+	}
+
+	return (
+		<svg className={className ? classNames('tl-overlays__item', className) : className}>
+			<path
+				className="tl-scribble"
+				d={d}
+				fill={color ?? `var(--color-${scribble.color})`}
+				opacity={opacity ?? scribble.opacity}
+			/>
+		</svg>
+	)
+}

package/src/lib/canvas/TldrawSelectionBackground.tsx

@@ -0,0 +1,29 @@
+import {
+	DefaultSelectionBackground,
+	TLSelectionBackgroundComponent,
+	useEditor,
+	useValue,
+} from '@bigbluebutton/editor'
+
+/** @public */
+export const TldrawSelectionBackground: TLSelectionBackgroundComponent = ({ bounds, rotation }) => {
+	const editor = useEditor()
+
+	const shouldDisplay = useValue(
+		'should display',
+		() =>
+			editor.isInAny(
+				'select.idle',
+				'select.brushing',
+				'select.scribble_brushing',
+				'select.pointing_shape',
+				'select.pointing_selection',
+				'text.resizing'
+			),
+		[editor]
+	)
+
+	if (!shouldDisplay) return null
+
+	return <DefaultSelectionBackground bounds={bounds} rotation={rotation} />
+}