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

Stub block indent/outdent using offset & unit.

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

+ 17 - 2
packages/ckeditor5-indent/src/indentblock.js

@@ -16,6 +16,19 @@ import IndentBlockCommand from './indentblockcommand';
  * @extends module:core/plugin~Plugin
  */
 export default class IndentBlock extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		editor.config.define( 'indentBlock', {
+			classes: [],
+			offset: 1,
+			unit: 'em'
+		} );
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -61,8 +74,10 @@ export default class IndentBlock extends Plugin {
 			}
 		} );
 
-		editor.commands.add( 'indentBlock', new IndentBlockCommand( editor ) );
-		editor.commands.add( 'outdentBlock', new IndentBlockCommand( editor ) );
+		const config = editor.config.get( 'indentBlock' );
+
+		editor.commands.add( 'indentBlock', new IndentBlockCommand( editor, Object.assign( { direction: 'forward' }, config ) ) );
+		editor.commands.add( 'outdentBlock', new IndentBlockCommand( editor, Object.assign( { direction: 'backward' }, config ) ) );
 	}
 
 	afterInit() {

+ 34 - 1
packages/ckeditor5-indent/src/indentblockcommand.js

@@ -16,6 +16,22 @@ import first from '@ckeditor/ckeditor5-utils/src/first';
  * @extends module:core/plugin~Plugin
  */
 export default class IndentBlockCommand extends Command {
+	/**
+	 * Creates an instance of the command.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor Editor instance.
+	 * @param {Object} config.
+	 */
+	constructor( editor, { classes, offset, unit, direction } ) {
+		super( editor );
+		this.classes = classes;
+		this.offset = offset;
+		this.unit = unit;
+		this.direction = direction == 'forward' ? 1 : -1;
+
+		this.useClasses = !!classes.length;
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -34,10 +50,27 @@ export default class IndentBlockCommand extends Command {
 
 		const itemsToChange = Array.from( doc.selection.getSelectedBlocks() );
 
-		model.change( () => {
+		model.change( writer => {
 			for ( const item of itemsToChange ) {
 				// eslint-disable-next-line no-undef
 				console.log( 'indent block', item );
+
+				if ( this.useClasses ) {
+					// eslint-disable-next-line no-undef
+					console.log( 'indent using classes' );
+				} else {
+					const currentIndent = item.getAttribute( 'indent' );
+					const currentOffset = parseFloat( currentIndent || 0 );
+
+					const offsetToSet = currentOffset + this.direction * this.offset;
+					const newIndent = offsetToSet + this.unit;
+
+					if ( offsetToSet > 0 ) {
+						writer.setAttribute( 'indent', newIndent, item );
+					} else {
+						writer.removeAttribute( 'indent', item );
+					}
+				}
 			}
 		} );
 	}

+ 1 - 1
packages/ckeditor5-indent/tests/manual/indent-block.html

@@ -8,7 +8,7 @@
 </head>
 <div id="editor">
 	<h2>Heading 1</h2>
-	<p style="margin-left:2em;">Paragraph</p>
+	<p style="margin-left:1.5em;">Paragraph</p>
 	<p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
 	<ul>
 		<li>UL List item 1</li>