8
0
Pārlūkot izejas kodu

Add the strikethrough feature.

Rémy HUBSCHER 8 gadi atpakaļ
vecāks
revīzija
464d682d0f

+ 68 - 0
packages/ckeditor5-basic-styles/src/strike.js

@@ -0,0 +1,68 @@
+/**
+ * @license Copyright (c) 2017, CKSource - Rémy Hubscher. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module notes/ckeditor-build/strike
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import StrikeEngine from './strikeengine';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import strikeIcon from '../theme/icons/strike.svg';
+
+/**
+ * The strike feature. It introduces the Strike button and the <kbd>Ctrl+E</kbd> keystroke.
+ *
+ * It uses the {@link module:basic-styles/strikeengine~StrikeEngine strike engine feature}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class Strike extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ StrikeEngine ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'Strike';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+		const command = editor.commands.get( 'strike' );
+		const keystroke = 'CTRL+E';
+
+		// Add strike button to feature components.
+		editor.ui.componentFactory.add( 'strike', locale => {
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Strike' ),
+				icon: strikeIcon,
+				keystroke,
+				tooltip: true
+			} );
+
+			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+
+			// Execute command.
+			this.listenTo( view, 'execute', () => editor.execute( 'strike' ) );
+
+			return view;
+		} );
+
+		// Set the Ctrl+ALT+S keystroke.
+		editor.keystrokes.set( keystroke, 'strike' );
+	}
+}

+ 56 - 0
packages/ckeditor5-basic-styles/src/strikeengine.js

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright (c) 2017, CKSource - Rémy Hubscher. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module notes/ckeditor-build/strikeengine
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
+import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
+import AttributeCommand from './attributecommand';
+
+const STRIKE = 'strike';
+
+/**
+ * The strike engine feature.
+ *
+ * It registers the `strike` command and introduces the
+ * `strikesthrough` attribute in the model which renders to the view
+ * as a `<s>` element.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class StrikeEngine extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const data = editor.data;
+		const editing = editor.editing;
+
+		// Allow strike attribute on all inline nodes.
+		editor.document.schema.allow( { name: '$inline', attributes: STRIKE, inside: '$block' } );
+		// Temporary workaround. See https://github.com/ckeditor/ckeditor5/issues/477.
+		editor.document.schema.allow( { name: '$inline', attributes: STRIKE, inside: '$clipboardHolder' } );
+
+		// Build converter from model to view for data and editing pipelines.
+		buildModelConverter().for( data.modelToView, editing.modelToView )
+			.fromAttribute( STRIKE )
+			.toElement( 's' );
+
+		// Build converter from view to model for data pipeline.
+		buildViewConverter().for( data.viewToModel )
+			.fromElement( 's' )
+			.fromElement( 'del' )
+			.fromElement( 'strike' )
+			.fromAttribute( 'style', { 'text-decoration': 'line-through' } )
+			.toAttribute( STRIKE, true );
+
+		// Create strike command.
+		editor.commands.add( STRIKE, new AttributeCommand( editor, STRIKE ) );
+	}
+}