@ckeditor/ckeditor5-editor-inline - npm Package Compare versions

Comparing version 11.0.2 to 12.0.0

CHANGELOG.md

 Changelog
 =========
 
+## [12.0.0](https://github.com/ckeditor/ckeditor5-editor-inline/compare/v11.0.2...v12.0.0) (2019-02-28)
+
+### Features
+
+* Added support for the `config.placeholder` option which allows configuring the empty editor content placeholder (see [ckeditor/ckeditor5#479](https://github.com/ckeditor/ckeditor5/issues/479)). ([24016bd](https://github.com/ckeditor/ckeditor5-editor-inline/commit/24016bd))
+
+### Bug fixes
+
+* Fixed memory leaks during editor initialization and destruction (see [ckeditor/ckeditor5#1341](https://github.com/ckeditor/ckeditor5/issues/1341)). ([dd2bb90](https://github.com/ckeditor/ckeditor5-editor-inline/commit/dd2bb90))
+
+### Other changes
+
+* Adjustments to new editor initialization events. See breaking changes. ([9536767](https://github.com/ckeditor/ckeditor5-editor-inline/commit/9536767))
+* Editor UI classes API refactoring. See breaking changes. ([f8195da](https://github.com/ckeditor/ckeditor5-editor-inline/commit/f8195da))
+
+### BREAKING CHANGES
+
+* Upgraded minimal versions of Node to `8.0.0` and npm to `5.7.1`. See: [ckeditor/ckeditor5#1507](https://github.com/ckeditor/ckeditor5/issues/1507). ([612ea3c](https://github.com/ckeditor/ckeditor5-cloud-services/commit/612ea3c))
+* The second argument of `InlineEditorUIView.constructor()` is an editing view instance now.
+* The `editor#dataReady` event was removed. The `editor.data#ready` event has been introduced and should be used instead.
+* The `editor#pluginsReady` event was removed. Use plugin `afterInit()` method instead.
+* Removed `InlineEditor#element` property. The `InlineEditorUI#element` property should be used instead.
+* Removed `InlineEditorUIView#editableElement`. Instead `InlineEditorUI#getEditableElement()` method should be used.
+
+
 ## [11.0.2](https://github.com/ckeditor/ckeditor5-editor-inline/compare/v11.0.1...v11.0.2) (2018-12-05)
@@ -5,0 +30,0 @@

LICENSE.md

@@ -5,3 +5,3 @@ Software License Agreement
 **Inline Editor** – https://github.com/ckeditor/ckeditor5-editor-inline <br>
-Copyright (c) 2003-2018, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2019, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
 
@@ -8,0 +8,0 @@ Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).

package.json

 {
   "name": "@ckeditor/ckeditor5-editor-inline",
-  "version": "11.0.2",
+  "version": "12.0.0",
   "description": "Inline editor implementation for CKEditor 5.",
@@ -12,28 +12,28 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^11.1.0",
-    "@ckeditor/ckeditor5-engine": "^12.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^12.0.0",
-    "@ckeditor/ckeditor5-ui": "^11.2.0",
-    "@ckeditor/ckeditor5-utils": "^11.1.0",
+    "@ckeditor/ckeditor5-core": "^12.0.0",
+    "@ckeditor/ckeditor5-engine": "^13.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^13.0.0",
+    "@ckeditor/ckeditor5-ui": "^12.0.0",
+    "@ckeditor/ckeditor5-utils": "^12.0.0",
     "lodash-es": "^4.17.10"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^10.1.0",
-    "@ckeditor/ckeditor5-enter": "^10.1.3",
-    "@ckeditor/ckeditor5-heading": "^10.1.1",
-    "@ckeditor/ckeditor5-paragraph": "^10.0.4",
-    "@ckeditor/ckeditor5-typing": "^11.0.2",
-    "@ckeditor/ckeditor5-undo": "^10.0.4",
+    "@ckeditor/ckeditor5-basic-styles": "^11.0.0",
+    "@ckeditor/ckeditor5-enter": "^11.0.0",
+    "@ckeditor/ckeditor5-heading": "^11.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.0",
+    "@ckeditor/ckeditor5-typing": "^12.0.0",
+    "@ckeditor/ckeditor5-undo": "^11.0.0",
     "eslint": "^5.5.0",
-    "eslint-config-ckeditor5": "^1.0.7",
-    "husky": "^0.14.3",
+    "eslint-config-ckeditor5": "^1.0.11",
+    "husky": "^1.3.1",
     "lint-staged": "^7.0.0"
   },
   "engines": {
-    "node": ">=6.9.0",
-    "npm": ">=3.0.0"
+    "node": ">=8.0.0",
+    "npm": ">=5.7.1"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",
-  "homepage": "https://ckeditor.com",
+  "homepage": "https://ckeditor.com/ckeditor-5",
   "bugs": "https://github.com/ckeditor/ckeditor5-editor-inline/issues",
@@ -50,4 +50,3 @@ "repository": {
   "scripts": {
-    "lint": "eslint --quiet '**/*.js'",
-    "precommit": "lint-staged"
+    "lint": "eslint --quiet '**/*.js'"
   },
@@ -62,3 +61,8 @@ "lint-staged": {
     "packages/**"
-  ]
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }
 }

src/inlineeditor.js

 /**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
@@ -73,3 +73,4 @@ */
 
-		this.ui = new InlineEditorUI( this, new InlineEditorUIView( this.locale, this.sourceElement ) );
+		const view = new InlineEditorUIView( this.locale, this.editing.view, this.sourceElement );
+		this.ui = new InlineEditorUI( this, view );
 
@@ -80,9 +81,2 @@ attachToForm( this );
 	/**
-	 * @inheritDoc
-	 */
-	get element() {
-		return this.ui.view.editable.element;
-	}
-
-	/**
 	 * Destroys the editor instance, releasing all resources used by it.
@@ -184,3 +178,2 @@ *
 						editor.ui.init();
-						editor.fire( 'uiReady' );
 					} )
@@ -194,6 +187,3 @@ .then( () => {
 					} )
-					.then( () => {
-						editor.fire( 'dataReady' );
-						editor.fire( 'ready' );
-					} )
+					.then( () => editor.fire( 'ready' ) )
 					.then( () => editor )
@@ -200,0 +190,0 @@ );

src/inlineeditorui.js

 /**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
@@ -13,2 +13,3 @@ */
 import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig';
+import { enablePlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
 
@@ -22,8 +23,19 @@ /**
 	/**
-	 * @inheritDoc
+	 * Creates an instance of the inline editor UI class.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor The editor instance.
+	 * @param {module:ui/editorui/editoruiview~EditorUIView} view The view of the UI.
 	 */
 	constructor( editor, view ) {
-		super( editor, view );
+		super( editor );
 
 		/**
+		 * The main (top–most) view of the editor UI.
+		 *
+		 * @readonly
+		 * @member {module:ui/editorui/editoruiview~EditorUIView} #view
+		 */
+		this.view = view;
+
+		/**
 		 * A normalized `config.toolbar` object.
@@ -38,2 +50,9 @@ *
 	/**
+	 * @inheritDoc
+	 */
+	get element() {
+		return this.view.editable.element;
+	}
+
+	/**
 	 * Initializes the UI.
@@ -44,5 +63,68 @@ */
 		const view = this.view;
+		const editingView = editor.editing.view;
+		const editable = view.editable;
+		const editingRoot = editingView.document.getRoot();
 
+		// The editable UI and editing root should share the same name. Then name is used
+		// to recognize the particular editable, for instance in ARIA attributes.
+		editable.name = editingRoot.rootName;
+
 		view.render();
 
+		// The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
+		// But it can be available earlier if a DOM element has been passed to InlineEditor.create().
+		const editableElement = editable.element;
+
+		// Register the editable UI view in the editor. A single editor instance can aggregate multiple
+		// editable areas (roots) but the inline editor has only one.
+		this._editableElements.set( editable.name, editableElement );
+
+		// Let the global focus tracker know that the editable UI element is focusable and
+		// belongs to the editor. From now on, the focus tracker will sustain the editor focus
+		// as long as the editable is focused (e.g. the user is typing).
+		this.focusTracker.add( editableElement );
+
+		// Let the editable UI element respond to the changes in the global editor focus
+		// tracker. It has been added to the same tracker a few lines above but, in reality, there are
+		// many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
+		// as they have focus, the editable should act like it is focused too (although technically
+		// it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
+		// Doing otherwise will result in editable focus styles disappearing, once e.g. the
+		// toolbar gets focused.
+		editable.bind( 'isFocused' ).to( this.focusTracker );
+
+		// Bind the editable UI element to the editing view, making it an end– and entry–point
+		// of the editor's engine. This is where the engine meets the UI.
+		editingView.attachDomRoot( editableElement );
+
+		this._initPlaceholder();
+		this._initToolbar();
+		this.fire( 'ready' );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		const view = this.view;
+		const editingView = this.editor.editing.view;
+
+		editingView.detachDomRoot( view.editable.name );
+		view.destroy();
+
+		super.destroy();
+	}
+
+	/**
+	 * Initializes the inline editor toolbar and its panel.
+	 *
+	 * @private
+	 */
+	_initToolbar() {
+		const editor = this.editor;
+		const view = this.view;
+		const editableElement = view.editable.element;
+		const editingView = editor.editing.view;
+		const toolbar = view.toolbar;
+
 		// Set–up the view#panel.
@@ -61,3 +143,3 @@ view.panel.bind( 'isVisible' ).to( this.focusTracker, 'isFocused' );
 				view.panel.pin( {
-					target: view.editableElement,
+					target: editableElement,
 					positions: view.panelPositions
@@ -68,23 +150,35 @@ } );
 
-		// Setup the editable.
-		const editingRoot = editor.editing.view.document.getRoot();
-		view.editable.bind( 'isReadOnly' ).to( editingRoot );
+		toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
 
-		// Bind to focusTracker instead of editor.editing.view because otherwise
-		// focused editable styles disappear when view#toolbar is focused.
-		view.editable.bind( 'isFocused' ).to( this.focusTracker );
-		editor.editing.view.attachDomRoot( view.editableElement );
-		view.editable.name = editingRoot.rootName;
-
-		this.focusTracker.add( view.editableElement );
-
-		view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
-
 		enableToolbarKeyboardFocus( {
-			origin: editor.editing.view,
+			origin: editingView,
 			originFocusTracker: this.focusTracker,
 			originKeystrokeHandler: editor.keystrokes,
-			toolbar: view.toolbar
+			toolbar
 		} );
 	}
+
+	/**
+	 * Enable the placeholder text on the editing root, if any was configured.
+	 *
+	 * @private
+	 */
+	_initPlaceholder() {
+		const editor = this.editor;
+		const editingView = editor.editing.view;
+		const editingRoot = editingView.document.getRoot();
+		const sourceElement = editor.sourceElement;
+
+		const placeholderText = editor.config.get( 'placeholder' ) ||
+			sourceElement && sourceElement.tagName.toLowerCase() === 'textarea' && sourceElement.getAttribute( 'placeholder' );
+
+		if ( placeholderText ) {
+			enablePlaceholder( {
+				view: editingView,
+				element: editingRoot,
+				text: placeholderText,
+				isDirectHost: false
+			} );
+		}
+	}
 }

src/inlineeditoruiview.js

 /**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
@@ -25,6 +25,7 @@ */
 	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
+	 * @param {module:engine/view/view~View} editingView The editing view instance this view is related to.
 	 * @param {HTMLElement} [editableElement] The editable element. If not specified, it will be automatically created by
 	 * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
 	 */
-	constructor( locale, editableElement ) {
+	constructor( locale, editingView, editableElement ) {
 		super( locale );
@@ -76,3 +77,3 @@
 		 * A set of positioning functions used by the {@link #panel} to float around
-		 * {@link #editableElement}.
+		 * {@link #element editableElement}.
 		 *
@@ -134,3 +135,3 @@ * The positioning functions are as follows:
 		 */
-		this.editable = new InlineEditableUIView( locale, editableElement );
+		this.editable = new InlineEditableUIView( locale, editingView, editableElement );
 	}
@@ -150,13 +151,6 @@
 	/**
-	 * @inheritDoc
-	 */
-	get editableElement() {
-		return this.editable.element;
-	}
-
-	/**
 	 * Determines the panel top position of the {@link #panel} in {@link #panelPositions}.
 	 *
 	 * @private
-	 * @param {module:utils/dom/rect~Rect} editableRect Rect of the {@link #editableElement}.
+	 * @param {module:utils/dom/rect~Rect} editableRect Rect of the {@link #element}.
 	 * @param {module:utils/dom/rect~Rect} panelRect Rect of the {@link #panel}.
@@ -163,0 +157,0 @@ */

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

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

30824

increased by18.64%

Lines of code

503

increased by15.37%

Dependency changes

• + Added@ckeditor/ckeditor5-core@12.3.0(transitive)

• + Added@ckeditor/ckeditor5-engine@13.2.114.0.0(transitive)

• + Added@ckeditor/ckeditor5-theme-lark@13.0.1(transitive)

• + Added@ckeditor/ckeditor5-ui@12.1.0(transitive)

• + Added@ckeditor/ckeditor5-utils@12.1.113.0.114.0.0(transitive)

• + Addedckeditor5@12.4.0(transitive)

• - Removed@ckeditor/ckeditor5-core@11.1.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@12.0.0(transitive)

• - Removed@ckeditor/ckeditor5-theme-lark@12.0.0(transitive)

• - Removed@ckeditor/ckeditor5-ui@11.2.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@11.1.0(transitive)

• - Removedckeditor5@11.2.0(transitive)

• Updated@ckeditor/ckeditor5-core@^12.0.0

• Updated@ckeditor/ckeditor5-engine@^13.0.0

• Updated@ckeditor/ckeditor5-theme-lark@^13.0.0

• Updated@ckeditor/ckeditor5-ui@^12.0.0

• Updated@ckeditor/ckeditor5-utils@^12.0.0