Merge pull request #171 from opencloud-eu/md-editor

md editor

Author: kulmann

.npmrc

@@ -3,6 +3,8 @@ shared-workspace-lockfile=true
 
 # @vue/component-compiler-utils
 hoist-pattern[]=sass
+hoist-pattern[]=*@codemirror*
+hoist-pattern[]=*@lezer*
 
 # eslint (public so they are picked up by IDEs)
 public-hoist-pattern[]=*eslint*

package.json

@@ -95,13 +95,6 @@
     "node": "22.14.0"
   },
   "pnpm": {
-    "packageExtensions": {
-      "@toast-ui/editor": {
-        "dependencies": {
-          "prosemirror-transform": "1.8.0"
-        }
-      }
-    },
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -57,12 +57,12 @@
       <div
         v-if="markdownResource && markdownContent"
         ref="markdownContainerRef"
-        class="markdown-container oc-flex oc-flex-middle"
+        class="markdown-container oc-flex"
       >
         <text-editor
-          :resource="markdownResource"
+          class="markdown-container-content"
+          is-read-only
           :current-content="markdownContent"
-          :is-read-only="true"
         />
         <div class="markdown-container-edit oc-ml-s">
           <router-link
@@ -93,6 +93,7 @@ import {
   computed,
   defineComponent,
   inject,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   PropType,
@@ -210,6 +211,7 @@ export default defineComponent({
         markdownContent.value = fileContentsResponse.body
         markdownResource.value = fileInfoResponse
 
+        await nextTick()
         if (unref(markdownContent)) {
           observeMarkdownContainerResize()
         }
@@ -344,6 +346,14 @@ export default defineComponent({
     white-space: nowrap;
   }
 
+  .markdown-container {
+    &-content {
+      .md-editor-preview-wrapper {
+        padding: 0;
+      }
+    }
+  }
+
   .markdown-container.collapsed {
     max-height: 100px;
     overflow: hidden;

packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap

@@ -52,7 +52,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
       </button>
     </div>
     <!--v-if-->
-    <div class="markdown-container oc-flex oc-flex-middle">
+    <div class="markdown-container oc-flex">
       <!---->
       <div class="markdown-container-edit oc-ml-s"><a attrs="[object Object]" size="small" appearance="raw"></a></div>
     </div>

packages/web-app-text-editor/src/App.vue

@@ -36,30 +36,8 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-text-editor-readonly {
-  //Toastui Editor doesn't have margins in view mode, adjusted for uniformity
-  padding: 18px 25px;
-
   //Fixes in readonly mode vertical scrolling is not available
   height: calc(100vh - 52px);
   overflow: auto;
 }
-
-// Make url links limited in height and scrollable since base64 encoded images might be very long
-.toastui-editor-md-link-url {
-  display: block;
-  max-height: 100px;
-  overflow: auto;
-}
-
-.toastui-editor-defaultUI {
-  // Adjustments to match our theming
-  border: none;
-  // Adjustments to not overlay with the app switcher
-  z-index: 0;
-}
-
-.toastui-editor-defaultUI-toolbar,
-.toastui-editor-md-tab-container {
-  background-color: var(--oc-color-background-default) !important;
-}
 </style>

packages/web-pkg/package.json

@@ -40,16 +40,16 @@
     "@opencloud-eu/design-system": "workspace:^",
     "@opencloud-eu/web-client": "workspace:^",
     "@sentry/vue": "^9.0.0",
-    "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
-    "@toast-ui/editor": "^3.2.2",
     "@uppy/core": "^4.3.1",
     "@uppy/drop-target": "^3.0.2",
     "@uppy/tus": "^4.1.5",
     "@uppy/utils": "^6.0.6",
     "@uppy/xhr-upload": "^4.2.3",
+    "@vavt/cm-extension": "^1.6.0",
     "@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",
@@ -58,13 +58,15 @@
     "lodash-es": "^4.17.21",
     "luxon": "^3.5.0",
     "mark.js": "^8.11.1",
+    "md-editor-v3": "^5.2.1",
     "oidc-client-ts": "^2.4.0 || ^3.0.0",
     "p-queue": "^8.0.0",
     "password-sheriff": "^1.1.1",
     "pinia": "^3.0.0",
     "portal-vue": "^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

@@ -1,25 +1,70 @@
 <template>
-  <app-loading-spinner v-if="loading" />
-  <div v-else id="text-editor-container" ref="toastUiEditorRef" :data-markdown-mode="isMarkdown" />
+  <div id="text-editor-container" class="oc-height-1-1">
+    <md-preview
+      v-if="isReadOnly"
+      id="text-editor-preview-component"
+      :model-value="currentContent"
+      no-katex
+      no-mermaid
+      no-prettier
+      no-upload-img
+      no-highlight
+      :language="languages[language.current] || 'en-US'"
+      :theme="theme"
+      read-only
+      :toolbars="[]"
+    />
+    <md-editor
+      v-else
+      id="text-editor-component"
+      :model-value="currentContent"
+      no-katex
+      no-mermaid
+      no-prettier
+      no-upload-img
+      no-highlight
+      :language="languages[language.current] || 'en-US'"
+      :theme="theme"
+      :preview="isMarkdown"
+      :toolbars="isMarkdown ? undefined : []"
+      :toolbars-exclude="[
+        'save',
+        'katex',
+        'github',
+        'catalog',
+        'mermaid',
+        'prettier',
+        'fullscreen',
+        'htmlPreview',
+        'pageFullscreen'
+      ]"
+      :read-only="isReadOnly"
+      @on-change="(value) => $emit('update:currentContent', value)"
+    />
+  </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, unref, PropType, ref, onMounted, nextTick } from 'vue'
+import { computed, defineComponent, unref, PropType } from 'vue'
 import { Resource } from '@opencloud-eu/web-client'
 
-import '@toast-ui/editor/dist/toastui-editor.css'
-import '@toast-ui/editor/dist/theme/toastui-editor-dark.css'
+import { config, MdEditor, MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
+
+import { languageUserDefined, languages } from './l18n'
 
-// @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 screenfull from 'screenfull'
+
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
 
 export default defineComponent({
   name: 'TextEditor',
-  components: { AppLoadingSpinner },
+  components: { MdEditor, MdPreview },
   props: {
     applicationConfig: { type: Object as PropType<AppConfigObject>, required: false },
     currentContent: {
@@ -31,15 +76,11 @@ export default defineComponent({
     resource: { type: Object as PropType<Resource>, required: false }
   },
   emits: ['update:currentContent'],
-  setup(props, { emit }) {
+  setup(props) {
     const language = useGettext()
-    const themeStore = useThemeStore()
-    const toastUiEditorRef = ref<HTMLElement>()
-    const loading = ref(true)
+    const { currentTheme } = useThemeStore()
 
-    // Should not be a ref, otherwise functions like setMarkdown won't work
-    let toastUiEditor: EditorCore = null
-    const config = computed(() => {
+    const editorConfig = computed(() => {
       // TODO: Remove typecasting once vue-tsc has figured it out
       const { showPreviewOnlyMd = true } = props.applicationConfig as AppConfigObject
       return { showPreviewOnlyMd }
@@ -49,102 +90,45 @@ export default defineComponent({
       return (
         props.markdownMode ||
         ['md', 'markdown'].includes(props.resource?.extension) ||
-        !unref(config).showPreviewOnlyMd
+        !unref(editorConfig).showPreviewOnlyMd
       )
     })
 
-    const keyDownHandler = (event: KeyboardEvent, editor: EditorCore) => {
-      const ctrl = event.ctrlKey || event.metaKey
-      if (!ctrl) {
-        return
-      }
-
-      switch (event.key) {
-        case 'y':
-          editor.exec('redo')
-          break
-        case 'z':
-          editor.exec('undo')
-          break
-      }
-    }
-
-    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()
+    const theme = computed(() => (unref(currentTheme).isDark ? 'dark' : 'light'))
 
-        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
-        initialValue: props.currentContent,
-        useCommandShortcut: false,
-        hideModeSwitch: true,
-        language: language.current,
-        height: '100%',
-        plugins: [...((codeSyntaxHighlight && [codeSyntaxHighlight]) || [])],
-        viewer: props.isReadOnly,
-        events: {
-          change: () => {
-            emit('update:currentContent', toastUiEditor.getMarkdown())
-          },
-          keydown: (_mode: string, event: KeyboardEvent) => {
-            keyDownHandler(event, toastUiEditor)
-          }
+    config({
+      editorConfig: {
+        languageUserDefined
+      },
+      editorExtensions: {
+        screenfull: {
+          instance: screenfull
         },
-        ...(themeStore.currentTheme.isDark && { theme: 'dark' })
-      }
-
-      if (!unref(isMarkdown)) {
-        config = {
-          ...config,
-          toolbarItems: [],
-          initialEditType: 'wysiwyg'
+        cropper: {
+          instance: Cropper
         }
       }
-
-      toastUiEditor = Editor.factory(config) as EditorCore
     })
 
     return {
-      toastUiEditorRef,
       isMarkdown,
-      loading
+      theme,
+      language,
+      languages
     }
   }
 })
 </script>
 <style lang="scss">
-.toastui-editor-tabs {
-  // Fix tab with for long i18n text
-  .tab-item {
-    width: auto;
-    padding-left: var(--oc-space-small);
-    padding-right: var(--oc-space-small);
+.md-editor {
+  height: 100%;
+
+  &-code-head {
+    justify-content: end !important;
+  }
+
+  &-code-flag {
+    display: none;
   }
 }
 </style>

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
 )