fix: empty markdown documents

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

@@ -9,6 +9,7 @@
 
 <script setup lang="ts">
 import { computed, toRef, unref } from 'vue'
+import { useGettext } from 'vue3-gettext'
 import {
   ContentType,
   useTextEditor,
@@ -34,6 +35,8 @@ const emit = defineEmits<{
   (e: 'update:currentContent', value: string): void
 }>()
 
+const { $gettext } = useGettext()
+
 const parsedContentType = computed<ContentType>(() => {
   if (contentType !== undefined) {
     return contentType
@@ -52,10 +55,18 @@ const parsedContentType = computed<ContentType>(() => {
   return 'plain-text'
 })
 
+const placeholder = computed(() => {
+  if (isReadOnly || unref(parsedContentType) !== 'markdown') {
+    return undefined
+  }
+  return $gettext('Write or type / for formatting options...')
+})
+
 const textEditor = useTextEditor({
   contentType: unref(parsedContentType),
   modelValue: toRef(() => currentContent),
   readonly: isReadOnly,
+  placeholder: unref(placeholder),
   onUpdate: (content) => emit('update:currentContent', content)
 })
 </script>

packages/web-app-text-editor/tests/unit/app.spec.ts

@@ -1,4 +1,4 @@
-import { PartialComponentProps, mount } from '@opencloud-eu/web-test-helpers'
+import { PartialComponentProps, defaultPlugins, mount } from '@opencloud-eu/web-test-helpers'
 import { mock } from 'vitest-mock-extended'
 import type { Resource } from '@opencloud-eu/web-client'
 import App from '../../src/App.vue'
@@ -21,7 +21,8 @@ function getWrapper(props: PartialComponentProps<typeof App> = {}) {
         isReadOnly: false,
         resource: mock<Resource>({ extension: 'txt', mimeType: 'text/plain' }),
         ...props
-      }
+      },
+      global: { plugins: defaultPlugins() }
     })
   }
 }

packages/web-pkg/package.json

@@ -59,6 +59,7 @@
     "@tiptap/extension-image": "^3.20.4",
     "@tiptap/extension-link": "^3.20.4",
     "@tiptap/extension-paragraph": "^3.20.4",
+    "@tiptap/extension-placeholder": "^3.20.4",
     "@tiptap/extension-text": "^3.20.4",
     "@tiptap/extension-text-style": "^3.20.4",
     "@tiptap/extension-table": "^3.20.4",

packages/web-pkg/src/editor/composables/useTextEditor.ts

@@ -1,5 +1,6 @@
 import { ref, computed, onBeforeUnmount, watch, unref, onMounted, triggerRef } from 'vue'
 import { useEditor } from '@tiptap/vue-3'
+import { Placeholder } from '@tiptap/extension-placeholder'
 import type { ShallowRef } from 'vue'
 import type { Editor } from '@tiptap/vue-3'
 import type { TextEditorOptions, TextEditorInstance, TextEditorState } from '../types'
@@ -28,6 +29,12 @@ export function useTextEditor(options: TextEditorOptions): TextEditorInstance {
     }
   }
 
+  if (options.placeholder) {
+    extensions.push(
+      Placeholder.configure({ placeholder: options.placeholder }) as (typeof extensions)[number]
+    )
+  }
+
   // useEditor returns ShallowRef<Editor | undefined>; we cast to ShallowRef<Editor | null>
   // to satisfy TextEditorInstance. The destroy() method sets it to null explicitly.
   const editorOptions: Record<string, any> = {
@@ -47,6 +54,15 @@ export function useTextEditor(options: TextEditorOptions): TextEditorInstance {
     editorOptions.contentType = strategy.editorContentType()
   }
 
+  if (options.placeholder) {
+    editorOptions.editorProps = {
+      attributes: {
+        'aria-placeholder': options.placeholder,
+        'aria-multiline': 'true'
+      }
+    }
+  }
+
   const editor = useEditor({
     ...editorOptions,
     onUpdate({ editor: e }) {

packages/web-pkg/src/editor/styles/text-editor.css

@@ -30,6 +30,15 @@
   box-shadow: none;
 }
 
+.text-editor-content .ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--oc-color-role-outline-variant, rgba(0, 0, 0, 0.4));
+  pointer-events: none;
+  user-select: none;
+  height: 0;
+}
+
 .text-editor-content .ProseMirror p {
   margin: 0 0 8px;
 }

packages/web-pkg/src/editor/types.ts

@@ -9,6 +9,7 @@ export interface TextEditorOptions {
   modelValue?: Ref<string>
   readonly?: boolean
   slashCommands?: boolean
+  placeholder?: string
   onUpdate?: (content: string) => void
   onRequestLinkUrl?: (currentUrl?: string) => Promise<string | null>
   onRequestImageUrl?: () => Promise<string | null>