refactor: de-couple TextEditor translations

packages/web-pkg/src/components/TextEditor.vue → packages/web-pkg/src/components/TextEditor/TextEditor.vue

@@ -13,9 +13,9 @@ import '@toast-ui/editor/dist/theme/toastui-editor-dark.css'
 // @ts-ignore
 import { Editor, EditorCore, EditorOptions } from '@toast-ui/editor'
 import { useGettext } from 'vue3-gettext'
-import { useThemeStore } from '../composables'
-import { AppConfigObject } from '../apps'
-import AppLoadingSpinner from './AppLoadingSpinner.vue'
+import { useThemeStore } from '../../composables'
+import { AppConfigObject } from '../../apps'
+import AppLoadingSpinner from './../AppLoadingSpinner.vue'
 
 export default defineComponent({
   name: 'TextEditor',
@@ -50,32 +50,6 @@ export default defineComponent({
       )
     })
 
-    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(
@@ -98,7 +72,7 @@ export default defineComponent({
         codeSyntaxHighlight = await loadSyntaxHighlighting()
 
         if (!props.isReadOnly) {
-          await loadTranslations()
+          await import('./l18n')
         }
       }
 

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
-)