tldraw
Version:
A tiny little drawing editor.
8 lines (7 loc) • 1.83 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx"],
"sourcesContent": ["import {\n\tstopEventPropagation,\n\tusePassThroughMouseOverEvents,\n\tusePassThroughWheelEvents,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { RefObject } from 'react'\nimport { TldrawUiToolbar } from './TldrawUiToolbar'\n\n/** @public */\nexport interface TLUiContextualToolbarProps {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tlabel: string\n}\n\n/**\n * A generic floating toolbar that can be used for things\n * like rich text editing, image toolbars, etc.\n *\n * @public @react\n */\nexport const TldrawUiContextualToolbar = React.forwardRef<\n\tHTMLDivElement,\n\tTLUiContextualToolbarProps\n>(function TldrawUiContextualToolbar({ children, className, label }, toolbarRef) {\n\tusePassThroughWheelEvents(toolbarRef as RefObject<HTMLDivElement>)\n\tusePassThroughMouseOverEvents(toolbarRef as RefObject<HTMLDivElement>)\n\n\treturn (\n\t\t<div\n\t\t\tref={toolbarRef}\n\t\t\tdata-testid=\"contextual-toolbar\"\n\t\t\tclassName={classNames('tlui-contextual-toolbar', className)}\n\t\t\tonPointerDown={stopEventPropagation}\n\t\t>\n\t\t\t<TldrawUiToolbar className=\"tlui-menu tlui-buttons__horizontal\" label={label}>\n\t\t\t\t{children}\n\t\t\t</TldrawUiToolbar>\n\t\t</div>\n\t)\n})\n"],
"mappings": "AAoCG;AApCH;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,gBAAgB;AACvB,OAAO,WAA0B;AACjC,SAAS,uBAAuB;AAezB,MAAM,4BAA4B,MAAM,WAG7C,SAASA,2BAA0B,EAAE,UAAU,WAAW,MAAM,GAAG,YAAY;AAChF,4BAA0B,UAAuC;AACjE,gCAA8B,UAAuC;AAErE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,WAAW,2BAA2B,SAAS;AAAA,MAC1D,eAAe;AAAA,MAEf,8BAAC,mBAAgB,WAAU,sCAAqC,OAC9D,UACF;AAAA;AAAA,EACD;AAEF,CAAC;",
"names": ["TldrawUiContextualToolbar"]
}