clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-05-02 12:37:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Nc fix: Form view bug fixes (#8322)

Browse Source 
* fix(nc-gui): form view rich text link option issue

* chore(nc-gui): lint

* fix(nc-gui): pw test fail issue

* fix(nc-gui): add checkbox required form validation rule
This commit is contained in:
Ramesh Mane
2024-04-24 09:57:11 +05:30
committed by GitHub
parent 42e0fa6073
commit 6075611c0f
4 changed files with 58 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/nc-gui/components/cell/RichText.vue
View File

@@ -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<HTMLElement | null>(null)
const richTextLinkOptionRef = ref<HTMLElement | null>(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')
}
})
</script>
<template>
@@ -281,7 +311,15 @@ useEventListener(
</div>
<CellRichTextSelectedBubbleMenuPopup v-if="editor && !isFormField && !isForm" :editor="editor" />
<CellRichTextLinkOptions v-if="editor" :editor="editor" />
<template v-if="shouldShowLinkOption">
<CellRichTextLinkOptions
v-if="editor"
ref="richTextLinkOptionRef"
:editor="editor"
:is-form-field="isFormField"
@blur="isFocused = false"
/>
</template>
<EditorContent
ref="editorDom"