@windward/core 0.3.0 → 0.4.1

package/helpers/tinymce/WindwardPlugins.ts

@@ -0,0 +1,335 @@
+
+
+/**
+ * Class representing the WindwardPlugins.
+ */
+export class WindwardPlugins {
+    editor: any
+    formula: any
+    fillInBlank: any
+    private window: any;
+
+    constructor(editor: any) {
+
+        this.editor = editor
+        this.formula = undefined
+        this.fillInBlank = undefined
+        this.window = window
+        this.register()
+    }
+
+
+    /**
+     * registers an icon with the given icon name and SVG path.
+     *
+     * @param {string} iconName - The name of the icon.
+     * @param {string} svgPath - The SVG path for the icon.
+     *
+     * @return {void}
+     */
+    private registerIcon(iconName: string, svgPath: string) {
+        this.editor.ui.registry.addIcon(
+            iconName,
+            svgPath
+        )
+    }
+    /**
+     * Adds icons to the editor's UI registry.
+     */
+    private addIcons() {
+        this.registerIcon('insertMath', '<svg  x="0px" y="0px"width="20px" height="20px" viewBox="0 0 445.878 445.878" style="enable-background:new 0 0 445.878 445.878;"><path d="M426.024,86.447H209.705l-84.911,298.911c-2.568,7.967-9.854,13.482-18.22,13.771c-0.236,0-0.464,0.006-0.688,0.006 c-8.092,0-15.41-4.924-18.436-12.478l-34.714-86.782H19.851C8.884,299.876,0,290.986,0,280.022 c0-10.965,8.893-19.854,19.851-19.854H66.18c8.109,0,15.421,4.941,18.436,12.483l19.237,48.09l72.472-260.218 c2.639-8.213,10.279-13.781,18.903-13.781h230.798c10.97,0,19.854,8.89,19.854,19.851S436.988,86.447,426.024,86.447z M436.723,353.227l-78.259-87.904l74.576-82.783c1.318-1.454,1.638-3.547,0.857-5.341c-0.804-1.791-2.577-2.946-4.54-2.946h-47.18 c-1.442,0-2.802,0.629-3.759,1.72l-50.059,58.047l-49.674-58.029c-0.939-1.103-2.317-1.738-3.771-1.738h-49.334 c-1.956,0-3.729,1.149-4.521,2.929c-0.81,1.785 0.479,3.875,0.824,5.332l73.743,82.81l-77.641,87.923 c-1.297,1.465-1.605,3.552 0.813,5.325c0.813,1.785,2.586,2.92,4.528,2.92h48.9c1.472,0,2.867-0.65,3.807-1.785l51.819-62.181 l53.05,62.229c0.951,1.11,2.328,1.743,3.782,1.743h49.97c1.962,0,3.735-1.141,4.527-2.926 C438.354,356.779,438.035,354.692,436.723,353.227z"/></svg>');
+        this.registerIcon('insertFIB', '<svg width="20px" height="20px" viewBox="0 0 24 24"><path d="M17,7H22V17H17V19A1,1 0 0,0 18,20H20V22H17.5C16.95,22 16,21.55 16,21C16,21.55 15.05,22 14.5,22H12V20H14A1,1 0 0,0 15,19V5A1,1 0 0,0 14,4H12V2H14.5C15.05,2 16,2.45 16,3C16,2.45 16.95,2 17.5,2H20V4H18A1,1 0 0,0 17,5V7M2,7H13V9H4V15H13V17H2V7M20,15V9H17V15H20Z" /></svg>');
+        this.registerIcon('glossaryIcon', '<svg viewBox="0 0 24 24" width="20px" height="20px" ><path d="M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M9,9V11H19V9H9M9,13V15H17V13H9Z"></path></svg>');
+    }
+    /**
+     * Opens the equation editor window in the TinyMCE editor.
+     * @return {void}
+     */
+    private equationWindow() {
+        this.editor.addCommand('equation-window', (data: any) => {
+            return this.editor.windowManager.openUrl({
+                url: '/plugins/tinymce/math',
+                width: .75*this.window.innerWidth,
+                height: .9*this.window.innerHeight,
+                title: 'Equation editor',
+                buttons: [
+                    {
+                        type: 'cancel',
+                        text: 'cancel',
+                    },
+                    {
+                        type: 'custom',
+                        text: 'submit',
+                        primary: true,
+                    },
+                ],
+                onAction: () => {
+                    if (data.currentTarget) {
+                        this.editor.selection.select(data.currentTarget)
+                    }
+                     this.editor.selection.setContent(
+                        `        <span class='windward-math-content'>` +
+                            this.formula +
+                            `</span> `
+                    )
+
+                    this.editor.windowManager.close()
+                    this.setOnDoubleClickEquationContent(this.editor)
+                },
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                onMessage: (instance: any, message: any) => {
+                    switch (message.mceAction) {
+                        case 'equation-insert':
+                            this.formula = message.content
+                            break
+                        case 'math-plugin-mounted':
+                            this.window.postMessage({ latex: data.latex ?? '' }, '*')
+                            break
+                    }
+                },
+            })
+        })
+    }
+
+  /**
+   * Adds custom buttons to the editor's user interface registry.
+   */
+  private addButtons() {
+
+    this.addButtonToEditor(
+      "mathButton",
+      "insertMath",
+      () => {
+        this.editor.execCommand("equation-window", true);
+      }
+    );
+    this.addButtonToEditor(
+      "glossaryButton",
+      "glossaryIcon",
+      () => {
+        this.editor.formatter.apply("glossary");
+      }
+    );
+    this.addButtonToEditor(
+      "fibInsertButton",
+      "insertFIB",
+      () => {
+        this.editor.execCommand("fib-window", true);
+      }
+    );
+      this.addButtonToEditor(
+          "fibFormatButton",
+          "insertFIB",
+          () => {
+              this.editor.formatter.apply("fib");
+          }
+      );
+  }
+
+  /**
+   * Add a button to the editor's UI registry
+   * @param {string} name Name of the button
+   * @param {string} icon Icon name of the button
+   * @param {() => void} onAction Callback function for the action to be done when the button is clicked
+   */
+  private addButtonToEditor(name: string, icon: string, onAction: () => void) {
+    this.editor.ui.registry.addButton(name, {
+      icon: icon,
+      onAction: onAction
+    });
+  }
+    /**
+     * Adds a menu item to the editor's UI registry.
+     *
+     * @param itemKey - The key that uniquely identifies the menu item.
+     * @param itemText - The text for the menu item.
+     * @param command - The command to be executed on item click.
+     * @param icon - The command to be executed on item click.
+     * @returns {void}
+     */
+    private addEditorMenuItem(itemKey: string, itemText: string, command: string, icon: string): void {
+        this.editor.ui.registry.addMenuItem(itemKey, {
+            text: itemText,
+            icon: icon,
+            onAction: () => {
+                this.editor.execCommand(command, true)
+            },
+        });
+    }
+
+    /**
+     * Adds menu items to the editor UI registry.
+     * @returns {void}
+     */
+    private addMenuItems() {
+        this.addEditorMenuItem('math', 'Math', 'equation-window','insertMath');
+        this.addEditorMenuItem('FIB', 'Fill in the blank', 'fib-window','insertFIB');
+    }
+
+    /**
+     * Initializes the Editor and sets event listeners for 'init' event.
+     * Calls setOnClickEquationContent() and setOnClickFillInBlank() methods.
+     *
+     * @returns {void}
+     */
+    private init() {
+
+       this.editor.on('init',()=>{
+            this.setOnDoubleClickEquationContent(this.editor)
+            this.setOnClickFillInBlank(this.editor)
+        })
+    }
+
+    /**
+     * Sets the content on the editor and triggers the 'SetContent' event.
+     * calls the 'setOnClickEquationContent' and 'setOnClickFillInBlank' methods with the editor as a parameter.
+     *
+     * @returns {void} This method does not return anything.
+     */
+   private setContent() {
+        this.editor.on('SetContent',  () => {
+            this.setOnDoubleClickEquationContent(this.editor)
+            this.setOnClickFillInBlank(this.editor)
+        })
+    }
+
+    /**
+     * Adds event listeners for handling input events.
+     * @return {void}
+     */
+     setInputEvents() {
+        this.editor.on('input', () =>{
+            this.setOnDoubleClickEquationContent(this.editor)
+            this.setOnClickFillInBlank(this.editor)
+        })
+    }
+    /**
+     * Adds an onclick listener to all equation content within the editor.
+     *
+     * @param {any} editor - The editor instance.
+     */
+    setOnDoubleClickEquationContent(editor: any) {
+        const tinymceDoc = editor.getDoc()
+        const mqSpan = tinymceDoc.getElementsByClassName(
+            'windward-math-content'
+        )
+
+        // Add onclick listener to all equation content
+        for (const equationContent of mqSpan) {
+            equationContent.contentEditable = 'true'
+            if (equationContent.onclick) {
+                continue
+            }
+
+            equationContent.ondblclick = (event: any) => {
+                event.stopPropagation()
+                editor.execCommand('equation-window', {
+                    latex: event.target.innerText,
+                    currentTarget: event.target,
+                })
+            }
+        }
+    }
+
+    /**
+     * Opens a fill in the blank window in the TinyMCE editor.
+     * @return {void}
+     */
+    fillInBlankWindow()  {
+        this.editor.addCommand('fib-window',  (data: any) => {
+            return this.editor.windowManager.openUrl({
+                url: '/plugins/tinymce/FIB',
+                title: 'Fill in the blank',
+                buttons: [
+                    {
+                        type: 'cancel',
+                        text: 'cancel',
+                    },
+                    {
+                        type: 'custom',
+                        text: 'submit',
+                        primary: true,
+                    },
+                ],
+                onAction: () => {
+                    if (data.currentTarget) {
+                        this.editor.selection.select(data.currentTarget)
+                    }
+                    this.editor.selection.setContent(
+                        `<span class='windward-fill-blank' data-feedback =` +
+                        this.fillInBlank.feedback +
+                        ` >` +
+                        this.fillInBlank.answer +
+                        `</span>`
+                    )
+
+                    this.editor.windowManager.close()
+                    this.setOnClickFillInBlank(this.editor)
+                },
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                onMessage: (instance: any, message: any) => {
+                    switch (message.mceAction) {
+                        case 'fib-insert':
+                            this.fillInBlank = {
+                                answer: message.content.answer,
+                                feedback: message.content.feedback,
+                            }
+                            break
+                        case 'fib-plugin-mounted':
+                            this.window.parent.postMessage(
+                                { answer: data.answer, feedback: data.feedback },
+                                '*'
+                            )
+                            break
+                    }
+                },
+            })
+        })
+    }
+
+    /**
+     * Adds an onclick listener to fill-in-blank elements within the provided editor.
+     * When a fill-in-blank element is double-clicked, it executes the 'fib-window' command with the appropriate parameters.
+     *
+     * @param {any} editor - TThe editor instance.
+     * @returns {void}
+     */
+    setOnClickFillInBlank(editor: any) {
+        const tinymceDoc = editor.getDoc()
+        const mqSpan = tinymceDoc.getElementsByClassName('windward-fill-blank')
+
+        // Add onclick listener to all equation content
+        for (const fib of mqSpan) {
+            fib.contentEditable = 'true'
+            if (fib.onclick) {
+                continue
+            }
+
+            fib.ondblclick = (event: any) => {
+                event.stopPropagation()
+                editor.execCommand('fib-window', {
+                    answer: event.target.innerText,
+                    feedback: event.target.getAttribute('data-feedback'),
+                    currentTarget: event.target,
+                })
+            }
+        }
+    }
+
+    /**
+     * Registers the application, initializing necessary components and setting up the user interface.
+     *
+     * @return {void}
+     */
+    private register() {
+        this.addIcons()
+        this.addButtons()
+        this.addMenuItems()
+        this.setContent()
+        this.setInputEvents()
+        this.equationWindow()
+        this.fillInBlankWindow()
+        this.init()
+    }
+}
+

package/i18n/en-US/components/settings/clickable_icon.ts

@@ -8,10 +8,12 @@ export default {
     item_color: 'Item Color',
     item_text: 'Item Text',
     autocolor: 'Auto-color Options',
+    icon_image: 'Use image for icon',
     display: {
         show_title: 'Always Show Title',
         show_background: 'Show Background',
         round_icon: 'Round Icons',
         italic_icon: 'Italic Icons',
+        large_icon: 'Large Icons',
     },
 }

package/i18n/en-US/components/settings/image.ts

@@ -2,11 +2,16 @@ export default {
     hide_background: 'Hide Background',
     modal: 'Click to open in modal',
     decorative: 'Decorative Image',
-    toggle_description:
+    decorative_toggle_description:
         'To meet accessibility standards, alt text is required for all images except for purely decorative images. This setting will add the proper alt text and screen reader text for learners.',
+    inherit_global_toggle_description:
+        'When enabled, the selected image will use alt text and screen reader text stored on the file, managed in the file manager. When disabled, the selected image will have its own unique alt text and screen reader text that is not shared globally on the file.',
     alt_description:
         'Alternative text is descriptive text that conveys the meaning and context of a visual item in a digital setting, intended for users who are visually impaired or otherwise unable to visually identify an image. This should be short and clear.',
     screenreader: 'Screen Reader Text',
     screenreader_description:
         'Screen reader text can be added to give a user using assistive technology more information about the elements on the page',
+    inherit: 'Inherit global settings',
+    inherit_no_alt: 'No global alt text available for file',
+    inherit_no_aria: 'No global screen reader text available for file',
 }

package/i18n/en-US/components/utils/tiny_mce_wrapper.ts

@@ -17,4 +17,5 @@ export default {
         subject_report: 'Subject Report',
     },
     minimize: 'Minimize',
+    read_text_aloud: 'Read Text aloud'
 }

package/i18n/en-US/shared/settings.ts

@@ -22,4 +22,7 @@ export default {
         instructions: 'Instructions',
         placeholder: 'Enter text here',
     },
+    upload_file: 'Upload File',
+    alt_image: 'Alternate text for image',
+    aria_described: 'Aria described by',
 }

package/i18n/es-ES/components/settings/clickable_icon.ts

@@ -9,10 +9,12 @@ export default {
     item_color: 'Color del artículo',
     item_text: 'Texto del elemento',
     autocolor: 'Opciones de color automático',
+    icon_image: 'Usar imagen como ícono',
     display: {
         show_title: 'Mostrar siempre el título',
         show_background: 'Mostrar fondo',
         round_icon: 'Iconos redondos',
         italic_icon: 'Iconos en cursiva',
+        large_icon: 'Iconos grandes',
     },
 }

package/i18n/es-ES/components/settings/image.ts

@@ -2,11 +2,18 @@ export default {
     hide_background: 'Ocultar fondo',
     modal: 'Haga clic para abrir en modal',
     decorative: 'Imagen decorativa',
-    toggle_description:
+    decorative_toggle_description:
         'Para cumplir con los estándares de accesibilidad, se requiere texto alternativo para todas las imágenes, excepto para las imágenes puramente decorativas. Esta configuración agregará el texto alternativo y el texto del lector de pantalla adecuados para los estudiantes.',
+    inherit_global_toggle_description:
+        'Cuando está habilitado, la imagen seleccionada utilizará texto alternativo y texto del lector de pantalla almacenado en el archivo, administrado en el administrador de archivos. Cuando está deshabilitada, la imagen seleccionada tendrá su propio texto alternativo y texto de lector de pantalla que no se comparte globalmente en el archivo.',
     alt_description:
         'El texto alternativo es un texto descriptivo que transmite el significado y el contexto de un elemento visual en un entorno digital, destinado a usuarios con discapacidad visual o que no pueden identificar visualmente una imagen. Esto debe ser breve y claro.',
     screenreader: 'Texto del lector de pantalla',
     screenreader_description:
         'Se puede agregar texto al lector de pantalla para brindarle al usuario que utiliza tecnología de asistencia más información sobre los elementos de la página',
+    inherit: 'Heredar configuración global',
+    inherit_no_alt:
+        'No hay texto alternativo global disponible para el archivo',
+    inherit_no_aria:
+        'No hay texto de lector de pantalla global disponible para el archivo',
 }

package/i18n/es-ES/components/utils/tiny_mce_wrapper.ts

@@ -17,4 +17,5 @@ export default {
         subject_report: 'Informe de asunto',
     },
     minimize: 'Minimizar',
+    read_text_aloud: 'Leer texto',
 }

package/i18n/es-ES/shared/settings.ts

@@ -24,4 +24,7 @@ export default {
         instructions: 'Instrucciones',
         placeholder: 'Ingrese texto aquí',
     },
+    upload_file: 'Subir Archivo',
+    alt_image: 'Texto alternativo para imagen',
+    aria_described: 'Aria descrita por',
 }

package/i18n/sv-SE/components/settings/clickable_icon.ts

@@ -9,10 +9,12 @@ export default {
     item_color: 'Artikelfärg',
     item_text: 'Artikeltext',
     autocolor: 'Auto-färgalternativ',
+    icon_image: 'Använd bild för ikon',
     display: {
         show_title: 'Visa alltid titel',
         show_background: 'Visa bakgrund',
         round_icon: 'Runda ikoner',
         italic_icon: 'Kursiva ikoner',
+        large_icon: 'Stora ikoner',
     },
 }

package/i18n/sv-SE/components/settings/image.ts

@@ -2,11 +2,16 @@ export default {
     hide_background: 'Dölj bakgrund',
     modal: 'Klicka för att öppna i modal',
     decorative: 'Dekorativ bild',
-    toggle_description:
+    decorative_toggle_description:
         'För att uppfylla tillgänglighetsstandarder krävs alt-text för alla bilder utom för rent dekorativa bilder. Den här inställningen kommer att lägga till rätt alt-text och skärmläsartext för eleverna.',
+    inherit_global_toggle_description:
+        'När den är aktiverad kommer den valda bilden att använda alt-text och skärmläsartext lagrad i filen, hanterad i filhanteraren. När den är inaktiverad kommer den valda bilden att ha sin egen unika alt-text och skärmläsartext som inte delas globalt på filen.',
     alt_description:
         'Alternativ text är beskrivande text som förmedlar innebörden och sammanhanget av ett visuellt föremål i en digital miljö, avsedd för användare som är synskadade eller på annat sätt oförmögna att visuellt identifiera en bild. Detta ska vara kort och tydligt.',
     screenreader: 'Skärmläsartext',
     screenreader_description:
         'Skärmläsartext kan läggas till för att ge en användare som använder hjälpmedel mer information om elementen på sidan',
+    inherit: 'Ärva globala inställningar',
+    inherit_no_alt: 'Ingen global alt-text tillgänglig för filen',
+    inherit_no_aria: 'Ingen global skärmläsartext tillgänglig för filen',
 }

package/i18n/sv-SE/components/utils/tiny_mce_wrapper.ts

@@ -17,4 +17,5 @@ export default {
         subject_report: 'Ämnesrapport',
     },
     minimize: 'Minimera',
+    read_text_aloud: 'Läs texten högt',
 }

package/i18n/sv-SE/shared/settings.ts

@@ -22,4 +22,7 @@ export default {
         instructions: 'Instruktioner',
         placeholder: 'Skriv in text här',
     },
+    upload_file: 'Ladda upp fil',
+    alt_image: 'Alternativ text till bild',
+    aria_described: 'Aria beskrivs av',
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/core",
-    "version": "0.3.0",
+    "version": "0.4.1",
     "description": "Windward UI Core Plugins",
     "main": "plugin.js",
     "scripts": {
@@ -26,10 +26,12 @@
         "eslint": "^8.11.0",
         "he": "^1.2.0",
         "lodash": "^4.17.21",
-        "mathlive": "^0.75.0",
-        "mathml-to-latex": "^1.3.0",
+        "mathlive": "^0.98.6",
+        "mathml-to-latex": "^1.4.0",
         "prettier": "^2.6.0",
-        "raw-loader": "^4.0.2"
+        "raw-loader": "^4.0.2",
+        "speechreader": "^1.1.5",
+        "tinymce": "^7.1.0"
     },
     "devDependencies": {
         "@babel/preset-env": "^7.16.11",

package/test/Components/Settings/AccordionSettings.spec.js

@@ -27,8 +27,22 @@ describe('AccordionSettings', () => {
         })
         wrapper.vm.onAddElement()
         expect(wrapper.vm.$data.block.metadata.config.items).toEqual([
-            { header: '', expand: false, content: '' },
-            { header: '', expand: false, content: '' },
+            {
+                header: '',
+                expand: false,
+                content: '',
+                file: null,
+                altText: '',
+                ariaDescribedBy: '',
+            },
+            {
+                header: '',
+                expand: false,
+                content: '',
+                file: null,
+                altText: '',
+                ariaDescribedBy: '',
+            },
         ])
     })
 

package/test/__mocks__/contentBlockMock.js

@@ -59,6 +59,12 @@ jest.mock(
                         resolve(true)
                     })
                 },
+                getAssetByFileAssetId(fileAssetId) {
+                    return null
+                },
+                resolveAsset(file) {
+                    return file
+                },
             },
         }
     },

package/test/__mocks__/contentSettingsMock.js

@@ -48,6 +48,12 @@ jest.mock(
                         resolve(true)
                     })
                 },
+                getAssetByFileAssetId(fileAssetId) {
+                    return null
+                },
+                resolveAsset(file) {
+                    return file
+                },
             },
         }
     },

package/test/helpers/MathHelper.spec.js

@@ -8,6 +8,7 @@ const text =
 const mathML =
     '<math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac><mn>1</mn><mn>2</mn></mfrac><mo>+</mo><mfrac><mn>3</mn><mn>4</mn></mfrac></math>'
 const latexContent = '\\frac{1}{2} + \\frac{3}{4}'
+const latexContentSpeakableText = ' half plus three quarter '
 const srEnhancedlatex =
     '**' +
     JSON.stringify({
@@ -15,7 +16,7 @@ const srEnhancedlatex =
         sr_text: ' half plus three quarter ',
     }) +
     '**'
-const mathliveHtml = `<span tabindex="0"  aria-label=" half plus three quarter "> <span tabindex="-1" ><span class="ML__mathlive"><span class="ML__strut" style="height:1.33em"></span><span class="ML__strut--bottom" style="height:2.01em;vertical-align:-0.68em"></span><span class="ML__base"><span><span class="mfrac"><span class="nulldelimiter"></span><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.33em"><span class="ML__center" style="top:-2.31em"><span class="pstrut" style="height:3em"></span><span><span class="ML__cmr">2</span></span></span><span style="top:-3.21em"><span class="pstrut" style="height:3em"></span><span class="ML__frac-line"></span></span><span class="ML__center" style="top:-3.67em"><span class="pstrut" style="height:3em"></span><span><span class="ML__cmr">1</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.69em"></span></span></span><span class="nulldelimiter"></span></span><span class="ML__cmr" style="margin-left:0.23em">+</span><span class="mfrac" style="margin-left:0.23em"><span class="nulldelimiter"></span><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.33em"><span class="ML__center" style="top:-2.31em"><span class="pstrut" style="height:3em"></span><span><span class="ML__cmr">4</span></span></span><span style="top:-3.21em"><span class="pstrut" style="height:3em"></span><span class="ML__frac-line"></span></span><span class="ML__center" style="top:-3.67em"><span class="pstrut" style="height:3em"></span><span><span class="ML__cmr">3</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.69em"></span></span></span><span class="nulldelimiter"></span></span></span></span></span></span></span>`
+const mathliveHtml = `<span tabindex="0"  aria-label=" half plus three quarter "> <span tabindex="-1" ><span class="ML__latex"><span class="ML__strut" style="height:1.15em"></span><span class="ML__strut--bottom" style="height:1.84em;vertical-align:-0.68em"></span><span class="ML__base"><span class="ML__mfrac"><span class="ML__nulldelimiter ML__open" style="width:0.12em"></span><span class="ML__vlist-t ML__vlist-t2"><span class="ML__vlist-r"><span class="ML__vlist" style="height:1.15em"><span class="ML__center" style="top:-2.31em"><span class="ML__pstrut" style="height:3em"></span><span style="height:0.65em;display:inline-block"><span class="ML__cmr">2</span></span></span><span style="top:-3.23em"><span class="ML__pstrut" style="height:3em"></span><span class="ML__frac-line" style="height:0.04em;display:inline-block"></span></span><span class="ML__center" style="top:-3.5em"><span class="ML__pstrut" style="height:3em"></span><span style="height:0.65em;display:inline-block"><span class="ML__cmr">1</span></span></span></span><span class="ML__vlist-s">​</span></span><span class="ML__vlist-r"><span class="ML__vlist" style="height:0.69em"></span></span></span><span class="ML__nulldelimiter ML__close" style="width:0.12em"></span></span><span style="display:inline-block;width:0.23em"></span><span class="ML__cmr">+</span><span style="display:inline-block;width:0.23em"></span><span class="ML__mfrac"><span class="ML__nulldelimiter ML__open" style="width:0.12em"></span><span class="ML__vlist-t ML__vlist-t2"><span class="ML__vlist-r"><span class="ML__vlist" style="height:1.15em"><span class="ML__center" style="top:-2.31em"><span class="ML__pstrut" style="height:3em"></span><span style="height:0.65em;display:inline-block"><span class="ML__cmr">4</span></span></span><span style="top:-3.23em"><span class="ML__pstrut" style="height:3em"></span><span class="ML__frac-line" style="height:0.04em;display:inline-block"></span></span><span class="ML__center" style="top:-3.5em"><span class="ML__pstrut" style="height:3em"></span><span style="height:0.65em;display:inline-block"><span class="ML__cmr">3</span></span></span></span><span class="ML__vlist-s">​</span></span><span class="ML__vlist-r"><span class="ML__vlist" style="height:0.69em"></span></span></span><span class="ML__nulldelimiter ML__close" style="width:0.12em"></span></span></span></span></span></span>`
 describe('MahtHelper ', () => {
     test('detects text has mathml', () => {
         expect(MathHelper.containsMathML(text + mathML)).toBeTruthy()
@@ -98,7 +99,7 @@ describe('MahtHelper ', () => {
     test('detects content wrapped for tinymce', () => {
         expect(
             MathHelper.checkMathContentWrappedForTMCE(
-                `<span class ='windward-math-content'>` +
+                `<span class='windward-math-content'>` +
                     srEnhancedlatex +
                     `</span>` +
                     text +
@@ -111,7 +112,7 @@ describe('MahtHelper ', () => {
         expect(MathHelper.wrapMathContentForTinyMCE(srEnhancedlatex)).toEqual(
             `<span class ='windward-math-content'>` +
                 srEnhancedlatex +
-                `</span>`
+                `</span> &nbsp;`
         )
     })
     test('can wrap latexContent in math span for tinymce', () => {
@@ -122,7 +123,38 @@ describe('MahtHelper ', () => {
                 '$$' +
                 latexContent +
                 '$$' +
-                `</span>`
+                `</span> &nbsp;`
+        )
+    })
+
+    test('can wrap latexContent in math span for tinymce only once', () => {
+        expect(
+            MathHelper.wrapMathContentForTinyMCE(
+                '$$' + latexContent + '$$' + '$$' + latexContent + '$$'
+            )
+        ).toEqual(
+            `<span class ='windward-math-content'>` +
+                '$$' +
+                latexContent +
+                '$$' +
+                `</span> &nbsp;` +
+                `<span class ='windward-math-content'>` +
+                '$$' +
+                latexContent +
+                '$$' +
+                `</span> &nbsp;`
         )
     })
+    test('can convert latex to speakable text', () => {
+        expect(
+            MathHelper.convertMathContentToSpeakableText(
+                '$$' + latexContent + '$$'
+            )
+        ).toEqual(` half plus three quarter `)
+    })
+    test('can convert SR enhanced latex to speakable text', () => {
+        expect(
+            MathHelper.convertMathContentToSpeakableText(srEnhancedlatex)
+        ).toEqual(` half plus three quarter `)
+    })
 })

package/tsconfig.json

@@ -6,6 +6,10 @@
         "noImplicitAny": false,
         "outDir": "./lib",
         "strict": true,
+        "lib": [
+            "ES2021.String",
+            "dom"
+        ],
         "paths": {
             "~/*": ["./*"],
             "@/*": ["./*"]