feat: markdown editor add line numbers toggle button

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

@@ -17,11 +17,11 @@
       :theme="theme"
       auto-focus
       read-only
-      :toolbars="[]"
     />
     <md-editor
       v-else
       id="text-editor-component"
+      :class="{ 'no-line-numbers': !showLineNumbers }"
       class="[&_.cm-content]:!font-(family-name:--oc-font-family)"
       :model-value="currentContent"
       no-katex
@@ -32,29 +32,32 @@
       :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')"
+          @on-click="showLineNumbers = !showLineNumbers"
+        >
+          <oc-icon
+            class="!flex items-center justify-center w-[24px] h-[24px]"
+            size="small"
+            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 +75,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 +94,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 +112,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
@@ -174,9 +215,11 @@ export default defineComponent({
     return {
       isMarkdown,
       theme,
+      toolbars,
       language,
       languages,
-      onUploadImg
+      onUploadImg,
+      showLineNumbers
     }
   }
 })
@@ -212,6 +255,10 @@ export default defineComponent({
   }
 }
 
+#text-editor-component.no-line-numbers .cm-gutters {
+  display: none !important;
+}
+
 #text-editor-preview-component {
   background-color: transparent;
 }