content upload progress & CKEditor update

3 files changed, 49 insertions, 10 deletions

diff --git a/front-end/src/views/Blog/ckeditor/build.ts b/front-end/src/views/Blog/ckeditor/build.ts
index 83b46a7..fe3e0b9 100644
--- a/front-end/src/views/Blog/ckeditor/build.ts
+++ b/front-end/src/views/Blog/ckeditor/build.ts
@@ -38,7 +38,7 @@ export const config = {
         ]
     },
     // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
-    placeholder: 'Welcome to CKEditor 5!',
+    placeholder: 'Edit CMNext post content using CKEditor 5 ',
     // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
     fontFamily: {
         options: [
@@ -120,6 +120,13 @@ export const config = {
         'WProofreader',
         // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
         // from a local file system (file://) - load this site via HTTP server if you enable MathType
-        'MathType'
+        'MathType',
+        'DocumentOutline',
+        'PasteFromOfficeEnhanced',
+        'Template',
+        'SlashCommand',
+        'AIAssistant',
+        'FormatPainter',
+        'TableOfContents'
     ],
 }
\ No newline at end of file
diff --git a/front-end/src/views/Blog/components/Content.vue b/front-end/src/views/Blog/components/Content.vue
index ae0f6cf..ba78773 100644
--- a/front-end/src/views/Blog/components/Content.vue
+++ b/front-end/src/views/Blog/components/Content.vue
@@ -9,6 +9,22 @@
                 />
             </template>
             <template #editor>
+                 <div v-if="showProgress" class="max-w-xl mx-auto">
+                    <span id="ProgressLabel" class="sr-only">Loading</span>
+
+                    <span 
+                        role="progressbar"
+                        aria-labelledby="ProgressLabel"
+                        :aria-valuenow="progress"
+                        class="relative block bg-gray-200 rounded-full dark:bg-dark-500"
+                    >
+                        <span class="absolute inset-0 flex items-center justify-center text-[10px]/4">
+                            <span class="font-bold text-white "> {{ loadingProgress }} </span>
+                        </span>
+
+                        <span class="block h-4 text-center rounded-full bg-primary-600" :style="progressWidth"></span>
+                    </span>
+                </div>
                 <ContentEditor 
                     :blog="$props.blog"
                     @submit="onSubmit"
@@ -21,22 +37,24 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, toRefs } from 'vue';
 import { BlogState } from '../blog-api';
 import { isEmpty } from 'lodash-es';
 import { apiCall } from '@vnuge/vnlib.browser';
+import { useClipboard } from '@vueuse/core';
+import { ContentMeta, useFilteredPages } from '@vnuge/cmnext-admin';
 import EditorTable from './EditorTable.vue';
 import ContentEditor from './Content/ContentEditor.vue';
 import ContentTable from './Content/ContentTable.vue';
-import { useClipboard } from '@vueuse/core';
-import { ContentMeta, useFilteredPages } from '@vnuge/cmnext-admin';
 
 const emit = defineEmits(['reload'])
 
 const props = defineProps<{
-   blog: BlogState
+    blog: BlogState,
+    progress: number
 }>()
 
+const { progress } = toRefs(props)
 
 //Get the computed content
 const { selectedId, 
@@ -51,6 +69,9 @@ const { selectedId,
  const { items, pagination } = useFilteredPages(props.blog.content, 15)
 
 const showEdit = computed(() => !isEmpty(selectedId.value));
+const loadingProgress = computed(() => `${progress?.value}%`);
+const progressWidth = computed(() => ({ width: `${progress?.value}%` }));
+const showProgress = computed(() => progress?.value > 0 && progress?.value < 100);
 
 const openEdit = async (item: ContentMeta) => selectedId.value = item.id
 
diff --git a/front-end/src/views/Blog/index.vue b/front-end/src/views/Blog/index.vue
index e862d32..ea35ad6 100644
--- a/front-end/src/views/Blog/index.vue
+++ b/front-end/src/views/Blog/index.vue
@@ -98,7 +98,7 @@
                     </TabPanel>
                     
                     <TabPanel>
-                        <Content :blog="blogState" />
+                        <Content :progress="progress" :blog="blogState" />
                     </TabPanel>
                 
                 </TabPanels>
@@ -108,9 +108,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useScriptTag } from '@vueuse/core';
 import { useRouteQuery } from '@vueuse/router';
+import { AxiosProgressEvent } from 'axios';
 import { TabGroup, TabList, Tab, TabPanels, TabPanel, Switch } from '@headlessui/vue'
 import { first } from 'lodash-es';
 import { useRoute, useRouter } from 'vue-router';
@@ -127,12 +128,13 @@ useTitle('CMNext Admin')
 
 if(!window.CKEDITOR){
     //Load scripts
-    const ckEditorTag = useScriptTag("https://cdn.ckeditor.com/ckeditor5/35.4.0/super-build/ckeditor.js")
+    const ckEditorTag = useScriptTag("https://cdn.ckeditor.com/ckeditor5/40.0.0/super-build/ckeditor.js")
     //Store the wait result on the window for the editor script to wait
     window.editorLoadResult = ckEditorTag.load(true);
 }
 
 const { userName, getProfile } = useUser()
+const progress = ref<number>(0)
 
 //Load user profile and forget if not set
 if(!userName.value){
@@ -143,10 +145,19 @@ const firstLetter = computed(() => first(userName.value))
 
 const tabIdQ = useRouteQuery<string>('tabid', '', { mode: 'push' })
 
+const axios = useAxios({
+    onUploadProgress: (e:AxiosProgressEvent) => {
+        progress.value = Math.round((e.loaded * 100) / e.total!)
+    },
+    //Set to 60 second timeout
+    timeout:60 * 1000
+})
+
+
 const context = createBlogContext({
+    axios,
     route: useRoute(),
     router: useRouter(),
-    axios: useAxios(null),
     channelUrl: '/blog/channels',
     postUrl: '/blog/posts',
     contentUrl: '/blog/content'