dongwoo-kim / toast-ui-editor-qa Goto Github PK

제곧내

blockquote 안에 헤딩태그가 있는 경우만 현상 발생

• 제곧내

ASIS

WYSIWYG > 차트 > 코드 블럭 편집 > 미리보기에서 차트가 보이지 않음

TOBE

ASIS

WYSIWYG > 코드 블럭 편집 > 미리보기가 켜져있는데 버튼은 preview-off

TOBE

```와 json을 붙여쓰면 스타일이 제대로 적용됨

재현 경로

케이스 1

• DOWN 방향키를 연타하여 문서 맨 아래로 내려 간다.
• 프리뷰의 스크롤이 끝까지 내려 가지 않음

케이스 2

• Command + Down/Up 으로 문서 맨 위/아래를 수차례 이동한다.
• 프리뷰 스크롤이 움직이지 않음

마크다운

# 성능 컨설팅 의뢰서

### 성능과 관련된 사용 중인 기술이나 스펙

| 이름 | 용도 | 성능 컨설팅 포함 여부 |
| --- | --- | ------------ |
| Canvas | 챠트 그리기 | O / X |
| Web Worker | 렌더링용 데이터 생성 | O / X |
|  |  |  |

## 테스트 및 개발 환경 정보

### 테스트 환경 정보

| 항목 | 정보 | 비고 |
| --- | --- | --- |
| 테스트 장비 | 맥북 2016 / 아이폰 XS |  |
| 네트워크 | Wifi / LTE / 3G |  |
| 기타 |  |  |

### 주요 사용 프레임워크 및 라이브러리

| 이름 | 버전 | 번들러 사용 여부 |
| --- | --- | --------- |
| Vue | 2.5.21 | O |
| lodash | 4.17.11 | O |
| moment | 2.23.0 | O |
|  |  |  |

### 사용하는 번들러

| 이름 | 버전 |
| --- | --- |
| webpack | 4.28.1 |
| 사용하지 않음 |  |

### 타겟 브라우저(지원하지 않는 브라우저는 삭제바람)

| 이름 | 최하위 버전 | 데스크탑/모바일 |
| --- | ------ | -------- |
| Chrome | 60 | 데스크탑 |
| Safari | 11 | 데스크탑 |
| Firefox | 63 | 데스크탑 |
| Edge | 12 | 데스크탑 |
| IE | 9 이상 | 데스크탑 |
| Android | Android 5.0 | 모바일 |
| iOS | 11 | 모바일 |
| ChromeAndroid | 67 | 모바일 |
| Samsung | 6.2 | 모바일 |

ASIS

WYSIWYG에서 코드 블럭 편집 시 언어 선택 드랍다운이 보이지 않음

TOBE

* 가
    1. 아
    2. 나
    3. 다
    
    5. 마
    6. 바
    7. 사
        1. ```js
            const a = 10;
            ```

위 코드 사용시 개행이 된 코드블럭은 스타일이 적용되지 않고 있습니다.

• 1.4.10
  

• 2.0
  

위지윅 에디터에서 헤딩태그 아래에 코드블럭을 작성한 경우 발생

코드블럭 하단 백틱이 글자수에 맞춰서 하이라이팅이 됩니다.

테스트 했던 세가지 글 gist 링크 입니다.

• https://gist.github.com/jung-han/13b158002d39fefb14e277e30ef00656

• https://gist.github.com/jung-han/13b158002d39fefb14e277e30ef00656#file-lerna-md

lerna 글을 제일 밑으로 내렸을 경우 에디터 화면은 스크롤이 제일 하단이지만, 뷰어의 경우 상단에 멈춰 있습니다.
(1.x 버전에서는 제일 하단으로 이동합니다.)

마크다운

[아아](아아아)
[dkdk](dkdk)

비교 화면

2.0

1.4.10

1. 가
2. 나
3. 다
4. 라
5. 마
6. 바
7. 사
8. 아
9. 자
10. 차
11. 카
12. 타
13. 파
14. 하


150. 오잉? 
151. 

2

1

빈 목록

빈 인용구

제곧내

문제인지는 몰르겠지만 일단 올려봅니다.

뉴 버전

기존버전

• 입력시 스크롤이 살짝 덜컹거리는데, 기존 버전도 같은 현상이 보이지만 조금 더 심하게 느껴지네요. 일단 남겨봅니다
  

Test

### 전월대비

| 컴포넌트 | ??? |
| ---- | --- |
| Editor | ! |
| Calendar | ! |

Markdown

WYSIWYG

ASIS

차트의 레이블 높이가 너무 긺

TOBE

v1.4.10

미리보기와 비교

v2.0.0

미리보기와 비교

어떤 것이 올바른 동작인지는 모르겠지만, 혹시 몰라서 이슈 등록합니다.
하지만 저는 v2.0 방식이 맞는 것 같아요. v1.4.10은 미리보기와 에디터의 내용이 다른데, v2.0에서는 동일하게 나와요.

1.14.10

2.0

### 클라이언트 수

``` chart
,2019년 3월,4월,5월,6월, 7월,8월,9월,10월,11월,12월, 2020년 1월,2월,3월
Editor,648,699,864,834,888,1753,1073,1312,2501,2611,2801,2995,1825
Calendar,857,1285,1368,1488,1885,2266,2341,2633,3418,3613,4052,4293,4076
Chart,117,145,181,205,331,449,545,674,692,751,816,1017,1599
ImageEditor,2140,2684,2383,4879,6567,7009,6772,7156,9450,9468,10609,11430,9313
Grid,248,445,575,607,776,810,917,987,1047,1056,1078,1162,1311

type: column
title: 전체 클라이언트 수
legend.visible: true
series.showLabel: false
chart.format: 1,000

마크다운

전에 있는 글 [링크](https://www.g한글입력oogle.co.kr)

캡쳐 화면

2.0

1.4.10

현상 재현

1. 마크다운 에디터에서 툴바 선택해서 헤딩 추가
2. 헤딩 문법(#) 추가 후에 툴바가 모두 활성화 된 상태로 나옴

그 외 이슈

• 스크롤 싱크 버튼에 undefined 값이 출력됨

원인

버튼 텍스트 값이 옵션으로 처리되는데 이 때 옵션 값이 없을 경우 undefined로 초기화 되어서 해당 현상이 발생하는 것으로 보임

<button class="tui-scrollsync active" type="button" style="display: inline-block;">undefined</button>

1. 마크다운 편집모드에서
2. 테이블을 생성하고
3. 셀의 내용에 링크와 <br>을 넣음
4. 미리보기는 잘 나오는 것을 확인
5. 위지윅 모드로 전환
6. 테이블이 틀어짐 확인
7. 다시 마크다운 모드로 전환
8. 링크 요소가 테이블 밖으로 빠져나와 있음 확인

4번 이미지

6번 이미지

8번 이미지

테스트에 사용한 마크다운

| 차수 | 일정 | 배포 가이드 | 진행상태 |
| --- | --- | ------ | ---- |
| 1차 | 2018년 11월 16일 | [HTML/CSS/Sass](dooray://1387695619080878080/pages/2349200384342341719)<br>[코딩컨벤션](dooray://1387695619080878080/pages/2349199899044190550) | 배포 완료 |
| 2차 | <span style="color:#009800">2018년 11월 23일</span> | [안티패턴](dooray://1387695619080878080/pages/2354102345589825174)<br>[정적분석](dooray://1387695619080878080/pages/2354102384017570716) | <span style="color:#009800">배포 예정</span> |
| 3차 | 2018년 11월 30일 | \* 의존성 관리<br>\* 번들러 | 최종(4차)리뷰 진행중 |
| 4차 | 2018년 12월 7일 | \* 테스팅<br>\* 디버깅 | 3차 리뷰 진행중 |
| 5차 | 2018년 12월 14일 | \* TOAST UI Component<br>\* TOAST UI CodeSnippet<br>\* jQuery | 3차 리뷰 진행중 |
| 6차 | 2018년 12월 21일 | \* 성능<br>\* ES5 to ES6<br>\* 보일러 플레이트 | 재작성 완료<br>1차 리뷰 진행중 |

질문) 문단 단위로 하이라이트 되어서 그런거죠?

AS-IS

체크박스 중앙과 텍스트의 중앙이 맞지 않는것 같아요.

텍스트가 1~2px 정도 아래로 치우친 느낌이에요

TO-BE

텍스트와 체크박스의 정렬이 맞았으면 좋겠습니다.

2.0

1.4.10

차트 코드블럭을 복사했다가 그대로 붙여넣으면 스크립트 에러가 발생함.

```chart
category1,category2
Jan,21,23
Feb,31,17

type: column
title: Monthly Revenue
x.title: Amount
y.title: Month
y.min: 1
y.max: 40
y.suffix: $
```

1버전, 2버전, 두레이 모두 동일하게 발생하는데..
스펙인지 버그인지 헤깔려서 일단 등록해요.

1. 위즈윅모드에서
2. 코드블럭 버튼 클릭해서 코드블럭편집 상태로 만들고
3. 개행이 있는 문자열을 입력
4. 첫번째줄 끝에 커서를 두고 엔터를 두번입력
5. 두개의 코드블럭으로 분리됨

2번 이미지지

3번 이미지

4번 이미지 - 엔터 한번 입력

4번 이미지 - 엔터 두번 입력

※ 참고 ※
마지막 라인 끝에 커서를 두고 엔터를 두번치면 코드블럭 영역을 빠져나가는건 이상하지 않은데..
다른 라인 끝에 커서를 두고 엔터를 두번치면 개행이 계속 되어야 하지 않을까요?
이렇게..

위지윅 에디터에서 헤딩태그 아래에 테이블을 작성한 경우 발생

AS-IS

마우스 커서는 표 위에 있는데 컨텍스트 메뉴는 에디터 상단에 표시됨

TOBE

마우스 커서 옆에 컨텍스트 메뉴가 표시됨

![상담소](https://user-images.githubusercontent.com/389021/72852172-22fcd000-3cf1-11ea-93f8-6954ce1b9085.png) <center>(상담소 전경&#x2026; 핸드폰 파는거 아니다)</center>![상담소](https://user-images.githubusercontent.com/389021/72852172-22fcd000-3cf1-11ea-93f8-6954ce1b9085.png) <center>(상담소 전경&#x2026; 핸드폰 파는거 아니다)</center>![상담소](https://user-images.githubusercontent.com/389021/72852172-22fcd000-3cf1-11ea-93f8-6954ce1b9085.png) <center>(상담소 전경&#x2026; 핸드폰 파는거 아니다)</center>![상담소](https://user-images.githubusercontent.com/389021/72852172-22fcd000-3cf1-11ea-93f8-6954ce1b9085.png) <center>(상담소 전경&#x2026; 핸드폰 파는거 아니다)</center>![상담소](https://user-images.githubusercontent.com/389021/72852172-22fcd000-3cf1-11ea-93f8-6954ce1b9085.png) <center>(상담소 전경&#x2026; 핸드폰 파는거 아니다)</center>

라인에 이미지가 여러개라 버그같이 동작을해요..
대충 이거 보면 짐작하겠죠? 어찌 동작할지 ㅋ

기존에 존재하는 구분자는 똑같이 표시해 주는 게 좋을 것 같습니다.

마크다운 편집 모드에서
마크다운 영역의 스크롤을 문서 하단까지 내렸을 때,
미리보기 영역의 스크롤은 문서 하단까지 이동되지 않아서 문서가 잘려보입니다.

1번 스크롤은 바닥까지 내려간 상태 → 3번 문서 하단이 보이는데
2번 스크롤은 바닥따지 내려오지 않음 → 4번 문서 하단이 잘려 보임 (물론 2번 스크롤을 움직이면 문서하단을 볼 수 있음)

1번 스크롤이 바닥까지 내려가면, 2번 스크롤도 바닥까지 내려가야 함