From 4704ea09ff4c43294ccdf5acaace4c998b044b12 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Tue, 28 Oct 2025 23:09:09 +0100
Subject: [PATCH 1/4] feat: add show line number toggle to markdown editor

---
 .../src/components/TextEditor/TextEditor.vue  | 90 ++++++++++++++-----
 1 file changed, 67 insertions(+), 23 deletions(-)

diff --git a/packages/web-pkg/src/components/TextEditor/TextEditor.vue b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
index 273c32dc74..ae87bb3406 100644
--- a/packages/web-pkg/src/components/TextEditor/TextEditor.vue
+++ b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
@@ -17,11 +17,12 @@
       :theme="theme"
       auto-focus
       read-only
-      :toolbars="[]"
-    />
+    >
+    </md-preview>
     <md-editor
       v-else
       id="text-editor-component"
+      :key="showLineNumbers ? 'ln-on' : 'ln-off'"
       class="[&_.cm-content]:!font-(family-name:--oc-font-family)"
       :model-value="currentContent"
       no-katex
@@ -32,29 +33,28 @@
       :language="languages[language.current] || 'en-US'"
       :theme="theme"
       :preview="isMarkdown"
-      :toolbars="isMarkdown ? undefined : ['revoke', 'next']"
-      :toolbars-exclude="[
-        'save',
-        'katex',
-        'github',
-        'catalog',
-        'mermaid',
-        'prettier',
-        'fullscreen',
-        'htmlPreview',
-        'pageFullscreen'
-      ]"
+      :toolbars="toolbars"
       auto-focus
       @on-change="(value: string) => $emit('update:currentContent', value)"
-    />
+    >
+      <template #defToolbars>
+        <NormalToolbar
+          :title="showLineNumbers ? $gettext('hide line numbers') : $gettext('show line numbers')"
+          :active="showLineNumbers"
+          @on-click="showLineNumbers = !showLineNumbers"
+        >
+          <oc-icon size="xsmall" name="hashtag" fill-type="none" />
+        </NormalToolbar>
+      </template>
+    </md-editor>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, unref } from 'vue'
+import { computed, defineComponent, PropType, unref, ref } from 'vue'
 import { Resource } from '@opencloud-eu/web-client'
 
-import { config, MdEditor, MdPreview, XSSPlugin } from 'md-editor-v3'
+import { config, MdEditor, MdPreview, XSSPlugin, NormalToolbar } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 
 import { languages, languageUserDefined } from './l18n'
@@ -72,7 +72,11 @@ import 'cropperjs/dist/cropper.css'
 export default defineComponent({
   name: 'TextEditor',
   // type casts are needed to ensure type inference works correctly when building web-pkg
-  components: { MdEditor: MdEditor as any, MdPreview: MdPreview as any },
+  components: {
+    MdEditor: MdEditor as any,
+    MdPreview: MdPreview as any,
+    NormalToolbar: NormalToolbar as any
+  },
   props: {
     applicationConfig: { type: Object as PropType<AppConfigObject>, required: false },
     currentContent: {
@@ -87,6 +91,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const language = useGettext()
     const { currentTheme } = useThemeStore()
+    const showLineNumbers = ref(true)
 
     const editorConfig = computed(() => {
       // TODO: Remove typecasting once vue-tsc has figured it out
@@ -104,6 +109,39 @@ export default defineComponent({
 
     const theme = computed(() => (unref(currentTheme).isDark ? 'dark' : 'light'))
 
+    const toolbars = computed(() => {
+      if (!unref(isMarkdown)) {
+        return ['revoke', 'next', '=', 0]
+      }
+      return [
+        'bold',
+        'underline',
+        'italic',
+        '-',
+        'title',
+        'strikeThrough',
+        'sub',
+        'sup',
+        'quote',
+        'unorderedList',
+        'orderedList',
+        'task',
+        '-',
+        'codeRow',
+        'code',
+        'link',
+        'image',
+        'table',
+        '-',
+        'revoke',
+        'next',
+        '=',
+        0,
+        'preview',
+        'previewOnly'
+      ]
+    })
+
     config({
       editorConfig: {
         languageUserDefined
@@ -129,10 +167,14 @@ export default defineComponent({
       codeMirrorExtensions(extensions) {
         const combinedExtensions = [
           ...extensions,
-          {
-            type: 'lineNumbers',
-            extension: lineNumbers()
-          }
+          ...(unref(showLineNumbers)
+            ? [
+                {
+                  type: 'lineNumbers',
+                  extension: lineNumbers()
+                }
+              ]
+            : [])
         ]
 
         const linkShortener = combinedExtensions.find(
@@ -174,9 +216,11 @@ export default defineComponent({
     return {
       isMarkdown,
       theme,
+      toolbars,
       language,
       languages,
-      onUploadImg
+      onUploadImg,
+      showLineNumbers
     }
   }
 })

From 7e2f5620c673dff03b53c6dec0610a95271d3a79 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Tue, 28 Oct 2025 23:24:57 +0100
Subject: [PATCH 2/4] adjust toolbar styling

---
 .../src/components/TextEditor/TextEditor.vue       | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/web-pkg/src/components/TextEditor/TextEditor.vue b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
index ae87bb3406..4af7683663 100644
--- a/packages/web-pkg/src/components/TextEditor/TextEditor.vue
+++ b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
@@ -22,7 +22,7 @@
     <md-editor
       v-else
       id="text-editor-component"
-      :key="showLineNumbers ? 'ln-on' : 'ln-off'"
+      :class="{ 'no-line-numbers': !showLineNumbers }"
       class="[&_.cm-content]:!font-(family-name:--oc-font-family)"
       :model-value="currentContent"
       no-katex
@@ -40,10 +40,14 @@
       <template #defToolbars>
         <NormalToolbar
           :title="showLineNumbers ? $gettext('hide line numbers') : $gettext('show line numbers')"
-          :active="showLineNumbers"
           @on-click="showLineNumbers = !showLineNumbers"
         >
-          <oc-icon size="xsmall" name="hashtag" fill-type="none" />
+          <oc-icon
+            class="!flex items-center justify-center w-[24px] h-[24px]"
+            size="small"
+            name="hashtag"
+            fill-type="none"
+          />
         </NormalToolbar>
       </template>
     </md-editor>
@@ -256,6 +260,10 @@ export default defineComponent({
   }
 }
 
+#text-editor-component.no-line-numbers .cm-gutters {
+  display: none !important;
+}
+
 #text-editor-preview-component {
   background-color: transparent;
 }

From ea0af1c7c6c3525aa86bccabdd35205b43a559e5 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Tue, 28 Oct 2025 23:28:26 +0100
Subject: [PATCH 3/4] fixup wrong code

---
 .../web-pkg/src/components/TextEditor/TextEditor.vue | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/web-pkg/src/components/TextEditor/TextEditor.vue b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
index 4af7683663..73f676b6b3 100644
--- a/packages/web-pkg/src/components/TextEditor/TextEditor.vue
+++ b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
@@ -171,14 +171,10 @@ export default defineComponent({
       codeMirrorExtensions(extensions) {
         const combinedExtensions = [
           ...extensions,
-          ...(unref(showLineNumbers)
-            ? [
-                {
-                  type: 'lineNumbers',
-                  extension: lineNumbers()
-                }
-              ]
-            : [])
+          {
+            type: 'lineNumbers',
+            extension: lineNumbers()
+          }
         ]
 
         const linkShortener = combinedExtensions.find(

From 64421525ac0285c07c8e20cdb1c7c544522c9f7f Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 29 Oct 2025 13:06:56 +0100
Subject: [PATCH 4/4] add self closing tag

---
 packages/web-pkg/src/components/TextEditor/TextEditor.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/web-pkg/src/components/TextEditor/TextEditor.vue b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
index 73f676b6b3..6adff1a96f 100644
--- a/packages/web-pkg/src/components/TextEditor/TextEditor.vue
+++ b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
@@ -17,8 +17,7 @@
       :theme="theme"
       auto-focus
       read-only
-    >
-    </md-preview>
+    />
     <md-editor
       v-else
       id="text-editor-component"