Browse Source

fix: Focus on the end of editor if empty portion below the rich editor is clicked

pull/7046/head
Muhammed Mustafa 1 year ago
parent
commit
f69391c094
  1. 22
      packages/nc-gui/components/cell/RichText.vue
  2. 1
      packages/nc-gui/components/cell/TextArea.vue

22
packages/nc-gui/components/cell/RichText.vue

@ -14,6 +14,7 @@ const props = defineProps<{
readonly?: boolean readonly?: boolean
syncValueChange?: boolean syncValueChange?: boolean
showMenu?: boolean showMenu?: boolean
fullMode?: boolean
}>() }>()
const emits = defineEmits(['update:value']) const emits = defineEmits(['update:value'])
@ -74,16 +75,35 @@ watch(editorDom, () => {
editor.value?.chain().focus().run() editor.value?.chain().focus().run()
}, 50) }, 50)
}) })
const focusEditorEnd = () => {
setTimeout(() => {
if (!editor.value) return
const docSize = editor.value.state.doc.content.size
editor.value
?.chain()
.setTextSelection(docSize - 2)
.focus()
.run()
}, 50)
}
</script> </script>
<template> <template>
<div class="h-full"> <div
class="h-full"
:class="{
'flex flex-col flex-grow': props.fullMode,
}"
>
<div v-if="props.showMenu" class="absolute top-1 z-1000 right-3"> <div v-if="props.showMenu" class="absolute top-1 z-1000 right-3">
<CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode /> <CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode />
</div> </div>
<CellRichTextSelectedBubbleMenuPopup v-if="editor" :editor="editor" /> <CellRichTextSelectedBubbleMenuPopup v-if="editor" :editor="editor" />
<CellRichTextLinkOptions v-if="editor" :editor="editor" /> <CellRichTextLinkOptions v-if="editor" :editor="editor" />
<EditorContent ref="editorDom" :editor="editor" class="nc-textarea-rich w-full h-full nc-text-rich-scroll nc-scrollbar-md" /> <EditorContent ref="editorDom" :editor="editor" class="nc-textarea-rich w-full h-full nc-text-rich-scroll nc-scrollbar-md" />
<div v-if="props.fullMode" class="flex flex-grow" @click="focusEditorEnd"></div>
</div> </div>
</template> </template>

1
packages/nc-gui/components/cell/TextArea.vue

@ -206,6 +206,7 @@ watch(editEnabled, () => {
'max-height': 'calc(min(60vh, 100rem))', 'max-height': 'calc(min(60vh, 100rem))',
}" }"
show-menu show-menu
full-mode
/> />
</div> </div>
</template> </template>

Loading…
Cancel
Save