bug/74385: Inline work package chip has no visual highlight when selected

lib/components/InlineWorkPackage/InlineWorkPackageChip.tsx

@@ -16,6 +16,7 @@ import { BlockCard } from "../BlockWorkPackage/BlockCard";
 interface InlineWorkPackageChipProps {
   inlineContent: { props: { wpid: string; size: string; instanceId: string } };
   contentRef: (node: HTMLElement | null) => void;
+  editor?: any;
 }
 
 const InlineChip = styled.span.attrs({
@@ -35,7 +36,7 @@ const InlineChip = styled.span.attrs({
   max-width: 100%;
 `;
 
-export const InlineWorkPackageChip = ({ inlineContent, contentRef }: InlineWorkPackageChipProps) => {
+export const InlineWorkPackageChip = ({ inlineContent, contentRef, editor }: InlineWorkPackageChipProps) => {
   const rawWpid = inlineContent.props.wpid;
   const size = (inlineContent.props.size ?? "s") as InlineWpSize;
   const instanceId = inlineContent.props.instanceId;
@@ -48,13 +49,34 @@ export const InlineWorkPackageChip = ({ inlineContent, contentRef }: InlineWorkP
   const { workPackage: wp, loading } = useWorkPackage(wpid);
 
   const [isSelected, setIsSelected] = useState(false);
+  const [isEditorSelected, setIsEditorSelected] = useState(false);
   const chipRef = useRef<HTMLElement | null>(null);
 
   const setRef = (node: HTMLElement | null) => {
     chipRef.current = node;
     contentRef(node);
   };
 
+  useEffect(() => {
+    if (!editor) return;
+
+    const unsubscribe = editor.onSelectionChange(() => {
+      const node = chipRef.current;
+      if (!node) return;
+
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) {
+        setIsEditorSelected(false);
+        return;
+      }
+
+      const range = selection.getRangeAt(0);
+      setIsEditorSelected(range.intersectsNode(node));
+    });
+
+    return () => unsubscribe();
+  }, [editor]);
+
   // Close the options popover when the user clicks outside the chip
   useEffect(() => {
     if (!isSelected) return;
@@ -89,7 +111,7 @@ export const InlineWorkPackageChip = ({ inlineContent, contentRef }: InlineWorkP
   // Loading
   if (wpid && loading) {
     return (
-      <InlineChip ref={setRef}>
+      <InlineChip ref={setRef} selected={isEditorSelected}>
         <ChipBase>
           <WorkPackageId as="span" $compact>#{wpid}…</WorkPackageId>
         </ChipBase>
@@ -104,7 +126,7 @@ export const InlineWorkPackageChip = ({ inlineContent, contentRef }: InlineWorkP
         role="button"
         aria-label={`Work package #${wpid}`}
         ref={setRef}
-        selected={isSelected}
+        selected={isSelected || isEditorSelected}
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -139,7 +161,7 @@ export const InlineWorkPackageChip = ({ inlineContent, contentRef }: InlineWorkP
   // Error / unknown
   if (wpid) {
     return (
-      <InlineChip ref={setRef} style={{ opacity: 0.6 }}>
+      <InlineChip ref={setRef} selected={isEditorSelected} style={{ opacity: 0.6 }}>
         <ChipBase>
           <WorkPackageId as="span" $compact>#{wpid}</WorkPackageId>
         </ChipBase>

lib/components/InlineWorkPackage/spec.tsx

@@ -13,8 +13,8 @@ export const openProjectWorkPackageInlineSpec = createReactInlineContentSpec(
     content: "none",
   },
   {
-    render: ({ inlineContent, contentRef }) => (
-      <InlineWorkPackageChip inlineContent={inlineContent} contentRef={contentRef} />
+    render: ({ inlineContent, contentRef, editor }) => (
+      <InlineWorkPackageChip inlineContent={inlineContent} contentRef={contentRef} editor={editor}/>
     ),
 
     toExternalHTML: ({ inlineContent }) => {