@ckeditor/ckeditor5-heading - npm Package Compare versions

Comparing version 1.0.0-alpha.2 to 1.0.0-beta.1

CHANGELOG.md

 Changelog
 =========
 
+## [1.0.0-beta.1](https://github.com/ckeditor/ckeditor5-heading/compare/v1.0.0-alpha.2...v1.0.0-beta.1) (2018-03-15)
+
+### Other changes
+
+* Aligned feature class naming to the new scheme. ([511a9d8](https://github.com/ckeditor/ckeditor5-heading/commit/511a9d8))
+* Migrated package styles to PostCSS. Moved visual styles to `@ckeditor/ckeditor5-theme-lark` (see [ckeditor/ckeditor5-ui#144](https://github.com/ckeditor/ckeditor5-ui/issues/144)). ([965179e](https://github.com/ckeditor/ckeditor5-heading/commit/965179e))
+* Updated naming of UI components & commands. ([72ee3d6](https://github.com/ckeditor/ckeditor5-heading/commit/72ee3d6))
+
+### BREAKING CHANGES
+
+* Renamed the `'headings'` dropdown UI component to `'heading'`.
+* The `'heading1'`, `'heading2'` and `'heading3'` commands are no longer available. They were replaced by the `'heading'` command that accepts heading model element name as a value.
+* The `HeadingCommand#value` is no longer a boolean only. Now it stores a name of the heading model element when selection is inside a heading.
+* The `HeadingCommand` constructor's second parameter is now an array of supported model elements.
+
+
 ## [1.0.0-alpha.2](https://github.com/ckeditor/ckeditor5-heading/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2017-11-14)
@@ -50,8 +66,8 @@
 
-* Changed the default heading drop-down title to a more meaningful one. Closes [#68](https://github.com/ckeditor/ckeditor5-heading/issues/68). Closes [#62](https://github.com/ckeditor/ckeditor5-heading/issues/62). ([1c16e96](https://github.com/ckeditor/ckeditor5-heading/commit/1c16e96)) and ([e58dadc](https://github.com/ckeditor/ckeditor5-heading/commit/e58dadc))
-* Drop-down should be inactive when none of the commands can be applied to the current selection. Closes [#66](https://github.com/ckeditor/ckeditor5-heading/issues/66). ([0ebd5cd](https://github.com/ckeditor/ckeditor5-heading/commit/0ebd5cd))
+* Changed the default heading dropdown title to a more meaningful one. Closes [#68](https://github.com/ckeditor/ckeditor5-heading/issues/68). Closes [#62](https://github.com/ckeditor/ckeditor5-heading/issues/62). ([1c16e96](https://github.com/ckeditor/ckeditor5-heading/commit/1c16e96)) and ([e58dadc](https://github.com/ckeditor/ckeditor5-heading/commit/e58dadc))
+* Dropdown should be inactive when none of the commands can be applied to the current selection. Closes [#66](https://github.com/ckeditor/ckeditor5-heading/issues/66). ([0ebd5cd](https://github.com/ckeditor/ckeditor5-heading/commit/0ebd5cd))
 
 ### Features
 
-* Active heading is marked in the drop-down list. Closes [#26](https://github.com/ckeditor/ckeditor5-heading/issues/26). ([39ba14b](https://github.com/ckeditor/ckeditor5-heading/commit/39ba14b))
+* Active heading is marked in the dropdown list. Closes [#26](https://github.com/ckeditor/ckeditor5-heading/issues/26). ([39ba14b](https://github.com/ckeditor/ckeditor5-heading/commit/39ba14b))
 * Enabled the tooltip for the 'headings' component in editor.ui#componentFactory. Closes [#55](https://github.com/ckeditor/ckeditor5-heading/issues/55). ([794e6df](https://github.com/ckeditor/ckeditor5-heading/commit/794e6df))
@@ -58,0 +74,0 @@ * Named existing plugin(s). ([7d512cd](https://github.com/ckeditor/ckeditor5-heading/commit/7d512cd))

lang/contexts.json

 {
-	"Paragraph": "Drop-down option label for the paragraph format.",
-	"Heading": "Tooltip for the heading drop-down.",
-	"Choose heading": "Default label for the heading drop-down.",
-	"Heading 1": "Drop-down option label for the heading level 1 format.",
-	"Heading 2": "Drop-down option label for the heading level 2 format.",
-	"Heading 3": "Drop-down option label for the heading level 3 format."
+	"Paragraph": "Dropdown option label for the paragraph format.",
+	"Heading": "Tooltip for the heading dropdown.",
+	"Choose heading": "Default label for the heading dropdown.",
+	"Heading 1": "Dropdown option label for the heading level 1 format.",
+	"Heading 2": "Dropdown option label for the heading level 2 format.",
+	"Heading 3": "Dropdown option label for the heading level 3 format."
 }

LICENSE.md

@@ -5,3 +5,3 @@ Software License Agreement
 **CKEditor 5 Headings Feature** – https://github.com/ckeditor/ckeditor5-heading <br>
-Copyright (c) 2003-2017, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2018, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
 
@@ -8,0 +8,0 @@ Licensed under the terms of any of the following licenses at your choice:

package.json

 {
   "name": "@ckeditor/ckeditor5-heading",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-beta.1",
   "description": "Headings feature for CKEditor 5.",
@@ -10,19 +10,20 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-engine": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-theme-lark": "^1.0.0-alpha.2"
+    "@ckeditor/ckeditor5-core": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-ui": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-utils": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-engine": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-paragraph": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-theme-lark": "^1.0.0-beta.1"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-enter": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-image": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-typing": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-undo": "^1.0.0-alpha.2",
-    "eslint": "^4.8.0",
-    "eslint-config-ckeditor5": "^1.0.6",
+    "@ckeditor/ckeditor5-cloudservices": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-enter": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-image": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-typing": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-undo": "^1.0.0-beta.1",
+    "eslint": "^4.15.0",
+    "eslint-config-ckeditor5": "^1.0.7",
     "husky": "^0.14.3",
-    "lint-staged": "^4.2.3"
+    "lint-staged": "^6.0.0"
   },
@@ -29,0 +30,0 @@ "engines": {

README.md

@@ -7,3 +7,5 @@ CKEditor 5 headings feature
 [![Build Status](https://travis-ci.org/ckeditor/ckeditor5-heading.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-heading)
-[![Test Coverage](https://codeclimate.com/github/ckeditor/ckeditor5-heading/badges/coverage.svg)](https://codeclimate.com/github/ckeditor/ckeditor5-heading/coverage)
+[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)](https://www.browserstack.com/automate/public-build/d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)
+[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5-heading/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5-heading?branch=master)
+<br>
 [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-heading/status.svg)](https://david-dm.org/ckeditor/ckeditor5-heading)
@@ -10,0 +12,0 @@ [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-heading/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-heading?type=dev)

src/heading.js

 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
@@ -10,15 +10,14 @@ */
 
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import HeadingEngine from './headingengine';
+import HeadingEditing from './headingediting';
+import HeadingUI from './headingui';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import Model from '@ckeditor/ckeditor5-ui/src/model';
-import createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
-import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
-import '../theme/theme.scss';
+import '../theme/heading.css';
 
 /**
- * The headings feature. It introduces the `headings` drop-down and the `heading1`-`headingN` commands which allow
- * to convert paragraphs into headings.
+ * The headings feature.
  *
+ * It loads the {@link module:heading/headingediting~HeadingEditing heading editing feature}
+ * and {@link module:heading/headingui~HeadingUI heading UI feature}.
+ *
  * For a detailed overview, check the {@glink features/headings Headings feature documentation}.
@@ -33,3 +32,3 @@ *
 	static get requires() {
-		return [ Paragraph, HeadingEngine ];
+		return [ HeadingEditing, HeadingUI ];
 	}
@@ -43,138 +42,7 @@
 	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const dropdownItems = new Collection();
-		const options = this._getLocalizedOptions();
-		const commands = [];
-		const t = editor.t;
-		const defaultTitle = t( 'Choose heading' );
-		const dropdownTooltip = t( 'Heading' );
-
-		for ( const option of options ) {
-			const command = editor.commands.get( option.modelElement );
-			const itemModel = new Model( {
-				commandName: option.modelElement,
-				label: option.title,
-				class: option.class
-			} );
-
-			itemModel.bind( 'isActive' ).to( command, 'value' );
-
-			// Add the option to the collection.
-			dropdownItems.add( itemModel );
-
-			commands.push( command );
-		}
-
-		// Create dropdown model.
-		const dropdownModel = new Model( {
-			withText: true,
-			items: dropdownItems,
-			tooltip: dropdownTooltip
-		} );
-
-		dropdownModel.bind( 'isEnabled' ).to(
-			// Bind to #isEnabled of each command...
-			...getCommandsBindingTargets( commands, 'isEnabled' ),
-			// ...and set it true if any command #isEnabled is true.
-			( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
-		);
-
-		dropdownModel.bind( 'label' ).to(
-			// Bind to #value of each command...
-			...getCommandsBindingTargets( commands, 'value' ),
-			// ...and chose the title of the first one which #value is true.
-			( ...areActive ) => {
-				const index = areActive.findIndex( value => value );
-
-				// If none of the commands is active, display default title.
-				return options[ index ] ? options[ index ].title : defaultTitle;
-			}
-		);
-
-		// Register UI component.
-		editor.ui.componentFactory.add( 'headings', locale => {
-			const dropdown = createListDropdown( dropdownModel, locale );
-
-			dropdown.extendTemplate( {
-				attributes: {
-					class: [
-						'ck-heading-dropdown'
-					]
-				}
-			} );
-
-			// Execute command when an item from the dropdown is selected.
-			this.listenTo( dropdown, 'execute', evt => {
-				editor.execute( evt.source.commandName );
-				editor.editing.view.focus();
-			} );
-
-			return dropdown;
-		} );
-	}
-
-	/**
-	 * Returns heading options as defined in `config.heading.options` but processed to consider
-	 * editor localization, i.e. to display {@link module:heading/heading~HeadingOption}
-	 * in the correct language.
-	 *
-	 * Note: The reason behind this method is that there's no way to use {@link module:utils/locale~Locale#t}
-	 * when the user config is defined because the editor does not exist yet.
-	 *
-	 * @private
-	 * @returns {Array.<module:heading/heading~HeadingOption>}.
-	 */
-	_getLocalizedOptions() {
-		const editor = this.editor;
-		const t = editor.t;
-		const localizedTitles = {
-			Paragraph: t( 'Paragraph' ),
-			'Heading 1': t( 'Heading 1' ),
-			'Heading 2': t( 'Heading 2' ),
-			'Heading 3': t( 'Heading 3' )
-		};
-
-		return editor.config.get( 'heading.options' ).map( option => {
-			const title = localizedTitles[ option.title ];
-
-			if ( title && title != option.title ) {
-				// Clone the option to avoid altering the original `config.heading.options`.
-				option = Object.assign( {}, option, { title } );
-			}
-
-			return option;
-		} );
-	}
 }
 
-// Returns an array of binding components for
-// {@link module:utils/observablemixin~Observable#bind} from a set of iterable
-// commands.
-//
-// @private
-// @param {Iterable.<module:core/command~Command>} commands
-// @param {String} attribute
-// @returns {Array.<String>}
-function getCommandsBindingTargets( commands, attribute ) {
-	return Array.prototype.concat( ...commands.map( c => [ c, attribute ] ) );
-}
-
 /**
- * Heading option descriptor.
+ * The configuration of the heading feature. Introduced by the {@link module:heading/headingediting~HeadingEditing} feature.
  *
- * @typedef {Object} module:heading/heading~HeadingOption
- * @property {String} modelElement Element's name in the model.
- * @property {String} viewElement The name of the view element that will be used to represent the model element in the view.
- * @property {String} title The user-readable title of the option.
- * @property {String} class The class which will be added to the dropdown item representing this option.
- */
-
-/**
- * The configuration of the heading feature. Introduced by the {@link module:heading/headingengine~HeadingEngine} feature.
- *
  * Read more in {@link module:heading/heading~HeadingConfig}.
@@ -187,3 +55,3 @@ *
  * The configuration of the heading feature.
- * The option is used by the {@link module:heading/headingengine~HeadingEngine} feature.
+ * The option is used by the {@link module:heading/headingediting~HeadingEditing} feature.
  *
@@ -209,6 +77,6 @@ *		ClassicEditor
  *			options: [
- *				{ modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
- *				{ modelElement: 'heading1', viewElement: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
- *				{ modelElement: 'heading2', viewElement: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
- *				{ modelElement: 'heading3', viewElement: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
+ *				{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+ *				{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+ *				{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+ *				{ model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
  *			]
@@ -226,4 +94,7 @@ *		};
  * the {@link module:paragraph/paragraph~Paragraph} feature (which is required by
- * the {@link module:heading/headingengine~HeadingEngine} feature).
+ * the {@link module:heading/headingediting~HeadingEditing} feature).
  *
+ * You can **read more** about configuring heading levels and **see more examples** in
+ * the {@glink features/headings Headings} guide.
+ *
  * Note: In the model you should always start from `heading1`, regardless of how the headings are represented in the view.
@@ -233,8 +104,18 @@ * That's assumption is used by features like {@link module:autoformat/autoformat~Autoformat} to know which element
  *
- * The defined headings are also available in {@link module:core/commandcollection~CommandCollection} under their model names.
+ * The defined headings are also available as values passed to `heading` command under their model names.
  * For example, the below code will apply `<heading1>` to the current selection:
  *
- *		editor.execute( 'heading1' );
+ *		editor.execute( 'heading', { value: 'heading1' } );
  *
  * @member {Array.<module:heading/heading~HeadingOption>} module:heading/heading~HeadingConfig#options
  */
+
+/**
+ * Heading option descriptor.
+ *
+ * @typedef {Object} module:heading/heading~HeadingOption
+ * @property {String} model Name of the model element to convert.
+ * @property {module:engine/view/elementdefinition~ElementDefinition} view Definition of a view element to convert from/to.
+ * @property {String} title The user-readable title of the option.
+ * @property {String} class The class which will be added to the dropdown item representing this option.
+ */

src/headingcommand.js

 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
@@ -11,3 +11,2 @@ */
 import Command from '@ckeditor/ckeditor5-core/src/command';
-import Position from '@ckeditor/ckeditor5-engine/src/model/position';
 import first from '@ckeditor/ckeditor5-utils/src/first';
@@ -25,23 +24,25 @@
 	 * @param {module:core/editor/editor~Editor} editor Editor instance.
-	 * @param {String} modelElement Name of the element which this command will apply in the model.
+	 * @param {Array.<String>} modelElements Names of the element which this command can apply in the model.
 	 */
-	constructor( editor, modelElement ) {
+	constructor( editor, modelElements ) {
 		super( editor );
 
 		/**
-		 * Whether the selection starts in a heading of {@link #modelElement this level}.
+		 * If the selection starts in a heading (which {@link #modelElements is supported by this command})
+		 * the value is set to the name of that heading model element.
+		 * It is  set to `false` otherwise.
 		 *
 		 * @observable
 		 * @readonly
-		 * @member {Boolean} #value
+		 * @member {Boolean|String} #value
 		 */
 
 		/**
-		 * Unique identifier of the command, also element's name in the model.
+		 * Set of defined model's elements names that this command support.
 		 * See {@link module:heading/heading~HeadingOption}.
 		 *
 		 * @readonly
-		 * @member {String}
+		 * @member {Array.<String>}
 		 */
-		this.modelElement = modelElement;
+		this.modelElements = modelElements;
 	}
@@ -53,6 +54,6 @@
 	refresh() {
-		const block = first( this.editor.document.selection.getSelectedBlocks() );
+		const block = first( this.editor.model.document.selection.getSelectedBlocks() );
 
-		this.value = !!block && block.is( this.modelElement );
-		this.isEnabled = !!block && checkCanBecomeHeading( block, this.modelElement, this.editor.document.schema );
+		this.value = !!block && this.modelElements.includes( block.name ) && block.name;
+		this.isEnabled = !!block && this.modelElements.some( heading => checkCanBecomeHeading( block, heading, this.editor.model.schema ) );
 	}
@@ -64,21 +65,25 @@
 	 *
+	 * @param {Object} options
+	 * @param {String} options.value Name of the element which this command will apply in the model.
 	 * @fires execute
-	 * @param {Object} [options] Options for executed command.
-	 * @param {module:engine/model/batch~Batch} [options.batch] Batch to collect all the change steps.
-	 * New batch will be created if this option is not set.
 	 */
 	execute( options = {} ) {
-		const editor = this.editor;
-		const document = editor.document;
+		const model = this.editor.model;
+		const document = model.document;
 
-		document.enqueueChanges( () => {
-			const batch = options.batch || document.batch();
+		const modelElement = options.value;
+
+		if ( !this.modelElements.includes( modelElement ) ) {
+			return;
+		}
+
+		model.change( writer => {
 			const blocks = Array.from( document.selection.getSelectedBlocks() )
 				.filter( block => {
-					return checkCanBecomeHeading( block, this.modelElement, document.schema );
+					return checkCanBecomeHeading( block, modelElement, model.schema );
 				} );
 
 			for ( const block of blocks ) {
-				if ( !block.is( this.modelElement ) ) {
-					batch.rename( block, this.modelElement );
+				if ( !block.is( modelElement ) ) {
+					writer.rename( block, modelElement );
 				}
@@ -98,6 +103,3 @@ }
 function checkCanBecomeHeading( block, heading, schema ) {
-	return schema.check( {
-		name: heading,
-		inside: Position.createBefore( block )
-	} );
+	return schema.checkChild( block.parent, heading ) && !schema.isObject( block );
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55951

increased by8.76%

Number of package files

45

increased by15.38%

Lines of code

410

increased by5.67%

Number of lines in readme file

22

increased by10%

Worsened metrics

Dev dependency count

10

increased by11.11%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@ckeditor/ckeditor5-core@^1.0.0-beta.1

• Updated@ckeditor/ckeditor5-engine@^1.0.0-beta.1

• Updated@ckeditor/ckeditor5-paragraph@^1.0.0-beta.1

• Updated@ckeditor/ckeditor5-theme-lark@^1.0.0-beta.1

• Updated@ckeditor/ckeditor5-ui@^1.0.0-beta.1

• Updated@ckeditor/ckeditor5-utils@^1.0.0-beta.1