diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue index 097d43189e..ba890dcdfb 100644 --- a/packages/nc-gui/components/cell/RichText.vue +++ b/packages/nc-gui/components/cell/RichText.vue @@ -8,7 +8,7 @@ import { generateJSON } from '@tiptap/html' import Underline from '@tiptap/extension-underline' import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item' import { Link } from '@/helpers/dbTiptapExtensions/links' -import { IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, RowHeightInj } from '#imports' +import { IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, RowHeightInj, onClickOutside } from '#imports' const props = defineProps<{ value?: string | null @@ -17,6 +17,8 @@ const props = defineProps<{ showMenu?: boolean fullMode?: boolean isFormField?: boolean + autofocus?: boolean + isTabPressed?: boolean }>() const emits = defineEmits(['update:value']) @@ -29,6 +31,8 @@ const readOnlyCell = inject(ReadonlyInj, ref(false)) const isForm = inject(IsFormInj, ref(false)) +const isFocused = ref(false) + const turndownService = new TurndownService({}) turndownService.addRule('lineBreak', { @@ -122,29 +126,30 @@ const editor = useEditor({ .turndown(editor.getHTML().replaceAll(/

<\/p>/g, '
')) .replaceAll(/\n\n
\n\n/g, '
\n\n') - vModel.value = markdown + vModel.value = props.isFormField && markdown === '
' ? '' : markdown }, editable: !props.readOnly, + autofocus: props.autofocus, + onFocus: () => { + isFocused.value = true + }, + onBlur: () => { + if (props.isTabPressed) { + isFocused.value = false + } + }, }) watch(props, () => { - console.log('readonly node') if (props.isFormField) { if (props.readOnly) { editor.value?.setEditable(false) } else { editor.value?.setEditable(true) - setTimeout(() => { - editor.value?.chain().focus().run() - }, 50) } } }) -watchEffect(() => { - console.log('read only ', props.readOnly) -}) - const setEditorContent = (contentMd: any, focusEndOfDoc?: boolean) => { if (!editor.value) return @@ -182,11 +187,20 @@ watch(editorDom, () => { setEditorContent(vModel.value, true) + if (props.isFormField) return // Focus editor after editor is mounted setTimeout(() => { editor.value?.chain().focus().run() }, 50) }) + +onClickOutside(editorDom, (e) => { + if ((e.target as HTMLElement)?.closest('.bubble-menu')) { + return + } + + isFocused.value = false +})