8
0
Просмотр исходного кода

Add support for pasting table borders.

Maciej Gołaszewski 6 лет назад
Родитель
Сommit
22da39322a

+ 21 - 4
packages/ckeditor5-table/src/tableediting.js

@@ -115,12 +115,15 @@ export default class TableEditing extends Plugin {
 		schema.extend( 'tableCell', {
 			allowAttributes: [ 'border' ]
 		} );
+		schema.extend( 'table', {
+			allowAttributes: [ 'border' ]
+		} );
 
+		// General upcast 'border' attribute (requires model border attribute to be allowed).
 		conversion.for( 'upcast' ).attributeToAttribute( {
 			view: {
-				name: 'td',
 				styles: {
-					border: /[\s\S]+/
+					'border': /[\s\S]+/
 				}
 			},
 			model: {
@@ -129,18 +132,32 @@ export default class TableEditing extends Plugin {
 			}
 		} );
 
+		// Downcast table cell only (table has own downcast converter).
 		conversion.for( 'downcast' ).attributeToAttribute( {
-			model: 'border',
+			model: {
+				name: 'tableCell',
+				key: 'border'
+			},
 			view: modelAttributeValue => {
 				return ( {
 					key: 'style',
 					value: {
-						border: modelAttributeValue
+						'border': modelAttributeValue
 					}
 				} );
 			}
 		} );
 
+		// Properly downcast table border attribute on <table> and not on <figure>.
+		conversion.for( 'downcast' ).add( dispatcher => dispatcher.on( 'attribute:border:table', ( evt, data, conversionApi ) => {
+			const { item, attributeNewValue } = data;
+			const { mapper, writer } = conversionApi;
+
+			const table = [ ...mapper.toViewElement( item ).getChildren() ].find( child => child.is( 'table' ) );
+
+			writer.setStyle( 'border', attributeNewValue, table );
+		} ) );
+
 		// Define all the commands.
 		editor.commands.add( 'insertTable', new InsertTableCommand( editor ) );
 		editor.commands.add( 'insertTableRowAbove', new InsertRowCommand( editor, { order: 'above' } ) );

+ 50 - 1
packages/ckeditor5-table/tests/manual/tablestyles.html

@@ -4,7 +4,7 @@
 			<thead>
 				<tr>
 					<td><p>Column A</p></td>
-					<td style="background-color: lightblue"><p>Column B</p></td>
+					<td style="border:2px dashed black;background-color: lightblue"><p>Column B</p></td>
 					<td style="background: palevioletred"><p>Column C</p></td>
 				</tr>
 			</thead>
@@ -24,6 +24,55 @@
 			</tbody>
 		</table>
 	</figure>
+
+	<h3>Table from GDocs</h3>
+	<table style="border:none;border-collapse:collapse;width:468pt;table-layout:fixed">
+		<colgroup>
+			<col>
+			<col>
+			<col>
+		</colgroup>
+		<tbody>
+			<tr style="height:21pt">
+				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;background-color:#fff2cc;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+						style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">A</span>
+					</p></td>
+				<td style="border-left:solid #000000 1pt;border-right:dotted #ff0000 1.5pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;background-color:#fff2cc;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+						style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">B</span>
+					</p></td>
+				<td style="border-left:dotted #ff0000 1.5pt;border-right:dotted #ff0000 1.5pt;border-bottom:dotted #ff0000 1.5pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">C</span>
+					</p></td>
+			</tr>
+			<tr style="height:21pt">
+				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">a1</span>
+					</p></td>
+				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:dashed #4c1130 3pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">b1</span>
+					</p></td>
+				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:dotted #ff0000 1.5pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">c1</span>
+					</p></td>
+			</tr>
+			<tr style="height:21pt">
+				<td style="border-left:solid #000000 1pt;border-right:dashed #4c1130 3pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+					<br></td>
+				<td style="border-left:dashed #4c1130 3pt;border-right:dashed #4c1130 3pt;border-bottom:dashed #4c1130 3pt;border-top:dashed #4c1130 3pt;vertical-align:middle;background-color:#a2c4c9;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+					<p dir="ltr" style="line-height:1.2;text-align: center;margin-top:0pt;margin-bottom:0pt;"><span
+						style="font-size: 11pt; font-family: Arial; color: rgb(204, 0, 0); background-color: transparent; font-weight: 700; font-style: italic; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">AWESOME</span>
+					</p></td>
+				<td style="border-left:dashed #4c1130 3pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+					<br></td>
+			</tr>
+		</tbody>
+	</table>
 </div>
 
 <h2>Original editor source</h2>