@windward/core 0.2.3 → 0.4.0

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,7 +20,7 @@
                     include,
                 }"
             >
-            </editor>
+            </Editor>
         </div>
 
         <v-btn-toggle dense multiple class="pt-1 d-flex justify-end">
@@ -41,14 +45,66 @@
 
 <script>
 import _ from 'lodash'
+import 'tinymce'
 import Editor from '@tinymce/tinymce-vue'
+
+/* 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/plugin'
-import contentCss from '!raw-loader!sass-loader!./assets/tinymce/css/content.scss'
+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'
 export default {
     name: 'ContentEditorRichText',
     components: {
-        editor: Editor,
+        Editor,
     },
     props: {
         value: { type: String, required: true, default: '' },
@@ -69,7 +125,11 @@ export default {
         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 {
@@ -84,6 +144,9 @@ export default {
         },
     },
     computed: {
+        isDarkTheme() {
+            return this.$vuetify.theme.isDark
+        },
         filteredMenubar() {
             if (this.render) {
                 return this.menubar
@@ -117,6 +180,15 @@ export default {
                 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',
+                block_formats:
+                    'Paragraph=p; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6;',
                 menu: {
                     insert: {
                         title: 'Insert',
@@ -132,10 +204,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,
@@ -289,12 +372,13 @@ export default {
                           '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' +
@@ -308,7 +392,12 @@ export default {
         },
 
         elementBody() {
-            return [document.querySelector('.tinymce-included-' + this.seed)]
+            const ele = document.querySelector('.tinymce-included-' + this.seed)
+
+            if (ele) {
+                return [ele]
+            }
+            return []
         },
     },
     methods: {
@@ -340,10 +429,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 {
@@ -354,3 +444,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;
+}