fix: context bar action factory

tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx

@@ -90,8 +90,10 @@ export const withFillShapes = Object.entries(shapeMapping)
   })
   .map(([key]) => key) as ShapeType[]
 
-function filterShapeByAction<S extends Shape>(shapes: Shape[], type: ContextBarActionType): S[] {
-  return shapes.filter(shape => shapeMapping[shape.props.type]?.includes(type)) as S[]
+function filterShapeByAction<S extends Shape>(type: ContextBarActionType) {
+  const app = useApp<Shape>()
+  const unlockedSelectedShapes = app.selectedShapesArray.filter(s => !s.props.isLocked)
+  return unlockedSelectedShapes.filter(shape => shapeMapping[shape.props.type]?.includes(type))
 }
 
 const EditAction = observer(() => {
@@ -100,7 +102,7 @@ const EditAction = observer(() => {
   } = React.useContext(LogseqContext)
 
   const app = useApp<Shape>()
-  const shape = filterShapeByAction(app.selectedShapesArray, 'Edit')[0]
+  const shape = filterShapeByAction('Edit')[0]
 
   const iconName =
     ('label' in shape.props && shape.props.label) || ('text' in shape.props && shape.props.text)
@@ -144,10 +146,7 @@ const EditAction = observer(() => {
 
 const AutoResizingAction = observer(() => {
   const app = useApp<Shape>()
-  const shapes = filterShapeByAction<LogseqPortalShape | TextShape | HTMLShape>(
-    app.selectedShapesArray,
-    'AutoResizing'
-  )
+  const shapes = filterShapeByAction<LogseqPortalShape | TextShape | HTMLShape>('AutoResizing')
 
   const pressed = shapes.every(s => s.props.isAutoResizing)
 
@@ -177,10 +176,7 @@ const AutoResizingAction = observer(() => {
 
 const LogseqPortalViewModeAction = observer(() => {
   const app = useApp<Shape>()
-  const shapes = filterShapeByAction<LogseqPortalShape>(
-    app.selectedShapesArray,
-    'LogseqPortalViewMode'
-  )
+  const shapes = filterShapeByAction<LogseqPortalShape>('LogseqPortalViewMode')
 
   const collapsed = shapes.every(s => s.collapsed)
   const ViewModeOptions: ToggleGroupInputOption[] = [
@@ -215,8 +211,7 @@ const ScaleLevelAction = observer(() => {
     handlers: { isMobile },
   } = React.useContext(LogseqContext)
 
-  const app = useApp<Shape>()
-  const shapes = filterShapeByAction<LogseqPortalShape>(app.selectedShapesArray, 'ScaleLevel')
+  const shapes = filterShapeByAction<LogseqPortalShape>('ScaleLevel')
   const scaleLevel = new Set(shapes.map(s => s.scaleLevel)).size > 1 ? '' : shapes[0].scaleLevel
 
   return <ScaleInput scaleLevel={scaleLevel} compact={isMobile()} />
@@ -224,7 +219,7 @@ const ScaleLevelAction = observer(() => {
 
 const IFrameSourceAction = observer(() => {
   const app = useApp<Shape>()
-  const shape = filterShapeByAction<IFrameShape>(app.selectedShapesArray, 'IFrameSource')[0]
+  const shape = filterShapeByAction<IFrameShape>('IFrameSource')[0]
 
   const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     shape.onIFrameSourceChange(e.target.value.trim().toLowerCase())
@@ -255,7 +250,7 @@ const IFrameSourceAction = observer(() => {
 
 const YoutubeLinkAction = observer(() => {
   const app = useApp<Shape>()
-  const shape = filterShapeByAction<YouTubeShape>(app.selectedShapesArray, 'YoutubeLink')[0]
+  const shape = filterShapeByAction<YouTubeShape>('YoutubeLink')[0]
   const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     shape.onYoutubeLinkChange(e.target.value)
     app.persist()
@@ -282,7 +277,7 @@ const YoutubeLinkAction = observer(() => {
 
 const TwitterLinkAction = observer(() => {
   const app = useApp<Shape>()
-  const shape = filterShapeByAction<TweetShape>(app.selectedShapesArray, 'TwitterLink')[0]
+  const shape = filterShapeByAction<TweetShape>('TwitterLink')[0]
   const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     shape.onTwitterLinkChange(e.target.value)
     app.persist()
@@ -309,10 +304,7 @@ const TwitterLinkAction = observer(() => {
 
 const NoFillAction = observer(() => {
   const app = useApp<Shape>()
-  const shapes = filterShapeByAction<BoxShape | PolygonShape | EllipseShape>(
-    app.selectedShapesArray,
-    'NoFill'
-  )
+  const shapes = filterShapeByAction<BoxShape | PolygonShape | EllipseShape>('NoFill')
   const handleChange = React.useCallback((v: boolean) => {
     shapes.forEach(s => s.update({ noFill: v }))
     app.persist()
@@ -337,7 +329,7 @@ const SwatchAction = observer(() => {
   // Placeholder
   const shapes = filterShapeByAction<
     BoxShape | PolygonShape | EllipseShape | LineShape | PencilShape | TextShape
-  >(app.selectedShapesArray, 'Swatch')
+  >('Swatch')
 
   const handleSetColor = React.useCallback((color: string) => {
     shapes.forEach(s => {
@@ -369,7 +361,7 @@ const StrokeTypeAction = observer(() => {
   const app = useApp<Shape>()
   const shapes = filterShapeByAction<
     BoxShape | PolygonShape | EllipseShape | LineShape | PencilShape
-  >(app.selectedShapesArray, 'StrokeType')
+  >('StrokeType')
 
   const StrokeTypeOptions: ToggleGroupInputOption[] = [
     {
@@ -409,7 +401,7 @@ const StrokeTypeAction = observer(() => {
 
 const ArrowModeAction = observer(() => {
   const app = useApp<Shape>()
-  const shapes = filterShapeByAction<LineShape>(app.selectedShapesArray, 'ArrowMode')
+  const shapes = filterShapeByAction<LineShape>('ArrowMode')
 
   const StrokeTypeOptions: ToggleGroupInputOption[] = [
     {
@@ -453,7 +445,7 @@ const ArrowModeAction = observer(() => {
 
 const TextStyleAction = observer(() => {
   const app = useApp<Shape>()
-  const shapes = filterShapeByAction<TextShape>(app.selectedShapesArray, 'TextStyle')
+  const shapes = filterShapeByAction<TextShape>('TextStyle')
 
   const bold = shapes.every(s => s.props.fontWeight > 500)
   const italic = shapes.every(s => s.props.italic)