[React/JS] 드래그한 문자열 분리(랩핑)하기 / Selection API

아래와 같은 문자열이 있을 때 마우스로 드래그해서 텍스트를 선택할 때마다 <span> 태그로 감싸도록 구현하는 게 목표. 

<!-- 초기 상태 -->
<p>Pharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissim</p>
 
<!-- convallis hendrerit integer 영역을 드래그했을 때 -->
<p>Pharetra <span>convallis hendrerit integer</span> nec eleifend tellus luctus lorem dignissim</p>
 
<!-- hendrerit 영역을 드래그했을 때 -->
<p>Pharetra <span>convallis <span>hendrerit</span> integer</span> nec eleifend tellus luctus lorem dignissim</p>

드래그한 문자열 랩핑

❶ 마우스 클릭/텍스트 드래그/클릭 해제 → onMouseUp 이벤트 호출

❷ 선택한 영역에 대한 Selection 객체 획득

const selection = window.getSelection();

❸ 첫번째 선택 영역에 대한 Range 객체 획득

const range = selection?.getRangeAt(0);

❹ 핸들러 실행 조건 검사

a. range 객체가 없거나 혹은 deleteMode 여부

if (!range || deleteMode) return;

b. 선택한 영역의 .selected 클래스 포함 여부 (중첩 드래그 방지)

if (range.cloneContents().querySelector('.selected')) return;
// range.cloneContents 메서드는 Range에 포함된 Node 객체를 복사한 후 DocumentFragment 반환
// 드래그 영역 : convallis hendrerit integer nec (hendrerit는 <span>으로 랩핑되어 있음)
// 반환값 : "convallis "<span class="selected">hendrerit</span>" integer"

• range.cloneContents.querySelector는 document.querySelector 셀렉터와 사용법 동일(첫 번째 선택된 엘리먼트 혹은 선택된 엘리먼트 없으면 null 반환)
• range.start|endContainer : Range 시작|종료 노드 반환
• range.start|endContainer.parentNode : Range 시작|종료 노드의 부모 요소 반환

❺ 선택한 텍스트를 랩핑 할 새로운 <span> 태그 생성

const selectedText = range.toString(); // 드래그한 영역의 문자열 반환
const span = document.createElement('span');
span.className = 'selected';
span.textContent = selectedText;

❻ 기존 선택한 텍스트 노드 삭제 후 생성한 <span> 태그로 대체

range.deleteContents();
range.insertNode(span);

랩핑 한 태그 삭제

💡 이벤트 버블링으로 인해 클릭 이벤트가 부모로 전파되므로, 이벤트 핸들러는 부모 오소에만 할당한다.

❶ 마우스 클릭 → 이벤트 핸들러 실행

<!-- 아래 요소에서 hello를 클릭했다고 가정 -->
<span class="selected">hello <span class="selected">world</span></span>

❷ 핸들러 실행 조건 검사

// deleteMode 상태이고, 클릭한 타겟 요소내 selected 클래스를 포함할 때만 실행
if (!deleteMode || !target.classList.contains('selected')) return;

❸ 클릭한 요소의 innerHTML 복사

// 이 과정에서 클릭한 요소 가장 바깥의 시작/종료 태그는 포함하지 않음
// 클릭한 요소 : <span>hello <span>world</span></span>
// innerHTML : hello <span>world>/span> 
const spanContent = target.innerHTML;

❹ 임시로 사용할 요소 생성

const textNode = document.createElement('span');

❺ 복사한 콘텐츠를 임시 생성한 요소의 innerHTML에 복사

textNode.innerHTML = spanContent;

❻ 새로운 DocumentFragment 생성

const frag = document.createDocumentFragment();

💡 DocumentFragment는 임시 컨테이너로 DOM 노드를 저장할 수 있는 구조를 가진다. 다수 노드에 대한 CRUD 등 작업을 수행할 때 유용. 실제 DOM 트리에 속하지 않으므로 reflow/repaint를 유발하지 않고(화면을 다시 그리는 과정 생략) 여러 DOM 노드를 한 번에 삽입할 수 있는 장점이 있다.

❼ textNode의 모든 자식 요소를 frag로 이동

// 반복할 때마다 textNode의 첫번째 자식을 frag 자식으로 붙임
while (textNode.firstChild) frag.appendChild(textNode.firstChild);
// textNode 처음 상태 예시 : convallis <span>hendrerit</span> integer
// childNode로 표현했을 때 : NodeList [text, span, text]
// 1회 순회 후 textNode : <span>hendrerit</span> integer
// 2회 순회 후 textNode :  integer
// 3회 순회 후 textNode : 비어있음

hasChildNodes로 자식 노드가 있는지 확인하고, 있다면 append로 바로 붙이는 방법도 있다.

if (textNode.hasChildNodes()) frag.append(...textNode.childNodes)

❽ 클릭한 요소를(랩핑을 삭제하기 위해 클릭한 대상) frag로 대체

target.replaceWith(frag);

노드 중첩 깊이 계산

중첩 기준

여러 태그를 추가해서(드래그한 문자열을 <span> 태그로 랩핑) 중첩된 구조가 됐을 때 각 태그의 깊이.

Pharetra
<span class="selected"> <!-- 중첩 레벨 1 -->
  convallis
  <span class="selected"> <!-- 중첩 레벨 2 -->
    hendrerit
  </span>
  integer
</span>
nec eleifend tellus luctus lorem dignissim

중첩 레벨 계산

인자로 전달받은 Node의 부모 요소가 selected 클래스를 포함할 때마다 중첩 레벨 + 1씩 증가

const calculateNestingLevelFromNode = (node: AnchorNode) => {
  let nestingLevel = 1;
  let parentNode = node;
 
  while (parentNode && parentNode instanceof HTMLElement) {
    if (parentNode.classList.contains('selected')) nestingLevel++;
    parentNode = parentNode.parentNode;
  }
 
  return nestingLevel;
};

selected 클래스를 가진 모든 태그의 중첩 레벨 검사

const calculateNestingLevel = (ref: React.RefObject<HTMLParagraphElement>) => {
  const spans = ref.current?.querySelectorAll('.selected');
  if (!spans) return;
  spans.forEach((spanElement) => {
    const span = spanElement as HTMLElement;
    const nestingLevel = calculateNestingLevelFromNode(span.parentNode);
    span.dataset.nestingLevel = nestingLevel.toString();
  });
};

코드 실행 결과

Pharetra
<span class="selected" data-nesting-level="1">
  convallis
  <span class="selected" data-nesting-level="2">
    hendrerit
  </span>
  integer
</span>
nec eleifend tellus luctus lorem dignissim

렌더링

DOMPurify 라이브러리를 사용하면 XSS 공격에 사용되는 스크립트/태그를 감지하고 삭제할 수 있다. 

dangerouslySetInnerHTML 속성을 이용해 innerHTML 문자열을 그대로 렌더링하는 예시. 태그 추가/삭제 시 실행되는 updateStack 핸들러 내부에서 DOMPurity.sanitize 함수를 호출하기 때문에 따로 추가적인 sanitize 작업은 하지 않았다. 

const [stackIndex, setStackIndex] = useState(0);
const [historyStack, setHistoryStack] = useState(DEFAULT_TEXT);
 
return (
  // ...
  <p dangerouslySetInnerHTML={{ __html: historyStack[stackIndex] }} />
);

태그 추가 시 historyStack 상태가 업데이트되고, 현재 stackIndex에 해당하는 historyStack 렌더링

// 태그 추가 전 historyStack[stackIndex]
'Pharetra convallis hendrerit integer ...'
 
// 태그 추가 후 historyStack[stackIndex]
'Pharetra <span class="selected">convallis hendrerit integer</span> ...'

히스토리 관리

❶ 상태 정의 (historyStack 상태 변화 ▼)

// 초기 상태
[
  "Pharetra convallis hendrerit integer ..."
]
 
// 태그를 추가/삭제했을 때 상태
[
  "Pharetra convallis hendrerit integer ...",
  "Pharetra <span class=\"selected\" data-nesting-level=\"1\"> ..."
]

• historyStack : 텍스트 랩핑 이력(부모 요소인 <p> 태그의 innerHTML 반환값)
• stackIndex : historyStack의 현재 인덱스

❷ 태그 추가 / 삭제 시

import DOMPurify from 'dompurify';
 
// ...
 
const updateStack = () => {
  setHistoryStack((prevStack) => {
    if (!paragraphRef.current) return prevStack;
 
    // DOMPurify 라이브러리를 사용해서 XSS 공격에 사용되는 코드 검사/제거
    const cleanedHTML = DOMPurify.sanitize(paragraphRef.current.innerHTML);
    const newStack = [...prevStack, paragraphRef.current.innerHTML];
 
    if (newStack.length > 20) newStack.shift(); // 최대 20개까지만 저장
    setStackIndex(newStack.length - 1); // 삭제 혹은 추가시 새로운 스택의 가장 마지막 인덱스로 이동
    return newStack;
  });
};

• 태그 추가/삭제 시 현재 HTML 문자열을(부모 요소의 innerHTML) historyStack 상태에 추가
• stackIndex 상태를 현재 historyStack의 가장 마지막 인덱스로 변경

❸ undo / redo 버튼 클릭 시

• undo : stackIndex - 1 (stackIndex가 0이면 버튼 비활성)
• redo : stackIndex + 1 (stackIndex와 historyStack 마지막 인덱스 같으면 버튼 비활성)

전체 코드

import React, { MouseEvent, useRef, useState } from 'react';
import classnames from 'classnames';
import DOMPurify from 'dompurify';
 
const initialText =
  'Pharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissim';
const spanClasses =
  'selected text-blue-500 before:content-["["] after:content-["]"]';
 
const calculateNestingLevelFromNode = (node?: Selection['anchorNode']) => {
  let nestingLevel = 1;
  let parentNode = node;
 
  while (parentNode && parentNode instanceof HTMLElement) {
    if (parentNode.classList.contains('selected')) nestingLevel++;
    parentNode = parentNode.parentNode;
  }
 
  return nestingLevel;
};
 
const calculateNestingLevel = (ref: React.RefObject<HTMLParagraphElement>) => {
  const spans = ref.current?.querySelectorAll('.selected');
  if (!spans) return;
  spans.forEach((spanElement) => {
    const span = spanElement as HTMLElement;
    const nestingLevel = calculateNestingLevelFromNode(span.parentNode);
    span.dataset.nestingLevel = nestingLevel.toString();
  });
};
 
export default function Fico() {
  const [deleteMode, setDeleteMode] = useState(false);
  const [stackIndex, setStackIndex] = useState(0);
  const [historyStack, setHistoryStack] = useState([initialText]);
  const paragraphRef = useRef<HTMLParagraphElement>(null);
 
  const updateStack = () => {
    setHistoryStack((prevStack) => {
      if (!paragraphRef.current) return prevStack;
 
      const cleanedHTML = DOMPurify.sanitize(paragraphRef.current.innerHTML);
      const newStack = [...prevStack, cleanedHTML];
 
      if (newStack.length > 20) newStack.shift(); // 최대 20개까지만 저장
      setStackIndex(newStack.length - 1); // 삭제 혹은 추가시 새로운 스택의 가장 마지막 인덱스로 이동
      return newStack;
    });
  };
 
  const addNewTag = () => {
    const selection = window.getSelection();
    const range = selection?.getRangeAt(0);
    if (!range || deleteMode) return;
    if (range.cloneContents().querySelector('.selected')) return;
 
    const selectedText = range.toString();
    if (selectedText.trim().length < 1) return;
 
    const span = document.createElement('span');
    span.className = spanClasses;
    span.textContent = selectedText;
 
    const nestingLevel = calculateNestingLevelFromNode(
      selection?.anchorNode?.parentNode,
    );
    span.dataset.nestingLevel = nestingLevel.toString();
 
    range.deleteContents();
    range.insertNode(span);
 
    updateStack();
  };
 
  const onUndoRedo = (type: 'undo' | 'redo') => {
    setStackIndex((prevIdx) => {
      return type === 'undo' ? prevIdx - 1 : prevIdx + 1;
    });
  };
 
  const deleteTag = (event: MouseEvent) => {
    const target = event.target as HTMLElement;
    if (!deleteMode || !target.classList.contains('selected')) return;
 
    const spanContent = target.innerHTML;
    const textNode = document.createElement('span');
    textNode.innerHTML = spanContent;
    const frag = document.createDocumentFragment();
    while (textNode.firstChild) frag.appendChild(textNode.firstChild);
    target.replaceWith(frag);
 
    calculateNestingLevel(paragraphRef);
    updateStack();
  };
 
  const onToggleDeleteMode = () => setDeleteMode((prev) => !prev);
 
  return (
    <section className={classnames({ 'cursor-eraser': deleteMode })}>
      <div className="mb-4 flex gap-2 items-center">
        <button onClick={() => onUndoRedo('undo')} disabled={stackIndex === 0}>
          UNDO
        </button>
        <button
          onClick={() => onUndoRedo('redo')}
          disabled={stackIndex === historyStack.length - 1}
        >
          REDO
        </button>
        <button onClick={onToggleDeleteMode}>DELETE MODE</button>
        <span>{deleteMode ? 'ON' : 'OFF'}</span>
      </div>
      <p
        onClick={deleteTag}
        ref={paragraphRef}
        className="text-2xl"
        onMouseUp={addNewTag}
        dangerouslySetInnerHTML={{ __html: historyStack[stackIndex] }}
      />
    </section>
  );
}

Selection API ⚡️

1개 텍스트 노드만 있을 땐 어디를 드래그하든 anchorNode, focusNode는 동일하다. 만약 드래그한 영역의 시작과 끝 사이에 여러 텍스트 노드가 있다면 anchorNode, focusNode는 다른 텍스트 노드를 가지고, 인덱스는 각각의 텍스트 노드를 기준으로 계산한다.

const selection = window.getSelection();
// ...

메서드

• selection.toString() : 드래그한 텍스트 반환
• selection.getRangeAt(index) : index(0부터 시작)에 해당하는 Range 객체 반환
• selection.addRange|removeRange(range) : 선택 영역에 range 추가/삭제
• selection.removeAllRanges() : 모든 선택 영역 제거. selection.empty() 메서드와 동일

프로퍼티

• selection.anchorNode : 선택을 시작한 텍스트 노드
• selection.anchorOffset : anchorNode에서 선택을 시작한 위치의 인덱스
• selection.focusNode : 선택을 종료한 텍스트 노드
• selection.focusOffset : focusNode에서 선택을 종료한 위치의 인덱스
• selection.rangeCount : 선택한 범위의 개수 (드래그해서 여러 개체를 선택했다면 1 이상)
• selection.isCollapsed : anchor/focus가 같은 지점에 있는지 여부
  • 선택한 텍스트가 없고 커서(Caret)만 존재하면 true 반환
  • 텍스트를 선택하면 false 반환
• selection.type :
  • 'Range' : 텍스트 범위를 선택한 상태 (anchor/focus가 다른 지점에 있음)
  • 'Caret' : 커서만 존재하는 상태(anchor/focus가 같은 지점에 있음, isCollapsed === true)
  • 'None' : 선택한 텍스트/커서가 없는 상태(로딩 초기 혹은 removeAllRange 호출 후)

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요