瀏覽代碼

Code and docs adjustments.

Krzysztof Krztoń 7 年之前
父節點
當前提交
6be111463b

+ 25 - 24
packages/ckeditor5-paste-from-office/src/filters/list.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module pastefromoffice/filters/list
+ * @module paste-from-office/filters/list
  */
 
 import Element from '@ckeditor/ckeditor5-engine/src/view/element';
@@ -26,7 +26,7 @@ import UpcastWriter from '@ckeditor/ckeditor5-engine/src/view/upcastwriter';
  * @returns {module:engine/view/node~Node|module:engine/view/documentfragment~DocumentFragment} The view
  * structure instance with list-like elements transformed into semantic lists.
  */
-export function paragraphsToLists( bodyView, stylesString ) {
+export function transformParagraphsToLists( bodyView, stylesString ) {
 	const firstChild = bodyView.getChild( 0 );
 
 	if ( firstChild ) {
@@ -37,25 +37,6 @@ export function paragraphsToLists( bodyView, stylesString ) {
 	return bodyView;
 }
 
-// Writer used for View elements manipulation.
-const writer = new UpcastWriter();
-
-// Matcher for finding list-like elements.
-const listMatcher = new Matcher( {
-	name: /^p|h\d+$/,
-	styles: {
-		'mso-list': /.*/
-	}
-} );
-
-// Matcher for finding `span` elements holding lists numbering/bullets.
-const listBulletMatcher = new Matcher( {
-	name: 'span',
-	styles: {
-		'mso-list': 'Ignore'
-	}
-} );
-
 // Finds all list-like nodes starting from a given position.
 //
 // @param {module:engine/src/view/position~Position} startPosition Position from which to start looking.
@@ -68,8 +49,17 @@ const listBulletMatcher = new Matcher( {
 function findAllListNodes( startPosition ) {
 	const treeWalker = new TreeWalker( { startPosition, ignoreElementEnd: true } );
 
+	// Matcher for finding list-like elements.
+	const listMatcher = new Matcher( {
+		name: /^p|h\d+$/,
+		styles: {
+			'mso-list': /.*/
+		}
+	} );
+
 	// Find all list nodes.
 	const listNodes = [];
+
 	for ( const value of treeWalker ) {
 		if ( value.type === 'elementStart' && listMatcher.match( value.item ) ) {
 			const itemData = getListItemData( value.item );
@@ -93,6 +83,8 @@ function findAllListNodes( startPosition ) {
 // @param {String} styles CSS styles which may contain additional data about lists format.
 function createLists( listItems, styles ) {
 	if ( listItems.length ) {
+		const writer = new UpcastWriter();
+
 		let currentList = null;
 		let previousListItem = null;
 
@@ -105,7 +97,7 @@ function createLists( listItems, styles ) {
 				writer.insertChild( listNode.parent.getChildIndex( listNode ), currentList, listNode.parent );
 			}
 
-			removeBulletElement( listNode );
+			removeBulletElement( listNode, writer );
 
 			writer.appendChild( listNode, currentList );
 			writer.rename( 'li', listNode );
@@ -185,11 +177,20 @@ function findListType( listItem, styles ) {
 // Removes span with a numbering/bullet from the given list element.
 //
 // @param {module:engine/view/element~Element} listElement
-function removeBulletElement( listElement ) {
+// @param {module:engine/view/upcastwriter~UpcastWriter} writer
+function removeBulletElement( listElement, writer ) {
+	// Matcher for finding `span` elements holding lists numbering/bullets.
+	const bulletMatcher = new Matcher( {
+		name: 'span',
+		styles: {
+			'mso-list': 'Ignore'
+		}
+	} );
+
 	const treeWalker = new TreeWalker( { startPosition: Position.createBefore( listElement.getChild( 0 ) ), ignoreElementEnd: true } );
 
 	for ( const value of treeWalker ) {
-		if ( value.type === 'elementStart' && listBulletMatcher.match( value.item ) ) {
+		if ( value.type === 'elementStart' && bulletMatcher.match( value.item ) ) {
 			writer.remove( value.item );
 		}
 	}

+ 10 - 9
packages/ckeditor5-paste-from-office/src/filters/utils.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module pastefromoffice/filters/utils
+ * @module paste-from-office/filters/utils
  */
 
 /* globals DOMParser */
@@ -12,11 +12,8 @@
 import DomConverter from '@ckeditor/ckeditor5-engine/src/view/domconverter';
 import { NBSP_FILLER } from '@ckeditor/ckeditor5-engine/src/view/filler';
 
-const domParser = new DOMParser();
-const domConverter = new DomConverter( { blockFiller: NBSP_FILLER } );
-
 /**
- * Parses provided HTML extracting contents of `body` and `style` tags.
+ * Parses provided HTML extracting contents of `<body>` and `<style>` tags.
  *
  * @param {String} htmlString HTML string to be parsed.
  * @returns {Object} result
@@ -28,6 +25,8 @@ const domConverter = new DomConverter( { blockFiller: NBSP_FILLER } );
  * @returns {String} result.stylesString All `style` tags contents combined in the order of occurrence into one string.
  */
 export function parseHtml( htmlString ) {
+	const domParser = new DOMParser();
+
 	// Parse htmlString as native Document object.
 	const htmlDocument = domParser.parseFromString( htmlString, 'text/html' );
 
@@ -53,6 +52,7 @@ export function parseHtml( htmlString ) {
 // @param {Document} htmlDocument Native `Document` object to be transformed.
 // @returns {module:engine/view/documentfragment~DocumentFragment}
 function documentToView( htmlDocument ) {
+	const domConverter = new DomConverter( { blockFiller: NBSP_FILLER } );
 	const fragment = htmlDocument.createDocumentFragment();
 	const nodes = htmlDocument.body.childNodes;
 
@@ -73,11 +73,12 @@ function documentToView( htmlDocument ) {
 function extractStyles( htmlDocument ) {
 	const styles = [];
 	const stylesString = [];
+	const styleTags = htmlDocument.getElementsByTagName( 'style' );
 
-	for ( const el of htmlDocument.all ) {
-		if ( el.tagName.toLowerCase() === 'style' && el.sheet && el.sheet.rules && el.sheet.rules.length ) {
-			styles.push( el.sheet );
-			stylesString.push( el.innerHTML );
+	for ( const style of styleTags ) {
+		if ( style.sheet && style.sheet.rules && style.sheet.rules.length ) {
+			styles.push( style.sheet );
+			stylesString.push( style.innerHTML );
 		}
 	}
 

+ 10 - 6
packages/ckeditor5-paste-from-office/src/pastefromoffice.js

@@ -4,18 +4,22 @@
  */
 
 /**
- * @module pastefromoffice/pastefromoffice
+ * @module paste-from-office/pastefromoffice
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 
 import { parseHtml } from './filters/utils';
-import { paragraphsToLists } from './filters/list';
+import { transformParagraphsToLists } from './filters/list';
 
 /**
- * This plugin handles content pasted from Word and transforms it (if necessary)
- * to format suitable for editor {@link module:engine/model/model~Model}.
+ * The Paste from Office plugin.
+ *
+ * This plugin handles content pasted from Office apps (for now only Word) and transforms it (if necessary)
+ * to a valid structure which can then be understood by the editor features.
+ *
+ * For more information about this feature check the {@glink api/paste-from-office package page}.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -45,7 +49,7 @@ export default class PasteFromOffice extends Plugin {
 	/**
 	 * Normalizes input pasted from Word to format suitable for editor {@link module:engine/model/model~Model}.
 	 *
-	 * **Notice**: this function was exposed mainly for testing purposes and should not be called directly.
+	 * **Note**: this function was exposed mainly for testing purposes and should not be called directly.
 	 *
 	 * @protected
 	 * @param {String} input Word input.
@@ -53,7 +57,7 @@ export default class PasteFromOffice extends Plugin {
 	 */
 	_normalizeWordInput( input ) {
 		const { body, stylesString } = parseHtml( input );
-		const normalizedInput = paragraphsToLists( body, stylesString );
+		const normalizedInput = transformParagraphsToLists( body, stylesString );
 
 		return normalizedInput;
 	}

+ 7 - 7
packages/ckeditor5-paste-from-office/tests/filters/list.js

@@ -6,17 +6,17 @@
 import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
 import { stringify } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 
-import { paragraphsToLists } from '../../src/filters/list';
+import { transformParagraphsToLists } from '../../src/filters/list';
 
 describe( 'Filters – list', () => {
 	const htmlDataProcessor = new HtmlDataProcessor();
 
-	describe( 'paragraphsToLists', () => {
+	describe( 'transformParagraphsToLists', () => {
 		it( 'replaces list-like elements with semantic lists', () => {
 			const html = '<p style="mso-list:l0 level1 lfo0"><span style="mso-list:Ignore">1.</span>Item 1</p>';
 			const view = htmlDataProcessor.toView( html );
 
-			const result = paragraphsToLists( view, '' );
+			const result = transformParagraphsToLists( view, '' );
 
 			expect( result.childCount ).to.equal( 1 );
 			expect( result.getChild( 0 ).name ).to.equal( 'ol' );
@@ -27,7 +27,7 @@ describe( 'Filters – list', () => {
 			const html = '<p style="mso-list:l0 level1 lfo0"><span style="mso-list:Ignore">1.</span>Item 1</p>';
 			const view = htmlDataProcessor.toView( html );
 
-			const result = paragraphsToLists( view, '@list l0:level1 { mso-level-number-format: bullet; }' );
+			const result = transformParagraphsToLists( view, '@list l0:level1 { mso-level-number-format: bullet; }' );
 
 			expect( result.childCount ).to.equal( 1 );
 			expect( result.getChild( 0 ).name ).to.equal( 'ul' );
@@ -38,7 +38,7 @@ describe( 'Filters – list', () => {
 			const html = '<h1>H1</h1><p>Foo Bar</p>';
 			const view = htmlDataProcessor.toView( html );
 
-			const result = paragraphsToLists( view, '' );
+			const result = transformParagraphsToLists( view, '' );
 
 			expect( result.childCount ).to.equal( 2 );
 			expect( stringify( result ) ).to.equal( html );
@@ -48,7 +48,7 @@ describe( 'Filters – list', () => {
 			const html = '<p style="mso-list:"><span style="mso-list:Ignore">1.</span>Item 1</p>';
 			const view = htmlDataProcessor.toView( html );
 
-			const result = paragraphsToLists( view, '' );
+			const result = transformParagraphsToLists( view, '' );
 
 			expect( result.childCount ).to.equal( 1 );
 			expect( result.getChild( 0 ).name ).to.equal( 'ol' );
@@ -58,7 +58,7 @@ describe( 'Filters – list', () => {
 		it( 'handles empty body correctly', () => {
 			const view = htmlDataProcessor.toView( '' );
 
-			const result = paragraphsToLists( view, '' );
+			const result = transformParagraphsToLists( view, '' );
 
 			expect( result.childCount ).to.equal( 0 );
 			expect( stringify( result ) ).to.equal( '' );