feat(web-pkg): add dependencies to avoid loading via cdn

Author: JammingBen

packages/web-pkg/package.json

@@ -49,6 +49,7 @@
     "@vue/shared": "^3.5.11",
     "@vueuse/core": "^12.0.0",
     "axios": "^1.7.7",
+    "cropperjs": "^1.6.2",
     "deepmerge": "^4.2.2",
     "dompurify": "^3.1.7",
     "filesize": "^10.1.0",
@@ -63,8 +64,10 @@
     "password-sheriff": "^1.1.1",
     "pinia": "^3.0.0",
     "portal-vue": "^3.0.0",
+    "prettier": "^3.0.0",
     "prismjs": "^1.29.0",
     "qs": "^6.13.0",
+    "screenfull": "^6.0.2",
     "semver": "^7.6.3",
     "uuid": "^11.0.0",
     "vue-concurrency": "^5.0.1",

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

@@ -4,6 +4,10 @@
       v-if="isReadOnly"
       id="text-editor-preview-component"
       :model-value="currentContent"
+      no-mermaid
+      no-katex
+      no-highlight
+      no-img-zoom-in
       :language="languages[language.current] || 'en-US'"
       :theme="theme"
       read-only
@@ -13,6 +17,10 @@
       v-else
       id="text-editor-component"
       :model-value="currentContent"
+      no-mermaid
+      no-katex
+      no-highlight
+      no-img-zoom-in
       :language="languages[language.current] || 'en-US'"
       :theme="theme"
       :preview="isMarkdown"
@@ -36,6 +44,14 @@ import { useGettext } from 'vue3-gettext'
 import { useThemeStore } from '../../composables'
 import { AppConfigObject } from '../../apps'
 
+import screenfull from 'screenfull'
+
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
+
+import * as prettier from 'prettier'
+import parserMarkdown from 'prettier/plugins/markdown'
+
 export default defineComponent({
   name: 'TextEditor',
   components: { MdEditor, MdPreview },
@@ -74,6 +90,18 @@ export default defineComponent({
     config({
       editorConfig: {
         languageUserDefined
+      },
+      editorExtensions: {
+        prettier: {
+          prettierInstance: prettier,
+          parserMarkdownInstance: parserMarkdown
+        },
+        screenfull: {
+          instance: screenfull
+        },
+        cropper: {
+          instance: Cropper
+        }
       }
     })
 

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

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