@ckeditor/ckeditor5-basic-styles 30.0.0

package/src/italic/italicediting.js

@@ -0,0 +1,63 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module basic-styles/italic/italicediting
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import AttributeCommand from '../attributecommand';
+
+const ITALIC = 'italic';
+
+/**
+ * The italic editing feature.
+ *
+ * It registers the `'italic'` command, the <kbd>Ctrl+I</kbd> keystroke and introduces the `italic` attribute in the model
+ * which renders to the view as an `<i>` element.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ItalicEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'ItalicEditing';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		// Allow italic attribute on text nodes.
+		editor.model.schema.extend( '$text', { allowAttributes: ITALIC } );
+		editor.model.schema.setAttributeProperties( ITALIC, {
+			isFormatting: true,
+			copyOnEnter: true
+		} );
+
+		editor.conversion.attributeToElement( {
+			model: ITALIC,
+			view: 'i',
+			upcastAlso: [
+				'em',
+				{
+					styles: {
+						'font-style': 'italic'
+					}
+				}
+			]
+		} );
+
+		// Create italic command.
+		editor.commands.add( ITALIC, new AttributeCommand( editor, ITALIC ) );
+
+		// Set the Ctrl+I keystroke.
+		editor.keystrokes.set( 'CTRL+I', ITALIC );
+	}
+}

package/src/italic/italicui.js

@@ -0,0 +1,61 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module basic-styles/italic/italicui
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { ButtonView } from 'ckeditor5/src/ui';
+
+import italicIcon from '../../theme/icons/italic.svg';
+
+const ITALIC = 'italic';
+
+/**
+ * The italic UI feature. It introduces the Italic button.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ItalicUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'ItalicUI';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		// Add bold button to feature components.
+		editor.ui.componentFactory.add( ITALIC, locale => {
+			const command = editor.commands.get( ITALIC );
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Italic' ),
+				icon: italicIcon,
+				keystroke: 'CTRL+I',
+				tooltip: true,
+				isToggleable: true
+			} );
+
+			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+
+			// Execute command.
+			this.listenTo( view, 'execute', () => {
+				editor.execute( ITALIC );
+				editor.editing.view.focus();
+			} );
+
+			return view;
+		} );
+	}
+}

package/src/italic.js

@@ -0,0 +1,39 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module basic-styles/italic
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import ItalicEditing from './italic/italicediting';
+import ItalicUI from './italic/italicui';
+
+/**
+ * The italic feature.
+ *
+ * For a detailed overview check the {@glink features/basic-styles Basic styles feature documentation}
+ * and the {@glink api/basic-styles package page}.
+ *
+ * This is a "glue" plugin which loads the {@link module:basic-styles/italic/italicediting~ItalicEditing} and
+ * {@link module:basic-styles/italic/italicui~ItalicUI} plugins.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class Italic extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ItalicEditing, ItalicUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'Italic';
+	}
+}

package/src/strikethrough/strikethroughediting.js

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module basic-styles/strikethrough/strikethroughediting
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import AttributeCommand from '../attributecommand';
+
+const STRIKETHROUGH = 'strikethrough';
+
+/**
+ * The strikethrough editing feature.
+ *
+ * It registers the `'strikethrough'` command, the <kbd>Ctrl+Shift+X</kbd> keystroke and introduces the
+ * `strikethroughsthrough` attribute in the model which renders to the view
+ * as a `<s>` element.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class StrikethroughEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'StrikethroughEditing';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		// Allow strikethrough attribute on text nodes.
+		editor.model.schema.extend( '$text', { allowAttributes: STRIKETHROUGH } );
+		editor.model.schema.setAttributeProperties( STRIKETHROUGH, {
+			isFormatting: true,
+			copyOnEnter: true
+		} );
+
+		editor.conversion.attributeToElement( {
+			model: STRIKETHROUGH,
+			view: 's',
+			upcastAlso: [
+				'del',
+				'strike',
+				{
+					styles: {
+						'text-decoration': 'line-through'
+					}
+				}
+			]
+		} );
+
+		// Create strikethrough command.
+		editor.commands.add( STRIKETHROUGH, new AttributeCommand( editor, STRIKETHROUGH ) );
+
+		// Set the Ctrl+Shift+X keystroke.
+		editor.keystrokes.set( 'CTRL+SHIFT+X', 'strikethrough' );
+	}
+}

package/src/strikethrough/strikethroughui.js

@@ -0,0 +1,61 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module basic-styles/strikethrough/strikethroughui
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { ButtonView } from 'ckeditor5/src/ui';
+
+import strikethroughIcon from '../../theme/icons/strikethrough.svg';
+
+const STRIKETHROUGH = 'strikethrough';
+
+/**
+ * The strikethrough UI feature. It introduces the Strikethrough button.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class StrikethroughUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'StrikethroughUI';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		// Add strikethrough button to feature components.
+		editor.ui.componentFactory.add( STRIKETHROUGH, locale => {
+			const command = editor.commands.get( STRIKETHROUGH );
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Strikethrough' ),
+				icon: strikethroughIcon,
+				keystroke: 'CTRL+SHIFT+X',
+				tooltip: true,
+				isToggleable: true
+			} );
+
+			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+
+			// Execute command.
+			this.listenTo( view, 'execute', () => {
+				editor.execute( STRIKETHROUGH );
+				editor.editing.view.focus();
+			} );
+
+			return view;
+		} );
+	}
+}

package/src/strikethrough.js

@@ -0,0 +1,39 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module basic-styles/strikethrough
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import StrikethroughEditing from './strikethrough/strikethroughediting';
+import StrikethroughUI from './strikethrough/strikethroughui';
+
+/**
+ * The strikethrough feature.
+ *
+ * For a detailed overview check the {@glink features/basic-styles Basic styles feature documentation}
+ * and the {@glink api/basic-styles package page}.
+ *
+ * This is a "glue" plugin which loads the {@link module:basic-styles/strikethrough/strikethroughediting~StrikethroughEditing} and
+ * {@link module:basic-styles/strikethrough/strikethroughui~StrikethroughUI} plugins.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class Strikethrough extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ StrikethroughEditing, StrikethroughUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'Strikethrough';
+	}
+}

package/src/subscript/subscriptediting.js

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module basic-styles/subscript/subscriptediting
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import AttributeCommand from '../attributecommand';
+
+const SUBSCRIPT = 'subscript';
+
+/**
+ * The subscript editing feature.
+ *
+ * It registers the `sub` command and introduces the `sub` attribute in the model which renders to the view
+ * as a `<sub>` element.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class SubscriptEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'SubscriptEditing';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		// Allow sub attribute on text nodes.
+		editor.model.schema.extend( '$text', { allowAttributes: SUBSCRIPT } );
+		editor.model.schema.setAttributeProperties( SUBSCRIPT, {
+			isFormatting: true,
+			copyOnEnter: true
+		} );
+
+		// Build converter from model to view for data and editing pipelines.
+
+		editor.conversion.attributeToElement( {
+			model: SUBSCRIPT,
+			view: 'sub',
+			upcastAlso: [
+				{
+					styles: {
+						'vertical-align': 'sub'
+					}
+				}
+			]
+		} );
+
+		// Create sub command.
+		editor.commands.add( SUBSCRIPT, new AttributeCommand( editor, SUBSCRIPT ) );
+	}
+}

package/src/subscript/subscriptui.js

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module basic-styles/subscript/subscriptui
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { ButtonView } from 'ckeditor5/src/ui';
+
+import subscriptIcon from '../../theme/icons/subscript.svg';
+
+const SUBSCRIPT = 'subscript';
+
+/**
+ * The subscript UI feature. It introduces the Subscript button.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class SubscriptUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'SubscriptUI';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		// Add subscript button to feature components.
+		editor.ui.componentFactory.add( SUBSCRIPT, locale => {
+			const command = editor.commands.get( SUBSCRIPT );
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Subscript' ),
+				icon: subscriptIcon,
+				tooltip: true,
+				isToggleable: true
+			} );
+
+			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+
+			// Execute command.
+			this.listenTo( view, 'execute', () => {
+				editor.execute( SUBSCRIPT );
+				editor.editing.view.focus();
+			} );
+
+			return view;
+		} );
+	}
+}

package/src/subscript.js

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module basic-styles/subscript
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import SubscriptEditing from './subscript/subscriptediting';
+import SubscriptUI from './subscript/subscriptui';
+
+/**
+ * The subscript feature.
+ *
+ * It loads the {@link module:basic-styles/subscript/subscriptediting~SubscriptEditing} and
+ * {@link module:basic-styles/subscript/subscriptui~SubscriptUI} plugins.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class Subscript extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ SubscriptEditing, SubscriptUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'Subscript';
+	}
+}

package/src/superscript/superscriptediting.js

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module basic-styles/superscript/superscriptediting
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import AttributeCommand from '../attributecommand';
+
+const SUPERSCRIPT = 'superscript';
+
+/**
+ * The superscript editing feature.
+ *
+ * It registers the `super` command and introduces the `super` attribute in the model which renders to the view
+ * as a `<super>` element.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class SuperscriptEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'SuperscriptEditing';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		// Allow super attribute on text nodes.
+		editor.model.schema.extend( '$text', { allowAttributes: SUPERSCRIPT } );
+		editor.model.schema.setAttributeProperties( SUPERSCRIPT, {
+			isFormatting: true,
+			copyOnEnter: true
+		} );
+
+		// Build converter from model to view for data and editing pipelines.
+
+		editor.conversion.attributeToElement( {
+			model: SUPERSCRIPT,
+			view: 'sup',
+			upcastAlso: [
+				{
+					styles: {
+						'vertical-align': 'super'
+					}
+				}
+			]
+		} );
+
+		// Create super command.
+		editor.commands.add( SUPERSCRIPT, new AttributeCommand( editor, SUPERSCRIPT ) );
+	}
+}

package/src/superscript/superscriptui.js

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module basic-styles/superscript/superscriptui
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { ButtonView } from 'ckeditor5/src/ui';
+
+import superscriptIcon from '../../theme/icons/superscript.svg';
+
+const SUPERSCRIPT = 'superscript';
+
+/**
+ * The superscript UI feature. It introduces the Superscript button.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class SuperscriptUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'SuperscriptUI';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		// Add superscript button to feature components.
+		editor.ui.componentFactory.add( SUPERSCRIPT, locale => {
+			const command = editor.commands.get( SUPERSCRIPT );
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Superscript' ),
+				icon: superscriptIcon,
+				tooltip: true,
+				isToggleable: true
+			} );
+
+			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+
+			// Execute command.
+			this.listenTo( view, 'execute', () => {
+				editor.execute( SUPERSCRIPT );
+				editor.editing.view.focus();
+			} );
+
+			return view;
+		} );
+	}
+}

package/src/superscript.js

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module basic-styles/superscript
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import SuperscriptEditing from './superscript/superscriptediting';
+import SuperscriptUI from './superscript/superscriptui';
+
+/**
+ * The superscript feature.
+ *
+ * It loads the {@link module:basic-styles/superscript/superscriptediting~SuperscriptEditing} and
+ * {@link module:basic-styles/superscript/superscriptui~SuperscriptUI} plugins.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class Superscript extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ SuperscriptEditing, SuperscriptUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'Superscript';
+	}
+}