@windward/core 0.4.0 → 0.4.2

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/image.ts

@@ -1,4 +1,6 @@
 export default {
+    current_image_file: 'Current Image File',
+    place_image: 'Place Image',
     hide_background: 'Hide Background',
     modal: 'Click to open in modal',
     decorative: 'Decorative Image',

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

@@ -7,8 +7,9 @@ export default {
     probability: 'Probability',
     matrix: 'Matrix',
     eq_systems: 'Equation Systems',
-    screen_reader_text: 'screen Reader Text',
-    default_screen_reader_text: 'Default screen Reader Text',
-    custom_screen_reader_text: 'Customize screen Reader Text',
+    screen_reader_text: 'Screen Reader Text',
+    default_screen_reader_text: 'Default Screen Reader Text',
+    custom_screen_reader_text: 'Customize Screen Reader Text',
     read_text_aloud: 'Read Text aloud',
+    accessibility: 'Accessibility',
 }

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/es-ES/components/settings/image.ts

@@ -1,4 +1,6 @@
 export default {
+    current_image_file: 'Archivo de imagen actual',
+    place_image: 'Colocar imagen',
     hide_background: 'Ocultar fondo',
     modal: 'Haga clic para abrir en modal',
     decorative: 'Imagen decorativa',

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

@@ -8,7 +8,8 @@ export default {
     matrix: 'Matriz',
     eq_systems: 'Sistemas de ecuaciones',
     screen_reader_text: 'Texto del lector de pantalla',
-    default_screen_reader_text: 'Texto del lector de pantalla auto generatpr',
+    default_screen_reader_text: 'Texto del lector de pantalla auto generado',
     custom_screen_reader_text: 'Personalizar el texto del lector de pantalla/',
     read_text_aloud: 'Leer texto',
+    accessibility: 'Accesibilidad',
 }

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/sv-SE/components/settings/image.ts

@@ -1,4 +1,6 @@
 export default {
+    current_image_file: 'Aktuell bildfil',
+    place_image: 'Placera bild',
     hide_background: 'Dölj bakgrund',
     modal: 'Klicka för att öppna i modal',
     decorative: 'Dekorativ bild',

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

@@ -11,4 +11,5 @@ export default {
     default_screen_reader_text: 'Standard skärmläsare text',
     custom_screen_reader_text: 'Anpassa skärmläsartext',
     read_text_aloud: 'Läs texten högt',
+    accessibility: 'Tillgänglighet',
 }

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/package.json

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

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()
@@ -144,4 +145,16 @@ describe('MahtHelper ', () => {
                 `</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,7 +6,10 @@
         "noImplicitAny": false,
         "outDir": "./lib",
         "strict": true,
-        "lib": ["ES2021.String"],
+        "lib": [
+            "ES2021.String",
+            "dom"
+        ],
         "paths": {
             "~/*": ["./*"],
             "@/*": ["./*"]