@windward/core 0.3.0 → 0.4.1

package/components/utils/glossary/CourseGlossary.vue

@@ -14,7 +14,7 @@
                             <DialogBox
                                 v-model="dialog"
                                 color="primary"
-                                max-width="600px"
+                                max-width="600"
                                 :trigger="
                                     $PermissionService.userHasAccessTo(
                                         'windward.global.course,windward.organization.course.contentBlock',
@@ -101,6 +101,7 @@
                                     <v-btn
                                         color="error"
                                         class="outlined"
+                                        elevation="0"
                                         outlined
                                         :disabled="
                                             !$PermissionService.userHasAccessTo(
@@ -118,6 +119,7 @@
                                     <v-btn
                                         color="primary"
                                         class="outlined"
+                                        elevation="0"
                                         outlined
                                         :disabled="
                                             !$PermissionService.userHasAccessTo(

package/config/tinymce.config.ts

@@ -7,6 +7,7 @@ export default {
                 groups: [
                     {
                         name: 'windward.core.components.utils.math_expression_editor.basic',
+                        type: 'basic',
                         buttons: [
                             {
                                 cmd: false,
@@ -25,50 +26,56 @@ export default {
                                 text: 'i',
                             },
                             {
-                                cmd: true,
+                                cmd: false,
+                                text: '\\$',
+                            },
+                            {
+                                cmd: false,
+                                text: '\\%',
+                            },
+                            {
+                                cmd: false,
                                 text: '\\pi',
-                                latex: '\\pi',
                             },
                             {
-                                cmd: true,
-                                text: '{x}^{2}',
-                                latex: 'x^2',
+                                cmd: false,
+                                text: 'x^2',
+                                latex: '^2',
                             },
                             {
-                                cmd: true,
-                                text: '{x}^{y}',
-                                latex: '\\placeholder{x}^\\placeholder{y}',
+                                cmd: false,
+                                text: 'x^y',
+                                latex: '^\\placeholder{}',
                             },
                             {
-                                cmd: true,
-                                text: '{x}_{y}',
-                                latex: '\\placeholder{x}_\\placeholder{y}',
+                                cmd: false,
+                                text: 'x_y',
+                                latex: '_\\placeholder{}',
                             },
                             {
                                 text: '\\sqrt{x}',
-                                latex: '\\sqrt{x}',
-                                cmd: true,
+                                latex: '\\sqrt{\\placeholder{}}',
+                                cmd: false,
                             },
                             {
-                                latex: '\\sqrt[\\placeholder{n}]{\\placeholder{x}}',
+                                latex: '\\sqrt[\\placeholder{}]{\\placeholder{}}',
                                 text: '\\sqrt[n]{x}',
-                                cmd: true,
+                                cmd: false,
                             },
                             {
                                 cmd: false,
                                 text: '\\frac{x}{y}',
-                                latex:
-                                    '\\frac\n' +
-                                    '    {\\placeholder[numerator]{?}}\n' +
-                                    '    {\\placeholder[denominator]{?}}',
+                                latex: '\\frac',
                             },
                             {
                                 cmd: false,
                                 text: '\\left|x\\right|',
+                                latex: '\\left|\\placeholder{}\\right|',
                             },
                             {
                                 cmd: false,
-                                text: '\\left\\{\\right\\}',
+                                text: '\\left\\{x\\right\\}',
+                                latex: '\\left\\{\\placeholder{}\\right\\}',
                             },
                             {
                                 cmd: false,
@@ -82,6 +89,7 @@ export default {
                     },
                     {
                         name: 'windward.core.components.utils.math_expression_editor.operators',
+                        type: 'operators',
                         buttons: [
                             {
                                 cmd: false,
@@ -152,6 +160,7 @@ export default {
                     },
                     {
                         name: 'windward.core.components.utils.math_expression_editor.trigonometry',
+                        type: 'trigonometry',
                         buttons: [
                             {
                                 cmd: false,
@@ -193,6 +202,7 @@ export default {
                     },
                     {
                         name: 'windward.core.components.utils.math_expression_editor.greek',
+                        type: 'greek',
                         buttons: [
                             {
                                 cmd: false,
@@ -266,6 +276,7 @@ export default {
                     },
                     {
                         name: 'windward.core.components.utils.math_expression_editor.probability',
+                        type: 'probability',
                         buttons: [
                             {
                                 cmd: false,
@@ -292,6 +303,7 @@ export default {
                     },
                     {
                         name: 'windward.core.components.utils.math_expression_editor.eq_systems',
+                        type: 'eq_systems',
                         buttons: [
                             {
                                 cmd: false,

package/helpers/FillInBlankHelper.ts

@@ -1,53 +1,59 @@
-
 export default class FillInBlankHelper {
-
-    private static FillBlankRegex = /<span.*?.class="windward-fill-blank".*?>(.*?)<\/span>/gi;
+    private static FillBlankRegex =
+        /<span.*?.class="windward-fill-blank".*?>(.*?)<\/span>/gi
 
     public static containsFillInBlank(content: string): boolean {
-        const regex = new RegExp(this.FillBlankRegex);
+        const regex = new RegExp(this.FillBlankRegex)
 
-        return regex.exec(content) !== null;
+        return regex.exec(content) !== null
     }
 
     public static makeToolTip(htmlString: string): string {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(htmlString, "text/html");
+        const parser: any = new DOMParser()
+        const doc: any = parser.parseFromString(htmlString, 'text/html')
         // doc.body.firstChild can be null
-        let answer = doc.body.firstChild ? doc.body.firstChild.textContent : "";
-        let feedback = "";
-        if (doc.body.getElementsByClassName("windward-fill-blank")[0]["dataset"]["feedback"] !== undefined) {
-            feedback = doc.body.getElementsByClassName("windward-fill-blank")[0]["dataset"]["feedback"];
+        let answer = doc.body.firstChild ? doc.body.firstChild.textContent : ''
+        let feedback = ''
+        if (
+            doc.body.getElementsByClassName('windward-fill-blank')[0][
+                'dataset'
+            ]['feedback'] !== undefined
+        ) {
+            feedback = doc.body.getElementsByClassName(
+                'windward-fill-blank'
+            )[0]['dataset']['feedback']
         }
 
         return (
-            "<plugin-core-fill-in-blank-input answer=\"" + answer + "\" description=\"" + feedback + "\">" +
-            "</template>" + "</plugin-core-fill-in-blank-input>");
-
+            '<plugin-core-fill-in-blank-input answer="' +
+            answer +
+            '" description="' +
+            feedback +
+            '">' +
+            '</template>' +
+            '</plugin-core-fill-in-blank-input>'
+        )
     }
 
-    public escapeHtml(html) {
-        var text = document.createTextNode(html);
-        var p = document.createElement("p");
-        p.appendChild(text);
-        return p.innerHTML;
+    public escapeHtml(html: any) {
+        var text = document.createTextNode(html)
+        var p = document.createElement('p')
+        p.appendChild(text)
+        return p.innerHTML
     }
 
     public static renderFillInTHeBlankHtml(content: string, glossary: any) {
-        const regex = new RegExp(this.FillBlankRegex);
-
+        const regex = new RegExp(this.FillBlankRegex)
 
-        let match;
+        let match
         while ((match = regex.exec(content)) !== null) {
             // This is necessary to avoid infinite loops with zero-width matches
             if (match.index === regex.lastIndex) {
-                regex.lastIndex++;
+                regex.lastIndex++
             }
-            content = content.replace(
-                match[0],
-                this.makeToolTip(match[0])
-            );
+            content = content.replace(match[0], this.makeToolTip(match[0]))
         }
 
-        return content;
+        return content
     }
 }

package/helpers/GlossaryHelper.ts

@@ -1,53 +1,49 @@
-import GlossaryTerm from "../helpers/GlossaryTerm";
+import GlossaryTerm from '../helpers/GlossaryTerm'
 import * as _ from 'lodash'
 
 export default class GlossaryHelper {
-   private static glossaryRegex = /<span.*?.class="glossary-word".*?>(.*?)<\/span>/g
-   public static makeToolTip(term :GlossaryTerm,text :String): string {
-       let word =
-           _.isString(term.term)?
-       '<template v-slot:term>' +
-               text +
-       '</template>' :''
-       let definition =
-           _.isString(term.definition)?
-               '<template v-slot:definition>' +
-               term.definition +
-               '</template>' :''
-       let alternate_forms =
-           _.isString(term.alternate_forms)?
-               '<template v-slot:alternate_forms>' +
-               term.alternate_forms +
-               '</template>' :''
-       let related_terms =
-           _.isString(term.related_term)?
-               '<template v-slot:related_terms>' +
-               term.related_term +
-               '</template>' :''
-       return (
-           '<plugin-core-glossary-tool-tip>' +
-           word
-           +
-           definition
-           +
-           alternate_forms
-           +
-           related_terms
-           +
-           '</plugin-core-glossary-tool-tip>')
-
+    private static glossaryRegex =
+        /<span.*?.class="glossary-word".*?>(.*?)<\/span>/g
+    public static makeToolTip(term: GlossaryTerm, text: String): string {
+        let word = _.isString(term.term)
+            ? '<template v-slot:term>' + text + '</template>'
+            : ''
+        let definition = _.isString(term.definition)
+            ? '<template v-slot:definition>' + term.definition + '</template>'
+            : ''
+        let alternate_forms = _.isString(term.alternate_forms)
+            ? '<template v-slot:alternate_forms>' +
+              term.alternate_forms +
+              '</template>'
+            : ''
+        let related_terms = _.isString(term.related_term)
+            ? '<template v-slot:related_terms>' +
+              term.related_term +
+              '</template>'
+            : ''
+        return (
+            '<plugin-core-glossary-tool-tip>' +
+            word +
+            definition +
+            alternate_forms +
+            related_terms +
+            '</plugin-core-glossary-tool-tip>'
+        )
     }
-    public static containsGlossaryTerms(content :string): boolean {
+    public static containsGlossaryTerms(content: string): boolean {
         const regex = new RegExp(this.glossaryRegex)
 
         return regex.exec(content) !== null
     }
 
-    public static getContentVerifiedGlossaryTerms(content :string, glossary :any) {
-        const regex =  new RegExp( this.glossaryRegex)
+    public static getContentVerifiedGlossaryTerms(
+        content: string,
+        glossary: any
+    ) {
+        const regex = new RegExp(this.glossaryRegex)
         const currentGlossary = glossary
 
-        let match
+        let match: any
         const verifiedTerms: GlossaryTerm[] = []
         while ((match = regex.exec(content)) !== null) {
             // This is necessary to avoid infinite loops with zero-width matches
@@ -56,28 +52,40 @@ export default class GlossaryHelper {
             }
 
             // The result can be accessed through the `m`-variable.
-            currentGlossary.forEach((term) => {
+            currentGlossary.forEach((term: any) => {
                 let addTerm = true
-                verifiedTerms.forEach((verifiedTerm)=>{
-                    if(_.trim(_.toLower(verifiedTerm.term)) === _.trim(_.toLower(term.term))){
+                verifiedTerms.forEach((verifiedTerm) => {
+                    if (
+                        _.trim(_.toLower(verifiedTerm.term)) ===
+                        _.trim(_.toLower(term.term))
+                    ) {
                         addTerm = false
                     }
-            })
-                if (_.trim(_.toLower(match[1]))=== _.trim(_.toLower(term.term)) && addTerm) {
+                })
+                if (
+                    _.trim(_.toLower(match[1])) ===
+                        _.trim(_.toLower(term.term)) &&
+                    addTerm
+                ) {
                     verifiedTerms.push(new GlossaryTerm(term))
                 }
             })
-
         }
 
         return verifiedTerms
     }
 
-    public static getContentUnVerifiedGlossaryTerms(content :string, glossary :any) {
-        const regex =  new RegExp( this.glossaryRegex)
-
-        let match
-        const verifiedTerms = this.getContentVerifiedGlossaryTerms(content,glossary)
+    public static getContentUnVerifiedGlossaryTerms(
+        content: string,
+        glossary: any
+    ) {
+        const regex: any = new RegExp(this.glossaryRegex)
+
+        let match: any
+        const verifiedTerms = this.getContentVerifiedGlossaryTerms(
+            content,
+            glossary
+        )
         const unVerifiedTerms: GlossaryTerm[] = []
         while ((match = regex.exec(content)) !== null) {
             // This is necessary to avoid infinite loops with zero-width matches
@@ -87,33 +95,41 @@ export default class GlossaryHelper {
 
             let inGlossary = []
 
-            inGlossary = glossary.filter(item =>  {
-                if(_.trim(_.toLower(item.term ))=== _.trim(_.toLower(match[1]))){
+            inGlossary = glossary.filter((item: any) => {
+                if (
+                    _.trim(_.toLower(item.term)) === _.trim(_.toLower(match[1]))
+                ) {
                     return item
-
                 }
-            });
+            })
 
             let inUnverifiedArray = false
-            unVerifiedTerms.forEach((unVerifiedTerm)=>{
-                if(_.trim(_.toLower(unVerifiedTerm.term)) ===  _.trim(_.toLower(match[1]))){
+            unVerifiedTerms.forEach((unVerifiedTerm: any) => {
+                if (
+                    _.trim(_.toLower(unVerifiedTerm.term)) ===
+                    _.trim(_.toLower(match[1]))
+                ) {
                     inUnverifiedArray = true
                 }
             })
-            if (  inGlossary.length===0 && !inUnverifiedArray){
-                unVerifiedTerms.push(new GlossaryTerm( {term:_.trim(match[1]),definition:'n/a'}))
+            if (inGlossary.length === 0 && !inUnverifiedArray) {
+                unVerifiedTerms.push(
+                    new GlossaryTerm({
+                        term: _.trim(match[1]),
+                        definition: 'n/a',
+                    })
+                )
             }
-
-
         }
 
         return unVerifiedTerms
     }
-    public static renderGlossaryWordsHtml(content :string, glossary :any) {
-        const regex = new RegExp( this.glossaryRegex)
-        const currentGlossary = glossary
+    public static renderGlossaryWordsHtml(content: string, glossary: any) {
+        const regex: any = new RegExp(this.glossaryRegex)
+        const currentGlossary: any = glossary
+
+        let match: any = []
 
-        let match
         while ((match = regex.exec(content)) !== null) {
             // This is necessary to avoid infinite loops with zero-width matches
             if (match.index === regex.lastIndex) {
@@ -121,15 +137,16 @@ export default class GlossaryHelper {
             }
 
             // The result can be accessed through the `m`-variable.
-                currentGlossary.forEach((term) => {
-                    if (_.trim(_.toLower(match[1]))=== _.trim(_.toLower(term.term))) {
-                        content = content.replace(
-                            match[0],
-                            this.makeToolTip(term,match[1])
-                        )
-                    }
-                })
-
+            currentGlossary.forEach((term: any) => {
+                if (
+                    _.trim(_.toLower(match[1])) === _.trim(_.toLower(term.term))
+                ) {
+                    content = content.replace(
+                        match[0],
+                        this.makeToolTip(term, match[1])
+                    )
+                }
+            })
         }
 
         return content

package/helpers/MathHelper.ts

@@ -1,6 +1,6 @@
 import * as mathLiveObject from 'mathlive'
 import * as _ from 'lodash'
-import { MathMLToLaTeX } from 'mathml-to-latex';
+import { MathMLToLaTeX } from 'mathml-to-latex'
 export default class MathHelper {
     /**
      * expose mathlive object
@@ -67,38 +67,59 @@ export default class MathHelper {
         return content
     }
 
+
     /**
-     * wrapMathContentForTinyMCE
-     * @param content
-     * wrap content in span with math class for tinymce
-     * @return string
+     * Wraps math content.
+     *
+     * @param {string} match - The matched string to be wrapped.
+     * @param {string} content - The content to be replaced.
+     * @param {string} temp - The temporary string.
+     * @return {string} - The replaced content with wrapped math content.
+     */
+    private static wrapMathContentMatch(match : string, content: string, temp: string): string {
+        let wrapped = `<span class ='windward-math-content'>${match}</span> &nbsp;`;
+        if (match.match(/\$\$.*?\$\$/g) !== null && temp !== '') {
+            wrapped = `<span class ='windward-math-content'>$$$${temp}$$$</span> &nbsp;`;
+        }
+        return content.replaceAll(match, wrapped);
+    }
+
+    /**
+     * Checks if the given content already has a specific template wrapped around it.
+     *
+     * @param {string} content - The original content to be checked.
+     * @param {string} match - The template string to be compared against.
+     * @param {string} temp - The temp string to be compared against for final template.
+     * @return {boolean} - True if the content already contains the specified template, false otherwise.
+     */
+    private static contentAlreadyWrapped(content: string, match: string, temp: string): boolean {
+        const wrappedTemplates = [
+            `<span class=\"windward-math-content\" contenteditable=\"true\">$$${temp}$$</span>`,
+            `<span class='windward-math-content'>$$${temp}$$</span>`,
+            `<span class ='windward-math-content'>$$${temp}$$</span>`,
+            `<span class=\"windward-math-content\">$$${temp}$$</span>`];
+        return _.some(wrappedTemplates, template => _.includes(content, template));
+    }
+
+    /**
+     * Wraps math content for TinyMCE.
+     *
+     * @param {string} content - The content to be wrapped.
+     * @returns {string} - The wrapped content.
      */
     public static wrapMathContentForTinyMCE(content: string): string {
-        const regex = /(\*\*|\$\$)(.*?)\1/g
-        const matches = content.match(regex)
+        const regex = /(\*\*|\$\$)(.*?)\1/g;
+        const matches = content.match(regex);
+
         if (matches) {
             matches.forEach((match) => {
-                const temp = match.replace(/\$\$/g, '')
-                if (match.match(/\$\$.*?\$\$/g) !== null) {
-                    content = content.replace(
-                        match,
-                        "<span class ='windward-math-content'>$$$" +
-                            temp +
-                            '$$$</span>'
-                    )
-                }
-                if (match.match(/\*\*(.*?)\*\*/g) !== null) {
-                    content = content.replace(
-                        match,
-                        "<span class ='windward-math-content'>" +
-                            match +
-                            '</span>'
-                    )
+                const temp = match.replace(/\$\$/g, '');
+                if (!this.contentAlreadyWrapped(content, match, temp)) {
+                    content = this.wrapMathContentMatch(match, content, temp);
                 }
-            })
+            });
         }
-
-        return content
+        return content;
     }
 
     /**
@@ -109,7 +130,7 @@ export default class MathHelper {
      */
     public static checkMathContentWrappedForTMCE(content: string): boolean {
         const regex =
-            /\<span class ='windward-math-content'>(\*\*|\$\$)(.*?)\1<\/span>/g
+            /<span\s+class.*?=.*?(windward-math-content).*?>(.*?)<\/span>/g
 
         return regex.exec(content) !== null
     }
@@ -142,6 +163,28 @@ export default class MathHelper {
         return content
     }
 
+    /**
+     * Converts LaTeX content to speakable text.
+     *
+     * @param {string} content - The LaTeX content to be converted.
+     * @return {string}
+     */
+    private static convertContentLatexToSpeakableText(content : string): string {
+        const regex = /\$\$.*?\$\$/g
+
+        const matches = content.match(regex)
+        if (matches) {
+            matches.forEach((match) => {
+                content = content.replace(
+                    match,
+                    mathLiveObject.convertLatexToSpeakableText(match)
+                )
+            })
+        }
+
+        return content
+    }
+
     /**
      * convertContentSREnhancedLatexToHtml
      * @param content
@@ -172,6 +215,29 @@ export default class MathHelper {
         return content
     }
 
+    /**
+     * Converts enhanced LaTeX content to speakable text.
+     *
+     * @param {string} content - The enhanced LaTeX content to convert.
+     * @return {string}
+     */
+    private static convertContentSREnhancedLatexToSpeakableText(content: string): string {
+        const regex = /\*\*.*?\*\*/g
+
+        const matches = content.match(regex)
+        if (matches) {
+            matches.forEach((match: any) => {
+                const mathObject = JSON.parse(match.replace(/\*\*/g, ''))
+                content = content.replace(
+                    match,
+                    mathObject.sr_text
+                )
+            })
+        }
+
+        return content
+    }
+
     /**
      * convertMathContentToHtml
      * @param content
@@ -184,7 +250,21 @@ export default class MathHelper {
             MathHelper.convertContentLatexToHtml(
                 MathHelper.convertContentMathMLtoLatex(content)
             )
-        ).replace(/contenteditable="true"/g, '');
+        ).replace(/contenteditable="true"/g, '')
+    }
+
+    /**
+     * Converts math content to speakable text.
+     *
+     * @param {string} content - The math content to be converted.
+     * @return {string} .
+     */
+    public static convertMathContentToSpeakableText(content: string): string {
+        return MathHelper.convertContentSREnhancedLatexToSpeakableText(
+            MathHelper.convertContentLatexToSpeakableText(
+                MathHelper.convertContentMathMLtoLatex(content)
+            )
+        ).replace(/contenteditable="true"/g, '')
     }
 
     /**