@windward/core 0.8.0 → 0.9.1

package/components/utils/TinyMCEWrapper.vue

@@ -18,12 +18,6 @@
                 :init="config"
                 tag-name="div"
                 model-events="change keydown blur focus mouseDown paste input submit SetContent"
-                @onfocus="onEditorFocus"
-                v-click-outside="{
-                    handler: onClickOutside,
-                    closeConditional,
-                    include,
-                }"
             >
             </Editor>
 
@@ -35,7 +29,7 @@
         <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-if="allowRead">
+                <v-btn-toggle v-if="allowRead" dense>
                     <v-btn v-if="render" color="primary" outlined @click="read">
                         <v-icon> mdi-play</v-icon>
                     </v-btn>
@@ -51,19 +45,6 @@
                         <v-icon> mdi-stop</v-icon>
                     </v-btn>
                 </v-btn-toggle>
-
-                <v-btn
-                    v-if="render && !inline"
-                    color="primary"
-                    elevation="0"
-                    outlined
-                    @click="onClickOutside"
-                    >{{
-                        $t(
-                            'windward.core.components.utils.tiny_mce_wrapper.minimize'
-                        )
-                    }}
-                </v-btn>
             </slot>
             <slot name="actions-append" :render="render"></slot>
         </v-btn-toggle>
@@ -124,12 +105,14 @@ import 'tinymce/skins/ui/oxide-dark/content.js'
 import 'tinymce/skins/content/default/content.js'
 import 'tinymce/skins/content/dark/content.js'
 
+import { Synthesizer } from 'speechreader'
+import Crypto from '~/helpers/Crypto'
+import MathHelper from '../../helpers/MathHelper'
 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: {
@@ -150,33 +133,22 @@ export default {
             default:
                 'undo redo | styles | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table tablerowprops tablecellprops |bullist numlist outdent indent |glossaryButton fibFormatButton mathButton a11yButton',
         },
-        root_block: { type: String, required: false, default: 'div' },
+        rootBlock: { type: String, required: false, default: 'div' },
         label: { type: String, required: false, default: '' },
         hint: { type: String, required: false, default: '' },
         inline: { type: Boolean, required: false, default: false },
         allowRead: { type: Boolean, required: false, default: false },
     },
-    beforeMount() {
-        if (MathHelper.containsLatex(this.value)) {
-            this.text = MathHelper.wrapMathContentForTinyMCE(this.value)
-        } else {
-            this.text = this.value
-        }
-    },
     data() {
         return {
-            render: false,
+            render: true,
             text: '',
             seed: Crypto.id(),
             synthesizer: null,
             paused: false,
         }
     },
-    watch: {
-        text: function (newVal) {
-            this.$emit('input', this.text)
-        },
-    },
+
     computed: {
         dataCy() {
             return (
@@ -189,36 +161,12 @@ export default {
         isDarkTheme() {
             return this.$vuetify.theme.isDark
         },
-        filteredMenubar() {
-            if (this.render) {
-                return this.menubar
-            } else {
-                return ''
-            }
-        },
-        filteredToolbar() {
-            if (this.render) {
-                return this.toolbar
-            } else {
-                return ''
-            }
-        },
-        filteredHeight() {
-            if (!this.render) {
-                return 100
-            } else if (this.height !== null) {
-                return this.height
-            } else {
-                return 500
-            }
-        },
         config() {
             return {
                 draggable_modal: true,
-                height: this.filteredHeight,
                 visual: false,
-                forced_root_block: this.root_block,
-                menubar: this.filteredMenubar,
+                forced_root_block: this.rootBlock,
+                menubar: this.menubar,
                 toolbar_mode: 'sliding',
                 browser_spellcheck: true,
                 contextmenu: false,
@@ -244,7 +192,11 @@ export default {
                         items: ' bold italic underline strikethrough superscript subscript codeformat | formats align | language | removeformat',
                     },
                 },
+                autoresize_min_height: 100,
+                autoresize_max_height: 1000,
+                autoresize_bottom_margin: 0,
                 plugins: [
+                    'autoresize',
                     'advlist',
                     'autolink',
                     'lists',
@@ -260,8 +212,13 @@ export default {
                     'wordcount',
                     'table',
                     'WindwardToolKit',
+                    'help',
                 ],
-                toolbar: this.filteredToolbar,
+                help_accessibility: true,
+                iframe_aria_text: this.$t(
+                    'windward.core.components.utils.tiny_mce_wrapper.aria_text'
+                ),
+                toolbar: this.toolbar,
                 inline: this.inline,
                 table_advtab: false,
                 table_cell_advtab: false,
@@ -352,7 +309,6 @@ export default {
                         }
                     )
                 },
-
                 formats: {
                     glossary: {
                         inline: 'span',
@@ -480,6 +436,21 @@ export default {
             return []
         },
     },
+
+    watch: {
+        text: function (_newVal) {
+            this.$emit('input', this.text)
+        },
+    },
+
+    beforeMount() {
+        if (MathHelper.containsLatex(this.value)) {
+            this.text = MathHelper.wrapMathContentForTinyMCE(this.value)
+        } else {
+            this.text = this.value
+        }
+    },
+
     methods: {
         read() {
             if (this.paused) {
@@ -510,18 +481,6 @@ export default {
                 this.paused = false
             }
         },
-        onEditorFocus() {
-            if (!this.render) {
-                this.seed = Crypto.id()
-                this.render = true
-            }
-        },
-        onClickOutside() {
-            if (this.render) {
-                this.seed = Crypto.id()
-                this.render = false
-            }
-        },
         include() {
             // vuetify function to include an element with this class into clickable area without close
             return this.elementBody
@@ -530,7 +489,7 @@ export default {
         closeConditional(e) {
             const targetClass = e.target.className
             let parentNode
-            //check if target is svg element
+            // check if target is svg element
             if (e.target.matches('svg') || e.target instanceof SVGElement) {
                 parentNode = e.target.parentNode.parentNode
             } else {
@@ -546,7 +505,6 @@ export default {
             ) {
                 return false
             } else {
-                this.onClickOutside()
                 return true
             }
         },

package/components/utils/glossary/CourseGlossary.vue

@@ -158,15 +158,17 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import _ from 'lodash'
+import { encode } from 'he'
+import CourseGlossaryForm from './CourseGlossaryForm'
 import DialogBox from '~/components/Core/DialogBox.vue'
 import Crypto from '~/helpers/Crypto'
 import Course from '~/models/Course'
 import SpeedDial from '~/components/Core/SpeedDial.vue'
+import TextViewer from '~/components/Text/TextViewer.vue'
 
-import CourseGlossaryForm from './CourseGlossaryForm'
 export default {
     name: 'CourseGlossary',
-    components: { DialogBox, CourseGlossaryForm, SpeedDial },
+    components: { DialogBox, CourseGlossaryForm, SpeedDial, TextViewer },
     layout: 'course',
     middleware: ['auth'],
     props: {},
@@ -278,7 +280,7 @@ export default {
             const updatedCourse = await course.save()
             this.$store.commit('course/set', updatedCourse)
             this.$toast.success(this.$t('shared.forms.saved'))
-            //force update on datatable
+            // force update on datatable
             this.tableKey = Crypto.id()
         },
         saveNew() {

package/components/utils/glossary/GlossaryToolTip.vue

@@ -1,6 +1,7 @@
 <template>
     <div
         class="glossary-word"
+        :class="{ active: show }"
         v-click-outside="onClickOutside"
         @click="show = !show"
     >
@@ -9,7 +10,8 @@
             v-model="show"
             :open-on-hover="false"
             color="primary"
-            max-width="200px"
+            max-width="768px"
+            z-index="10"
         >
             <template #activator="{ on }">
                 <span v-on="on">
@@ -19,6 +21,7 @@
             <div>
                 <div v-if="this.$slots['definition']">
                     <h6 class="text-capitalize">
+                        <slot name="term"></slot>
                         {{
                             $t(
                                 'windward.core.components.utils.tiny_mce_wrapper.definition'
@@ -32,6 +35,7 @@
                 </div>
                 <div v-if="this.$slots['alternate_forms']">
                     <h4 class="text-capitalize">
+                        <slot name="term"></slot>
                         {{
                             $t(
                                 'windward.core.components.utils.tiny_mce_wrapper.alternate_forms'
@@ -84,4 +88,7 @@ export default {
     font-weight: bold;
     color: var(--v-dark-text-base);
 }
+.active {
+    background: var(--v-secondary-base) !important;
+}
 </style>

package/helpers/GlossaryHelper.ts

@@ -1,22 +1,24 @@
-import GlossaryTerm from '../helpers/GlossaryTerm'
 import * as _ from 'lodash'
+import { decode } from 'he'
+import GlossaryTerm from '../helpers/GlossaryTerm'
 
 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)
+        const word = _.isString(term.term)
             ? '<template v-slot:term>' + text + '</template>'
             : ''
-        let definition = _.isString(term.definition)
+        const definition = _.isString(term.definition)
             ? '<template v-slot:definition>' + term.definition + '</template>'
             : ''
-        let alternate_forms = _.isString(term.alternate_forms)
+        const alternate_forms = _.isString(term.alternate_forms)
             ? '<template v-slot:alternate_forms>' +
               term.alternate_forms +
               '</template>'
             : ''
-        let related_terms = _.isString(term.related_term)
+        const related_terms = _.isString(term.related_term)
             ? '<template v-slot:related_terms>' +
               term.related_term +
               '</template>'
@@ -30,6 +32,7 @@ export default class GlossaryHelper {
             '</plugin-core-glossary-tool-tip>'
         )
     }
+
     public static containsGlossaryTerms(content: string): boolean {
         const regex = new RegExp(this.glossaryRegex)
 
@@ -50,7 +53,7 @@ export default class GlossaryHelper {
             if (match.index === regex.lastIndex) {
                 regex.lastIndex++
             }
-
+            match[1] = decode(match[1])
             // The result can be accessed through the `m`-variable.
             currentGlossary.forEach((term: any) => {
                 let addTerm = true
@@ -64,12 +67,15 @@ export default class GlossaryHelper {
                 })
 
                 if (
-                    ( _.trim(_.toLower(match[1])) ===
+                    (_.trim(_.toLower(match[1])) ===
                         _.trim(_.toLower(term.term)) ||
-                        term.alternate_forms && _.some(term.alternate_forms, alt => _.trim(_.toLower(alt)) === _.trim(_.toLower(match[1])))
-
-                    )
-                    &&
+                        (term.alternate_forms &&
+                            _.some(
+                                term.alternate_forms,
+                                (alt) =>
+                                    _.trim(_.toLower(alt)) ===
+                                    _.trim(_.toLower(match[1]))
+                            ))) &&
                     addTerm
                 ) {
                     verifiedTerms.push(new GlossaryTerm(term))
@@ -98,13 +104,20 @@ export default class GlossaryHelper {
                 regex.lastIndex++
             }
 
+            match[1] = decode(match[1])
             let inGlossary = []
 
             inGlossary = glossary.filter((item: any) => {
                 if (
-                    _.trim(_.toLower(item.term)) === _.trim(_.toLower(match[1]))
-                    ||
-                    item.alternate_forms && _.some(item.alternate_forms, alt => _.trim(_.toLower(alt)) === _.trim(_.toLower(match[1])))
+                    _.trim(_.toLower(item.term)) ===
+                        _.trim(_.toLower(match[1])) ||
+                    (item.alternate_forms &&
+                        _.some(
+                            item.alternate_forms,
+                            (alt) =>
+                                _.trim(_.toLower(alt)) ===
+                                _.trim(_.toLower(match[1]))
+                        ))
                 ) {
                     return item
                 }
@@ -131,6 +144,7 @@ export default class GlossaryHelper {
 
         return unVerifiedTerms
     }
+
     public static renderGlossaryWordsHtml(content: string, glossary: any) {
         const regex: any = new RegExp(this.glossaryRegex)
         const currentGlossary: any = glossary
@@ -143,13 +157,19 @@ export default class GlossaryHelper {
                 regex.lastIndex++
             }
 
+            match[1] = decode(match[1])
             // The result can be accessed through the `m`-variable.
             currentGlossary.forEach((term: any) => {
                 if (
-                    _.trim(_.toLower(match[1])) === _.trim(_.toLower(term.term))
-                    ||
-                    ( term.alternate_forms &&
-                        _.some(term.alternate_forms, alt => _.trim(_.toLower(alt)) === _.trim(_.toLower(match[1]))))
+                    _.trim(_.toLower(match[1])) ===
+                        _.trim(_.toLower(term.term)) ||
+                    (term.alternate_forms &&
+                        _.some(
+                            term.alternate_forms,
+                            (alt) =>
+                                _.trim(_.toLower(alt)) ===
+                                _.trim(_.toLower(match[1]))
+                        ))
                 ) {
                     content = content.replace(
                         match[0],