CKEditor malfunctions with shortcodes following Markdown `<` symbol

[HussainTaj-arbisoft]

Resource link's Studio UI breaks when they follow the < symbol.

Expected Behavior

CKEditor shows shortcode resource link UI for added links.

Current Behavior

CKEditor either does not show resource link UI or shows a HTML code equivalent of the shortcode. For example,

Steps to Reproduce

1. Create a page.
2. In markdown add <.
3. Add a resource link via "Add Link" UI after the symbol.
4. Click save.
5. Open the saved page. Notice the broken (or completely disappeared) shortcode.

Examples

< -add link-

0 <= N <= 1000

-add link-

Possible Solution

We probably need to update the CKEditor plugin that parses shortcodes into CKEditor UI components.

Additional Details

Discovered in https://github.com/mitodl/hq/issues/3825

[pdpinch]

@ChristopherChudzicki any quick takes on this?

[ChristopherChudzicki]

I don't have any immediate insight regarding the root cause. Some thoughts:

Workarounds: The author could use mathjax for an immediate workaround. (Or possibly use inline code, 1 < 2, if it's appropriate in the context of the course. Inline code seems to work OK.)

Shortcodes aside, something weird is going on with <. See video below. I initially enter <, but end up getting \\\\\< after a few saves. This is without any shortcodes.

https://github.com/mitodl/ocw-studio/assets/9010790/bc8876ce-e891-4953-87e8-245df0747f52

[ibrahimjaved12]

Shortcodes aside, something weird is going on with <. See video below. I initially enter <, but end up getting \\\\\< after a few saves. This is without any shortcodes.

less_than_great.mov

For some reason your example (without shortcodes) only works if we don't have any embedded images (also videos, I think) in the bottom. If you have plain editor (without any added links), and an embedded picture in bottom, then your example won't work. It will always work without the picture.

One thing with embedded picture is, if they're in the end, they always add an extra newline in the bottom. But if we have it in top, then the text breaks up.

But as long as we have in bottom (even if we have on top), then it does not break up.

However, either way, in any combination of these, if you add Resource Link , it does seem to either disappear or act weird.