@windward/core 0.3.0 → 0.4.1

package/components/utils/TinyMCEWrapper.vue

@@ -1,11 +1,15 @@
 <template>
     <div :class="'tinymce-included-' + seed">
-        <div>
-            <editor
-                :key="seed + config.skin"
+        <div
+            :class="
+                'windward-tinymce-wrapper windward-tinymce-wrapper' +
+                (isDarkTheme ? '--theme-dark' : '--theme-light')
+            "
+        >
+            <Editor
+                :key="seed + (isDarkTheme ? '-theme-dark' : '-theme-light')"
                 v-model="text"
                 initial-value=""
-                :api-key="api_key"
                 :init="config"
                 tag-name="div"
                 model-events="change keydown blur focus mouseDown paste input submit SetContent"
@@ -16,15 +20,33 @@
                     include,
                 }"
             >
-            </editor>
+            </Editor>
         </div>
 
         <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"
                     >{{
@@ -41,18 +63,71 @@
 
 <script>
 import _ from 'lodash'
+import 'tinymce'
 import Editor from '@tinymce/tinymce-vue'
-import { WindwardPlugins } from '../../helpers/tinymce/plugin'
-import contentCss from '!raw-loader!sass-loader!./assets/tinymce/css/content.scss'
+import { getTinymce } from '@tinymce/tinymce-vue/lib/cjs/main/ts/TinyMCE'
+
+/* Required TinyMCE components */
+import 'tinymce/icons/default/icons.min.js'
+import 'tinymce/themes/silver/theme.min.js'
+import 'tinymce/models/dom/model.min.js'
+
+/* Import a skin (can be a custom skin instead of the default) */
+import 'tinymce/skins/ui/oxide/skin.js'
+import 'tinymce/skins/ui/oxide-dark/skin.js'
+
+/* Import plugins */
+import 'tinymce/plugins/accordion'
+import 'tinymce/plugins/advlist'
+import 'tinymce/plugins/anchor'
+import 'tinymce/plugins/autolink'
+import 'tinymce/plugins/autoresize'
+import 'tinymce/plugins/autosave'
+import 'tinymce/plugins/charmap'
+import 'tinymce/plugins/code'
+import 'tinymce/plugins/codesample'
+import 'tinymce/plugins/directionality'
+import 'tinymce/plugins/emoticons'
+import 'tinymce/plugins/fullscreen'
+import 'tinymce/plugins/help'
+import 'tinymce/plugins/image'
+import 'tinymce/plugins/importcss'
+import 'tinymce/plugins/insertdatetime'
+import 'tinymce/plugins/link'
+import 'tinymce/plugins/lists'
+import 'tinymce/plugins/media'
+import 'tinymce/plugins/nonbreaking'
+import 'tinymce/plugins/pagebreak'
+import 'tinymce/plugins/preview'
+import 'tinymce/plugins/quickbars'
+import 'tinymce/plugins/save'
+import 'tinymce/plugins/searchreplace'
+import 'tinymce/plugins/table'
+import 'tinymce/plugins/visualblocks'
+import 'tinymce/plugins/visualchars'
+import 'tinymce/plugins/wordcount'
+
+/* content UI CSS is required */
+import 'tinymce/skins/ui/oxide/content.js'
+import 'tinymce/skins/ui/oxide-dark/content.js'
+
+/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
+import 'tinymce/skins/content/default/content.js'
+import 'tinymce/skins/content/dark/content.js'
+
+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: {
-        editor: Editor,
+        Editor,
     },
     props: {
         value: { type: String, required: true, default: '' },
-        api_key: { type: String, required: true, default: '' },
         height: { type: Number, required: false, default: null },
         menubar: {
             type: String,
@@ -63,19 +138,25 @@ 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: '' },
     },
     beforeMount() {
-        this.text = this.value
+        if (MathHelper.containsLatex(this.value)) {
+            this.text = MathHelper.wrapMathContentForTinyMCE(this.value)
+        } else {
+            this.text = this.value
+        }
     },
     data() {
         return {
             render: false,
             text: '',
             seed: Crypto.id(),
+            synthesizer: null,
+            paused: false,
         }
     },
     watch: {
@@ -84,6 +165,9 @@ export default {
         },
     },
     computed: {
+        isDarkTheme() {
+            return this.$vuetify.theme.isDark
+        },
         filteredMenubar() {
             if (this.render) {
                 return this.menubar
@@ -114,9 +198,17 @@ export default {
                 visual: false,
                 forced_root_block: this.root_block,
                 menubar: this.filteredMenubar,
+                toolbar_mode: 'sliding',
                 browser_spellcheck: true,
                 contextmenu: false,
                 statusbar: false,
+                promotion: false,
+                license_key: 'gpl',
+                ui_mode: 'split',
+                dialog_type: 'modal',
+                body_class: this.isDarkTheme
+                    ? 'editor--theme-dark'
+                    : 'editor--theme-light',
                 menu: {
                     insert: {
                         title: 'Insert',
@@ -132,10 +224,21 @@ export default {
                     },
                 },
                 plugins: [
-                    'advlist autolink lists link  charmap',
-                    'searchreplace visualblocks code fullscreen',
-                    'anchor insertdatetime ',
-                    'paste code wordcount table WindwardToolKit',
+                    'advlist',
+                    'autolink',
+                    'lists',
+                    'link',
+                    'charmap',
+                    'searchreplace',
+                    'visualblocks',
+                    'code',
+                    'fullscreen',
+                    'anchor',
+                    'insertdatetime',
+                    'code',
+                    'wordcount',
+                    'table',
+                    'WindwardToolKit',
                 ],
                 toolbar: this.filteredToolbar,
                 table_advtab: false,
@@ -219,9 +322,11 @@ export default {
                 ],
                 setup() {
                     // Here we can add plugin
-                    window.tinymce.PluginManager.add(
+                    getTinymce().PluginManager.add(
                         'WindwardToolKit',
-                        WindwardPlugins
+                        (editor) => {
+                            new WindwardPlugins(editor)
+                        }
                     )
                 },
 
@@ -268,33 +373,72 @@ 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(
                           'windward.core.shared.settings.title.placeholder'
                       ),
                 //required as it will be displayed as inline style in tinymce renderer
-
-                skin: this.$vuetify.theme.isDark ? 'oxide-dark' : 'oxide',
+                skin: false,
                 content_css: this.$vuetify.theme.isDark ? 'dark' : 'default',
+
                 //we need to inject the glossary style directly
                 content_style:
-                    contentCss +
+                    ContentCss +
+                    EditorCss +
                     ' .glossary-word {\n' +
                     '    display: inline-block;\n' +
                     '    border-radius: 12px;\n' +
@@ -306,7 +450,6 @@ export default {
                 importcss_append: true,
             }
         },
-
         elementBody() {
             const ele = document.querySelector('.tinymce-included-' + this.seed)
 
@@ -317,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()
@@ -345,10 +513,11 @@ export default {
             }
 
             if (
-                parentNode.closest('.tinymce-included-' + this.seed) ||
+                (parentNode &&
+                    (parentNode.closest('.tinymce-included-' + this.seed) ||
+                        _.includes(parentNode.className, 'tox'))) ||
                 _.includes(targetClass, 'tinymce-included-' + this.seed) ||
-                _.includes(targetClass, 'tox') ||
-                _.includes(parentNode.className, 'tox')
+                _.includes(targetClass, 'tox')
             ) {
                 return false
             } else {
@@ -359,3 +528,14 @@ export default {
     },
 }
 </script>
+
+<style lang="scss">
+html:has(body.theme--light) {
+    @import './assets/tinymce/ui/light/content.scss';
+    @import './assets/tinymce/ui/light/skin.scss';
+}
+html:has(body.theme--dark) {
+    @import './assets/tinymce/ui/dark/content.scss';
+    @import './assets/tinymce/ui/dark/skin.scss';
+}
+</style>

package/components/utils/assets/tinymce/content/dark/content.scss

@@ -0,0 +1,4 @@
+body {
+    background-color: #24292a;
+    color: #fff;
+}

package/components/utils/assets/tinymce/{css/content.scss → content/global.scss}

@@ -1,32 +1,30 @@
-
 table {
     max-width: 100%;
-    border: 1px solid var(--v-primary-base) !important;
+    border: 1px solid var(--v-primary-base);
     border-spacing: 0;
 
-    th, td {
-        border: 1px solid var(--v-primary-base) !important;
+    th,
+    td {
+        border: 1px solid var(--v-primary-base);
         padding: 3px;
     }
-
 }
 table {
-     &.windward-table-default {
-
+    &.windward-table-default {
         color: black;
 
         th {
             color: white;
             padding: 16px;
-            background-color: #3B4143FF;
+            background-color: #3b4143ff;
         }
 
-        th, td {
+        th,
+        td {
             text-align: left;
             border: 1px solid black;
         }
 
-
         tr:nth-child(even) {
             td {
                 background-color: #ffffff;
@@ -35,19 +33,18 @@ table {
 
         tr:nth-child(odd) {
             td {
-                background-color: #EAEAEC;
+                background-color: #eaeaec;
             }
         }
 
-
-         &--lines{
-             border: 1px solid #ffffff;
-             th, td {
-                 border: 1px solid #ffffff;
-             }
-         }
-
-     }
+        &--lines {
+            border: 1px solid #ffffff;
+            th,
+            td {
+                border: 1px solid #ffffff;
+            }
+        }
+    }
 
     &.windward-table-excel {
         padding-bottom: 20px;
@@ -62,7 +59,7 @@ table {
             padding: 3px;
             text-align: center;
             color: black;
-            background-color: #D7CCC8;
+            background-color: #d7ccc8;
         }
 
         td {
@@ -70,7 +67,6 @@ table {
             color: #000;
             padding: 5px;
             text-align: left;
-
         }
     }
 
@@ -83,23 +79,20 @@ table {
             background-color: #206e8c;
         }
 
-        th, td {
+        th,
+        td {
             text-align: left;
-
         }
 
         tr:nth-child(even) {
             th {
                 border: 1px solid black;
-
             }
 
             td {
                 border: 1px solid black;
                 background-color: #ffffff;
-
             }
-
         }
 
         tr:nth-child(odd) {
@@ -109,12 +102,11 @@ table {
 
             td {
                 border: 1px solid black;
-                background-color: #EAEAEC;
+                background-color: #eaeaec;
             }
         }
     }
 
-
     /* ledger table */
     &.windward-table-ledger {
         &--right-align {
@@ -129,12 +121,12 @@ table {
         background-color: white;
         color: black;
 
-        thead, th {
+        thead,
+        th {
             border: 3px solid black;
             font-weight: bold;
         }
 
-
         tr {
             td {
                 border: 1px solid black;
@@ -153,7 +145,8 @@ table {
             font-weight: bold;
         }
 
-        th:last-child, td:last-child {
+        th:last-child,
+        td:last-child {
             border-right: 0;
         }
 
@@ -170,20 +163,20 @@ table {
         text-align: left;
         padding: 11px;
 
-        thead, th {
+        thead,
+        th {
             font-weight: bold;
-            background-color: #EAEAEC;
+            background-color: #eaeaec;
             padding: 3px;
         }
 
         td th {
             border: 1px solid black;
         }
-
     }
 }
 
-span.windward-fill-blank{
+span.windward-fill-blank {
     display: inline-block;
     cursor: pointer;
     border: 2px solid #206e8c;
@@ -193,5 +186,13 @@ span.windward-fill-blank{
     color: #000000;
 }
 
-body { font-family: 'Roboto', sans-serif; }
+body {
+    font-family: 'Roboto', sans-serif;
+}
 
+html:has(body.editor--theme-light) {
+    @import './light/content.scss';
+}
+html:has(body.editor--theme-dark) {
+    @import './dark/content.scss';
+}

package/components/utils/assets/tinymce/content/light/content.scss

@@ -0,0 +1,4 @@
+body {
+    background-color: #fff;
+    color: #1a1d1e;
+}