Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Paste from Word should inline stylesheets #9879

Closed
mlewand opened this issue Jun 14, 2021 · 1 comment
Closed

Paste from Word should inline stylesheets #9879

mlewand opened this issue Jun 14, 2021 · 1 comment
Labels
domain:ui/ux This issue reports a problem related to UI or UX. package:paste-from-office resolution:duplicate This issue is a duplicate of another issue and was merged into it. squad:core Issue to be handled by the Core team. support:2 An issue reported by a commercially licensed client. type:improvement This issue reports a possible enhancement of an existing feature.

Comments

@mlewand
Copy link
Contributor

mlewand commented Jun 14, 2021

📝 Provide a description of the improvement

Currently our implementation only checks styles for some list-related markup. But it does not inline text formatting like we did in CKEditor 4. As a result if the text is formatted using stylesheets (in Word) the CKE5 will not retain anything from it. It also does not carry the default Word's style which tends to confuse end users too (#7964).

To fix it Paste from Office should inline matched styles for any element that has any class.

I'm providing an text/html clipboard dump to reproduce it:

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 11">
<meta name=Originator content="Microsoft Word 11">
<link rel=File-List
href="file:///X:\clip_filelist.xml">
<!--[if gte mso 9]><xml>
 <w:WordDocument>
  <w:View>Normal</w:View>
  <w:Zoom>0</w:Zoom>
  <w:PunctuationKerning/>
  <w:ValidateAgainstSchemas/>
  <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
  <w:IgnoreMixedContent>false</w:IgnoreMixedContent>
  <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
  <w:Compatibility>
   <w:BreakWrappedTables/>
   <w:SnapToGridInCell/>
   <w:WrapTextWithPunct/>
   <w:UseAsianBreakRules/>
   <w:DontGrowAutofit/>
  </w:Compatibility>
  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
 </w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
 <w:LatentStyles DefLockedState="false" LatentStyleCount="156">
 </w:LatentStyles>
</xml><![endif]-->
<style>
<!--
 /* Font Definitions */
 @font-face
	{font-family:Wingdings;
	panose-1:5 0 0 0 0 0 0 0 0 0;
	mso-font-charset:2;
	mso-generic-font-family:auto;
	mso-font-pitch:variable;
	mso-font-signature:0 268435456 0 0 -2147483648 0;}
@font-face
	{font-family:Tahoma;
	panose-1:2 11 6 4 3 5 4 4 2 4;
	mso-font-charset:0;
	mso-generic-font-family:swiss;
	mso-font-pitch:variable;
	mso-font-signature:-520077569 -1073717157 41 0 66047 0;}
@font-face
	{font-family:Calibri;
	panose-1:2 15 5 2 2 2 4 3 2 4;
	mso-font-charset:0;
	mso-generic-font-family:swiss;
	mso-font-pitch:variable;
	mso-font-signature:-469745921 -1073732485 9 0 511 0;}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
	{mso-style-parent:"";
	margin-top:0in;
	margin-right:0in;
	margin-bottom:8.0pt;
	margin-left:0in;
	line-height:107%;
	mso-pagination:widow-orphan;
	font-size:11.0pt;
	font-family:Calibri;
	mso-fareast-font-family:"Times New Roman";
	mso-bidi-font-family:"Times New Roman";}
p.Instruct, li.Instruct, div.Instruct
	{mso-style-name:"Template Instructions";
	mso-style-link:"Template Instructions Char1";
	mso-style-next:Normal;
	margin-top:6.0pt;
	margin-right:0in;
	margin-bottom:0in;
	margin-left:0in;
	margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:9.0pt;
	mso-bidi-font-size:12.0pt;
	font-family:Tahoma;
	mso-fareast-font-family:Calibri;
	mso-bidi-font-family:"Times New Roman";
	color:navy;
	mso-bidi-font-weight:bold;
	font-style:italic;
	mso-bidi-font-style:normal;}
span.InstructChar1
	{mso-style-name:"Template Instructions Char1";
	mso-style-locked:yes;
	mso-style-parent:"";
	mso-style-link:"Template Instructions";
	mso-ansi-font-size:9.0pt;
	mso-bidi-font-size:12.0pt;
	font-family:Tahoma;
	mso-ascii-font-family:Tahoma;
	mso-fareast-font-family:Calibri;
	mso-hansi-font-family:Tahoma;
	color:navy;
	mso-ansi-language:EN-US;
	mso-fareast-language:EN-US;
	mso-bidi-language:AR-SA;
	mso-bidi-font-weight:bold;
	font-style:italic;
	mso-bidi-font-style:normal;}
@page Section1
	{size:8.5in 11.0in;
	margin:1.0in 1.0in 1.0in 1.0in;
	mso-header-margin:.5in;
	mso-footer-margin:.5in;
	mso-paper-source:0;}
div.Section1
	{page:Section1;}
 /* List Definitions */
 @list l0
	{mso-list-id:1809862933;
	mso-list-type:hybrid;
	mso-list-template-ids:-926637252 -1 -1 -1 -1 -1 -1 -1 -1 -1;}
@list l0:level1
	{mso-level-number-format:bullet;
	mso-level-text:;
	mso-level-tab-stop:.5in;
	mso-level-number-position:left;
	text-indent:-.25in;
	mso-ansi-font-size:10.0pt;
	font-family:Symbol;}
@list l0:level2
	{mso-level-number-format:bullet;
	mso-level-text:o;
	mso-level-tab-stop:1.0in;
	mso-level-number-position:left;
	text-indent:-.25in;
	font-family:"Courier New";
	mso-bidi-font-family:"Times New Roman";}
@list l1
	{mso-list-id:1850025542;
	mso-list-type:hybrid;
	mso-list-template-ids:-926637252 -1 -1 -1 -1 -1 -1 -1 -1 -1;}
@list l1:level1
	{mso-level-number-format:bullet;
	mso-level-text:;
	mso-level-tab-stop:.5in;
	mso-level-number-position:left;
	text-indent:-.25in;
	mso-ansi-font-size:10.0pt;
	font-family:Symbol;}
@list l1:level2
	{mso-level-number-format:bullet;
	mso-level-text:;
	mso-level-tab-stop:1.0in;
	mso-level-number-position:left;
	text-indent:-.25in;
	font-family:Wingdings;}
@list l0:level1 lfo1
	{mso-level-start-at:0;}
@list l0:level2 lfo1
	{mso-level-start-at:0;}
@list l1:level1 lfo2
	{mso-level-start-at:0;}
@list l1:level2 lfo2
	{mso-level-start-at:0;}
ol
	{margin-bottom:0in;}
ul
	{margin-bottom:0in;}
-->
</style>
<!--[if gte mso 10]>
<style>
 /* Style Definitions */
 table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-parent:"";
	mso-padding-alt:0in 5.4pt 0in 5.4pt;
	mso-para-margin:0in;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:10.0pt;
	font-family:"Times New Roman";
	mso-ansi-language:#0400;
	mso-fareast-language:#0400;
	mso-bidi-language:#0400;}
</style>
<![endif]--><!--[if gte mso 9]><xml>
 <o:shapedefaults v:ext="edit" spidmax="1026"/>
</xml><![endif]--><!--[if gte mso 9]><xml>
 <o:shapelayout v:ext="edit">
  <o:idmap v:ext="edit" data="1"/>
 </o:shapelayout></xml><![endif]-->
</head>

<body lang=EN-US style='tab-interval:.5in'>
<!--StartFragment-->

<p class="Instruct" align="center" style="text-align:center"><b style="mso-bidi-font-weight:normal"><u><span style="font-size:16.0pt;
mso-bidi-font-size:22.0pt;font-style:normal;mso-bidi-font-style:italic">Xxxxxx
Xxxxxxxx<o:p></o:p></span></u></b></p>

<p class="MsoNormal"><o:p>&nbsp;</o:p></p>

<p class="Instruct">Xxxx xxxxxxxxxxx xxx xxxx 0:</p>

<p class="Instruct" style="margin-left:.5in;text-indent:-.25in;
mso-list:l0 level1 lfo1;tab-stops:list .5in"><!--[if !supportLists]--><span style="font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Symbol;
mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol;font-style:normal"><span style="mso-list:Ignore">·<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><!--[endif]-->Xxxx xxxxxx xxxxxxxxx xxxx xx xxxxxxxx.</p>

<p class="Instruct" style="margin-left:.5in;text-indent:-.25in;
mso-list:l0 level1 lfo1;tab-stops:list .5in"><!--[if !supportLists]--><span style="font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Symbol;
mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol;font-style:normal"><span style="mso-list:Ignore">·<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><!--[endif]-->Xxxx xxxxxx xxxx xxxx.</p>

<p class="Instruct" style="margin-left:.5in;text-indent:-.25in;
mso-list:l0 level1 lfo1;tab-stops:list .5in"><!--[if !supportLists]--><span style="font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Symbol;
mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol;font-style:normal"><span style="mso-list:Ignore">·<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><!--[endif]-->Xxxx xxxx xxxx xxx-xxxx.</p>

<p class="Instruct" style="margin-left:1.0in;text-indent:-.25in;
mso-list:l1 level2 lfo2;tab-stops:list 1.0in"><!--[if !supportLists]--><span style="font-family:Wingdings;mso-fareast-font-family:Wingdings;mso-bidi-font-family:
Wingdings;font-style:normal"><span style="mso-list:Ignore">Ø<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><!--[endif]-->Xxxx
xxxxx xx xxx xxxxxxxx xx xx0 xxxxxx xxxxx xx xx xx0 xxxxxx, xxx xxxxxx xxx
xxxxxxxx.</p>

<p class="Instruct" style="margin-left:1.0in;text-indent:-.25in;
mso-list:l1 level2 lfo2;tab-stops:list 1.0in"><!--[if !supportLists]--><span style="font-family:Wingdings;mso-fareast-font-family:Wingdings;mso-bidi-font-family:
Wingdings;font-style:normal"><span style="mso-list:Ignore">Ø<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><!--[endif]-->Xxxx
xxxxx xx xx xxxxxxx xx xxx xxx xxxxxxxx xxxxxxx xxxx xxx xxxxxxx xxxxx
xxxxxxxxx.</p>

<p class="Instruct" style="margin-left:.5in;text-indent:-.25in;
mso-list:l0 level1 lfo1;tab-stops:list .5in"><!--[if !supportLists]--><span style="font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:Symbol;
mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol;font-style:normal"><span style="mso-list:Ignore">·<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><!--[endif]-->Xxxxx xxxx xx xxxxxx xxxxxxxx<a name="_GoBack"></a></p>

<p class="MsoNormal"><o:p>&nbsp;</o:p></p>

<!--EndFragment-->
</body>

</html>

If you'd like to see this improvement implemented, add a 👍 reaction to this post.
@mlewand mlewand added type:improvement This issue reports a possible enhancement of an existing feature. package:paste-from-office domain:ui/ux This issue reports a problem related to UI or UX. labels Jun 14, 2021
@lslowikowska lslowikowska added the support:2 An issue reported by a commercially licensed client. label Jun 15, 2021
@Reinmar Reinmar added the squad:core Issue to be handled by the Core team. label Sep 8, 2021
@Reinmar Reinmar mentioned this issue Sep 22, 2021
Open
@jswiderski jswiderski mentioned this issue Jul 12, 2022
Closed
@FilipTokarski FilipTokarski mentioned this issue Jun 5, 2023
Closed
@mlewand
Copy link
Contributor Author

mlewand commented Jul 3, 2023

Will be closed with #10577

@mlewand mlewand closed this as completed Jul 3, 2023
@mlewand mlewand added the resolution:duplicate This issue is a duplicate of another issue and was merged into it. label Jul 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
domain:ui/ux This issue reports a problem related to UI or UX. package:paste-from-office resolution:duplicate This issue is a duplicate of another issue and was merged into it. squad:core Issue to be handled by the Core team. support:2 An issue reported by a commercially licensed client. type:improvement This issue reports a possible enhancement of an existing feature.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Reinmar @mlewand @lslowikowska