@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/lib/ui/components/EditLinkDialog.tsx

@@ -0,0 +1,180 @@
+import { TLBaseShape, isValidUrl, track, useEditor } from '@bigbluebutton/editor'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { TLUiDialogProps } from '../hooks/useDialogsProvider'
+import { useTranslation } from '../hooks/useTranslation/useTranslation'
+import { Button } from './primitives/Button'
+import * as Dialog from './primitives/Dialog'
+import { Input } from './primitives/Input'
+
+// A url can either be invalid, or valid with a protocol, or valid without a protocol.
+// For example, "aol.com" would be valid with a protocol ()
+function validateUrl(url: string) {
+	if (isValidUrl(url)) {
+		return { isValid: true, hasProtocol: true }
+	}
+	if (isValidUrl('https://' + url)) {
+		return { isValid: true, hasProtocol: false }
+	}
+	return { isValid: false, hasProtocol: false }
+}
+
+type ShapeWithUrl = TLBaseShape<string, { url: string }>
+
+export const EditLinkDialog = track(function EditLinkDialog({ onClose }: TLUiDialogProps) {
+	const editor = useEditor()
+
+	const selectedShape = editor.getOnlySelectedShape()
+
+	if (
+		!(selectedShape && 'url' in selectedShape.props && typeof selectedShape.props.url === 'string')
+	) {
+		return null
+	}
+
+	return <EditLinkDialogInner onClose={onClose} selectedShape={selectedShape as ShapeWithUrl} />
+})
+
+export const EditLinkDialogInner = track(function EditLinkDialogInner({
+	onClose,
+	selectedShape,
+}: TLUiDialogProps & { selectedShape: ShapeWithUrl }) {
+	const editor = useEditor()
+	const msg = useTranslation()
+
+	const rInput = useRef<HTMLInputElement>(null)
+
+	useEffect(() => {
+		requestAnimationFrame(() => rInput.current?.focus())
+	}, [])
+
+	const rInitialValue = useRef(selectedShape.props.url)
+
+	const [urlInputState, setUrlInputState] = useState(() => {
+		const urlValidResult = validateUrl(selectedShape.props.url)
+
+		const initialValue =
+			urlValidResult.isValid === true
+				? urlValidResult.hasProtocol
+					? selectedShape.props.url
+					: 'https://' + selectedShape.props.url
+				: 'https://'
+
+		return {
+			actual: initialValue,
+			safe: initialValue,
+			valid: true,
+		}
+	})
+
+	const handleChange = useCallback((rawValue: string) => {
+		// Just auto-correct double https:// from a bad paste.
+		const fixedRawValue = rawValue.replace(/https?:\/\/(https?:\/\/)/, (_match, arg1) => {
+			return arg1
+		})
+
+		const urlValidResult = validateUrl(fixedRawValue)
+
+		const safeValue =
+			urlValidResult.isValid === true
+				? urlValidResult.hasProtocol
+					? fixedRawValue
+					: 'https://' + fixedRawValue
+				: 'https://'
+
+		setUrlInputState({
+			actual: fixedRawValue,
+			safe: safeValue,
+			valid: urlValidResult.isValid,
+		})
+	}, [])
+
+	const handleClear = useCallback(() => {
+		const onlySelectedShape = editor.getOnlySelectedShape()
+		if (!onlySelectedShape) return
+		editor.updateShapes([
+			{ id: onlySelectedShape.id, type: onlySelectedShape.type, props: { url: '' } },
+		])
+		onClose()
+	}, [editor, onClose])
+
+	const handleComplete = useCallback(() => {
+		const onlySelectedShape = editor.getOnlySelectedShape()
+
+		if (!onlySelectedShape) return
+
+		// ? URL is a magic value
+		if (onlySelectedShape && 'url' in onlySelectedShape.props) {
+			// Here would be a good place to validate the next shape—would setting the empty
+			if (onlySelectedShape.props.url !== urlInputState.safe) {
+				editor.updateShapes([
+					{
+						id: onlySelectedShape.id,
+						type: onlySelectedShape.type,
+						props: { url: urlInputState.safe },
+					},
+				])
+			}
+		}
+		onClose()
+	}, [editor, onClose, urlInputState])
+
+	const handleCancel = useCallback(() => {
+		onClose()
+	}, [onClose])
+
+	if (!selectedShape) {
+		// dismiss modal
+		onClose()
+		return null
+	}
+
+	// Are we going from a valid state to an invalid state?
+	const isRemoving = rInitialValue.current && !urlInputState.valid
+
+	return (
+		<>
+			<Dialog.Header>
+				<Dialog.Title>{msg('edit-link-dialog.title')}</Dialog.Title>
+				<Dialog.CloseButton />
+			</Dialog.Header>
+			<Dialog.Body>
+				<div className="tlui-edit-link-dialog">
+					<Input
+						ref={rInput}
+						className="tlui-edit-link-dialog__input"
+						label="edit-link-dialog.url"
+						autofocus
+						value={urlInputState.actual}
+						onValueChange={handleChange}
+						onComplete={handleComplete}
+						onCancel={handleCancel}
+					/>
+					<div>
+						{urlInputState.valid
+							? msg('edit-link-dialog.detail')
+							: msg('edit-link-dialog.invalid-url')}
+					</div>
+				</div>
+			</Dialog.Body>
+			<Dialog.Footer className="tlui-dialog__footer__actions">
+				<Button type="normal" onClick={handleCancel} onTouchEnd={handleCancel}>
+					{msg('edit-link-dialog.cancel')}
+				</Button>
+				{isRemoving ? (
+					<Button type={'danger'} onTouchEnd={handleClear} onClick={handleClear}>
+						{msg('edit-link-dialog.clear')}
+					</Button>
+				) : (
+					<Button
+						type="primary"
+						disabled={!urlInputState.valid}
+						onTouchEnd={handleComplete}
+						onClick={handleComplete}
+					>
+						{msg('edit-link-dialog.save')}
+					</Button>
+				)}
+			</Dialog.Footer>
+		</>
+	)
+})

package/src/lib/ui/components/EmbedDialog.tsx

@@ -0,0 +1,143 @@
+import { EMBED_DEFINITIONS, EmbedDefinition, track, useEditor } from '@bigbluebutton/editor'
+import { useRef, useState } from 'react'
+import { TLEmbedResult, getEmbedInfo } from '../../utils/embeds/embeds'
+import { useAssetUrls } from '../hooks/useAssetUrls'
+import { TLUiDialogProps } from '../hooks/useDialogsProvider'
+import { untranslated, useTranslation } from '../hooks/useTranslation/useTranslation'
+import { Button } from './primitives/Button'
+import * as Dialog from './primitives/Dialog'
+import { Icon } from './primitives/Icon'
+import { Input } from './primitives/Input'
+
+export const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogProps) {
+	const editor = useEditor()
+	const msg = useTranslation()
+	const assetUrls = useAssetUrls()
+
+	// The embed definition for the user's selected embed (set by the user clicking on an embed in stage 1)
+	const [embedDefinition, setEmbedDefinition] = useState<null | EmbedDefinition>(null)
+
+	// The URL that the user has typed into (in stage 2)
+	const [url, setUrl] = useState<string>('')
+
+	// The embed info for the user's selected embed (based on the URL they've entered in stage 2)
+	const [embedInfoForUrl, setEmbedInfoForUrl] = useState<null | TLEmbedResult>(null)
+
+	// Should we show the "invalid URL" error message?
+	const [showError, setShowError] = useState(false)
+	const rShowErrorTimeout = useRef<any>(-1)
+
+	return (
+		<>
+			<Dialog.Header>
+				<Dialog.Title>
+					{embedDefinition
+						? `${msg('embed-dialog.title')} — ${embedDefinition.title}`
+						: msg('embed-dialog.title')}
+				</Dialog.Title>
+				<Dialog.CloseButton />
+			</Dialog.Header>
+			{embedDefinition ? (
+				<>
+					<Dialog.Body className="tlui-embed-dialog__enter">
+						<Input
+							className="tlui-embed-dialog__input"
+							label="embed-dialog.url"
+							placeholder="http://example.com"
+							autofocus
+							onValueChange={(value) => {
+								// Set the url that the user has typed into the input
+								setUrl(value)
+
+								// Set the embed info to either the embed info for the URL (if
+								// that embed info can be found and of a type that matches the
+								// user's selected definition type)
+								const embedInfo = getEmbedInfo(value)
+								setEmbedInfoForUrl(
+									embedInfo && embedInfo.definition.type === embedDefinition.type ? embedInfo : null
+								)
+
+								// We want to hide the error when the user enters text,
+								// and then show an error after a short delay if the user
+								// has not yet entered a valid URL.
+								setShowError(false)
+								clearTimeout(rShowErrorTimeout.current)
+								rShowErrorTimeout.current = setTimeout(() => setShowError(!embedInfo), 320)
+							}}
+						/>
+						{url === '' ? (
+							<div className="tlui-embed-dialog__instruction">
+								<span>{msg('embed-dialog.instruction')}</span>{' '}
+								{embedDefinition.instructionLink && (
+									<a
+										target="_blank"
+										rel="noopener noreferrer"
+										href={embedDefinition.instructionLink}
+										className="tlui-embed-dialog__instruction__link"
+									>
+										Learn more.
+										<Icon icon="external-link" small />
+									</a>
+								)}
+							</div>
+						) : (
+							<div className="tlui-embed-dialog__warning">
+								{showError ? msg('embed-dialog.invalid-url') : '\xa0'}
+							</div>
+						)}
+					</Dialog.Body>
+					<Dialog.Footer className="tlui-dialog__footer__actions">
+						<Button
+							type="normal"
+							onClick={() => {
+								setEmbedDefinition(null)
+								setEmbedInfoForUrl(null)
+								setUrl('')
+							}}
+							label="embed-dialog.back"
+						/>
+						<div className="tlui-embed__spacer" />
+						<Button type="normal" label="embed-dialog.cancel" onClick={onClose} />
+						<Button
+							type="primary"
+							disabled={!embedInfoForUrl}
+							label="embed-dialog.create"
+							onClick={() => {
+								if (!embedInfoForUrl) return
+
+								editor.putExternalContent({
+									type: 'embed',
+									url,
+									point: editor.getViewportPageCenter(),
+									embed: embedInfoForUrl.definition,
+								})
+
+								onClose()
+							}}
+						/>
+					</Dialog.Footer>
+				</>
+			) : (
+				<>
+					<Dialog.Body className="tlui-embed-dialog__list">
+						{EMBED_DEFINITIONS.map((def) => {
+							return (
+								<Button
+									type="menu"
+									key={def.type}
+									onClick={() => setEmbedDefinition(def)}
+									label={untranslated(def.title)}
+								>
+									<div
+										className="tlui-embed-dialog__item__image"
+										style={{ backgroundImage: `url(${assetUrls.embedIcons[def.type]})` }}
+									/>
+								</Button>
+							)
+						})}
+					</Dialog.Body>
+				</>
+			)}
+		</>
+	)
+})

package/src/lib/ui/components/FollowingIndicator.tsx

@@ -0,0 +1,16 @@
+import { useEditor, usePresence, useValue } from '@bigbluebutton/editor'
+
+export function FollowingIndicator() {
+	const editor = useEditor()
+	const followingUserId = useValue('follow', () => editor.getInstanceState().followingUserId, [
+		editor,
+	])
+	if (!followingUserId) return null
+	return <FollowingIndicatorInner userId={followingUserId} />
+}
+
+function FollowingIndicatorInner({ userId }: { userId: string }) {
+	const presence = usePresence(userId)
+	if (!presence) return null
+	return <div className="tlui-following-indicator" style={{ borderColor: presence.color }} />
+}

package/src/lib/ui/components/HTMLCanvas.tsx

@@ -0,0 +1,54 @@
+import { track, useEditor } from '@bigbluebutton/editor'
+import * as React from 'react'
+
+/** @internal */
+export const HTMLCanvas = track(function HTMLCanvas() {
+	const editor = useEditor()
+	const rCanvas = React.useRef<HTMLCanvasElement>(null)
+
+	const camera = editor.getCamera()
+	const shapes = editor.getCurrentPageShapes()
+	if (rCanvas.current) {
+		const cvs = rCanvas.current
+		const ctx = cvs.getContext('2d')!
+		ctx.resetTransform()
+		ctx.clearRect(0, 0, cvs.width, cvs.height)
+
+		const path = new Path2D()
+
+		ctx.translate(camera.x, camera.y)
+
+		for (const shape of shapes) {
+			const bounds = editor.getShapePageBounds(shape)!
+			path.rect(bounds.minX, bounds.minY, bounds.width, bounds.height)
+		}
+
+		ctx.fillStyle = '#cccccc'
+		ctx.fill(path)
+
+		// for (const shape of shapes) {
+		// 	ctx.save()
+		// 	const corners = editor.getPageCorners(shape)
+		// 	corners.forEach((corner) => dot(ctx, corner.x, corner.y, 'red'))
+		// 	ctx.restore()
+		// }
+	}
+
+	return (
+		<canvas
+			ref={rCanvas}
+			width={editor.getViewportScreenBounds().width}
+			height={editor.getViewportScreenBounds().height}
+			style={{ width: '100%', height: '100%' }}
+		/>
+	)
+})
+
+// function dot(ctx: CanvasRenderingContext2D, x: number, y: number, color = '#000') {
+// 	ctx.save()
+// 	ctx.beginPath()
+// 	ctx.ellipse(x, y, 4, 4, 0, 0, Math.PI * 2)
+// 	ctx.fillStyle = color
+// 	ctx.fill()
+// 	ctx.restore()
+// }

package/src/lib/ui/components/HelpMenu.tsx

@@ -0,0 +1,109 @@
+import { useContainer } from '@bigbluebutton/editor'
+import { Content, Portal, Root, Trigger } from '@radix-ui/react-dropdown-menu'
+import * as React from 'react'
+import { TLUiMenuChild } from '../hooks/menuHelpers'
+import { useHelpMenuSchema } from '../hooks/useHelpMenuSchema'
+import { useMenuIsOpen } from '../hooks/useMenuIsOpen'
+import { useReadonly } from '../hooks/useReadonly'
+import { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../hooks/useTranslation/useTranslation'
+import { TLUiIconType } from '../icon-types'
+import { LanguageMenu } from './LanguageMenu'
+import { Button } from './primitives/Button'
+import * as M from './primitives/DropdownMenu'
+
+interface HelpMenuLink {
+	label: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
+	icon: TLUiIconType | Exclude<string, TLUiIconType>
+	url: string
+}
+
+/** @internal */
+export interface HelpMenuProps {
+	links?: HelpMenuLink[]
+}
+
+/** @internal */
+export const HelpMenu = React.memo(function HelpMenu() {
+	const container = useContainer()
+	const msg = useTranslation()
+	const [isOpen, onOpenChange] = useMenuIsOpen('help menu')
+
+	return (
+		<div className="tlui-help-menu">
+			<Root dir="ltr" open={isOpen} onOpenChange={onOpenChange} modal={false}>
+				<Trigger asChild dir="ltr">
+					<Button
+						type="help"
+						className="tlui-button"
+						smallIcon
+						title={msg('help-menu.title')}
+						icon="question-mark"
+					/>
+				</Trigger>
+				<Portal container={container}>
+					<Content
+						className="tlui-menu"
+						side="top"
+						sideOffset={8}
+						align="end"
+						alignOffset={0}
+						collisionPadding={4}
+					>
+						<HelpMenuContent />
+					</Content>
+				</Portal>
+			</Root>
+		</div>
+	)
+})
+
+function HelpMenuContent() {
+	const menuSchema = useHelpMenuSchema()
+
+	const isReadonly = useReadonly()
+
+	function getHelpMenuItem(item: TLUiMenuChild) {
+		if (!item) return null
+		if (isReadonly && !item.readonlyOk) return null
+
+		switch (item.type) {
+			case 'custom': {
+				if (item.id === 'LANGUAGE_MENU') {
+					return <LanguageMenu key="item" />
+				}
+				break
+			}
+			case 'group': {
+				return (
+					<M.Group size="small" key={item.id}>
+						{item.children.map(getHelpMenuItem)}
+					</M.Group>
+				)
+			}
+			case 'submenu': {
+				return (
+					<M.Sub id={`help menu ${item.id}`} key={item.id}>
+						<M.SubTrigger label={item.label} />
+						<M.SubContent>{item.children.map(getHelpMenuItem)}</M.SubContent>
+					</M.Sub>
+				)
+			}
+			case 'item': {
+				const { id, kbd, label, onSelect, icon } = item.actionItem
+				return (
+					<M.Item
+						type="menu"
+						key={id}
+						kbd={kbd}
+						label={label}
+						onClick={() => onSelect('help-menu')}
+						iconLeft={icon}
+					/>
+				)
+			}
+		}
+	}
+
+	return <>{menuSchema.map(getHelpMenuItem)}</>
+}

package/src/lib/ui/components/KeyboardShortcutsDialog.tsx

@@ -0,0 +1,62 @@
+import { TLUiMenuChild } from '../hooks/menuHelpers'
+import { useKeyboardShortcutsSchema } from '../hooks/useKeyboardShortcutsSchema'
+import { useReadonly } from '../hooks/useReadonly'
+import { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../hooks/useTranslation/useTranslation'
+import * as Dialog from './primitives/Dialog'
+import { Kbd } from './primitives/Kbd'
+
+export const KeyboardShortcutsDialog = () => {
+	const msg = useTranslation()
+	const isReadonly = useReadonly()
+	const shortcutsItems = useKeyboardShortcutsSchema()
+
+	function getKeyboardShortcutItem(item: TLUiMenuChild) {
+		if (!item) return null
+		if (isReadonly && !item.readonlyOk) return null
+
+		switch (item.type) {
+			case 'group': {
+				return (
+					<div className="tlui-shortcuts-dialog__group" key={item.id}>
+						<h2 className="tlui-shortcuts-dialog__group__title">
+							{msg(item.id as TLUiTranslationKey)}
+						</h2>
+						<div className="tlui-shortcuts-dialog__group__content">
+							{item.children
+								.filter((item) => item && item.type === 'item' && item.actionItem.kbd)
+								.map(getKeyboardShortcutItem)}
+						</div>
+					</div>
+				)
+			}
+			case 'item': {
+				const { id, label, shortcutsLabel, kbd } = item.actionItem
+
+				return (
+					<div className="tlui-shortcuts-dialog__key-pair" key={id}>
+						<div className="tlui-shortcuts-dialog__key-pair__key">
+							{msg((shortcutsLabel ?? label)!)}
+						</div>
+						<div className="tlui-shortcuts-dialog__key-pair__value">
+							<Kbd>{kbd!}</Kbd>
+						</div>
+					</div>
+				)
+			}
+		}
+	}
+
+	return (
+		<>
+			<Dialog.Header className="tlui-shortcuts-dialog__header">
+				<Dialog.Title>{msg('shortcuts-dialog.title')}</Dialog.Title>
+				<Dialog.CloseButton />
+			</Dialog.Header>
+			<Dialog.Body className="tlui-shortcuts-dialog__body">
+				{shortcutsItems.map(getKeyboardShortcutItem)}
+			</Dialog.Body>
+			<div className="tlui-dialog__scrim" />
+		</>
+	)
+}

package/src/lib/ui/components/LanguageMenu.tsx

@@ -0,0 +1,38 @@
+import { useEditor } from '@bigbluebutton/editor'
+import { useCallback } from 'react'
+import { TLUiTranslation } from '../hooks/useTranslation/translations'
+import { useLanguages } from '../hooks/useTranslation/useLanguages'
+import * as D from './primitives/DropdownMenu'
+
+export function LanguageMenu() {
+	const editor = useEditor()
+	const { languages, currentLanguage } = useLanguages()
+
+	const handleLanguageSelect = useCallback(
+		(locale: TLUiTranslation['locale']) => editor.user.updateUserPreferences({ locale }),
+		[editor]
+	)
+
+	return (
+		<D.Sub id="help menu language">
+			<D.SubTrigger label="menu.language" data-direction="left" />
+			<D.SubContent sideOffset={-4}>
+				<D.Group>
+					{languages.map(({ locale, label }) => (
+						<D.RadioItem
+							key={locale}
+							title={locale}
+							checked={locale === currentLanguage}
+							onSelect={() => handleLanguageSelect(locale)}
+						>
+							<span className="tlui-button__label">{label}</span>
+						</D.RadioItem>
+					))}
+				</D.Group>
+				{/* <DropdownMenu.Group>
+					<Button label="translation-link" icon="external" />
+				</DropdownMenu.Group> */}
+			</D.SubContent>
+		</D.Sub>
+	)
+}