fix: course card replacement issue

[ahtesham-quraish]

What are the relevant tickets?

N/A

Description (What does it do?)

• The issue when we insert the course card it gets replaced with the existing one unless we hit the enter button and adding new paragraph. With this fix user is able to insert the course card which won't get replaced
• Secondly issue was when media node is inserted and right after that if we try to insert the image node then media node gets replaced by image node

Screenshots (if appropriate):

How can this be tested?

• Use the course card control and keep adding course cards using the following url locally
  http://open.odl.local:8062/search?resource=297
  please change the resource query param value according to your database courses

• Insert the media node then right after that insert the image node it should not be replaced instead image should be inserted at next to media node

Additional Context

[jonkafton]

The issue when we insert the course card it gets replaced with the existing one unless we hit the enter button and adding new paragraph. With this fix user is able to insert the course card which won't get replaced

I see this as expected. We should be able to use the natural editor behavior and not manipulate selection or insertion points.

Our issue is that we are not styling the learning card resource to feed back to the user that it is selected when first inserted. We should expect that if an element is selected, it would be replaced when typed over or any node inserted, or removed if backspace it pressed, as with any editor content.

We can achieve this by adding a rule to the StyledLearningResourceListCard such as:

".ProseMirror-selectednode &": {
  borderColor: theme.custom.colors.red,
  userSelect: "none",
}

This provides the usability benefit (necessity!) that the cursor position is made clear when on selected nodes as we navigate the document.

Screen.Recording.2025-12-19.at.22.29.35.mov