💻 Automatically add curly braces for individual keywords

[jpelay]

Adds a function that automatically surrounds individual keywords with curly braces son teachers don't have to, and for the cases where one individual word might match with several keywords, a warning message is displayed, asking the user to select one of the keywords that might match that one.

This video shows an example of how the alert message is displayed:

2024-03-20.20-43-44.mp4

How to test

Follow these steps to verify this PR works as intended:

• Login as a teacher and start editing an adventure
• Type a word that might have several keywords associated, like to in English and check that the alert message is displayed.
• After saving the adventure, go to dev_database.json and search for the field associated to the adventure you just edited, and check that the field formatted_content correctly has curly braces surrounding the keywords

[hasan-sh]

Hello @jpelay, existing adventures may have such keywords but the warningbox isn't shown to them, one might argue that it should!

I think we should utilize the function you created in

hedy/static/js/adventure.ts

Lines 59 to 61 in 10d6365

	window.ckEditor = editor;
	$editor = editor;
	resolve();

Perhaps related to this, did you check the threads starting from #5297 (comment) ?!

[hasan-sh]

If i add a suggested keyword without the curly braces, the keyword isn't localized correctly. Thus we need to check how you add curly braces perhaps it's not recognizing a keyword with _!

[hasan-sh]

Hi @jpelay , i think this PR should be of highest priority because the content of adventures are changed and teachers see curly braces. It'd be nice to finish it this week. I'll review it once you make progress and think it's ready!

[jpelay]

Hi Hasan!

If i add a suggested keyword without the curly braces, the keyword isn't localized correctly. Thus we need to check how you add curly braces perhaps it's not recognizing a keyword with _!

This is in an interesting question. I assumed that people would want to include the keywords as they are use in real programs, to_list is not really how you write that keyword, but I think it makes sense adding the curlies around them, in case teachers have that knowledge (although I really doubt that many teachers would know that implementation detail).

Hello @jpelay, existing adventures may have such keywords but the warningbox isn't shown to them, one might argue that it should!

You have to start editing the adventure for the warningbox to be shown.

[hasan-sh]

I assumed that people would want to include the keywords as they are use in real programs, to_list is not really how you write that keyword

I think they will, especially after they see the message you provide in the warningbox!

You have to start editing the adventure for the warningbox to be shown.

Do you think we should check and show it at the beginning as well? If so, we could show it after the CKEditor is initialilzed.

[jpelay]

Do you think we should check and show it at the beginning as well? If so, we could show it after the CKEditor is initialilzed.

Done, mate!

[hasan-sh]

We just need to fix the tests and we should be good to go:))) with tiny comments!

[hasan-sh]

Any reason for these?! Or just to test them?!

[hasan-sh]

you could also control it from the instance we set on window. We use it here for instance: https://github.com/hedyorg/hedy/blob/main/tests/cypress/e2e/for-teacher_page/customize-adventure_page/adventure_content_field.cy.js

[jpelay]

Any reason for these?! Or just to test them?!

Targeting the editor window to actually type on it is very hard with Cypress, so I just make it the focused element by clicking on one of the options and then use realType from cypress-real-events to actually type on the editor. Got that from this issue: cypress-io/cypress#26155

[hasan-sh]

you could also control it from the instance we set on window. We use it here for instance: https://github.com/hedyorg/hedy/blob/main/tests/cypress/e2e/for-teacher_page/customize-adventure_page/adventure_content_field.cy.js

This is working, isn't it?!

[hasan-sh]

Perhaps we could suggest our way:-)

[jpelay]

This is working, isn't it?!

It isn't, hence why I did it that way. Just setting the value of the editor doesn't fire a change event.

[hasan-sh]

I think it does. But you need to give it an html tag that you mean to write; ckEditor.setData("<code>to</code>")`

[hasan-sh]

This is probably more stable since you may remove the bold button from your bar or we add something else and ckEditor changes the attribute. I like this discussion and just posted a comment :))
cypress-io/cypress#26155 (comment)

[jpelay]

Oh yes! You're right, updated the tests to reflect your suggestion, thanks!

[hasan-sh]

Thanks for all the work!

[mergify]

Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork).

[mergify]

Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork).

[mergify]

Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork).