tldraw/packages/ui/api-report.md

701 lines
30 KiB
Markdown
Raw Normal View History

2023-04-25 11:01:25 +00:00
## API Report File for "@tldraw/ui"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
/// <reference types="react" />
import { Editor } from '@tldraw/editor';
2023-04-25 11:01:25 +00:00
import { EMBED_DEFINITIONS } from '@tldraw/editor';
import { LANGUAGES } from '@tldraw/editor';
2023-04-25 11:01:25 +00:00
import { NamedExoticComponent } from 'react';
import { default as React_2 } from 'react';
import * as React_3 from 'react';
import { ReactNode } from 'react';
import { RecursivePartial } from '@tldraw/utils';
2023-04-25 11:01:25 +00:00
import { TLCopyType } from '@tldraw/editor';
import { TLEditorAssetUrls } from '@tldraw/editor';
2023-04-25 11:01:25 +00:00
import { TLExportType } from '@tldraw/editor';
import { TLLanguage } from '@tldraw/editor';
2023-04-25 11:01:25 +00:00
import { TLShapeId } from '@tldraw/editor';
import { VecLike } from '@tldraw/primitives';
// @internal (undocumented)
2023-04-25 11:01:25 +00:00
export function AssetUrlsProvider({ assetUrls, children, }: {
assetUrls: TLUiAssetUrls;
2023-04-25 11:01:25 +00:00
children: React.ReactNode;
}): JSX.Element;
// @public (undocumented)
function Body_2({ className, children, style, }: {
className?: string;
children: any;
style?: React.CSSProperties;
}): JSX.Element;
// @public (undocumented)
export function BreakPointProvider({ children }: {
children: any;
}): JSX.Element;
// @public (undocumented)
export const Button: React_3.ForwardRefExoticComponent<TLUiButtonProps & React_3.RefAttributes<HTMLButtonElement>>;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
function CheckboxItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element;
// @public (undocumented)
function CloseButton(): JSX.Element;
// @public (undocumented)
export function compactMenuItems<T>(arr: T[]): Exclude<T, false | null | undefined>[];
// @public (undocumented)
function Content({ side, align, sideOffset, alignOffset, children, }: {
children: any;
alignOffset?: number;
sideOffset?: number;
align?: 'center' | 'end' | 'start';
side?: 'bottom' | 'left' | 'right' | 'top';
}): JSX.Element;
// @public (undocumented)
export const ContextMenu: ({ children }: {
children: any;
}) => JSX.Element;
declare namespace Dialog {
export {
Header,
Title,
CloseButton,
Body_2 as Body,
Footer
}
}
export { Dialog }
declare namespace DropdownMenu {
export {
Root,
Trigger,
Content,
Sub,
SubTrigger,
SubContent,
Group,
Indicator,
Item,
CheckboxItem,
RadioItem,
DropdownMenuItemProps,
DropdownMenuCheckboxItemProps
}
}
export { DropdownMenu }
// @public (undocumented)
interface DropdownMenuCheckboxItemProps {
// (undocumented)
checked?: boolean;
// (undocumented)
children: any;
// (undocumented)
disabled?: boolean;
// (undocumented)
onSelect?: (e: Event) => void;
// (undocumented)
title: string;
}
// @public (undocumented)
interface DropdownMenuItemProps extends TLUiButtonProps {
2023-04-25 11:01:25 +00:00
// (undocumented)
noClose?: boolean;
}
// @public (undocumented)
export function findMenuItem(menu: TLUiMenuSchema, path: string[]): TLUiMenuChild;
// @public (undocumented)
function Footer({ className, children }: {
className?: string;
children: any;
}): JSX.Element;
// @public (undocumented)
function Group({ children, size, }: {
children: any;
size?: 'medium' | 'small' | 'tiny' | 'wide';
}): JSX.Element;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
function Header({ className, children }: {
className?: string;
children: any;
}): JSX.Element;
// @public (undocumented)
export const Icon: NamedExoticComponent<TLUiIconProps>;
// @public (undocumented)
function Indicator(): JSX.Element;
// @public (undocumented)
export const Input: React_3.ForwardRefExoticComponent<TLUiInputProps & React_3.RefAttributes<HTMLInputElement>>;
// @public (undocumented)
function Item({ noClose, ...props }: DropdownMenuItemProps): JSX.Element;
// @public (undocumented)
export function menuCustom(id: string, opts?: Partial<{
readonlyOk: boolean;
disabled: boolean;
}>): {
id: string;
type: "custom";
disabled: boolean;
readonlyOk: boolean;
};
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function menuGroup(id: string, ...children: (false | null | TLUiMenuChild)[]): null | TLUiMenuGroup;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function menuItem(actionItem: TLUiActionItem | TLUiToolItem, opts?: Partial<{
checked: boolean;
disabled: boolean;
}>): TLUiMenuItem;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function menuSubmenu(id: string, label: TLUiTranslationKey, ...children: (false | null | TLUiMenuChild)[]): null | TLUiSubMenu;
// @public (undocumented)
function RadioItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element;
// @public (undocumented)
function Root({ id, children, modal, }: {
id: string;
2023-04-25 11:01:25 +00:00
children: any;
modal?: boolean;
2023-04-25 11:01:25 +00:00
}): JSX.Element;
// @internal (undocumented)
export function setDefaultUiAssetUrls(urls: TLUiAssetUrls): void;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
function Sub({ id, children }: {
id: string;
children: any;
}): JSX.Element;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
function SubContent({ alignOffset, sideOffset, children, }: {
alignOffset?: number;
sideOffset?: number;
2023-04-25 11:01:25 +00:00
children: any;
}): JSX.Element;
// @public (undocumented)
function SubTrigger({ label, 'data-testid': testId, 'data-direction': dataDirection, }: {
label: TLUiTranslationKey;
'data-testid'?: string;
'data-direction'?: 'left' | 'right';
}): JSX.Element;
// @public (undocumented)
function Title({ className, children }: {
2023-04-25 11:01:25 +00:00
className?: string;
children: any;
}): JSX.Element;
// @public (undocumented)
export const TldrawUi: React_2.NamedExoticComponent<{
children?: ReactNode;
hideUi?: boolean | undefined;
shareZone?: ReactNode;
topZone?: ReactNode;
renderDebugMenuItems?: (() => React_2.ReactNode) | undefined;
} & TldrawUiContextProviderProps>;
// @public (undocumented)
export function TldrawUiContextProvider({ overrides, assetUrls, onUiEvent, children, }: TldrawUiContextProviderProps): JSX.Element;
// @public
export interface TldrawUiContextProviderProps {
// (undocumented)
assetUrls?: RecursivePartial<TLUiAssetUrls>;
// (undocumented)
children?: any;
// (undocumented)
onUiEvent?: TLUiEventHandler;
// (undocumented)
overrides?: TLUiOverrides | TLUiOverrides[];
}
// @public
export type TldrawUiProps = {
children?: ReactNode;
hideUi?: boolean;
shareZone?: ReactNode;
topZone?: ReactNode;
renderDebugMenuItems?: () => React_2.ReactNode;
} & TldrawUiContextProviderProps;
// @public (undocumented)
export interface TLUiActionItem {
// (undocumented)
checkbox?: boolean;
// (undocumented)
contextMenuLabel?: TLUiTranslationKey;
// (undocumented)
icon?: TLUiIconType;
// (undocumented)
id: string;
// (undocumented)
kbd?: string;
// (undocumented)
label?: TLUiTranslationKey;
// (undocumented)
menuLabel?: TLUiTranslationKey;
// (undocumented)
onSelect: (source: TLUiEventSource) => Promise<void> | void;
// (undocumented)
readonlyOk: boolean;
// (undocumented)
shortcutsLabel?: TLUiTranslationKey;
// (undocumented)
title?: string;
}
// @public (undocumented)
export type TLUiActionsContextType = Record<string, TLUiActionItem>;
// @public (undocumented)
export type TLUiActionsMenuSchemaContextType = TLUiMenuSchema;
// @public (undocumented)
export interface TLUiButtonProps extends React_3.HTMLAttributes<HTMLButtonElement> {
// (undocumented)
disabled?: boolean;
// (undocumented)
icon?: TLUiIconType;
// (undocumented)
iconLeft?: TLUiIconType;
// (undocumented)
invertIcon?: boolean;
// (undocumented)
isChecked?: boolean;
// (undocumented)
kbd?: string;
// (undocumented)
label?: TLUiTranslationKey;
// (undocumented)
loading?: boolean;
// (undocumented)
smallIcon?: boolean;
// (undocumented)
spinner?: boolean;
// (undocumented)
type?: 'danger' | 'normal' | 'primary';
}
// @public (undocumented)
export interface TLUiContextMenuProps {
// (undocumented)
children: any;
}
// @public (undocumented)
export type TLUiContextTTLUiMenuSchemaContextType = TLUiMenuSchema;
// @public (undocumented)
export type TLUiCustomMenuItem = {
id: string;
type: 'custom';
disabled: boolean;
readonlyOk: boolean;
};
// @public (undocumented)
export interface TLUiDialog {
// (undocumented)
component: (props: TLUiDialogProps) => any;
// (undocumented)
id: string;
// (undocumented)
onClose?: () => void;
}
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export interface TLUiDialogProps {
2023-04-25 11:01:25 +00:00
// (undocumented)
onClose: () => void;
2023-04-25 11:01:25 +00:00
}
// @public (undocumented)
export type TLUiDialogsContextType = {
addDialog: (dialog: Omit<TLUiDialog, 'id'> & {
id?: string;
}) => string;
removeDialog: (id: string) => string;
updateDialog: (id: string, newDialogData: Partial<TLUiDialog>) => string;
clearDialogs: () => void;
dialogs: TLUiDialog[];
};
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLUiEventContextType = TLUiEventHandler<keyof TLUiEventMap>;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLUiEventHandler<T extends keyof TLUiEventMap = keyof TLUiEventMap> = (name: T, data: Join<{
source: TLUiEventSource;
}, TLUiEventMap[T]>) => void;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLUiEventSource = 'actions-menu' | 'context-menu' | 'debug-panel' | 'dialog' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'kbd' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'share-menu' | 'toolbar' | 'unknown' | 'zoom-menu';
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLUiHelpMenuSchemaContextType = TLUiMenuSchema;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export interface TLUiIconProps extends React.HTMLProps<HTMLDivElement> {
2023-04-25 11:01:25 +00:00
// (undocumented)
children?: undefined;
// (undocumented)
color?: string;
// (undocumented)
crossOrigin?: 'anonymous' | 'use-credentials';
// (undocumented)
icon: TLUiIconType;
// (undocumented)
invertIcon?: boolean;
// (undocumented)
small?: boolean;
}
// @public (undocumented)
export type TLUiIconType = 'align-bottom-center' | 'align-bottom-left' | 'align-bottom-right' | 'align-bottom' | 'align-center-center' | 'align-center-horizontal' | 'align-center-left' | 'align-center-right' | 'align-center-vertical' | 'align-left' | 'align-right' | 'align-top-center' | 'align-top-left' | 'align-top-right' | 'align-top' | 'arrow-left' | 'arrowhead-arrow' | 'arrowhead-bar' | 'arrowhead-diamond' | 'arrowhead-dot' | 'arrowhead-none' | 'arrowhead-square' | 'arrowhead-triangle-inverted' | 'arrowhead-triangle' | 'aspect-ratio' | 'avatar' | 'blob' | 'bring-forward' | 'bring-to-front' | 'check' | 'checkbox-checked' | 'checkbox-empty' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-ne' | 'chevrons-sw' | 'clipboard-copied' | 'clipboard-copy' | 'code' | 'collab' | 'color' | 'comment' | 'cross-2' | 'cross' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'drag-handle-dots' | 'duplicate' | 'edit' | 'external-link' | 'file' | 'fill-none' | 'fill-pattern' | 'fill-semi' | 'fill-solid' | 'follow' | 'following' | 'font-draw' | 'font-mono' | 'font-sans' | 'font-serif' | 'geo-arrow-down' | 'geo-arrow-left' | 'geo-arrow-right' | 'geo-arrow-up' | 'geo-check-box' | 'geo-diamond' | 'geo-ellipse' | 'geo-hexagon' | 'geo-octagon' | 'geo-oval' | 'geo-pentagon' | 'geo-rectangle' | 'geo-rhombus-2' | 'geo-rhombus' | 'geo-star' | 'geo-trapezoid' | 'geo-triangle' | 'geo-x-box' | 'github' | 'group' | 'hidden' | 'image' | 'info-circle' | 'leading' | 'link' | 'lock-small' | 'lock' | 'menu' | 'minus' | 'mixed' | 'pack' | 'page' | 'plus' | 'question-mark-circle' | 'question-mark' | 'redo' | 'reset-zoom' | 'rotate-ccw' | 'rotate-cw' | 'ruler' | 'search' | 'send-backward' | 'send-to-back' | 'settings-horizontal' | 'settings-vertical-1' | 'settings-vertical' | 'share-1' | 'share-2' | 'size-extra-large' | 'size-large' | 'size-medium' | 'size-small' | 'spline-cubic' | 'spline-line' | 'stack-horizontal' | 'stack-vertical' | 'stretch-horizontal' | 'stretch-vertical' | 'text-align-center' | 'text-align-justify' | 'text-align-left' | 'text-align-right' | 'tool-arrow' | 'tool-embed' | 'tool-eraser' | 'tool-frame' | 'tool-hand' | 'tool-highlight' | 'tool-laser' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-text' | 'trash' | 'triangle-down' | 'triangle-up' | 'twitter' | 'undo' | 'ungroup' | 'unlock-small' | 'unlock' | 'vertical-align-center' | 'vertical-align-end' | 'vertical-align-start' | 'visible' | 'warning-triangle' | 'zoom-in' | 'zoom-out';
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export interface TLUiInputProps {
2023-04-25 11:01:25 +00:00
// (undocumented)
autofocus?: boolean;
// (undocumented)
autoselect?: boolean;
// (undocumented)
children?: any;
// (undocumented)
className?: string;
// (undocumented)
defaultValue?: string;
// (undocumented)
disabled?: boolean;
// (undocumented)
icon?: TLUiIconType;
// (undocumented)
iconLeft?: TLUiIconType;
// (undocumented)
label?: TLUiTranslationKey;
2023-04-25 11:01:25 +00:00
// (undocumented)
Add support for project names (#1340) This PR adds some things that we need for the Project Name feature on tldraw.com. It should be reviewed alongside https://github.com/tldraw/tldraw-lite/pull/1814 ## Name Property This PR adds a `name` property to `TLDocument`. We use this to store a project's name. <img width="454" alt="Screenshot 2023-05-09 at 15 47 26" src="https://github.com/tldraw/tldraw/assets/15892272/f3be438e-aa0f-4dec-8f51-8dfd9f9d0ced"> ## Top Zone This PR adds a `topZone` area of the UI that we can add stuff to, similar to how `shareZone` works. It also adds an example to show where the `topZone` and `shareZone` are: <img width="1511" alt="Screenshot 2023-05-12 at 10 57 40" src="https://github.com/tldraw/tldraw/assets/15892272/f5e1cd33-017e-4aaf-bfee-4d85119e2974"> ## Breakpoints This PR change's the UI's breakpoints a little bit. It moves the action bar to the bottom a little bit earlier. (This gives us more space at the top for the project name). ![2023-05-12 at 11 08 26 - Fuchsia Bison](https://github.com/tldraw/tldraw/assets/15892272/34563cea-b1d1-47be-ac5e-5650ee0ba02d) ![2023-05-12 at 13 45 04 - Tan Mole](https://github.com/tldraw/tldraw/assets/15892272/ab190bd3-51d4-4a8b-88de-c72ab14bcba6) ## Input Blur This PR adds an `onBlur` parameter to `Input`. This was needed because 'clicking off' the input wasn't firing `onComplete` or `onCancel`. <img width="620" alt="Screenshot 2023-05-09 at 16 12 58" src="https://github.com/tldraw/tldraw/assets/15892272/3b28da74-0a74-4063-8053-e59e47027caf"> ## Create Project Name This PR adds an internal `createProjectName` property to `TldrawEditorConfig`. Similar to `derivePresenceState`, you can pass a custom function to it. It lets you control what gets used as the default project name. We use it to set different names in our local projects compared to shared projects. In the future, when we add more advanced project features, we could handle this better within the UI. <img width="454" alt="Screenshot 2023-05-09 at 15 47 26" src="https://github.com/tldraw/tldraw/assets/15892272/da9a4699-ac32-40d9-a97c-6c682acfac41"> ### Test Plan 1. Gradually reduce the width of the browser window. 2. Check that the actions menu jumps to the bottom before the style panel moves to the bottom. --- 1. In the examples app, open the `/zones` example. 2. Check that there's a 'top zone' at the top. - [ ] Unit Tests - [ ] Webdriver tests ### Release Note - [dev] Added a `topZone` area where you can put stuff. - [dev] Added a `name` property to `TLDocument` - and `app` methods for it. - [dev] Added an internal `createProjectName` config property for controlling the default project name. - [dev] Added an `onBlur` parameter to `Input`. - Moved the actions bar to the bottom on medium-sized screens. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 18:46:26 +00:00
onBlur?: (value: string) => void;
// (undocumented)
2023-04-25 11:01:25 +00:00
onCancel?: (value: string) => void;
// (undocumented)
onComplete?: (value: string) => void;
// (undocumented)
onValueChange?: (value: string) => void;
// (undocumented)
placeholder?: string;
shouldManuallyMaintainScrollPositionWhenFocused?: boolean;
// (undocumented)
value?: string;
}
// @public (undocumented)
export type TLUiKeyboardShortcutsSchemaContextType = TLUiMenuSchema;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLUiKeyboardShortcutsSchemaProviderProps = {
overrides?: (editor: Editor, schema: TLUiKeyboardShortcutsSchemaContextType, more: {
tools: TLUiToolsContextType;
actions: TLUiActionsContextType;
}) => TLUiKeyboardShortcutsSchemaContextType;
2023-04-25 11:01:25 +00:00
children: any;
};
// @public (undocumented)
export type TLUiMenuChild = TLUiCustomMenuItem | TLUiMenuGroup | TLUiMenuItem | TLUiSubMenu;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLUiMenuGroup = {
2023-04-25 11:01:25 +00:00
id: string;
type: 'group';
checkbox: boolean;
disabled: boolean;
readonlyOk: boolean;
children: TLUiMenuChild[];
2023-04-25 11:01:25 +00:00
};
// @public (undocumented)
export type TLUiMenuItem = {
2023-04-25 11:01:25 +00:00
id: string;
type: 'item';
readonlyOk: boolean;
actionItem: TLUiActionItem;
2023-04-25 11:01:25 +00:00
disabled: boolean;
checked: boolean;
};
// @public (undocumented)
export type TLUiMenuSchema = (TLUiCustomMenuItem | TLUiMenuGroup | TLUiMenuItem)[];
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLUiMenuSchemaContextType = TLUiMenuSchema;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLUiMenuSchemaProviderProps = {
overrides?: (editor: Editor, schema: TLUiMenuSchemaContextType, helpers: {
2023-04-25 11:01:25 +00:00
actions: ReturnType<typeof useActions>;
noneSelected: boolean;
oneSelected: boolean;
twoSelected: boolean;
threeSelected: boolean;
}) => TLUiMenuSchemaContextType;
2023-04-25 11:01:25 +00:00
children: any;
};
// @public (undocumented)
export interface TLUiOverrides {
2023-04-25 11:01:25 +00:00
// (undocumented)
actions?: WithDefaultHelpers<NonNullable<ActionsProviderProps['overrides']>>;
// (undocumented)
actionsMenu?: WithDefaultHelpers<NonNullable<ActionsMenuSchemaProviderProps['overrides']>>;
// (undocumented)
contextMenu?: WithDefaultHelpers<NonNullable<TLUiContextMenuSchemaProviderProps['overrides']>>;
2023-04-25 11:01:25 +00:00
// (undocumented)
helpMenu?: WithDefaultHelpers<NonNullable<TLUiHelpMenuSchemaProviderProps['overrides']>>;
2023-04-25 11:01:25 +00:00
// (undocumented)
keyboardShortcutsMenu?: WithDefaultHelpers<NonNullable<TLUiKeyboardShortcutsSchemaProviderProps['overrides']>>;
2023-04-25 11:01:25 +00:00
// (undocumented)
menu?: WithDefaultHelpers<NonNullable<TLUiMenuSchemaProviderProps['overrides']>>;
2023-04-25 11:01:25 +00:00
// (undocumented)
toolbar?: WithDefaultHelpers<NonNullable<TLUiToolbarSchemaProviderProps['overrides']>>;
2023-04-25 11:01:25 +00:00
// (undocumented)
tools?: WithDefaultHelpers<NonNullable<TLUiToolsProviderProps['overrides']>>;
2023-04-25 11:01:25 +00:00
// (undocumented)
translations?: TLUiTranslationProviderProps['overrides'];
2023-04-25 11:01:25 +00:00
}
[refactor] User-facing APIs (#1478) This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests
2023-06-01 15:47:34 +00:00
// @public (undocumented)
export type TLUiSubMenu = {
id: string;
type: 'submenu';
label: TLUiTranslationKey;
disabled: boolean;
readonlyOk: boolean;
children: TLUiMenuChild[];
2023-04-25 11:01:25 +00:00
};
// @public (undocumented)
export interface TLUiToast {
2023-04-25 11:01:25 +00:00
// (undocumented)
actions?: TLUiToastAction[];
2023-04-25 11:01:25 +00:00
// (undocumented)
closeLabel?: string;
// (undocumented)
description?: string;
// (undocumented)
icon?: string;
// (undocumented)
id: string;
// (undocumented)
keepOpen?: boolean;
// (undocumented)
title?: string;
}
// @public (undocumented)
export interface TLUiToastAction {
2023-04-25 11:01:25 +00:00
// (undocumented)
label: string;
// (undocumented)
onClick: () => void;
// (undocumented)
type: 'primary' | 'secondary' | 'warn';
}
// @public (undocumented)
export type TLUiToastsContextType = {
addToast: (toast: Omit<TLUiToast, 'id'> & {
2023-04-25 11:01:25 +00:00
id?: string;
}) => string;
removeToast: (id: TLUiToast['id']) => string;
2023-04-25 11:01:25 +00:00
clearToasts: () => void;
toasts: TLUiToast[];
2023-04-25 11:01:25 +00:00
};
// @public (undocumented)
export type TLUiToolbarItem = {
2023-04-25 11:01:25 +00:00
id: string;
type: 'item';
readonlyOk: boolean;
toolItem: TLUiToolItem;
2023-04-25 11:01:25 +00:00
};
// @public (undocumented)
export type TLUiToolbarSchemaContextType = TLUiToolbarItem[];
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export interface TLUiToolItem {
2023-04-25 11:01:25 +00:00
// (undocumented)
icon: TLUiIconType;
// (undocumented)
id: string;
// (undocumented)
kbd?: string;
// (undocumented)
label: TLUiTranslationKey;
2023-04-25 11:01:25 +00:00
// (undocumented)
meta?: {
[key: string]: any;
};
// (undocumented)
onSelect: (source: TLUiEventSource) => void;
2023-04-25 11:01:25 +00:00
// (undocumented)
readonlyOk: boolean;
// (undocumented)
shortcutsLabel?: TLUiTranslationKey;
2023-04-25 11:01:25 +00:00
}
// @public (undocumented)
export type TLUiToolsContextType = Record<string, TLUiToolItem>;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLUiToolsProviderProps = {
overrides?: (editor: Editor, tools: TLUiToolsContextType, helpers: {
2023-04-25 11:01:25 +00:00
insertMedia: () => void;
}) => TLUiToolsContextType;
2023-04-25 11:01:25 +00:00
children: any;
};
// @public (undocumented)
export type TLUiTranslation = {
readonly locale: string;
readonly label: string;
readonly messages: Record<TLUiTranslationKey, string>;
};
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export type TLUiTranslationContextType = TLUiTranslation;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
(1/2) Cursor Chat - Presence (#1487) This PR adds support for seeing **another user**'s chat messages. It's part 1 of two PRs relating to Cursor Chat. And it's needed for the much bigger part 2: https://github.com/tldraw/brivate/pull/1981 # Presence You can see another person's chat messages! ![2023-06-02 at 17 42 33 - Blush Capybara](https://github.com/tldraw/tldraw/assets/15892272/8f3efb5f-9c05-459c-aa7e-24842be75e58) If they have a name, it gets popped on top. ![2023-06-02 at 17 45 34 - Sapphire Meerkat](https://github.com/tldraw/tldraw/assets/15892272/749bd924-c1f5-419b-a028-1fafe1b61292) That's it! With this PR, there's no way of actually *typing* your chat messages. That comes with the [next one](https://github.com/tldraw/brivate/pull/1981)! # Admin ### To-do - [x] Store chat message - [x] Allow overflowing chat - [x] Presence for chat message - [x] Display chat message to others ### Change Type - [x] `minor` — New Feature ### Test Plan To test this, I recommend checking out both `lu/cursor-chat` branches, and opening two browser sessions in the same shared project. 1. In one session, type some cursor chat by pressing the Enter key while on the canvas (and typing). 2. On the other session, check that you can see the chat message appear. 3. Repeat this while being both named, and unnamed. I recommend just focusing on the visible presense in this PR. The [other PR](https://github.com/tldraw/brivate/pull/1981) is where we can focus about how we _input_ the cursor chat. ### Release Notes - [dev] Added support for cursor chat presence. --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-15 15:10:08 +00:00
export type TLUiTranslationKey = 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-json.short' | 'action.copy-as-json' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-as-json.short' | 'action.export-as-json' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.pack' | 'action.paste' | 'action.print' | 'action.redo' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-lock' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.undo' | 'action.ungroup' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'debug-panel.more' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'edit-pages-dialog.move-down' | 'edit-pages-di
// @public (undocumented)
export function toolbarItem(toolItem: TLUiToolItem): TLUiToolbarItem;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
function Trigger({ children, 'data-testid': testId, }: {
2023-04-25 11:01:25 +00:00
children: any;
'data-testid'?: string;
2023-04-25 11:01:25 +00:00
}): JSX.Element;
// @public (undocumented)
export function useActions(): TLUiActionsContextType;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function useActionsMenuSchema(): TLUiMenuSchema;
2023-04-25 11:01:25 +00:00
// @internal (undocumented)
export function useAssetUrls(): TLUiAssetUrls;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function useBreakpoint(): number;
// @public (undocumented)
export function useCanRedo(): boolean;
// @public (undocumented)
export function useCanUndo(): boolean;
// @public (undocumented)
export function useContextMenuSchema(): TLUiMenuSchema;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function useCopyAs(): (ids?: TLShapeId[], format?: TLCopyType) => void;
// @public (undocumented)
export function useDefaultHelpers(): {
addToast: (toast: Omit<TLUiToast, "id"> & {
2023-04-25 11:01:25 +00:00
id?: string | undefined;
}) => string;
removeToast: (id: string) => string;
clearToasts: () => void;
addDialog: (dialog: Omit<TLUiDialog, "id"> & {
2023-04-25 11:01:25 +00:00
id?: string | undefined;
}) => string;
clearDialogs: () => void;
removeDialog: (id: string) => string;
updateDialog: (id: string, newDialogData: Partial<TLUiDialog>) => string;
msg: (id: TLUiTranslationKey) => string;
2023-04-25 11:01:25 +00:00
isMobile: boolean;
};
// @public (undocumented)
export function useDialogs(): TLUiDialogsContextType;
// @public (undocumented)
export function useEvents(): TLUiEventContextType;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function useExportAs(): (ids?: TLShapeId[], format?: TLExportType) => Promise<void>;
// @public (undocumented)
export function useHelpMenuSchema(): TLUiMenuSchema;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function useKeyboardShortcuts(): void;
// @public (undocumented)
export function useKeyboardShortcutsSchema(): TLUiKeyboardShortcutsSchemaContextType;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function useLocalStorageState<T = any>(key: string, defaultValue: T): readonly [T, (setter: ((value: T) => T) | T) => void];
// @public (undocumented)
export function useMenuClipboardEvents(): {
copy: (source: TLUiEventSource) => void;
cut: (source: TLUiEventSource) => void;
paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike) => Promise<void>;
2023-04-25 11:01:25 +00:00
};
// @public (undocumented)
export function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void): readonly [boolean, (isOpen: boolean) => void];
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function useMenuSchema(): TLUiMenuSchema;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function useNativeClipboardEvents(): void;
// @public (undocumented)
export function useReadonly(): boolean;
// @public (undocumented)
export function useToasts(): TLUiToastsContextType;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function useToolbarSchema(): TLUiToolbarSchemaContextType;
2023-04-25 11:01:25 +00:00
// @public (undocumented)
export function useTools(): TLUiToolsContextType;
2023-04-25 11:01:25 +00:00
// @public
export function useTranslation(): (id: TLUiTranslationKey) => string;
2023-04-25 11:01:25 +00:00
// (No @packageDocumentation comment for this package)
```