TOAST UI Monthly 2020년 4월호

벌써 벚꽃이 지고 날이 따뜻해지고 있습니다. 길고 길었던 코로나 19가 조금씩 진정되고 있지만, 아직 방심할 단계가 아니라고 합니다. 지금까지 잘 해왔듯이 마스크 없이 여행하는 순간을 상상하며 조금만 더 노력하고 힘냈으면 좋겠습니다.💪💪 그럼, 이번 달 TOAST UI에 어떤 변화가 있었는지 함께 살펴볼까요?🧑‍💻

🚀 Releases

v2.1.0

이번 마이너 버전 업데이트에서는 하이라이팅, 렌더러 API 제공 등 마크다운 에디터를 강화💪하는 작업들이 진행되었습니다.

사용성 개선

• 구문 강조 기능 고도화 (#910)

마크다운 에디터의 구문 강조(Syntax Highlighting) 기능이 고도화되었습니다. 마크다운 문법에 쓰이는 기호보다 실제 컨텐츠가 눈에 더 잘 띄도록 색상을 명확하게 구분하였고, 실제 컨텐츠와 유사한 느낌을 주기 위해 편집 영역과 프리뷰 영역의 룩앤필을 최대한 통일하였습니다. 아래 이미지를 보시면 이전 버전보다 가독성과 통일성이 눈에 띄게 좋아진 것을 확인할 수 있습니다. 이제 마크다운 편집 영역에서 정확하고 빠르게 입력한 텍스트의 문법 오류를 확인할 수 있습니다.

개선 전

개선 후

기능 추가

• 프리뷰 하이라이팅 (#946)

마크다운 에디터에서 현재 편집 중인 텍스트의 위치를 프리뷰에 실시간으로 표시해주는 기능이 추가되었습니다. 마크다운 에디터의 커서 위치에 따라 블록(block) 단위로 프리뷰 영역을 표시해주며, 편집 위치를 빠르게 파악할 수 있습니다. 원하는 경우에만 프리뷰 하이라이팅 기능을 비활성화할 수 있도록 previewHighlight 옵션도 추가되었습니다.

const editor = new Editor({
  // ...
  previewHighlight: false, // default: true
});

• 참조 링크 사용 제공 (#887)

참조 링크(Link reference definition) 문법을 사용할 수 있는 옵션이 추가되었으며, referenceDefinition: true로 설정해 참조 링크 문법을 활성화합니다. 문서내에서 공통으로 사용하는 링크를 참조 링크로 정의하여 편리하게 사용할 수 있습니다.

const editor = new Editor({
  // ...
  referenceDefinition: true, // default: false
});

<!-- 참조 링크 문법 -->

[toast ui editor]: https://ui.toast.com/tui-editor
[nhn]: https://github.com/nhn

Thanks for loving [TOAST UI Editor] of [NHN].

• 커스텀 HTML 렌더러 제공 (#894)

에디터 2.0에서 변경된 마크다운 렌더러를 통해, HTML로 변환되는 마크다운 데이터를 사용자가 커스터마이징할 수 있도록 customHTMLRenderer 옵션이 추가되었습니다. 옵션값은 ToastMark에 정의된 마크다운 노드 타입에 콜백 함수를 할당한 객체로, 각 콜백 함수에서 HTML을 생성하기 위한 토큰 객체를 반환하여 사용합니다. 더 자세한 커스텀 HTML 렌더러 사용 방법은 튜토리얼 문서에서 확인할 수 있습니다.

const editor = new Editor({
  // ...
  customHTMLRenderer: {
    paragraph(node, context) {
      const { entering, origin } = context;
      const result = origin();

      if (entering) {
        result.attributes = { 'data-my-attr': 'custom-attr' };
        result.classNames = ['custom-class1', 'custom-class2'];
      }

      return result;
    },

    heading(node, { entering }): {
      const tagName = `h${node.level}`;

      if (entering) {
        return {
          type: 'openTag',
          tagName,
          classNames: ['my-heading']
        }
      }

      return {
        type: 'closeTag',
        tagName
      }
    }
  }
});

• 자동 링크 확장 기능 제공 (#898)

링크 문법을 사용하지 않아도 자동으로 URL 패턴을 찾아 링크로 변환 시켜 주는 Extended Autolinks 기능을 커스터마이징 할 수 있도록 extendedAutolinks 옵션이 추가되었습니다. 이 옵션을 사용하여 유효한 링크로 변환하는 로직을 처리할 수 있습니다.

// 커스텀 로직 사용
import createLinkify from "linkify-it";

const linkify = createLinkify();

const editor = new Editor({
  // ...
  extendedAutolinks: (content) => {
    const matched = linkify.match(content);

    if (matched) {
      return matched.map((matches) => {
        const { text, url, index, lastIndex } = matches;
        const range = [index, lastIndex];

        return { text, url, range };
      });
    }

    return null;
  },
});

// 기본 내장 정규식 사용
const editor = new Editor({
  // ...
  extendedAutolinks: true,
});

• 사용자 정의 HTML 새니타이저 사용 (#945)

에디터에서는 XSS 취약성 문제를 발생할 수 있는 HTML을 제거하는 새니타이징(HTML sanitization) 기능을 제공합니다. 내장된 새니타이저 대신 DOMPurify와 같이 사용자가 원하는 새니타이저 모듈을 사용해 처리할 수 있도록 customHTMLSanitizer 옵션이 추가되었습니다.

import DOMPurify from 'dompurify';

const purifyOptions = { ... };
const editor = new Editor({
  // ...
  customHTMLSanitizer: html => {
    return DOMPurify.sanitize(html, purifyOptions) || ''
  }
});

• toastui-editor-only.css 제공 (#949)

toastui-editor.css, toastui-viewer.css 와 함께 뷰어(Viewer) 스타일을 제외한 CSS 파일을 추가로 제공합니다. 뷰어 스타일만 커스터마이징하여 사용하려는 경우, toastui-editor-only.css 파일을 사용하여 스타일 중복 사용을 최소화할 수 있습니다.

[npm 제공 파일]
- @toast-ui/editor/
   ├─ dist/
   │     ├─ toastui-editor-only.css
   │     ├─ ...

[CDN 제공 파일]
- uicdn.toast.com/editor/
   ├─ 2.1.0/
   │     ├─ toastui-editor-only.css
   │     ├─ toastui-editor-only.min.css
   │     ├─ ...

버그 수정

• 에디터 : 컨테이너 엘리먼트를 form 태그로 감쌌을 때 에러 발생 (#890)
• 에디터 : 부모 컨테이너가 있을 때 absolute 값을 가지는 요소들 위치가 잘못됨 (#918, #947)
• 위지윅 : 헤딩 첫 번째 커서에서 개행했을 때 헤딩이 사라짐 (#872)
• 위지윅 : 코드 블럭 내 링크 텍스트가 태그로 변경됨 (#911)
• 위지윅 : 빈 figure 태그가 포함되어 있는 경우 이미지가 정상적으로 보이지 않음 (#913)
• 위지윅 : linkAttribute 옵션이 정상적으로 할당되지 않음 (#931)
• 마크다운 : 코드 블럭에서 개행했을 때 정렬 리스트의 불릿 번호처럼 연속된 번호가 자동 완성됨 (#925)
• 마크다운 : alt + 방향키(up, down) 입력 시 라인 단위 텍스트 이동이 동작하지 않음 (#951)
• 마크다운 : 텍스트 및 링크에 [ 문자가 포함된 경우 스크립트 에러 발생 (#952)
• 마크다운 : 테이블 사이에 <br> 또는 일반 문단이 있을 경우 연속된 테이블로 인식됨 (#954)

v3.11.0

기능 추가

• 컬럼, 바 차트 연결 선 추가 (#279)

스택 차트에서 변동 추이를 쉽게 알 수 있게 도와주는 선 연결 기능이 추가되었습니다. 점의 두께, 색상, 타입을 설정해서 사용할 수 있습니다. 기존에 사용되던 stackType 옵션은 이번 버전에서 deprecate 되었으며 v4에서 제거 될 예정입니다.

const options = {
  series: {
    stack: "normal" | "percent",
    // or
    stack: {
      type: "normal" | "percent",
      connector: boolean, // default: false
      // or
      connector: {
        type: "solid" | "dotted", // default: solid
        color: string, // default: #aaa
        width: number, // default: 1
      },
    },
  },
};

사용성 개선

• 컬럼 스택 차트 레전드 순서 스택 순서에 맞게 변경 (#279)

v3.11.1

버그 수정

• 컬럼 스택 차트 툴팁 순서 스택 순서에 맞게 변경 (#280)

v3.11.2

버그 수정

• 히트맵 차트 시리즈 테두리 색상, 두께 반영 (#292)
• 스펙트럼 레전드 텍스트 색상 반영 (#292)
• setData시 레전드 페이지네이션 버튼 제거 안되는 현상 수 (#293)
• setData시 tickInterval='auto' 계산 안되는 현상 수정 (#294)

v1.12.13

사용성 개선

• 일정 팝업의 위치 개선 및 팝업 내 컨텐츠 마우스 셀렉션 활성 처리 (#549, #568, #576)

버그 수정

• 읽기 전용 일정에 대해 종료 날짜를 변경할 수 있는 아이콘을 노출하지 않도록 수정 (#470)
• 월간 뷰 일정 블록 위치 오류 수정 (#539)
• 주간뷰 일정 카테고리 변경 시 업데이트 버그 수정 (#589)

🗞 TOAST UI NEWS

이번 달 Weekly Picks

이번 달은 네 개의 번역글이 올라왔습니다. 타입스크립트 제네릭으로 타입을 추출하는 방법부터 노드와 Gatsby.js에서 자식 프로세스를 디버깅하는 방법과 새로 추가되는 ECMAScript 2020, performance.measureMemory() 에 대한 이야기를 번역해봤습니다. 아직 읽어보시지 않았다면 아래 링크를 클릭하세요! 👇👇

• 2020.04.02 타입스크립트 - 제네릭을 사용하여 타입 추출하기 #251
• 2020.04.09 ECMAScript 2020의 새로운 점 #252
• 2020.04.23 performance.measureMemory()로 웹 페이지 전체 메모리 사용량 모니터링하기
• 2020.04.29 노드와 Gatsby.js에서 크롬으로 자식 프로세스를 디버깅하는 방법

사용 문의, 기능 추가/수정 요청 및 버그 신고는 각 제품의 GitHub 저장소 이슈를 이용해주세요!