changing language does not work in WS text example MSIS-3168

Author: leJsboureau

examples/dev/index.html

@@ -211,9 +211,10 @@
   });
 
   languageElement.addEventListener('change', (e) => {
-    const configuration = editorElement.editor.configuration;
+    const configuration = { ...editorElement.editor.configuration };
     //The path to the language depend of the version of API you are using.
     configuration.recognitionParams.iink.lang = e.target.value;
+    editorElement.editor.configuration = configuration;
   });
 
   undoElement.addEventListener('click', () => {

examples/v4/rest_text_iink_eraser.html

@@ -39,14 +39,12 @@
         <img  src="../assets/img/eraser.svg">
       </button>
     </div>
-    <select id="language"></select>
   </nav>
   <div id="editor" touch-action="none"></div>
 </div>
 <script>
   const editorElement = document.getElementById('editor');
   const resultElement = document.getElementById('result');
-  const languageElement = document.getElementById('language');
   const undoElement = document.getElementById('undo');
   const redoElement = document.getElementById('redo');
   const clearElement = document.getElementById('clear');
@@ -69,30 +67,6 @@
     }
   });
 
-
-  editorElement.addEventListener('loaded', async (evt) => {
-    /**
-     * Retrieve the list of available recognition languages
-     * @param {Object} The editor recognition parameters
-     */
-    const currentLanguage = evt.target.editor.configuration.recognitionParams.iink.lang;
-    const res = await iink.getAvailableLanguageList(evt.target.editor.configuration);
-
-    if (languageElement.options.length === 0) {
-      Object.keys(res.result).forEach(function (key) {
-        const selected = currentLanguage === key;
-        languageElement.options[languageElement.options.length] = new Option(res.result[key], key, selected, selected);
-      });
-    }
-  });
-
-  languageElement.addEventListener('change', (e) => {
-    const configuration = editorElement.editor.configuration;
-    //The path to the language depend of the version of API you are using.
-    configuration.recognitionParams.iink.lang = e.target.value;
-    resultElement.innerHTML = '';
-  });
-
   undoElement.addEventListener('click', () => {
     editorElement.editor.undo();
   });

examples/v4/websocket_text_iink.html

@@ -60,9 +60,10 @@
   });
 
   languageElement.addEventListener('change', (e) => {
-    const configuration = editorElement.editor.configuration;
-    //The path to the language depend of the version of API you are using.
+    //The path to the language depend of the version of API you are using.    
+    const configuration = { ...editorElement.editor.configuration };
     configuration.recognitionParams.iink.lang = e.target.value;
+    editorElement.editor.configuration = configuration;
   });
 
   undoElement.addEventListener('click', () => {

examples/v4/websocket_text_iink_no_guides.html

@@ -27,14 +27,12 @@
         <img src="../assets/img/redo.svg">
       </button>
     </div>
-    <select id="language"></select>
   </nav>
   <div id="editor" touch-action="none"></div>
 </div>
 <script>
   const editorElement = document.getElementById('editor');
 
-  const languageElement = document.getElementById('language');
   const undoElement = document.getElementById('undo');
   const redoElement = document.getElementById('redo');
 
@@ -43,28 +41,6 @@
     redoElement.disabled = !event.detail.canRedo;
   });
 
-  editorElement.addEventListener('loaded', async (evt) => {
-    /**
-     * Retrieve the list of available recognition languages
-     * @param {Object} The editor recognition parameters
-     */
-    const currentLanguage = evt.target.editor.configuration.recognitionParams.iink.lang;
-    const res = await iink.getAvailableLanguageList(evt.target.editor.configuration);
-
-    if (languageElement.options.length === 0) {
-      Object.keys(res.result).forEach((key) => {
-        const selected = currentLanguage === key;
-        languageElement.options[languageElement.options.length] = new Option(res.result[key], key, selected, selected);
-      });
-    }
-  });
-
-  languageElement.addEventListener('change', (e) => {
-    const configuration = editorElement.editor.configuration;
-    //The path to the language depend of the version of API you are using.
-    configuration.recognitionParams.iink.lang = e.target.value;
-  });
-
   undoElement.addEventListener('click', () => {
     editorElement.editor.undo();
   });

examples/v4/websocket_text_iink_search.html

@@ -20,9 +20,6 @@
 
 <div>
   <nav>
-    <div class="languages">
-      <select id="language"></select>
-    </div>
     <div class="spacer"></div>
     <div class="search">
       <input id="searchInput" type="search" class="input-field">
@@ -35,7 +32,6 @@
 </div>
 <script>
   const editorElement = document.getElementById('editor');
-  const languageElement = document.getElementById('language');
   const convertElement = document.getElementById('convert');
   const searchInput = document.getElementById('searchInput');
   const searchBtn = document.getElementById('searchBtn');
@@ -109,32 +105,10 @@
     }
   });
 
-  editorElement.addEventListener('loaded', async (evt) => {
-    /**
-     * Retrieve the list of available recognition languages
-     * @param {Object} The editor recognition parameters
-     */
-    const currentLanguage = evt.target.editor.configuration.recognitionParams.iink.lang;
-    const res = await iink.getAvailableLanguageList(evt.target.editor.configuration);
-
-    if (languageElement.options.length === 0) {
-      Object.keys(res.result).forEach((key) => {
-        const selected = currentLanguage === key;
-        languageElement.options[languageElement.options.length] = new Option(res.result[key], key, selected, selected);
-      });
-    }
-  });
-
   editorElement.addEventListener('changed',() => {
     document.querySelectorAll('.highlight').forEach(elem => elem.parentNode.removeChild(elem));
   });
 
-  languageElement.addEventListener('change', (e) => {
-    const configuration = editorElement.editor.configuration;
-    //The path to the language depend of the version of API you are using.
-    configuration.recognitionParams.iink.lang = e.target.value;
-  });
-
   convertElement.addEventListener('click', () => {
     editorElement.editor.convert();
   });

examples/v4/websocket_text_local_storage_text.html

@@ -40,16 +40,13 @@
         <img src="../assets/img/redo.svg">
       </button>
     </div>
-    <select id="language"></select>
     <button class="classic-btn" id="clearStorage">Clear local storage</button>
   </nav>
   <div id="editor" touch-action="none"></div>
 </div>
 <script>
 
   const editorElement = document.getElementById('editor');
-
-  const languageElement = document.getElementById('language');
   const undoElement = document.getElementById('undo');
   const redoElement = document.getElementById('redo');
   const clearStorage = document.getElementById('clearStorage');
@@ -67,28 +64,6 @@
     localStorage.setItem('editorTextContent', event.detail.exports['text/plain']);
   });
 
-  editorElement.addEventListener('loaded', async (evt) => {
-    /**
-     * Retrieve the list of available recognition languages
-     * @param {Object} The editor recognition parameters
-     */
-    const currentLanguage = evt.target.editor.configuration.recognitionParams.iink.lang;
-    const res = await iink.getAvailableLanguageList(evt.target.editor.configuration);
-
-    if (languageElement.options.length === 0) {
-      Object.keys(res.result).forEach((key) => {
-        const selected = currentLanguage === key;
-        languageElement.options[languageElement.options.length] = new Option(res.result[key], key, selected, selected);
-      });
-    }
-  });
-
-  languageElement.addEventListener('change', (e) => {
-    const configuration = editorElement.editor.configuration;
-    //The path to the language depend of the version of API you are using.
-    configuration.recognitionParams.iink.lang = e.target.value;
-  });
-
   undoElement.addEventListener('click', () => {
     editorElement.editor.undo();
   });