[TIL] 221212

Tiptap 이슈사항

외부 클릭시 액션 설정

• 문제: 팁탭에서 툴팁밖을 클릭시 툴팁이 없어지는 기능 필요

• 해결: @vueuse를 import 해서 onClickOutside 기능 이용!

  <template>
    <div ref="target" class="button-set"></div>
  </template>
  <script lang="ts">
  import { defineComponent, ref } from 'vue'
  import { Editor } from '@tiptap/core'
  import { onClickOutside } from '@vueuse/core'
  
  export default defineComponent({
    name: 'ColorPicker',
    setup(props, { emit }){
      const target = ref(null)
  
      onClickOutside(target, () => emit('handleOnCloseBox', props.dataSet.sort))
  
      return { target }
  
    }
  })
  
  </script>

동영상 링크와 일반 링크를 구분

• 문제: 하나의 기능을 2개로 구분해야함

• 해결: class로 나눠서 사용

  const handleOnSetLink = () => {
    // //cancelled & empty & undefined
    if (state.value === null || state.value === '' || state.value === undefined) {
      props.editor.chain().focus().extendMarkRange('link').unsetLink().run()
      state.value = null
      return  emit('handleOnCloseBox', props.sort)
    }
  
    // update link
    if(props.sort === 'link'){
      props.editor.chain().focus().extendMarkRange('link').setLink({ href: state.value, class: 'link' }).run()
      console.log('editor ',props.editor.getAttributes('link'))
    }else {
      props.editor.chain().focus().extendMarkRange('link').setLink({ href: state.value, class: 'video' }).run()
    }
    state.value = null
  }

에디터 영역에 접근

window를 이용해서 직접적으로 에디터 영역 접근

• 문제: 링크안에 링크가 들어가게되면 안되기 때문에 이를 막아야한다. 그리고 동영상 링크랑 일반 링크에 따라서 다르게 알럿이 떠야한다.

• 해결: 블럭포커스가 되었는지 확인하는거랑 현재 포커싱되어있는 블럭이 링크태그인지 확인해서 분류

  const handleOnLinkbox = (sort:string) => {
    const selectBlock = window.getSelection() as Selection | null
    let isBlock = false
    selectBlock?.isCollapsed ? '' : isBlock = true
  
    if(isBlock){
      if(selectBlock?.focusNode?.parentElement?.classList[0] === sort || selectBlock?.focusNode?.parentElement?.nodeName !== 'A'){
         sort === 'link' ? state.isLink = true : state.isVideo = true 
      }else{
        alert('이미 링크지정이 되었습니다.')
      }
    } else {
       alert('링크할 텍스트를 선택해주세요.')
    }
  }