feat: show line numbers in text/markdown editor, fix lists not rendered correctly

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

@@ -14,7 +14,12 @@ vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
   }),
   useLoadPreview: vi.fn().mockReturnValue({
     loadPreview: vi.fn(() => 'blob:image')
-  })
+  }),
+  TextEditor: {
+    name: 'TextEditor',
+    props: ['isReadOnly', 'currentContent'],
+    template: '<div class="text-editor-stub" />'
+  }
 }))
 
 vi.mock('@opencloud-eu/web-client', async (importOriginal) => ({

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

@@ -85,7 +85,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
     </div>
     <!--v-if-->
     <div class="markdown-container flex min-h-0 [&amp;.collapsed]:max-h-[150px] [&amp;.collapsed]:overflow-hidden collapsed">
-      <!---->
+      <div class="text-editor-stub markdown-container-content w-full"></div>
     </div>
     <!--v-if-->
   </div>

packages/web-pkg/package.json

@@ -36,6 +36,7 @@
   "dependencies": {
     "@casl/ability": "^6.7.1",
     "@casl/vue": "^2.2.2",
+    "@codemirror/view": "^6.38.6",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@opencloud-eu/design-system": "workspace:^",
     "@opencloud-eu/web-client": "workspace:^",

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

@@ -66,6 +66,7 @@ import { AppConfigObject } from '../../apps'
 import screenfull from 'screenfull'
 
 import Cropper from 'cropperjs'
+import { lineNumbers } from '@codemirror/view'
 import 'cropperjs/dist/cropper.css'
 
 export default defineComponent({
@@ -126,17 +127,28 @@ export default defineComponent({
         ]
       },
       codeMirrorExtensions(extensions) {
-        if (!unref(isMarkdown)) {
-          return extensions.filter((extension) =>
-            ['lineWrapping', 'keymap', 'floatingToolbar'].includes(extension.type)
-          )
-        }
-        const linkShortener = extensions.find((extension) => extension.type === 'linkShortener')
+        const combinedExtensions = [
+          ...extensions,
+          {
+            type: 'lineNumbers',
+            extension: lineNumbers()
+          }
+        ]
+
+        const linkShortener = combinedExtensions.find(
+          (extension) => extension.type === 'linkShortener'
+        )
         if (linkShortener) {
           linkShortener.options.maxLength = 120
         }
 
-        return extensions
+        if (!unref(isMarkdown)) {
+          return combinedExtensions.filter((extension) =>
+            ['lineWrapping', 'keymap', 'floatingToolbar', 'lineNumbers'].includes(extension.type)
+          )
+        }
+
+        return combinedExtensions
       }
     })
 
@@ -177,6 +189,11 @@ export default defineComponent({
     @apply break-keep;
   }
 
+  .md-editor-preview > ol,
+  ul {
+    @apply !list-[auto];
+  }
+
   .md-editor-code-flag {
     @apply hidden;
   }