diff --git a/README.md b/README.md index 965593ab2..8ac2cc67b 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ This package contains the [tldraw](https://tldraw.com) editor as a React compone ## Installation -Use your package manager of choice to install `@tldraw/core` and its peer dependencies. +Use your package manager of choice to install `@tldraw/tldraw` and its peer dependencies. ```bash yarn add @tldraw/tldraw @@ -154,7 +154,7 @@ const tldocument: TLDrawDocument = { } ``` -**Tip:** TLDraw is built [@tldraw/core](https://github.com/tldraw/core). The pages and pagestates in TLDraw are just objects containing `TLPage` and `TLPageState` objects from the core library. For more about these types, check out the [@tldraw/core](https://github.com/tldraw/core) documentation. +**Tip:** TLDraw is built on [@tldraw/core](https://github.com/tldraw/core). The pages and pageStates in TLDraw are just objects containing `TLPage` and `TLPageState` objects from the core library. For more about these types, check out the [@tldraw/core](https://github.com/tldraw/core) documentation. **Important:** In the `pages` object, each `TLPage` object must be keyed under its `id` property. Likewise, each `TLPageState` object must be keyed under its `id`. In addition, each `TLPageState` object must have an `id` that matches its corresponding page. diff --git a/packages/tldraw/src/TLDraw.tsx b/packages/tldraw/src/TLDraw.tsx index 79980019e..0daabb97f 100644 --- a/packages/tldraw/src/TLDraw.tsx +++ b/packages/tldraw/src/TLDraw.tsx @@ -394,10 +394,21 @@ const InnerTLDraw = React.memo(function InnerTLDraw({ state.changePage(currentPageId) }, [currentPageId, state]) + // When the context menu is blurred, close the menu by sending pointer events + // to the context menu's ref. This is a hack around the fact that certain shapes + // stop event propagation, which causes the menu to stay open even when blurred. + const handleContextMenuBlur = React.useCallback((e) => { + const elm = rWrapper.current + if (!elm) return + if (!elm.contains(e.relatedTarget)) return + elm.dispatchEvent(new Event('pointerdown', { bubbles: true })) + elm.dispatchEvent(new Event('pointerup', { bubbles: true })) + }, []) + return ( - + { test('mounts component without crashing', () => { renderWithContext( - +
Hello
) diff --git a/packages/tldraw/src/components/ContextMenu/ContextMenu.tsx b/packages/tldraw/src/components/ContextMenu/ContextMenu.tsx index acea35bb4..e4e7b1fc7 100644 --- a/packages/tldraw/src/components/ContextMenu/ContextMenu.tsx +++ b/packages/tldraw/src/components/ContextMenu/ContextMenu.tsx @@ -44,10 +44,11 @@ const hasGroupSelectedSelector = (s: TLDrawSnapshot) => { const preventDefault = (e: Event) => e.stopPropagation() interface ContextMenuProps { + onBlur: React.FocusEventHandler children: React.ReactNode } -export const ContextMenu = ({ children }: ContextMenuProps): JSX.Element => { +export const ContextMenu = ({ onBlur, children }: ContextMenuProps): JSX.Element => { const { state, useSelector } = useTLDrawContext() const hasSelection = useSelector(has1SelectedIdsSelector) const hasTwoOrMore = useSelector(has2SelectedIdsSelector) @@ -120,7 +121,14 @@ export const ContextMenu = ({ children }: ContextMenuProps): JSX.Element => { return ( {children} - + {hasSelection ? ( <> diff --git a/packages/tldraw/src/components/Kbd/Kbd.tsx b/packages/tldraw/src/components/Kbd/Kbd.tsx index 63e2978ee..8ddb8dd76 100644 --- a/packages/tldraw/src/components/Kbd/Kbd.tsx +++ b/packages/tldraw/src/components/Kbd/Kbd.tsx @@ -51,6 +51,7 @@ export const StyledKbd = styled('kbd', { variant: { tooltip: { '& > span': { + color: '$tooltipText', background: '$overlayContrast', boxShadow: '$key', width: '20px', diff --git a/packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx b/packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx index bd2d673bf..4d48bf8a9 100644 --- a/packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx +++ b/packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx @@ -51,7 +51,7 @@ export const PrimaryTools = React.memo(function PrimaryTools(): JSX.Element { return (