<\/p>/g, '
'))
- .replaceAll(/\n\n
\n\n/g, '
\n\n')
- vModel.value = markdown === '
' ? '' : markdown
+ let markdown = turndownService.turndown(editor.getHTML().replaceAll(/
<\/p>/g, '
'))
+
+ const isListsActive = editor?.isActive('bulletList') || editor?.isActive('orderedList') || editor?.isActive('blockquote')
+ if (isListsActive) {
+ if (markdown.endsWith('
')) markdown = markdown.slice(0, -6)
+ }
+
+ markdown = markdown.replaceAll(/\n\n
\n\n/g, '
\n\n')
+
+ vModel.value = markdown === '
' ? '' : `${markdown}`
},
editable: !props.readOnly,
autofocus: props.autofocus,
@@ -87,8 +94,12 @@ const editor = useEditor({
onFocusWrapper()
},
onBlur: (e) => {
+ const targetEl = e?.event.relatedTarget as HTMLElement
+
if (
- !(e?.event?.relatedTarget as HTMLElement)?.closest('.comment-bubble-menu, .nc-comment-rich-editor, .nc-rich-text-comment')
+ !targetEl.closest(
+ '.comment-bubble-menu, .nc-rich-text-comment, .tippy-box, .nc-comment-save-btn, .rich-text-bottom-bar, .mention, .nc-mention-list, .tippy-content, .nc-comment-rich-editor',
+ )
) {
isFocused.value = false
emits('blur')
@@ -142,7 +153,9 @@ useEventListener(
const targetEl = e?.relatedTarget as HTMLElement
if (
targetEl?.classList?.contains('tiptap') ||
- !targetEl?.closest('.comment-bubble-menu, .tippy-content, .nc-comment-rich-editor')
+ !targetEl?.closest(
+ '.comment-bubble-menu, .nc-rich-text-comment, .tippy-box, .nc-comment-save-btn, .rich-text-bottom-bar, .mention, .nc-mention-list, .tippy-content, .nc-comment-rich-editor',
+ )
) {
isFocused.value = false
emits('blur')
@@ -155,10 +168,15 @@ useEventListener(
'focusout',
(e: FocusEvent) => {
const targetEl = e?.relatedTarget as HTMLElement
- if (!targetEl && (e.target as HTMLElement)?.closest('.comment-bubble-menu, .tippy-content, .nc-comment-rich-editor')) return
+ if (
+ !targetEl &&
+ (e.target as HTMLElement)?.closest('.comment-bubble-menu, .nc-comment-save-btn, .tippy-content, .nc-comment-rich-editor')
+ )
+ return
- if (!targetEl?.closest('.comment-bubble-menu, .tippy-content, .nc-comment-rich-editor')) {
+ if (!targetEl?.closest('.comment-bubble-menu, .nc-comment-save-btn, .tippy-content, .nc-comment-rich-editor')) {
isFocused.value = false
+
emits('blur')
}
},
@@ -169,7 +187,11 @@ onClickOutside(editorDom, (e) => {
const targetEl = e?.target as HTMLElement
- if (!targetEl?.closest('.tippy-content, .comment-bubble-menu, .nc-comment-rich-editor')) {
+ if (
+ !targetEl?.closest(
+ '.tippy-content, .nc-rich-text-comment, .nc-comment-save-btn, .comment-bubble-menu, .nc-comment-rich-editor',
+ )
+ ) {
isFocused.value = false
emits('blur')
}
@@ -183,7 +205,7 @@ const emitSave = (event: KeyboardEvent) => {
// If Enter was pressed in the list, do not emit save
triggerSaveFromList.value = false
} else {
- if (editor.value.isActive('bulletList') || editor.value.isActive('orderedList')) {
+ if (editor.value.isActive('bulletList') || editor.value.isActive('orderedList') || editor.value.isActive('blockquote')) {
event.stopPropagation()
} else {
emits('save')
@@ -193,7 +215,8 @@ const emitSave = (event: KeyboardEvent) => {
}
const handleEnterDown = (event: KeyboardEvent) => {
- const isListsActive = editor.value?.isActive('bulletList') || editor.value?.isActive('orderedList')
+ const isListsActive =
+ editor.value?.isActive('bulletList') || editor.value?.isActive('orderedList') || editor.value.isActive('blockquote')
if (isListsActive) {
triggerSaveFromList.value = true
setTimeout(() => {
@@ -220,6 +243,31 @@ const handleKeyPress = (event: KeyboardEvent) => {
defineExpose({
setEditorContent,
})
+
+onMounted(() => {
+ if (!props.readOnly) return
+
+ setTimeout(() => {
+ document.querySelectorAll('.nc-rich-link-tooltip').forEach((el) => {
+ const tooltip = Object.values(el.attributes).find((attr) => attr.name === 'data-tooltip')
+ if (!tooltip) return
+ tippy(el, {
+ content: `${tooltip.value}`,
+ placement: 'top',
+ allowHTML: true,
+ arrow: true,
+ animation: 'fade',
+ duration: 0,
+ })
+ })
+ }, 1000)
+})
+
+const saveComment = (e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ emits('save')
+}
@@ -249,21 +297,21 @@ defineExpose({
ref="editorDom"
:editor="editor"
:class="{
- 'px-1.5': !props.readOnly,
+ 'px-2': !props.readOnly,
'px-[0.25rem]': props.readOnly,
}"
- class="flex flex-col nc-comment-rich-editor w-full scrollbar-thin scrollbar-thumb-gray-200 nc-truncate scrollbar-track-transparent"
+ class="flex flex-col nc-comment-rich-editor py-2.125 w-full scrollbar-thin scrollbar-thumb-gray-200 nc-truncate scrollbar-track-transparent"
@keydown.stop="handleKeyPress"
/>
-