External dialog

Open dialogs over the whole page instead of inside the Tldraw container.

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
// [1]
import './external-dialog.css'

export default function ExternalDialog() {
	return (
		<div style={{ margin: 32, width: 600, height: 400 }}>
			<Tldraw />
		</div>
	)
}

/*
[1]
By default the dialog overlay and positioner are `position: absolute` and fill the
`Tldraw` container. Switching them to `position: fixed` makes them fill the browser
window instead, so a dialog can be centered over the whole page even when the editor
is a small inset. See external-dialog.css.
*/

The tldraw UI renders its dialogs (insert embed, edit link, keyboard shortcuts) inside the Tldraw component, positioned absolutely within it. When the editor is a small inset in a larger page, that can leave dialogs cramped or clipped.

This example overrides the .tlui-dialog__overlay and .tlui-dialog__positioner styles to use position: fixed, so dialogs are positioned relative to the browser window instead. Try it: open the "Insert embed" dialog from the menu, or press Cmd + I / Ctrl + I, and the dialog will center over the whole page rather than the 600 × 400 editor.

Is this page helpful?
Prev
Multiple editors
Next
External UI (using context)