tiptap editor #2222

Merged
konrad merged 66 commits from dpschen/frontend:feature/feat-tiptap-editor into main 2023-10-22 13:49:01 +00:00
1 changed files with 18 additions and 0 deletions
Showing only changes of commit 859fc1e94e - Show all commits

View File

@ -144,6 +144,7 @@ import {useI18n} from 'vue-i18n'
import BaseButton from '@/components/base/BaseButton.vue' import BaseButton from '@/components/base/BaseButton.vue'
import XButton from '@/components/input/button.vue' import XButton from '@/components/input/button.vue'
import {Placeholder} from '@tiptap/extension-placeholder' import {Placeholder} from '@tiptap/extension-placeholder'
import {eventToHotkeyString} from '@github/hotkey'
const {t} = useI18n() const {t} = useI18n()
@ -176,6 +177,7 @@ const {
bottomActions = [], bottomActions = [],
showSave = false, showSave = false,
placeholder = '', placeholder = '',
editShortcut = '',
} = defineProps<{ } = defineProps<{
modelValue: string, modelValue: string,
uploadCallback?: UploadCallback, uploadCallback?: UploadCallback,
@ -183,6 +185,7 @@ const {
bottomActions?: BottomAction[], bottomActions?: BottomAction[],
showSave?: boolean, showSave?: boolean,
placeholder?: string, placeholder?: string,
editShortcut?: string,
}>() }>()
const emit = defineEmits(['update:modelValue', 'save']) const emit = defineEmits(['update:modelValue', 'save'])
@ -404,10 +407,16 @@ function setLink() {
onMounted(() => { onMounted(() => {
document.addEventListener('paste', handleImagePaste) document.addEventListener('paste', handleImagePaste)
if(editShortcut !== '') {
document.addEventListener('keydown', setFocusToEditor)
}
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
document.removeEventListener('paste', handleImagePaste) document.removeEventListener('paste', handleImagePaste)
if(editShortcut !== '') {
document.removeEventListener('keydown', setFocusToEditor)
}
}) })
function handleImagePaste(event) { function handleImagePaste(event) {
@ -418,6 +427,15 @@ function handleImagePaste(event) {
} }
}) })
} }
// See https://github.com/github/hotkey/discussions/85#discussioncomment-5214660
function setFocusToEditor(event) {
const hotkeyString = eventToHotkeyString(event)
if (!hotkeyString) return
if (hotkeyString !== editShortcut || editor.value?.isFocused) return
event.preventDefault()
editor.value?.commands.focus()
}
</script> </script>
<style lang="scss"> <style lang="scss">