@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/lib/ui/hooks/useRevelantStyles.ts

@@ -0,0 +1,38 @@
+import {
+	DefaultColorStyle,
+	DefaultDashStyle,
+	DefaultFillStyle,
+	DefaultSizeStyle,
+	ReadonlySharedStyleMap,
+	SharedStyle,
+	SharedStyleMap,
+	useEditor,
+	useValue,
+} from '@bigbluebutton/editor'
+
+const selectToolStyles = [DefaultColorStyle, DefaultDashStyle, DefaultFillStyle, DefaultSizeStyle]
+
+export function useRelevantStyles(): {
+	styles: ReadonlySharedStyleMap
+	opacity: SharedStyle<number>
+} | null {
+	const editor = useEditor()
+	return useValue(
+		'getRelevantStyles',
+		() => {
+			const styles = new SharedStyleMap(editor.getSharedStyles())
+			const hasShape =
+				editor.getSelectedShapeIds().length > 0 || !!editor.root.getCurrent()?.shapeType
+
+			if (styles.size === 0 && editor.isIn('select') && editor.getSelectedShapeIds().length === 0) {
+				for (const style of selectToolStyles) {
+					styles.applyValue(style, editor.getStyleForNextShape(style))
+				}
+			}
+
+			if (styles.size === 0 && !hasShape) return null
+			return { styles, opacity: editor.getSharedOpacity() }
+		},
+		[editor]
+	)
+}

package/src/lib/ui/hooks/useShowAutoSizeToggle.ts

@@ -0,0 +1,17 @@
+import { TLTextShape, useEditor, useValue } from '@bigbluebutton/editor'
+
+export function useShowAutoSizeToggle() {
+	const editor = useEditor()
+	return useValue(
+		'showAutoSizeToggle',
+		() => {
+			const selectedShapes = editor.getSelectedShapes()
+			return (
+				selectedShapes.length === 1 &&
+				editor.isShapeOfType<TLTextShape>(selectedShapes[0], 'text') &&
+				selectedShapes[0].props.autoSize === false
+			)
+		},
+		[editor]
+	)
+}

package/src/lib/ui/hooks/useToastsProvider.tsx

@@ -0,0 +1,75 @@
+import { Editor, uniqueId } from '@bigbluebutton/editor'
+import { createContext, useCallback, useContext, useState } from 'react'
+import { TLUiIconType } from '../icon-types'
+
+/** @public */
+export interface TLUiToast {
+	id: string
+	icon?: TLUiIconType
+	title?: string
+	description?: string
+	actions?: TLUiToastAction[]
+	keepOpen?: boolean
+	closeLabel?: string
+}
+
+/** @public */
+export interface TLUiToastAction {
+	type: 'primary' | 'danger' | 'normal'
+	label: string
+	onClick: () => void
+}
+
+/** @public */
+export type TLUiToastsContextType = {
+	addToast: (toast: Omit<TLUiToast, 'id'> & { id?: string }) => string
+	removeToast: (id: TLUiToast['id']) => string
+	clearToasts: () => void
+	toasts: TLUiToast[]
+}
+
+/** @internal */
+export const ToastsContext = createContext({} as TLUiToastsContextType)
+
+/** @internal */
+export type ToastsProviderProps = {
+	overrides?: (editor: Editor) => TLUiToastsContextType
+	children: any
+}
+
+/** @internal */
+export function ToastsProvider({ children }: ToastsProviderProps) {
+	const [toasts, setToasts] = useState<TLUiToast[]>([])
+
+	const addToast = useCallback((toast: Omit<TLUiToast, 'id'> & { id?: string }) => {
+		const id = toast.id ?? uniqueId()
+		setToasts((d) => [...d.filter((m) => m.id !== toast.id), { ...toast, id }])
+		return id
+	}, [])
+
+	const removeToast = useCallback((id: string) => {
+		setToasts((d) => d.filter((m) => m.id !== id))
+		return id
+	}, [])
+
+	const clearToasts = useCallback(() => {
+		setToasts(() => [])
+	}, [])
+
+	return (
+		<ToastsContext.Provider value={{ toasts, addToast, removeToast, clearToasts }}>
+			{children}
+		</ToastsContext.Provider>
+	)
+}
+
+/** @public */
+export function useToasts() {
+	const ctx = useContext(ToastsContext)
+
+	if (!ctx) {
+		throw new Error('useToasts must be used within a ToastsProvider')
+	}
+
+	return ctx
+}

package/src/lib/ui/hooks/useToolbarSchema.tsx

@@ -0,0 +1,99 @@
+import { Editor, compact, useEditor } from '@bigbluebutton/editor'
+import React from 'react'
+import { TLUiToolItem, TLUiToolsContextType, useTools } from './useTools'
+
+/** @public */
+export type TLUiToolbarItem = {
+	id: string
+	type: 'item'
+	readonlyOk: boolean
+	toolItem: TLUiToolItem
+}
+
+/** @public */
+export function toolbarItem(toolItem: TLUiToolItem): TLUiToolbarItem {
+	return {
+		id: toolItem.id,
+		type: 'item',
+		readonlyOk: toolItem.readonlyOk,
+		toolItem,
+	}
+}
+
+/** @public */
+export type TLUiToolbarSchemaContextType = TLUiToolbarItem[]
+
+/** @internal */
+export const ToolbarSchemaContext = React.createContext([] as TLUiToolbarSchemaContextType)
+
+/** @public */
+export type TLUiToolbarSchemaProviderProps = {
+	overrides?: (
+		editor: Editor,
+		schema: TLUiToolbarSchemaContextType,
+		more: { tools: TLUiToolsContextType }
+	) => TLUiToolbarSchemaContextType
+	children: any
+}
+
+/** @internal */
+export function ToolbarSchemaProvider({ overrides, children }: TLUiToolbarSchemaProviderProps) {
+	const editor = useEditor()
+
+	const tools = useTools()
+
+	const toolbarSchema = React.useMemo<TLUiToolbarSchemaContextType>(() => {
+		const schema: TLUiToolbarSchemaContextType = compact([
+			toolbarItem(tools.select),
+			toolbarItem(tools.hand),
+			toolbarItem(tools.draw),
+			toolbarItem(tools.eraser),
+			toolbarItem(tools.arrow),
+			toolbarItem(tools.text),
+			toolbarItem(tools.note),
+			toolbarItem(tools.asset),
+			toolbarItem(tools['rectangle']),
+			toolbarItem(tools['ellipse']),
+			toolbarItem(tools['diamond']),
+			toolbarItem(tools['triangle']),
+			toolbarItem(tools['trapezoid']),
+			toolbarItem(tools['rhombus']),
+			toolbarItem(tools['hexagon']),
+			toolbarItem(tools['cloud']),
+			// toolbarItem(tools['octagon']),
+			toolbarItem(tools['star']),
+			toolbarItem(tools['oval']),
+			toolbarItem(tools['x-box']),
+			toolbarItem(tools['check-box']),
+			toolbarItem(tools['arrow-left']),
+			toolbarItem(tools['arrow-up']),
+			toolbarItem(tools['arrow-down']),
+			toolbarItem(tools['arrow-right']),
+			toolbarItem(tools.line),
+			toolbarItem(tools.highlight),
+			toolbarItem(tools.frame),
+			toolbarItem(tools.laser),
+		])
+
+		if (overrides) {
+			return overrides(editor, schema, { tools })
+		}
+
+		return schema
+	}, [editor, overrides, tools])
+
+	return (
+		<ToolbarSchemaContext.Provider value={toolbarSchema}>{children}</ToolbarSchemaContext.Provider>
+	)
+}
+
+/** @public */
+export function useToolbarSchema() {
+	const ctx = React.useContext(ToolbarSchemaContext)
+
+	if (!ctx) {
+		throw new Error('useToolbarSchema must be used within a ToolbarSchemaProvider')
+	}
+
+	return ctx
+}

package/src/lib/ui/hooks/useTools.tsx

@@ -0,0 +1,245 @@
+import { Editor, GeoShapeGeoStyle, useEditor } from '@bigbluebutton/editor'
+import * as React from 'react'
+import { EmbedDialog } from '../components/EmbedDialog'
+import { TLUiIconType } from '../icon-types'
+import { useDialogs } from './useDialogsProvider'
+import { TLUiEventSource, useUiEvents } from './useEventsProvider'
+import { useInsertMedia } from './useInsertMedia'
+import { TLUiTranslationKey } from './useTranslation/TLUiTranslationKey'
+
+/** @public */
+export interface TLUiToolItem<
+	TranslationKey extends string = string,
+	IconType extends string = string
+> {
+	id: string
+	label: TranslationKey
+	shortcutsLabel?: TranslationKey
+	icon: IconType
+	onSelect: (source: TLUiEventSource) => void
+	kbd?: string
+	readonlyOk: boolean
+	meta?: {
+		[key: string]: any
+	}
+}
+
+/** @public */
+export type TLUiToolsContextType = Record<string, TLUiToolItem>
+
+/** @internal */
+export const ToolsContext = React.createContext({} as TLUiToolsContextType)
+
+/** @public */
+export type TLUiToolsProviderProps = {
+	overrides?: (
+		editor: Editor,
+		tools: TLUiToolsContextType,
+		helpers: { insertMedia: () => void }
+	) => TLUiToolsContextType
+	children: any
+}
+
+/** @internal */
+export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
+	const editor = useEditor()
+	const trackEvent = useUiEvents()
+
+	const { addDialog } = useDialogs()
+	const insertMedia = useInsertMedia()
+
+	const tools = React.useMemo<TLUiToolsContextType>(() => {
+		const toolsArray: TLUiToolItem<TLUiTranslationKey, TLUiIconType>[] = [
+			{
+				id: 'select',
+				label: 'tool.select',
+				icon: 'tool-pointer',
+				kbd: 'v',
+				readonlyOk: true,
+				onSelect(source) {
+					editor.setCurrentTool('select')
+					trackEvent('select-tool', { source, id: 'select' })
+				},
+			},
+			{
+				id: 'hand',
+				label: 'tool.hand',
+				icon: 'tool-hand',
+				kbd: 'h',
+				readonlyOk: true,
+				onSelect(source) {
+					editor.setCurrentTool('hand')
+					trackEvent('select-tool', { source, id: 'hand' })
+				},
+			},
+			{
+				id: 'eraser',
+				label: 'tool.eraser',
+				icon: 'tool-eraser',
+				kbd: 'e',
+				readonlyOk: false,
+				onSelect(source) {
+					editor.setCurrentTool('eraser')
+					trackEvent('select-tool', { source, id: 'eraser' })
+				},
+			},
+			{
+				id: 'draw',
+				label: 'tool.draw',
+				readonlyOk: false,
+				icon: 'tool-pencil',
+				kbd: 'd,b,x',
+				onSelect(source) {
+					editor.setCurrentTool('draw')
+					trackEvent('select-tool', { source, id: 'draw' })
+				},
+			},
+			...[...GeoShapeGeoStyle.values].map((id) => ({
+				id,
+				label: `tool.${id}` as TLUiTranslationKey,
+				readonlyOk: false,
+				meta: {
+					geo: id,
+				},
+				kbd: id === 'rectangle' ? 'r' : id === 'ellipse' ? 'o' : undefined,
+				icon: ('geo-' + id) as TLUiIconType,
+				onSelect(source: TLUiEventSource) {
+					editor.batch(() => {
+						editor.updateInstanceState(
+							{
+								stylesForNextShape: {
+									...editor.getInstanceState().stylesForNextShape,
+									[GeoShapeGeoStyle.id]: id,
+								},
+							},
+							{ ephemeral: true }
+						)
+						editor.setCurrentTool('geo')
+						trackEvent('select-tool', { source, id: `geo-${id}` })
+					})
+				},
+			})),
+			{
+				id: 'arrow',
+				label: 'tool.arrow',
+				readonlyOk: false,
+				icon: 'tool-arrow',
+				kbd: 'a',
+				onSelect(source) {
+					editor.setCurrentTool('arrow')
+					trackEvent('select-tool', { source, id: 'arrow' })
+				},
+			},
+			{
+				id: 'line',
+				label: 'tool.line',
+				readonlyOk: false,
+				icon: 'tool-line',
+				kbd: 'l',
+				onSelect(source) {
+					editor.setCurrentTool('line')
+					trackEvent('select-tool', { source, id: 'line' })
+				},
+			},
+			{
+				id: 'frame',
+				label: 'tool.frame',
+				readonlyOk: false,
+				icon: 'tool-frame',
+				kbd: 'f',
+				onSelect(source) {
+					editor.setCurrentTool('frame')
+					trackEvent('select-tool', { source, id: 'frame' })
+				},
+			},
+			{
+				id: 'text',
+				label: 'tool.text',
+				readonlyOk: false,
+				icon: 'tool-text',
+				kbd: 't',
+				onSelect(source) {
+					editor.setCurrentTool('text')
+					trackEvent('select-tool', { source, id: 'text' })
+				},
+			},
+			{
+				id: 'asset',
+				label: 'tool.asset',
+				readonlyOk: false,
+				icon: 'tool-media',
+				kbd: '$u',
+				onSelect(source) {
+					insertMedia()
+					trackEvent('select-tool', { source, id: 'media' })
+				},
+			},
+			{
+				id: 'note',
+				label: 'tool.note',
+				readonlyOk: false,
+				icon: 'tool-note',
+				kbd: 'n',
+				onSelect(source) {
+					editor.setCurrentTool('note')
+					trackEvent('select-tool', { source, id: 'note' })
+				},
+			},
+			{
+				id: 'laser',
+				label: 'tool.laser',
+				readonlyOk: true,
+				icon: 'tool-laser',
+				kbd: 'k',
+				onSelect(source) {
+					editor.setCurrentTool('laser')
+					trackEvent('select-tool', { source, id: 'laser' })
+				},
+			},
+			{
+				id: 'embed',
+				label: 'tool.embed',
+				readonlyOk: false,
+				icon: 'tool-embed',
+				onSelect(source) {
+					addDialog({ component: EmbedDialog })
+					trackEvent('select-tool', { source, id: 'embed' })
+				},
+			},
+		]
+
+		toolsArray.push({
+			id: 'highlight',
+			label: 'tool.highlight',
+			readonlyOk: true,
+			icon: 'tool-highlight',
+			// TODO: pick a better shortcut
+			kbd: '!d',
+			onSelect(source) {
+				editor.setCurrentTool('highlight')
+				trackEvent('select-tool', { source, id: 'highlight' })
+			},
+		})
+
+		const tools = Object.fromEntries(toolsArray.map((t) => [t.id, t]))
+
+		if (overrides) {
+			return overrides(editor, tools, { insertMedia })
+		}
+
+		return tools
+	}, [overrides, editor, trackEvent, insertMedia, addDialog])
+
+	return <ToolsContext.Provider value={tools}>{children}</ToolsContext.Provider>
+}
+
+/** @public */
+export function useTools() {
+	const ctx = React.useContext(ToolsContext)
+
+	if (!ctx) {
+		throw new Error('useTools must be used within a ToolProvider')
+	}
+
+	return ctx
+}