Merge pull request #136 from ckeditor/t/127

Fix: Fixed a bug causing editor with `ImageCaption` plugin enabled threw an error after view got rendered. Closes #127.

package.json

@@ -12,6 +12,7 @@
     "@ckeditor/ckeditor5-widget": "^0.2.0"
   },
   "devDependencies": {
+    "@ckeditor/ckeditor5-basic-styles": "^0.9.0",
     "@ckeditor/ckeditor5-clipboard": "^0.7.0",
     "@ckeditor/ckeditor5-dev-lint": "^3.1.0",
     "@ckeditor/ckeditor5-editor-classic": "^0.8.0",

src/imagecaption/imagecaptionengine.js

@@ -16,10 +16,9 @@ import viewWriter from '@ckeditor/ckeditor5-engine/src/view/writer';
 import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position';
 import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
 import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
-import { isImage, isImageWidget } from '../image/utils';
+import { isImage } from '../image/utils';
 import {
 	captionElementCreator,
-	isCaption,
 	getCaptionFromImage,
 	matchImageCaption
 } from './utils';
@@ -100,25 +99,28 @@ export default class ImageCaptionEngine extends Plugin {
 	 */
 	_updateCaptionVisibility() {
 		const mapper = this.editor.editing.mapper;
-		const viewSelection = this.editor.editing.view.selection;
-		const selectedElement = viewSelection.getSelectedElement();
 		let viewCaption;
 
 		// Hide last selected caption if have no child elements.
 		if ( this._lastSelectedCaption && !this._lastSelectedCaption.childCount ) {
 			this._lastSelectedCaption.addClass( 'ck-hidden' );
 		}
 
-		// If whole image widget is selected.
-		if ( selectedElement && isImageWidget( selectedElement ) ) {
-			const modelImage = mapper.toModelElement( selectedElement );
-			const modelCaption = getCaptionFromImage( modelImage );
+		// If whole image is selected.
+		const modelSelection = this.editor.document.selection;
+		const selectedElement = modelSelection.getSelectedElement();
+
+		if ( selectedElement && selectedElement.is( 'image' ) ) {
+			const modelCaption = getCaptionFromImage( selectedElement );
 			viewCaption = mapper.toViewElement( modelCaption );
 		}
 
 		// If selection is placed inside caption.
-		if ( isCaption( viewSelection.editableElement ) ) {
-			viewCaption = viewSelection.editableElement;
+		const position = modelSelection.getFirstPosition();
+		const modelCaption = getParentCaption( position.parent );
+
+		if ( modelCaption ) {
+			viewCaption = mapper.toViewElement( modelCaption );
 		}
 
 		if ( viewCaption ) {

tests/manual/tickets/127/1.html

@@ -0,0 +1,6 @@
+<div id="editor">
+	<p>foo bar <a href="foo">Link <strong>bold</strong></a></p>
+	<figure class="image">
+		<img src="../../sample.jpg" alt="CKEditor logo" />
+	</figure>
+</div>

tests/manual/tickets/127/1.js

@@ -0,0 +1,30 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document, console, window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Enter from '@ckeditor/ckeditor5-enter/src/enter';
+import Typing from '@ckeditor/ckeditor5-typing/src/typing';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Link from '@ckeditor/ckeditor5-link/src/link';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Image from '../../../../src/image';
+import ImageCaption from '../../../../src/imagecaption';
+import Undo from '@ckeditor/ckeditor5-undo/src/undo';
+import ContextualToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/contextual/contextualtoolbar';
+import ImageToolbar from '../../../../src/imagetoolbar';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Enter, Typing, Paragraph, Link, Bold, Image, Undo, ImageToolbar, ContextualToolbar, ImageCaption ],
+		toolbar: [ 'bold', 'undo', 'redo' ],
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

tests/manual/tickets/127/1.md

@@ -0,0 +1,8 @@
+### Update caption visibility when typing at the end of a link [#127](https://github.com/ckeditor/ckeditor5-image/issues/127)
+
+1. Place caret at the end of the link.
+1. Type two letters.
+1. (See the note below) No error should be displayed to console, and normal typing should be possible. 
+
+NOTE: Because of [the issue in typing](https://github.com/ckeditor/ckeditor5-typing/issues/120) after typing first letter selection will be moved to the beginning of the link.  
+This note will be removed when issue will be resolved.