@windward/core 0.4.0 → 0.4.1

package/components/utils/TinyMCEWrapper.vue

@@ -26,9 +26,27 @@
         <v-btn-toggle dense multiple class="pt-1 d-flex justify-end">
             <slot name="actions-prepend" :render="render"></slot>
             <slot name="actions" :render="render">
+                <v-btn-toggle dense>
+                    <v-btn v-if="render" color="primary" outlined @click="read">
+                        <v-icon> mdi-play</v-icon>
+                    </v-btn>
+                    <v-btn
+                        v-if="render"
+                        color="primary"
+                        outlined
+                        @click="pause"
+                    >
+                        <v-icon> mdi-pause</v-icon>
+                    </v-btn>
+                    <v-btn v-if="render" color="primary" outlined @click="stop">
+                        <v-icon> mdi-stop</v-icon>
+                    </v-btn>
+                </v-btn-toggle>
+
                 <v-btn
                     v-if="render"
                     color="primary"
+                    elevation="0"
                     outlined
                     @click="onClickOutside"
                     >{{
@@ -47,6 +65,7 @@
 import _ from 'lodash'
 import 'tinymce'
 import Editor from '@tinymce/tinymce-vue'
+import { getTinymce } from '@tinymce/tinymce-vue/lib/cjs/main/ts/TinyMCE'
 
 /* Required TinyMCE components */
 import 'tinymce/icons/default/icons.min.js'
@@ -96,11 +115,12 @@ import 'tinymce/skins/ui/oxide-dark/content.js'
 import 'tinymce/skins/content/default/content.js'
 import 'tinymce/skins/content/dark/content.js'
 
-import { WindwardPlugins } from '../../helpers/tinymce/plugin'
+import { WindwardPlugins } from '../../helpers/tinymce/WindwardPlugins'
 import ContentCss from '!raw-loader!sass-loader!./assets/tinymce/content/global.scss'
 import EditorCss from '!raw-loader!sass-loader!./assets/tinymce/ui/global.scss'
 import Crypto from '~/helpers/Crypto'
 import MathHelper from '../../helpers/MathHelper'
+import { Synthesizer } from 'speechreader'
 export default {
     name: 'ContentEditorRichText',
     components: {
@@ -108,7 +128,6 @@ export default {
     },
     props: {
         value: { type: String, required: true, default: '' },
-        api_key: { type: String, required: true, default: '' },
         height: { type: Number, required: false, default: null },
         menubar: {
             type: String,
@@ -119,7 +138,7 @@ export default {
             type: String,
             required: false,
             default:
-                'undo redo | formatselect | fontsizeselect  | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table bullist numlist outdent indent | glossaryButton fibButton mathButton ',
+                'undo redo | styles | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table bullist numlist outdent indent | glossaryButton fibFormatButton mathButton ',
         },
         root_block: { type: String, required: false, default: 'div' },
         label: { type: String, required: true, default: '' },
@@ -136,6 +155,8 @@ export default {
             render: false,
             text: '',
             seed: Crypto.id(),
+            synthesizer: null,
+            paused: false,
         }
     },
     watch: {
@@ -177,6 +198,7 @@ export default {
                 visual: false,
                 forced_root_block: this.root_block,
                 menubar: this.filteredMenubar,
+                toolbar_mode: 'sliding',
                 browser_spellcheck: true,
                 contextmenu: false,
                 statusbar: false,
@@ -187,8 +209,6 @@ export default {
                 body_class: this.isDarkTheme
                     ? 'editor--theme-dark'
                     : 'editor--theme-light',
-                block_formats:
-                    'Paragraph=p; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6;',
                 menu: {
                     insert: {
                         title: 'Insert',
@@ -302,9 +322,11 @@ export default {
                 ],
                 setup() {
                     // Here we can add plugin
-                    window.tinymce.PluginManager.add(
+                    getTinymce().PluginManager.add(
                         'WindwardToolKit',
-                        WindwardPlugins
+                        (editor) => {
+                            new WindwardPlugins(editor)
+                        }
                     )
                 },
 
@@ -351,21 +373,59 @@ export default {
                     ],
                 },
                 style_formats: [
-                    { title: 'Windward formats' },
                     {
-                        title: this.$t(
-                            'windward.core.components.utils.tiny_mce_wrapper.term'
-                        ),
-                        format: 'glossary',
+                        title: 'Headings',
+                        items: [
+                            { title: 'Heading 2', format: 'h2' },
+                            { title: 'Heading 3', format: 'h3' },
+                            { title: 'Heading 4', format: 'h4' },
+                            { title: 'Heading 5', format: 'h5' },
+                            { title: 'Heading 6', format: 'h6' },
+                        ],
                     },
                     {
-                        title: this.$t(
-                            'windward.core.components.utils.tiny_mce_wrapper.fill_blank'
-                        ),
-                        format: 'fib',
+                        title: 'Inline',
+                        items: [
+                            { title: 'Bold', format: 'bold' },
+                            { title: 'Italic', format: 'italic' },
+                            { title: 'Underline', format: 'underline' },
+                            { title: 'Strikethrough', format: 'strikethrough' },
+                            { title: 'Superscript', format: 'superscript' },
+                            { title: 'Subscript', format: 'subscript' },
+                            { title: 'Code', format: 'code' },
+                        ],
+                    },
+                    {
+                        title: 'Blocks',
+                        items: [{ title: 'Paragraph', format: 'p' }],
+                    },
+                    {
+                        title: 'Align',
+                        items: [
+                            { title: 'Left', format: 'alignleft' },
+                            { title: 'Center', format: 'aligncenter' },
+                            { title: 'Right', format: 'alignright' },
+                            { title: 'Justify', format: 'alignjustify' },
+                        ],
+                    },
+                    {
+                        title: 'Windward',
+                        items: [
+                            {
+                                title: this.$t(
+                                    'windward.core.components.utils.tiny_mce_wrapper.term'
+                                ),
+                                format: 'glossary',
+                            },
+                            {
+                                title: this.$t(
+                                    'windward.core.components.utils.tiny_mce_wrapper.fill_blank'
+                                ),
+                                format: 'fib',
+                            },
+                        ],
                     },
                 ],
-                style_formats_merge: true,
                 placeholder: this.label
                     ? this.label
                     : this.$t(
@@ -390,7 +450,6 @@ export default {
                 importcss_append: true,
             }
         },
-
         elementBody() {
             const ele = document.querySelector('.tinymce-included-' + this.seed)
 
@@ -401,6 +460,31 @@ export default {
         },
     },
     methods: {
+        read() {
+            if (this.paused) {
+                this.resume()
+            } else {
+                this.synthesizer = new Synthesizer(
+                    MathHelper.convertMathContentToSpeakableText(this.text),
+                    this.$i18n.locale
+                )
+                this.synthesizer.play()
+            }
+        },
+        pause() {
+            if (!this.paused) {
+                this.synthesizer.pause()
+                this.paused = true
+            }
+        },
+        resume() {
+            this.synthesizer.resume()
+            this.paused = false
+        },
+        stop() {
+            this.synthesizer.stop()
+            this.paused = false
+        },
         onEditorFocus() {
             if (!this.render) {
                 this.seed = Crypto.id()

package/components/utils/glossary/CourseGlossary.vue

@@ -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,
@@ -33,47 +34,46 @@ export default {
                                 text: '\\%',
                             },
                             {
-                                cmd: true,
+                                cmd: false,
                                 text: '\\pi',
-                                latex: '\\pi',
                             },
                             {
-                                cmd: true,
+                                cmd: false,
                                 text: 'x^2',
                                 latex: '^2',
                             },
                             {
-                                cmd: true,
-                                text: '{x}^{y}',
+                                cmd: false,
+                                text: 'x^y',
                                 latex: '^\\placeholder{}',
                             },
                             {
-                                cmd: true,
-                                text: '{x}_{y}',
+                                cmd: false,
+                                text: 'x_y',
                                 latex: '_\\placeholder{}',
                             },
                             {
                                 text: '\\sqrt{x}',
                                 latex: '\\sqrt{\\placeholder{}}',
-                                cmd: true,
+                                cmd: false,
                             },
                             {
                                 latex: '\\sqrt[\\placeholder{}]{\\placeholder{}}',
                                 text: '\\sqrt[n]{x}',
-                                cmd: true,
+                                cmd: false,
                             },
                             {
-                                cmd: true,
+                                cmd: false,
                                 text: '\\frac{x}{y}',
                                 latex: '\\frac',
                             },
                             {
-                                cmd: true,
+                                cmd: false,
                                 text: '\\left|x\\right|',
                                 latex: '\\left|\\placeholder{}\\right|',
                             },
                             {
-                                cmd: true,
+                                cmd: false,
                                 text: '\\left\\{x\\right\\}',
                                 latex: '\\left\\{\\placeholder{}\\right\\}',
                             },
@@ -85,11 +85,11 @@ export default {
                                 cmd: false,
                                 text: '(x,y)',
                             },
-
                         ],
                     },
                     {
                         name: 'windward.core.components.utils.math_expression_editor.operators',
+                        type: 'operators',
                         buttons: [
                             {
                                 cmd: false,
@@ -160,6 +160,7 @@ export default {
                     },
                     {
                         name: 'windward.core.components.utils.math_expression_editor.trigonometry',
+                        type: 'trigonometry',
                         buttons: [
                             {
                                 cmd: false,
@@ -201,6 +202,7 @@ export default {
                     },
                     {
                         name: 'windward.core.components.utils.math_expression_editor.greek',
+                        type: 'greek',
                         buttons: [
                             {
                                 cmd: false,
@@ -274,6 +276,7 @@ export default {
                     },
                     {
                         name: 'windward.core.components.utils.math_expression_editor.probability',
+                        type: 'probability',
                         buttons: [
                             {
                                 cmd: false,
@@ -300,6 +303,7 @@ export default {
                     },
                     {
                         name: 'windward.core.components.utils.math_expression_editor.eq_systems',
+                        type: 'eq_systems',
                         buttons: [
                             {
                                 cmd: false,

package/helpers/MathHelper.ts

@@ -163,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
@@ -193,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
@@ -208,6 +253,20 @@ export default class MathHelper {
         ).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, '')
+    }
+
     /**
      * convertMathMLToLatex
      * @param content