Merge pull request #8 from alexeckermann/issue-5

Fixes issue #5 for extending editor.ui.view template

README.md

@@ -34,7 +34,6 @@ MyEditor.build = {
 ```
 
 ```css
-.ck-editor__is-empty .ck-content.ck-editor__editable::before,
 .ck-editor__is-empty.ck-content.ck-editor__editable::before {
 	content: 'The editor is empty';
 	position: absolute;
@@ -46,12 +45,15 @@ MyEditor.build = {
 }
 ```
 
-**_Whats with the weird CSS scope?_**
-
-Depending on the editor, the element used for content may not be the same as the one used when initialising the editor. Editors with toolbars will generate a new element structure. To cover all bases the scope is what it is -- where the `ck-editor__is-empty` class name is on the same element as the `ck-content` element or on a parent element.
+The empty class will be applied to the editable view for the editor, this may be different to a container element that particular editors may create and use.
 
 ## Changelog
 
+### v0.2.1 - 11 October 2018
+
+- Fix [alexeckermann/ckeditor5-emptyness#5](https://github.com/alexeckermann/ckeditor5-emptyness/issues/5): The plugin tested against a editor which performs differently to the non-test editor. This lead to an incorrect asumption about what view to use for the empty CSS class. As a result the plugin will now detect if it is integrating with an editor it supports, logs error and warning messages if needed. This also simplifies the CSS targeting to just the content editable element.
+- Updated dependencies to target CK5 v11.1 compatible dependencies.
+
 ### v0.2.0 - 4 July 2018
 
 - Updating event listener to use `change:data` event on the editors document.

package.json

@@ -1,21 +1,21 @@
 {
   "name": "ckeditor5-emptyness",
-  "version": "0.2.0",
-  "description": "How empty is your CKEditor instance? Adds observable isEmpty property to editors.",
+  "version": "0.2.1",
+  "description": "How empty is your CKEditor instance? Adds observable isEmpty property and CSS selectors to editors.",
   "keywords": [
     "ckeditor5",
     "ckeditor5-plugin"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^10.1.0",
-    "@ckeditor/ckeditor5-engine": "^10.1.0"
+    "@ckeditor/ckeditor5-core": "^11.0.1",
+    "@ckeditor/ckeditor5-engine": "^11.0.0",
+    "@ckeditor/ckeditor5-utils": "^11.0.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-editor-classic": "^10.0.1",
-    "@ckeditor/ckeditor5-essentials": "^10.1.0",
-    "@ckeditor/ckeditor5-paragraph": "^10.1.0",
-    "@ckeditor/ckeditor5-utils": "^10.1.0",
-    "eslint": "^4.15.0",
+    "@ckeditor/ckeditor5-editor-classic": "^11.0.1",
+    "@ckeditor/ckeditor5-essentials": "^10.1.2",
+    "@ckeditor/ckeditor5-paragraph": "^10.0.3",
+    "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^1.0.7",
     "husky": "^0.14.3",
     "lint-staged": "^7.0.0"

src/emptyness.js

@@ -1,5 +1,6 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
+import log from '@ckeditor/ckeditor5-utils/src/log';
 
 export default class Emptyness extends Plugin {
 
@@ -10,26 +11,34 @@ export default class Emptyness extends Plugin {
 	init() {
 		const editor = this.editor;
 		const doc = editor.model.document;
-		const view = editor.ui.view;
+		const view = editor.ui.view.editable;
+
+		if ( !view ) {
+			log.error( 'emptyness-view-not-found: expected editable view not found for this editor (expects editor.ui.view.editable to be defined)' );
+			return;
+		}
 
 		editor.set( 'isEmpty', !documentHasContent(doc) );
 
 		this.listenTo( doc, 'change:data', () => {
 			editor.set( 'isEmpty', !documentHasContent(doc) );
 		} );
-
+
+		if ( view.isRendered === true ) {
+			log.warn( 'emptyness-view-is-rendered: can not extend the editor UI view after its been rendered, class name will be unavailable (see: template-extend-render)' );
+			return;
+		}
+
 		const bind = Template.bind( editor, editor );
-		
+
 		view.extendTemplate( { 
 			attributes: {
 				class: [
 					bind.if( 'isEmpty', 'ck-editor__is-empty' )
 				]
 			}
 		} );
-
 	}
-
 };
 
 function documentHasContent(doc) {

tests/_utils/incompatibletesteditor.js

@@ -0,0 +1,26 @@
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
+import IncompatibleTestEditorUIVIew from './incompatibletesteditoruiview';
+
+export default class IncompatibleTestEditor extends ClassicTestEditor {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( element, config ) {
+		super( element, config );
+
+		if ( config._test.missingEditable === true ) {
+			// Intentially remove the editable property to trip up the plugin.
+			this.ui = new EditorUI( this, new IncompatibleTestEditorUIVIew( this.locale ) );
+			this.ui.view.editable = null;
+		}
+
+		if ( config._test.renderView === true ) {
+			// Render the editable view so that its template can not be extended
+			this.ui.view.editable.render();
+		}
+
+
+	}
+
+}

tests/_utils/incompatibletesteditoruiview.js

@@ -0,0 +1,16 @@
+import BoxedEditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/boxed/boxededitoruiview';
+import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
+
+export default class IncompatibleTestEditorUIView extends BoxedEditorUIView {
+
+	render() {
+
+		this.editable = new InlineEditableUIView( this.locale );
+
+		super.render();
+
+	}
+
+
+
+}