diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx index e5d70f3e5..07128d9fc 100644 --- a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx @@ -358,6 +358,7 @@ const SwatchAction = observer(() => { title="Color Picker" color={color} opacity={shapes[0].props.opacity} + collisionRef={document.getElementById('main-content-container')} setOpacity={handleSetOpacity} setColor={handleSetColor} /> diff --git a/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx b/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx index e8da94bf9..666397549 100644 --- a/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx @@ -6,11 +6,12 @@ import { Color } from '@tldraw/core' interface ColorInputProps extends React.InputHTMLAttributes { color: string opacity: number + collisionRef: HTMLElement | null setColor: (value: string) => void setOpacity: (value: number) => void } -export function ColorInput({ color, opacity, setColor, setOpacity, ...rest }: ColorInputProps) { +export function ColorInput({ color, opacity, collisionRef, setColor, setOpacity, ...rest }: ColorInputProps) { const ref = React.useRef(null) function renderColor(color: string) { @@ -32,7 +33,7 @@ export function ColorInput({ color, opacity, setColor, setOpacity, ...rest }: Co - +
{Object.values(Color).map(value => (