Browse Source

fix(nc-gui): rich text on blur remove menu option

pull/7741/head
Ramesh Mane 9 months ago
parent
commit
ed602d25d9
  1. 21
      packages/nc-gui/components/cell/RichText.vue
  2. 2
      packages/nc-gui/components/smartsheet/Form.vue

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

@ -19,7 +19,6 @@ const props = defineProps<{
fullMode?: boolean fullMode?: boolean
isFormField?: boolean isFormField?: boolean
autofocus?: boolean autofocus?: boolean
isTabPressed?: boolean
placeholder?: string placeholder?: string
renderAsText?: boolean renderAsText?: boolean
}>() }>()
@ -141,7 +140,7 @@ const editor = useEditor({
isFocused.value = true isFocused.value = true
}, },
onBlur: (e) => { onBlur: (e) => {
if (props.isTabPressed) { if (!(e?.event?.relatedTarget as HTMLElement)?.closest('.bubble-menu, .nc-textarea-rich-editor')) {
isFocused.value = false isFocused.value = false
e?.editor?.setEditable(false) e?.editor?.setEditable(false)
} }
@ -202,13 +201,17 @@ watch(editorDom, () => {
}, 50) }, 50)
}) })
onClickOutside(editorDom, (e) => { useEventListener(
if ((e.target as HTMLElement)?.closest('.bubble-menu')) { editorDom,
return 'focusout',
} (e: FocusEvent) => {
if (!(e?.relatedTarget as HTMLElement)?.closest('.bubble-menu, .nc-textarea-rich-editor')) {
isFocused.value = false isFocused.value = false
}) editor.value?.setEditable(false)
}
},
true,
)
</script> </script>
<template> <template>

2
packages/nc-gui/components/smartsheet/Form.vue

@ -936,7 +936,6 @@ useEventListener(
class="nc-form-focus-element font-medium text-base !text-gray-500" class="nc-form-focus-element font-medium text-base !text-gray-500"
is-form-field is-form-field
:autofocus="activeRow === 'nc-form-sub-heading'" :autofocus="activeRow === 'nc-form-sub-heading'"
:is-tab-pressed="isTabPressed"
data-testid="nc-form-sub-heading" data-testid="nc-form-sub-heading"
data-title="nc-form-sub-heading" data-title="nc-form-sub-heading"
@update:value="updateView" @update:value="updateView"
@ -1083,7 +1082,6 @@ useEventListener(
:placeholder="$t('msg.info.formHelpText')" :placeholder="$t('msg.info.formHelpText')"
class="form-meta-input nc-form-input-help-text" class="form-meta-input nc-form-input-help-text"
is-form-field is-form-field
:is-tab-pressed="isTabPressed"
data-testid="nc-form-input-help-text" data-testid="nc-form-input-help-text"
@update:value="updateColMeta(element)" @update:value="updateColMeta(element)"
/></a-form-item> /></a-form-item>

Loading…
Cancel
Save