@ckeditor/ckeditor5-editor-balloon - 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-balloon/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)). ([7f39e5e](https://github.com/ckeditor/ckeditor5-editor-balloon/commit/7f39e5e))
+
+### Bug fixes
+
+* Fixed memory leaks during editor initialization and destruction (see [ckeditor/ckeditor5#1341](https://github.com/ckeditor/ckeditor5/issues/1341)). ([c959daf](https://github.com/ckeditor/ckeditor5-editor-balloon/commit/c959daf))
+
+### Other changes
+
+* Adjustments to new editor initialization events. See breaking changes. ([1bb0285](https://github.com/ckeditor/ckeditor5-editor-balloon/commit/1bb0285))
+* Editor UI classes API refactoring. See breaking changes. ([dd43e7a](https://github.com/ckeditor/ckeditor5-editor-balloon/commit/dd43e7a))
+
+### 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 `BalloonEditorUIView.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 `BalloonEditor#element` property. The `BalloonEditorUI#element` property should be used instead.
+* Removed `BalloonEditorUIView#editableElement`. Instead `BalloonEditorUI#getEditableElement()` method should be used.
+
+
 ## [11.0.2](https://github.com/ckeditor/ckeditor5-editor-balloon/compare/v11.0.1...v11.0.2) (2018-12-05)
@@ -5,0 +30,0 @@

LICENSE.md

@@ -5,3 +5,3 @@ Software License Agreement
 **Balloon Editor** – https://github.com/ckeditor/ckeditor5-editor-balloon <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-balloon",
-  "version": "11.0.2",
+  "version": "12.0.0",
   "description": "Balloon editor implementation for CKEditor 5.",
@@ -12,25 +12,29 @@ "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-essentials": "^10.1.3",
-    "@ckeditor/ckeditor5-paragraph": "^10.0.4",
+    "@ckeditor/ckeditor5-basic-styles": "^11.0.0",
+    "@ckeditor/ckeditor5-essentials": "^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-balloon/issues",
@@ -47,4 +51,3 @@ "repository": {
   "scripts": {
-    "lint": "eslint --quiet '**/*.js'",
-    "precommit": "lint-staged"
+    "lint": "eslint --quiet '**/*.js'"
   },
@@ -59,3 +62,8 @@ "lint-staged": {
     "packages/**"
-  ]
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }
 }

src/ballooneditor.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.
@@ -70,3 +70,6 @@ */
 
-		this.config.get( 'plugins' ).push( BalloonToolbar );
+		const plugins = this.config.get( 'plugins' );
+		plugins.push( BalloonToolbar );
+		this.config.set( 'plugins', plugins );
+
 		this.config.define( 'balloonToolbar', this.config.get( 'toolbar' ) );
@@ -78,3 +81,4 @@
 
-		this.ui = new BalloonEditorUI( this, new BalloonEditorUIView( this.locale, this.sourceElement ) );
+		const view = new BalloonEditorUIView( this.locale, this.editing.view, this.sourceElement );
+		this.ui = new BalloonEditorUI( this, view );
 
@@ -85,9 +89,2 @@ attachToForm( this );
 	/**
-	 * @inheritDoc
-	 */
-	get element() {
-		return this.ui.view.editable.element;
-	}
-
-	/**
 	 * Destroys the editor instance, releasing all resources used by it.
@@ -192,3 +189,2 @@ *
 						editor.ui.init();
-						editor.fire( 'uiReady' );
 					} )
@@ -202,6 +198,3 @@ .then( () => {
 					} )
-					.then( () => {
-						editor.fire( 'dataReady' );
-						editor.fire( 'ready' );
-					} )
+					.then( () => editor.fire( 'ready' ) )
 					.then( () => editor )
@@ -208,0 +201,0 @@ );

src/ballooneditorui.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.
@@ -12,2 +12,3 @@ */
 import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
+import { enablePlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
 
@@ -21,2 +22,27 @@ /**
 	/**
+	 * Creates an instance of the balloon 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 );
+
+		/**
+		 * The main (top–most) view of the editor UI.
+		 *
+		 * @readonly
+		 * @member {module:ui/editorui/editoruiview~EditorUIView} #view
+		 */
+		this.view = view;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	get element() {
+		return this.view.editable.element;
+	}
+
+	/**
 	 * Initializes the UI.
@@ -28,19 +54,40 @@ */
 		const balloonToolbar = editor.plugins.get( 'BalloonToolbar' );
+		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();
 
-		// Setup the editable.
-		const editingRoot = editor.editing.view.document.getRoot();
-		view.editable.bind( 'isReadOnly' ).to( editingRoot );
+		// 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 BalloonEditor.create().
+		const editableElement = editable.element;
 
-		// 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;
+		// Register the editable UI view in the editor. A single editor instance can aggregate multiple
+		// editable areas (roots) but the balloon editor has only one.
+		this._editableElements.set( editable.name, editableElement );
 
-		this.focusTracker.add( view.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 );
+
 		enableToolbarKeyboardFocus( {
-			origin: editor.editing.view,
+			origin: editingView,
 			originFocusTracker: this.focusTracker,
@@ -56,3 +103,43 @@ originKeystrokeHandler: editor.keystrokes,
 		} );
+
+		this._initPlaceholder();
+		this.fire( 'ready' );
 	}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		const view = this.view;
+		const editingView = this.editor.editing.view;
+
+		editingView.detachDomRoot( view.editable.name );
+		view.destroy();
+
+		super.destroy();
+	}
+
+	/**
+	 * 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/ballooneditoruiview.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.
@@ -23,6 +23,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 );
@@ -36,3 +37,3 @@
 		 */
-		this.editable = new InlineEditableUIView( locale, editableElement );
+		this.editable = new InlineEditableUIView( locale, editingView, editableElement );
 	}
@@ -48,9 +49,2 @@
 	}
-
-	/**
-	 * @inheritDoc
-	 */
-	get editableElement() {
-		return this.editable.element;
-	}
 }

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

24790

increased by24.66%

Number of downloads

238951

increased by10%

Lines of code

346

increased by21.83%

Worsened metrics

Dev dependency count

11

increased by57.14%

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