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
+})
@@ -198,7 +212,7 @@ watch(editorDom, () => {
'readonly': readOnly,
'nc-form-rich-text-field !p-0': isFormField,
}"
- :tabindex="readOnlyCell ? -1 : 0"
+ :tabindex="readOnlyCell || isFormField ? -1 : 0"
>