diff --git a/packages/editor/editor.css b/packages/editor/editor.css index 296047e99..23304a855 100644 --- a/packages/editor/editor.css +++ b/packages/editor/editor.css @@ -1087,13 +1087,15 @@ input, * One extra nuance is we don't use this behavior for: * - arrows which have weird geometry and just gets in the way. * - draw/line shapes, because it feels restrictive to have them be 'in the way' of clicking on a textfield + * - shapes that are not filled */ -.tl-canvas[data-iseditinganything='true'] +.tl-canvas:is([data-iseditinganything='true'], [data-isselectinganything='true']) .tl-shape:not( [data-shape-type='arrow'], [data-shape-type='draw'], [data-shape-type='line'], - [data-shape-type='highlight'] + [data-shape-type='highlight'], + [data-shape-is-filled='false'] ) { pointer-events: all; } diff --git a/packages/editor/src/lib/components/Shape.tsx b/packages/editor/src/lib/components/Shape.tsx index 909d51885..dbccbb2ab 100644 --- a/packages/editor/src/lib/components/Shape.tsx +++ b/packages/editor/src/lib/components/Shape.tsx @@ -142,6 +142,8 @@ export const Shape = memo(function Shape({ if (!shape) return null + const isFilledShape = 'fill' in shape.props && shape.props.fill !== 'none' + return ( <> {util.backgroundComponent && ( @@ -156,7 +158,13 @@ export const Shape = memo(function Shape({ )} -