feat: convert list copied from ms office to standard list element in wysiwyg

[seonim-ryu]

Please check if the PR fulfills these requirements

• It's the right issue type on the title
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• The commit message follows our guidelines
• Tests for the changes have been added (for bug fixes/features)
• Docs have been added/updated (for bug fixes/features)
• It does not introduce a breaking change or has a description of the breaking change

Description

Bug Fix

If you copy and paste the list from MS Office in WYSIWYG, it is pasted as plain text as follows.

In Chrome, Edge, and IE10, it is pasted as above. However, in IE11, the list is pasted as it is, but the list item with children is shown as newline as follows.

When pasting, the clipboard data copied from MS Office must be parsed and processed into a list element of the WYSIWIG editor. In MS Office, the copied list is created as a paragraph, and in this case, the list is created with the attribute value of a specific class (MsoListParagraph ) or style (mso-list).

In MS Office, the clipboard data is as follows when copied and pasted into the WYSIWIG editor.

<p class="MsoListParagraph" style="margin-left:40.0pt;mso-para-margin-left:0gd;
text-indent:-20.0pt;mso-list:l0 level1 lfo1">
    <span class="font" style="font-family:Wingdings">
        <span style="mso-list:Ignore">l
            <span class="font" style="font-family:&quot;Times New Roman&quot;">
                <span class="size" style="font-size:7pt">&nbsp; </span>
            </span>
        </span>
    </span>
    <span lang="KO">foo</span>
</p>
<p class="MsoListParagraph" style="margin-left:60.0pt;mso-para-margin-left:0gd;
text-indent:-20.0pt;mso-list:l0 level2 lfo1">
    <span class="font" style="font-family:Wingdings">
        <span style="mso-list:Ignore">n
            <span class="font" style="font-family:&quot;Times New Roman&quot;">
                <span class="size" style="font-size:7pt">&nbsp; </span>
            </span>
        </span>
    </span>
    <span lang="KO">bar</span>
</p>

List elements created after processing are as follows. Note that the WYSIWIG editor uses Squire. Because of the list structure created at this time, the child list (li > ul) is created as the next element, not as a child of the list item.

<ul>
    <li>foo</li>
    <ul>
        <li>bar</li>
    </ul>
</ul>

Result

Finally, the list should be pasted in the following format.

Chrome

Edge

IE11

IE10

---

Thank you for your contribution to TOAST UI product. 🎉 😘 ✨

[seonim-ryu]

참조 : 기존에 innerText로 체크했는데 이 경우 텍스트를 검사하는 것이기 때문에 태그에 포함된 mso- 프리픽스 값을 체크할 수 없어서 innerHTML로 수정함

[seonim-ryu]

참조 : IE11에서 MS Office의 리스트를 붙여넣기 하면 다른 브라우저와 다르게 리스트 엘리먼트로 데이터가 들어온다. 이 경우 Squire의 리스트 구조에 맞게 자식 리스트의 위치를 변경해줘야 한다. 이를 처리하기 위한 로직으로 추가함

• 표준 리스트 마크업 구조

<ul>
    <li>
        foo
        <ul>
            <li>bar</li>
        </ul>
    </li>
    <li>baz</li>
</ul>

• Squire 리스트 마크업 구조

<ul>
    <li>foo</li>
    <ul>
        <li>bar</li>
    </ul>
    <li>baz</li>
</ul>

[seonim-ryu]

참조 : 이 로직으로 인해서 Edge에서 type === 'text/html'의 클립보드 데이터를 가져오지 못한다. 주석 내용에 따르면 구형 Edge를 대응할 목적으로 보이는데 이 부분은 Squire 이슈로 등록하여 관리할 예정임

[js87zz]

이 부분은 두레이 task에 같이 히스토리로 남겨놓는게 좋을 것 같습니다~!

[seonim-ryu]

넵~ Squire에 이슈 등록하고 같이 업데이트 해둘게요~

Squire 등록 이슈 : fastmail/Squire#389

[lja1018]

[08/20] 리뷰완료
고생하셨습니다!

[shiren]

수고하셨어요

[js87zz]

고생하셨습니다!