벌써 벚꽃이 지고 날이 따뜻해지고 있습니다. 길고 길었던 코로나 19가 조금씩 진정되고 있지만, 아직 방심할 단계가 아니라고 합니다. 지금까지 잘 해왔듯이 마스크 없이 여행하는 순간을 상상하며 조금만 더 노력하고 힘냈으면 좋겠습니다.💪💪 그럼, 이번 달 TOAST UI에 어떤 변화가 있었는지 함께 살펴볼까요?🧑💻
이번 마이너 버전 업데이트에서는 하이라이팅, 렌더러 API 제공 등 마크다운 에디터를 강화💪하는 작업들이 진행되었습니다.
사용성 개선
마크다운 에디터의 구문 강조(Syntax Highlighting) 기능이 고도화되었습니다. 마크다운 문법에 쓰이는 기호보다 실제 컨텐츠가 눈에 더 잘 띄도록 색상을 명확하게 구분하였고, 실제 컨텐츠와 유사한 느낌을 주기 위해 편집 영역과 프리뷰 영역의 룩앤필을 최대한 통일하였습니다. 아래 이미지를 보시면 이전 버전보다 가독성과 통일성이 눈에 띄게 좋아진 것을 확인할 수 있습니다. 이제 마크다운 편집 영역에서 정확하고 빠르게 입력한 텍스트의 문법 오류를 확인할 수 있습니다.
개선 전
개선 후
기능 추가
마크다운 에디터에서 현재 편집 중인 텍스트의 위치를 프리뷰에 실시간으로 표시해주는 기능이 추가되었습니다. 마크다운 에디터의 커서 위치에 따라 블록(block) 단위로 프리뷰 영역을 표시해주며, 편집 위치를 빠르게 파악할 수 있습니다. 원하는 경우에만 프리뷰 하이라이팅 기능을 비활성화할 수 있도록 previewHighlight
옵션도 추가되었습니다.
const editor = new Editor({
// ...
previewHighlight: false, // default: true
});
참조 링크(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].
에디터 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
}
}
}
});
링크 문법을 사용하지 않아도 자동으로 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,
});
에디터에서는 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.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)figure
태그가 포함되어 있는 경우 이미지가 정상적으로 보이지 않음 (#913)linkAttribute
옵션이 정상적으로 할당되지 않음 (#931)alt + 방향키(up, down)
입력 시 라인 단위 텍스트 이동이 동작하지 않음 (#951)[
문자가 포함된 경우 스크립트 에러 발생 (#952)<br>
또는 일반 문단이 있을 경우 연속된 테이블로 인식됨 (#954)기능 추가
스택 차트에서 변동 추이를 쉽게 알 수 있게 도와주는 선 연결 기능이 추가되었습니다. 점의 두께, 색상, 타입을 설정해서 사용할 수 있습니다. 기존에 사용되던 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
},
},
},
};
사용성 개선
버그 수정
버그 수정
setData
시 레전드 페이지네이션 버튼 제거 안되는 현상 수 (#293)setData
시 tickInterval='auto'
계산 안되는 현상 수정 (#294)사용성 개선
버그 수정
이번 달은 네 개의 번역글이 올라왔습니다. 타입스크립트 제네릭으로 타입을 추출하는 방법부터 노드와 Gatsby.js에서 자식 프로세스를 디버깅하는 방법과 새로 추가되는 ECMAScript 2020, performance.measureMemory()
에 대한 이야기를 번역해봤습니다. 아직 읽어보시지 않았다면 아래 링크를 클릭하세요! 👇👇
사용 문의, 기능 추가/수정 요청 및 버그 신고는 각 제품의 GitHub 저장소 이슈를 이용해주세요!