Merge pull request #11060 from owncloud/feat/lazy-load-toast-editor-p…

…arts

perf: lazy load toast-ui editor dependencies

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

packages/web-pkg/src/components/TextEditor.vue → packages/web-pkg/src/components/TextEditor/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 { 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,35 @@ export default defineComponent({
       )
     })
 
-    onMounted(() => {
+    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 (unref(isMarkdown)) {
+        codeSyntaxHighlight = await loadSyntaxHighlighting()
+
+        if (!props.isReadOnly) {
+          await import('./l18n')
+        }
+      }
+
+      loading.value = false
+      await nextTick()
+
       let config: EditorOptions = {
         el: unref(toastUiEditorRef),
         usageStatistics: false, // sends hostname to google analytics DISABLE
@@ -80,7 +87,7 @@ export default defineComponent({
         hideModeSwitch: true,
         language: language.current,
         height: '100%',
-        plugins: [codeSyntaxHighlight],
+        plugins: [...((codeSyntaxHighlight && [codeSyntaxHighlight]) || [])],
         viewer: props.isReadOnly,
         events: {
           change: () => {
@@ -103,7 +110,8 @@ export default defineComponent({
 
     return {
       toastUiEditorRef,
-      isMarkdown
+      isMarkdown,
+      loading
     }
   }
 })

packages/web-pkg/src/components/TextEditor/index.ts

@@ -0,0 +1,6 @@
+import { defineAsyncComponent } from 'vue'
+
+// async component to avoid loading the huge toastjs package on page load
+export const TextEditor = defineAsyncComponent(
+  async () => (await import('./TextEditor.vue')).default
+)

packages/web-pkg/src/components/TextEditor/l18n.ts

@@ -0,0 +1,23 @@
+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')
+
+export default {}

packages/web-pkg/src/components/index.ts

@@ -1,5 +1,3 @@
-import { defineAsyncComponent } from 'vue'
-
 export * from './AppBar'
 export * from './AppTemplates'
 export * from './ContextActions'
@@ -9,6 +7,7 @@ export * from './Modals'
 export * from './SideBar'
 export * from './Search'
 export * from './Spaces'
+export * from './TextEditor'
 
 export { default as AppBanner } from './AppBanner.vue'
 export { default as AppLoadingSpinner } from './AppLoadingSpinner.vue'
@@ -28,8 +27,3 @@ export { default as ViewOptions } from './ViewOptions.vue'
 export { default as PortalTarget } from './PortalTarget.vue'
 export { default as CreateShortcutModal } from './CreateShortcutModal.vue'
 export { default as CreateLinkModal } from './CreateLinkModal.vue'
-
-// async component to avoid loading the huge toastjs package on page load
-export const TextEditor = defineAsyncComponent(
-  async () => (await import('./TextEditor.vue')).default
-)

packages/web-runtime/src/defaults/languages.ts

@@ -1,4 +1,4 @@
-//Please also make language adjustments in packages/web-pkg/src/components/TextEditor.vue
+//Please also make language adjustments in packages/web-pkg/src/components/TextEditor/l18n.ts
 
 export const supportedLanguages = {
   af: 'Afrikaans - Afrikaans',