Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Using model selection for calculating caption visibility #136

Merged
merged 3 commits into from
Sep 6, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
22 changes: 12 additions & 10 deletions src/imagecaption/imagecaptionengine.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 ) {
Expand Down
6 changes: 6 additions & 0 deletions tests/manual/tickets/127/1.html
Original file line number Diff line number Diff line change
@@ -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>
30 changes: 30 additions & 0 deletions tests/manual/tickets/127/1.js
Original file line number Diff line number Diff line change
@@ -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 );
} );
8 changes: 8 additions & 0 deletions tests/manual/tickets/127/1.md
Original file line number Diff line number Diff line change
@@ -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.