diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue index 82985aa48e..e350a6611f 100644 --- a/packages/nc-gui/components/cell/RichText.vue +++ b/packages/nc-gui/components/cell/RichText.vue @@ -59,6 +59,10 @@ const isFocused = ref(false) const keys = useMagicKeys() +const shouldShowLinkOption = computed(() => { + return isFormField.value ? isFocused.value : true +}) + const turndownService = new TurndownService({}) turndownService.addRule('lineBreak', { @@ -133,6 +137,8 @@ marked.use({ extensions: [checkListItem] }) const editorDom = ref(null) +const richTextLinkOptionRef = ref(null) + const vModel = useVModel(props, 'value', emits, { defaultValue: '' }) const tiptapExtensions = [ @@ -167,7 +173,7 @@ const editor = useEditor({ emits('focus') }, onBlur: (e) => { - if (!(e?.event?.relatedTarget as HTMLElement)?.closest('.bubble-menu, .nc-textarea-rich-editor')) { + if (!(e?.event?.relatedTarget as HTMLElement)?.closest('.bubble-menu, .nc-textarea-rich-editor, .nc-rich-text')) { isFocused.value = false emits('blur') } @@ -239,13 +245,37 @@ useEventListener( 'focusout', (e: FocusEvent) => { const targetEl = e?.relatedTarget as HTMLElement - if (targetEl?.classList?.contains('tiptap') || !targetEl?.closest('.bubble-menu, .nc-textarea-rich-editor')) { + if (targetEl?.classList?.contains('tiptap') || !targetEl?.closest('.bubble-menu, .tippy-content, .nc-textarea-rich-editor')) { + isFocused.value = false + emits('blur') + } + }, + true, +) +useEventListener( + richTextLinkOptionRef, + 'focusout', + (e: FocusEvent) => { + const targetEl = e?.relatedTarget as HTMLElement + if (!targetEl && (e.target as HTMLElement)?.closest('.bubble-menu, .tippy-content, .nc-textarea-rich-editor')) return + + if (!targetEl?.closest('.bubble-menu, .tippy-content, .nc-textarea-rich-editor')) { isFocused.value = false emits('blur') } }, true, ) +onClickOutside(editorDom, (e) => { + if (!isFocused.value) return + + const targetEl = e?.target as HTMLElement + + if (!targetEl?.closest('.bubble-menu,.tippy-content, .nc-textarea-rich-editor')) { + isFocused.value = false + emits('blur') + } +})