💻 Automatically add curly braces for individual keywords

build-tools/heroku/generate-client-messages.py

@@ -23,7 +23,8 @@
     'customization_deleted',
     'directly_available',
     'disabled',
-    'adventures_restored'
+    'adventures_restored',
+    'multiple_keywords_warning'
 ]
 
 

content/client-messages.txt

@@ -6,3 +6,4 @@ gettext('customization_deleted')
 gettext('directly_available')
 gettext('disabled')
 gettext('adventures_restored')
+gettext('multiple_keywords_warning')

messages.pot

@@ -1001,7 +1001,7 @@ msgstr ""
 msgid "more_options"
 msgstr ""
 
-msgid "multiple_levels_warning"
+msgid "multiple_keywords_warning"
 msgstr ""
 
 msgid "my_account"

package.json

@@ -45,6 +45,7 @@
     "chai-colors": "^1.0.1",
     "chart.js": "^3.6.2",
     "codemirror": "^6.0.1",
+    "cypress-real-events": "^1.12.0",
     "dompurify": "^2.3.5",
     "istanbul-lib-coverage": "^3.2.0",
     "jquery-ui-dist": "^1.13.1",

static/js/adventure.ts

@@ -3,6 +3,10 @@ import { CustomWindow } from './custom-window';
 import { languagePerLevel, keywords } from "./lezer-parsers/language-packages";
 import { SyntaxNode } from "@lezer/common";
 import { initializeTranslation } from "./lezer-parsers/tokens";
+import DOMPurify from "dompurify";
+import TRADUCTION_IMPORT from '../../highlighting/highlighting-trad.json';
+import { convert } from "./utils";
+import { ClientMessages } from "./client-messages";
 import { autoSave } from "./autosave";
 
 declare let window: CustomWindow;
@@ -12,15 +16,29 @@ export interface InitializeCustomizeAdventurePage {
 }
 
 let $editor: ClassicEditor;
+let keywordHasAlert: Map<string, boolean> = new Map()
 
 export async function initializeCustomAdventurePage(_options: InitializeCustomizeAdventurePage) {
     const editorContainer = document.querySelector('#adventure-editor') as HTMLElement;
-    const lang = document.querySelector('html')?.getAttribute('lang') || 'en';
     // Initialize the editor with the default language
+    let lang =  $('#language').val() as string || 'en'
+    const TRADUCTIONS = convert(TRADUCTION_IMPORT) as Map<string, Map<string,string>>;    
+    if (!TRADUCTIONS.has(lang)) { lang = 'en'; }
+    let TRADUCTION = TRADUCTIONS.get(lang) as Map<string,string>;
+
     if (editorContainer) {
-        initializeEditor(lang, editorContainer);
+        await initializeEditor(lang, editorContainer);
+        showWarningIfMultipleLevels(TRADUCTION)
+        $editor.model.document.on('change:data', () => {            
+            showWarningIfMultipleLevels(TRADUCTION)
+        })
     }
 
+    $('#language').on('change', () => {
+        let lang = $('#language').val() as string || 'en'
+        if (!TRADUCTIONS.has(lang)) { lang = 'en'; }
+        TRADUCTION = TRADUCTIONS.get(lang) as Map<string,string>;
+    })
     // Autosave customize adventure page
     autoSave("customize_adventure")
 
@@ -42,6 +60,56 @@ export async function initializeCustomAdventurePage(_options: InitializeCustomiz
             }, 100);
         })
     })
+
+}
+
+function showWarningIfMultipleLevels(TRADUCTION: Map<string, string>) {
+    const content = DOMPurify.sanitize($editor.getData())
+    const parser = new DOMParser();
+    const html = parser.parseFromString(content, 'text/html');
+
+    for (const tag of html.getElementsByTagName('code')) {
+        if (tag.className !== "language-python") {
+            const coincidences = findCoincidences(tag.innerText, TRADUCTION);
+            if (coincidences.length > 1 && !keywordHasAlert.get(tag.innerText)) {
+                keywordHasAlert.set(tag.innerText, true);
+                // We create the alert box dynamically using the template element in the HTML object
+                const template = document.querySelector('#warning_template') as HTMLTemplateElement
+                const clone = template.content.cloneNode(true) as HTMLElement
+                let close = clone.querySelector('.close-dialog');
+                close?.addEventListener('click', () => {
+                    keywordHasAlert.set(tag.innerText, false);
+                    close?.parentElement?.remove()
+                })
+                let p = clone.querySelector('p[class^="details"]')!
+                let message = ClientMessages['multiple_keywords_warning']
+                message = message.replace("{orig_keyword}", formatKeyword(tag.innerText))
+                let keywordList = ''
+                for (const keyword of coincidences) {
+                    keywordList = keywordList === '' ? formatKeyword(`${keyword}`) : keywordList + `, ${formatKeyword(`${keyword}`)}`
+                }
+                message = message.replace("{keyword_list}", keywordList)
+                p.innerHTML = message
+                // Once the warning has been created we append it to the container
+                const warningContainer = document.getElementById('warnings_container')!
+                warningContainer.appendChild(clone)
+            }
+        }
+    }
+}
+
+function formatKeyword(name: string) {
+    return `<span class='command-highlighted'>${name}</span>`
+}
+
+function findCoincidences(name: string, TRADUCTION: Map<string, string>) {
+    let coincidences = [];
+    for (const [key, regexString] of TRADUCTION) {        
+        if (new RegExp(`^(${regexString})$`, 'gu').test(name)) {
+            coincidences.push(key)
+        }
+    }
+    return coincidences;
 }
 
 function initializeEditor(language: string, editorContainer: HTMLElement): Promise<void> {
@@ -141,6 +209,21 @@ export function addCurlyBracesToCode(code: string, level: number, language: stri
     return formattedCode;
 }
 
+export function addCurlyBracesToKeyword(name: string) {
+    let lang =  $('#language').val() as string || 'en'
+    const TRADUCTIONS = convert(TRADUCTION_IMPORT) as Map<string, Map<string,string>>;    
+    if (!TRADUCTIONS.has(lang)) { lang = 'en'; }
+    let TRADUCTION = TRADUCTIONS.get(lang) as Map<string,string>;
+
+    for (const [key, regexString] of TRADUCTION) {        
+        if ((new RegExp(`^(${regexString})$`, 'gu').test(name)) || name === key) {
+            return `{${key}}`
+        }
+    }
+
+    return name;
+}
+
 function waitForElm(selector: string): Promise<NodeListOf<Element>>  {
     return new Promise(resolve => {
         if (document.querySelector(selector)) {