perf: lazy load toast-ui editor dependencies

Dynamically load toast-ui editor languages and the syntax highlight plugin for writable markdown files. This improves editor loading times in other scenarios where these 2 things are not needed.
owncloud · Jun 18, 2024 · d94a243 · d94a243
1 parent 2137305
commit d94a243
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 33 deletions.
diff --git a/changelog/unreleased/enhancement-text-editor-loading-times b/changelog/unreleased/enhancement-text-editor-loading-times
@@ -0,0 +1,6 @@
+Enhancement: Decrease text editor loading times
+
+We've decreased the loading times of the text and markdown editor by loading the necessary parts only.
+
+https://github.com/owncloud/web/pull/11060
+https://github.com/owncloud/web/issues/10982
diff --git a/packages/web-pkg/src/components/TextEditor.vue b/packages/web-pkg/src/components/TextEditor.vue
@@ -1,48 +1,25 @@
 <template>
-  <div id="text-editor-container" ref="toastUiEditorRef" :data-markdown-mode="isMarkdown" />
+  <app-loading-spinner v-if="loading" />
+  <div v-else id="text-editor-container" ref="toastUiEditorRef" :data-markdown-mode="isMarkdown" />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, unref, PropType, ref, onMounted } from 'vue'
+import { computed, defineComponent, unref, PropType, ref, onMounted, nextTick } from 'vue'
 import { Resource } from '@ownclouders/web-client'
 
 import '@toast-ui/editor/dist/toastui-editor.css'
 import '@toast-ui/editor/dist/theme/toastui-editor-dark.css'
-import '@toast-ui/editor/dist/i18n/ar'
-import '@toast-ui/editor/dist/i18n/cs-cz'
-import '@toast-ui/editor/dist/i18n/de-de'
-import '@toast-ui/editor/dist/i18n/en-us'
-import '@toast-ui/editor/dist/i18n/es-es'
-import '@toast-ui/editor/dist/i18n/fi-fi'
-import '@toast-ui/editor/dist/i18n/fr-fr'
-import '@toast-ui/editor/dist/i18n/gl-es'
-import '@toast-ui/editor/dist/i18n/hr-hr'
-import '@toast-ui/editor/dist/i18n/it-it'
-import '@toast-ui/editor/dist/i18n/ja-jp'
-import '@toast-ui/editor/dist/i18n/ko-kr'
-import '@toast-ui/editor/dist/i18n/nb-no'
-import '@toast-ui/editor/dist/i18n/nl-nl'
-import '@toast-ui/editor/dist/i18n/pl-pl'
-import '@toast-ui/editor/dist/i18n/ru-ru'
-import '@toast-ui/editor/dist/i18n/sv-se'
-import '@toast-ui/editor/dist/i18n/tr-tr'
-import '@toast-ui/editor/dist/i18n/uk-ua'
-import '@toast-ui/editor/dist/i18n/zh-cn'
-import '@toast-ui/editor/dist/i18n/zh-tw'
+
 // @ts-ignore
 import { Editor, EditorCore, EditorOptions } from '@toast-ui/editor'
-// @ts-ignore
-import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js'
-
-import 'prismjs/themes/prism.css'
-import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css'
-
 import { useGettext } from 'vue3-gettext'
 import { useThemeStore } from '../composables'
 import { AppConfigObject } from '../apps'
+import AppLoadingSpinner from './AppLoadingSpinner.vue'
 
 export default defineComponent({
   name: 'TextEditor',
+  components: { AppLoadingSpinner },
   props: {
     applicationConfig: { type: Object as PropType<AppConfigObject>, required: true },
     currentContent: {
@@ -56,7 +33,9 @@ export default defineComponent({
   setup(props, { emit }) {
     const language = useGettext()
     const themeStore = useThemeStore()
-    const toastUiEditorRef = ref()
+    const toastUiEditorRef = ref<HTMLElement>()
+    const loading = ref(true)
+
     // Should not be a ref, otherwise functions like setMarkdown won't work
     let toastUiEditor: EditorCore = null
     const config = computed(() => {
@@ -71,7 +50,59 @@ export default defineComponent({
       )
     })
 
-    onMounted(() => {
+    const loadTranslations = () => {
+      return Promise.all([
+        import('@toast-ui/editor/dist/i18n/ar'),
+        import('@toast-ui/editor/dist/i18n/cs-cz'),
+        import('@toast-ui/editor/dist/i18n/de-de'),
+        import('@toast-ui/editor/dist/i18n/en-us'),
+        import('@toast-ui/editor/dist/i18n/es-es'),
+        import('@toast-ui/editor/dist/i18n/fi-fi'),
+        import('@toast-ui/editor/dist/i18n/fr-fr'),
+        import('@toast-ui/editor/dist/i18n/gl-es'),
+        import('@toast-ui/editor/dist/i18n/hr-hr'),
+        import('@toast-ui/editor/dist/i18n/it-it'),
+        import('@toast-ui/editor/dist/i18n/ja-jp'),
+        import('@toast-ui/editor/dist/i18n/ko-kr'),
+        import('@toast-ui/editor/dist/i18n/nb-no'),
+        import('@toast-ui/editor/dist/i18n/nl-nl'),
+        import('@toast-ui/editor/dist/i18n/pl-pl'),
+        import('@toast-ui/editor/dist/i18n/ru-ru'),
+        import('@toast-ui/editor/dist/i18n/sv-se'),
+        import('@toast-ui/editor/dist/i18n/tr-tr'),
+        import('@toast-ui/editor/dist/i18n/uk-ua'),
+        import('@toast-ui/editor/dist/i18n/zh-cn'),
+        import('@toast-ui/editor/dist/i18n/zh-tw')
+      ])
+    }
+
+    const loadSyntaxHighlighting = async () => {
+      const [plugin] = await Promise.all([
+        import(
+          `@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js`
+        ),
+        import(
+          // @ts-ignore
+          `@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css`
+        ),
+        // @ts-ignore
+        import('prismjs/themes/prism.css')
+      ])
+
+      return plugin.default
+    }
+
+    onMounted(async () => {
+      let codeSyntaxHighlight: unknown
+      if (!props.isReadOnly && unref(isMarkdown)) {
+        // only needed for md documents with write permissions
+        await loadTranslations()
+        codeSyntaxHighlight = await loadSyntaxHighlighting()
+      }
+
+      loading.value = false
+      await nextTick()
+
       let config: EditorOptions = {
         el: unref(toastUiEditorRef),
         usageStatistics: false, // sends hostname to google analytics DISABLE
@@ -80,7 +111,7 @@ export default defineComponent({
         hideModeSwitch: true,
         language: language.current,
         height: '100%',
-        plugins: [codeSyntaxHighlight],
+        plugins: [...((codeSyntaxHighlight && [codeSyntaxHighlight]) || [])],
         viewer: props.isReadOnly,
         events: {
           change: () => {
@@ -103,7 +134,8 @@ export default defineComponent({
 
     return {
       toastUiEditorRef,
-      isMarkdown
+      isMarkdown,
+      loading
     }
   }
 })